*{box-sizing: border-box;}

body{ font-family: Arial, Helvetica, sans-serif;}

h1{font-size: 3rem; color: white; font-weight: bolder; }
h2{display: block; font-weight: bolder; font-size: 1.3rem; color: darkslategray;}
h3{font-weight: bolder; font-size: 1.5rem; color: darkslategray;}
a{text-decoration: none; color: green;}
p{font-size: 1.2rem; text-align: left; line-height: 2rem;}

a:hover{font-weight: 800;}

header{width: 100%; display: flex; box-shadow: 3px 3px 3px gray;}

.logos{width: 33%; padding: 1rem 0; align-items: center; text-align: center;}

.logos img{max-height: 100px; max-width: 100px;}

#zona-ampi{width: 100%; background-color: green; padding: 1rem 0; margin-top: 1rem; text-align: center; }

.area-temas{width: 100%; margin-top: 1rem;}

.tema{width: 33%; float: left; padding: 1rem;}

.imagen-tema,.mapa{width: 100%; display: block; padding: 1rem;}

.mapa:hover{animation:sismo 1s; }

.galeria{width: 100%; overflow: hidden;}

.momento{width: 33%; padding: 1rem; float: left;}
.momento:hover{transform: scale(1.2);}

.vive-titulo{background-color: gray; width: 100%; text-align: center; padding: 1rem 0;}

.bloque-texto{width: 80%; margin: 0 auto; line-height: 1.7rem; color: rgb(51, 47, 47); padding: .5rem; overflow: hidden; }
.imagen-sola{width: 60%; margin: 0 auto; text-align: center;}
.dos-fotos{width: 50%; float: left; padding: 1rem;}
.tres-fotos{width: 33%; float: left; padding: 1rem;}

.boton-home{display: flex; width: 50%; background-color: rgb(182, 175, 175); height: 45px; color: white; justify-content: center; align-items: center;}

.boton-regresar{display: flex;  width: 80%; margin: 0 auto; background-color: gray; height: 45px; color: white; justify-content: center; align-items: center;}

@keyframes sismo{

    0%{translate: 10px 0px;}
    10%{translate: -10px 0px;}
    20%{translate: 10px 0px;}
    30%{translate: -10px 0px;}
    40%{translate: 10px 0px;}
    50%{translate: -10px 0px;}
    60%{translate: 10px 0px;}

    70%{translate: -10px 0px;}
    80%{translate: 10px 0px;}
    90%{translate: -10px 0px;}
    100%{translate: 15px 0px;}
}

.imagen-tema:hover{opacity: .5;}

.titulo-tema{width: 100%; display: block; padding: 1rem; text-align: center;}

h2:hover{color: black; font-size: 1.5rem;}

footer{width: 100%; margin-top: 2rem;}


@media screen and (max-width:800px){

    .area-temas,.tema{display: block; width: 100%;}
    .tema{margin-bottom: 1rem;}
    .galeria{}
    .momento{width: 85%; float: none; margin: 0 auto;}
    .bloque-texto{width: 95%;}
    .imagen-sola{width: 90%;}
    .dos-fotos,.tres-fotos{float: none; width: 90%; margin: 0 auto;}
}