/*
COLORES

AMARIllO: #ffc441
GRIS 1: ##4d4d4d;

*/


/* ---- ESTILOS GENERALES ----- */


body{
background: #6e6e6e;
}

h1{
font-family: 'Oswald', sans-serif;
color:#333333;
font-size:30px;
padding-left:90px;
display: block;
position: relative;
height: 82px;
margin:20px 30px 40px 30px;
padding:25px 0px 0px 92px;
background-position:0% 0%;
background-image:none;
background-repeat: no-repeat;
z-index:200;
}

h1.aplicaciones{background-image:url(../images/icon_tit_aplicaciones.png);}
h1.casos_exito{background-image:url(../images/icon_tit_casos_exito.png);}
h1.control{background-image:url(../images/icon_tit_control.png);}
h1.nosotros{background-image:url(../images/icon_tit_nosotros.png);}
h1.nuestros_clientes{background-image:url(../images/icon_tit_nuestros_clientes.png);}
h1.contacto{background-image: url(../images/icon_tit_contacto.png); margin:45px 30px 50px 30px;}

h2{
font-family: 'Oswald', sans-serif;
color:#333333;
font-size:32px;
margin:25px 0px;
}

h2 span{
display: block;
position: relative;
font-size:20px;
}

h3{
font-family: Arial;
color:#1a1a1a;
font-size:18px;
margin:15px 0 0 0;
font-weight: bold;
}

