/* HEADER */

header > div{
    display:flex;
    justify-content:space-between;
}

nav{
    display:none;
}

header > div .callNow{
    width:22vw;
}

header > div > a:first-of-type{
    width:160px;
}

header > div .callNow a{
    font-size:2.3vw;
}

header > div .callNow figure{
    width:3vw;
}

header > div .callNow figure img{
    width:100%;
}

#secondaryNavBtn{
    display:block;
}

#offer #secondarySubNav{
    display:block;
    background-color:#efefef;
}

@media only screen and (max-width:580px) {
    #secondaryNavBtn{
        width:64px;
        margin-left:calc((100% - 160px - 30vw) - 64px);
        cursor:pointer;
    }
    
    header > div .callNow{
        width:30vw;
    }
    
    header > div > a:first-of-type{
        width:160px;
    }
    
    header > div .callNow a{
        font-size:3.3vw;
    }

    header > div .callNow figure{
        width:4.09vw;
    }
}

.menuBtnOpen{
    animation-name:menuOpen;
    animation-fill-mode:forwards;
    animation-duration:.4s;
}

@keyframes menuOpen{
    from{transform:rotateZ(0deg);}
    to{transform:rotateZ(90deg);}
}

menuBtnClosed{
    animation-name:menuClosed;
    animation-fill-mode:forwards;
    animation-duration:.4s;
}

@keyframes menuClosed{
    from{transform:rotateZ(90deg);}
    to{transform:rotateZ(0deg);}
}

/* FOOTER */

@media only screen and (max-width:864px) {
    footer > div:nth-of-type(2) > div:first-of-type p{
        font-size:5vw;
    }   
    
    footer > div:nth-of-type(2) > div:nth-of-type(2){
        width:100%;
        margin:0;
        
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }
    
    footer > div:nth-of-type(2) > div:last-of-type p:not(:first-of-type):not(:last-of-type){
        max-width:80%;
    }
    
    footer > div:nth-of-type(2) > div:nth-of-type(2) h3{
        font-size:7vw;
    }
    
    footer > div:nth-of-type(2) > div:nth-of-type(2) a{
        display:block;
        width:100%;
        font-size:4vw;
        text-align:center;
    }
    
    footer > div:nth-of-type(2) > div:last-of-type{
        width:100%;
    }
    
    footer > div:nth-of-type(2) > div:last-of-type figure{
        width:80%;
    }
    
    footer > div:nth-of-type(2) > div:last-of-type figure img{
        width:100%;
    }
}

@media only screen and (max-width:500px) {
    footer > div:nth-of-type(2) > div:last-of-type p:not(:first-of-type):not(:last-of-type){
        justify-content:center;
    }
    
    footer > div:nth-of-type(2) > div:last-of-type p:not(:first-of-type):not(:last-of-type) a{
        text-align:center;
    }
    
    footer > div:nth-of-type(2) > div:last-of-type p:nth-child(5){
        margin-top:16px;
    }
    
    footer > div:nth-of-type(2) > div:last-of-type p:not(:first-of-type):not(:last-of-type) span{
        display:none;
    }
    
    .phoneTxt{
        display:flex !important;
    }
}

@media only screen and (max-width:576px) {
    footer > div:first-of-type form {
        width:92%;
        margin:0 4%;
    }
    
    footer > div:first-of-type form {
        padding:4%;
    }
}

/* HOME */

@media only screen and (max-width:760px) {
    #banner{
        height:68vw;
        background-position:59% 0%;
    }
    
    .bannerOverlay:first-of-type{
        width:64%;
        height:35vw;
        padding:4%;
        
        top:17vw;
        left:18%;
    }
    
    #goToContactForm:last-of-type{
        display:none;
    }
    
    .bannerOverlay h1{
        font-size:4.8vw;
    }
    
    .bannerOverlay:first-of-type p{
        font-size:3.5vw;
    }
    
    .bannerOverlay:first-of-type p:last-of-type{
        margin-top:5vw;
    }
}

#offerIndexSection li{
    width:calc(50% - 16px);
    margin-bottom:8vw;
    font-size:2.2vw;
}

#offerIndexSection li figure a{
    height:27vw;
}

#aboutIndexSection .sectionContent{
    width:92%;
    padding:0 4%;
    
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    justify-content:center;
}

#aboutIndexSection h2{
    font-size:5.6vw;
}

@media only screen and (max-width:656px) {
    #aboutIndexSection figure{
        margin:32px calc((100% - 207px) / 2);

        order:2;
    }

    #aboutIndexSection figure img{
        width:100%;
    }
    
    footer > div:first-of-type > figure{
        display:none;
    }

}
    
#aboutIndexSection p{
    padding:0 4%;
}

#aboutIndexSection a{
    
    order:3;
}

/* OFFER */

@media only screen and (max-width:800px) {
    #offer main > aside{
        display:none;
        width:70%;
        min-height:calc(81vh - 128px);
        
        position:absolute;
        top:148px;
        left:0;
        z-index:40;
    }
    
    #offer main > aside ul{
        width:100%;
        margin:0;
        margin-top:12vh;
        
        right:0;
    }
    
    #offer aside li.active{
        border:none;
    }
    
    #offer main > aside ul a{
        padding:12px 12%;
    }
    
    #offer aside li.active a{
        padding:12px 12%;
    }
    
    #offer section{
        box-sizing:border-box;
        width:100%;
        min-height:calc(81vh - 128px);
        padding:64px 5%;
        
        position:relative;
    }
    
    #offer section div{
        margin:auto;
    }
    
    #offer section h1{
        max-width:512px;
        margin:auto;
    }
    
    #offer section h2, #offer section p, #offer section > figure, #offer section ul{
        max-width:512px;
        margin:auto;
    }
    
    #offer section ul{
        margin-left:calc((100% - 512px) / 2 + 35px);
    }
    
    #offer section > figure{
        margin-top:32px;
    }
    
    #offer section figure img{
        width:100%;
    }
    
    #moreOffers{
        font-size:4vw;
        
        position:absolute;
        top:16px;
        left:8px;
        
        display:flex;
        align-items:center;
    }
    
    #moreOffers figure{
        margin:auto;
        margin-right:.6vw;
    }
}

@media only screen and (max-width:580px) {
    #offer section ul{
        margin-left:24px;
    }
}

.arrowFlip{
    animation-name:arrowFlip;
    animation-fill-mode:none;
    animation-duration:.8s;
}

@keyframes arrowFlip{
    from{transform:rotateZ(0deg);}
    to{transform:rotateZ(360deg);}
}

.arrowFlipBack{
    animation-name:arrowFlipBack;
    animation-fill-mode:none;
    animation-duration:.8s;
}

@keyframes arrowFlipBack{
    from{transform:rotateZ(360deg);}
    to{transform:rotateZ(0deg);}
}

/* GALLERY */

#gallery main > section li{
    width:calc(50% - 20px);
}

#gallery main > section li figure{
    height:28vw;
}

@media only screen and (max-width:656px) {
    #gallery main > section li{
        width:calc(100% - 20px);
    }
    
    #gallery main > section li figure{
        height:56vw;
    }
}

/* ABOUT */

@media only screen and (max-width:848px) {
    #aboutSection .sectionContent{
        display:flex;
        flex-direction:column;
    }
    
    #aboutSection figure{
        float:none;
        max-width:100%;
        margin:16px auto;
        
        align-self:center;
    }
    
    #aboutSection figure img{
        max-width:100%;
    }
}

/* CONTACT */

#contactSection .sectionContent{
    display:flex;
    flex-direction:column;
    align-items:center;
}

#contactSection .sectionContent aside{
    width:100%;
}