/* CSS written by Designers Friend Ltd. */


html {
    overflow-x: hidden;
}

html,body{
height:100%;
background-color: white;
}


body{
font-family: 'Gotham SSm A', 'Gotham SSm B';
font-weight: 300;
font-style: normal;
color:rgb(051,051,051);
}

header{
background-color: black;
color:white;
min-width:700px; 
}

.preserve-3d{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;    
}

.vertical-align{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

a{
color:inherit;
text-decoration: none;    
}

#details{
text-align:right;
}

#content{
position: relative;
min-width:700px;   
}

.site{
height:100%;
display: inline-block;
background-repeat:no-repeat;
background-position:center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
overflow: hidden;
}


.no-margin-right{
margin-right: 0 !important;    
}

.overlay{
position: absolute;
width:100%;
height:100%;
opacity:0;
-webkit-transition-duration: 0.3s; /* Safari */
transition-duration: 0.3s;
overflow: hidden;
}

.overlay-copy{
width:80%;
margin:auto;
font-size:1.25em;
line-height:1.25em;
}

.logo-overlay{
position: absolute;
width:100%;
height:100%;
opacity:1;
-webkit-transition-duration: 0.3s; /* Safari */
transition-duration: 0.3s;
}

.site_logo{
width:100%;
position: relative;
}


.site:hover > .overlay{
    opacity:1;
    -webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;
}

.site:hover > .logo-overlay{
    opacity:0;
    
}

.slideshow-fullscreen-fade{
position:absolute;
width:100%;
height:100%;
top:0;
bottom:0;
left:0;
right:0;
}



.slide-fullscreen{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
}




@media screen and (min-width:0px) and (max-width:979px) {
    body, .normal-size-text{
    font-size:12px;
    line-height:15px;
    }

    header{
        height:50px;  
    }

    #details{
        margin-right:15px;
    }

    .spacer{
        margin-right:15px;
    }

    #content{
        border: 15px solid white;
        /* header + (border * 2) = 80 */
        height: -webkit-calc(100vh - 100px);
        height: -moz-calc(100vh - 100px);
        height: calc(100vh - 100px);     
    }

    .site{
        /* calc = (100 / cols) - ( (margin * inner_cols) / cols ) = 10 
           calc = (100 / 3) - ( (15 * 2) / 3 )  */
        width: -webkit-calc(33.333% - 10px);
        width: -moz-calc(33.333% - 10px);
        width: calc(33.333% - 10px);
        margin-right:15px;
    }

    #logo{
        width: 100px;
        float:left;
        margin-left:18px;

    }

    #msa-anchor{
        left:18px;
    }



}


@media screen and (min-width:980px) and (max-width:1199px) {

    body, .normal-size-text{
    font-size:13px;
    line-height:16px;
    }

    header{
        height:60px;  
    }

    #details{
        margin-right:18px;
    }

    .spacer{
        margin-right:18px;
    }

    #content{
        border: 18px solid white;
        /* header + (border * 2) = 96 */
        height: -webkit-calc(100vh - 116px);
        height: -moz-calc(100vh - 116px);
        height: calc(100vh - 116px);    
    }

    .site{
        /* calc = (100 / cols) - ( (margin * inner_cols) / cols ) = 12 
           calc = (100 / 3) - ( (18 * 2) / 3 )  */
        width: -webkit-calc(33.333% - 12px);
        width: -moz-calc(33.333% - 12px);
        width: calc(33.333% - 12px);
        margin-right:18px;
    }

    #logo{
        width: 120px;
        float:left;
        margin-left:18px;
    }

    #msa-anchor{
        left:18px;
    }

}


@media screen and (min-width:1200px) and (max-width:1499px) {
    
    body, .normal-size-text{
    font-size:15px;
    line-height:19px;
    }

    header{
        height:70px;  
    }

    #details{
        margin-right:24px;
    }

    .spacer{
        margin-right:24px;
    }

    #content{
        border: 24px solid white;
        /* header + (border * 2) = 118 */
        height: -webkit-calc(100vh - 136px);
        height: -moz-calc(100vh - 136px);
        height: calc(100vh - 136px);    
    }

    .site{
        /* calc = (100 / cols) - ( (margin * inner_cols) / cols ) = 16 
           calc = (100 / 3) - ( (24 * 2) / 3 )  */
        width: -webkit-calc(33.333% - 16px);
        width: -moz-calc(33.333% - 16px);
        width: calc(33.333% - 16px);
        margin-right:24px;
    }

    #logo{
        width: 150px;
        float:left;
        margin-left:24px;
    }

    #msa-anchor{
        left:24px;
    }

}


@media screen and (min-width:1500px)  {

    body, .normal-size-text{
    font-size:17px;
    line-height:22px;
    }

    header{
        height:80px;  
    }

    #details{
        margin-right:30px;
    }

    .spacer{
        margin-right:30px;
    }

    #content{
        border: 30px solid white;
        /* header + (border * 2) = 140 */
        height: -webkit-calc(100vh - 152px);
        height: -moz-calc(100vh - 152px);
        height: calc(100vh - 152px); 
    }

    .site{
        /* calc = (100 / cols) - ( (margin * inner_cols) / cols ) = 20 
           calc = (100 / 3) - ( (30 * 2) / 3 )  */
        width: -webkit-calc(33.333% - 20px);
        width: -moz-calc(33.333% - 20px);
        width: calc(33.333% - 20px);
        margin-right:30px;
    }

    #logo{
        width: 170px;
        float:left;
        margin-left:30px;
    }

    #msa-anchor{
        left:30px;
    }


}

#msa-anchor{
position: fixed;
bottom:10px;  
}

#logo{
display:inline-block;
position: relative;
z-index:100;
}

#logo img{
width:100%;    
}