@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/SairaSemiCondensed-Medium.woff2') format('woff2'),
         url('../fonts/SairaSemiCondensed-Medium.woff') format('woff');
}

@font-face {
    font-family: 'CustomFont_Bold';
    src: url('../fonts/SairaSemiCondensed-Bold.woff2') format('woff2'),
         url('../fonts/SairaSemiCondensed-Bold.woff') format('woff');
}

html, body {
	font-family: 'CustomFont'!important;
}

body {
	margin: 0;
	padding: 0;
}

* {
	color: #888;
	/**font-family: "roboto", Helvetica, sans-serif;*/
}



.header {
  position: fixed;
  width: 100%;
  height: 200px;
}
.header svg {
  position: absolute;
  right: 75px;
  transition: width 2s;
}


/* home */

.contenedor{
	width: 90%;
	max-width: 1000px;
	margin: auto; /* centra todo el contenido del contenedor*/
	/*overflow: hidden;*/
}

.contenedor-seccion{
	display: flex; 
	flex-wrap: wrap;
	margin-top: -80px;
	justify-content: space-around;

}

.contenedor-seccion-2{
	display: flex; 
	flex-wrap: wrap;
	margin-top: -100px;
	justify-content: space-around;

}

/**************************** menu ******************************/

.bar {
	display: block;
	width: 40px;
	height: 5px;
	margin: 5px auto;
	background-color: #fff;
	border-radius: 2px;
	transition: all 0.4s linear 0.1s;
	-webkit-transition: all 0.4s linear 0.1s;
	-moz-transition: all 0.4s linear 0.1s;
	-o-transition: all 0.4s linear 0.1s;
	-ms-transition: all 0.4s linear 0.1s;
}

.bar:first-child { margin-top: 28px; }

.wrap {
	position: absolute;
	top: 10%;
	right: 0px;
	margin: auto;
	width: 150px;
	height: 100px;
	filter: url("#filt");
	-webkit-filter: url("#filt");
	z-index: 1;
}

.wrap .blob {
	display: block;
	cursor: pointer;
	border: none;
	outline: none;
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	z-index: 10;
	background-color: rgb(114,55,135);
	/*box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;
	-o-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;
	-ms-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;*/
}

.wrap .blob[for="checking"] {
	z-index: 30;
	font-size: 60px;
	text-align: center;
	color: #fff;
	transition: transform 0.5s ease-in-out 0.2s;
	-webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;
	-moz-transition: transform 0.5s ease-in-out 0.2s;
	-o-transition: transform 0.5s ease-in-out 0.2s;
	-ms-transition: transform 0.5s ease-in-out 0.2s;
}

.wrap .blob:not([for="checking"]) {
	width: 50px;
	height: 50px;
	top: 15px;
	left: 15px;
	font-size: 30px;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
}

.wrap .blob:not([for="checking"]):hover {
	color: #F44336!important;
	background-color: rgb(200,200,200);
	animation: harlem 0.5s linear forwards;
	-webkit-animation: harlem 0.5s linear forwards;
	-moz-animation: harlem 0.5s linear forwards;
	-o-animation: harlem 0.5s linear forwards;
	-ms-animation: harlem 0.5s linear forwards;
}

.wrap > #checking:checked ~ .blob:nth-child(2) i.fa,
.wrap > #checking:checked ~ .blob:nth-child(3) span,
.wrap > #checking:checked ~ .blob:nth-child(4) span,
.wrap > #checking:checked ~ .blob:nth-child(5) span,
.wrap > #checking:checked ~ .blob:nth-child(6) span,
.wrap > #checking:checked ~ .blob:nth-child(7) span,
.wrap > #checking:checked ~ .blob:nth-child(8) span,
.wrap > #checking:checked ~ .blob:nth-child(9) span,
.wrap > #checking:checked ~ .blob:nth-child(10) span {
	color: #fff;
}

.wrap .blob:not([for="checking"]):hover i.fa {
	color: #F44336!important;
}

.wrap > #checking:checked ~ .blob:nth-child(2) {
	margin-left: -112px;
    margin-top: 7px;
	color: #fff;
}

.wrap > #checking:checked ~ .blob:nth-child(3) {
	margin-top: 148px;
    margin-left: -97px;
	color: #fff;
}

.wrap > #checking:checked ~ .blob:nth-child(4) {
	margin-top: 168px;
    margin-left: -45px;
	color: #fff;
}

.wrap > #checking:checked ~ .blob:nth-child(5) {
	margin-top: 93px;
    margin-left: -48px;
    color: #fff;
}

.wrap > #checking:checked ~ .blob:nth-child(6) {
	margin-top: 60px;
    margin-left: -93px;
	color: #fff;
}

.wrap > #checking:checked ~ .blob:nth-child(7) {
	margin-top: 61px;
    margin-left: -168px;
	color: #fff;
}

.wrap > #checking:checked ~ .blob:nth-child(8) {
	margin-top: 110px;
    margin-left: -139px;
	color: #fff;
}

