@font-face {
  font-family: FF-MercuryTextG1-Roman;
  src: url("../fonts/Mercury Text G1 Roman.otf");
}
@font-face {
  font-family: FF-MercuryTextG1-Italic;
  src: url("../fonts/Mercury Text G1 Italic.otf");
  font-style: italic;
}

@font-face {
  font-family: FF-MercuryTextG1-Semibold;
  src: url("../fonts/Mercury Text G1 Semibold Regular.otf");
  font-weight: bold;
}
@font-face {
  font-family: FF-MercuryTextG1-Semibold-Italic;
  src: url("../fonts/Mercury Text G1 Semibold Italic.ttf");
  font-weight: bold;
}

@font-face {
  font-family: FF-GothamMedium;
  src: url("../fonts/Gotham-Medium.ttf"),
      url("../fonts/Gotham-Medium.otf") format("opentype");
}

@font-face {
  font-family: FF-GothamBold;
  src: url("../fonts/Gotham-Bold.ttf"),
      url("../fonts/Gotham-Bold.otf") format("opentype");
  font-weight: bold;
}

@font-face {
  font-family: FF-GothamBook;
  src: url("../fonts/Gotham-Book.ttf"),
      url("../fonts/Gotham-Book.otf") format("opentype");
}


body {
      margin: 0px;
      font-family: FF-MercuryTextG1-Roman;
      font-size: 14pt;
      line-height: 20pt;
      text-align: justify;
      margin: auto;
      width: 900px;
    }
    .box {
      background: #76bc21;
      padding: 20px;
    }
    .container {
  position: relative;
  width: 95%;
  height: 2225px;
  margin: 30px 0;
  background: #fff;
  margin: auto;
  border: 10px solid #fff;
}

.container img {
  position: absolute;
  width: 100%;
  object-fit: cover;
  opacity: 0;
}

    .title {
      font-family: FF-GothamMedium!important;
      color: #fff;
      text-align: left;
      text-transform: uppercase;
      font-size: 12pt;
      line-height: 15pt;
    }
    .verde {
      color: #000;
    }
    .semibold {
      font-family: FF-MercuryTextG1-Semibold;
    }
  
    .negro {
      color: #000;
    }
    .puntos {
      text-indent: -18px;
    }
   

    .subrayado {
      font-family: FF-MercuryTextG1-Semibold;
      border-bottom: 2px solid #76bc21;
      color: #76bc21;
    }

    .subtitulo {
      text-transform: none;
      font-family: FF-GothamBook;
      color: #000;
    }

    .nota {
      font-size: 11pt; line-height: 15pt;
      color: #fff;
    }
    .regular {
      font-family: FF-MercuryTextG1-Roman;
    }
  

    /* scrollbar */
	/* Tamaño del scroll */
  *::-webkit-scrollbar {
    width: 20px;
  }

  /* Estilos barra (thumb) de scroll */
  ::-webkit-scrollbar-thumb {
    background: #000;
    border: 8px solid transparent;
    background-clip: content-box;
    border-radius: 20px;
  }

  *::-webkit-scrollbar-thumb:active {
    background-color: #000;
  }

  ::-webkit-scrollbar-track {
    background: #eb7a1f;
    border: 9px solid transparent;
    background-clip: padding-box;
  }


  ::-webkit-scrollbar-button:start:decrement,
  ::-webkit-scrollbar-button:end:increment {
    display: block;
  }

  /* Turn off the down area up on top, and up area on bottom */
  ::-webkit-scrollbar-button:start:increment,
  ::-webkit-scrollbar-button:end:decrement {
    display: none;
  }

  


    /* Place The scroll down button at the bottom */
    ::-webkit-scrollbar-button:end:increment {
      background-image: url('../imagenes/down-negro.svg');
    }

    /* Place The scroll up button at the up */
    ::-webkit-scrollbar-button:start:decrement {
      background-image: url('../imagenes/up-negro.svg');
    }

.estado-cerrar-verde:hover {
color: #76bc21;
}

