@font-face {  
  font-family: 'AmaticSC-Regular';
  src: url('../fonts/AmaticSC-Regular.eot');
  src: local('?'), url('../fonts/AmaticSC-Regular.woff') format('woff'), 
  url('../fonts/AmaticSC-Regular.ttf') format('truetype'), 
  url('../fonts/AmaticSC-Regular.svg') format('svg');
} 

@font-face {  
  font-family: 'BreeSerif-Regular';
  src: url('../fonts/BreeSerif-Regular.eot');
  src: local('?'), url('../fonts/BreeSerif-Regular.woff') format('woff'), 
  url('../fonts/BreeSerif-Regular.ttf') format('truetype'), 
  url('../fonts/BreeSerif-Regular.svg') format('svg');
} 

@font-face {  
  font-family: 'PoiretOne-Regular';
  src: url('../fonts/PoiretOne-Regular.eot');
  src: local('?'), url('../fonts/PoiretOne-Regular.woff') format('woff'), 
  url('../fonts/PoiretOne-Regular.ttf') format('truetype'), 
  url('../fonts/PoiretOne-Regular.svg') format('svg');
} 

@font-face {
  font-family: 'fontello';
  src: url('../fonts/font/fontello.eot?83300604');
  src: url('../fonts/font/fontello.eot?83300604#iefix') format('embedded-opentype'),
       url('../fonts/font/fontello.woff?83300604') format('woff'),
       url('../fonts/font/fontello.ttf?83300604') format('truetype'),
       url('../fonts/font/fontello.svg?83300604#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}



*{padding: 0;margin: 0;}
.wrapper{
	background: #eee;
	overflow: hidden;
	
}

.wrapper1{background: #fff;}

.transition {
 bottom: 0;
  display: block;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}


/*//////////HEADER/////////*/

header{background: #fff}
.logo{
	background: url(img/logo.svg)no-repeat;
width: 100%;
height: auto;
background-size: contain;
border-bottom: 1px solid #000;
padding-bottom: 0.5em;
background-position: center;
}

h1.logo{
	text-indent:-9999999px;
}

		/*//////////MENÚ/////////*/
		 nav{margin-left: 0; margin-top: 0.5em}

			.boton-menu {
		    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
		    border-bottom-left-radius: 16px;
		    border-bottom-right-radius: 16px;
		    color: #222;
		    display: block;
		    font-family: "fontello";
		    font-size: 1.5em;
		    margin: 0 auto;
		    padding: 0.2em 0.5em 0.5em;
		    text-align: center;
		    text-decoration: none;
		    width: 34px;
			}

			.boton-menu a{display: none;}

		#mainNav {
			
			background: rgba(0,34,34,.7);
			 width: 100%;
			 border-radius: 20px 20px 0px 0;
			 display: none;

		}

		#mainNav li{
			
			width: 100%;
			padding: 2% 0em;
			border-bottom: 1px solid #ccc;
			font-size: 0.9em;
			margin: 0;
			padding: 0.73em 3%;
			text-align: center;
		}

		#mainNav a{
			text-decoration: none;
			font-family: AmaticSC-Regular;
			font-size: 1.5em;
			text-align: center;
			color:#fff;
			display:block;
		}



		.menu-movil{
 		 overflow: hidden;
		  display: block;
		  position: fixed;
		  z-index: 99999;
		  width: 100%;
		  height: auto;
		  bottom: 0em;
		}

 


  







/*//////////CONTENT/////////*/



#home{text-align: center; }
#home h2{
	font-family: AmaticSC-Regular;
	font-size: 3em;
	
}
#home h4{
	font-family: BreeSerif-Regular;
	font-size: 2em;
	padding-bottom: .5em;
	
}
#home p{
	font-family:PoiretOne-Regular;
	font-size: 1em;
	line-height: 20px 
}
#home img{ 
	width: 100%;
	height: auto;}

#home1 img{ 
	width: 100%;
	height: auto;}



/*//////////FOOTER/////////*/

footer{
	
	border-top: 1px solid #000;
padding: 1em 0;
height: 248px;
width: 100%;
position: absolute;
}
.social li, .direcc li {
	font-family: 'fontello';
	width: 2em;
	font-size: 1.5em;
	border: 1px solid #ccc;
	line-height: 2em;
	margin: 0em 0;
	color: #ccc;
	display: inline-block;
	list-style: none;
	border-radius: 50%;
	margin: 0 1%;

}

.direcc li {
	margin-top:.5em;
}


