/**
*   @author Pedro Serer
*   @version 1.0.1
*/

@charset "UTF-8";

html, body {
    height: 100%;
    scroll-behavior: smooth;
}

div:target {
    scroll-margin-top: 6em;
}

#contato {
    scroll-margin-top: 11.8em;
}

/* Animações */

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Configuração das fontes */

@font-face {
    font-family: prom;
    src: url(../_fonts/Prometo\ Italic.otf);
}

@font-face {
    font-family: prom1;
    src: url(../_fonts/Prometo-Light.otf);
}

@font-face {
    font-family: prom2;
    src: url(../_fonts/Prometo\ LightItalic.otf);
}

@font-face {
    font-family: maven;
    src: url(../_fonts/Maven\ Pro\ Medium.otf);
}

/* Começo do menu */

#menu {
    background-color: #343434;
    padding: 1.8rem;
    margin-right: 0;
    margin-left: 0;
}

.nav-link {
    color: #ffffff;
    font-size: 1.1vw;
    font-family: 'Montserrat', sans-serif;
    margin-left: 18px;
    text-decoration: none;
}

.nav-link:hover {
    color: #00949c;
}

/* Fim do menu */


/* Começo da primeira linha */

.lentes:first-of-type {
    font-family: maven;
    font-size: 1.8vw;
    letter-spacing: 12px;
    margin-left: 20%;
    margin-bottom: -2%;
    animation: fadeIn;
    animation-duration: 3s;
}

.correct {
    font-family: maven;
    font-size: 5.2vw;
    animation: fadeIn;
    animation-duration: 2s;
}

.sub1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2vw;
    animation: fadeIn;
    animation-duration: 4s;
}

/* Fim da primeira linha */

/* Começo da segunda linha */

.texto-necessidade h1 {
    color: #01c2c5; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 2.2vw; 
    font-weight: 800;
}

.texto-necessidade h3 {
    color: #ffffff; 
    font-family: 'Montserrat'; 
    font-size: 1.2vw;
}

.necessidade-descricao h3 {
    color: #01c2c5;
    font-family: 'Montserrat', sans-serif; 
    font-size: 1.4vw; 
    font-weight: 800;
}

.necessidade-descricao p {
    color: #ffffff; 
    font-family: 'Montserrat';
}

.logo-img {
    margin-right: 10px;
}

.logo-img:hover {
    cursor: pointer;
    transform: scale(1.2);
}

/* Fim da segunda linha */

/* Começo da terceira linha */

.azul {
    color: #01f2ff;
}

/* Fim da terceira linha */

/* Começo da quinta linha */

#enviar {
    margin-top: 2%; 
    background-color: rgba(0, 0, 0, .1); 
    border: 1px solid #ffffff; 
    color: #ffffff;
    border-radius: 20% 1% 20% 1%;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

#enviar:hover {
    background-color: rgba(0, 0, 0, .4);
    transform: scale(0.9);
}

#row4 {
    background-image: url('../_imagens/row4.webp');
    background-size: cover;
    height: 46vw;
}


/* Fim da quinta linha */


/* Começo do rodapé */

footer {
    position: absolute;
    bottom: 0;    
    background-color: #141414;
    height: 283px; /*335px*/
    width: 100%;
}

.logos {
    display: inline-block;
}

.linha {
    width: 60%;
    height: 1px;
    background: #153631;
}

/* Fim do rodapé */

#mobile {display: none;}
#main {display: block;  margin-top: 90px;}
#brand1 {display: none;}
#brand2 {display: block;}

/******************************************************
*                   RESPONSIVIDADE                    *
*******************************************************/

@media screen and (max-width: 767px) {
    html, body {height: 100%;}

    #inicio {height: 714px;}
   
    .lentes {
        font-size: 1.2em;
        margin-left: 40px;
    }

    .correct {font-size: 3em;}

    .sub1 {font-size: 2em;}

    .linha {
        width: 100%;
        height: 2px;
        background: #0d9fa7;
    }

    .nav-link {
        font-size: 3vw;
    }

    #garantia {
        background-image: url('../_imagens/mobile3.webp'); 
        background-repeat: no-repeat;
        background-position: 50%; 
        background-size: cover;
        color: #ffffff;
    }

    #ivideo {
        position: absolute;
        bottom: 0;
        right: 0;  
        width: 71vw;
    }

    #mobile {display: block; margin-top: 90px;}
    #main {display: none;}
    #brand1 {display: block;}
    #brand2 {display: none;}
}