.wrap > #checking:checked ~ .blob:nth-child(9) {
	margin-top: 6px;
    margin-left: -180px;
	color: #fff;
}

.wrap > #checking:checked ~ .blob:nth-child(10) {
	margin-top: 176px;
    margin-left: 10px;
	color: #fff;
}

.wrap > #checking:checked ~ .blob:nth-child(11) {
	margin-top: 108px;
    margin-left: 6px;
	color: #fff;
}

/*.wrap > #checking:checked ~ .blob:nth-child(2)
.wrap > #checking:checked ~ .blob:nth-child(2) i.fa*/
.wrap > #checking:checked ~ .blob:nth-child(2):hover,
.wrap > #checking:checked ~ .blob:nth-child(3):hover,
.wrap > #checking:checked ~ .blob:nth-child(4):hover,
.wrap > #checking:checked ~ .blob:nth-child(5):hover,
.wrap > #checking:checked ~ .blob:nth-child(6):hover,
.wrap > #checking:checked ~ .blob:nth-child(7):hover,
.wrap > #checking:checked ~ .blob:nth-child(8):hover,
.wrap > #checking:checked ~ .blob:nth-child(9):hover,
.wrap > #checking:checked ~ .blob:nth-child(10):hover,
.wrap > #checking:checked ~ .blob:nth-child(11):hover {
	z-index: 1000000!important;
}

.wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1) {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	margin-top: 37px;
}

.interiores.cuentos .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1),
.interiores.personajes .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1),
.interiores.fabulas .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1),
.interiores.poemas .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1),
.interiores.mitos .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1),
.interiores.literatura .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1),
.interiores.estrategias-content .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1) {
	margin-top: 25px;
    margin-left: 28px;
}

.wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2) {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	margin-top: -10px;
}

.interiores.cuentos .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2),
.interiores.personajes .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2),
.interiores.fabulas .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2),
.interiores.poemas .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2),
.interiores.mitos .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2),
.interiores.literatura .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2),
.interiores.estrategias-content .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2) {
	margin-top: 22px;
    margin-left: 25px;
}

.wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(3) { opacity: 0; }

@keyframes harlem {	
	0% {
		transform: translate(0);
		-webkit-transform: translate(0);
		-moz-transform: translate(0);
		-o-transform: translate(0);
		-ms-transform: translate(0);
	}
 	25% {
		transform: translate(5px, 5px);
		-webkit-transform: translate(5px, 5px);
		-moz-transform: translate(5px, 5px);
		-o-transform: translate(5px, 5px);
		-ms-transform: translate(5px, 5px);
	}
 	50% {
		transform: translate(-5px, -5px);
		-webkit-transform: translate(-5px, -5px);
		-moz-transform: translate(-5px, -5px);
		-o-transform: translate(-5px, -5px);
		-ms-transform: translate(-5px, -5px);
	}
 	75% {
		transform: translate(2px, 2px);
		-webkit-transform: translate(2px, 2px);
		-moz-transform: translate(2px, 2px);
		-o-transform: translate(2px, 2px);
		-ms-transform: translate(2px, 2px);
	}
 	100% {
		transform: translate(0);
		-webkit-transform: translate(0);
		-moz-transform: translate(0);
		-o-transform: translate(0);
		-ms-transform: translate(0);
	}
}

@-webkit-keyframes harlem {  
	0% {
		transform: translate(0);
		-webkit-transform: translate(0);
		-moz-transform: translate(0);
		-o-transform: translate(0);
		-ms-transform: translate(0);
	}
 	25% {
		transform: translate(5px, 5px);
		-webkit-transform: translate(5px, 5px);
		-moz-transform: translate(5px, 5px);
		-o-transform: translate(5px, 5px);
		-ms-transform: translate(5px, 5px);
	}
 	50% {
		transform: translate(-5px, -5px);
		-webkit-transform: translate(-5px, -5px);
		-moz-transform: translate(-5px, -5px);
		-o-transform: translate(-5px, -5px);
		-ms-transform: translate(-5px, -5px);
	}
 	75% {
		transform: translate(2px, 2px);
		-webkit-transform: translate(2px, 2px);
		-moz-transform: translate(2px, 2px);
		-o-transform: translate(2px, 2px);
		-ms-transform: translate(2px, 2px);
	}
 	100% {
		transform: translate(0);
		-webkit-transform: translate(0);
		-moz-transform: translate(0);
		-o-transform: translate(0);
		-ms-transform: translate(0);
	}
}

.hint--left.hint--bounce {
	padding-top: 7px;
}

.uk-search-input {
    box-sizing: border-box;
    margin: 0;
    border-radius: 0;
    font: inherit;
    overflow: visible;
    -webkit-appearance: none;
    vertical-align: middle;
    /**width: 85%;*/
    border: none;
    color: #666;
    height: 40px;
    background: rgba(255,255,255,0.7);
    font-size: 25px;
    padding-left: 20px;
}

