@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;
}

#drop{
	position: relative;
	}

#w_drop{
	left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 60px;
    width: 250px;
	background: #fff;
	display: none;
	}

#drop:hover #w_drop{
	 display: block;
	 }

#w_drop ul dd{
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
	}

#top{
	position: absolute;
	width: 100%;
	padding: 15px 0;
	z-index: 99;
	text-align:center;
	}

#top .flujo{
	background: #f1f1f2;
	}

#logo{
	width: 230px;
	margin: 20px auto 20px;
	}

#menu{
	width: 80%;
	margin: auto;
	text-align:center
	}

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

#menu ul li a{
	display: block;
	text-decoration: none;
	color: #ccc;
	font-size: 15px;
	color: #fff;
	letter-spacing: 5px;
	
	-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 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    left: 0;
    letter-spacing: 10px;
    line-height: 22px;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 13%;
    width: 80%;
}

.caption span{
	font-weight: 700;
	}

#slide{
	position: relative;
	}

.logitos{
	bottom: -46%;
    height: 60px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 2;
	}

.flotante_bi{
   float: none;
    height: 100%;
    margin: auto;
    padding: 0 2%;
    width: 81%;
}

.titulo{
	font-weight: 700;
	font-size: 38px;
	}

#txt_bi{
	background: #fff;
	color: #666;
	padding: 4% 0 0 0;
	}

#bienvenido{
	background: url(../images/bg_color.png) no-repeat center bottom;
	font-size: 28px;
	line-height: 35px
	}

#zapanines{
	padding: 8% 0;
	}

#bi{
	background: url(../images/bg_color.png) repeat-y center;
	padding: 4% 0;
	}

#bi h1{
	font-size: 20px;
	font-weight: 300;
	text-align: center;
	line-height: 27px;
	}

.tb_z{
	float: left;
	width: 92%;
	text-align: center;
	padding: 0 1%;
	}

.titulo_2{ color: #f00; }

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

#footer{
	background: #333;
	padding: 5% 0;
	color: #999;
	letter-spacing: 2px;
	text-align: center;
	}

.flotante_foo{
	width: 50%;
	float:left;
	}
	
.google_l{
	width: 65%;
	float:left;
	height: 300px;
	}

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

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

.input{
	width: 100%;
	border: 0;
	padding: 15px;
	margin: 6px 0;
	}

#w_bi_form{
	background: #f1f1f2;
	position:relative;
	width: 100%;
	height: 500px;
	padding: 2% 0;
	}



#izq {
    padding: 0 20px;
    position: relative;
    right: 0;
    top: 70px;
    width: 84%;
}

#izq h1{
	line-height: 30px;
	}

#izq p{
	color: #909392;
	font-size: 18px;
	}



#der {
    background: #b41217 none repeat scroll 0 0;
    height: 100%;
    position: relative;
    right: 0;
    top: 120px;
    width: 100%;
	padding: 30px 0 0 0;
}

.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: #000; padding: 10px 0}
#top						{ display: none; }
#form_						{width: 50%; margin: 50px auto 0}

#form1						{ width: 220px; margin: auto}

@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) {

#der{
	position: absolute;
	width: 50%;
	height: 100%;
	right: 0;
	top: 0;
	padding: 0px 0 0 0;
	background: #b41217;
	}
#izq{
	right: 57%;
    position: absolute;
    top: 70px;
    width: 450px;
	padding: 0;
	}
.tb_z								{ width: 30%;}
#form1								{ width: 600px; margin: auto}
#form_{width: 50%;}
.flotante_bi						{ padding: 0% 5%;width: 40%;float: right;}
.caption							{ width: 859px;font-size: 50px;top: 30%;line-height: 57px}
.logitos							{ bottom: 17%;}
#top								{ display: block;}
label[for="nav-trigger"] 			{ display: none;}
#ip_logo							{ display: none; }
.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;
}
}