/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
field set, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, fig caption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {

font-family:Verdana,Helvetica,Arial, Geneva, sans-serif;
color:#666;
}
#sombra{
background:url(../img/sombra.png)repeat; 
width:100%;
height:103px;
position:absolute;
z-index:3;
top:103px;

}

.header{
width:1022px;
height:103px;
background-color:#000000;
margin:0 auto;
z-index:2;



}

#contiene_todo
{
width:700px;
 margin-left:auto;
 margin-right:auto;
 
background:#FFFFFF; 
/*  background:black; */
 /* border:1px solid #a6a6a6;*/
 text-align:left;


margin-top:5px;
position:absolute;z-index:2;
}
/*  aquí comienza la parte del menú  */

#nav{ 
width:400px;
float:right;
margin:-30px 0 0;
}

#nav ul{ 
padding:0px 0 0 0px; /* este padding define la separación de TODA la lista de la div menu  */

}

/* aquí definimos los elementos <li> */

#nav li{
float:left; /* IMPORTANTE, este float, hace que la lista del menú se muestre en horizontal */
/* IMPORTANTE margen entre los botones o elementos del menú */
font-size:11px;

list-style:none;
text-decoration:none;	
background:url(../img/menu.png) no-repeat; 
padding:10px;

}

/* aquí definimos la etiqueta <a> que está dentro de <li> o los enlaces de nuestro menú, por ejemplo, aquí defino que color tendrán mis elementos del menú. Obviamente es una muestra*/

#nav li a{
     color:#FFF;
     text-decoration:none;	
	 list-style:none;
}

/*  comportamiento que tendrán los enlaces al pasar el puntero por encima (hover), en mi caso, solo cambio el color del texto */

#nav li:hover{
   
text-decoration:none;	
list-style:none;
background:url(../img/estado_encima.png)no-repeat;
 padding:10px;
	 
}

#content{
	width:1020px;
	margin:0 auto;
	height:518px;
	position:relative;
	background: url(../img/c2.png)no-repeat center center;
	z-index:1;
	
	}

#content h2{
width:900px;
margin:0 auto;
font-size:16px;
text-align:center;
 }
#content1{
	width:1020px;
	margin:0 auto;
	height:775px;
	background: url(../img/c2.png)no-repeat center center;
	
	}
#content4{
	width:1020px;
	margin:0 auto;
	height:2178px;
	background: url(../img/c4.png)no-repeat center center;
	
	}
h1{ 
 
    font-size:46px;
	color:#333;
    margin:0px 0px 0px 55px;
	padding:30px 0px 0px 0px;
	font-family: 'Asap', sans-serif;
	}
h2{ 
    margin:0px 0px 0px 55px;
    font-size:16px;
	color:#6d6e71;
	
	
  	}
	
	<!--slideer-->
.container {
    position: absolute; 
    top: 50%; 
    left: 50%;
    margin: -300px 0 0 -470px;
}
    
.contents { 
     background: url(../img/paginas.png); 
}
	 
.contents h1 {
	font-size: 40px; 
	text-transform: uppercase; 
	font-weight: bold; 
	text-align: center;
	margin-top: 180px;
	color: #222;
	line-height: 50px;  
}
.contents h3 {
	text-align: center; 
	font-size: 22px; 
	color: #222; 
}
    





/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider-wrapper {
 
 
    height:392px;
    margin:0 auto;
    padding-top:0px;
    margin:0 auto;
	text-align:center;
}


#slider a {
	border:0;
	display:block;
}

.nivo-controlNav {
	position:absolute;
	left:260px;
	bottom:-42px;
}
.nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(../img/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:0 -22px;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(../img/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}
	
/*about*/

.parrafo1{
	width:430px;
/*	height:245px;*/
	float:left;
	margin:20px 0px 0px 55px;
	font-size:12px;
	color:#545454;
	
}	
.parrafo1 p{

	font-size:12px;
	color:#545454;

}
.parrafo1about{
	width:430px;
	/*height:245px;*/
	float:left;
	margin:20px 0px 0px 0px;
	font-size:14px;
	color:#000000;
}
.parrafo3{
	width:430px;
	/*height:245px;*/
	float:left;
	margin:15px 0px 0px 0px;

}

p{

    font-size:14px;
	color:#333;
	text-align:justify;
}
#imagengrupo{
   float:left;
   height:300px;
   width:574;
   margin:-10px 0px 0px 110px;
	}
	
#conttextoverde{
   /* float:left;*/
    width:442px;
   /* height:400px;*/

}
.textoverde{
    float:left;
    width:205px;
    height:38px;
    background:#7bc142;
	margin:40px 0px 0px 55px;

}

.contextoverde2{
    float:right;
/*    width:205px;*/
    height:38px;
	margin:-130px 0px 0px 0px;

}

.textoverde2{
    width:205px;
    height:38px;
    background:#7bc142;

}
.textoverdel{
    float:left;
    width:350px;
    height:38px;
    background:#7bc142;
	margin:0px 0px 0px 55px;
		}

h4{
	
	text-align:left;
	font-size:13px;
	color:#FFF;
	padding:10px 0px 0px 10px;
	}