form.uk-search .fa-search {
	font-size: 20px;
    position: relative;
    top: 2px;
}

form.uk-search {
    margin-bottom: 2%;
}

/***********************************************************************************/
/***********************************************************************************/

.navbar {
	background-color: rgb(114,55,135);
	border-radius: 0px;
	box-shadow: 0px 0px 10px #777;
	z-index: 1;
}

.navbar-nav>li {
    margin-inline-end: 1.4em;
}

.navbar-nav>li>a {
	padding-top: 0px;
	padding-bottom: 0px;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #fff;
    line-height: 26px;
}

.navbar-nav>li>a i.fa,
.navbar-nav>li>a span {
	color: #fff;
}

.navbar-nav>li>a:hover i.fa,
.navbar-nav>li>a:hover span {
	color: rgb(114,55,135);
}

.navbar-right {
	margin-right: 3%;
}

.navbar-left .logo_home {
	margin-top: 10px;
	margin-bottom: 0;
    margin-left: 5vw;
}

.navbar-left .logo_home:hover {
	background-color: transparent;
}

header .redes {
	border: 1px solid #fff;
	border-radius: 50%;
}

.nav>li>a.redes {
	padding: 1px 10px;
}

.nav>li>a.redes.twitter {
	padding: 1px 8px;
}

header .accesos {
	border: 1px solid #fff;
}

.container.cuerpo {
	background-color: #d8ccdb;
	position: absolute;
    top: 62px;
    width: 100%;
    height: 94vh;
}

.container.cuerpo.otros {
	background-color: #fff;
}

.interiores .container.cuerpo {
	height: auto;
	min-height: 95%;
}

