:root {
  --yellow: #d2a10a;
  --blue: #0f1d2c;
  --green: #00a174;
  --beige: #ebe6da;
  --lightgrey: #b2b4b6;
  --darkgrey: #252726;
}

@font-face {
  /* Antes de descargar el archivo, le decimos al buscador
  que intente buscar en local la fuente con nombre
  Avenir*/
  font-family: "Avenir";
  src: local("Avenir"), url("../fonts/Avenir-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Avenir-Black";
  src: local("Avenir-Black"),
    url("../fonts/Avenir-Black.ttf") format("truetype");
}

@font-face {
  font-family: "Avenir-Light";
  src: local("Avenir-Light"),
    url("../fonts/Avenir-Light.ttf") format("truetype");
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  color: beige;
  background-color: var(--blue);
}

/*
    WHAT IS THIS?!
    We inherit box-sizing: border-box; from our <html> selector
    Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
  */
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: Avenir-Light;
  font-size: 16px;
}

button {
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

/* General */
#phone-item,
#tablet-item {
  position: fixed;
  width: 1px;
  height: 1px;
  display: none;
}

#main-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--blue);
}

#menu-layer {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(15, 29, 44, 0.2);
  z-index: 2;
}

#cointainer-fullscreen-video {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 2;
}

#fullpage .section {
  background-color: var(--blue);
}

.section-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  /* margin-top: 10%; */
}

.section-wrapper-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  /* margin-top: 10%; */
}

.center-gallery {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
}

.section-box {
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0% 6%;
  max-width: 1024px;
}

.section-box-center-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0% 6%;
  max-width: 1024px;
}

.slide-box-center-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.video-container {
  width: 100%;
  height: 54%;
  display: flex;
  justify-content: center;
  max-width: 1024px;
}

.title-beige {
  font-family: "Avenir-Black";
  justify-content: center;
  text-align: center;
  font-weight: 600;
  font-size: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.slide .title-beige {
  visibility: hidden;
}

.title-green {
  display: flex;
  font-family: "Avenir";
  justify-content: center;
  text-align: center;
  color: var(--green);
  font-size: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.standard-text {
  font-size: 1.18em;
  line-height: 1.8em;
  width: 100%;
  padding-bottom: 1em;
  word-wrap: break-word;
}

/* Referencias */
#references-text span {
  font-family: "Avenir-Black";
  font-size: 1.4em;
}

/* Menú lateral */
#box-left-menu {
  position: fixed;
  display: block;
  top: 0;
  left: -28%;
  width: 28%;
  height: 100%;
  padding: 6% 2% 1% 3.8%;
  margin-top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  transition: all 0.5s ease;
  z-index: 3;
}
#left-menu {
  top: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0;
  color: var(--beige);
  font-family: "Avenir";
  line-height: 27px;
  list-style: none;
  overflow: auto;
}

#box-left-menu.open {
  left: 0;
}

#left-menu li a {
  position: relative;
  z-index: 1;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

#left-menu a {
  color: var(--beige);
}

#left-menu li.active a span {
  color: var(--green);
  border: none;
}

#left-menu li.parent-item {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
}

#left-menu li.parent-item img {
  width: 1.3em;
  margin-left: 1em;
  transition: all 0.5s ease;
}

.box-subsection {
  margin-left: 1.7em;
  border-left: 2px solid var(--green);
  transition: max-height 0.5s ease;
  max-height: 200px;
  overflow: hidden;
}

.box-subsection li {
  margin-left: 0.7em;
}

#lm-section-conservation {
  margin-top: 0em;
}

.box-closed {
  max-height: 0;
}

.contracted {
  transform: rotate(180deg);
}
/* Fin Menú lateral */

/* Header */
#header {
  position: fixed;
  justify-content: flex-end;
  display: flex;
  width: 100%;
  height: 10%;
  align-items: flex-start;
  padding: 0% 3%;
  z-index: 2;
}

.title-fixed {
  width: 100%;
  top: 0;
  display: flex;
  font-family: "Avenir-Black";
  justify-content: center;
  text-align: center;
  font-size: 2em;
  padding-top: 1em;
  position: fixed;
  z-index: 1;
  background: var(--blue);
  -webkit-box-shadow: 0px 7px 8px -1px rgba(15, 29, 44, 1);
  -moz-box-shadow: 0px 7px 8px -1px rgba(15, 29, 44, 1);
  box-shadow: 0px 7px 8px -1px rgba(15, 29, 44, 1);
  display: none;
}

