/* Media Queries
--------------------------------------------------------*/


/*
Note: The best way to structure the use of media queries is to create the queries 
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it 
there. 
*/

/* 4K HD TV | Huge Broadcasting Screens */

@media (max-width: 3840px) {
   
}

/* Full HD TV */

@media (max-width: 1920px) {
   
}


/* Desktop | Large Laptop */

@media (max-width: 1366px) {
}

/* Normal Laptop | Google Nexus 10 | 720p HD TV | 
Amazon Kindle Fire HDX (Landscape) | Foxconn InFocus */

@media screen and (max-width: 1280px) {
    .hero-heading, .project-info h1{
        font-size: 9rem;
    }
}


/* Small Laptop | Apple iPad Air 2 (Landscape) | iPad Mini 2 (Landscape) | Blackberry PlayBook*/

@media screen and (max-width: 1024px) {
   
    .hero-heading, .project-info h1{
        font-size: 7rem;
    }
    .overlay-nav nav{
        font-size: 40px;
    }
}


/* Normal Tablets | Google Nexus 7 (Landscape) */

@media screen and (max-width: 960px) {
    .hero-heading, .project-info h1{
        font-size: 6rem;
    }
    .overlay-nav nav{
        font-size: 36px;
    }
}


/* iPhone X (Landscape) */

@media screen and (max-width: 812px) {
    .hero-heading, .project-info h1{
        font-size: 5rem;
    }
    .overlay-nav nav{
        font-size: 32px;
    }
}

/* Small Tablets | Google Nexus 10 (Portrait) | Amazon Kindle Fire HDX (Portrait) */

@media screen and (max-width: 800px) {
    .hero-heading, .project-info h1{
        font-size: 5rem;
    }
    .overlay-nav nav{
        font-size: 30px;
    }
}


/* Small Tablets | Apple iPad Air 2 (Portrait) | iPad Mini 2 (Portrait)*/

@media screen and (max-width: 768px) {
    .overlay-nav nav{
        font-size: 28px;
    }
    .c-logo-brand {
        font-size: 28px;
        line-height: 38px;
    }
    .button_container{
        left: -50px;
        height: 25px;
        width: 30px;
    }
    .promo-grid-node {
        margin: 20px 0;
    }
    .overlay-nav.open{
        background-color: rgba(255,255,255,0.9);
    }
    .hero-heading{
        margin-top: 30px;
    }
    .project-info h4{
        margin-top: 20px;
    }
}


/* Samsung Galaxy S8 (Landscape) */

@media screen and (max-width: 740px) {
    .overlay-nav nav{
        font-size: 24px;
    }
    .overlay-nav .slogan-text{
        display: none !important;
    }
    .sticky-border {
        display: none;
    }
    div#preloader{
        border: none;
    }
    .filter-project, .close-project{
        top: 37px;
    }
}

/* Apple iPhone 7 Plus (Landscape) | Apple iPhone 6s Plus (Landscape) | 
Apple iPhone 6 Plus (Landscape)*/

@media screen and (max-width: 736px) {
    .overlay-nav nav{
        font-size: 22px;
    }
}


/*Google Nexus 6 (Landscape) and similar */

@media screen and (max-width: 732px) {
    .overlay-nav nav{
        font-size: 22px;
    }
}

/* Apple iPhone 8 (Landscape) | Apple iPhone 7 (Landscape) | 
iPhone 6s (Landscape)| iPhone 6 (Landscape)| and similar*/

@media screen and (max-width: 667px) {
    .container {
        width: 587px;
        padding-left: 40px;
        padding-right: 40px;
    }
    div#preloader{
        left: 10px;
        width: 98%;
    }
    header.masthead {
        width: 70px;
        height: 70px;
        position: fixed;
        background-color: transparent;
    }
    section.mastwrap {
        margin-left: 0px;
        margin-top: 80px;
        margin-right: 0;
    }
    .promo-grid{
        width: 60%;
        margin: 0 20%;
    }
    .button_container {
        position: fixed;
        left: 0px;
        bottom: -30px;
    }
    .c-logo-brand-name-wrapper{
        display: none;
    }
    .overlay-nav::before {
        width: 100%;
    }
    .overlay-nav::after {
        display: none;
    }
    .overlay-nav {
        left: 0;
        width: 100%;
    }
    .overlay-nav nav{
        margin-left: 0;
        text-align: center;
    }
    .overlay-nav ul {
        width: 100%;
    }
    .overlay-nav ul li{
        width: 50%;
        margin: 0 25%;
    }
    .overlay-nav nav {
        font-size: 36px;
    }
}