.container.cuerpo.home {
	background-image: url(../img/home/fondo.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.container.cuerpo.diccionario {
	background-image: url(../img/home/fondo_diccionario.png);
    /*background-repeat: no-repeat;*/
    background-size: auto;
}

.container.cuerpo img.img-responsive {
	display: initial;
	cursor: pointer;
}

.container.cuerpo.home img.img-responsive {
	max-width: 90%;
}

@keyframes pulse_animation_2 {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.home .container.cuerpo img.libro:hover {
	animation-name: pulse_animation_2;
	animation-duration: 1700ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	cursor: pointer;
}

.contenedor_acomodo {
	height: 43vh;
}

hr.filtrado {
    border-top: 4px solid #c38fd6;
    width: 95%;
}

ul#filter {
	font-size: 18px;
    justify-content: center;
    width: 95%;
}

.uk-subnav-pill > li > a {
    background: #fafafa;
    color: #444;
    border-radius: 4px;
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

.uk-subnav-pill > .uk-active > * {
    background: #62267a;
    color: #fff;
    box-shadow: inset 0 0 5px rgba(0,0,0,.05);
    border-radius: 4px;
    padding: 3px 9px;
}

.uk-subnav-pill>.uk-active>* {
    background: #62267a;
    color: #fff;
    box-shadow: inset 0 0 5px rgba(0,0,0,.05);
}

.uk-subnav-pill>*>:focus, .uk-subnav-pill>*>:hover {
    background: #62267a;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

.uk-subnav-pill>*>:focus {
    background: #62267a;
    color: #fff;
}

.ih-item {
	position: relative;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.ih-item,
.ih-item * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.ih-item a {
	color: #333;
}

.ih-item a:hover {
	text-decoration: none;
}

.ih-item img {
	width: 100%;
	height: 100%;
}

.ih-item.circle {
	position: relative;
	width: 220px;
	height: 220px;
	border-radius: 50%;
}

.ih-item.circle .img {
	position: relative;
	width: 220px;
	height: 220px;
	border-radius: 50%;
}

.ih-item.circle .img:before {
	position: absolute;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.ih-item.circle .img img {
	border-radius: 50%;
}

.ih-item.circle .info {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	border-radius: 50%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ih-item.square {
	position: relative;
	width: 316px;
	height: 216px;
	border: 8px solid #fff;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.ih-item.square .info {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ih-item.square.effect_hover {
	position: relative;
	/**width: 316px;
	height: 216px;*/
	width: auto;
	height: auto;
	border: 0px solid #fff;/*antes 8*/
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.ih-item.square.effect_hover {
	overflow: hidden;
	position: relative;
}

.ih-item.square.effect_hover.colored .info {
	background: rgba(12, 34, 52, 0.6);
}

.ih-item.square.effect_hover.colored .mask {
	background: #1a4a72;
	background: rgba(26, 74, 114, 0.6);
}

.ih-item.square.effect_hover .img {
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.ih-item.square.effect_hover .mask {
	position: absolute;
	background: #333333;
	background: rgba(174,  86,  206, 0.6);
	height: 120%;
	width: 100%;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.personajes .ih-item.square.effect_hover .mask {
	background: rgba(175, 44, 104, 0.6);
}

.fabulas .ih-item.square.effect_hover .mask {
	background: rgba(255, 93, 93, 0.6);
}

.poemas .ih-item.square.effect_hover .mask {
	background: rgba(58, 158, 162, 0.6);
}

.mitos .ih-item.square.effect_hover .mask {
	background: rgba(54, 148, 191, 0.6);
}

.literatura .ih-item.square.effect_hover .mask {
	background: rgba(226, 93, 44, 0.6);
}

.estrategias-content .ih-item.square.effect_hover .mask {
	background: rgba(47, 84, 75, 0.6);
}

.ih-item.square.effect_hover .mask {
	left: auto;
	right: 0;
	top: 0;
	-webkit-transform: rotate(0deg) translateX(-100%);
	-moz-transform: rotate(0deg) translateX(-100%);
	-ms-transform: rotate(0deg) translateX(-100%);
	-o-transform: rotate(0deg) translateX(-100%);
	transform: rotate(0deg) translateX(-100%);
	-webkit-transform-origin: 100% 0%;
	-moz-transform-origin: 100% 0%;
	-ms-transform-origin: 100% 0%;
	-o-transform-origin: 100% 0%;
	transform-origin: 100% 0%;
}

.ih-item.square.effect_hover .info {
	background: #111111;
	height: 0;
	visibility: hidden;
	width: 361px;
	-webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
	-moz-transform: rotate(-33.5deg) translate(-112px, 166px);
	-ms-transform: rotate(-33.5deg) translate(-112px, 166px);
	-o-transform: rotate(-33.5deg) translate(-112px, 166px);
	transform: rotate(-33.5deg) translate(-112px, 166px);
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transition: all 0.35s ease-in-out 0.35s;
	-moz-transition: all 0.35s ease-in-out 0.35s;
	transition: all 0.35s ease-in-out 0.35s;
}

.ih-item.square.effect_hover .info h3 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	font-size: 17px;
	padding: 10px;
	background: transparent;
	margin-top: 5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	opacity: 0;
	-webkit-transition: all 0.35s ease-in-out 0.35s;
	-moz-transition: all 0.35s ease-in-out 0.35s;
	transition: all 0.35s ease-in-out 0.35s;
}

.ih-item.square.effect_hover .info p {
	font-style: italic;
	font-size: 12px;
	position: relative;
	color: #bbb;
	padding: 0px 15px 0px;
	text-align: center;
	opacity: 0;
	-webkit-transition: all 0.35s ease-in-out 0.35s;
	-moz-transition: all 0.35s ease-in-out 0.35s;
	transition: all 0.35s ease-in-out 0.35s;
}

.ih-item.square.effect_hover a:hover .mask {
	-webkit-transform: rotate(0deg) translateX(0%);
	-moz-transform: rotate(0deg) translateX(0%);
	-ms-transform: rotate(0deg) translateX(0%);
	-o-transform: rotate(0deg) translateX(0%);
	transform: rotate(0deg) translateX(0%);
	z-index: 1;
}

.ih-item.square.effect_hover a:hover .info {
	width: 80%;
	/**height: 120px;*/
	height: fit-content;
	height: -moz-fit-content;
	max-height: 180px;
	visibility: visible;
	top: 40px;
	-webkit-transform: rotate(0deg) translate(0, 0);
	-moz-transform: rotate(0deg) translate(0, 0);
	-ms-transform: rotate(0deg) translate(0, 0);
	-o-transform: rotate(0deg) translate(0, 0);
	transform: rotate(0deg) translate(0, 0);
	z-index: 2;
}

.ih-item.square.effect_hover a:hover .info h3,
.ih-item.square.effect_hover a:hover .info p {
	opacity: 1;
}

.fabulas #flipbook .page div.fabula_texto,
.mitos #flipbook .page div.fabula_texto,
.literatura #flipbook .page div.autor_texto {
	text-align: center;
	font-size: 1em;
}

.cuentos #flipbook .page div.cuento_texto,
.estrategias-content #flipbook .page div.cuento_texto,
.literatura #flipbook .page div.autor_texto  {
	text-align: justify;
	font-size: 1em;
}

.fabulas #flipbook .page div.fabula_texto p,
.mitos #flipbook .page div.fabula_texto p,
.cuentos #flipbook .page div.cuento_texto p,
.personajes #flipbook .page div.cuento_texto p,
.poemas #flipbook .page div.cuento_texto p,
.estrategias-content #flipbook .page div.cuento_texto p,
.literatura #flipbook .page div.autor_texto p {
	margin: 0;
	padding: 0;
}

.cuentos #flipbook .page,
.fabulas #flipbook .page,
.mitos #flipbook .page,
.personajes #flipbook .page,
.poemas #flipbook .page,
.estrategias-content #flipbook .page,
.literatura #flipbook .page {
	display: table;
}

.cuentos #flipbook .page div.content_page,
.fabulas #flipbook .page div.content_page,
.mitos #flipbook .page div.content_page,
.personajes #flipbook .page div.content_page,
.poemas #flipbook .page div.content_page,
.literatura #flipbook .page div.content_page,
.estrategias-content #flipbook .page div.content_page {
	display: table-cell;
	vertical-align: middle;
	padding: 1.5vw;
}

.cuentos #flipbook .page div.content_page h1,
.fabulas #flipbook .page div.content_page h1,
.mitos #flipbook .page div.content_page h1,
.personajes #flipbook .page div.content_page h1,
.poemas #flipbook .page div.content_page h1,
.estrategias-content #flipbook .page div.content_page h1,
.literatura #flipbook .page div.content_page h1 {
	color: #723887;
	-webkit-text-fill-color: #723887;
	font-weight: bolder;
	font-family: "CustomFont_Bold";
}

.cuentos #flipbook .page div.content_page .separador img,
.fabulas #flipbook .page div.content_page .separador img,
.mitos #flipbook .page div.content_page .separador img,
.personajes #flipbook .page div.content_page .separador img,
.poemas #flipbook .page div.content_page .separador img,
.estrategias-content #flipbook .page div.content_page .separador img,
.literatura #flipbook .page div.content_page .separador img  {
	width: 60%;
	margin-left: 20%;
    margin-top: 4%;
    margin-bottom: 4%;
}

.cuentos #flipbook .page div.content_page .info_adicional b,
.fabulas #flipbook .page div.content_page .info_adicional b,
.mitos #flipbook .page div.content_page .info_adicional b,
.personajes #flipbook .page div.content_page .info_adicional b,
.poemas #flipbook .page div.content_page .info_adicional b,
.estrategias-content #flipbook .page div.content_page .info_adicional b,
.literatura #flipbook .page div.content_page .info_adicional b {
	color: #723887;
}

.cuentos #flipbook .page.page-even {
	background-image: url(../libros/cuentos/fondo_cuentos1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset -7px 0 9px -9px rgba(0,0,0,0.4);
}

.cuentos #flipbook .page.page-odd {
	background-image: url(../libros/cuentos/fondo_cuentos2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset 7px 0 9px -9px rgba(0,0,0,0.4);
}

.fabulas #flipbook .page.page-even {
	background-image: url(../libros/fabulas/fondo_fabulas1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset -7px 0 9px -9px rgba(0,0,0,0.4);
}

.fabulas #flipbook .page.page-odd {
	background-image: url(../libros/fabulas/fondo_fabulas2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset 7px 0 9px -9px rgba(0,0,0,0.4);
}

.personajes #flipbook .page.page-even {
	background-image: url(../libros/personajes/fondo_personajes1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset -7px 0 9px -9px rgba(0,0,0,0.4);
}

.personajes #flipbook .page.page-odd {
	background-image: url(../libros/personajes/fondo_personajes2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset 7px 0 9px -9px rgba(0,0,0,0.4);
}

.poemas #flipbook .page.page-even {
	background-image: url(../libros/poesia/fondo_poemas1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset -7px 0 9px -9px rgba(0,0,0,0.4);
}

.poemas #flipbook .page.page-odd {
	background-image: url(../libros/poesia/fondo_poemas2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset 7px 0 9px -9px rgba(0,0,0,0.4);
}

.mitos #flipbook .page.page-even {
	background-image: url(../libros/mitos/fondo_mitos1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset -7px 0 9px -9px rgba(0,0,0,0.4);
}

.mitos #flipbook .page.page-odd {
	background-image: url(../libros/mitos/fondo_mitos2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset 7px 0 9px -9px rgba(0,0,0,0.4);
}

.literatura #flipbook .page.page-even {
	background-image: url(../libros/autores/fondo_literatura1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset -7px 0 9px -9px rgba(0,0,0,0.4);
}

.literatura #flipbook .page.page-odd {
	background-image: url(../libros/autores/fondo_literatura2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset 7px 0 9px -9px rgba(0,0,0,0.4);
}

.estrategias-content #flipbook .page.page-even {
	background-image: url(../libros/autores/fondo_literatura1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset -7px 0 9px -9px rgba(0,0,0,0.4);
}

.estrategias-content #flipbook .page.page-odd {
	background-image: url(../libros/autores/fondo_literatura2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset 7px 0 9px -9px rgba(0,0,0,0.4);
}

.literatura .img_autor {
	padding: 10%;
	width: 95%;
    margin-left: 2.5%;
}

.literatura .subtitulo {
	font-size: 22px;
}

.literatura .subtitulo.titulo_fragmento{
	text-align: right;
}

/*.cuentos #flipbook .page.page-even,
.fabulas #flipbook .page.page-even,
.mitos #flipbook .page.page-even,
.personajes #flipbook .page.page-even,
.poemas #flipbook .page.page-even {
	background-image: url(../libros/fabulas/fondo_fabulas1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset -7px 0 9px -9px rgba(0,0,0,0.4);
}

.cuentos #flipbook .page.page-odd,
.fabulas #flipbook .page.page-odd,
.mitos #flipbook .page.page-odd,
.personajes #flipbook .page.page-odd,
.poemas #flipbook .page.page-odd {
	background-image: url(../libros/fabulas/fondo_fabulas1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: inset 7px 0 9px -9px rgba(0,0,0,0.4);
}*/

/*.personajes #filter li {
    width: 8vw;
}*/

#flipbook .zoomTarget:hover {
    cursor: zoom-in!important;
}

