@import url(style.css);
/* Importando fonte no diretório do projeto */
@font-face {
    font-family: 'Gothan';
    src: url(fonts/Gotham-Book.ttf);
}
body{
    margin: 0;
    
    background-color: var(--cor-background) !important;
}

/* Botão Navegação - Voltar para Página Inicial */
.botao-voltar-pag{
    position: fixed;
    top: 3%;
    left: 2%;

    width: 25%;
}
.voltar-pag-link{
    display: inline-flex;
    align-items: center;

    color: var(--cor-secundaria);

    font-size: 12px;
    text-decoration: none;
    font-family: Gothan;
    width: 100%;
}
.voltar-icon{
    width: 25px;

    /* Alterar preenchimento icone SVG   */
    filter: invert(71%) sepia(4%) saturate(3644%) hue-rotate(316deg) brightness(109%) contrast(104%);

    margin-right: 1%;
}
/* Fim Botão Navegação */

/* Versão Mobile - Orientação Paisagem */


.titulo{
    display: flex;
    justify-content: center;

    font-family: Gothan;
    font-size: 25px;
    color: var(--cor-secundaria);
    text-align: center;
 
    margin: 1% 18%;
}

.container{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100% !important;

    /* Max Width do Bootstrap */
    max-width: none !important;
}

/* Inicio - Elementos video  */
.container-video{
    display: flex;
    justify-content: center;

    width: 50%;
    height: 200px;
    
}
.video{
    width: 100%;
}
/* Fim - Elementos video  */

.botao-voltar{
    margin-right: 5%;
}
.botao-avancar{
    margin-left: 5%;
}
.botao-l{
    /* Alterar preenchimento icone SVG   */
    filter: invert(71%) sepia(4%) saturate(3644%) hue-rotate(316deg) brightness(109%) contrast(104%);
}
.botao-r{
    /* Alterar preenchimento icone SVG   */
    filter: invert(71%) sepia(4%) saturate(3644%) hue-rotate(316deg) brightness(109%) contrast(104%);
}
.botao-l-retrato{
    /* Alterar preenchimento icone SVG   */
    filter: invert(71%) sepia(4%) saturate(3644%) hue-rotate(316deg) brightness(109%) contrast(104%);
}
.botao-r-retrato{
    /* Alterar preenchimento icone SVG   */
    filter: invert(71%) sepia(4%) saturate(3644%) hue-rotate(316deg) brightness(109%) contrast(104%);
}

.botao-imagem{
    width: 50px;
}

/* Displays */
.botoes-retrato{
    display: none;
}

.cd-texto{
    text-align: center;
}