/* Samsung Galaxy Note 3 (Landscape) | Galaxy Note2 (Landscape)| 
Galaxy S7 (Landscape) | Galaxy S6 (Landscape) |
Galaxy S5 (Landscape) | Google Nexus 5 (Landscape) | Google Nexus 4 (Landscape) | 
Sony Xperia Z3 (Landscape) | Nokia N9 (Landscape) | LG Optimus L70 (Landscape) |
OnePlus One (Landscape) and similar smart phones and phablets.
*/

@media screen and (max-width: 640px) {
    .container {
        width: 560px;
        padding-left: 40px;
        padding-right: 40px;
    }
    .hero-heading, .project-info h1{
        font-size: 4rem;
    }
    .overlay-nav nav{
        font-size: 24px;
    }
}


/* Regular Smart Phones | Google Nexus 7 (Portrait)*/

@media screen and (max-width: 600px) {
    .container {
        width: 520px;
        padding-left: 40px;
        padding-right: 40px;
    }
}


/* Medium Smart Phones | Apple iPhone SE (Landscape)*/

@media screen and (max-width: 568px) {
    .container {
        width: 488px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Small Smart Phones | Nokia Lumia 520 (Landscape)*/

@media screen and (max-width: 533px) {
    .container {
        width: 453px;
        padding-left: 40px;
        padding-right: 40px;
    }
    .hero-heading, .project-info h1{
        font-size: 3rem;
    }
    .overlay-nav nav{
        font-size: 18px;
    }
    .h1, h1 {
        font-size: 1.8rem;
    }
    .badge-dark {
        padding: 40px;
    }
    .promo-grid{
        width: 70%;
        margin: 0 15%;
    }
}


/* Other Small Smart Phones*/

@media screen and (max-width: 480px) {
    .container {
        width: 420px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .overlay-nav nav {
        font-size: 28px;
    }
}


/* Apple iPhone 8 Plus (Portrait Mode) | Apple iPhone 7 Plus (Portrait Mode) | 
Apple iPhone 6s Plus (Portrait Mode) | Apple iPhone 6 Plus (Portrait Mode)*/

@media screen and (max-width: 414px) {
    .container {
        width: 354px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .h1, h1 {
        font-size: 1.5rem;
    }
}


/* LG Optimus L70 (Portrait) and similar */

@media screen and (max-width: 384px) {
    .container {
        width: 324px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Apple iPhone X (Portrait) | Apple iPhone 8 (Portrait) | Apple iPhone 7 (Portrait) | 
Apple iPhone 6s (Portrait) | Apple iPhone 6 (Portrait)*/

@media screen and (max-width: 375px) {
    .container {
        width: 315px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .hero-heading, .project-info h1{
        font-size: 2.5rem;
    }
}

/* Samsung Galaxy Note 3 (Portrait) | Galaxy Note2 (Portrait)| 
Galaxy S7 (Portrait) | Galaxy S6 (Portrait) |
Galaxy S5 (Portrait) | Google Nexus 5 (Portrait) | Google Nexus 4 (Portrait) | 
Sony Xperia Z3 (Portrait) | Nokia N9 (Portrait) | OnePlus One (Portrait) | 
Sony Xpreia Z3 (Portrait) and similar smart phones and phablets.
*/
@media screen and (max-width: 360px) {
    .container {
        width: 300px;
        padding-left: 30px;
        padding-right: 30px;
    }
}


/* Apple iPhone SE, iPhone 5S, 5, 4S & 4, Nokia Lumia 520 (All Portrait) and Very Small Mobile Phones*/

@media screen and (max-width: 320px) {
    .container {
        width: 260px;
        padding-left: 30px;
        padding-right: 30px;
    }
}