#flipbook .zoomTarget.selectedZoomTarget:hover {
    cursor: zoom-out!important;
}

.logo_responsive {
	display: none;
}

.diccionario .highlighted {
    background-color: yellow;
    color: #888;
    padding: 2px;
}

.diccionario .container ol li {
	list-style: decimal;
}

.diccionario .container {
	padding-top: 2em;
	padding-bottom: 2em;
}

.diccionario .container h6 {
	font-size: 18px;
	color: rgb(114,55,135);
}

.diccionario .container h6 img {
	max-width: 30px;
}

.diccionario .container h6>div,
.diccionario .container h6>span {
	color: #000;
}

.diccionario hr.filtrado {
    border-top: 3px solid #c38fd6;
    width: 100%;
}

.diccionario .search-box {
	position: relative;
	width: 50%;
	/*max-width: 360px;*/
	height: 60px;
	border-radius: 120px;
	margin: 0 auto;
}

.diccionario .search-icon, .go-icon {
	position: absolute;
	top: 0;
	height: 60px;
	width: 86px;
	line-height: 61px;
	text-align: center;
	color: rgb(114,55,135);
}

.diccionario .go-icon .fa {
	color: rgb(114,55,135);
}

.diccionario .search-icon {
	left: 0;
	pointer-events: none;
	font-size: 1.22em;
	will-change: transform;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform-origin: center center;
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-o-transform-origin: center center;
	transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-webkit-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.diccionario .si-rotate {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

.diccionario .go-icon {
	right: 0;
	pointer-events: none;
	font-size: 1.38em;
	will-change: opacity;
	cursor: default;
	opacity: 0;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-webkit-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.diccionario .go-in {
	opacity: 1;
	pointer-events: all;
	cursor: pointer;
	transform: rotate(0);
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-o-transform: rotate(0);
	transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-webkit-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

/*.diccionario .search-border {
	display: block;
	width: 100%;
	max-width: 360px;
	height: 60px;
}

.diccionario .border {
	fill: none;
	stroke: rgb(114,55,135);
	stroke-width: 5;
	stroke-miterlimit: 10;
}

.diccionario .border {
	stroke-dasharray: 740;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
	-webkit-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
	-moz-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
	-o-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
}

.diccionario .border-searching .border {
	stroke-dasharray: 940;
	stroke-dashoffset: 459;
	transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
	-webkit-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
	-moz-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
	-o-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
}*/

.diccionario #palabra {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	background: rgba(255,255,255,0);
	padding: 0 68px 0 68px;
	color: rgb(114,55,135);
	font-size: 1.32em;
	font-weight: 400;
	letter-spacing: -0.015em;
	outline: none;
}

.diccionario #palabra::-webkit-input-placeholder {color: #888;}
.diccionario #palabra::-moz-placeholder {color: #888;}
.diccionario #palabra:-ms-input-placeholder {color: #888;}
.diccionario #palabra:-moz-placeholder {color: #888;}
.diccionario #palabra::-moz-selection {color: #888; background: rgba(0,0,0,0.25);}
.diccionario #palabra::selection {color: #888; background: rgba(0,0,0,0.25);}

.diccionario :focus{
	outline: none;
}

.diccionario .border_effect {
	border-bottom: 1px solid #999!important; 
	padding: 7px 14px 9px; 
	transition: 0.8s;
}

.diccionario .border_effect ~ .focus-border:before,
.diccionario .border_effect ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: rgb(114,55,135); transition: 0.4s; transition-delay: 0.2s;}
.diccionario .border_effect ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
.diccionario .border_effect ~ .focus-border i:before,
.diccionario .border_effect ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: rgb(114,55,135); transition: 0.4s;}
.diccionario .border_effect ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
.diccionario .border_effect:focus ~ .focus-border:before,
.diccionario .border_effect:focus ~ .focus-border:after{width: 100%; transition: 0.4s; transition-delay: 0.6s;}
.diccionario .border_effect:focus ~ .focus-border:after{transition-delay: 0.2s;}
.diccionario .border_effect:focus ~ .focus-border i:before,
.diccionario .border_effect:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}
.diccionario .border_effect:focus ~ .focus-border i:after{transition-delay: 0.4s;}

