/*Banner*/

.banner{
    width: 100%;
    height: 40rem;
    background-image: url(../img/banner.gif);
    
   }

.boxSlogan{
    display: flex;
    margin-right: 50%;
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
   }   
 .logo{
     width: 80%;
     padding-top: 3.5rem;
     margin-top: 1.5rem;
     }
.logo:hover{
    transform: scale(1.2);
}

 .slogan{
     font-size: 2em;
     line-height: 1.5em;
     font-family: OpenSans;
     font-weight: 600px;
     color: #fefefe;
     padding: 1.5rem;
     margin-bottom: 2rem;
     margin-top: 2rem;
 }
 .visite{
    width: 180px;
    padding: 0.6rem 2rem;
    border: none;
    border-radius: 8px;
    background-color: #F60101;
}

.visite:hover{
    background-color: #fefefe;
    font-weight: bold;
    transition: 0.5s background; 
}
.visite a{
    text-decoration:none;
    color:#fefefe;
    font-size: 17px;
    font-family: TextMeOne;
}
.visite a:hover{
    color:#F60101;
    }

/* Apresentação do projeto*/


.projeto-museu{
    width: 60%;
    text-align: justify;
    font-size: 1em;
    font-family: OpenSans;
    color: #fefefe;
    padding: 1.5em;
    line-height: 1.5em;
    margin: 0 auto;
}
em{
    color: #F60101;
    
}

/* Missão, visão, valores*/

.missao-visao-valores{
    width: 60%;
    margin: 0 auto;
    padding: 0.5rem;
}
.missao{
    background-image: url("../img/unicornio.gif");
    opacity: 0.6;
    background-size: cover;
   
}
.visao{
    background-image: url("../img/luis.gif");
    opacity: 0.6;
    background-size: cover;
   
}
.valores{
    background-image: url("../img/giselle.gif");
    opacity: 0.6;
    background-size: cover;
}
.apresentacao li {
    display: inline-block;
    text-align: center;
    width: 31%;
    height: 26rem;
    vertical-align: top;
    margin: 0 0.8%;
    padding: 10rem 1rem 0.8rem 0.8rem;
    box-sizing: border-box;
    border-color: black;
    background-color: #00000010;
    border-radius: 10px;
}
.icone-apresentacao{
    max-width: 5rem;
    padding: 15px 0;
}
.icone-apresentacao:hover{
    transform: scale(1.2);
}
.paragrafo-descricao{
    font-size: 16px;
    font-family: Karla;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5em;
}
.titulo-missao-visao-valores{
    font-size: 24px;
    font-weight: 600;
    font-family: Karla;
    color: #F60101;
    padding-top: 2rem;
}

.apresentacao li:hover{
    box-shadow: 0 2px 10px 5px #ffffff;
    }
.apresentacao li:hover h2{
    font-size: 40px;
}

/* Tutorial de navegação */

.tutorial-navegacao{
    width: 45%;
    margin: 0 auto;
    padding: 3rem 0;
}
.tutorial-navegacao h3 {
    margin: 0 0 1.5em;
    text-align: center;
    font-family: Karla;
    font-size: 20px;
    line-height: 1.5em;
    color:#ffffff;
}

/* Responsividade */

@media screen and (max-width: 480px){
   .logo{
     width: 75%;
     padding-top: 0rem;
     margin-top: 0rem;
     }
     
     .slogan{
        font-size: 1.6em;
        line-height: 1.3em;
        font-family: OpenSans;
        color: #fefefe;
        padding: 1.5rem;
        margin-bottom: 1rem;
        margin-top: 12rem;
    }
    .boxSlogan{
        margin: 0;
        padding: 0; 
           }
    .boxapresentacao{
        width: 80%;
    }
    .projeto-museu{
        width:90%;
        padding:1rem;
        margin: 0 auto;
    }
    .missao-visao-valores{
        width: 90%;
        margin: 0 auto;
         }
    .apresentacao li {
        display: block;
        width: 85%;
        height: 31rem;
        margin: 1.2rem auto;
    }
    .tutorial-navegacao{
        width: 95%;
        margin: 0 auto;
        padding:  0;
    }
    .tutorial-navegacao iframe{
        width: 100%;
    }
    .titulo-missao-visao-valores{
              padding-top: 4rem;
    }
    .banner{
        width: 100%;
        height: 550px;
        background-image: url(../img/banner-cel.gif);
        background-size: auto;
        background-repeat: no-repeat;
       }
       .paragrafo-descricao{
        font-size: 18px;
       }
       .apresentacao-projeto{
        margin-top: 63px;
       }
 }