html {
    scroll-behavior: smooth;
  }

  /* desabilitando selecao: */
.not-selectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

* {
    padding: 0%;
    margin: 0%;
    font-size: 100%;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
    background-color: #0E1116;
}

a {
    text-decoration: none;
    cursor: pointer;
    opacity: 0.8;
    padding: 1px 10px;
    color: black;
}

a:hover {
    opacity: 1;
}

a:visited,
a:active {
    color: inherit;
}

h1 {
    font-size: 30px;
}

.parallax {
    /* The image used */
    /* background-image: url("img_parallax.jpg"); */
  
    /* Set a specific height */
    min-height: 500px;
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }


/* ----------------------------------------------CABEÇALHO/MENU PRINCIPAL----------------------------------------------------- */

header {
    background-color: white;
    color: black;
    width: 100%;
    position: fixed;
    padding: 0px 50px;
    min-height: 15vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 1;
    z-index: auto;
}

.div-header {
    display: flex;
    align-items: center;
}

.div-header p {
    margin-left: 50px;
    font-size: medium;
    color: slategray;
}


/* ----------------------------------------------------PÁGINA PRINCIPAL-------------------------------------------------- */

.imagem-logo {
    width: 70px;
}

.hero {
    background-image: url(images/instr2.png);
    height: 100vh;
    background-size: cover;
    background-clip: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hero h1 {
    color: whitesmoke;
    font-size: 20vh;
    margin: 0 15px;
    align-self: center;
}

.hero h2 {
    background-color: whitesmoke;
    color: black;
    font-size: 5vh;
    padding: 3px 15px;
    align-self: center
}
/* 
.hero h2:hover {
    background-color: sandybrown;
    color: black;
    font-size: 5vh;
    padding: 3px 15px;
    align-self: center;
} */

.hero h3 {
    color: whitesmoke;
    font-size: 14px;
    line-height: 20px;
    align-self: center;
    margin-top: 10px;
}


/* -------------------------------------------PÁGINA 2 - APRENDER IMAGEM --------------------------------------------------- */

#traktor {
    min-height: 85vh;
    display: flex;
    background-image: url(images/pro3-cel3.png);
    background-position: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#traktor h1 {
    font-size: 20vh;
    color: white;
}

#traktor h3 {
    font-size: 20px;
    color: white;
}

.texto-lateral {
    text-align: left;
    align-items: flex-start;
}


/* -----------------------------------------------PÁGINA 3 - APRENDER------------------------------------------------------- */

#aprender {
    height: 100vh;
    color: black;
    background-image: url(images/background/bgw2.png);

    background-color: whitesmoke;
    display: flex;
    align-items: center;
}

.aprender-superior {
    margin-top: 30px;
}

.aprender-left {
    width: 50%;
    text-align: center;
}

.aprender-left img {
    width: 80%;
}

/* .aprender-left img:hover {
    width: 100%;
} */

.aprender-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.aprender-right h1 {
    font-size: 20px;
}

.aprender-right ul li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 30px;
    list-style: none;
    font-size: large;
    line-height: 25px;
}

.aprender-right ul li:hover {
    background-color: sandybrown;
    border-radius: 5px;   
}


/* ------------------------------------------PÁGINA 4 - INSTRUTOR IMAGEM ------------------------------------------------------------ */

#instrutor-big {
    min-height: 85vh;
    background-image: url(images/instrutor.jpg);
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

#instrutor-big h1 {
    color: white;
    font-size: 20vh;
}


/* ------------------------------------------PÁGINA 5 - INSTRUTOR  ------------------------------------------------------------ */

#instrutor {
    height: 100vh;
    background-image: url(images/background/bgw4.png);
    background-repeat: round;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#instrutor p {
    line-height: 25px;
    font-size: 20px;
    margin: 20px;
}

#instrutor h1 {
    font-size: 200px;   
}

#instrutor p:hover {
    line-height: 40px;
    font-size: x-large;
    background-color: sandybrown;
    border-radius: 5px;
}

.instrutor-icons {
    font-size: 38px;
    margin: 15px;
}

.instrutor-icons:hover {
    font-size: 42px;
}

#instrutor h1 {
    margin-top: 25px;
    margin-bottom: 20px;
}