/*.diccionario form.buscar input.form-control {
	width: 50%;
	display: inline-flex;
}

.diccionario form.buscar input.btn {
	border: 1px #aaa solid;
	box-shadow: 0px 0px 5px #aaa inset;
	padding: 10px 22px;
}*/

.diccionario .container #bodyContainer h5 {
	font-style: italic;
}

.diccionario .container #conresultado p {
	font-size:14px; 
	color:#833190;
}

.diccionario .container #conresultado p em span span.highlighted {
	padding-left: 10px;
	padding-right: 10px;
	background: rgb(114,55,135);
	color: #fff;
}

.diccionario .container #conresultado ol {
	font-size:14px; 
	padding-right: 30px;
}

.diccionario .container #conresultado ol li #resultados{
	background-color:#f2f2f2; 
	padding:7px; 
}

.diccionario .container #conresultado ol li hr {
    border-top: 1px solid #c38fd6;
}

.otros .container h2 {
	font-size: 22px;
	font-weight: 600;
	line-height: 30px;
	color: rgb(114,55,135);
}

.otros .container h6 {
	font-size: 19px;
	line-height: 30px;
}

.otros .container h6.con_margen {
	margin-top: 1vw;
}

.otros .container img.icon_title {
	margin-right: 1.5vw;
	max-width: 30px;
	min-width: 30px;
	cursor: initial;
}

