html,body{
  height: 100%;
}
body{
width: 100%;
height: 100%;
background-image:url('../img/fnd_pasto.png');
background-position: top center;
background-repeat: no-repeat;
background-size:cover;
margin: 0;
padding: 0;
overflow: hidden;
}
.bg-repeat{
  background-repeat: repeat;
}

/* Tipografías cuerpo*/
@font-face {
    font-family: libre_flanklin_black;
    src: url(../fonts/Libre_Franklin/LibreFranklin-Black.ttf);
}
@font-face {
    font-family: libre_flanklin_black_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-BlackItalic.ttf);
}
@font-face {
    font-family: libre_flanklin_bold;
    src: url(../fonts/Libre_Franklin/LibreFranklin-Bold.ttf);
}
@font-face {
    font-family: libre_flanklin_bold_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-BoldItalic.ttf);
}
@font-face {
    font-family: libre_flanklin_extra_bold;
    src: url(../fonts/Libre_Franklin/LibreFranklin-ExtraBold.ttf);
}
@font-face {
    font-family: libre_flanklin_extra_bold_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-ExtraBoldItalic.ttf);
}
@font-face {
    font-family: libre_flanklin_extra_light;
    src: url(../fonts/Libre_Franklin/LibreFranklin-ExtraLight.ttf);
}
@font-face {
    font-family: libre_flanklin_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-Italic.ttf);
}
@font-face {
    font-family: libre_flanklin_light;
    src: url(../fonts/Libre_Franklin/LibreFranklin-Light.ttf);
}
@font-face {
    font-family: libre_flanklin_light_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-LightItalic.ttf);
}
@font-face {
    font-family: libre_flanklin_medium;
    src: url(../fonts/Libre_Franklin/LibreFranklin-Medium.ttf);
}
@font-face {
    font-family: libre_flanklin_medium_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-MediumItalic.ttf);
}
@font-face {
    font-family: libre_flanklin_regular;
    src: url(../fonts/Libre_Franklin/LibreFranklin-Regular.ttf);
}
@font-face {
    font-family: libre_flanklin_semi_bold;
    src: url(../fonts/Libre_Franklin/LibreFranklin-SemiBold.ttf);
}
@font-face {
    font-family: libre_flanklin_semi_bold_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-SemiBoldItalic.ttf);
}
@font-face {
    font-family: libre_flanklin_semi_bold_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-SemiBoldItalic.ttf);
}
@font-face {
    font-family: libre_flanklin_semi_bold_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-SemiBoldItalic.ttf);
}
@font-face {
    font-family: libre_flanklin_thin;
    src: url(../fonts/Libre_Franklin/LibreFranklin-Thin.ttf);
}
@font-face {
    font-family: libre_flanklin_thin_italic;
    src: url(../fonts/Libre_Franklin/LibreFranklin-ThinItalic.ttf);
}

h1, h2, h3, h4, h5, h6{
  font-family: 'libre_flanklin_extra_bold'
}
p{
  font-family: 'libre_flanklin_regular'
}

/* width */
::-webkit-scrollbar {
    width: 3px;
}

/*  ------- Estilos de Bootstrap --------*/
.btn-rounded {
  border-radius: 500px;
}
.btn-group-xl>.btn, .btn-xl{
  padding:.8rem 1.3rem;
  font-size:1.55rem;
  line-height: 1.8;
  border-radius: .6rem;
}
/* ------------- Estilos de Generales -----------------*/

.ui-wrapper{
  width: 95%;
  height: 97%;
  margin: 0 auto 3%;
  overflow-y: scroll;
    overflow-x: hidden;
}
.menu{
  width: 100%;
}
.menu_boton{
  width: 100%;
  max-width: 35px;
  margin: 10px
}
.info_menu {
  position: absolute;
  top: 10px;
  left: 73px;
  margin: 10px;
}
.datos_usuario{
  width: 70%;
  float: right;
  text-align: right;
  padding: 10px 5px;
  font-size: 14px;
}
.icono_usuario{
  width: 10%;
  height: 40px;
  max-width: 40px;
  min-width: 40px;
  float: right;
  margin: 10px;
  background-image: url(../img/usuario.svg);
  background-size: contain;
  background-position: center;
}
.icono_usuario.active {
  background-image: url(../img/cerrar.svg);
}
.nombre_usuario{
  color: #e7edf4;
  font-weight: bold;
  margin: 0;
}
.grupo_usuario{
  color: #e7edf4;
  font-size: 1em;
  margin: 0;
}
.img_decoracion{
  position: absolute;
  bottom: 0;
  width: 50%;
  left: 10%;
}

