/* *** FATEC-SP *** */

/* Para scroll suave em alguns navegadores. */
html {  
  scroll-behavior: smooth; 
}
/* Margem-top para as Ancoras (valor absoluto). */

:target {
  scroll-margin-top: 150px;     
}
* {outline: none;}
a {
    font: 400 100%/1.4 sans-serif; 
}
#container .header {
    width: 100%;
	position: sticky;
    top: 0; 
	z-index: 2;
}
div#logos_titulo {
    background-color: #fff;
}
/* LOGOS INSTITUCIONAIS */

div.flex_center {
    display: flex;
    justify-content: space-around; 
    align-items: center;
    padding-top: 10px;
    height: 60px; 
}
div.flex_center < div {
    flex-basis: 120px;
}
/* Logo CPS */
div.flex_center div:first-child {
    width: 33%; 
    max-width: 155px;
    margin-left: 1%;
    margin-right: 6%;
}
/* Logo Fatec */
div.flex_center div:nth-child(2) {
    width: 33%; 
    max-width: 150px;
}
/* Logo Gov-SP */
div.flex_center div:nth-child(3) {
    width: 33%; 
    max-width: 160px;
}
/* Logo CPS */
div.flex_center div:first-child img {
    width: 40%; 
}
/* Logo Fatec-SP */
div.flex_center div:nth-child(2) img {
    width: 70%; 
    display: block;
    margin: 0 auto;
    margin-right: 27%;
}
/* Logo Gov-SP */
div.flex_center div:nth-child(3) img {
    width: 70%; 
    margin-left: 20%;
} 

/* MENU CURTO (Home, Cursos, Vestibular...). */

.header #row0_links {                   
    background-color: #b20000; 
}
.header #row0_links li#link_cursos {
    background-color: #d20000; 
    padding: 2px .5%;
}
.header .row_links li a {           
    font-size: .7rem; 
    color: #fff;
    font-family: robotoitalic;
    border-bottom: 1px solid transparent;
    display: block;
}
.header .row_links li:hover a,
.header .row_links li:focus a,
.header .row_links li:active a {  
    border-bottom: 1px solid #dadada;
}
.header .row_links li.siga:hover a,
.header .row_links li.siga:focus a,
.header .row_links li.siga:active a {           
    border-bottom: none;
}
.header .row_links {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row; 
    margin: 0 auto;
    height: 100%;
}
.row_links li.siga a {
    padding: 7px;
    display: block;
  height: 100%; 
    border-left: 1px solid transparent;
}
.row_links li.siga ul#submenu_siga {
    background-color: #b20000; 
    position: relative;
    z-index: 5;
    top: 125px;
    display: none; 
    padding-bottom: 5px;
}
li.siga:hover ul#submenu_siga, 
li.siga:focus ul#submenu_siga,
li.siga:active ul#submenu_siga {
    display: block; 
    position: absolute;
    z-index: 6;
}
li.siga ul#submenu_siga  a {
    font-size: .7rem;
}
li.siga ul#submenu_siga li {
    border-left: 1px solid transparent; 
    margin-left: 5px; 
}
li.siga ul#submenu_siga li:hover, 
li.siga ul#submenu_siga li:focus,
li.siga ul#submenu_siga li:active {
     border-left: 1px solid #fff; 
}
/* ************** #Row2 - ICONES DAS MIDIAS | BOTAO DESTAQUES *************** */

.header #row2 {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #f3f3f3;
    padding: 0;
    padding-bottom: 5px;
}
#row2 #social {
    width: 40%; 
    height: 30px; 
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
#social ul.icones {
    display: flex;
    height: 30px; 
    padding-left: 2%;
}
ul.icones li {
    width: calc((100% - 10vw )/ 4 );
    height: 35px;
    margin-left: 2vw;
}
.icones li figure {
    height: 95%;
}
.icones figure img {
    height: 85%;
    width: auto;
    padding-top: 10px;
}
.icones .mail figure img {
     padding-top: 12px;
}
.mail #sub_mail {
    position: relative;
    top: -3px;
    z-index: 5;
    width: 130px;
    height: 70px;
    background-color: #fff; 
    display: none;
}
.mail:hover #sub_mail,
.mail:focus #sub_mail,
.mail:active #sub_mail {
     display: block;
     background-color: #f3f3f3;
}
.mail:hover,
.mail:focus,
.mail:active {
    width: 20%;
    margin: auto;
    padding-left: 2vw;
}
.mail #sub_mail li a {
    color: #333;
    font-size: .87rem;
    padding-top: 3px;
    padding-left: .5vw;
    border-left: solid 1px transparent;
}
#sub_mail li {
    margin-left: 0;
    margin-top: 3px;
    padding-left: 3px;
}
.mail #sub_mail a:hover,
.mail #sub_mail a:focus,
.mail #sub_mail a:active {
    border-left: solid 1px var(--vermelho);
}
/* **** Botao Destaques, Pesquisar e Login **** */