.otros .container img.icon_contact {
	margin-right: 5px;
	max-width: 30px;
	min-width: 30px;
	cursor: initial;
}

.otros .container img.icon_preguntas {
	max-width: 50px;
	display: initial;
	cursor: initial;
}

.otros .container p {
	font-size: 18px;
	padding-left: 1.5vw;
}

.otros .container.contacto p {
	padding-left: 0vw;
}

.otros .container.contacto .col-xs-12 {
	padding-left: 0px;
	padding-right: 0px;
}

.otros .container p b {
	color: rgb(114,55,135);
	text-decoration: underline;
}

.otros .container h6.contacto {
	color: #888;
}

.otros .container .info {
	padding-right: 10px;
}

.otros .container .info h6.contacto {
	line-height: 30px;
}

.otros .container .gerencia h6 {
	margin-bottom: 0px;
	margin-top: 0px;
}

.otros .container .gerencia h6 b {
	color: #555;
}

.otros .container.contacto form input, 
.otros .container.contacto form textarea {
    display: block;
    padding: 15px;
    width: 100%;
    outline: 0;
    border: 0;
}

.otros .container.contacto form input.btn {
	width: 20%;
	font-size: 18px;
	float: right;
	background-color: #c38fd6;
}

.otros .container.contacto form input.btn:hover {
	background-color: rgb(114,55,135);
}

.otros .container.contacto form textarea {
	resize: none;
}

.otros .container.contacto form {
	width: 70%;
	margin-left: 15%;
}

.otros .container.contacto form .form__input {
	font-size: 1.125em;
    margin-bottom: 1.11111em;
    border-bottom: 6px solid #d6d7d9;
    border-radius: 0.4em;
    background: #ebecec;
    color: black;
    font-weight: 300;
}

.otros .container.contacto form .form__input:focus {
    border-color: #c38fd6;
}

.otros .container.contacto .mensaje_aviso {
	position: fixed;
	bottom: 0%;
    left: 40%;
    opacity: 0;
}

.otros .container.contacto .mensaje_aviso.open_mensaje {
	animation-duration: 2s;
	animation-name: fadeInBottom;
	opacity: 1;
}

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(150%);
    }
    to { 
    	opacity: 1;
    	transform: translateY(0%);
    }
}

@keyframes fadeOutBottom {
    from {
    	opacity: 1;
    	transform: translateY(0%);
    }
    to { 
    	opacity: 0;
        transform: translateY(150%);
    }
}

#animatedModal_login {
	width: 50%!important;
	height: 50%!important;
	top: 25%!important;
	left: 25%!important;
	background-color: transparent!important;
}

#animatedModal_login .modal-content {
	display: table;
	padding: 2vw;
}

#animatedModal_login .modal-content h1 {
	display: table-cell;
	vertical-align: middle;
}

#modalLogin .logo_header {
	color: rgb(114,55,135);
	font-size: 3vw;
    padding-bottom: 1vw;
}

#modalLogin #login_status {
	display: none;
}

#modalLogin .btn {
	background-color: rgb(114,55,135);
	border-color: rgb(114,55,135);
	padding-right: 2vw;
	padding-left: 2vw;
}

#modalLogin .close {
	font-size: 2vw;
}

.mensaje_error {
	position: absolute;
	z-index: 100;
    top: 2vw;
    left: 25%;
    width: 50%;
    text-align: center;
}

.mensaje_error strong {
	color: #8a6d3b;
	font-size: 18px;
	font-weight: 600;
}

#seleccion_responsive {
	display: none;
	font-size: 17px;
    height: 40px;
}

@media (max-width: 1400px) {
	.contenedor_acomodo {
		height: 26vh;
	}

	.contenedor-seccion{
		display: flex; 
		flex-wrap: wrap;
		margin-top: -11px;
		justify-content: space-around;

	}

	.contenedor-seccion-2{
		display: flex; 
		flex-wrap: wrap;
		margin-top: -100px;
		justify-content: space-around;

	}
}

