/* XL - Extra Large Screen Devices */
@media (min-width: 1920px){
    /* BEGIN - Header */
    header#header{
        padding-inline: 75px;
    }

    header#header > nav{
        position: initial;
        padding-top: 0;
        padding-right: 0;
        width: auto;
        height: auto;
        background-color: transparent;
        justify-content: center;
        align-items: center;
        flex-flow: row wrap;
        display: flex;
    }

    header#header > nav#nav.open{
        transform: translateX(0%);
        opacity: 1;
    }

    header#header > nav#nav.close{
        transform: translateX(0%);
        opacity: 1;
    }

    header#header > nav > ul{
        justify-content: center;
        align-items: center;
        flex-flow: row wrap;
        gap: 25px;
    }

    header#header > nav > ul > li > a{
        font-size: 1rem;
        font-weight: 400;
        color: #F7F7F7;
    }

    header#header > button#btn-menu{
        display: none;
    }
    /* END - Header */

    /* BEGIN - Hero */
    /*#s-hero{
        height: 800px;
    }
        
    #s-hero > div#hero-content{
        padding-top: 100px;
        padding-bottom: 50px;
        gap: 175px;
    }
    
    #s-hero > div#hero-content > div > h2{
        font-size: 3.25rem;
    }
    
    #s-hero >div#hero-content > div > hr{
        margin-top: 5px;
        margin-bottom: 10px;
        border-bottom-width: 7px;
        width: 10%;
        height: 7px;
    }
    
    #s-hero > div#hero-content > div > p{
        padding-right: 35%;
        font-size: 1.15rem;
    }
    
    #s-hero > div#hero-content > div.hero-svg{
        display: flex;
    }*/
    /* END - Hero */

    #s-servicos-bar{
        display: block;
    }

    #s-quemsomos{
        padding: 50px 25px;
        flex-flow: row wrap;
        gap: 5%;
    }
    
    #s-quemsomos > div{
        max-width: 35%;
    }
    
    #s-quemsomos > div > div > hr{
        margin-top: 5px;
        margin-bottom: 15px;
        width: 75px;
    }
    
    #s-quemsomos > div > div > p{
        max-width: 480px;
        font-size: 0.85rem;
        text-align: justify;
        line-height: 1.5;
        overflow-wrap: break-word;
    }
    
    #s-quemsomos > div > div > p > strong{
        font-weight: 400;
    }

    #s-marcas{
        height: auto !important;
    }

    #s-marcas > div#veja-mais-marcas{
        display: none !important;
    }

    #s-marcas > h2{
        font-size: 1.25rem;
    }

    #s-servicos{
        padding: 50px 25px;
    }

    #s-servicos > div{
        gap: 50px 50px;
    }
}

/* LG - Large Screen Devices */
@media (min-width: 1024px) and (max-width: 1919px){
    /* BEGIN - Header */
    header#header{
        padding-inline: 50px;
    }

    header#header > nav{
        position: initial;
        padding-top: 0;
        padding-right: 0;
        width: auto;
        height: auto;
        background-color: transparent;
        justify-content: center;
        align-items: center;
        flex-flow: row wrap;
        display: flex;
    }

    header#header > nav#nav.open{
        transform: translateX(0%);
        opacity: 1;
    }

    header#header > nav#nav.close{
        transform: translateX(0%);
        opacity: 1;
    }

    header#header > nav > ul{
        justify-content: center;
        align-items: center;
        flex-flow: row wrap;
        gap: 25px;
    }

    header#header > nav > ul > li > a{
        font-size: 1rem;
        font-weight: 400;
        color: #F7F7F7;
    }

    header#header > button#btn-menu{
        display: none;
    }
    /* END - Header */

    /* BEGIN - Hero */
    /*#s-hero{
        height: 480px;
    }
        
    #s-hero > div#hero-content{
        padding-top: 100px;
        padding-bottom: 25px;
        gap: 50px;
    }
    
    #s-hero > div#hero-content > div > h2{
        font-size: 2.25rem;
    }
    
    #s-hero >div#hero-content > div > hr{
        margin-top: 5px;
        margin-bottom: 10px;
        border-bottom-width: 7px;
        width: 10%;
        height: 7px;
    }
    
    #s-hero > div#hero-content > div > p{
        padding-right: 35%;
        font-size: 1.10rem;
    }
    
    #s-hero > div#hero-content > div.hero-svg{
        display: flex;
    }*/
    /* END - Hero */

    #s-servicos-bar{
        display: block;
    }

    #s-quemsomos{
        padding: 50px 25px;
        flex-flow: row wrap;
        gap: 5%;
    }
    
    #s-quemsomos > div{
        max-width: 35%;
    }
    
    #s-quemsomos > div > div > hr{
        margin-top: 5px;
        margin-bottom: 15px;
        width: 75px;
    }
    
    #s-quemsomos > div > div > p{
        max-width: 480px;
        font-size: 0.85rem;
        text-align: justify;
        line-height: 1.5;
        overflow-wrap: break-word;
    }
    
    #s-quemsomos > div > div > p > strong{
        font-weight: 400;
    }

    #s-marcas{
        height: 224px;
    }

    #s-marcas > h2{
        font-size: 1.25rem;
    }

    #s-servicos{
        padding: 50px 25px;
    }

    #s-servicos > div{
        gap: 50px 10px;
    }
}