.div-imagem-instrutor {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.imagem-instrutor {
    margin: 0 10px;
    max-width: 15%;
    background-clip: padding-box;
    background-position: center;
    border-radius: 10px;
}

.imagem-instrutor:hover {
    border-radius: 5px;
}


/* ----------------------------------------PÁGINA 6 - VANTAGENS -------------------------------------------------------------- */

#vantagens-main {
    height: 100vh;
    background-color: #0E1116;
    color: whitesmoke;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#vantagens-main p:hover {
    background-color: sandybrown;
    border-radius: 5px;
    font-size: 18px;
}

#vantagens-left {
    width: 80%;
}

#vantagens-right {
    width: 100%;
    margin-left: 50px;
}

#vantagens-right h1{
    font-size: 50px;
    line-height: 50px;
}
#vantagens-right ul{
    line-height: 25px;
    list-style: none;
    margin: 0 70px;
}
#vantagens-left img {
    width: 100%;
}

.vantagens-lista-dividida {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.vantagens-lista-dividida ul {
    margin: 0 20px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

/* ----------------------------------------PÁGINA 7 - TRAKTOR CONTENT - IMAGEM ----------------------------------------------------- */

#traktor-content {
    background-image: url(images/background/bgw3.png);
    background-position: bottom;
    color: #0E1116;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#traktor-content div {
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 100px;
}

#traktor-content h1 {
    font-size: 20px;
}

#traktor-content img {
    width: 70%;
}


/* ----------------------------------------PÁGINA 7 - DUVIDAS - IMAGEM ----------------------------------------------------- */

#faq-big {
    height: 100vh;
    background-image: url(images/background/bgw4.png);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: black;
}

#faq-big h1 {
    font-size: 15vh;
}


/* --------------------------------------PÁGINA 8 DÚVIDAS TEXTOS ---------------------------------------------------------- */

#faq {
    background-color: darkorchid;
    color: whitesmoke;
    min-height: 85vh;
    display: flex;
}

.faq-center {
    /* margin-left: 100px; */
    width: 100%;
    /* background-color: aqua; */
    color: black;
    font-size: 20px;
    display: flex;
    justify-content: space-evenly;
}

.faq-left {
    width: 40%;
    margin-top: 5%;
    margin-left: 50px;
    /* background-color: aqua; */
}

.collapse {
    font-size: medium;
}

.faq-right {
    width: 50%;
    margin: 20px;
}

.faq-right img{
    filter: sepia();
    width: 100%;
    /* background-color: blueviolet; */
}

.faq-right img:hover {
    filter: none;
    width: 100%;
    /* background-color: blueviolet; */
}

.faq-center p:hover {
    background-color: sandybrown;
    border-radius: 5px;
}

.description {
    background-color: sandybrown;
    border-radius: 8px;
}


/* --------------------------------------PÁGINA 9 NEWSLETTER  ---------------------------------------------------------- */

#newsletter {
    background-color: #0E1116;
    color: white;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#newsletter form {
    margin: 30px 30px;
}

#newsletter h1 {
    margin: 50px;
    font-size: 24px;
}

#newsletter h3 {
    margin-top: 15px;
    font-size: 18px;
}

#newsletter a {
    opacity: 0.5;
}

#newsletter a:hover {
    opacity: 1;
}

#botao-news {
    padding: 5px;
    border-radius: 5px;
    box-shadow: white;
    background-color: #F7F3E3;
}

.inputs {
    margin: 10px 20px;
}

.msg-botao {
    margin-bottom: 20px;
    width: auto;
    height: 20px;
    color: black;
}


/* -------------------------------------------------RODAPÉ----------------------------------------------------- */

footer {
    background-color: #0E1116;
    color: white;
    margin: 0px;
    text-align: center;
    padding-top: 20px;
    min-height: 15vh;
}

footer a {
    background-color: #0E1116;
    color: white;
}

footer p {
    padding: 20px;
}


/* ----------------------------------------- --------------------------------------- --------------------------------------*/


/* ----------------------------------------- ADAPTAÇÃO DE RESOLUÇÃO PARA SMARTPHONES --------------------------------------*/


/* ----------------------------------------- --------------------------------------- --------------------------------------*/