@media (max-width: 991px) {

  	.show480{
  		display: block; 
  	}

	.contenedor_acomodo {
		height: 58vh;
	}

	.container.cuerpo.home img.img-responsive {
		margin-bottom: 10%;
	}

	.container.cuerpo.home {
	    background-image: url(../img/home/fondo_responsive.jpg);
	    background-repeat: no-repeat;
	    background-size: cover;
	    height: auto;
	    background-position: bottom;
	}

	.logo_responsive {
		display: initial;
		position: absolute;
	    z-index: 100;
	    width: 40%;
	}

	.otros .container.contacto form {
		width: 90%;
		margin-left: 5%;
	}
}

@media (min-width: 991px) {
	.col-sm-offset-2 {
	    margin-left: 0%;
	}
}


@media (max-width: 768px) {

  	.show480{
  		display: block; 
  	}
	.contenedor-seccion-2{
		margin-top: 0;
	}
	.navbar-right {
		display: inline-flex;
	    float: right!important;
	    margin-right: 3%;
	}

	.navbar-left {
		display: inline-flex;
	}

	.navbar-left .logo_home {
	    margin-top: 2px;
	}

	.container.cuerpo {
	    top: 85px;
	}

	.wrap {
	    top: 15%;
	    right: 0vw;
	    width: 65px;
	    height: 65px;
	}

	main.container {
		padding: 0px;
	}

	.container.cuerpo img.img-responsive {
		display: initial;
		/**margin-bottom: 4vw;*/
	}

	.container.cuerpo.home img.img-responsive {
		width: 100%
	}

	.navbar-nav>li {
	    margin-inline-end: 0.4em;
	}

	.wrap .blob {
	    width: 55px;
	    height: 55px;
	}

	.bar {
    	width: 25px;
    }

    .bar:first-child {
	    margin-top: 17px;
	}

	.wrap .blob:not([for="checking"]) {
	    top: 5px;
	    left: 5px;
	}

	.wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1) {
    	/***margin-top: 28px;*/
    	margin-top: 25px;
    	margin-left: 16px;
    }

    .interiores.cuentos .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1), .interiores.personajes .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1), .interiores.fabulas .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1), .interiores.poemas .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1), .interiores.mitos .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1), .interiores.estrategias-content .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1) {
	    margin-top: 17px;
	    margin-left: 21px;
	}

    .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2) {
	    /**margin-top: 12px;*/
	}

	.interiores.cuentos .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2), .interiores.personajes .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2), .interiores.fabulas .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2), .interiores.poemas .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2), .interiores.mitos .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2), .interiores.estrategias-content .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2) {
	    margin-top: 13px;
	    margin-left: 17px;
	}

	.logo_responsive {
		display: initial;
		position: absolute;
	    z-index: 1;
	    width: 60%;
	}

    /*.contenedor_acomodo {
	    height: 25vh;
	}*/

	.container.cuerpo.home {
	    background-image: url(../img/home/fondo_responsive.jpg);
	    background-repeat: no-repeat;
	    background-size: cover;
	    height: auto;
	    background-position: bottom;
	}

	ul#filter {
	    width: 90%;
	}

	.interiores.fabulas ul#filter,
	.interiores.mitos ul#filter {
	    display: none;
	}

	.uk-search-input {
		padding-left: 0px;
    	margin-top: 10px;
	}

	#seleccion_responsive {
		display: block;
		width: 95%;
	}

	.interiores.fabulas .bookshelf .shelf,
	.interiores.mitos .bookshelf .shelf {
		margin-top: 8%;
	}

	/* para el contenido de cada pagina del libro */
	#flipbook .page-wrapper .clip,
	#flipbook .page-wrapper .clip .inner-page {
		overflow-y: auto!important;
		height: 100%!important;
	}

	#flipbook .page div.cuento_texto {
		margin-top: 5%!important;
	}

	#animatedModal_login {
	    width: 80%!important;
	    height: 50%!important;
	    top: 25%!important;
	    left: 10%!important;
	}

	#animatedModal_login h1 {
		font-size: 1.8rem;
	}

	#modalLogin .logo_header {
		font-size: 11vw;
	}

	.blob img.img-responsive {
		min-width: 30px;
		min-height: 30px;
	}
}

@media (max-width: 480px) {
	.contenedor_acomodo {
	    height: 15vh;
	}
}


@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.blob img.img-responsive {
		min-width: 30px;
		min-height: 30px;
	}

	.touch-device.display-single .ui-arrow-next-page, .touch-device.display-single .ui-arrow-previous-page {
		display: block;
	}

	.touch-device.display-single .ui-arrow-next-page {
		right: 5px;
		top: calc(20% - 30px);
	} 

	.touch-device.display-single .ui-arrow-previous-page {
		left: 5px;
		top: calc(20% - 30px);
	}
}