@charset "utf-8";

#section2{
	width:100%;
	/*height:100%;*/
	max-width:1000px;
	margin:0 auto 2.5% auto;
	padding:0;
}


#catalogo{
	width:98.5%;
	padding:0;
	margin:3% auto;
	max-width: 1000px;
	background:#efefef;
	border-radius: 0.5em ;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
	display:block;
}
#logocatalogo{
	width:9%;
	min-width:50px;
	display:inline-block;
	vertical-align:top;
}
#titulocatalogo{
	width:75%;
	display:inline-block;
	vertical-align:top;
	min-height:40px;
	margin:0;
}
#titulocatalogo h1{
	font-size:1.5em;
	text-decoration:none;
	padding:0;
	margin:1% 0 0 0;
	color:#393939;
}
#titulocatalogo h2{
	font-size:1.1em;
	font-weight: 100;
	margin:0 ;
	text-decoration:none;
	color:#393939;
}

#variables{
    max-width:1000px;
	width:100%;
	margin:0.5% auto;
	padding:0;
}
.var{
	background: #444444; /* Old browsers */
    background: -moz-linear-gradient(top, #444444 0%, #272727 73%, #272727 90%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(73%,#272727),    color-stop(90%,#272727), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #444444 0%,#272727 73%,#272727 90%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #444444 0%,#272727 73%,#272727 90%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #444444 0%,#272727 73%,#272727 90%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #444444 0%,#272727 73%,#272727 90%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    width:18.7%;
	max-width:188px;
	margin:0.5% 0 0.5% 0.6%;
	display:inline-block;
	vertical-align:top;
	border:#CCC 1px solid;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 0.1 ease;
    border-radius: 8px ;
   -moz-border-radius: 8px ;
   -webkit-border-radius: 8px ;
}
#image{
	background:#FFF;
	border-radius: 7.3px 7.3px 0px 0px;
    -moz-border-radius: 7.3px 7.3px 0px 0px;
    -webkit-border-radius: 7.3px 7.3px 0px 0px;
}
.var:hover #titulo h3 a{
	filter: dropshadow(color=#cccccc, offx=0, offy=0);
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
    color:#000;
	text-shadow:none;
}
.var:hover {
	filter: dropshadow(color=#cccccc, offx=0, offy=0);
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	background:#ffcc00;
	border-color:#ffcc00;
}
#titulo h3{
	margin: 0;
	font-size: 0.7em;
	margin: 2% 0;
	text-align: center;
}
#titulo{
	margin:0;
}


/* Diseño tablet- LANDSCAPE y portrait: max ancho 768px */
@media only screen and (max-width: 768px) {

	/* estilos catalogo y catalogo2 */
	#catalogo {
		height:auto;
	}

	#titulocatalogo h1 {
		font-size:1.2em;
		margin-top:1%;
	}
	#titulocatalogo h2 {
		font-size:0.85em;
	}
	#logocatalogo {
		width:10.5%;
	}

	.var{
		width:23.2%;
	}

}


@media only screen and (max-width: 550px)  and (min-width:321px) {

	.var{
		width:31%;
	}
}

/* Diseño smartphone- LANDSCAPE: max ancho 479px. */
@media only screen and (max-width: 479px) {

	#catalogo {
		height:auto;
	}
	#titulocatalogo {
		width:100%;
	}
	#titulocatalogo h1 {
		font-size:1em;
		margin:1% 0 0 2%;
	}
	#titulocatalogo h2 {
		font-size:0.8em;
		margin:0 0 0 2%;
	}
	#logocatalogo {
		display:none;
	}

}

/* Diseño smartphone- portrait: max ancho 320px. */
@media only screen and (max-width: 320px)  {
	.var {
		width:48%;
		margin:0.5% 0 0.5% 0.3%;
	}
}

@media only screen and (max-width: 900px) and (min-width:480px) {

	.var{
		margin:0.5% 0 0.5% 0.45%;
	}
}