@media screen and (max-width: 480px) {
    header {
        display: none;
    }
    .hero {
        background-image: url(images/hero2-cel.jpg);
        background-size: cover;
        background-position: center;
    }
    .hero h1{
        font-size: xx-large;
    }

    .hero h2 {
        align-self: center;
        text-align: center;
        font-size: large;
    }
    .hero h3 {
        font-size: medium;
        margin: 4px;
        margin-left: auto;
        margin-right: auto;
    }

    
    /* ----------------------------------------------- */
    #traktor {
        background-image: url(images/hero2-cel.jpg);
        display: none;
    }
    #traktor h1,
    h3 {
        font-size: 10vh;
        text-align: center;
        opacity: 1;
    }
    /* ----------------------------------------------- */
    #aprender {
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-image: none;
        background-color: black;
        color: whitesmoke;
    }
    
    #aprender h1 {
        font-size: 20px;
        text-align: center;
        margin: 30px;
    }

    #aprender h2 {
        font-size: 12px;
    }

    .aprender-main,
    .aprender-left,
    .aprender-right {
        width: 100%;
        margin-top: 20px;
    }
    .aprender-left img {
        width: 70%;
    }

    #aprender li {
        width: 100%;
        margin-top: 40px;
        font-size: medium;
        line-height: 30px;
    }
    * ----------------------------------------------- */

    #traktor-content{
        background-image: none;
        background-color: black;
        display: none;
        flex-direction: column;
    }


    /* ----------------------------------------------- */
    #instrutor-big {
        align-items: center;
        height: 100vh;
    }
    #instrutor-big h1 {
        margin-top: 30px;
        font-size: 10vh;
    }
    /* ----------------------------------------------- */

   

/* ----------------------------------------- --------------------------------------- --------------------------------------*/


/* ----------------------------- ADAPTAÇÃO DE RESOLUÇÃO PARA MOBILE HORIZONTAL  ------------------------------*/


/* ----------------------------------------- --------------------------------------- --------------------------------------*/

@media screen and (max-width: 720px) {

    * {
        margin: 0;
    }


    header {
        display: none;
    }

    .hero {
        /* background-image: unset; */
        height: 100vh;
        color: black;
        filter: contrast()
    }

    #aprender ul li {
        width: 100%;
        margin: 8px;
        font-size: small;
        line-height: 20px;
    }
 
    iframe {
        /* margin-top: 1000px; */
        display: none;
        width: 100%;
    }

    #traktor-content {
        margin: 0;
        background-image: unset;
        background-color: whitesmoke;
        height: 100vh;
        color: black;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #traktor-content div {
        width: 100%;
        height: auto;
    }

    #traktor-content div h1 {
        font-size: 30px;
        margin-top: 200px;
        color: whitesmoke;
    }

    #traktor-content div p {
        margin-top: -600px;
        color: black;
    }



    #instrutor {
        background-image: unset;
        background-color: whitesmoke;
        text-align: center;
    }

    #instrutor div {
        margin-top: 40px;
    }
    
    #instrutor p {
        font-size: 14px;
    }

    #instrutor i {
        margin-top: 20px;
        font-size: 16px;
    }

    #vantagens {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    #vantagens-main {
        position: absolute;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #vantagens-right {
        margin-top: 30px;
    }
    #vantagens-left {
        display: none;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .vantagens-lista-dividida {
        width: 100%;
        display: flex;
        flex-direction: column;
    } 

    .vantagens-lista-dividida h1 {
        font-size: 10px;
        margin-bottom: 50px;
    }

    .vantagens-lista-dividida div {
        margin: 0;
    }

    .vantagens-lista-dividida i{
        display: none;
    }

    .vantagens-lista-dividida ul li{
        width: 60%;
        margin-right: auto;
        line-height: 20px;
        text-align: left;
        display: flex;
    }


    #faq-big img {
        display: none;
    }

    #faq-big {
        background-image: unset;
        background-color: whitesmoke;
    }

    .faq-center {
        margin-top: 600px;
        display: flex;
        flex-direction: column;       
        background-color: whitesmoke; 
    }

    
    .faq-left {
        width: 100%;
        display: flex;
        flex-direction: column;        
    }


    footer {
        display: none;
    }

    .collapse {
        width: 70%;
    }
}
}