#dest_log_pesq {
    height: 30px; 
    width: 60%; 
    padding-right: 2vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#row2 #bt_destaques, #row2 #pesquisar, #row2 #bt_login {
    padding-top: 5px;
    text-align: right;
    margin-right: 2.2%;
    box-sizing: border-box;
}
#bt_destaques a, #bt_login a {  
    display: block;
    width: 100%;
    font-size: .9rem;
    font-weight: 500;
    font-family: robotoitalic, glorymedium;
    text-align: center;
    padding: .5px 2px;
    border-radius: 3px;
    border: solid 1.5px #fff;  
    color: #fafafa;
    background-color:  var(--verde-claro);
}
#bt_destaques a:hover, 
#bt_destaques a:focus, 
#bt_destaques a:active,
#bt_login a:hover, 
#bt_login a:focus, 
#bt_login a:active {
    background-color: var(--verde-medio);
    border-radius: 3px;
}
#row2 #pesquisar {
    margin-top: 7px;
}
/* *** #Row1 - MENU PRINCIPAL (Institucional, Academico..)  **** */

.header #row1 {
    background-color: #555; 
    height: 30px; 
}
.header #row1 #nav_menu {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    min-width: 225px; 
}
/* *** Botao ABRIR (icon) do Menu Principal *** */

#nav_menu .menu_icon {
    display: inline-block;
    width: 30px;
    height: 20px;
    margin-top: 3px;
    background-image: url('../img/menu_burger.png');
    background-size: cover;
    cursor: pointer;
    margin-left: 10px;
}
/* ******* MENU PRINCIPAL - (Institucional, Academico etc). ******** */

#nav_menu .menu_princ {
    display: none;
    width: 100%;
    min-width: 225px; 
    padding-bottom: 10px;
    padding-left: 7px;
    overflow: hidden;
    word-wrap: break-word; 
    background-color: #920000; 
}
#nav_menu li {
    display: block;
    padding-right: 3%;
    padding-top: 5px;
    padding-bottom: 5px;
}
#nav_menu li:first-child {
    padding-bottom: 3px;
}
#nav_menu li:hover, #nav_menu li:focus, #nav_menu li:active {
    background-color: #820000;
}
#nav_menu li a {
    color: #fff;
    font-size: .95rem;
    display: block;
    font-variant: small-caps;
    outline: none;
    margin-top: 2px;
    font-family: robotoitalic;
}
#nav_menu li:hover ul, 
#nav_menu li:focus ul, 
#nav_menu li:active ul {
    height: auto;
    /* border-left: 1px dashed #eee; */
    background-color: #820000;
    height: 300px;
    margin-top: 5px;
}
/* ******** SUBMENU do Menu PRINCIPAL ******** */

ul.menu_princ .submenu_princ { 
    display: none;
    width: 100%;
    margin-left: 20%; 
    margin-top: 10px;
    word-wrap: break-word;
}
ul.submenu_princ li { 
    transition: background .3s;
    box-sizing: border-box;
}
.submenu_princ li a {
    display: block;
    word-wrap: break-word;
    font-size: .87rem;
    font-family: robotoitalic;
    border-left: solid 1px transparent;
    padding: 0 1% 0 3%;
}
ul.menu_princ li:hover ul.submenu_princ,
ul.menu_princ li:focus ul.submenu_princ,
ul.menu_princ li:active ul.submenu_princ { 
    display: block;
    position: absolute;
    top: 26px;
    left: 100px;
    overflow: auto;
    height: 26rem; 
    cursor: pointer;
}
#nav_menu ul.menu_princ li ul.submenu_princ li:hover a,
#nav_menu ul.menu_princ li ul.submenu_princ li:focus a, 
#nav_menu ul.menu_princ li ul.submenu_princ li:active a {
    border-left: 1px solid #e00; 
}
/* ************************************************************************* */
/* ************************** RESPONSIVO *********************************** */
/* ************************************************************************* */

