@font-face {
	font-family: 'Marion Regular';
	src: url('fuentes/marionregular.ttf')  format('truetype');
}

.close-button {
  width: 30px;
  height: 34px;
  position: absolute;
  cursor: pointer;
  opacity: 1;
right: 5px;
background-image:url(img/iconos/aspa.png);
top:2px;

}

audio {
	    overflow: hidden;
    width: 250px;
    margin-top: 2px;
    padding-bottom: 25px;
}
 .botoncolor{
    text-decoration: none;
    /* padding: 10px; */
    font-weight: 200;
    font-size: 20px;
    color: #fff;
    background-color: #63523bb0;
    border-radius: 6px;
    /* border: 2px solid #0016b0; */
  }
.flipbook {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
	margin: 20px auto;
	background: #fff;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 900px;
	height: 736px;
}
.boxContenedor {
padding:10px;
width:500px;
height:300px;
overflow-x:hidden; overflow-y:scroll;
}
.flipbook .slide {
	position: absolute;
	top: 0;
	width: 100%;
	
	padding: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	left: 0;
}

.flipbook .slide .img {
	width: 50%;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	background-size: 200% !important;
	background-repeat: no-repeat !important;
	-webkit-transition-property: -webkit-transform, box-shadow;
	-webkit-transition-timing-function: linear, linear;
	transition-property: transform, box-shadow;
	transition-timing-function: linear, linear;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	height: 688px;
	
}

.slide > img {
	display: none;
}

.flipbook {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flipbook .prev, .flipbook .next {
	z-index: 2;
	box-sizing: border-box;
	cursor: pointer;
	position: absolute;
	float: left;
	margin-top: 316px;
	padding-top: 15px;
	 padding-bottom: 15px;
	 padding-left: 5px;
	 padding-right: 5px;
	 top: 0;
}

.svg:hover path {
	fill: #9e9e9e;
}

.flipbook .prev {
	left: -45px;
}

.flipbook .next {
	right: -45px;
}

.flipbook .prev img, .flipbook .next img {
	width: auto;
	height: 26px;
}

.flipbook .prev #flecha-izquierda {
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.flipbook .current {
	z-index:1;
}

.flipbook .slide .content {
	position: absolute;
	bottom: -75%;
	z-index:2;
	background: rgba(0,0,0,0.3);
	width: 100%;
	left: 0;
	padding: 20px;
	font-size: 2.2em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.flipbook .slide .content a {
	color: #fff;
}

.flipbook .slide .slideup {
	bottom: 0;
	z-index:2;
}

.interfaz {
	position: absolute;
	width: 100%;
	height: 47px;
	bottom: 0;
	
}

.pagination {
	position: relative;
	right: 10px;
	float: right;
	top: 10px;
	margin: 0 !important;
}

.pagination div {
	border-radius: 1px;
	float: left;
	cursor: pointer;
	margin: 0 0 0 2px;
	width: 22px;
	height: 22px;
	border: 1px solid;
}

.pagination .cur {
	background: black;
}

.popover-content img {
	width: 100%;
	height: auto !important;
}

.titulo {
	position: relative;
	top: 10px;
	left: 10px;
}

.titulo img {
	width: 32px;
	height: auto;
	float: left;
}

.titulo h3 {
float: left;
    margin: 0 0 0 70px;
    font-family: 'Marion Regular';
    font-size: 19px;
    padding-top: 5px;
}

.flechas {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -41px;
}

.idioma {
	float: left;
	margin-left: 10px;
}
.idioma a img {
	margin-right: 5px;
}
.idioma a img:hover {
	opacity: 0.6;
}

div.slide div div {
	display: none;
}

div.current div div {
	display: block;
}

.audio-esp {
	position: relative;
	width: 197px;
	height: 32px;
	float: left;
	left: 5px;
	top: 5px;
}

.audio-en {
	position: relative;
	width: 197px;
	height: 32px;
	float: left;
	left: 5px;
	top: 5px;
	display:none;

}

#audio-en {

	
}

#audio-esp {
	width: 197px;
}

.ingles {
	display: none;
}

.boton {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: 99999px;
}

.boton2 {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: 99999px;	
}
.boton3 {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: 99999px;	
}
.comprensionbirrete {
	background: url('img/iconos/biirrete.png') no-repeat;
    background-size: 100% 100%;	
}

