/* ============================
TITLE:	GENERAL RESPONSIVE CSS
DATE:	25 ABRIL 2014
DESIGN:	www.bigbox.mx
============================ */
@charset "UTF-8";

/* general / DESKTOP */
*{
	border: 0;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: subpixel-antialiased !important;
	-webkit-text-stroke: 1px rgba(0,0,0,0.06);
}
*:focus{
	outline: none;
}
body{
	font-size: 16px;
}
a,
a:link,
a:visited{
	text-decoration: none;
}

/* basic structure */
header,
nav, 
footer{
	overflow: hidden;
}
#envoltura{
	width: 100%;
}
#contenedor-flex{
	/*width: 98%;*/
	/*padding: 0 1%;*/
	overflow: hidden;
}
#contenedor-cent,
.contenedor{
	width: 98%;
	min-width: 320px;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 1%;
	overflow: hidden;
}
	/* for pages with sidebar */
	#contenido,
	#sidebar{
		float: left;
		margin: 0 1%;
		padding: 0 1%;
	}
	#contenido{
		width: 64.666%;
	}
	#sidebar{
		width: 27.337%;
		min-width: 305px;
		max-width: 320px;
	}
	#sidebar img{
		max-width: 320px;
	}
	/* for pages with sidebar */
.fila{
	width: 100%;
	margin: 1.5% 0;
	overflow: hidden;
}
.col_1,
.col_2,
.col_2_1,
.col_2_2,
.col_3,
.col_4,
.col_5{
	padding: 0 1%;
	margin: 0 1%;
}
.col_2,
.col_2_1,
.col_2_2,
.col_3,
.col_4,
.col_5{
	float: left;
}
.col_1{
	width: 96%;
}
.col_2{
	width: 46%;
}
.col_2_1{
	width: 62%;
}
.col_2_2{
	width: 71%;
}
.col_3{
	width: 29.33%;
}
.col_4{
	/*width: 21%;*/
	width: 20.9%;
}
.col_5{
	width: 16%;
}

/* basic text */
.tder{
	text-align: right;
}
.tcen{
	text-align: center;
}
.tizq{
	text-align: left;
}
.tjus{
	text-align: justify;
}

/* basic classes */
.imgres{
	width: 100%;
	height: auto;
}
.show{
	display: block;
	height: 1px;
}
.hide{
	display: none;
}
.jump{
	margin-bottom: 30px !important;
}
.unjump{
	margin-bottom: 0 !important;
}
.padbottop{
	padding-top: 2%;
	padding-bottom: 2%;
}
.nomargin{
	margin: 0 !important;
}
.nopadding{
	padding: 0 !important;
}
.hide-desktop{
	display: none !important;
}

/* DESKTOP LOW RESOLUTION */
@media screen and (max-width: 1024px){
}

/* TABLET */
@media screen and (min-width : 481px) and (max-width : 768px) {
	#envoltura{
		max-width: 768px;
	}
	#contenido{
		width: 96%;
		float: none;
		margin: 0 auto 30px auto;
	}
	#sidebar{
		float: none;
		margin: 15px auto;
	}
	.col_2,
	.col_2_1,
	.col_2_2,
	.col_3,
	.col_4,
	.col_5{
		float: none;
	}
	.col_1{
		width: 96%;
	}
	.col_2{
		width: 96%;
	}
	.col_2_1{
		width: 96%;
	}
	.col_2_2{
		width: 96%;
	}
	.col_3{
		width: 96%;
	}
	.col_4{
		width: 96%;
		/*width: 21%;*/
		/*float: left;*/
	}
	.col_5{
		width: 16%;
		float: left;
	}
	.hide-tablet{
		display: none !important;
	}
	.hide-desktop{
		display: inherit !important;
	}
}

/* MOBILE 320 x 480 */
@media screen and (min-width : 0px) and (max-width : 480px) {
	#envoltura{
		max-width: 480px;
	}
	#contenido{
		width: 96%;
		float: none;
		margin: 0 auto 30px auto;
	}
	#sidebar{
		float: none;
		margin: 15px auto;
	}
	.col_2,
	.col_2_1,
	.col_2_2,
	.col_3,
	.col_4,
	.col_5{
		float: none;
		margin-top: 1.5% ;
		margin-bottom: 1.5% ;
	}
	.col_1{
		width: 96%;
	}
	.col_2{
		width: 96%
	}
	.col_2_1{
		width: 96%;
	}
	.col_2_2{
		width: 96%;
	}
	.col_3{
		width: 96%;
	}
	.col_4{
		width: 96%;
	}
	.col_5{
		width: 96%;
	}
	.hide-mobile{
		display: none !important;
	}
	.hide-desktop{
		display: inherit !important;
	}
}