/*CONTENIDO WEB*/
section {
	position:relative;
	float:left;
	width:100%;
	padding:0;
	margin:3% 0;
	z-index:98;
}
.carrusel{
	width:800px;
	margin-left: calc((100% - 800px) /2);
	margin-right: calc((100% - 800px) /2);
	height:340px;
	position:relative;
	float:left;
}
.carrusel li {
	width:100%;
	height:340px;
	list-style:none;
	position:absolute;
	top:0;
}
/*.carrusel li a img{
	width:100%;
}*/
.carrusel li img{
	width:100%;
}
.promo1{
	z-index:95;
	-webkit-animation:promo1 60s infinite;
   animation: promo1 60s infinite;
}
.promo2{
	z-index:96;
	-webkit-animation:promo2 60s infinite;
    animation: promo2 60s infinite;
}
.promo3{
	z-index:97;
	-webkit-animation:promo3 60s infinite;
   animation: promo3 60s infinite;
}
.promo4{
	z-index:98;
	-webkit-animation:promo4 60s infinite;
   animation: promo4 60s infinite;
}
/*ANIMACION*/
@keyframes promo1 {
	0% {display:none;opacity:0;}
	5% {display:block;opacity:1;}
	20% {display:block;opacity:1;}
	25% {display:none;opacity:0;}
/*	75% {display:none;opacity:0;} */
	100% {display:none;opacity:0;}
}
@keyframes promo2 {
	0% {display:none;opacity:0;}
	20% {display:none;opacity:0;}
	25% {display:block;opacity:1;}
	45% {display:block;opacity:1;}
	50% {display:none;opacity:0;}
	100% {display:none;opacity:0;}
}
@keyframes promo3 {
	0% {display:none;opacity:0;}
	45% {display:none;opacity:0;}
	50% {display:block;opacity:1;}
	70% {display:block;opacity:1;} 
	75% {display:none;opacity:0;} 
	100% {display:none;opacity:0;}
}
@keyframes promo4 {
	0% {display:none;opacity:0;}
	70% {display:none;opacity:0;}
	75% {display:block;opacity:1;} 
	95% {display:block;opacity:1;} 
	100% {display:none;opacity:0;}
}

/*TODOS_LIBROS*/
.lista_libros{
	width:1000px;
	margin-left: calc((100% - 1000px) /2);
	margin-right: calc((100% - 1000px) /2);
	margin-top:50px;
	position:relative;
	float:left;
	text-align:center;
	text-decoration:none;
	font-size:18px;
	font-weight: bold;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
.lista_libros p{
	text-decoration:none;
	color:#FFF;
	width:240px;
	height:20px;
	margin-left:calc((100% - 282px) / 2);
	background-color:#000;
	border-radius: 20px;
	box-shadow: #CCC 1px 1px 0;
	padding:20px;
	text-align:center;
}
.lista_libros p:hover{
	color:#CCC;
	box-shadow: #CCC 3px 3px 0;
	cursor:pointer;
}
#contenedor_ico_libros{
   display: none;
}
#trickMenulibros{
   position:relative;
   float:left;
   margin-top:40px;
   margin-left:0;
   width:100%;
   height:350px;
   display: none;
}
#trickMenulibros li{
	width:240px;
	height:330px;
	padding:0 5px 0 5px;
	list-style:none;
	position:relative;
	float:left;
}
#trickMenulibros li a
{	
	display: block;
	width:250px;
	height:330px;
	margin:0 0 0 0;
}
#trickMenulibros li b{
	position:absolute;
	top:140px;
	left:0;
	transform:rotate(-45deg);
	color:white;
	font-size:24px;
}
#trickMenulibros li a img{
	height:300px;
	width:auto;
	margin:5px;
	display: block;
	position:relative;
	float:left;
}
#trickMenulibros li a img:hover{
	width:auto;
	height:305px;
	margin:0;
	box-shadow: #000 5px 5px 2px;
}
#contenedor_ico_libros:checked + #trickMenulibros{
  display: block; 
}
.proyectos {
	position:relative;
	float:left;
	width:100%;
	height:200px;
	margin:0 0 130px 0;
	padding:0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(rgba(194,161,178, 0.5), rgba(194,161,178, 0.5)), url('../img/libreria.jpg');
	background-repeat:no-repeat;
	background-position: center;
	background-size:cover;
}
.proyectos h1{
	width:50%px;
	font-size:1.6em;
	letter-spacing: 2px;
	font-weight: bold;
	color: rgba(0,0,0,1);
	text-shadow: #FFF 1px 1px 0;
	text-align:center;
}
.proyectos h1 span{
	font-size:1.8em;
	letter-spacing: 3px;
}
.estado_ok, .estado_wip{
	position:relative;
	float:left;
	padding:5px;
	margin:10px;
	font-size:18px;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
.estado_ok{
	border:#97334D solid 1px;
	color:#97334D;
}
.estado_wip{
	border:#0066CC solid 1px;
	color:#0066CC;
}
#panda,#osos,#raton, #seote {
   position: relative;
   width:815px;
   height:570px;
   float: left;
   margin-top:40px;
   margin-left: calc((100% - 835px) / 2);
   margin-right: calc((100% - 835px) / 2);
   box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
   z-index:98;
   padding:20px;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
	-webkit-hyphens: auto;
  	-ms-hyphens: auto;
  	hyphens: auto;
	text-align:justify;
	font-size:16px;
	line-height:150%;
	background-repeat:no-repeat;
	background-size:100%;
}
#panda{
	background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)), url(../img/panda1.jpg);
	color:#000;
	transform: rotate(2deg);

}
#osos{
	background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)),url(../img/osos2.jpg);
	color:#000;
	transform: rotate(-2deg);
}
#raton{
	background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)),url(../img/raton1.jpg);
	color:#000;
	transform: rotate(2deg);
}
#seote{
	background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)),url(../img/seote1.jpg);
	color:#000;
	transform: rotate(-2deg);
}
#panda img,#osos img,#raton img, #seote img{
    width: 200px;
	height: 200px;
	position:relative;
	float:right;
	border:#000 solid 1px;
}
#panda:hover,#osos:hover,#raton:hover, #seote:hover {
		transform: rotate(0);
}
#panda h3,#osos h3,#raton h3, #seote h3{
	text-align:center;
	padding:5px;
	margin:10px;
	font-size:24px;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
