/* Barra de navegación */
.navbar_boton {
  color: #333;
  background-position: bottom;
  background-image: -webkit-linear-gradient(0deg, #009045, #70a83b, #a3bd31);
  background-size: 0% 0%;
  margin-bottom: 4px;
  background-repeat: no-repeat;
  cursor: pointer;
  font-family: var(--fuente-texto);
  font-size: 1.6rem;
}
.navbar_boton:hover {
  color: #000;
  background-size: 100% 5%;
  animation-name: ani_btn;
  animation-duration: 1.4s;
}
@keyframes ani_btn {
  0% {
    background-size: 0% 5%;
  }
  15% {
    background-size: 100% 5%;
  }
  37% {
    background-size: 78% 5%;
  }
  50% {
    background-size: 100% 5%;
  }
  64% {
    background-size: 91% 5%;
  }
  70% {
    background-size: 100% 5%;
  }
  100% {
    background-size: 100% 5%;
  }
}

.texto {
  background-color: #000c;
  padding: 1.2em 2em;
  color: #fff;
}
.texto > h2 {
  font-size: 3em;
  font-family: Josefin Sans;
}
.texto > p {
  font-family: var(--fuente-texto);
  text-align: justify;
  font-size: 1.2em;
}
.imagen {
  width: 90%;
  height: auto;
  border: dotted 0.3em #fff;
  padding: 0.2em;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.6));
}
.imagen > img {
  width: 100%;
  height: auto;
}
section {
  /*border-top: double 0.5em #fff;*/
  border-bottom: solid 0.5em #fff;
  width: 100%;
  position: relative;
  background-size: cover;
  background-color: #666;
}
div.invertido {
  direction: rtl;
}
div.invertido > div > div.texto {
  direction: ltr;
}
div.desenfocar {
  width: 100%;
  height: 100%;
  background-color: #0008;
}
@supports (background-attachment: fixed) {
  section {
    background-attachment: fixed;
  }
}

#history-year-2008 {
  /*margin-top: 65px;*/
  background-image: url(../img/historia/img1.jpg);
}
#history-year-2008 > div.desenfocar {
  padding-top: 60px;
}
#history-year-2011 {
  background-image: url(../img/historia/img2.jpg);
}
#history-year-2013 {
  background-image: url(../img/historia/img3.jpg);
}
#history-year-2015 {
  background-image: url(../img/historia/img4.jpg);
}
#history-year-2016-1 {
  background-image: url(../img/historia/img5.jpg);
}
#history-year-2016-2 {
  background-image: url(../img/historia/img6.jpg);
}
#history-year-2016-3 {
  background-image: url(../img/historia/img7.jpg);
}
#history-year-2016-4 {
  background-image: url(../img/historia/img4.jpg);
}
#history-year-2017-1 {
  background-image: url(../img/historia/img9.jpg);
}
#history-year-2017-2 {
  background-image: url(../img/historia/img4.jpg);
}
#history-year-2018-1 {
  background-image: url(../img/historia/img11.jpg);
}
#history-year-2018-2 {
  background-image: url(../img/historia/img12.jpg);
}
#history-year-2018-3 {
  background-image: url(../img/historia/img13.jpg);
}
#history-year-2018-4 {
  background-image: url(../img/historia/img14.jpg);
}
#history-year-2019-1 {
  background-image: url(../img/historia/img15.jpg);
}
#history-year-2019-2 {
  background-image: url(../img/historia/img16.jpg);
}
#history-year-2019-3 {
  background-image: url(../img/historia/img17.jpg);
}
#history-year-2021 {
  background-image: url(../img/historia/img18.jpg);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  div.titulo {
    margin-top: 50px;
    margin-bottom: 10px;
    position: relative;
  }
  div.titulo > div {
    border: solid 8px #fff;
  }
  h1.titulo {
    color: #fff;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  div.titulo {
    margin-top: 50px;
    position: relative;
  }
}