*{
    font-family: 'BioRhyme', sans-serif;
    margin:0px 0px;
    transition: .5s all;
    padding:0 0;
}

body{
    height: 100%;
    padding: 0 0;
    margin:0 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

iframe::-webkit-scrollbar {
    display: none; 
}

a{
    text-decoration:none;
}

a:hover{
    transition: all 0.5s ease-in-out;
}

hr{
    height:0.3vw;
    text-decoration: none;
    border-bottom: none;
    border-top: none;
}

h1{
    font-size:2.5vw;
    text-align:center;
    display:inline-block;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: "800";
}

h2{
    margin-top:0;
    font-size:30px;
    font-family: 'Montserrat', sans-serif;
    font-weight:800;
}

h3{
    font-size:1.2vw;
}

nav label{
    display:none;        
}

#toggle{
    display: none;
}

#MobileNav a{
    display:inline-block;
    margin:auto auto;
    font-size:1.5vw;
    text-align:center;
    font-family: 'Rubik', sans-serif;
    text-transform: uppercase;
}

#MobileNav a:hover{
    color:black;
}

footer{
    margin: auto auto;
    background:#AA4646;
    width:100%;
    clear: both;
    padding:1% 0px;
}

footer h3{
    font-family: 'Rubik', sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-size:2vw;
}

#FooterLinks{
    width:30%;
    margin:1% auto;
}

#FooterLinks a{
    display:inline-block;
    margin: 0;
    width:22%;
    text-align: center;
    padding: 0;
}

#FooterLinks img{
    height:4vw;
    margin: 0;
    padding: 0;
}

/*Home Page*/
#Content{
    width:100%;
    margin: 0px auto;
}

#Title {
    width:66.0%;
    float:left;
    margin:.25% .25% 0 .25%;
    overflow:hidden;
    background-size: 100% auto;
    height:37vw;
    border-top-left-radius:1vw;
}

#FamilyBG{
    width:100% ;
    left:0;
    z-index: -1;
    display:block;
}

#Family{
    width:100% ;
    position:relative;
    top:-37vw;
    z-index: 0;
    display: block;   
}

#Right{
    float:right;
    width:33.25%;
    overflow:hidden;
    margin: .25% .25% 0 0;
    height:55.7vw;
}



/*-------------------------------------------------------- FORECAST ----------------------------------------------------------*/
#Forecast{
    margin:0;
    height:5.3vw;
    overflow: hidden;
    clear:both;
    width:100%;
    position:relative;
    z-index: -1;
}

#Forecast table{
    margin:0;
    width:100%;
    
}

#Forecast table tr{
    margin-top:.25vw;
    margin-left:.25vw;
    padding: 0;
    width:19%;
    display: inline-block;  
}

#Forecast table tr td{
    width:100%;
    display: block;
    text-align: center;
    text-shadow: none;
}

#Forecast table tr td:nth-child(1){

    width:100%;
    float:left;
    overflow:visible;
    display: inline; 
}

#Forecast table tr td:nth-child(2){
    font-weight:800;
    font-size: 1.25vw;
    line-height: 1.5vw;
    width:50%;
    float:left;
    overflow:visible;
    display: inline;  
}

#Forecast table tr td:nth-child(3){
    font-weight:800;
    font-size: 1.25vw;
    line-height: 1.5vw;
    width:50%;
    float:left;
    overflow:visible;
    display: inline;  
}

#Forecast table tr td:nth-child(4){
    font-weight:400;
    font-size: 1.25vw;
    line-height: 1.5vw;
    width:50%;
    float:left;
    overflow:visible;
    display: inline;  
}

#Forecast table tr td img{
    width:100%;
    mix-blend-mode: lighten;
    /*filter: invert(15%) sepia(79%) saturate(7499%) hue-rotate(205deg) brightness(90%) ;*/ 
}


#baron-div-7days{
    height: 200px; 
    width: 100%;
}

#Calendar{
    overflow:hidden;
    width:100%;
    height:27vw;
}

#Bottom{
    overflow:hidden;
    width:66.0%;
    height:18.5vw;
    float:left;
    margin: .25% .25% .25% .25% ;
    z-index: 0;
}




/*-------------------------------------------------------- DATE / TIME  ----------------------------------------------------------*/

