@charset: utf-8;

/*   **********    SETUP OF DOCUMENT     **********     */

html,
body * {
    box-sizing: border-box;
}

html {
    font-size: 8px;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Lato", sans-serif;;
    background-color: #fff;
}

/*   **********    MAIN ELEMENTS     **********     */

main {
    width: 120.0rem;
    height: 67.5rem;
    margin: 0 auto;
    color: #BBB;
}

/*   **********    Container ELEMENTS     **********     */

.left_side {
    width: 42.0rem;
    height: 62.5rem;
    background-color: #BBB;
    color: #FFF;
    float: left;
}

.right_side {
    width: 78.0rem;
    height: 62.5rem;
    background-color: #AAA;
    color: #FFF;
    float: left;
}

/*   **********    Content ELEMENTS     **********     */

.left_side_top {
    width: 42.0rem;
    height: 12.5rem;
    background-color: #fff;
    color: #FFF;
    font-size: 3.0rem;
    text-align: center;
}

.left_side_middle {
    width: 42.0rem;
    height: 12.5rem;
    background-color: #909090;
    color: #FFF;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    text-align: center;
}

.weather_item {
    width: 20%;
    background-color: #721b43;
    /* border-right: 1px solid white; */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
}

.left_side_bottom {
    width: 42.0rem;
    height: 37.5rem;
    overflow: hidden;
    background-color: #fff;
}

.right_side_top {
    width: 78.0rem;
    height: 43.875rem;
    background-color: #ABABAB;
    color: #FFF;
}

.right_side_bottom {
    width: 78.0rem;
    height: 18.625rem;
    background-color: #888;
    color: #FFF;
}

/*   **********    LOGO and DATE TIME     **********     */

.dc-logo {
    height: 8.75rem;
    width: 42.0rem;
    width: 100%;
    padding: 1.0rem 0rem;
}
.dc-logo img{
    width: 80%;
}

.date-time {
    display: flex;
    justify-content: space-between;
    padding: 0 4rem 0 4.5rem;
    height:  3.75rem;
    width: 42.0rem;
    color: #fff;
    font-family: 'oswald', sans-serif; 
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 3.75rem;
    background-color: #0b8261;
    background-image: url(../assets/time-bkg.png);
    background-size: cover;
}

.time-style {
    color: #231f20;
}

/*   **********    NEWS PANE    **********     */

.slider-right {
    width: 80%;
    color: #727273;
    padding: 1.0rem 2.0rem;
}

.new-title {
    font-family: 'oswald', sans-serif;
    color:#0b8261;
    margin-bottom: 1.5rem;
}

.new-title h2 {
    text-transform: uppercase;
    font-size: 3.2rem;
    font-weight: 300;
    margin-bottom: 1.0rem;
}
.new-title img {
    width: 100%;
}

.slider {
    width: 98%;
    font-size: 1.6em;
    line-height: 2.5rem;
}

.slider-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    overflow: hidden;
}

.slider-left {
    width: 20%;
    height: auto;
}

.slider-left img {
    width: 101%;
}

.slick-dots {
    bottom: -4.5rem;
}

.slick-dots li.slick-active button:before {
    color:#0b8261;
    font-size: 1.2rem;
}

/*   **********    CLEAR CODE FOR FLOATS     **********     */

.clearFloat {
    float: none;
    clear: both;
}

/* ---------------- bottom style --------------- */
.bottom {
    width: 120.0rem;
    height: 5.0rem;
    color: #FFF;
    position: relative;
    border-top: 0.5rem solid #0b8261;
}

.ticker-left {
    height: 5.0rem;
    width: 19rem;
    background-image: url(../assets/dceats-bkg.png);
    background-size: cover;
    display: flex;
    align-items: center;
    gap: 1.0rem;;
    position: absolute;
    z-index: 10;
    padding: 1.0rem 2.5rem;
}

.ticker-left img {
    max-width: 6rem;
    height: auto;
}

.ticker-left p {
    font-family: 'oswald', sans-serif;
    background-color: #ffb600;
    text-transform: uppercase;
    font-size: 1.7rem;
    font-weight: 200;
    padding: 0.2rem;
    height: 2.2rem;
    transform: rotate(-90deg);
}

/* ------------ ticker tape animation ------------ */


.ticker-wrap {
    width: 100%;
    height: 80px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    bottom: 0;
    height: 4rem;  
    line-height: 3rem;
}
  .ticker {
    display: inline-block;
    margin-top: 5px;
    animation: marquee 200s linear infinite;
  }
  
  .item-collection-1 {
    position: relative;
    left: 0%;
    animation: swap 200s linear infinite;
  }
  
  .item {
    display: inline-block;
    padding: 0 1rem;
    font-size: 2rem;
    color: #727272;   
    font-weight: 400;
    font-family: 'oswald', sans-serif;
    text-transform: uppercase;
  }

  .item-title {
    color: #0b8261;
  }

  .item-divider {
    color: #721b43;
    font-family: 'oswald', sans-serif;
    font-size: 2.5rem;
    font-weight: 100;
  }
  
  /* Transition */
  @keyframes marquee {
    0% {
      transform: translateX(0)
    }
    100% {
      transform: translateX(-100%)
    }
  }
  
  @keyframes swap {
    0%, 50% {
      left: 0%;
    }
    50.01%,
    100% {
      left: 100%;
    }
  }



  .odd {
    background-color: #721b43;
  }

  .even {
    background-color: #8b1f51;
  }

  .name-of-date {
    color: #fff;
    font-size: 1.7rem;
    font-family: 'oswald', sans-serif;
  }

  .weather-icon {
    text-align: center;
  }

  .weather-icon img {
    width: 50%;
  }

  .youtube, .motion-graphics-iframe {
    width: 100%;
    height: 100%;
  }