#panda a, #raton a,#seote a{
	text-decoration:none;
	color:#000;
}
#osos a{
	text-decoration:none;
	color:#000;
}
#panda a:hover,#osos a:hover,#raton a:hover, #seote a:hover{
	text-decoration:underline;
}
.interes{
	position:relative;
	float:left;
	width:800px;
	margin-top:4%;
	margin-left:calc((100% - 800px)/2);
	margin-bottom:80px;
	margin-right:calc((100% - 800px)/2);
}
.interes img{
	width:38%;
	margin:1%;
	float:left;
}
.interes p{
	width:58%;
	margin:1%;
	float:left;
	font-size:16px;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
	color:#414141;
}
.interes p span{
	color:#C2A1B2;
	margin-right:5px;
	-webkit-hyphens: auto;
  	-ms-hyphens: auto;
  	hyphens: auto;
}
.interes p a{
	color:#414141;
	text-decoration:none;
}
.interes p a:hover{
	text-decoration:underline;
}

@media screen and (max-width:1010px ) {
	section {
		width:96%;
		margin-left:2%;
		margin-right:2%;
	}
	section ul{
		width:96%;
		margin-left: 2%;
		margin-right: 2%);
		height:auto;
	}

	section ul li {
		width:100%;
		height:auto;
	}
	section ul li a{
		width:100%;
		height:auto;
	}
	.lista_libros{
		width:100%;
		margin-left: 0;
		margin-right: 0;
	}
	#trickMenulibros{
	   	height:100%;
	}
	#trickMenulibros li{
		width:calc((80% - 20px)/2);
		margin: 5%;
		height:auto;
	}
	#trickMenulibros li a{	
		width:100%;
		margin:0 0 0 0;
	}
	#trickMenulibros li a img{
		height:auto;
		width:95%;
		margin: 3% 2.5%;
	}
	#trickMenulibros li b{
		top:0;
		width:100%;
		text-align:center;
		margin-top:100%;
		left:0;
		transform:rotate(0);
		font-size:1.6em;
	}
	#trickMenulibros li a img:hover{
		width:99%;
		height:auto;
		margin:0 0.5%;
	}
	#panda,#osos,#raton, #seote {
	   width:600px;
	   height:420px;
	   margin-left: calc((100% - 600px) / 2);
	   margin-right: calc((100% - 600px) / 2);
	}
}
@media screen and (max-width:800px ) {
	section {
		margin-top:50px;
	}
	.carrusel{
		width:100%;
		margin-left: 0;
		margin-right: 0;
	}
	.carrusel li {
	width:100%;
	height:140px;
	list-style:none;
	position:absolute;
	top:0;
}
	#trickMenulibros li b{
		font-size:1.2em;
	}
	.estado_ok, .estado_wip
	{
		margin:0 0 3px 0;
	}	

	.interes
	{
		width:90%;
		margin:4% 5% 2% 5%;
		margin-bottom:100px;
	}
	.interes p
	{
		font-size:15px;
	}
}
@media screen and (max-width:700px ) {
	.carrusel{
			height:270px;
	}
	#trickMenulibros li b{
		font-size:1.1em;
	}
	#panda,#osos,#raton, #seote {
	   width:470px;
	   height:330px;
	   margin-left: calc((100% - 470px) / 2);
	   margin-right: calc((100% - 470px) / 2);
	   font-size:14px;
	   padding:10px;
	}
	#panda img,#osos img,#raton img, #seote img{
		display:none;
	}
	#panda h3,#osos h3,#raton h3,#seote h3
	{
		padding:0;
		margin:0;
		font-size:18px;
	}
}

@media screen and (max-width:520px ) {
	.carrusel{
			height:230px;
	}
	#trickMenulibros li{
		width:calc(80% - 20px);
		margin: 5px 10%;
		height:auto;
	}
	#trickMenulibros li b{
		font-size:1.1em;
	}
	#panda,#osos,#raton,#seote {
	   width:calc(100% - 35px);
	   height:auto;
	   margin-left: 10px;
	   margin-right: 10px;
	   font-size:14px;
	   padding:10px;
	   transform: rotate(0);
	   background:none;
	   color:#000;
	}
	#panda img,#osos img,#raton img,#seote img{
		display:block;
		clear:both;
		width:200px;
		height:200px;
		position:relative;
		float:right;
		margin-right:calc((100% - 222px) / 2);
		margin-left:calc((100% - 222px) / 2);
		margin-top:10px;
		margin-bottom:10px;
	}
	.estado_ok, .estado_wip,#panda p,#osos p,#raton p, #seote p
	{
		clear:both;
	}
	#panda h3,#osos h3,#raton h3, #seote h3{
		display:none;
	}
	
	.interes img
	{
		width:98%;
		margin:1%;
		float:left;
	}
	.interes p
	{
		width:98%;
		margin:1%;
	}
}