/* ---------- Estilos de ayuda --------------------*/
.full_height{
  height: 100%;
}

/* ------------- Estilos de lección -----------------*/
.titulo_leccion{
  color:#e7edf4;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 0;
}
.titulo_leccion small{
  font-family: 'libre_flanklin_light';
  font-size: 40px;
  font-weight: 100;
}

.titulo_lectura{
  color:#e7edf4;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}
.titulo_lectura small{
  font-family: 'libre_flanklin_light';
  font-size: 24px;
  font-weight: 100;
}
.texto_ejercicios_completados{
  color:#e7edf4;
  font-size: 30px;
  font-weight: 700;
}
.texto_instrucciones{
  color:#e7edf4;
  font-size: 22px;
  font-weight: 700;
}
.texto_animales_restatados{
  color:#e7edf4;
  font-size: 80px;
  font-weight: 700;
  text-shadow: -3px 0 #97bb6e, 0 3px #97bb6e, 3px 0 #97bb6e, 0 -3px #97bb6e;
}
.contenedor_ejercicios{
  width: 100%;
  height: 90%;
  padding: 10px;
}
.contenedor_ejercicios h3{
  color:#e7edf4;
  font-size: 21px;
  font-weight: 700;
}
.scroll_ejercicios{
  height: 90%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.ejercicio {
	width: 31%;
	margin: 0 1%;
	float: left;
	height: 150px;
	color: white;
	padding: 10px;
	box-sizing: border-box;
	background: #39bedd;
	border: solid 2px #1d3471;
	border-radius: 2px;
}
.ejercicio.current {
  color: #e7edf4;
  background: #ffcf07;
}
.ejercicio.lock {
  color: #3e454c;
  background: #b1bac3;
}
.ejercicio.izq {
  margin: 0 1% 0 0;
}
.ejercicio.der {
  margin: 0 0 0 1%;
}
.ejercicio p{
  color:#e7edf4;
  font-size: 14px;
  font-weight: 700;
  margin-bottom:5px;
}
.ejercicio hr {
  margin: 5px;
}

/*------------- Estilos Ejercicios --------------*/
.imagen_fondo_ejercicio{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('../img/fondo-piramide.png');
  background-position:right;
  background-size: contain;
  background-repeat: no-repeat;
}

.contenedor_lectura{
  width: 95%;
  margin: 0 auto;
  background-color: #FFF;
  padding: 10px;
  overflow-y: scroll;
  border-radius: 15px;
}
.lectura{
  padding: 20px;
  padding-bottom: 150px;
}
.lectura h3{
  font-size: 30px;
  color: #4F4F4F;
  font-family: 'libre_flanklin_semi_bold';
}
.lectura p{
  font-size: 24px;
  color: #5e6d77;
}
.imagen_sobrepuesta{
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99999;
  background-image: url("../img/pleca_agua.png");
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
#contenedor_cuenta_atras{
  width: 100px;
  height: 100px;
  padding: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.respuesta{
  margin-bottom: 20px;
}
.swiper-wrapper {
    height:94%;
    padding-top: 6%;
}
.swiper-container {
      width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
.swiper-slide {
  text-align: center;
  font-size: 18px;
  height: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.ejercicio_bullets {
  top: 0;
}
.swiper-pagination-bullet {
   width: 20px !important;
    height: 20px !important;
    margin: 3px;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    border: 2px solid white;
    display: inline-block;
    border-radius: 100%;
    background: #f8f9fa !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #ffc107 !important;
}

/*------------- Estilos Boton con progreso --------------*/
.progress-button {
	position: relative;
	display: inline-block;
	text-align: center;
}
.progress-button button {
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 250px;
	height: 70px;
	border: 2px solid #1ECD97;
	border-radius: 40px;
	background: transparent;
	color: #1ECD97;
	letter-spacing: 1px;
	font-size: 18px;
	font-family: 'libre_flanklin_semi_bold', sans-serif;
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}
.progress-button button:hover {
	background-color: #1ECD97;
	color: #fff;
}
.progress-button button:focus {
	outline: none;
}
.progress-button svg {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
}
.progress-button svg.progress-circle path {
	stroke: #1ECD97;
	stroke-width: 5;
}
.progress-button svg.checkmark path,
.progress-button svg.cross path {
	stroke: #fff;
	stroke-linecap: round;
	stroke-width: 4;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}
.loading.progress-button button {
	width: 70px; /* make a circle */
	border-width: 5px;
	border-color: #ddd;
	background-color: transparent;
	color: #fff;
}
.loading.progress-button span {
	-webkit-transition: opacity 0.15s;
	transition: opacity 0.15s;
}
.loading.progress-button span,
.success.progress-button span,
.error.progress-button span {
	opacity: 0; /* keep it hidden in all states */
}
/* Transition for when returning to default state */
.progress-button button span {
	-webkit-transition: opacity 0.3s 0.1s;
	transition: opacity 0.3s 0.1s;
}
.success.progress-button button,
.error.progress-button button {
	-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
	transition: background-color 0.3s, width 0.3s, border-width 0.3s;
}
.success.progress-button button {
	border-color: #1ECD97;
	background-color: #1ECD97;
}

.error.progress-button button {
	border-color: #FB797E;
	background-color: #FB797E;
}
.loading.progress-button svg.progress-circle path,
.success.progress-button svg.checkmark path,
.error.progress-button svg.cross path {
	opacity: 1;
	-webkit-transition: stroke-dashoffset 0.3s;
	transition: stroke-dashoffset 0.3s;
}
.elastic.progress-button button {
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width 0.3s, border-color 0.3s;
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
}

.loading.elastic.progress-button button {
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
}

/* Botón de progreso */

.container-progress_btn {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw; */
  text-align: center;
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 99999;
}
.pbtn {
  background: #aa50d8;
  width: 200px;
  padding: 15px;
  color: #F4F4F4;
  border-radius: 3em;
  box-shadow: 1px 1px 17px rgba(2, 10, 9, 0.34);
  pointer-events: none;
  text-align: center;
  transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
#countDiv {

    font-family: inherit;
    font-size :1em;
}
.pbtn__progress {
  padding: 9px;
  width: 484px;
  color: transparent;
  background: rgba(0, 0, 0, 0.45);
}
.pbtn__progress--fill:after {
  content: '';
  margin: -26.9px -2px;
  position: absolute;
  display: block;
  background: #bd63da;
  padding: 0.98em;
  border-radius: 3em;
  -webkit-animation: fill 30s linear forwards;
          animation: fill 30s linear forwards;
}
.pbtn__complete {
  padding: 10px;
  width: 200px;
  pointer-events: auto;
  cursor: pointer;
  background: #aa50d8;
  border-radius: 3em;
  box-shadow: 1px 1px 17px rgba(2, 10, 9, 0.34);
  text-align: center;
  transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.pbtn__complete:after {
  color: #F4F4F4;
  margin: -18px 3px;
  position: absolute;
  display: block;
}
#countDiv a{
  width: 100%;
  height: 100%;
  padding: 10px 40px;
}
.foo{
  font-family: inherit;
  color:white;
  font-size :1em;
  z-index: 1;
}
.foo i{
  margin-left: 15px
}

@-webkit-keyframes fill {
  from {
    width: 0;
  }
  to {
    width: 470px;
  }
}

@keyframes fill {
  from {
    width: 0;
  }
  to {
    width: 470px;
  }
}

/* Mapa */

.overlay-inicio {
  width: 100%;
  height:100%;
  position: fixed;
  background-color: RGBA(28, 175, 255, 0.7);
  top:0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.blur {
  filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}
.bienvenida-cont {
  text-align: center;
}
.titulo_bienvenida {
    color: #e7edf4;
    font-family: libre_flanklin_black;
    font-size: 50px;
    margin-bottom: 0;
}
.sub_bienvenida {
    color: #e7edf4;
    font-family: libre_flanklin_light;
    font-size: 30px;
    margin-bottom: 20px;
}
.bienvenida-cont p{
  font-size: 20px;
}
.mover_overlay {
  opacity: 0;
  transform: translate(0%, 30px);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.mover_overlay_abajo {
  opacity: 0;
  transform: translate(0%, -30px);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
/* General button style (reset) */
.btn-mapa {
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 25px 80px;
	display: inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-mapa:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-3 {
	background: #fcad26;
	color: #fff;
}

.btn-3:hover {
	background: #f29e0d;
}

.btn-3:active {
	background: #f58500;
	top: 2px;
}

.btn-3:before {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	line-height: 3;
	font-size: 140%;
	width: 60px;
}
/* Button 3e */
.btn-3e {
	padding: 25px 120px 25px 60px;
	overflow: hidden;
}

.btn-3e:before {
	left: auto;
	right: 10px;
	z-index: 2;
}

.btn-3e:after {
	width: 30%;
	height: 200%;
	background: rgba(255,255,255,0.1);
	z-index: 1;
	right: 0;
	top: 0;
	margin: -5px 0 0 -5px;
	-webkit-transform-origin: 0 0;
	-webkit-transform: rotate(-20deg);
	-moz-transform-origin: 0 0;
	-moz-transform: rotate(-20deg);
	-ms-transform-origin: 0 0;
	-ms-transform: rotate(-20deg);
	transform-origin: 0 0;
	transform: rotate(-20deg);
}
.btn-3e:hover:after {
	width: 40%;
}
.icon-arrow-right:before {
  font-family: "Font Awesome 5 Free";
	content: "\f061";
}


.header-mapa {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.slideshowContainer {
  background-image:url('../img/fnd_pasto.png');
  background-size: 150%;
  background-position-y: 65%;
    border-radius: 5px;
    border-radius: 3px;
    width: 94%;
    height: 94%;
    margin: 3% auto;
}

.slideshowContainer .zoomContainer .mapaCompleto {
    background-color: transparent;
    margin: 20px;
    display: flex;
}

.zoomContainer {
  background-image:url('../img/mapa/fnd_pasto.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow-x: scroll;
  overflow-y: hidden; */
  white-space: nowrap;
}
@media all
and (max-width : 1024px)  {
  .zoomContainer {
    justify-content: left;
  }
}
.zoomViewport {

    /* this needs to have some kind of positioning, absolute
       or relative, to have the pos of elements inside it calculated correctly,
       since otherwise the computeTotalTransformation does not work correctly
       (offsetParent for items would be outside the #content, and offset
       would be calculated relative to the parent..) */
	position:relative;
  overflow-y:hidden;
  overflow-x:scroll;

  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}

/* botones navegación mapa */

.slideshowNavigation {
  position: fixed;
  bottom: 0;
  width: 75%;
  position: fixed;
  left: 50%;
  margin-left: -37.5%;
}
.slideshowNavigation .zoomButton,
.slideshowNavigation .zoomButton:before,
.slideshowNavigation .zoomButton .fas {
  transition: all 0.35s;
  transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.slideshowNavigation .zoomButton:before {
  top: 90%;
  left: -110%;
}

.slideshowNavigation .zoomButton:before {
  background-color: #3cf;
}
.slideshowNavigation .zoomButton .fas {
  color: #3cf;
}
.slideshowNavigation .zoomButton:focus:before,
.slideshowNavigation .zoomButton:hover:before {
  top: -10%;
  left: -10%;
}
.slideshowNavigation .zoomButton:focus .fas,
.slideshowNavigation .zoomButton:hover .fas {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.slideshowNavigation .zoomButton {
  display: inline-block;
  background-color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 15px 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 2px solid #c9cdd5;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  opacity: 0.99;
}
.slideshowNavigation .zoomButton:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.zoomTarget img:hover {
    transform: scale(110%);
    transition: all;
    transform-origin: bottom;
}
.zoomTarget img {
    transition: all;
}

.level2 {
	width:100%;
	height:50%;
	float: left;
}

.level1 {
	width: 250px;
  height: 100%;
  position: relative;
	float: left;
}

.level1 img, .level2 img{
  width: 100%;
}
.level1 svg, .level2 svg{
  width: 100%;
}

.level0 {
  height: 500px;
  width: auto;
  display: inline-block;
}

#ed {
  width: 155px;
  height: 115px;
  position: absolute;
  z-index: 99;
  top: -58px;
  left: -54px;
}

#ed .num_leccion, #ef .num_leccion {
  background-color: yellow;
  width: 69px;
  height: 41px;
  display: inline-block;
  z-index: 98;
  margin: 0 auto;
  background: #fbd321;
  padding: 5px;
  text-align: center;
  border-radius: 0;
  border: solid 2px #f6bc0b;
  position: relative;
  bottom: -55px;
  left: -116px;
}
#ed .num_leccion:after {
  color: #fbd321;
  border-left: 16px solid;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    display: inline-block;
    content: '';
    position: absolute;
    right: -16px;
    top: -2px;
}
#s0 {
  width: 0px;
}
#s1 {
  background:url('../img/mapa/fnd_s1.png');
  background-size: cover;
}
#s2 {
  background:url('../img/mapa/fnd_s1.png');
  background-size: cover;
  background-position: right;
}
#s3 {
  background:url('../img/mapa/fnd_s2.png');
  background-size: cover;
}
#s4 {
  background:url('../img/mapa/fnd_s2.png');
  background-size: cover;
  background-position: right;
}

.btn-entrar {
  margin: 15px auto;
}

.info-activa {
  text-align: center;
    position: fixed;
    bottom: 160px;
    left: 50%;
    transform: translate(-50%, 0%);
    background: rgba(255, 255, 255, .7);
  padding: 20px;
  border-radius: 5px;
}
.num_leccion {
	margin: 0 auto;
	width: 150px;
	height: 47px;
	background: #6bc0db;
	padding: 5px;
	text-align: center;
	border-radius: 3px;
	border: solid 2px #58b0cc;
	position: relative;
	bottom: 83px;
}
.lock .num_leccion {
	background: #1b4157;
	border: solid 2px #55818a;
}
.current .num_leccion{
    background: #fbd608;
    border: solid 2px #fbd608;
}
.current .titulo_lectura {
    color: #1b4157;
}
.num_leccion_activa {
	height: 60px;
	background: #22c1e6;
	padding: 5px 15px;
	text-align: center;
	border-radius: 5px;
	border: solid 2px #6eceec;
	position: fixed;
	top: 110px;
	left: 20px;
}

.num_leccion_activa .titulo_lectura{
  font-size: 30px;
}

#titulo_leccion {
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

/* Animaciones mapa */

.cls-9 {
  stroke-width:0px;
}

.level2.selectedZoomTarget .cls-9 {
  animation: hideshow 400ms ease-out 1 forwards;
}

@keyframes hideshow {
  from { stroke-width:09px; }
  to { stroke-width:20px; }
}


/* Botonera Mapa */

.btn-next {
  float: right;
}
.contenedor-tarjetas {
  height: 150px;
  width: 535px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}
.tarjeta-mapa {
  width: 120px;
  height: 200px;
  margin: 0 5px;
  display: inline-block;
  border-radius: 8px;
  text-align: center;
  overflow: visible;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(78, 66, 53, 0);
  -moz-box-shadow: 0px 0px 13px 0px rgba(78, 66, 53, 0);
  box-shadow: 0px 0px 13px 0px rgba(78, 66, 53, 0);
  transform: translate(0%, 101px);
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.tarjeta-mapa:hover {
  transform: translate(0%, -30%);
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(78, 66, 53, 0.4);
  -moz-box-shadow: 0px 0px 13px 0px rgba(78, 66, 53, 0.4);
  box-shadow: 0px 0px 13px 0px rgba(78, 66, 53, 0.4);
}
.int-tarjeta {
  height: 149px;
  border-radius: 8px;
}
.tarjeta-mapa p{
  line-height: 19px;
  min-height: 38px;
  color: #e7edf4;
  font-family: libre_flanklin_bold;
  margin: 5px 0;
}

.tarjeta-mapa span {
  background: #fed919;
  color: #222;
  font-size: 14px;
  font-weight: bold;
  position:  absolute;
  bottom: 0;
  left: -25px;
  right: -25px;
  padding: 5px 7px;
  border-radius: 10px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

.tarjeta-mapa span:before {
  content: '';
/*   width: 0;
  height: 0; */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fed919;
  position: absolute;
  bottom: -5px;
  left: 40px;
}

.tarjeta-mapa:hover span {
  bottom: 214px;
  visibility: visible;
  opacity: 1;
}

/* Estilos preguntas checkbox */

.inputGroup {
  background-color: #fff;
  display: block;
  margin: 10px 0;
  position: relative;
}
.inputGroup label {
  font-family: libre_flanklin_regular;
  font-size: 20px;
  font-weight: 700;
  padding: 12px 80px 12px 27px;;
  width: 100%;
  border: solid 3px #d4d4d4;
  display: block;
  text-align: left;
  color: #3C454C;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 200ms ease-in;
  overflow: hidden;
}
.inputGroup label:hover {
  background: #d4d4d4;
}
.inputGroup label:before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
          transform: translate(-50%, -50%) scale3d(1, 1, 1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  z-index: -1;
}
.inputGroup label:after {
  width: 32px;
  height: 32px;
  content: '';
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-repeat: no-repeat;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label {
  color: #fff;
}
.inputGroup input:checked ~ label:before {
  -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
          transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
}
.inputGroup input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
}
.inputGroup input:checked ~ label:after {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' width='23px' height='23px' viewBox='0 0 438.533 438.533' style='enable-background:new 0 0 438.533 438.533;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0 c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267 c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407 s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062 C438.533,179.485,428.732,142.795,409.133,109.203z M353.742,297.208c-13.894,23.791-32.736,42.633-56.527,56.534 c-23.791,13.894-49.771,20.834-77.945,20.834c-28.167,0-54.149-6.94-77.943-20.834c-23.791-13.901-42.633-32.743-56.527-56.534 c-13.897-23.791-20.843-49.772-20.843-77.941c0-28.171,6.949-54.152,20.843-77.943c13.891-23.791,32.738-42.637,56.527-56.53 c23.791-13.895,49.772-20.84,77.943-20.84c28.173,0,54.154,6.945,77.945,20.84c23.791,13.894,42.634,32.739,56.527,56.53 c13.895,23.791,20.838,49.772,20.838,77.943C374.58,247.436,367.637,273.417,353.742,297.208z' fill='%23FFFFFF'/%3E%3Cpath d='M219.27,146.178c-20.177,0-37.401,7.139-51.678,21.411c-14.272,14.277-21.411,31.501-21.411,51.678 c0,20.175,7.135,37.402,21.411,51.673c14.277,14.277,31.504,21.416,51.678,21.416c20.179,0,37.406-7.139,51.676-21.416 c14.274-14.271,21.413-31.498,21.413-51.673c0-20.177-7.139-37.401-21.413-51.678C256.676,153.316,239.449,146.178,219.27,146.178 z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-color: #54E0C7;
  border-color: #54E0C7;
  background-position: 3px 2px;
}
.inputGroup label:before {
  background-color: #0db3c8;
}
.inputGroup.bien input:checked ~ label:after {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-color: #54E0C7;
  border-color: #54E0C7;
  background-position: 2px 3px;
}
.inputGroup.bien label:before {
  background-color: #5562eb;
}
.inputGroup.mal input:checked ~ label:after {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 180.607 180.607' style='enable-background:new 0 0 180.607 180.607;' xml:space='preserve' width='16px' height='16px'%3E%3Cpath d='M180.607,10.607l-79.696,79.697l79.696,79.697L170,180.607l-79.696-79.696l-79.696,79.696L0,170.001l79.696-79.697L0,10.607 L10.607,0.001l79.696,79.696L170,0.001L180.607,10.607z' fill='%23FFFFFF'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-color: #54E0C7;
  border-color: #54E0C7;
  background-position: 6px 5px;
}
.inputGroup.mal label:before {
  background-color: #8747e5;
}

.inputGroup.bien input:checked ~ label:after {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-color: #54E0C7;
  border-color: #54E0C7;
}
.inputGroup.bien label:before {
  background-color: #5562eb;
}
.inputGroup.mal input:checked ~ label:after {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 180.607 180.607' style='enable-background:new 0 0 180.607 180.607;' xml:space='preserve' width='23px' height='23px'%3E%3Cpath d='M180.607,10.607l-79.696,79.697l79.696,79.697L170,180.607l-79.696-79.696l-79.696,79.696L0,170.001l79.696-79.697L0,10.607 L10.607,0.001l79.696,79.696L170,0.001L180.607,10.607z' fill='%23FFFFFF'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-color: #54E0C7;
  border-color: #54E0C7;
}
.inputGroup.mal label:before {
  background-color: #8831c4;
}

/* Estilo ranura */

.cont_ranura {
  background: #ededed;
    padding: 20px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    margin: 90px 0 0 0;
}
.cont_ranura p {
  margin: 0i
}

/* Estilo resultados */

#cont-resultados {
  color: white;
  background-color:
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#80c5f7+0,5a71f6+100 */
background: #5a71f6; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #80c5f7 0%, #5a71f6 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #80c5f7 0%,#5a71f6 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #80c5f7 0%,#5a71f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80c5f7', endColorstr='#5a71f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */;

  text-align: center;
  padding: 25px;
}

#cont-result-leccion{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#04deca+0,28e0e0+100 */
background: #04deca; /* Old browsers */
background: -moz-linear-gradient(top, #04deca 0%, #28e0e0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #04deca 0%,#28e0e0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #04deca 0%,#28e0e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04deca', endColorstr='#28e0e0',GradientType=0 ); /* IE6-9 */
text-align: center;
padding: 25px;
}

#cont-resultados h3, #cont-result-leccion h3{
  color: #fff;
}
.factor-lectura {
  width: 99%;
  height: 200px;
  margin: 50px 0;
  border: solid 3px #deeafe;
  border-radius: 10px;
  padding: 7px;
}
#progreso-premio {
  text-align: left;
}
.progress-bar {
	background: #fcfbff;
}
.progress {
  height: 50px;
  padding: 5px;
  background-color: transparent;
    border-radius: .25rem;
    border: 2px solid white;
}
.titulo-regular {
  font-family: libre_flanklin_light;
  margin: 0;
}
.base {
  background-image: url('../img/base-pasto.svg');
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}
.premio-resultado {
  width: 100%;
  position: absolute;
  bottom: 70px;
}
.premio-resultado img {
  width: 100%;
}
.result-int {
  width: 100%;
  height: 110px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.moneda-0 {
  background-image: url(../img/monedas-0.gif);
}
.moneda-1 {
  background-image: url(../img/monedas-1.gif);
}
.moneda-2 {
  background-image: url(../img/monedas-2.gif);
}
.moneda-3 {
  background-image: url(../img/monedas-3.gif);
}
.moneda-4 {
  background-image: url(../img/monedas-4.gif);
}
.moneda-5 {
  background-image: url(../img/monedas-5.gif);
}
.moneda-6 {
  background-image: url(../img/monedas-6.gif);
}
.moneda-7 {
  background-image: url(../img/monedas-7.gif);
}
.moneda-8 {
  background-image: url(../img/monedas-8.gif);
}
.moneda-9 {
  background-image: url(../img/monedas-9.gif);
}
.moneda-10 {
  background-image: url(../img/monedas-10.gif);
}
.estrella {
  width: 25%;
  height: 30px;
  background: url(../img/estrella_false.png) no-repeat center;
  background-size: contain;
  display: inline-block;
  float: left;
}

  .estrellas {
    float: left;
    width: 100%;
    height: 80px;
    margin: 0 auto;
}

  .true {
    background: url("../img/estrella_true.png") no-repeat center;
    background-size: contain;
  }
  .vel-lenta {
  background: url("../img/lenta.png") no-repeat center;
  background-size: contain;
}

.vel-buena {
  background: url("../img/buena.png") no-repeat center;
  background-size: contain;
}

.vel-rapida {
  background: url("../img/rapida.png") no-repeat center;
  background-size: contain;
}

/* Menu */
/* Botonera */

.botonera{
  opacity: 0;
  z-index: 5;
  overflow: hidden;
  display: block;
  position: absolute;
  color: white;
  top: 0;
  right: 25px;
  width: 400px;
  margin-top: 60px;
  border-radius:8px;
  -webkit-transform: translate(0, -150%);
  -ms-transform: translate(0, -150%);
  -o-transform: translate(0, -150%);
  transform: translate(0, -150%);
}

.botonera.active{
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.botonera,
.botonera.active{
  -webkit-transition-duration: .3s;
  -o-transition-duration: .3s;
  transition-duration: .3s;
}

.botonera .bx{
  height: 100%;
  padding: 1em 1.2em;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.botonera a{
  float: left;
  display: block;
  width: 50%;
  padding: 1em 0;
  text-align: center;
}

.botonera a+a{
  border-top: 0;
  border-left: 1px solid rgba(255,255,255,.1);
}

.botonera a img{
  display: inline-block;
}

.botonera p {
    width: 100%;
    margin: 0 !important;
    padding: 0;
}

.botonera {
  background-color: #eef1f9;
}

#col50 {
  width: 100%;
  background: #3f51b5;
  color: #80cf13;

}

#col50:hover {
  background: #5e5e5f;
}