* {box-sizing: border-box;}

html,body {margin:0; padding:0; width: 100%; }

body {font-family: 'Trebuchet MS',sans-serif; color:#fff;  height:100%; background:url(../img/fondo.jpg) no-repeat; background-attachment:fixed;}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }

a {text-decoration: none;}

img {display:inline-block; border:none;}

.header {max-width:1200px; position: relative; margin:20px auto; width:94%;}
.header .logo_tarjetas {max-width:45%;}
.header .logo_bibliote {float:right; max-width:45%; margin-top:0; width:228px; filter:brightness(2);}

.container {max-width:1200px; width:94%; margin:0 auto;}

	.categorias {width:19.5%; float:left; position:relative; margin:0 1.5% 0 0;  transition:ease 0.5s all; }

		.categorias .cerrar {text-align:right; margin-bottom:10px; display:none;}
		.categorias .cerrar img {width:24px; border-radius:50%; cursor:pointer; filter:brightness(10);}

		.categorias ul {width:100%; margin:0 0 0 0; padding:0 0 5px 0; max-width: 1300px; text-align:left;}
		.categorias ul li {font-size:15px; padding:0; display:block; margin:0;  list-style: none; line-height:1; font-weight:bold; border-bottom:1px solid #eee;}
		.categorias ul li a {color:#fff; display:block; padding:10px 0 10px 0; font-size:12px; text-transform:uppercase; line-height:1; cursor:pointer; font-weight:bold;}
		.categorias ul li:last-child {border:none;}
		.categorias ul li:hover {}
		.categorias ul li:hover a {text-decoration:underline;}
		.categorias ul li.active {}
		.categorias ul li.active a {text-decoration:underline;}

	.grilla {width:79%;  float:left;  position: relative; margin:0;}
		.grilla .title {width:98%; font-weight:bold; padding:0; margin:0 1% 15px 1%; text-align:left; line-height:1;}
		.grilla .menu {display:none;}
		
	
	.idiomas {padding:6px; margin:0; background:rgba(255,255,255,0.9)}
	.idiomas li {display:inline-block; list-style:none; }
	.idiomas li a {margin-right:15px; text-decoration:none; color:#1d7498; font-size:14px; line-height:1.1; text-transform:uppercase;}
	.idiomas li a img {display:inline-block; width:25px; margin-right:5px; margin-bottom:-2px; }
	.idiomas li a:hover {text-decoration:underline;}
	
	.footer {width:79%; display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:40px; font-size:14px; float:right;}
	.footer-nav-left {width:240px; background:rgba(39,53,119,0.7); padding:12px 10px 10px 10px; float:left; margin:20px 2% 0 2%; text-align:right; cursor:pointer;  position:relative;}
	.footer-nav-left:hover {filter:brightness(1.3);}
	.footer-nav-left p {margin:25px 0 0 0;}
	.footer-nav-left p li a{color:white;}
	.footer-nav-left p li {list-style:none;}
	.footer-nav-right {width:240px; background:rgba(39,53,119,0.7); padding:12px 10px 10px 10px; float:left; margin:20px 2% 0 2%; text-align:left; cursor:pointer;  position:relative;}
	.footer-nav-right:hover {filter:brightness(1.3);}
	.footer-nav-right p {margin:25px 0 0 0;}
	.footer-nav-right p li a{color:white;}
	.footer-nav-right p li {list-style:none;}
	
	.footer-nav-left p li a {color:white;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		padding: 32px 10px 0 5px;
		color: white;

	}
	.footer-nav-right p li a{color:white;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		padding: 32px 5px 0 10px;
		color: white;

	}
	
	.arrow-right {
			position:absolute; top:22px; right:10px;
		  width: 0; 
		  height: 0; 
		  border-top: 10px solid transparent;
		  border-bottom: 10px solid transparent;
		  
		  border-left:10px solid white;
		}

	.arrow-left {
			position:absolute; top:22px; left:10px;
		  width: 0; 
		  height: 0; 
		  border-top: 10px solid transparent;
		  border-bottom: 10px solid transparent; 
		  
		  border-right:10px solid white; 
	}

@media screen and (max-width: 525px) {
	
	.header {margin:15px auto 15px auto;}
	.header .logo_tarjetas {max-width:100%; display:block; margin:0 auto 10px auto;}
	.header .logo_bibliote {max-width:100%; display:block; margin:0 auto; width:95px; float:none;}
	
	.categorias {width:228px; max-width:95%; position:absolute; top:0; left:0; float:none; position:fixed; z-index:1; transform:translateX(-231px); background:rgba(39,53,119,0.8); padding:2%;}
	.categorias.shown {box-shadow:10px 10px 20px 10px rgba(0,0,0,0.6); transform:translateX(0px);}
	.categorias .cerrar {display:block;}
	
	.grilla {width:100%; float:none;}
	.grilla .menu {text-align:left; margin:0 0 15px 0; display:block;  position:fixed; top:0px; left:0px; z-index:999; background:#29a5d9; padding:7px; background:rgba(39,53,119,0.8);}
	.grilla .menu img {width:30px; display:block;}
	.grilla .title {text-align:left;}
	
	.idiomas {padding:12px 12px 0 12px;}
	.idiomas li {padding-bottom:12px;}
	
	.footer {width:100%;}
	
}