/* FATEC-SP */

@charset "utf-8";

/* Logo 50 Anos do Banner */
#imagem figure.etiqueta { /* Vide regras em style61.css */}

figure.img_home > * {
    width: 13%;
    flex-grow: 0;
    margin-top: 16px; 
    margin-right: 1%;
    padding-left: 2%;
}
figure.img_home > div img:hover {
   filter: sepia();        
}
figure.img_home > a {
    display: none;
}
#imagem figure.etiqueta div a, 
#imagem figure.etiqueta div a:hover,
#imagem figure.etiqueta div a:focus,
#imagem figure.etiqueta div a:active {
    background-color: transparent; 
}
/* Texto do Banner */
#manchete {
    position: relative; 
    bottom: 155px;
}
#manchete #texto p {
    position: relative;
    top: -25px;
    padding-left: 2.5%;
    padding-right: 2.5%;
    padding-top: 0;
    font-size: 1.45rem;
    font-family: robotoregular;
    text-align: center; 
    color: #fff;
    text-shadow: 3px 3px 5px rgba(3, 3, 3, .5);
    font-weight: bold;
    animation-name: mexe;
    animation-duration: .7s;
}
#manchete #texto p:hover, #manchete #texto p:focus, #manchete #texto p:active { 
    color: #eee;
}
/* Animação da 'Manchete' (da direita para a esquerda) */
@keyframes mexe {
    0%   {left: 100px; }
    100% {left: 0; }
}
/* Seta 'Down' da Home (só aparece após 800px de largura) */
#manchete #mais {
     display: none;
}
/* *** RESPONSIVO *** */

@media screen and (min-width: 450px){
    #manchete #texto p {
        top: -20px;
    }
}
@media screen and (min-width: 500px){
   #manchete { 
         bottom: 140px; 
    } 
}
@media screen and (min-width: 550px){
    #manchete #texto p {
        top: -10px;
    }
}
@media screen and (min-width: 600px) {    
    figure.img_home > * {
        width: 10%;
        max-width: 112px;
    }
    #manchete #texto p {
        top: 0;
    }
}
@media screen and (min-width: 800px) { 
    /* SETA down - HOME */
    #manchete #mais {
        display: block;
        width: 70px;
        margin-top: -15px;
        position: absolute;
        top: 75px;
        right: 7%;
    }
    #manchete #mais img:hover {
        filter:contrast(1.75);
    }
    #manchete #mais img {
        border-radius: 50px;
        animation-name: piscar;
        animation-duration: 1s;
        animation-iteration-count: 7;
    }
    @keyframes piscar {
        0%   {width: 100%; height: auto;}
        50%  {width: 96%;  height: auto;}
        100% {width: 100%;  height: auto;} 
    }
}
@media screen and (min-width: 900px) { 
    #manchete #texto p {
        font-size: 1.6rem; 
    }
}
@media screen and (min-width: 1200px) { 
    #manchete #texto p {
        font-size: 1.9rem;
    }    
    #manchete #mais {
        width: 80px;
    }
}