@charset: utf-8;

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

html,
body * {
    box-sizing: border-box;
    font-family: 'Oswald', sans-serif;
}

html {
    font-size: 8px;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
    background-color: #000000;
}

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

main {
    width: 120.0rem;
    height: 67.5rem;
    margin: 0 auto;
    background-color: #DDD;
    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;
}

.bottom {
    width: 120.0rem;
    height: 5.0rem;
    background-image: url('../images/botton-bg.png');
    background-size: 101%;
    background-position: top;
  
	overflow: hidden;
	position: relative;
}

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



.left-side-top {
    width: 42.0rem;
    height: 12.5rem;
    background-color: #ffffff;
    /* padding: 1.0rem; */
    font-size: 3.0rem;
    display: flex;
    flex-direction: column;
}
/* weather pane */
.left-side-middle {
    width: 42.0rem;
    height: 12.5rem;
   background-color: #eaf7ff;
    background-position: -1px;
    color: #666666;
    display:flex;
    flex-direction: row;

}

.wea_box{
    width: 8.4rem;
    height: 12.5rem;
    display: flex;
    justify-content: center;
    align-content: center;
    justify-items: center;
}

.trans_box{
    width: 90%;
    height: 90%;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    justify-items: center;
}


.img_weather{
   width: 35px;
   height: auto;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));

}
.day_weather{
    color:#5f5f5f;
    height: 3.1rem;
    line-height: 3.1rem;
    justify-content: center;
    align-self: center;
    font-family: 'Oswald', sans-serif;
    font-size: 1.3rem;
   font-weight: 400;
}
.graphic_weather{
    height: 5rem;
    justify-content: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    align-self: center;
}
.temp_weather{
    height: 2rem;
    justify-content: center;
    align-self: center;
    line-height: 2rem;
    font-family: 'Oswald', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color:#727272;
}

.left-side-bottom {
    width: 42.0rem;
    height: 37.5rem;
    background-color: #727272;
    color: #FFF;
}

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

/* NEWS PANEL */
.right-side-bottom {
    width: 78.0rem;
    height: 18.625rem;
    background-color:#f4f4f4;
    color: #585858;
    display: flex;
    flex-direction: row;
    border-bottom: 6px solid #0b8261;
}

.left-image {
    position: relative;
    height: 17.85rem;
    width: 20rem;
    background-image: url('../images/whitby_picture.png');
    background-size: 100%;
    order: 2; 
}

.slider {
    position: relative;
    height: 18.625rem;
    width: 58rem;
    display: flex;
    flex-direction: column;
    order: 1; 
    
}

.dctitle {
    height: 6.6rem;
    font-size: 1.5rem; 
    z-index: 2;
   background-image: url('../images/dctitle_png.png');
   background-size: 95%;
   background-repeat: no-repeat;
   background-color: #ffffff;
 
}
.slidercontent{
    height: 9.4rem;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: row;
    z-index: 1;
}
.content {
    background-color: #f4f4f4;
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    color: #4c4a3c;
    margin-right: 2.3rem;
    margin-left: 2rem;
    padding-top: 1.3rem;
    height: 6.2rem;
    /* margin-top: 0.3rem;; */
    line-height: 22px;
    letter-spacing: 0.6px;
    z-index: 1;
}

.slick-dots {
    bottom: 0;
    background-color: #f4f4f4;
    margin-bottom: -25px;
}

.slick-dots li {
    margin: 0 5px; /* Adjust the spacing between dots */
}

.slick-dots li button::before {
    opacity: .5;
    color: rgb(155, 155, 155);
    background-color: #f4f4f4;

   
}

.slick-dots li.slick-active button::before {
    opacity: 1;
    color: rgb(255, 159, 14);
    background-color: #f4f4f4;
  
}




.left-bottom {
	position: absolute;
	
	left: 0;
	z-index: 100;
	height: 5.0rem;
	width: 20rem;
	line-height: 5.0rem;
	padding-left: 2.2rem;
	font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color:#ffffff;
	text-wrap: nowrap;
   
}

.left-bottom2{
    position: relative;
	
	left: 20rem;
	z-index: 100;
	height: 5.0rem;
	width: 13.5rem;
	line-height: 5.0rem;
   
	padding-left: 3.4rem;
	font-family: 'Oswald', sans-serif;
    font-size: 21px;
    font-weight: 400;
    color:#363636;
	text-wrap: nowrap;
}



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


.logo {
    height: 60%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo-dc {
    width: 45%; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #333; 
    padding-right: 10px;
}

.logo-dc img {
    height: 3.2rem;
    max-width: 100%;
}



.logo-fac {
    color: #474747;
    font-size: 1.7rem;
    text-align: left;
    padding-left: 3rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.date {
    height: 50%;
    background-image: url('../images/date_bg.png');
    background-size: 102%;
    background-position: -1px;
    flex-direction: row;
    color: #ffffff;
    display: flex;
    /* justify-content:space-between; */
    align-items: center;
    
}
.date-date {
    font-size: 2.6rem; 
    width: 50%;
    text-align:center;
    
    letter-spacing: 0.3px;
    line-height: 2.6rem;

}

.date-time {
    font-size: 2.7rem; 
    letter-spacing: 0.5px;
    padding-right: 5REM ;
    padding-left: 4REM;
   
}
.day-suffix {
    font-size: smaller; /* Adjust the font size as needed */
    position: relative;
    top: -2px; /* Adjust the position as needed */
}


/*   **********    TICKER TAPE     **********     */


.ticker-wrapper {
   position: absolute;
   bottom: 0;
   left : 31.8rem;
	width: 68%;
    right: 0;
	overflow: hidden;
	height: 5.0rem;
    background-color: transparent;
	padding-left: 100%;
    box-sizing: content-box;
	line-height: 5.0rem;
	font-size: 20px;
    color: #4b4b4b;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 1.5% 0%);
}

    
@keyframes ticker {
	0% {transform: translate3d(0%, 0, 0);}
	100% {transform: translate3d(-550%, 0, 0);}
}

    
.ticker-transition {
	width: 18.0rem;
	height: 5.0rem;
	line-height: 5.0rem;
    bottom: 0;
    display: flex;
	white-space: nowrap;
	padding-right: 100%;
	box-sizing: content-box;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

	animation: ticker 32s linear infinite;
    color: #4b4b4b;
}



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

.clear-float {
    float: none;
    clear: both;
}
#obj {
    width: 300%;
    height: 250%;
    max-width: 84rem;
    max-height: 80.5rem;
    transform: scale(0.5); /* Adjust the scaling factor as needed */
    transform-origin: top left;
}

#youtube_iframe{
    width: 100%;
    height: 100%;
}

 #motion_iframe{
    width: 100%;
    height: 100%;
}