h3{
	
	text-align:left;
	font-size:24px;
	color:#FFF;
	padding:5px 0px 0px 10px;
	}
	
/*about*/
/*que hacemos*/
#retro{
	
	
	margin:0px 0px 0px 300px;
	

}
.textoq{
    float:left;
    width:350px;
    height:38px;
	padding: 0px 0px 0px 55px;
		}
.textoq h2{
    float:left;
  	margin:0px 0px 0px 0px;
	font-size:24px;
		}
.textoq h3{
    
  	margin:0px 0px 0px 0px;
	font-size:18px;
	color:#333;
    border-bottom:1px solid #999;
 }
.nosdedicamos1{
	width:271px;
	height:372px;
	float:left;
	margin:20px 0px 0px 0px;
}

.nosdedicamos2{
	width:271px;
	height:372px;
	float:left;
	margin:-19px 0px 0px 319px;
}
.nosdedicamos3{
	width:271px;
	height:372px;
	float:left;
	margin:-57px 0px 0px 635px;
}
/*que hacemos*/

.implementacion{
	width:590px;
	/*height:372px;*/
	float:left;
	margin:140px 0px 0px 55px;
	
}

.implementacion h2{
  	margin:0px 0px 0px 0px;
		}
.implementacion h3{
    float:left;
  	margin:0px 0px 0px 0px;
	font-size:16px;
	color:#333;
	border-bottom:1px solid #999;
 }
.implementacion p{
   	width:590px;
	/* height:372px;*/
	float:left;
	margin:10px 0px 0px 0px;

	
 }
 
 .implementacion1{
	width:590px;
	/*height:372px;*/
	float:left;
	margin:50px 0px 0px 55px;
	
}
.implementacion1 h2{
	margin:0px 0px 0px 0px;
	font-size:20px;
	
}
.implementacion1 p{
width:590px;
/*height:372px;*/
float:left;
margin:10px 0px 0px 0px;

}
.clientes{
width:690px;
height:60px;
background:#FFF;
box-shadow: 0 0 10px #CCC;
border-radius: 10px;
float:left;
margin:50px 0px 0px 0px;
	
}
.clientes img{
float:left;
padding:10px 0px 0px 5px; /*  es para separa los logos de los cleintes  */
	
}
.exalumnos1{
	width:230px;
	width:270px;
	float:left;
	margin:-240px 0px 0px 640px;
}
/*  contactanos  */

.parrafocontactenos{
	width:430px;
	height:100px;
	float:left;
	margin:20px 0px 0px 55px;

}
.textoverdecontactenos{
    float:left;
    width:350px;
    height:38px;
    background:#7bc142;
	margin:20px 0px 0px 0px;
		}

.imagengrupo{
	float:left;
    margin:20px 0px 0px 120px;
	
}



div.formBox {
	height:auto;
    width:400px;
	padding:0px 0px;
	color:#333;
	margin:-200px 0px 0px 55px;
}

form#contactForm label {
	font-size:14px;
	
}
form#contactForm input, form#contactForm textarea {
	width:80%;
	border:1px solid #999; 
	padding:3px; /*  texto blnaco y tamaño */
	color:#333;
	font-size:14px;
	margin:10px 0px 0px 0px;
}
div.infoContact {
	width:45%;
}


/* ### form validation ### */
form#contactForm label.error { float:left; color: red; padding-left: .5em; vertical-align: top; font-size:.8em; }
form#contactForm input.error, form#contactForm textarea.error { color:red; border-color:red; background:#FFC; }


/* gral eles */
.fLeft { 
      float:left; 
}

.fRight {
	  float:right;
}

/*enviarboton*/
a.btn {
	display:block;
	background:#333;
	color:white;
	padding:5px 20px;
	text-align:center;
	text-decoration:none;
	font-size:14px;
	
}
a.btn:hover {
	background: #7bc142; /*enviarboton, cambiar al presionar*/
}
div.clear {
	clear:both;
	height:100px;
}
.hide {
	display:none;
}
/*enviar*/


/*footer*/

footer{
	width:1020px;
    height:200px;
	margin:0 auto;

}
.buscatrabajo{

font-size:12px;

}

.buscatrabajo h3{
	margin:-140px 0px 0px 250px;
	font-size:12px;
	color:#ffffff;
text-align:left; 
	width:300px;
	
}
.buscatrabajo p{
	margin:10px 0px 0px 250px;
	font-size:12px;
	color:#717171;
     text-align:left; 
	width:300px;
	
}
.buscatrabajo img{
	margin:-5px 0px 0px 40px;
	
}

/*ubicacion*/
.ubicacion_contacto{
font-size:12px;
height:100px;

}

.ubicacion_contacto h3{
	margin:-95px 0px 0px 580px;
	font-size:12px;
	color:#ffffff;
text-align:left; 
	width:300px;

}
.ubicacion_contacto p{
	margin:10px 0px 0px 580px;
	font-size:12px;
	color:#717171;
     text-align:left; 
	width:300px;

}

/**ubicacion*/
.mapa_contacto{
 width:250px;
 height:168px;
 margin:-105px 0px 0px 740px;
 
}

/*slider*/

.boton_slider{
cursor:pointer;
}