@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

.cleare	{ display: block; clear: both;}

body{
	font-size: 15px;
	line-height: 22px;
	color: #000;
	font-family: 'Open Sans', sans-serif;
	}

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#top{
	display: none;
	position: fixed;
	width: 100%;
	padding: 5px 0;
	background: #fff;
	z-index: 99;
	border-bottom: 1px solid #f1f1f2;
	}

#logo{
	width: 150px;
	float:left;
	}

#menu{
	float:right;
	width: 80%;
	text-align:right
	}

#menu ul li{
	display: inline-block;
	*display: inline;
	zoom: 1;
	padding: 5% 3%;
	}

#menu ul li a{
	display: block;
	text-decoration: none;
	color: #ccc;
	
	-webkit-transition: all .3s ease-in 0s;
	-moz-transition: all .3s ease-in 0s;
	-ms-transition: all .3s ease-in 0s;
	-o-transition: all .3s ease-in 0s;
	transition: all .3s ease-in 0s;
	}

#menu ul li a:hover, #menu ul li a.activo{
	color: #F00;
	}

.caption{
	position: absolute;
	font-weight: 300;
	letter-spacing: 10px;
	width: 60%;
	margin: auto;
	left: 0;
	right: 0;
	text-align: center; 
	color: #fff;
	font-size: 20px;
	top: 35%;
	line-height: 67px
	}

.caption span{
	font-weight: 700;
	}

#slide{
	padding: 110px 0 0 0;
	position: relative;
	}

.flotante_bi{
	padding: 2% 5%;
    width: 90%;
	float: left;
	height: 100%;
	}

#zapatos	{ background: url(../images/bg_shoes.png) no-repeat center / cover;}
.titulo{
	font-weight: 700;
	font-size: 38px;
	}

#txt_bi{
	background: #F00;
	color: #fff;
	padding: 6% 0 6% 19px;
	}

#bienvenido{
	background: #f00;
	font-size: 23px;
	line-height: 30px
	}

#zapanines{
	padding: 8% 0;
	}

.tb_z{
	float: left;
	width: 100%;
	text-align: center;
	padding: 0 1%;
	margin-bottom: 50px;
	}

.titulo_2{ color: #f00; }

#promo{
	width: 100%;
	height: 300px;
	}

#footer{
	background: #333;
	padding: 30px 0;
	color: #555
	}

.flotante_foo{
	width: 50%;
	float:left;
	}

.google_l{
	width: 95%;
	float:left;
	height: 300px;
	}

.txt_ubi{
	width: 90%;
	padding: 0 0 0 5%;
	float:left;
	font-size: 17px;
	position:relative;
	}

.txt_ubi h1{
	font-size: 20px;
	color: #e72b3e
	}

#submenu{
	display: none;
	background: #e6e7e8 none repeat scroll 0 0;
    position: relative;
    width: 100%;
    z-index: 99;
	}

#submenu.fijo{
	position: fixed;
	top: 90px;
	}

#submenu a{
	color: #e72b3e;
    display: block;
    float: left;
	background: #e6e7e8;
	border-right: 1px solid #ccc;
    font-size: 12px;
    padding: 10px 23px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
	outline: none;
	}

#submenu ul{
	width: 80%;
	margin: auto;
	}

.truquin{
	position:absolute;
	width: 20px;
	height: 2px;
	top: -190px;
	}
	
.site-wrap 					{ min-height: 100%;min-width: 100%;background-color: white; position: relative;top: 0;bottom: 100%;left: 0;z-index: 1;background-size: 200%;}

.navigation 				{ width: 260px; height: 100%;position: absolute; top: 5px; bottom: 0;left: 0;z-index: 0;background: #000;list-style: none; padding:0 0 50px 0; margin:0; display:block }
.navigation li 				{ border-bottom: 1px dotted #ccc; text-align: center; color: #ccc; }
.navigation li.float		{ padding-left: 40px }
.navigation li.float a		{ display: inline-block; zoom: 1; *display: inline; }
.navigation li a 			{ display: block;padding: 1em 0 1em 12px;color: #fff;text-align: left;font-size: 1em;text-decoration: none;transition: color 0.2s, background 0.5s;}
.navigation li a.activo		{ color: #d0b066; }

.nav-trigger 				{ position: absolute;clip: rect(0, 0, 0, 0);display: none;}
label[for="nav-trigger"] 	{ display: block; position: absolute;left: 15px; top: 15px;z-index: 3; height: 30px;width: 30px;cursor: pointer;background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6' fill='red'/><rect y='24' width='15' height='6' fill='red'/><rect y='12' width='30' height='6' fill='red'/></svg>");background-size: contain;}

/*para abrir */
.nav-trigger + label, .site-wrap 	{transition: left 0.2s;}
.nav-trigger:checked + label 		{left: 290px;}
.nav-trigger:checked ~ .site-wrap 	{left: 260px;box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);}

/*body								{overflow-x: hidden;}*/

#ip_logo					{ display: block; position: relative; text-align: center; width: 100%; z-index: 9; top: 0; background: #fff; padding: 10px 0}
.caca{background: #f00; padding: 20px 0 0 0; height: 90px}

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
#ip_logo					{ display: none;}
label[for="nav-trigger"] 	{ display: none;}
.caption{ font-size: 60px;}
.caca{background: #f00; padding: 180px 0 0 0; height: 150px}
.google_l{width: 65%;}
.txt_ubi{ width: 30%;}
#submenu{ display: block;}
#txt_bi				{ padding: 6% 0;}
.flotante_bi			{ width: 40%;}
.tb_z				{width: 30%;}
#top				{ display: block; }
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}