.comprensionguia {
	background: url('img/iconos/guia.png') no-repeat;
    background-size: 100% 100%;
}
.comprensionLectora {
	background: url('img/iconos/1.png') no-repeat;
	background-size: 100% 100%;
}

.creatividad {
	background: url('img/iconos/2.png') no-repeat;
	background-size: 100% 100%;
}

.trabajoColaborativo {
	background: url('img/iconos/3.png') no-repeat;
	background-size: 100% 100%;
}

.capacidadCritica {
	background: url('img/iconos/4.png') no-repeat;
	background-size: 100% 100%;
}

.comprensionSonora {
	background: url('img/iconos/5.png') no-repeat;
	background-size: 100% 100%;
}

.actividades {
	background: url('img/iconos/6.png') no-repeat;
	background-size: 100% 100%;
}
.altavoz {
	background: url('img/iconos/7.png') no-repeat;
	background-size: 100% 100%;
}
.altavoz2 {
	background: url('img/iconos/7-b.png') no-repeat;
	background-size: 100% 100%;
}
.capacidadOracion {
	background: url('img/iconos/9.png') no-repeat;
	background-size: 100% 100%;
}
.puzzle2 {
	width: 67%;
}
.encajes.imagen {
	height: 362px;
}
.encaje {
	width: 25%;
	height: 50%;
	outline: 1px solid black;
	float: left;
}
.encaje2 {
	width: 100%%;
	height: auto;
	outline: 1px solid #000;
	float: left;
}
.piezas {
	position: absolute;
}
.pieza2 {
	position: absolute;
	width: 255px;
	height: auto;
}
.pieza {
	position: absolute;
		
}

.pieza.uno {
	top: 191px;
	left: 136px;
}

.pieza.dos {
	left: 351px;
	top: 377px;
}

.pieza.tres {
	left: 400px;
	top: 300px;
}

.pieza.cuatro {
	left: -1px;
	 top: 185px;
}

.pieza.cinco {
	left: 236px;
	top: 19px;
}
.pieza.seis {
	left: 203px;
	top: 543px;
}
.pieza.siete {
	top: 314px;
	left: 180px;
}

.pieza.ocho {
	 left: 221px;
	 top: 106px;
}

.pieza.nueve {
	 top: 142px;
	 left: 421px;
}
.pieza.uno {
	top: 296px;
	left: -42px;
}

.textopop {
font-size:1.2em;
text-align:justify;

}
.popupNotas {
	color: rgba(80,80,80,1);
	width: 550px;
	padding: 20px;
	display: none;
	background: rgba(255,255,255,1);
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	font-family: 'Marion Regular';
 }
.popupNotas > p {
	margin: 0 auto 20px auto;
	font-size: 1.2em;
	text-align: justify;
}

.popupNotas > p:last-child {
	margin-bottom: 0;
}

.popupNotas > p > img {
	width: 100%;
	height: auto !important;
}

.popupNotas > h2 {
	border-bottom: 1px solid rgba(234,234,234,1);
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	text-align: center;
	font-size: 25px;
}
.titulo_boton {
  float:left; 
  padding:5px;  
  background-color:#e6e6e6;
  width:400px;
  font-family:helvetica;
  font-size:16px;
  font-weight:bold;
}
.boton_mostrar {
  float:right;
  font-size:12px;
  line-height:20px;
  color:#DE7217;
}
#contenido{
  float:left;
  clear:both;
  border:2px solid #e6e6e6;
  margin-top:2px;
  padding:5px;
  width:396px;
  overflow:auto;
  font-family:helvetica;
  font-size:14px;
  text-align: justify;
}

.popupNotas2 {
	color: rgba(80,80,80,1);
	width: 550px;
	padding: 20px;
	display: none;
	background: rgba(255,255,255,1);
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	font-family: 'Marion Regular';
	
 }
.popupNotas2 > p {
	margin: 0 auto 20px auto;
	font-size: 1.2em;
	text-align: justify;
}

.popupNotas2 > p:last-child {
	margin-bottom: 0;
}



.popupNotas2 > p > img {
	width: 70%;
	height: auto !important;
}

.popupNotas2 > h2 {
	border-bottom: 1px solid rgba(234,234,234,1);
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	text-align: center;
	font-size: 25px;
}


.carrusel {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	height: 420px;
}

.slider-nav {
	margin: 10px auto;
	width: 90%;
}

.slick-slide {
	margin: 0 20px;
}

.slick-slide img {
	max-width: 100%;
	max-height: 400px;
	margin: 0 auto;
}