@import url('https://fonts.googleapis.com/css?family=Cinzel|Lato&display=swap');

/* utilits  */


@media(max-width: 767px){
    .sm_none{
        display: none;
    }
}



#mod_ubarra{
    font-family: Lato, sans-serif;
    color: #727D83;
    background: #F2F2F2;
}

#open-bar-unifesp {
    display: grid;
    grid-template-columns: auto 150px;
    align-items: center;
}

#open-bar-unifesp .rotate i{
    transform: rotate(180deg);
    transition: all 0.5s ease;
}

@media(max-width: 400px){
    #open-bar-unifesp {        
        grid-template-columns: 100% !important;
        justify-items: right;
    }    
}

.bar-links-unifesp ul {
    list-style: none;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    text-align: left;
}

.bar-links-unifesp h3 {
    margin: 10px 0px;
}

.grid-container-unifesp {
    margin: auto;    
    height: 230px;
    display: grid;
    grid-template-columns: auto minmax(300px, 30%) auto minmax(350px, 60%) auto;
    grid-gap: 1rem;
    align-items: center;
}

.bar-button-unifesp {
    grid-column: 2;
    display: flex;
    flex-direction: column;
}

.bar-links-unifesp {
    grid-column: 4;
    display: flex;
    place-content: space-around;
    margin-bottom: 20px;
}

@media(max-width: 767px){

    .grid-container-unifesp {
        width: 100%;
        display: grid; 
        grid-template-columns: 100%;
        grid-template-areas:
        'a'
        'b';
        grid-gap: 1rem; 
    }                                   
            

    .bar-button-unifesp {
        grid-column: none;
        grid-area: a;
        min-width: 300px;
        align-items: center;
        margin-top: 10px;
    }

    .bar-links-unifesp{
        grid-column: none;
        grid-area: b;
    }

}

.u-btn {
    border-radius: 20px;   
    padding: 8px 20px;
    width: 80%;
    margin-bottom: 14px;
}

#open-bar-unifesp a {
    font-family: 'Cinzel', serif;
    padding: 8px 20px;
    text-align: right;      
    cursor: pointer;
    color: white;
}

#open-bar-unifesp a,
#open-bar-unifesp a:active, 
#open-bar-unifesp a:focus, 
#open-bar-unifesp a:target {
    border: none;
    outline:none;
}

#open-bar-unifesp img {
    padding: 0px;
    margin: 0px;
    width: 70px;
}

#open-bar-unifesp > div {
    margin: 4px 20px;
}

#bar-unifesp-content{    
    align-content: center;    
    height: 0;
    overflow: hidden;
    transition: height 0.8s ease;
}

#bar-unifesp-content li a{
    text-decoration: none;
    color: #33434C  ;          
}

#open-bar-unifesp img {
    padding: 0px;
    margin: 0px;
    width: 70px;
}

/* campus colors */

.barra-default .u-btn, .barra-reitoria .u-btn , .barra-baixada-santista .u-btn
,.barra-diadema .u-btn ,.barra-guarulhos .u-btn ,.barra-sao-paulo-m .u-btn
,.barra-sao-paulo-e .u-btn,.barra-sao-jose-campos .u-btn
,.barra-zona-leste .u-btn ,.barra-osasco .u-btn {
    background-color: #727D83;
    color: white;
    text-decoration: none;
}

.barra-default #open-bar-unifesp {
    background: #33434C;
    color: #ffffff;
}

.barra-reitoria #open-bar-unifesp  {
    background: #5D866C;
    color: #ffffff;
}
.barra-baixada-santista #open-bar-unifesp {
    background: #9EAA9E;
    color: #ffffff;
}
.barra-diadema #open-bar-unifesp {
    background: #88A6B4;
    color: #ffffff;
}
.barra-guarulhos #open-bar-unifesp {
    background: #B49E99;
    color: #ffffff;
}
.barra-sao-paulo-m #open-bar-unifesp {
    background: #88A89D;
    color: #ffffff;
}
.barra-sao-paulo-e #open-bar-unifesp {
    background: #82A8AA;
    color: #ffffff;
}
.barra-sao-jose-campos #open-bar-unifesp {
    background: #8C9EAD;
    color: #ffffff;
}
.barra-zona-leste #open-bar-unifesp {
    background: #9D9A8C;
    color: #ffffff;
}
.barra-osasco #open-bar-unifesp {
    background: #AC969E;
    color: #ffffff;
}


/* nav accessibility */
#accessibility {
    margin: 2px 0 0 0;
    list-style: none outside none;
    font-size: 0.8em;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
}

#accessibility li {
    margin-right: 10px;
    display: inline;
}

#accessibility a {
    color: #ffffff;
    font-size: 0.8em    
}

#accessibility a span {
    font-weight: bold;
    background-color: #ffffff;
    color: #33434c;
    padding: 0 3px;
}


/* ..................................................................................................... */
/* ALTO CONTRASTE */
.contrast,
.contrast nav,
.contrast div:not(.n2-ss-slide div),
.contrast li,
.contrast ol,
.contrast header,
.contrast footer,
.contrast section,
.contrast main,
.contrast aside,
.contrast th,
.contrast tr,
.contrast td,
.contrast article {
    background: black !important;
    color: white !important;
}

.contrast h1,
.contrast h2,
.contrast h3,
.contrast h4,
.contrast h5,
.contrast h6,
.contrast p,
.contrast label,
.contrast strong,
.contrast em,
.contrast cite,
.contrast q,
.contrast i,
.contrast b,
.contrast u,
.contrast span {
    color: white !important;
}

.contrast span {
    background: black !important;
    color: white !important;
}

.contrast a{
    color: yellow !important;
}

.contrast button,
.contrast input[type=button],
.contrast input[type=reset],
.contrast input[type=submit] {
    background: black !important;
    color: yellow !important;
    border: none !important;
}

.contrast input[type=text],
.contrast input[type=password],
.contrast input[type=url],
.contrast input[type=search],
.contrast input[type=email],
.contrast input[type=tel],
.contrast input[type=date],
.contrast input[type=month],
.contrast input[type=week],
.contrast input[type=datetime],
.contrast input[type=datetime-local],
.contrast textarea,
.contrast input[type=number] {
    background: black !important;
    border: 1px solid white !important;
    color: white !important;
}

.contrast img.on-contrast-force-gray {
    filter: grayscale(100%) contrast(120%);
}

.contrast img.on-contrast-force-white {
    filter: brightness(0) invert(1);
}