#DateTime{
    width:99%;
    height:7.1vw;
    overflow:hidden;
    text-shadow: .1vw .1vw .1vw #000000;
    border-top-right-radius:1vw;
    padding:.5%;
    overflow:hidden;
}
    
#Date{
    width:35%;
    float:Left;
    padding:.25% 1%;
    overflow:visible;
    
}

#Date h1{
    width:100%;
    display:inline;
    line-height: 2.25vw; 
}

#year{
font-weight:400;
}

#Day{
    font-weight:400;
    font-size: 6vw;
    line-height: 5vw;
    text-align: left;
    width:100%;
    float:left;
    overflow:visible;
    display: inline;
}

#DayAdded{
    font-size:1.5vw;
    width:9%;
    float:right;
    display: inline;
    overflow:visible;
    margin-left:1%;    
}

#DateLeft{
    float: left;
    width:55%;
}

#DateLeft h1{
    text-align: left;
    width:100%;
    font-size: 2.5vw;
}

#DateLeft h1:nth-child(1){
    text-align: left;
    width:100%;
    font-size: 2.2vw;    
}

#DateRight{
    float: right;
    width:45%;
    height: 10vw;
    vertical-align: bottom;
    overflow: visible; 
}

#DateRight h1{
    line-height: 9vw;
    display:inline-block;
    width:90%;
    float:left;
    padding:0;
    margin:0;
    vertical-align: bottom;
}

#Temp{
    height:2.5vw;
    overflow: visible;    
}

#TimeAndTemp{
    width:55%;
    float:right;
    text-align: center;
    margin-top:1%;
}

#Time{
    clear:both;
}

#Time h1{
   font-size:4.9vw;
    line-height: 4vw;
}

#Temp h1{
    font-size:3.vw;
    line-height: 2vw;
    text-align: right;
    margin-top:0vw;
}
#Time h2{
   font-size:2.9vw;
    display:inline; 
}

#Current{
    font-size:1.2vw;
    position: relative;
    top:-.45vw;
}



/*-------------------------------------------------------- MEMO ----------------------------------------------------------*/
#MemoContainer table{
    width:100%;
    font-family: 'Montserrat', sans-serif;
    margin:0;
    border:0;
    margin:0;
    border:0;
    display: block;  
    z-index: -1;
}

.EventDate{
    height:6.0vw;
    text-align:center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.2vw;
    text-transform: uppercase;
    line-height: 2vw;
    padding-top:1.25vw;
    border:0;
    margin:0;
    text-shadow: .1vw .1vw .1vw #000000;
}

#MemoContainer table tr td:nth-child(2){
    height:6.5vw;
    background:url(../img/Events/DefaultPic.jpg);
    background-size:100% auto;
    text-align:center;
    vertical-align: center;
    color:white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: .25vw;
    text-transform: uppercase;
    line-height: 2vw;
    border:0;
    margin:0;
}

#MemoContainer table tr td:first-of-type,
#MemoContainer table tr td:nth-child(2){
    width:20%; 
    float:left;
    display:inline-block;
}

#MemoContainer table tr td:nth-child(3){
    width:50%;
    text-align:left;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1vw;
    text-transform: uppercase;
    line-height: 1vw;
    display: inline-block;
    margin-top:1%;
}

#MemoContainer table tr{
    display:block;
    margin-top:1.4vw;
   
    height:6.5vw;
    overflow: hidden;  
}


#MemoContainer table tr:nth-child(odd) td:nth-child(7){
 
    font-size: 2vw;
    text-align: right;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: .05vw .05vw .1vw #000000;
    line-height: 0;
    position:relative;
    left:2.5vw;
}

#MemoContainer table tr:nth-child(even) td:nth-child(7){

    font-size: 2vw;
    text-align: right;
    text-transform: uppercase;
    font-weight: 800;
    text-shadow: .05vw .05vw .05vw #000000;
    line-height: 0;
    position:relative;
    left:2.5vw;
}

#MemoContainer table tr:first-of-type{
    display:block;
    margin-top:.0vw;  
}

thead{
    display: none;
}



#MemoContainer table tr td:nth-child(3),
#MemoContainer table tr td:nth-child(4),
#MemoContainer table tr td:nth-child(5){
    display:inline-block;
    width:59%;
    float:right;
    margin-left:1%;
    justify-content: center;
}

#MemoContainer table tr td:nth-child(4){
    font-size:.6vw;
}