#btnMenu {
  position: fixed;
  width: 4em;
  height: 4em;
  margin: 1% 3%;
  background-size: contain;
  background-image: url(../images/ui/hamburger_off.png);
  background-repeat: no-repeat;
  z-index: 4;
}

#btnMenu:hover {
  background-image: url("../images/ui/hamburger_on.png");
}
#btnLanguage {
  width: 8.81em;
  margin-top: 2.2%;
  object-fit: contain;
}

#btnLanguageM {
  width: 6em;
  object-fit: contain;
  display: none;
}

/* Sección home */
.section-home {
  width: 100%;
  position: relative;
  max-width: 1024px;
}

#logos-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: -5%;
}

#logo-codex {
  width: 30%;
}

#mono-maya {
  width: 17%;
  margin-top: 5%;
}

#hintScroll {
  width: 4em;
  bottom: 5%;
  position: absolute;
  margin: 0 50%;
  transform: translateX(-50%);
  animation: MoveUpDown 1.5s linear infinite;
}
/* Fin Home */

/* Seccion Apoyos interactivos*/
.generic-button {
  font-family: "Avenir-Black";
  height: 1.9em;
  background-color: var(--green);
  border-radius: 100px;
  font-size: 21px;
  color: var(--blue);
  border: none;
  transition: all 0.8s ease;
  padding: 0 0.7em;
}

#cointainer-botones-apoyos {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1.6em;
  margin-top: 10%;
}
/* Fin Apoyos interactivos */

#button-close-full-image {
  position: absolute;
  width: 2.5em;
  right: 4%;
  top: 4%;

  transition: all ease 200ms;
}

#button-close-full-image:hover {
  transform: rotate(-90deg);
}

video {
  width: 100%;
  /*height: 100%;*/
  background: var(--blue);
}

#cointainer-botones-codex {
  width: 60%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 1.8em;
  margin-top: 3%;
  padding-bottom: 3%;
}
/* Seccion Materialidad */
.slide-material-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 1024px;
}

.box-material-info {
  flex: 3;
  min-width: 1px;
  margin-right: 2em;
}

.title-slide-material {
  font-size: 1.4em;
  margin-bottom: 1.5em;
  font-family: "Avenir-Black";
  color: var(--green);
}

.box-material-video {
  display: flex;
  flex-direction: column;
  flex: 1.35;
  min-width: 1px;
  height: 56%;
  align-content: center;
  justify-content: center;
}

.btn-material-video {
  display: none;
  color: var(--green);
  text-align: center;
  padding-bottom: 2em;
  font-size: 1.28em;
}

/* Fin Seccion Materialidad */

/* Modal girar pantalla */
.modal-rotate {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: black;
  z-index: 5;
  transition: all ease 200ms;
}

.text-rotate {
  font-family: "Avenir";
  text-align: center;
  margin-top: 2em;
}
.text-rotate span {
  font-family: "Avenir-Black";
}

#img-rotate {
  width: 15%;
}
/* Fin modal girar pantalla */

/* Sección galería RA */

.box-img-ar-gallery {
  display: flex;
  width: 100%;
  max-width: 1024px;
  align-items: flex-end;
}

.img-ar-gallery {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.icon-ar-full {
  background: var(--yellow);
  padding: 0.7em 1.3em;
  box-sizing: unset;
}

/* Fin Sección galería RA */

/* Custom Fullpage */
.fp-controlArrow {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  width: 4em;
  height: 4em;
  margin-top: -38px;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.fp-controlArrow.fp-prev {
  left: 10%;
  background-image: url("../images/ui/atras.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.fp-controlArrow.fp-next {
  right: 10%;
  background-image: url("../images/ui/adelante.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* fin custom full page*/

/* Custom Fotorama */
.fotorama__arr {
  position: absolute;
  width: 4em;
  height: 4em;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-size: 100% 100%;
}

.fotorama__arr--next {
  right: 2px;
  background-size: 100% 100%;
  background-image: url("../images/ui/adelante.png") !important;
}

.fotorama__arr--prev {
  left: 2px;
  background-position: 0 0;
  background-size: 100% 100%;
  background-image: url("../images/ui/atras.png") !important;
}
/* End Custom Fotorama */

/* Línea de tiempo */

.slide-timeline-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 60%;
  max-width: 1024px;
}

.img-tl {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.box-tl-image {
  position: relative;
  flex: 4;
  min-width: 1px;
  width: 100%;
  height: 100%;
}

.box-tl-info {
  position: relative;
  flex: 1.4;
  min-width: 1px;
  height: 100%;
  padding: 2%;
  background-color: var(--darkgrey);
  font-family: "Avenir";
}

.icon-tl-full {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--yellow);
  padding: 0.7em 1.3em;
}

.title-tl {
  font-family: "Avenir-Black";
  font-size: 1.5em;
}

.title-tl span {
  color: var(--lightgrey);
}

.text-tl {
  margin-top: 1.3em;
  font-size: 1em;
  line-height: 27px;
}

.footer-tl {
  position: absolute;
  color: var(--lightgrey);
  font-size: 0.8em;
  bottom: 2%;
  padding-right: 4%;
}
/* Fin Línea de tiempo */

/* Créditos */
#img-credits {
  width: 100%;
}

/* Intrucciones RA */
#img-ra-instructions {
  width: 20%;
  align-self: center;
  object-fit: contain;
}

#ar-instructions-text ul {
  margin: 0;
  padding-left: 20px;
}

#ar-instructions-text div {
  text-align: center;
}

