/*****************************************************/
/**************** CONFIG DO KEY FRAME ****************/
@keyframe navLinkFade {/* Ocupa o intervalo vazio da animação */
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


 /******************** BANNER.CSS ********************/
/*REMOVE O TITULO ENQUANTO ESTIVER ABAIXO DE 400PX*/
@media(max-width:400px){ /*LARGURA WIDTH*/
    #banner-titulo {
        display: none;
    }
}

/* LOGO DCC AZUL */
@media (max-width: 510px){ /*LARGURA WIDTH*/
    #cad-logo {
        /*background: url("../images/DCCcad_fatecsp3D-vertical-reduzido.png") no-repeat center center;*/
        margin: auto;
        background-size: contain;
        width: 20vw;
        /*height: 14vh;*/
    }
    #banner-titulo {
        width: 50vw;
        font-size: small;
    }
    /*#banner-titulo { display: none;}*/
}
/* BANNER RED */
@media (max-width: 700px){ /*Titulo do background RED */
    /*#banner-titulo { font-size: medium; }*/
}






 /******************* HEADER ********************/
/*         POSIÇÃO DO MENU EM ATÉ 482px        *//*Adaptação para uma posição especifica da tela*/
/*@media(max-height: 482px){  .ul-menu-header { top: 24vh; }}*/
/*              CRIAÇÃO DO MENU 3 TRACINHOS             */
@media (max-width: 899px){ /*LARGURA*/
    /*body{ overflow-x: hidden; }*/
    .navbar-header {
        justify-content: normal;
    }
    .ul-menu-header {
        margin: auto 0vw auto auto;
        display: none;
        /*top: 15vh;right: 0;*/
        width: 50vw;
        height: 580px;
        background: #23232e;
        opacity: 0.97;
        flex-direction: column;
        align-items: center;
        justify-content: space-around; /*ARRUMAR ESPAÇAMENTO*/
        transform: translateX(100%); /*move o Eixo X para fora da página*/
        transition: transform 0.3s ease-in;
    }
    .ul-menu-header li {
        margin-left: 0;
    }
    .mobile-menu {
        display: block;
        margin-left: 10px;
    }
}
@media(max-height: 800px){ /*ALTURA*/
    /*.navbar-header { height: 60px; 
        /*font-size: var(--fontsz-m);*
    }*/
    /*#cad-logo { height: 7vh; }
    @media(max-height: 500px){
        #cad-logo{ height: 9vh; }
    }*/
}




/********************* BACKGROUND.CSS *******************/
/* ACRESCENTA PALAVRAS AO TITULO DENTRO DA IMG DE FUNDO */
@media(max-width:550px){
    /*.a-logo:before {
        display: flex;
        content: 'Laboratório ';
    }*/
    .lab-capuano:before {
        display: flex;
        justify-items: center;
        content: 'Laboratório';/*Enedina Capuano*/
    }
    /*
    .lab-capuano {
        justify-items: center;
    }*/
    /*.a-logo:after{content: "";}*/
}