p{
font-family: Arial;
color:#4d4d4d;
font-size: 14px;
line-height: 18px;
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

p span.txt-gnd-gris{
font-weight: bold;
font-size: 17px;
color:#1a1a1a;
}
p span.txt-gnd-amarillo{
font-weight: bold;
font-size: 17px;
color:#fbb03b;
}

p a{
color:#fcc42b;}

p a:hover{
color:#fcc42b;
text-decoration:underline;
}


.content img-centrada{
margin:0px auto;
}

.content ul{
list-style:none;
padding:0px 0px 0px 0px;
}

.content ul li{
color: #fcc42b;
font-size: 14px;
background: url(../images/li_punto.png) 0px 6px no-repeat;
padding-left:15px;
margin:3px 0px;
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

.content ul li span{
color:#4d4d4d;
}

.content img{
display: block;
position: relative;
margin:0px auto;
}

.content img.img-nosotros{
top:-87px;
}

a.btn_regresar{
display: block;
position: relative;
width:115px;
height: 32px;
margin:0px auto;
padding:30px;
}

.content{
display: block;
position: relative;
min-height: 150px;
overflow-y: auto;
overflow-x: hidden;
padding-bottom:36px;
}

.content.contactoPage{
background:url(../images/mapa_contacto1.png) no-repeat 50% 0%;
}



.container{
width:1024px;
background: #f1f1f1;
}

/* ----------------------- HEADER -------------------  */

.header{
min-height: 82px;
background: #fff;
overflow: auto;
}

.logo{
display: block;
position: relative;
max-width:426px;
margin: 8px 15px;
float:left;	
}

.logo a{
border:none;	
}


.contactContainer{
display:block;
position: relative;
float:right;
width:305px;
}

/* MENU CONTACTO */

ul.contactMenu{
display: block;
position: relative;
list-style: none;
padding: 0px;
margin:8px 10px;
width:21px;
float:left;
}

ul.contactMenu li{
display: block;
position: relative;
float:left;
width:21px;
height:21px;
margin:0px 0px 3px 0px;
padding:0px;
background: none;
}

ul.contactMenu li a{
display: block;
position: relative;
background: url(../images/circle_gris.png) no-repeat 50% 50%;
}

ul.contactMenu li a:hover{
background: url(../images/circle_amarillo.png) no-repeat 50% 50%;
}

ul.contactMenu li a img{
display: block;
position: relative;
padding: 0px;
margin: 0px;
}


/* LOGIN FORM */

.loginFormContainer{
display: block;
position: relative;
width:244px;
height: 82px;
background: url(../images/separador_vertical_login.png) 0% 50% no-repeat ;
padding:0px 0px 0px 10px;
float:left;
}

.loginFormContainer h4{
color: #ffc441;
font-family: Times;
font-size: 14px;
}

ul.loginForm{
display: block;
position: relative;
float:left;
list-style: none;
margin:0px;
padding:0px;
}

ul.loginForm li{
display: block;
position: relative;
float:left;
width:100%;
margin:0px 0px 5px 0px; 
background:none;
}

.loginForm label{
display: block;
position: relative;
width: 43px;
margin:0px 11px 0px 0px;
float: left;
font-family: Helvetica;
font-weight: lighter;
font-size: 10px;
color:#333333;
}

.loginForm input[type="text"], .loginFormContainer input[type="password"], .loginFormContainer input[type="email"]{
display: block;
position: relative;
float: left;
width:120px;
height:18px;
/*background: url(../images/background_input_gris.png) repeat-x;*/
outline: none;
font-family: Helvetica;
font-size: 10px;
color:#333333;
padding-left:5px;

border: 1px solid #c5c7c9;
border-radius:10px;
   -webkit-border-radius:10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px; 
}

.loginForm input[type="button"]{
display: block;
position: relative;
float: left;
width:43px;
height:16px;
margin: 0px 0px 0px 13px;
background:url(../images/background_boton_amarillo.png) repeat-x;
color:#333333;
font-family: Helvetica;
font-weight: lighter;
font-size: 10px;
border:0px;
border-radius:5px;
   -webkit-border-radius:5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px; 
}

/* MAINMENU */


ul.mainMenu{
display:block;
position: absolute;
width: 180px;
list-style: none;
overflow:auto;
padding:0px;
margin:0px;
z-index:100;
top:-2px;
right:10px;
}

ul.mainMenu li{
display:block;
position: relative;
width: 100%;
height:auto;
overflow:auto;
list-style: none;
overflow:auto;
padding:0px;
margin:3px 0px;
background: none;
text-align: left;
}

ul.mainMenu li a{
display: block;
position: relative;
float:right;
width: 100%;
height: 36px;
background:url(../images/circle_gris.png) right no-repeat;
}

ul.mainMenu li a span{
display: block;
position: relative;
float:right;
right:36px;
width: 0px;
height: 36px;
overflow:hidden;
color:#333333;
font-size: 12px;
font-family: Helvetica;
line-height: 14px;
padding:3px 0 0 0;
background: #ffc441;

-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;

border-top-left-radius: 36px;
-moz-border-radius-topleft:36px;
-webkit-border-top-left-radius: 36px;

border-bottom-left-radius: 36px;
-moz-border-radius-bottomleft:36px;
-webkit-border-bottom-left-radius: 36px;

border-top: 0px solid #fff;
border-bottom: 0px solid #fff;
border-left:  0px solid #fff;
}

ul.mainMenu li a:hover span, ul.mainMenu li a#active span{
width: 129px;
padding:3px 0 5px 15px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left:  1px solid #fff;
}


ul.mainMenu li a.control{background:url(../images/circle_gris_1B.png) right no-repeat;}
ul.mainMenu li a.handheld{background:url(../images/circle_gris_2B.png) right no-repeat;}
ul.mainMenu li a.nosotros{background:url(../images/circle_gris_3B.png) right no-repeat;}
ul.mainMenu li a.casos{background:url(../images/circle_gris_4B.png) right no-repeat;}
ul.mainMenu li a.nuestros{background:url(../images/circle_gris_5B.png) right no-repeat;}

ul.mainMenu li a.control:hover, ul.mainMenu li a.control.active{background:url(../images/circle_amarillo_1A.png) right no-repeat;}
ul.mainMenu li a.handheld:hover, ul.mainMenu li a.handheld.active{background:url(../images/circle_amarillo_2A.png) right no-repeat;}
ul.mainMenu li a.nosotros:hover, ul.mainMenu li a.nosotros.active{background:url(../images/circle_amarillo_3A.png) right no-repeat;}
ul.mainMenu li a.casos:hover, ul.mainMenu li a.casos.active{background:url(../images/circle_amarillo_4A.png) right no-repeat;}
ul.mainMenu li a.nuestros:hover, ul.mainMenu li a.active{background:url(../images/circle_amarillo_5A.png) right no-repeat;}

ul.mainMenu li a.nosotros span{padding-top:10px;}
ul.mainMenu li a.casos span{padding-top:10px;}
ul.mainMenu li a.nuestros span{padding-top:10px;}





/* FOOTER */

.footer{
background:#424143;
}

ul.footerMenu{
display: block;
position: relative;
width:100%;
list-style: none;
margin:15px 0;
text-align: center;
padding:0px;
}

ul.footerMenu li{
display: inline;
color:#fff;
font-family: Helvetica;
font-weight: lighter;
font-size: 13px;
padding: 0px 13px;
border-right:2px solid  #ffc441;
background: none;
}

ul.footerMenu li:last-child{
border-right:none;
}

ul.footerMenu li a{
color:#fff;
font-family: Helvetica;
font-weight: lighter;
font-size: 13px;
text-decoration: none;
}

ul.footerMenu li a:hover{
text-decoration: underline;
}

/* EXTRA FOOTER */

.extraFooter{
background:#ffc441 url(../images/background_triangulo.png) no-repeat 50% 0%
}

ul.extraFooterMenu{
display: block;
position: relative;
width:100%;
list-style: none;
margin:20px 0;
text-align: center;
padding:0px 30px;
}

ul.extraFooterMenu li{
display: inline;
font-family: Helvetica;
font-weight: lighter;
font-size: 13px;
padding: 0px 13px;
border-right:2px solid  #fff;
background: none;
}

ul.extraFooterMenu li:last-child{
border-right:none;
}

ul.extraFooterMenu li a{
color:#000000;
font-family: Helvetica;
font-weight: lighter;
font-size: 13px;
text-decoration: none;
}

ul.extraFooterMenu li a:hover{
text-decoration: underline;
}


img.img-contacto{
display: block;
position:relative;

}


/* ----- BANNER EMERGENTE ----- */

	.pantallaNegra{
	display: none;
	position: absolute;
	top:0;
	left:0;
	z-index:201;
	background: rgba(0,0,0,0.80);
	width: 100%;
	height: 100%;
	}
	
	.bannerEmergenteContainer{
	display: block;
	position: relative;
	margin:124px auto;
	width: 936px;
	height: 436px;
	}
	
	.bannerEmergenteContainer:hover{
	cursor: pointer;
	}
	
	img.bannerEmergente{
	display: block;
	position: relative;
	width: 900px;
	height: 400px;
	top:18px;
	margin:0px auto;
	}
	
	img.tache{
		display: block;
		position: absolute;
		width: 36px;
		height: 36px;
		z-indexx:110;
		top:0;
		right: 0;
	}
	
/* ----- MAPA EMERGENTE ----- */

	.mapaEmergente{
	display: block;
	position: relative;
	margin:0px auto;
	top:0;
	}
	
	.mapaEmergente:hover{
	cursor: pointer;
	}
	


/* ----- CONTACTO ------ */

.contactFormContainer{
display:block;
position:relative;
margin:30px auto;
width:100%;
overflow:auto;
}

.contactFormContainer label{
display:block;
position:relative;
float: left;
width:20%;
color:#4d4d4d;
font-size: 14px;
font-weight: normal;
margin-bottom:15px;
}

.contactFormContainer input, .contactFormContainer textarea{
display:block;
position:relative;
float: left;
height: 30px;
width: 80%;
color:#4d4d4d;
font-size: 14px;
padding-left:10px;
margin-bottom:15px;
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;  
border: 1px solid #c5c7c9;
}

.contactFormContainer textarea{
height: 115px;
}

.contactFormContainer input[type="submit"]{
display:block;
position:relative;
float: right;
clear:both;
width:20%;
height: 25px;
background: #ffc441;
border:transparent;
}

/* DIRECCION */
.direccionContainer{
display: block;
position: relative;
float:left;
overflow:auto;
border-left:2px solid #fcc42b;
height: 280px;
padding:0 30px;
margin:30px 0px;
left:-30px;
}

.direccionContainer p a{
color:#4d4d4d;}

.direccionContainer p a:hover{
text-decoration: underline;
color:#ffc441;}
	
/* correccion de parrafos -- */

.col-md-12 p{
padding-right:60px;
}

/* ----- CLIENTES -------- */
ul.logosClientes{
display: block;
position: relative;
width:962px;
margin: 0 auto;
padding: 0;
list-style: none;
overflow: auto;
}

ul.logosClientes li{
display: block;
position: relative;
width:320px;
margin: 0;
padding: 0;
float:left;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
background: none;
}
ul.logosClientes li:nth-child(3),
ul.logosClientes li:nth-child(6),
ul.logosClientes li:nth-child(9){
border-right:none;
border-bottom:1px solid #ccc;
}

ul.logosClientes li:nth-child(10), ul.logosClientes li:last-child{
border-right:1px solid #ccc;
border-bottom:none;
}


/* ------------------------------ MEDIA QUERIES ------------- */

/* XS */
@media (max-width: 767px) {
	.container{width:auto; max-width:767px;}
	
	.header{
	min-height: 21px;
	margin-top:50px;
	}
	
	.col-md-12 p{
	padding-right:0px;
	}
	
	.content img.img-nosotros{top:0px;}
	
	.content img-centrada{
	margin:0px auto;
	}

	
	p span.txt-gnd-gris{
	font-weight: bold;
	font-size: 14px;
	color:#1a1a1a;
	}
	p span.txt-gnd-amarillo{
	font-weight: bold;
	font-size: 14px;
	color:#fbb03b;
	}
	.loginFormContainer{
	float:left;
	}
	
	
	h1{
	font-size:28px;
	padding-top:90px;
	height: auto;
	margin:20px 30px 30px 30px;
	padding:92px 0px 0px 0px;
	background-position:50% 0%;
	text-align: center;
	}
	
	h1.contacto{margin:40px 30px 40px 30px;}
	
	h2{
	font-size:24px;
	}
	
	.direccionContainer{
	display: block;
	position: relative;
	float:left;
	overflow:auto;
	border-left:none;
	height: 280px;
	padding:0 0px;
	margin:30px 0px;
	left:0px;
	}
	

	/* ----- CLIENTES -------- */
	ul.logosClientes{
	display: block;
	position: relative;
	width:321px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	overflow: auto;
	}
	
	ul.logosClientes li{
	display: block;
	position: relative;
	width:320px;
	margin: 0;
	padding: 0;
	float:left;
	border-right:none;
	border-bottom:1px solid #ccc;
	background: none;
	}
	
	ul.logosClientes li:nth-child(odd), ul.logosClientes li:nth-child(even){
	border-right:none;
	border-bottom:1px solid #ccc;
	}
	
	ul.logosClientes li:last-child{
	border-right:none;
	border-bottom:none;
	}
	
	/* MENU CONTACTO XS */
	
	.logo{
	display: block;
	position: relative;
	width:426px;
	margin: 8px auto;
	float:none;	
	clear:both;
	}
	
	.contactContainer{
	display:block;
	position: relative;
	float:none;
	width:100%;
	overflow: auto;
	}
	
	ul.contactMenu{
	display: block;
	position: relative;
	list-style: none;
	padding: 0px;
	margin:10px 0;
	height:21px;
	width:auto;
	float:none;
	clear:both;
	text-align: center;
	}
	
	ul.contactMenu li{
	display: inline-block;
	position: relative;
	float:none;
	width:21px;
	height:21px;
	margin:0 0;
	padding:0;
	background: none;
	}

	.mapaEmergente{
	top:50px;
	} 
}
/* SM */
@media (min-width: 768px) and (max-width: 991px) {

	.container{width:auto; max-width:991px;}

	.content img.img-nosotros{top:0px;}

	
	.loginFormContainer{
	float:left;
	}

	/* ----- CLIENTES -------- */
	ul.logosClientes{
	display: block;
	position: relative;
	width:642px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	overflow: auto;
	}
	
	ul.logosClientes li{
	display: block;
	position: relative;
	width:320px;
	margin: 0;
	padding: 0;
	float:left;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	background: none;
	}
	ul.logosClientes li:nth-child(even){
	border-right:none;
	border-bottom:1px solid #ccc;
	}
	
	ul.logosClientes li:nth-child(odd){
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	}
	
	ul.logosClientes li:last-child{
	border-right:1px solid #ccc;
	border-bottom:none;
	}


	/* MENU CONTACTO SM */
	
	.logo{
	display: block;
	position: relative;
	width:426px;
	margin: 8px auto;
	float:none;	
	clear:both;
	}
	
	.contactContainer{
	display:block;
	position: relative;
	float:none;
	width:100%;
	overflow: auto;
	}
	
	ul.contactMenu{
	display: block;
	position: relative;
	list-style: none;
	padding: 0px;
	margin:10px 0;
	height:21px;
	width:auto;
	float:none;
	clear:both;
	text-align: center;
	}
	
	ul.contactMenu li{
	display: inline-block;
	position: relative;
	float:none;
	width:21px;
	height:21px;
	margin:0 0;
	padding:0 0;
	background: none;
	}


	/* LOGIN FORM SM */
	
	.loginFormContainer{
	display: block;
	position: relative;
	width:441px;
	height: 30px;
	background: none;
	padding:0px 0px 0px 10px;
	float:none;
	margin:0px auto;
	}
	
	.loginFormContainer h4{
	color: #ffc441;
	font-family: Times;
	font-size: 14px;
	text-align: center;
	}
	
	ul.loginForm{
	display: block;
	position: relative;
	float:left;
	list-style: none;
	margin:0px;
	padding:0px;
	}
	
	ul.loginForm li{
	display: block;
	position: relative;
	float:left;
	width:auto;
	margin:0px 0px 5px 0px; 
	background:none;
	}
	
	.loginForm label{
	display: block;
	position: relative;
	width: 43px;
	margin:0px 11px 0px 11px;
	float: left;
	font-family: Helvetica;
	font-weight: lighter;
	font-size: 10px;
	color:#333333;
	}




} 
/* MD */
@media (min-width: 992px) and (max-width: 1199px) {}
 
/* LG */
@media (min-width: 1200px){} 

ul.nav a img{
display:inline-block;
position:relative;
top:-1px;

}

ul.nav a span.texto{
color:#4f4f4f;

}
	