*{
  margin: 0;
  padding: 0;
  text-transform: none;
  text-decoration: none;
}
body{
  width: 100vw;
  background: transparent url('assets/concrete-texture.png') repeat;
  overflow-x: hidden;
}

.home{ 
   display: none;
   padding: 20px;
   background; #E1F7E7;
   font-size: 50px;
   color: #0284A8;
   cursor: pointer;
   position: fixed;
   bottom: 20px;
   right: 20px;
  }
header{
  height: 100vh;
  background: transparent url(assets/portada/portada.jpg) no-repeat center center;
  background-size: cover;
}
h1{
  font-family: 'Merriweather', serif;
  font-size: 8.3vh;
  font-weight: 700;
  color: #fff;
  position: absolute;
  top: 64vh;
  left: 7vw;
  text-transform: uppercase;
}
h2{
  font-family: 'Merriweather', serif;
  font-size: 5.5vh;
  font-weight: 400;
  color: #fff;
  position: absolute;
  top: 73vh;
  left: 7vw;
}
.intro p{
  font-family: 'Ubuntu', sans-serif;
  font-size: 2.3vh;
  font-weight: 400;
  width: 60vw;
  color: #fff;
  position: absolute;
  top: 83vh;
  left: 7vw;
}
.navegacion{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  text-align: center;
  position: relative;
}
.navegacion-container{
  position: absolute;
  top: -9vw;
  left: -26vw;
  width: 150vw;
}
.navegacion-item{
  width:28vw;
  height: 140vh;
  display: inline-block;
  background-color: blue;
  border: solid 0.2vw #000;
  transform: rotateZ(22deg);
  position: relative;
  transition: 1s;
  cursor: pointer;
  overflow: hidden;
}
  .navegacion-item:hover{
    transform: rotateZ(22deg) scale(1.05);
  }
.navegacion-item h5{
  transform: rotateZ(-22deg);
  font-family: 'Merriweather', serif;
  font-size: 2vw;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  width: 20vw;
  left: 4vw;
  background-color: rgba(255, 255, 255, 0.5);
}
.fondo{
  position: absolute;
  width: 55vw;
  height: 110vh;
  transform: rotateZ(-22deg);
  top: 5vw;
  left: -15vw;
}
.navegacion-item:first-child, .navegacion-item:last-child{
  width: 32vw;
}
.navegacion-item:first-child h5{
  top: 12vw;
}
.navegacion-item:first-child .fondo{
  position: absolute;
  width: 40vw;
  height: 110vh;
  transform: rotateZ(-22deg);
  top: 3vw;
  left: 8vw;
}
.navegacion-item:nth-child(2) h5{
  top: 25vw;
}
.navegacion-item:nth-child(3) h5{
  top: 35vw;
}
.navegacion-item:last-child h5{
  top: 50vw;
}
.navegacion-item:last-child .fondo{
  position: absolute;
  width: 37vw;
  height: 110vh;
  transform: rotateZ(-22deg);
  top: 12.5vw;
  left: -13vw;
}
#imagen-origen{
  background: url('assets/portada/origen.jpg') center center no-repeat;
  background-size: cover;
}
#imagen-opositores{
  background: url('assets/portada/opositores.jpg') center center no-repeat;
  background-size: cover;
}
#imagen-relleno{
  background: url('assets/portada/relleno.jpg') center center no-repeat;
  background-size: cover;
}
#imagen-habitantes{
  background: url('assets/portada/habitantes.jpg') center center no-repeat;
  background-size: cover;
}
.capitulo{
  padding-top: 4vw;
}
.capitulo h3{
  font-family: 'Merriweather', serif;
  font-size: 3vw;
  font-weight: 700;
  width: 60vw;
  margin: 0 auto 4vw;
  padding: 2vw 20vw;
  text-align: center;
  text-transform: uppercase;
  background-color: rgba(23, 65, 74, 0.6);
}
.capitulo h4{
  font-family: 'Merriweather', serif;
  font-size: 2.6vw;
  font-weight: 400;
  width: 80vw;
  margin: 3vw auto;
}
.capitulo p{
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.7vw;
  font-weight: 400;
  width: 80vw;
  margin: 2vw auto;
}
.galeria{
  width: 100vw;
  height: 56vw;
  margin: 6vw auto;
}
.galeria.salvador{
  background: transparent url('assets/galerias/salvador1.jpg') no-repeat center center;
  background-size: cover;
  animation-name: salvador;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}