#btn-ar-ir-a-linea {
  margin: 4em 0;
  width: 14em;
  align-self: center;
  flex-shrink: 0;
}

#ar-instructions-text a:link,
#ar-instructions-text a:visited {
  color: var(--beige);
  text-decoration: none;
}

#ar-instructions-text a:hover,
#ar-instructions-text a:active {
  color: var(--green);
  text-decoration: none;
}
/* Fin instruciones RA */

/* Menu bullets */
#bulletMenu {
  position: fixed;
  top: 0;
  right: 3%;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 0;
  margin: 0;
}

#bulletMenu li {
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px;
  position: relative;
}

#bulletMenu li.subsection {
  display: block;
  width: 5px;
  height: 5px;
  margin: 3px 9px;
  position: relative;
}

#bulletMenu li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

#bulletMenu li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  border: 0;
  background: #04070a;
  transition: all 0.1s ease-in-out;
}

#bulletMenu li.subsection a span {
  background: #003962;
  border: none;
}

#bulletMenu li.active a span {
  background: var(--green);
  border: none;
}

.bulletGallery {
  position: absolute;
  z-index: 4;
  top: 85%;
  left: calc(50% - 160px);
}
.bulletGallery li {
  background: #003962;
  display: inline-block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin: 6px;
  position: relative;
}
.bulletGallery li.active {
  background: var(--green);
}
/* TODO agregar una regla para ocultar los bullets cuando sea móvil.*/
@media (pointer:coarse){
  .bulletGallery {
    display:none;
  }
}


/* Desktop */
@media only screen and (min-width: 1250px) {
}
@media screen and (max-width: 1720px) {
  #cointainer-botones-codex {
    width: 85%;
  }
}
@media screen and (min-width: 2000px) {
  .section-box-center-vertical {
    padding: 0% 1%;
  }

  #cointainer-botones-codex {
    width: 55%;
  }
}

@media screen and (max-width: 1450px) {
  #bulletMenu {
    right: 1%;
  }

  #box-left-menu {
    left: -38%;
    width: 38%;
    padding-top: 9%;
  }

  .fp-controlArrow.fp-prev {
    left: 4%;
  }
  .fp-controlArrow.fp-next {
    right: 4%;
  }
}

@media screen and (max-height: 900px) {
  .box-img-ar-gallery {
    max-width: 900px;
  }
}

/* Mobile - tablet landscape */
@media (hover: none) and (min-width: 480px) and (max-width: 1249px) and (orientation: landscape),
  (hover: on-demand) and (min-width: 480px) and (max-width: 1249px) and (orientation: landscape) {
  .modal-rotate {
    display: flex;
  }
}