/*********************** SECTION.CSS ***********************/
/*CONTEÚDO PRINCIPAL*/
/*LAYOUT DO TEXTO*/
@media(max-width: 524px) { #hidraulica-container, #pavimentacao-container { text-align: center; } }
@media(min-width: 475px){
    /*section*/
    .ul-aux-container { display: flex; justify-content: center; }
    @media(min-width: 525px){
        .display-container { display: flex; }
        div[id="hidraulica-container"] { text-align: start; }
        div[id="pavimentacao-container"] { text-align: end; }
    }
}
/* QG001 -> Quebra Galho 001 */
@media(max-width:  999px){ div[id="edificios-container1"]{ display: block; } div[id="edificios-container2"]{ display: none; } }
@media(min-width: 1000px){ div[id="edificios-container1"]{ display: none; } div[id="edificios-container2"]{ display: block; } }

/*CARROSSEL SECTION*/
/*LAYOUT CARROSSEL*/
@media(min-width: 700px){
    .carrossel-container { width: 40%; margin: 15px auto; height: 30vw; }
    .display-carrosseul { display: flex; }
    .text-laboratorio { width: 40%; margin-right: 5vw; }
    .slide { height: 30vw; }
    @media(min-width: 1400px){ .text-laboratorio { width: 30%; margin-right: 15vw; }
        .carrossel-container {
            width: 40%;
            margin: 15px auto;
            height: 30vw;
        }.slide { height: 32vw; }
    }
}




/*********************** FOOTER.CSS ***********************/
/*CONTEÚDO FINAL*/

@media(min-width: 1200px){
    .display-footer2 { /*display: flex;*/ }/*acima de 1200px*/
}

@media(min-width: 1150px){/*#footer2 { padding-left: 20vw;}*/
    /*.display-footer2 { display: flex; }*/
    /*@media(min-width: 850px){ .display-footer2{ display: flex; }}*/
}
@media(max-width: 1028px){
    /*#span-img-footer {display: flex;
        margin: 8vh 0vw;justify-content: center;
    }*/
    .display-footer { flex-direction: column; }
    .h2-footer { margin-top: 8vh; } /*.p-footer { line-height: 22px; }*/

}
@media(min-width:849px){
    .display-footer{/*flex-direction: ;*/
        margin: 2vh 0vw; justify-content: center;
    }
    
    .footer-col {/*margin-bottom: 5vh;*/
        margin: 0vh auto auto 6vw;
    }
    div[class="footer-col2"] {/*margin-bottom: 5vh;*/
        margin: 0vh 2vw auto 6vw;
    }
}@media(min-width: 2300px){
    div[class="footer-col2"] {/*margin-bottom: 5vh;*/
        margin: 0vh 2vw auto 4vw;
    }
    .footer-col {/*margin-bottom: 5vh;*/
        margin: 0vh auto auto 4vw;
    }
}
/*.logo-fatec-footer { display: none; }*/
    

/* QG002 -> Quebra Galho 002 */
@media(max-width: 1224.99px){/*posicionando textos DUPLICADOS no footer (Localização Fatec SP) */
    div[id="footer-desenvolvedores1"]{ display: block; }
    div[id="footer-desenvolvedores2"]{ display: none; }
}
@media(min-width: 1225px){ /*posicionando textos DUPLICADOS no footer (Localização Fatec SP) */
    @media(max-width: 1800px){
        div[id="footer-desenvolvedores1"]{ display: none; }
        div[id="footer-desenvolvedores2"]{ display: block; }
    }
}
@media(min-width: 1801px){ /*posicionando textos DUPLICADOS no footer (Localização Fatec SP) */
    div[id="footer-desenvolvedores1"]{ display: none; }
    div[id="footer-desenvolvedores2"]{ display: block; }
    div[class="display-footer2"]{ display: flex; }
}
@media(min-width: 5000px){
    div[class="display-footer3"]{ display: flex; }
}


/* IDEIAS:
-PASSAR TEXTOS DUPLICADOS PARA JAVA SCRIPT
-CRIAR UMA DIV PARA LOCALIZAÇÃO FATEC E DEPARTAMENTO DE EDIFICIOS PARA FICAREM NO MESMO QUADRADO
-CRIAR UMA DIV PARA COORDENAÇÃO LAB CAD E DCC LABORATORIO PARA FICAREM NO MESMO QUADRADO
-JUNTAR DESENVOLVEDORES COM A DIV DEPARTAMENTOS DE EDIFICIOS E LOCALIZAÇÃO FATEC

TAREFAS:
-CRIAR PÁGINA LINKS, DISCIPLINAS, CALENDARIO, PROFESSORES.
-ORGANIZAR PÁGINA DE CONTATO
*/
/**------------------ CONFIGURAÇÕES DE RESOLUÇÃO ALTA ------------------**/
@media(min-width: 850px){
    @media(max-width: 899px){#img-responsive { width: 70%; }}
    /*@media(max-width: 900px){#img-responsive { width: 60%; }}*/
    @media(min-width: 1200px){#img-responsive{ width: 50%; }}
}@media(min-width: 1000px){ #banner-titulo { width: 23vw; justify-content: center; } .copy-right-footer { font-size: small; } }
@media(min-width: 1200px){
    @media(max-width: 1599px){ #banner-titulo { font-size: large; } }
}
@media(min-width: 1600px ){
    @media(max-width:1799px){#banner-titulo { font-size: large; }
                             .p-footer { font-size: large; }
    }
}@media(max-width: 1799px){ p[class="p-footer"]{ line-height: 22px; } }
@media(min-width: 1800px){
    @media(max-width: 2199px){
        /*banner*/
        #banner-titulo{ font-size: x-large; }
        
        /*menu*/
        .navbar-header { font-size: x-large; }
        .ul-menu-header .li-menu-header { margin: auto 50px; }
        
        /*background*/
        /*.dcc-background { font-size: xx-large; }*/
        .div-container { font-size: large; }
        
        /*section - main*/
        .div-container-auxiliares { font-size: large;}
        #b-aux-container { font-size: x-large; }
        p.text-carrosseul { font-size: larger; }
        
        /*footer*/
        .h2-footer { font-size: x-large; }
        .p-footer { font-size: large; line-height: 25px; }
        .copy-right-footer { font-size: medium; }
    }
}

@media(min-width: 2200px){
    @media(max-width: 2799px){
        /*banner*/
        .banner, .navbar-header { height: 100px; }
        #banner-titulo{ font-size: xx-large; }
        
        /*menu*/
        .navbar-header { font-size: x-large; }
        .ul-menu-header .li-menu-header { margin: auto 50px; }
        
        /*background*/
        /*.a-logo { font-size: xx-large; }*/
        /*section - main*/
        .div-container { font-size: x-large; }

        .div-container-auxiliares { font-size: x-large;}
        #b-aux-container { font-size: xx-large; }
        p.text-carrosseul { font-size: x-large; }
        
        /*footer*/
        .h2-footer { font-size: xx-large; }
        .p-footer { font-size: x-large; }
        .copy-right-footer { font-size: medium; }
        }
}

@media(min-width: 2800px){
    /*banner - menu*/
    .banner, .navbar-header { height: 150px; }
    #banner-titulo, .navbar-header { font-size: xxx-large; }
    
    /*menu*/
    .ul-menu-header .li-menu-header { margin: auto 50px; }

    /*section - main*/
    .div-container { font-size: xx-large; }

    .div-container-auxiliares { font-size: xx-large;}
    #b-aux-container { font-size: xxx-large; }
    p.text-carrosseul { font-size: xx-large; }
   
    /*footer*/
    .h2-footer { font-size: xxx-large; }
    .p-footer { font-size: xx-large; }
    .copy-right-footer { font-size: medium; }
}
/*
*Arroma media pro footer -largura de width margin
*arrumar resoluções de letras /dcc-background/ banner/ navbar/ section/ 
*implementar texto no carrossel
*fazer icones de pagination do carrossel funcionarem
*rever menu altura e largura...


*/