/* ----------------->> Istvansch <<<------------------*/

/******************************************************
smaller than 978
*******************************************************/


@media screen and (max-width: 978px) {
	
	body .content {font-size:1.100em; }
	
	.wrapper {width:700px; margin:0 auto;}
	.content {float:none; width:100%; min-height:auto; height:auto!important; height:auto; margin:0 0 20px 0; z-index:10;}
	.noscroll {overflow: hidden;}

	header {padding-top:0; margin-top:65px; z-index:20;}
	header .logo {margin-top:-60px; z-index:40;}
	header .logo img {width:255px; height:auto;}
	.main-buttons {display:none;}
	
	header .button_container {display:block!important; width:120px; height:102px; float:right; margin:-180px 38px 0 0; z-index:100;}
	header .button_container p {background:url(../images/design/back-menu-mobile.png) no-repeat; width:120px; height:102px;  color:#fff; font-family:'disturbance-boldregular', sans-serif; font-size:1.575em; padding:36px 0 0 19px; cursor:pointer; z-index:110;}
	header .language {position:relative; margin:-244px 35px 0 0; float:right; font-family:'disturbance-boldregular', sans-serif; font-size:1.275em;}
	header .language a {color:#000;}
	
	header .overlay {position: fixed; background: #fff; z-index:1100; top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; -webkit-transition: opacity .35s, visibility .35s, height .35s; transition: opacity .35s, visibility .35s, height .35s; overflow: auto;}
	
	header .overlay.open { opacity: .9; visibility: visible; height: 100%;}
	header .overlay.open li {
	-webkit-animation: fadeInRight .5s ease forwards;
			animation: fadeInRight .5s ease forwards;
	-webkit-animation-delay: .35s;
			animation-delay: .35s;
  }
	header .overlay.open li:nth-of-type(2) {
	-webkit-animation-delay: .4s;
			animation-delay: .4s;
  }
	header .overlay.open li:nth-of-type(3) {
	-webkit-animation-delay: .45s;
			animation-delay: .45s;
  }
	header .overlay.open li:nth-of-type(4) {
	-webkit-animation-delay: .50s;
			animation-delay: .50s;
  }
  
	header .overlay nav { position: relative;  font-size: 1.4em; font-weight: 500; text-align: center; z-index:1200;}
	header nav li .select {border-bottom:0; color:#032e3e!important;}
	header nav li a:hover {color:#032e3e;  -webkit-transition: .35s; transition: .35s;}
  
    header #menu {background:url(../images/design/bottom-menu.png) no-repeat top center; width:413px; display:block; margin: 60px auto 0; padding-top:10px; }
	header #menu ul {background:#000; width:350px; display:block; margin:0 auto;}
	header #menu ul a {color:#fff; font-family:'disturbance-boldregular', sans-serif; font-size:1.475em;}
	header nav ul a.active {background:url(../images/design/menu-active-mobile.png) no-repeat center center; padding:0 10px 0 10px; color:#000!important;}
	header nav ul a:hover {background:url(../images/design/menu-active-mobile.png) no-repeat center center; padding:0 10px 0 10px; color:#000!important;}
	  
	header #menu .nav-1 { opacity:1; padding:60px 0 20px;}
    header #menu .nav-2 { opacity:1; padding-bottom:80px; background:#000 url(../images/design/miscelanea-2.png) no-repeat top center; padding-top:35px;}
	header nav {background:url(../images/design/bottom-menu.png) no-repeat bottom center; padding-bottom:19px;} 
	
	.miscelanea-2 { background:url(../images/design/ilustracion-1.png) no-repeat; width:126px; height:92px; display:block; position:absolute; margin:-45px 0 0 32px;}
	.miscelanea-3 { background:url(../images/design/ilustracion-2.png) no-repeat; width:224px; height:147px; display:block; position:relative; margin:-146px 0 0 235px;}

	header #retoggle {background:url(../images/design/close.png) no-repeat; width:74px; height:50px; display:block; position:absolute; cursor:pointer; text-indent:-9999px; margin:-12px 0 0 354px;}
	
	
	/*Home*/
	#home .miscelanea-4 { display:none;}
	#home {text-align:center;}
	
	/*Bios*/
	#bio .txt {width:100%;}
	#bio .txt img {width:100%; height:auto;}
	
	/*Cursos*/
	#cursos .txt {width:100%;}
	.btn-volver {margin:-28px 0 0 0;}
	.btn-volver-2 {margin: 28px 0 0 0px;}
	
	/*Muestras*/
	#muestras .txt {width:100%;}	
	
	/*Teoria*/
	#teoria .txt {width:100%;}
	
	/*Muestras*/
	#muestras .txt {width:100%;}	
	
	/*Teoria*/
	#links .txt {width:100%;}
	
	/*Libros*/
	.modal { width:400px;}
	.modal .image .top {width:100%;}
	.modal .image .bottom {display:none;}
	.modal .image {float:none!important; width:100%;}
	.modal .info {float:none!important;  height:auto;  margin:0 auto;  border:0; width:95%; padding:0 20px 20px 20px;} 
	.modal .info p {width:100%;}
	.modal .side {background:url(../images/design/bottom-menu.png) no-repeat top center; width:100%; height:14px; display:block; margin-top:-3px;}
	.fancybox-close {top:-10px!important; right:-10px!important;}
	.modal .image .center {width:95%; height:auto;}
	
	.m-ilus { width:495px;}
	.m-ilus .image .top {width:100%;}
	.m-ilus .image .bottom {display:none;}
	.m-ilus .image {float:none!important; width:100%;}
	.m-ilus .info {float:none!important;  height:auto;  margin:0 auto;  border:0; width:95.1%!important; padding:0 20px 20px 20px;} 
	.m-ilus .info {margin-left: 12px !important;}
	.m-ilus .info p {width:100%;}
	.m-ilus .side {background:url(../images/design/barra-2.png) no-repeat top center; width:100%; height:14px; display:block; margin-top:-3px;}
	.m-ilus .image .center {width:95%; height:auto;}

    #libros .list .middle {width:95%;}
	#libros .list .top {width:95%; }
	#libros .list { margin-left:-10px;}
	
	#ilus .list .middle {width:95%;}
	#ilus .list .top {width:95%; }
	#ilus .list { margin-left:-10px;}
	
	.icon-facebook { display: none;}

}



/*******************************************************
smaller than 730
********************************************************/


@media screen and (max-width: 730px) {
	
		.wrapper {width:95%; margin:0 auto;}
		
		#home .video { width:100%;}
		#home .video .top {width:100%;}
		#home .video .middle {width:95%; padding:2px 5px;}
		#home .video .bottom {width:100%;}
		
		#libros .list ul {display: table; width:500px; margin:0 auto;}
		#ilus .list ul {display: table; width:500px; margin:0 auto;}

		#cursos .txt .info {width:70%; padding-top:0;} 
		#cursos .txt img {width:25%; height:auto;}
		#cursos .articulo img {width:100%; height:auto;}
		#cursos .articulo .img-2 {width:auto;}

		#muestras .txt .info {width:70%; padding-top:0;} 
		#muestras .txt img {width:25%; height:auto;}
		#muestras .articulo img {width:100%; height:auto;}
	
		#prensa .txt {width:100%;}
		#prensa .txt .info {width:100%; padding-top:0;} 
		#prensa .articulo img {width:auto; height:auto;}
		#prensa .articulo .img-2 {width:auto;}
		#prensa .articulo .video { width:100%;}
		#prensa .articulo .video .top {width:100%;}
		#prensa .articulo .video .middle {width:95%; padding:2px 5px;}
		#prensa .articulo .video .bottom {width:100%;}
		
		#teoria .txt .info {width:100%; padding-top:0;} 
		
		#links .txt .info {width:100%; padding-top:0;} 
				
	
}



/*******************************************************
smaller than 560
********************************************************/

@media screen and (max-width: 575px) {
	
	body .content {font-size:1.200em; }
	
	header .logo img {width:210px; height:auto;}
	header .logo {width:210px; }
	header .button_container {margin:-160px 5px 0 0;}  
	header .language {position:relative; margin:-215px 0 0 0;}
	
	header #menu {width:280px; margin:60px auto 0;}
	header .overlay nav {width:280px;  margin: 0 auto;}
	header #menu ul {width:90%;}
	.miscelanea-2 {margin:-45px 0 0 0;}
	.miscelanea-3 { display:none;}
	header #menu ul a {font-size:1.275em;}
	header #menu .nav-2 { padding-bottom:20px;}
	header #retoggle { margin:-12px 0 0 220px;}
	
	.content {margin-top:20px;}
	#home .video .middle iframe {height:200px;}
	
	#libros .list ul {width:320px;}
	#libros .list .middle {width: 90%;}
	#libros .list ul li {margin:0 0 20px 10px; display:block; float:none; text-align:center; float:none; display:inline-block; vertical-align: top; padding:10px 10px 40px 10px!important; min-height:auto!important; height:auto!important; }
	#libros .list ul li img { height:auto;}
	#libros .list ul li .vermas {bottom:-2px; left:auto; right:0;}
	#libros .list ul {width:auto;}
	
	#ilus .list ul {width:320px;}
	#ilus .list .middle {width: 90%;}
	#ilus .list ul li {margin:0 0 20px 10px; display:block; float:none; text-align:center; float:none; display:inline-block; vertical-align: top; padding:10px 10px 40px 10px!important; min-height:auto!important; height:auto!important; }
	#ilus .list ul li img { height:auto;}
	#ilus .list ul li .vermas {bottom:-2px; left:auto; right:0;}
	#ilus .list ul {width:auto;}
	
	#cursos h1 { font-size:1.9em; padding-bottom:8px;}
	#cursos .articulo .img-2 {width:100%;}
	
	#prensa h1 { font-size:1.9em; padding-bottom:8px;}
	#prensa .articulo .img-2 {width:100%;}
	#prensa .articulo  .middle iframe {height:200px;}
	
	#muestras h1 { font-size:1.9em; padding-bottom:8px;}
	
	#teoria h1 { font-size:1.9em; padding-bottom:8px;}
	
	#links h1 { font-size:1.9em; padding-bottom:8px;}
	
	#home .article { width: 100%;}
	#home .article h2 a {font-size:0.8em; padding-bottom:15px; line-height:auto; }
	

}


@media screen and (max-width: 400px) {
			
	.fancybox-close {right:-50px;}
	
	.modal .center img { width:180px!important; height:auto;}
	.modal {width:250px!important; margin:0 auto; font-size:1.200em;}
	
	.m-ilus .center img { width:180px!important; height:auto;}
	.m-ilus {width:250px!important; margin:0 auto; font-size:1.200em;}
	
	#cursos .txt .info {width:100%; padding-top:15px; float:none;} 
	#cursos .txt img {width:100%; height:auto; float:none; margin-right:0; }
	
	#muestras .txt .info {width:100%; padding-top:15px; float:none;} 
	#muestras .txt img {width:100%; height:auto; float:none; margin-right:0; }
	
	#prensa .txt .info {width:100%; padding-top:15px; float:none;} 
	
	#teoria .txt .info {width:100%; padding-top:15px; float:none;} 
	#teoria .txt img {width:100%; height:auto; float:none; margin-right:0; }
	
	#links .txt .info {width:100%; padding-top:15px; float:none;} 
	
	#home .article {text-align: center;}
	#home .article img {float:none; margin:0 auto 15px; text-align: center;}
	#home .article h2 a {line-height:0.75em; display: inline-block;}
	
	.m-ilus .info {margin-left: 6px !important;}
	
	
	
}


@media screen and (max-width: 350px) { 

     #libros .list ul li { height:100%; min-height:auto; width: 70%!important; margin:0 auto 12px;}
	 #ilus .list ul li { height:100%; min-height:auto; width: 70%!important; margin:0 auto 12px;}
	 
	 #prensa .articulo img {width:100%; height:auto; margin:0 20px 0 0; float:none;}

}