/* MD - Medium Screen Devices */
@media (min-width: 768px) and (max-width: 1023px){
    /* BEGIN - Header */
    header#header{
        padding-inline: 25px;
    }

    header#header > nav#nav.open{
        transform: translateX(0%);
        opacity: 1;
        will-change: transform, opacity;
        transition: all 150ms ease-in;
    }

    header#header > nav#nav.close{
        transform: translateX(100%);
        opacity: 0;
        will-change: transform, opacity;
        transition: all 150ms ease-out;
    }

    header#header > nav{
        position: fixed;
        top: 100px;
        right: 0;
        padding-top: 50px;
        padding-right: 25px;
        width: 100%;
        height: calc(100vh - 100px);
        height: calc(100dvh - 100px);
        background-color: #F7F7F7;
        justify-content: flex-start;
        align-items: flex-end;
        flex-flow: column wrap;
        display: flex;
    }

    header#header > nav > ul{
        justify-content: center;
        align-items: flex-end;
        flex-flow: column wrap;
        gap: 100px;
    }

    header#header > nav > ul > li > a{
        font-size: 1.6rem;
        font-weight: 300;
        color: #101015;
    }

    header#header > button#btn-menu{
        display: block;
    }
    /* END - Header */

    /* BEGIN - Hero */
    /*#s-hero{
        height: 640px;
    }
        
    #s-hero > div#hero-content{
        padding-top: 100px;
        padding-bottom: 150px;
    }
    
    #s-hero > div#hero-content > div > h2{
        font-size: 2.5rem;
    }
    
    #s-hero >div#hero-content > div > hr{
        margin-top: 10px;
        margin-bottom: 15px;
        border-bottom-width: 7px;
        width: 25%;
        height: 7px;
    }
    
    #s-hero > div#hero-content > div > p{
        font-size: 1.35rem;
    }
    
    #s-hero > div#hero-content > div.hero-svg{
        display: none;
    }*/
    /* END - Hero */

    #s-servicos-bar{
        display: block;
    }

    #s-quemsomos{
        padding: 50px 25px;
        flex-flow: row wrap;
        gap: 25px;
    }
    
    #s-quemsomos > div{
        max-width: 45%;
    }
    
    #s-quemsomos > div > div > hr{
        margin-top: 5px;
        margin-bottom: 15px;
        width: 75px;
    }
    
    #s-quemsomos > div > div > p{
        max-width: 480px;
        font-size: 0.85rem;
        text-align: justify;
        line-height: 1.5;
        overflow-wrap: break-word;
    }
    
    #s-quemsomos > div > div > p > strong{
        font-weight: 400;
    }

    #s-marcas{
        height: 224px;
    }

    #s-marcas > h2{
        font-size: 1.25rem;
    }

    #s-servicos > div{
        gap: 50px 50px;
    }
}

/* SM - Small Screen Devices */
@media (min-width: 0px) and (max-width: 360px){
    /* BEGIN - Header */
    header#header{
        padding-inline: 20px;
    }

    header#header > nav#nav.open{
        transform: translateX(0%);
        opacity: 1;
        will-change: transform, opacity;
        transition: all 150ms ease-in;
    }

    header#header > nav#nav.close{
        transform: translateX(100%);
        opacity: 0;
        will-change: transform, opacity;
        transition: all 150ms ease-out;
    }

    header#header > nav{
        position: fixed;
        top: 100px;
        right: 0;
        padding-top: 50px;
        padding-right: 25px;
        width: 100%;
        height: calc(100vh - 100px);
        height: calc(100dvh - 100px);
        background-color: #F7F7F7;
        justify-content: flex-start;
        align-items: flex-end;
        flex-flow: column wrap;
        display: flex;
    }

    header#header > nav > ul{
        justify-content: center;
        align-items: flex-end;
        flex-flow: column wrap;
        gap: 50px;
    }

    header#header > nav > ul > li > a{
        font-size: 1.2rem;
        font-weight: 300;
        color: #101015;
    }

    header#header > button#btn-menu{
        display: block;
    }
    /* END - Header */

    /* BEGIN - Hero */
    /*#s-hero{
        height: 360px;
    }

    #s-hero > div#hero-content > div.hero-svg{
        display: none;
    }*/
    /* END - Hero */

    #s-servicos-bar{
        display: none;
    }

    #s-quemsomos{
        padding: 50px 25px;
        flex-flow: column-reverse wrap;
        gap: 25px;
    }
    
    #s-quemsomos > div{
        max-width: 95%;
    }
    
    #s-quemsomos > div > div > hr{
        margin-top: 5px;
        margin-bottom: 15px;
        width: 75px;
    }

    #s-marcas{
        height: 260px;
    }

    #s-marcas > h2{
        font-size: 0.8rem;
    }

    #s-servicos > div{
        gap: 50px 50px;
    }
}