/***********/
/*Structure*/
/***********/

body
{
    background-color:#efefef;
    margin:0;
    padding:0;
    font-family: 'Roboto Slab', serif;
    font-weight:300;
}
a{text-decoration:none; color:#FFF;}
a:visited{color:#FFF;}
a:hover{color:#000;}
a:focus{color:#F03;}
#header
{
    position:relative;
    width:100%;
    margin:0;
    top:0;
    min-height:400px;
    height:auto;
    background-image:url('../img/hero.jpg');
    background-position: center center;
    background-size:cover;
}
#nav
{
    position:absolute;
    bottom:0;
    margin:0;
    padding:0;
    width:100%;
    background-color:#2b6ca3;
    height:50px;
}
#nav-menu
{
    width: 560px;
    text-align: center;
    margin:0 auto;
    padding:0;
    font-size:16px;
    line-height:50px;
}
#nav-menu-mobile-toggle
{
    display:none;
}
#nav-menu-mobile
{
    display:none;
}
.nav-menu-item
{
    cursor:pointer;
    margin:0 32px;
    display:inline-block;
    color:#FFF;
    font-weight:700;
}
.nav-menu-item:hover{color:#000;}
.nav-content
{
    background-color:#B63D32;
    width:200px;
    /*margin-top:8px;*/
    padding:4px 2px;
    display:none;
    line-height:16px;
}
.nav-content ul
{
    list-style-type:none;
    padding:0;
}
.nav-content li
{
    width:100%;
    font-size:14px;
    margin: 8px 0;
    padding: 0;
}
#nav-menu li:hover .nav-content
{
    position:absolute;
    display:block;
}
#content
{
    width:960px;
    margin:0 auto;
    text-align:center;
}
#footer
{
    margin-top:64px;
    width:100%;
    text-align:center;
}
#footer-logo-banner
{
    height:176px;
    background-color:#2b6ca3;
    border-top:1px solid #c0daf1;
    border-bottom:12px solid #002e5d;
    filter:drop-shadow(0 -2px 4px #a7a7a7);
}
#footer-logo
{
    margin:8px auto;
    height:99px;
}
#footer-phone-container
{
    margin:0 auto;
    width:500px;
    display:flex; 
    align-items:center;
    justify-content:space-between;
}
#footer-phone
{
    margin:0;
    background-color:#2b6ca3;
    font-size:21px;
    line-height:24px;
    font-weight:700;
}
#footer-info-banner
{
    height:176px;
    background-color:#3c96e0;
    position:absolute;
    width:100%;
}
#footer-info
{
    width:480px;
    margin:32px auto;
    color:#FFF;
}
.grey-bar
{
    background-color:#e5e5e5;
    width:108px;
    height:8px;
}
.hidden
{
    display:none;
}
.clear
{
    clear:both;
}

/**************/
/*Page content*/
/**************/

.link-button
{
    color:#FFF;
    font-size: 16px;
    font-weight: bold;
    width: 132px;
    height: 40px;
    background-color: #2b6ca3;
    border-radius: 2px;
    display: block;
    line-height: 40px;
}
.page-title
{
    font-size:40px;
    color:#2b6ca3;
}
.page-subtitle
{
    font-size:26px;   
    margin-bottom:8px;
}
.page-body
{
    margin:0;
    font-size:24px;
}
.page-body-promo
{
    font-size:20px;
    font-weight:bold;
}
.page-body-small
{
    margin:0;
    font-size:16px;
}
.captioned-image-container
{
    width:100%;
    height:auto;
    margin-bottom:16px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
}
.captioned-image-container.left
{
    flex-direction:row-reverse;
}
/*
.captioned-image-container.right .captioned-image-text-container{left:0;}
.captioned-image-container.right .captioned-image{right:0;}

.captioned-image-container.left .captioned-image-text-container{right:0;}
.captioned-image-container.left .captioned-image{left:0;}
*/

/*.captioned-image-container.right .captioned-image-text-container{float:left;}
.captioned-image-container.right .captioned-image{float:right;}

.captioned-image-container.left .captioned-image-text-container{float:right;}
.captioned-image-container.left .captioned-image{float:left;}*/

.captioned-image-text-container
{
    text-align:left;
    width:50%;
}
.captioned-image
{
    height:100%;
    width:auto;
    max-width:45%;
}
.captioned-image.fullwidth
{
    width:45%;
    height:auto;
}
.captioned-image-subtitle
{
    font-size:24px;
    font-weight:bold;
    margin:8px 0;
}
.captioned-image-body
{
    font-size:18px;
    font-weight:400;
}

#index-carousel-container
{
    margin:64px auto 660px;
}
#index-carousel
{
    position:absolute;
    left:0;
    height:480px;
    width:100%;
    background-color:#ACACAC;
    overflow:hidden;
    z-index:1;
}
#index-carousel-overlay
{
    position: absolute;
    width: 280px;
    height: 480px;
    left: 54%;
    background-color: #efefef;
    z-index: 99999;
    transform: skewX(-15deg);
}
#index-carousel-overlay-content
{
    transform:skewX(15deg);
    color: #b63d32;
    font-weight: bold;
    font-size: 26px;
    width:80%;
}
#index-carousel-slider
{
    height:100%;
    display:flex;
    flex-direction:row;
    transition: all 60s linear;
}
.carousel-slide
{
    height:100%;
    width:auto;
}

#contact-form-container
{
    width:50%; 
    margin:32px auto;
}
#contact-form
{
     display:flex; 
     flex-direction:column;
}
#contact-form input
{
    margin-bottom:4px;
}

/*******************/
/*Responsive styles*/
/*******************/

@media screen and (max-width: 960px) {
    #content
    {
        width:96%;
    }
}
@media screen and (max-width: 1080px) {
    #nav-menu
    {
        display:none;
    }
    #nav-menu-mobile-toggle
    {
        display: block;
        position: absolute;
        top: 32px;
        width: 80px;
        height: 80px;
        right: 5%;
        background-color: #B63D32;
        border: 1px solid #FFF;
        border-radius: 8px;
        font-size: 80px;
        font-weight: bold;
        line-height: 74px;
        color: #FFF;
        text-align: center;
        cursor: pointer;
    }
    #nav-menu-mobile
    {
        display:flex;
        position:absolute;
        top:114px;
        left:5%;
        width:90%;
        padding:0;
        margin:0;
        background-color:#2b6ca3;
        flex-direction: column;
    }
    #nav-menu-mobile.hidden
    {
        display:none;
    }
    .nav-menu-item
    {
        width:100%;
        margin:16px 0;
        padding:0 0 0 16px;
    }
    .nav-menu-item a
    {
        display:block;
        height:100%;
        width:100%;
    }
    .nav-content
    {
        display:block;
        width:100%;
        margin:16px 0;
        padding:0 0 0 16px;
    }
    .nav-content.hidden
    {
        display:none;
    }
    .nav-content
    {
        background-color:inherit;
    }
    .nav-content li
    {
        width: 100%;
        font-size: 14px;
        height: 32px;
        line-height: 32px;
        margin: 16px 0;
        padding: 0 0 0 16px;
    }
    
    #index-carousel-overlay
    {
        position: absolute;
        width: 50%;
        height: 480px;
        left: 25%;
        transform: none;
    }
    #index-carousel-overlay-content
    {
        width:95%;
        transform:none;
        margin: 0 auto;
    }
    #index-carousel-overlay-content *
    {
        margin:32px auto !important;
    }
    
    .captioned-image-container, .captioned-image-container.left
    {
        flex-direction:column-reverse;
        align-items:center;
        justify-content:space-between;
    }
    
    .captioned-image-text-container
    {
        width:100%;
    }
    .captioned-image
    {
        max-width:100%;
        height:auto;
    }
    .captioned-image.fullwidth
    {
        width:100%;
    }
    
    #contact-form-container
    {
        width:90%; 
        margin:32px auto;
    }
    
    #footer-phone-container, #footer-info
    {
        width:100%;
    }
}