*, 
*:before, 
*:after{
    box-sizing: border-box;
}
html{
    font-size: 8px;
}
@font-face {
    font-family: 'oswald';
    src: url(../assets/fonts/oswald/static/Oswald-Regular.ttf);
}
@font-face {
    font-family: 'lato';
    src: url(../assets/fonts/lato/Lato-Regular.ttf);
}
@font-face {
    font-family: 'lato-bold';
    src: url(../assets/fonts/lato/Lato-Bold.ttf);
}
body{
    margin: 0;
    padding:0;
    background-color: white;
    font-family: 'oswald', sans-serif;
    text-align: center;
}

main {
    width: 120rem;
    height: 67.5rem;
    background-color: #bbb;
    margin: 0 auto;
}

.left-side {
    width: 42rem;
    height: 62.5rem;
    float: left;
}

.left-side-top {
    width: 42rem;
    height: 12.5rem;
    background-color: #fff;
}

.left-side-middle {
    width: 42rem;
    height: 12.5rem;
    background-color: #ddd;
}

.left-side-bottom {
    width: 42rem;
    height: 37.5rem;
    background-color: #ccc;
}

.right-side {
    width: 78.0rem;
    height: 62.5rem;
    float: left;
}

.right-side-top {
    width: 78.0rem;
    height: 43.875rem;
    background-color: #ddd;
}

.right-side-bottom {
    width: 78.0rem;
    height: 18.625rem;
    background-color: #fff;
    display: flex;
    flex-direction: row;
}

.bottom {
    width: 120rem;
    height: 5rem;
    background-color: #fff;
    float: none;
    clear: both;
}
/******** Logo Pane ********/
#logo {
    width: 90%;
    /*  need to set acc to the logo*/
    margin: auto;
    padding: 1rem;
    background-color: #fff;
}

.container{
    background: url(../assets/images/logo-bkgd.svg);
    background-repeat: no-repeat;
    height: 100%;
}

.date-container {
    display: grid;
    grid-template-columns: 1.2fr 2.8fr;
    font-size: 2rem;
    padding: 1rem;
}

.time{
    color: #3E2B2F;
}

.date{
    color: #fff;
}

/* news pane design */
.slider-wrapper {
    display: flex;
}

.slider-image {
    width: 20rem;
}

.slider {
    margin-top: 1rem;
    width: 55rem;
    height: 8.5rem;
}

.news-content{
    padding: 1rem;
}

.slider-item h3{
    font-size: 2.2rem;
    text-align: left;
    margin-bottom: 1rem;
    color: #0B8261;
}
.slider-item p{
    font-size: 1.7rem;
    text-align: left;
    margin-bottom: 1rem;
    font-family: 'lato';
    color: #3E2B2F;
}
/* buttons */
.slick-dots {
    text-align: right;
}

.slick-dots li button {
    font-size: 0.8rem;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
    opacity: 1;
    color: #0B8261;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #0B8261;
}

/* marique design */
.ticker-tape {
    display: flex;
}

.date-bottom{
    width: 8rem;
    font-size: 2.5rem;
    padding: 1rem;
    background-color: #0B8261;
    color: #fff;
}

.dc-eats-menu{
    width: 12rem;
    font-size: 2.5rem;
    padding: 1rem;
    background-color: #90d5ac;
    color: #3E2B2F;
}

.marquee-container {
    width: 110rem;
    overflow: hidden;
    white-space: nowrap;
    padding: 1rem 0 1rem 10rem;
    border-top: #90d5ac solid 0.8rem;
}

.marquee-container p {
    display: inline-block;
    font-size: 2.5rem;
    margin-left: 5rem;
    font-family: 'lato';
    color: #3E2B2F;
}

.ticker-heading{
    font-family: 'lato-bold';
}

.marquee{
    display: inline-flex;
    animation: marquee 120s linear infinite;
    white-space: nowrap;
}

.marquee .marquee-collection {
    position: relative;
    left: 0;
    animation: swap 120s linear infinite;
}

/* Transition */
@keyframes marquee {
    0% {
      transform: translateX(0)
    }
    100% {
      transform: translateX(-100%)
    }
  }
  
  @keyframes swap {
    0%, 50% {
      left: 0%;
    }
    50.01%,
    100% {
      left: 100%;
    }
}

/* weather */
.weather-pane {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.weather-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 12.5rem;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem;
    background-color: #0B8261;
    color: #fff;
    position: relative;
}

.weather-tab:not(:last-child)::after {
    content: "";
    position: absolute;
    /* right: -0.375rem; */
    right: 0;
    top: 0;
    bottom: 0;
    width: 0.1rem;
    height: 75%;
    margin: auto 0;
    background-color: #fff;
    z-index: 2;
}

.weather-tab {
    font-size: 1.3rem;
}

.weather-icon {
    scale: 0.7;
    width: 6.5rem;
}

.high, .low{
    font-size: 2rem;
}

/* Youtube */
.youtube{
    width: 100%;
    height: 100%;
}

/* Motion Graphics */
.motion-graphics-pane{
    width: 100%;
    height: 100%;
}

.slick-dots li button:before{
    font-size: 1rem;
    line-height: 1rem;
    width: 1rem;
    height: 1rem;
}