@media screen and (min-width: 600px) {
    #row1 #nav_menu .row_logons_mob {
        width: 60%;
    }
    ul.menu_princ .submenu_princ { 
        margin-left: 7%;
    } 
}
@media screen and (min-width: 700px) {
    ul.menu_princ .submenu_princ { 
        margin-top: 20px;
    }
     #row2 #social {
        padding-right: 13%;
        text-align: left;
    }
    .header .row_links {
        width: 60%;
        margin: 0 auto; 
    }
}
@media screen and (min-width: 768px) {
    div#logo50a figure {
        width: 45px; 
    }
    div#logo50a h6 {
        font-size: 12px; 
    }
}
@media screen and (min-width: 1000px) {

    /* **** BOTOES ICON | FECHAR desativados. **** */
    #row1 .menu_icon {
        display: none; 
    }
    #nav_menu .menu_princ li#bt_fechar { 
        display: none;
    } 
    /* **** MENU LINKS (Cursos, Vestibular...) **** */
    
    .header .row_links {
        width: 40%;
        margin: 0 auto; 
    }
    .header .row_links li a {           
        font-size: .75rem; 
    }
    div#logo50a figure {
        width: 51px; 
    }
    div#logo50a h6 {
        font-size: 13px; 
    }
    /* ***** MENU PRINCIPAL ***** */
  
    .header #row1 #nav_menu { 
        width: 97%;
        height: 100%;
        margin: auto;
    }
    #nav_menu .menu_princ {           
        display: block;
    }
    #nav_menu ul.menu_princ {
        text-align: center;
        height: 100%;
        background-color: transparent; 
    }
    #nav_menu li {
        display: inline-block;
        padding: 3px 2% 9px 0; 
    }
    #nav_menu ul.menu_princ li a {
        display: block;
        margin-left: 3px;
        font-size: .8rem;
    }
    #nav_menu li:hover a,
    #nav_menu li:focus a,
    #nav_menu li:active a {
        background-color: transparent;
    }
    #nav_menu ul.menu_princ li:hover,
    #nav_menu ul.menu_princ li:focus, 
    #nav_menu ul.menu_princ li:active {
        background-color: #4c4c4c;
        cursor: pointer;
    }
    #nav_menu ul.menu_princ li ul.submenu_princ li:hover a,
    #nav_menu ul.menu_princ li ul.submenu_princ li:focus a, 
    #nav_menu ul.menu_princ li ul.submenu_princ li:active a {
        border-left: 1px solid #fff; 
    }
   /* **** SUBMENU PRINCIPAL **** */
    
    #nav_menu ul.menu_princ li ul.submenu_princ { 
        height: auto;
        border: none;
        margin-top: 0px;
    }
    #nav_menu ul.menu_princ li ul.submenu_princ li { 
        display: block;               
        word-wrap: break-word;
        background-color: #555;
        padding: 5px 5px 5px 0;
        text-align: left;
        width: auto;
    }
    #nav_menu ul.menu_princ li ul.submenu_princ li a { 
        color: #fff;
        border-left: solid 2px transparent;
    }
    #nav_menu ul.menu_princ li ul.submenu_princ li:hover a,
    #nav_menu ul.menu_princ li ul.submenu_princ li:focus a,
    #nav_menu ul.menu_princ li ul.submenu_princ li:active a { 
        border-left: solid 2px #a20000;
    }
    #nav_menu ul.menu_princ:hover ul.submenu_princ,
    #nav_menu ul.menu_princ:focus ul.submenu_princ,
    #nav_menu ul.menu_princ:active ul.submenu_princ {
        width: 16%;
        cursor: pointer;
    /* Para conter os sublinks. */
    }
    #nav_menu ul.menu_princ li:hover ul.submenu_princ,
    #nav_menu ul.menu_princ li:focus ul.submenu_princ,
    #nav_menu ul.menu_princ li:active ul.submenu_princ { 
        margin-left: 0%;
        left: auto;
        cursor: pointer;
    }
    #nav_menu ul.menu_princ li ul.submenu_princ li:hover,
    #nav_menu ul.menu_princ li ul.submenu_princ li:focus, 
    #nav_menu ul.menu_princ li ul.submenu_princ li:active {
        display: block;
        cursor: pointer;
    }
    ul.menu_princ .submenu_princ { 
        margin-top: 0;
    }
}
@media screen and (min-width: 1200px) {
    div.flex_center div:nth-child(2) {
        width: 40%;
        margin-right: 3%;
    }
    .header #row1 #nav_menu { 
        width: 80%;
    }
    #nav_menu ul.menu_princ:hover ul.submenu_princ,
    #nav_menu ul.menu_princ:focus ul.submenu_princ,
    #nav_menu ul.menu_princ:active ul.submenu_princ {
        width: 14%;
        cursor: pointer;
    }
    #nav_menu ul.menu_princ li a {
        font-size: .85rem;
    }
}