@media only screen and (max-width: 1250px) and (orientation: portrait) {
  /* Comunes teléfono y tablet */
  #header {
    background-color: var(--blue);
    -webkit-box-shadow: 0px 7px 8px -1px rgba(15, 29, 44, 1);
    -moz-box-shadow: 0px 7px 8px -1px rgba(15, 29, 44, 1);
    box-shadow: 0px 7px 8px -1px rgba(15, 29, 44, 1);
  }

  .section-box-center-vertical {
    max-width: 100%;
  }

  #bulletMenu {
    top: unset;
    right: 1%;
    bottom: 3%;
    height: auto;
  }

  #cointainer-botones-apoyos {
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    row-gap: 1.5em;
    padding-bottom: 10%;
  }

  #btn-ai-ra {
    grid-column: span 2;
    justify-self: center;
    width: 50%;
  }

  #cointainer-botones-codex {
    grid-template-columns: 1fr 1fr;
    width: 87%;
  }

  #box-video-cmm {
    margin-top: 15%;
  }

  .slide-timeline-container {
    flex-direction: column;
    height: inherit;
    max-height: unset;
  }

  .box-tl-image {
    height: 50vh;
    flex: none;
  }

  .box-tl-info {
    height: auto;
    flex: none;
  }

  .footer-tl {
    position: static;
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .box-img-ar-gallery {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 4em;
  }

  .box-material-video {
    display: none;
  }

  .btn-material-video {
    display: block;
  }

  /* Phone portrait */
  @media (max-width: 599px) {

.section-wrapper-column {
  justify-content: start;
}
    #phone-item {
      display: block;
    }

    .fp-controlArrow.fp-next {
      right: 0%;
    }

    .fp-controlArrow.fp-prev {
      left: 0%;
    }

    #header {
      height: 3.5em;
    }
    #btnLanguage {
      display: none;
    }
    #btnLanguageM {
      display: block;
    }

    #box-left-menu {
      left: -75%;
      width: 75%;
      padding: 19% 2% 0% 7%;
    }
    #btnMenu {
      width: 3.5em;
      height: 3.5em;
      margin: 1% 2%;
    }

    #logo-codex {
      width: 46%;
    }

    #hintScroll {
      width: 3em;
    }

    #mono-maya {
      width: 21%;
      margin-top: 7%;
    }

    #btnLanguageM {
      margin-top: 4%;
    }

    .title-fixed,
    .title-beige {
      padding-top: 2.4em;
      font-size: 1.5em;
    }
    .title-green {
      font-size: 1.5em;
    }
    .standard-text {
      font-size: 1em;
    }

    .generic-button {
      font-size: 17px;
      padding: 0 0.3em;
    }

    .video-container {
      height: 45%;
    }

    #cointainer-botones-apoyos .generic-button {
      font-size: 13px;
    }

    #cointainer-botones-codex {
      grid-gap: 1em;
      margin-top: 8%;
    }

    #cointainer-botones-codex .generic-button {
      font-size: 13px;
    }

    .title-tl {
      font-size: 1.3em;
    }

    .fp-controlArrow {
      width: 3em;
      height: 3em;
      margin-top: 0;
    }

    .icon-ar-full {
      padding: 0.4em 0.9em;
    }

    .fotorama__arr {
      width: 3em;
      height: 3em;
    }

    .title-slide-material {
      font-size: 1.3em;
      padding-top: 1rem;
      margin-bottom: 1.2em;
    }

    .box-material-info {
      padding: 0% 3.1em;
      margin-right: 0;
    }

    .slide-timeline-container {
      max-width: 100%;
    }
  }
  /*tablet-portrait-up */
  @media (min-width: 600px) {
    #tablet-item {
      display: block;
    }

    .fp-controlArrow.fp-next {
      right: 0%;
    }

    .fp-controlArrow.fp-prev {
      left: 0%;
    }

    #box-left-menu {
      left: -65%;
      width: 65%;
      padding: 14% 2% 1% 5%;
    }

    #header {
      height: 7%;
    }

    #logo-codex {
      width: 37%;
    }

    #btnLanguage {
      margin-top: 4%;
    }

    .title-fixed,
    .title-beige {
      padding-top: 3.5em;
    }

    .generic-button {
      font-size: 18px;
    }

    .video-container {
      height: 41%;
      width: 90%;
    }

    #cointainer-botones-codex {
      grid-gap: 1.4em;
      margin-top: 8%;
    }

    .box-img-ar-gallery,
    .center-gallery,
    .slide-material-container,
    .slide-timeline-container {
      max-width: 90%;
    }

    .box-material-info {
      margin: 0 2.8em;
    }
  }
}

/* End menu bullets */

/*Animations*/
@keyframes blinker {
  to {
    opacity: 0.1;
  }
}

@keyframes MoveUpDown {
  0%,
  100% {
    bottom: 3%;
  }
  50% {
    bottom: 6%;
  }
}

div#eslabon-text {
  /* margin-top: 5em; */
}

.fp-controlArrow {
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
  animation: heartbeat 1.5s ease-in-out infinite both;
}

.fp-controlArrow:hover {
  animation: none;
}

.fotorama__arr {
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
  animation: heartbeat 1.5s ease-in-out infinite both;
}
.fotorama__arr:hover {
  animation: none;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-6-3 11:57:29
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}