.social li a, .direcc li a{
	color: #ccc
}


.twitter:before { content: '\e803'; } /* '' */
.facebook:before {content: '\e802'; } /* '' */
.inst:before {content: '\e804'; } /* '' */
.boton-menu:before { content: '\e806'; color:#fff; }

.correo:before { content: '\e800';  color: #ccc;} /* '' */
.telf:before {content: '\e801';color: #ccc;} /* '' */

.social, .direcc{
	
	overflow: hidden;
	text-align: center;
	
}


.icon-direcc:before { 
	content: '\e805';
	font-family: 'fontello';
	color: #ccc;

} 





div.horario{
	font-family: AmaticSC-Regular;
	text-align: center;
	padding: .5em 0;
	font-size: 1.5em
}





     
    


    	article{
		background: url(pixel.png)repeat;
	    border-radius: 10px;
	    display: block;
	    height: 250px;
	    margin: 3% auto;
	    width: 250px;
	    overflow: hidden;

	}

	.menu-movil{
  overflow: hidden;
  display: block;
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: auto;
  bottom: 0em;
}

	article img{
		display: block;
	    height: 63%;
	    margin: 20% auto 0;

	}
	a{text-decoration: none}

	article h2{
		background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    font-family: PoiretOne-Regular;
    padding: 0.5em;
    text-align: center;

	}

	.producto{
		z-index: 999999;
	}

	section h5{
		font-family: poiretOne-Regular;
	    font-size: 2em;
	    margin: 1em;
	    text-align: center;

	 }

	 .direcc li{display: }
	
	.oculta{display: none}

@media(min-width: 650px){


	.wrapper {
	    background: url(pixel.png);
	    padding: 0;	   
	    overflow: hidden;
	}


	


	.logo{background-position: center;}


		

	#inicio{
		background: url("img/home.png") no-repeat scroll center center / contain rgba(0, 0, 0, 0);
	    display: block;
	    text-indent: -99999px;
	    width: 26px;
	}
	.menu li div{
		float: right;
		height: 27px;
		width: 23px;
	}
	.sellos{background: url("img/sellos.png") no-repeat scroll 0 0 / contain rgba(0, 0, 0, 0); }
	.imprenta{
		 background: url("img/imprenta.png") no-repeat scroll right bottom / contain rgba(0, 0, 0, 0);
   		 margin-left: 7px;
		 }

	#vinilos{
		 background: url("img/vinilos.png") no-repeat scroll right bottom / contain rgba(0, 0, 0, 0);
   		 margin-left: 7px;
   		 width:31px;

	}

	#cuadernos{
		 background: url("img/encuader.png") no-repeat scroll right bottom / contain rgba(0, 0, 0, 0);
   		 margin-left: 7px;
   		 width:31px; 
	}

	#textil{
		 background: url("img/textil.png") no-repeat scroll right bottom / contain rgba(0, 0, 0, 0);
   		 margin-left: 4px;
   		 width:27px;
   		 
	}
	#papel{
		 background: url("img/papel.png") no-repeat scroll right bottom / contain rgba(0, 0, 0, 0);
   		 margin-left: 4px;
   		 width:27px;
   		 
	}

	#cuadricula{
		width: 75%;
		display: block;
		float: right;
		padding-top: 2em;
	}


}


@media(min-width: 750px){


.wrapper{padding: 0;}
.logo{
	height: 150px;
}
div.contacto h6 {
    font-size: 1.2em;
    text-align: center;
}
.direcc li{
	border: 0px!important;
	width: auto;
}

.icon-direcc:before, .itelf:before,.correo:before{padding: 4px}

article{
	float: left;
	margin: 1%;
}

  div.social a:hover, div.direcc a:hover{color: #ccc}

div.social li:hover{
        background: #bfa3a3;
        color: #fff;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: center center;
        transform-origin: center center;
      }

.oculta{display: inline-block;}

#home img{width: 72%}
#home1 img{width: 42%}

.wrapper{width: 100%}

.centrar{width: 100%; text-align: center;}
.centrar1{width: 100%; text-align: center;}
.centrar1 img{width: 42%;}
footer{
	
	border-top: 1px solid #000;
padding: 1em 0;
height: 248px;
bottom: 0;
position: inherit;
width: 100%;
}

div.horario, div.direcc {
    font-family:BreeSerif-Regular;
    font-size: 1em;
    padding: 0.5em 0;
    text-align: center;
}

body{}

.mascara{
	overflow: hidden;

}

.carrusel{
	width: 100%;
	height: 300px;
}

}