/* Versão Mobile - Orientação Retrato */
@media (orientation: portrait){

    /* Botão Navegação - Voltar para Página Inicial */
    .botao-voltar-pag{
        top: 2.0%;
    }
    .voltar-texto{
        display: none;
    }
    .voltar-icon{
        width: 40px;
    }
    /* Fim Botão Navegação */

    .titulo{
        font-size: 30px;
        
        margin-top: 5%;
    }

    /* Inicio - Elementos video  */
    .container-video{
        display: flex;
        justify-content: center;
    
        width: 100%;
        height: auto;

        margin: 5% 0;
    }
    .video{
        width: 100%;
    }
    /* Fim - Elementos video  */
 
    .botoes-retrato{
        width: 100%;
        
        display: inline-flex;
        justify-content: space-evenly;

        margin-top: 3%;
    }
    /* Displays  */
    .botao-voltar, .botao-avancar{
        display: none;
    }

    /* CONTEUDO DOWNLOAD  */
    .cd-container{
        width: 95%;
    
        margin-top: 3%;
    }
    .cd-texto{
        font-size: 18px;  
    }
    .cd-link{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cd-link-titulo{
        font-size: 18px;
    }
    .cd-link{
        margin: 3% 0;
    }

    .cd-link-btn{
        background-color: transparent;
        color: var(--cor-principal);

        border: 3px solid var(--cor-principal);
        border-radius: 10px;

        padding: 2%;
    }
    .cd-btn-txt{
        display: none;
    }
    .cd-btn-img{
        display: block;
    
        filter: invert(83%) sepia(89%) saturate(1802%) hue-rotate(291deg) brightness(101%) contrast(104%);
    }
    .cd-link-btn{
        background-color: transparent;
        color: var(--cor-principal);
    
        border: 3px solid var(--cor-principal);
        border-radius: 10px;
    
    }
    /* FIM CONTEUDO DOWNLOAD  */


    .extra-titulo{
        font-size: 28px !important;
    }
    .extra-container-link{
        margin: 3% 0 !important;
    }
    .extra-container-download{
        width: 90%;
    }
    .extra-link{
        border: 3px solid var(--cor-principal) !important;
    }
    .extra-botao-imagem{
        width: 25px !important;
    }
    .extra-container-imagem{
        height: auto;
    }
    .banner-grande{
        display: none;
    }
    .banner-pequeno{
        display: block;
    }
}
@media (orientation: landscape) {
    .extra-link{
        border: 3px solid var(--cor-principal) !important;
    }
    .extra-botao-imagem{
        width: 25px !important;
    }
    .banner-grande{
        width: 100%;
    }


    /* CONTEUDO DOWNLOAD  */    
    .cd-container{
        width: 95%;
    
        margin-top: 1%;
    }
    .cd-texto{
        font-size: 18px;  
    }
    .cd-link{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cd-link-titulo{
        font-size: 18px;
    }
    .cd-link{
        margin: 3% 0;
    }

    .cd-link-btn{
        background-color: transparent;
        color: var(--cor-principal);

        border: 3px solid var(--cor-principal);
        border-radius: 10px;

        padding: 2%;
    }
    .cd-btn-txt{
        display: none;
    }
    .cd-btn-img{
        display: block;
    
        filter: invert(83%) sepia(89%) saturate(1802%) hue-rotate(291deg) brightness(101%) contrast(104%);
    }
    .cd-link-btn{
        background-color: transparent;
        color: var(--cor-principal);
    
        border: 3px solid var(--cor-principal);
        border-radius: 10px;
    }
    .banner-grande{
        display: block;
    }
    .banner-pequeno{
        display: none;
    }
}

/* Versão Desktop -  Botões laterais */
@media (min-width: 1024px) {

    /* Botão Navegação - Voltar para Página Inicial */
    .botao-voltar-pag{
        top: 2.5%;
    }
    .voltar-pag-link{
        font-size: 22px;
    }
    .voltar-icon{
        width: 50px;
    }
    /* Fim Botão Navegação */

    .titulo{
        font-size: 40px;
        font-weight: 700;
    }
    .container{
        display: inline-flex;
        justify-content: center;
        align-items: center;

        width: 100% !important;
    }

    /* Inicio - Elementos video  */
    .container-video{
        height: 500px;
    }
    /* Fim - Elementos video  */
    .botao-avancar, .botao-voltar{
        width: 10%;
        display: flex;
        justify-content: center;

        margin: 0;
    }
    .botao-imagem{
        width: 80px;
    }
    .botao-l:hover{
        transform: scale(1.1);
        filter: invert(71%) sepia(4%) saturate(3644%) hue-rotate(316deg) brightness(119%) contrast(104%);
    }
    .botao-r:hover{
        transform: scale(1.1);
        filter: invert(71%) sepia(4%) saturate(3644%) hue-rotate(316deg) brightness(119%) contrast(104%);
    }
    /* Displays  */
    .botoes-retrato{
        display: none;
    }



    /* CONTEUDO EXTRA  */
    .cd-container{
        width: 50%;
    
        margin: 0;
        padding: 1%;
    }
    .cd-container-texto{
        margin-bottom: 5%;
    }
    .cd-texto{
        font-size: 20px;
        font-weight: 500;
    
        text-align: center;
    }
    .cd-link{
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        margin: 2% 0;
    }
    .cd-link-titulo{
        font-size: 24px;
        font-weight: 300;
    
        margin-right: 3%;
    }
    .cd-link-btn{
        background-color: transparent;
        color: var(--cor-principal);
    
        border: 3px solid var(--cor-principal);
        border-radius: 10px;
    
        font-weight: 500;
        font-size: 20px;
    
        padding: 0% 2%;

        text-decoration: none;
    }
    .cd-link-btn:hover{
        background-color: var(--cor-principal);
        color: var(--cor-background);
    
        border: 3px solid var(--cor-principal);
    }
    .cd-btn-img{
    
        display: none;
    
        /* filter: invert(83%) sepia(89%) saturate(1802%) hue-rotate(291deg) brightness(101%) contrast(104%); */
    }
    .cd-btn-txt{
        display: block;
    }

    .extra-container-download{
        width: 49%;
    }

    /* FIM CONTEUDO EXTRA  */

}

.extra-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    padding: 1%;
}
.extra-titulo{
    margin-bottom: 0 !important;

    color: var(--cor-secundaria);

    font-size: 33px;
    font-weight: 400;
}
.extra-container-link{
    display: flex;
    justify-content: end;
    width: 50%;

    margin: 2% 0;
}
.extra-link{
    background-color: var(--cor-background);

    border: 5px solid var(--cor-principal);
    border-radius: 10px;
    padding: 1%;
}
.extra-link:hover{
    background-color: var(--cor-principal);

    border: 5px solid var(--cor-principal);
    border-radius: 10px;
}  
.extra-botao-imagem{
    width: 40px;
    /* filter: invert(85%) sepia(19%) saturate(308%) hue-rotate(326deg) brightness(109%) contrast(98%); */

    /* filter: invert(37%) sepia(7%) saturate(96%) hue-rotate(214deg) brightness(97%) contrast(101%); */

    filter: invert(83%) sepia(89%) saturate(1802%) hue-rotate(291deg) brightness(101%) contrast(104%);
}
.extra-botao-imagem:hover{
    filter: invert(85%) sepia(19%) saturate(308%) hue-rotate(326deg) brightness(109%) contrast(98%);
}
.extra-container-imagem{
    display: flex;
    justify-content: center;
}