#MemoContainer table tr td:nth-child(5),
#MemoContainer table tr td:nth-child(7),
#MemoContainer table tr td:nth-child(8){
    font-size:.9vw;
    width:49%;
    float:left;
    display:inline-block;
    margin-left:1%;
    justify-content: center;
}

#MemoContainer table tr td:nth-child(6){
    font-size:.9vw;
    width:49%;
    float:left;
    display:inline-block;
     margin-left:1%;
    justify-content: center;
}

td img{
    width:100%;
}


#table2 tr:first-of-type{
    margin-top:1.45vw;
}

.LocationIcon{
    height:.8vw;
    width:.6vw;
    padding-right:.4vw;
    margin-top:.2vw;
}

.ClockIcon{
    height:.70vw;
    width:.70vw;
    padding-right:.2vw;
    margin-top:.2vw;
}

#MemoHeader{
    width: 100%;
    
    background-size:100% auto;
    margin-top:0%;
    /*
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    */ 
}

#MemoHeader h1{
    font-size:2vw;
    padding-top: 3% ;
    padding-bottom: 2% ;
    text-align: center;
    width: 100%;
    
    letter-spacing: .1vw;
    text-shadow: .1vw .1vw .1vw #000000;
}

#Memo{
    width:100%;
    height:75vw;
    overflow:hidden;
}

#MemoContainer{
    width:100.7%;
    height:150vw;
    position:relative;
    animation: TheScroll 15s ease-out infinite;
    will-change: transform;
    overflow: visible;
    left:-.25vw;
    top:-.25vw;
    z-index: -1;
}

#MemoUpdate{
    width:100%;
}

#Placeholder{
   float:left;
    width:100%;
    position:relative;
    top:0;
    left:0;
    transform:rotateY(0deg);
    animation: ImageRotate 60s infinite;  
    z-index: 0;
}

#AdLoop{
    width: 100%;
    opacity: 1;
    z-index: -1;
}

@keyframes TheScroll{
    
    0%{
        transform: translateY(0px);
        transform: translateZ(0);
        }
    
 
    
    47%{
        transform: translateY(0px);
        
        }
    
    50%{
        transform: translateY(-40vw);

        }
    97%{
        transform: translateY(-40vw);
;
        }

    
    100%{
        transform: translateY(-77.5vw);
        }    
    }

@keyframes ImageRotate{
    
    0%{
        opacity: 1;
        }
    
 
    
    48%{
        opacity: 1;
        
        }
    
    50%{
        opacity: 0;

        }
    98%{
        opacity: 0;
;
        }

    
    100%{
        opacity: 1;
        }    
    }



.ShortDay td{
    font-weight:800;
    font-size: 1.25vw;
    line-height: 1.5vw;
}


#FamilyTest{
    width:100%;
    background: black ;
}


#Top{
    width:100%;

}


#FamilyTest h1 img{
    width:100%;
    color: black;
    font-size: 2vw;
}
#FamilyTest article section{
    width:20%;
    
    margin:auto 5%;
    display: inline-block;
}

#FamilyTest article{
    width:100%;
    float: left;
    margin:1%;
    display: block;
}
    
#FamilyTest{
    width:100%;
    display: block
}

#FamilyTest h1{
    width:100%;
    display: block;
    color:white;
}
#FamilyTest section h1{
    width:100%;
    color: black;
    font-size: 1vw;
    display: block;
}

.Family{
    width:20%;
    display: inline-block;
}
.People{
    width:25%;
    float: left;
    display: inline-block;
    height:6.0vw;
    margin: 0 auto;
    padding: 0;    
}

.People h3{
    width:100%;
    font-family: Gotham;
    text-transform: uppercase;
    font-weight: 600;
    color: white;
    text-align: center;
    font-size: .5vw ;
    line-height: .5vw;
    display: block;
    text-shadow: .1vw .1vw .1vw black;
    margin-top: .2vw;
    padding: 0;
    
}

.People h3:first-of-type{
    margin-top:6.5vw;
    margin-bottom: -.2vw;
}

.FamilyCategories{
    display: block;
    background: black;
}

#Brooke{
    width:100%;
    height:100vw;
    padding-top:1vw;
    display:block;

}
#Brooke img{
    height:47vw;
    display:block;
    margin: 0 auto;
    
}
#Brooke h1{
    color:white;
    display:block
}
#Brooke video{
    display:block;
    margin: .5vw auto;
    width:40%;
}