.indice-capitulos:hover,
			.cuadro-boton-texto-big:hover {
				color: #fff;
			}
			.cuadro-boton-texto::before,
			.cuadro-boton-texto-verde::before,
			.cuadro-boton-texto-big::before {
				content: "";
				display: block;
				background: url("../../recursos/estilos/iconos/flecha-blanco.svg") no-repeat;
				width: 12px;
				height: 22px;
				float: left;
				margin: 0 -16px 0 0;
				background-size: cover;
				position: relative;
				left: -30px;
				top: -3px;
				animation: fadeindice  2s infinite;
			}
			.cuadro-boton-texto-numero::before {
				content: "";
				display: block;
				background: url("../../recursos/estilos/iconos/flecha-blanco.svg") no-repeat;
				width: 12px;
				height: 22px;
				float: left;
				margin: 0 -30px 0 0;
				background-size: cover;
				position: relative;
				left: -40px;
				top: -3px;
				animation: fadeindice 2s infinite;
			}
			.cuadro-boton-texto:hover,
			.cuadro-boton-texto-numero:hover {
				color: #fff;
			}

 /* ESTILOS DE TEXTO  */

 .vinetas-recuadros:before {
  content: "•";
  display: block;
  width: 16px;
  height: 16px;
  float: left;
  margin: 0 -8px 0 0;
  position: relative;
  color: #fff;
} 

.indice-lineas {
  animation: reveal-left-mascara 3s  forwards;
  animation-delay: 0.5s;					
}

.grafico-1-down  {
  clip-path: inset(0 0 0 0);
  animation: reveal-down-mascara 2s ease-in-out forwards;
  animation-delay: 1.5s;
  }

  .grafico-2-down  {
    clip-path: inset(0 0 0 0);
    animation: reveal-down-mascara 2s ease-in-out forwards;
    animation-delay: 2.5s;
    }

  .grafico-1-up  {
    clip-path: inset(0 0 0 0);
    animation: reveal-up 2s ease-in-out forwards;
    animation-delay: 1.5s;
    }

  .grafico-1-left  {
    clip-path: inset(0 0 0 0);
    animation: reveal-left 2s ease-in-out forwards;
    animation-delay: 1.5s;
    }

    .grafico-2-left  {
      clip-path: inset(0 0 0 0);
      animation: reveal-left 2s ease-in-out forwards;
      animation-delay: 2.5s;
      }
  
    .cuadro-sub-boton:hover,
    .Cuadros_-_cuadro-sub-boton-off, 
    .cuadro-sub-boton-on {
      background: #fff;
      border: 3px solid #fff;
      border-radius: 50px;
      color: #76bc21!important;
      padding: 5px 0px;
    }		

    .cuadro-sub-boton-off,
    .cuadro-sub-boton
    {
      background: #76bc21;
      border: 3px solid #fff;
      border-radius: 50px;
      color: #fff!important;
      padding: 5px 0px 5px 0px;
    }		
    .cuadro-sub-boton-off:hover {
      background: #c1f97e;
      border: 3px solid #c1f97e;
      border-radius: 50px;
      color: #76bc21!important;
      padding: 5px 0px 5px 0px;
      font-family: FF-GothamBold,"Gotham Bold";
    }
@keyframes reveal-right {
  0% {
    clip-path: inset(0 0 0 100%);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes reveal-left {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes reveal-up {
  0% {
    clip-path: inset(100% 0 0 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes reveal-down {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes reveal-expand {
  0% {
    clip-path: inset(100% 100% 100% 100%);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeindice {
  0% {
     opacity: 0;
     -webkit-transform: translateX(-10px);
  }
  100% {
     opacity: 1;
     -webkit-transform: translateX(0);
  }
 }
 @keyframes reveal-left-mascara {
  0% {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  }

  100% {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  }
}

					@keyframes reveal-down-mascara {
							0% {
							clip-path: inset(0 0 100% 0);
							opacity: 1;
							}
					
							100% {
							clip-path: inset(0 0 0 0);
							opacity: 1;
							}
						}