.galeria.samuel{
  background: transparent url('assets/galerias/samuel1.jpg') no-repeat center center;
  background-size: cover;
  animation-name: samuel;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
.galeria.sitio{
  background: transparent url('assets/galerias/mixtos1.jpg') no-repeat center center;
  background-size: cover;
  animation-name: mixtos;
  animation-duration: 18s;
  animation-iteration-count: infinite;
}
iframe{
  width: 80vw;
  height: 45vw;
  display: block;
  margin: 4vw auto;
}
footer{
  padding: 1.5vw 0;
  background-color: rgba(23, 65, 74, 0.6);
  text-align: center;
}
footer p{
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.3vw;
  font-weight: 400;
}
@keyframes mixtos {
  16%{
    background-image: url('assets/galerias/mixtos2.jpg')
  }
  32%{
    background-image: url('assets/galerias/mixtos3.jpg')
  }
  48%{
    background-image: url('assets/galerias/mixtos4.jpg')
  }
  64%{
    background-image: url('assets/galerias/mixtos5.jpg')
  }
  80%{
    background-image: url('assets/galerias/mixtos6.jpg')
  }
  99%{
    background-image: url('assets/galerias/mixtos1.jpg')
  }
}
@keyframes samuel {
  25%{
    background-image: url('assets/galerias/samuel2.jpg')
  }
  50%{
    background-image: url('assets/galerias/samuel3.jpg')
  }
  75%{
    background-image: url('assets/galerias/samuel4.jpg')
  }
  100%{
    background-image: url('assets/galerias/samuel1.jpg')
  }
}
@keyframes salvador {
  20%{
    background-image: url('assets/galerias/salvador2.jpg')
  }
  40%{
    background-image: url('assets/galerias/salvador3.jpg')
  }
  60%{
    background-image: url('assets/galerias/salvador4.jpg')
  }
  80%{
    background-image: url('assets/galerias/salvador5.jpg')
  }
  100%{
    background-image: url('assets/galerias/salvador1.jpg')
  }
}

@media (max-width: 700px){
  h1{
    font-size: 6.3vh;
    top: 60vh;
    left: 7vw;
  }
  h2{
    font-size: 4.3vh;
    top: 67vh;
    left: 7vw;
  }
  .intro p{
    font-size: 2.1vh;
    width: 80vw;
    top: 74vh;
    left: 7vw;
  }
  .home{ 
   display: none;
   padding: 0vw;
   background; #E1F7E7;
   font-size: 30px;
   color: #0284A8;
   cursor: pointer;
   position: fixed;
   bottom: 20px;
   right: 5px;
  }
  .navegacion-container {
    position: absolute;
    top: -6vw;
    left: -5vw;
    width: 110vw;
  }
  .navegacion-item, .navegacion-item:first-child, .navegacion-item:last-child{
    width: 105vw;
    transform: rotateZ(-5deg);
    height: 25vh;
  }
  .navegacion-item:hover{
    transform: rotateZ(-5deg);
  }
  .navegacion-item:first-child, .navegacion-item:last-child{
    height: 27vh;
  }
  .fondo, .navegacion-item:first-child .fondo, .navegacion-item:last-child .fondo{
    width: 105vw;
    height: 32vh;
    transform: rotateZ(5deg);
    top: -5vw;
    left: 0;
  }
  .navegacion-item:first-child .fondo{
    top: 5vw;
  }
  .navegacion-item h5, .navegacion-item:first-child h5, .navegacion-item:nth-child(2) h5, .navegacion-item:nth-child(3) h5, .navegacion-item:last-child h5{
    transform: rotateZ(5deg);
    font-size: 5vw;
    width: 50vw;
    top: 24vw;
    right: 3vw;
    left: auto;
  }
  .capitulo h3{
    font-size: 10vw;
    width: 90vw;
    margin: 6vw auto;
    padding: 2vw 5vw;
  }
  .capitulo h4{
    font-size: 7.5vw;
    width: 85vw;
    margin: 5vw auto;
  }
  .capitulo p{
    font-size: 5vw;
    width: 85vw;
    margin: 3vw auto;
  }
  iframe{
    width: 100vw;
    height: 56vw;
    margin: 6vw auto;
  }
  footer {
    padding: 4.5vw 0;
  }
  footer p {
    font-size: 4.3vw;
  }
}