/* reseteo universal */
*{
	border: 0;
	margin: 0;
	padding: 0;
}

article, figcaption, figure, footer, header, hgroup, nav, section{
	display:block;
}

/* estilos de texto */
@font-face {
    font-family: 'orbitron';
    src: url('../fonts/orbitron/orbitron.eot');
    src: url('../fonts/orbitron/orbitron.eot?#iefix') format('embedded-opentype'),
         url('../fonts/orbitron/orbitron.woff') format('woff'),
         url('../fonts/orbitron/orbitron.ttf') format('truetype'),
         url('../fonts/orbitron/orbitron.svg#orbitron') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'karnivore';
    src: url('../fonts/karnivore/karnivore.eot');
    src: url('../fonts/karnivore/angelina.eot?#iefix') format('embedded-opentype'),
         url('../fonts/karnivore/karnivore.woff') format('woff'),
         url('../fonts/karnivore/karnivore.ttf') format('truetype'),
         url('../fonts/karnivore/karnivore.svg#karnivore') format('svg');
    font-weight: normal;
    font-style: normal;
}

@-webkit-keyframes greenPulse {
from { background-color: #0989f6; -webkit-box-shadow: 0 0 9px #2c3d63; }

to { background-color: #0989f6; -webkit-box-shadow: 0 0 9px #2c3d63; }
}


body {
	
	background-color: #2c3d63;
	margin: auto;
	font-size: 0.9em;
	text: center;
	width: 1300px;
}
a{
	color: #57ABB8;
	
}

a:hover{
	color: #000000;
}
*/
li a{
	text-align: right;
}

img {
	max-width: 100%;
	
}

section#contenido{
	background: #ffffff url(../img/fondo2.png);
	margin: 0 auto;
	max-width: 80%;
	text-align: center;
}

h1{
	font-family:"Agency FB";
	font-size: 4.5em;
	text-align:left;
	vertical-align:top;
}

h2 {
	color: #2c3d63;
	font-family:"Agency FB";
	position: absolute;
	top: 80px;
	text-align:left;
	width: 100%;
}

h3{
	font-family:"Agency FB";
	font-size: 1.7em;
	text-align:center;
	
}

h4 {
	color: #2c3d63;
	font-family:"Agency FB";
	top: 80px;
	text-align:left;
	width: 100%;
}

h5{
	font-family: "Agency FB";
	font-size: 1.9em;
}
h6{
	font-family: "Agency FB";
	font-size: 1em;
}


header{
	background: #2c3d63 url(../img/fondo1.png);
	margin: 0 auto;
	max-width: 80%;
	text-align: left;
	
}

header ul{
	margin-left:60px;
	margin-top: 60px;
	text-align: center;
}

header h1, nav{
	display: inline-block;
	max-width: 180%;
	vertical-align:middle;
}

nav li {
	display:inline-block;
	
	padding: 0.8em;
	vertical-align:middle;
}

nav a{
	
	
	border-radius: 0.25em;
	color: #ffffff;
	display:block;
	font-family: "orbitron", Helvetica, Verdana;
	font-size. 2em;
	padding: 0.2em;
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	
}

nav a:hover {
	
	color: #0989f6;
	border-radius: 0 0.5em 0 0.5em;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	
}

.btn span {	
  	display: inline-block;
  	padding: 2px  4px;
  	background: #3194c6;
  	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
  	text-align: center;
  	-webkit-animation-name: greenPulse;
  	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
}

.image {

position: relative;
width: 100%; /* for IE 6 */

}
p{
	font-family:"Agency FB";
	font-size: 1.3em;
	text-align:justify
	vertical-align:top;
}





/* inicio */


section#servicio-tipos a{
	color:#ffffff;
	text-align: center;
}

section#principal, section#servicio-tipos, section#servicio-tipos1{
	
	border-radius: 1em;
	padding: 0.5em;
	vertical-align: top;
	width: 98%;
	
}

section#principal p{
	
	color: #F90;
	text-align: justify;
	
}


article#servicios-tipos, article#PROYECTOS,article#SERVICIOS, article#CLIENTES{
	
	background: #0989f6;
	font-family:"Agency FB";
	color: #ffffff;
	padding: .7em;
	text-align: justify;
	width: 55%;
}

article#SERVICIOS, article#PROYECTOS, article#CLIENTES{
	display: inline-block;
	width: 30%;
	vertical-align: top;
}


article#PROYECTOS1,article#SERVICIOS1, article#CLIENTES1{
	
	border-radius: 0.5em;
	padding: .7em;
	text-align: justify;
	width: 15%;
}

article#SERVICIOS1, article#PROYECTOS1, article#CLIENTES1{
	display: inline-block;
	width: 30%;
	vertical-align: top;
}


/* sobre nosotros */

section#sobre-nosotros {
	background: #ffffff;
	
	display:inline-block;
	margin: 0 auto;
	max-width:100%;
	padding: 0.25em;
	text-align: justify;
	vertical-align: top;
	width: 90%;
}

article#nosotros p{
	font-size: 1.7em;
}
article#nosotros h1{
	color:#2c3d63;
}

article#mision{
	background: #6ba9cc;
	
	display:inline-block;
	margin-right: 4em;
	text-align:justify;
	vertical-align:middle;
	width: 46%;
	
}

article#mision h1{
	color: #2c3d63;
	font-size: 3.1em;
	text-align:center;
	vertical-align:middle;
	padding:43px;
}

article#vision{
	background: #6ba9cc;
	display:inline-block;
	text-align:justify;
	vertical-align:middle;
	width: 47%;
	
}

article#vision h1{
	color: #2c3d63;
	font-size: 3.1em;
	text-align:center;
	vertical-align:middle;
	padding:43px
}

article#mision-text{
	color: #000000;
	display:inline-block;
	margin-right: 4em;
	text-align:justify;
	vertical-align:middle;
	width: 46%;
	
}

article#mision-text h1{
	
	text-align:center;
	vertical-align:middle;
	padding:43px
}

article#vision-text{
	color: #000000;
	display:inline-block;
	vertical-align:middle;
	width: 45%;
	
}

article#vision-text h1{
	color: #000000;
	font-size: 2em;
	text-align:center;
	vertical-align:middle;
	
}

article#historia{
	background: #6ba9cc;
	display:inline-block;
	margin-right: 2em;
	text-align:justify;
	vertical-align:inherit;
	width: 46%;
	
}
div#historia h1{
	color: #2c3d63;
	font-size: 2.5em;
	text-align:center;
	vertical-align:middle;
	padding:43px
}

article#historia div{
	
	background: #ffffff;
	color: #000000;	
}

article#historia h1{
	color: #2c3d63;
	font-size: 3.1em;
	text-align:center;
	vertical-align:middle;
	padding:43px
}

article#historia-text{
	color: #000000;
	display:inline-block;
	vertical-align:middle;
	width: 50%;
	
}

article#historia-text h1{
	
	text-align:center;
	vertical-align:middle;
	padding:43px
}


article#cumplimiento h1 {
	background: #ffffff;
	color: #000000;
	display:inline-block;
	font-size: 2em;
	margin: 0 auto;
	max-width:100%;
	
	text-align: justify;
	vertical-align: top;
	width: 90%;
}

article#cumplimiento h5{
	font-size:1.5em;
	background: #6ba9cc;
	padding: 0.9em;
}



/* servicios */
article#servicio h1{
	color: #2c3d63;
}
article#servicio p{
	font-size: 1.7em;
	color:#000000;
}

article#img9, article#img10, article#img11{
	display: inline-block;
	
	padding: .9em;
	width: 30%;
	vertical-align: top;
}

article#servicios,  article#exito,article#soluciones, article#estrategia{
	
	border-radius: 0.5em;
	padding: .9em;
	text-align: justify;
	width: 15%;
}

article#exito,article#soluciones, article#estrategia{
	color: #000000;
	font-size: 1em;
	display: inline-block;
	width: 30%;
	vertical-align: top;
}




section#disenamos h4{
	font-size: 1.5em;
	max-width: 100%;
}

article#construccion {
	background: #0989f6;
	color: #ffffff;
	display: inline-block;
	margin: 1em 0;
	margin-right: 2em;
	padding: 2.5em;
	vertical-align: top;
	width: 40%;
}

#img-disenamos{
	
	display: inline-block;
	margin: 1em 0;
	vertical-align: top;
	
}



/* proyectos*/

section#sobre-proyect {
	background: #ffffff;
	color: #000000;
	display:inline-block;
	margin: 0 auto;
	max-width:100%;
	padding: 0.25em;
	text-align: justify;
	vertical-align: top;
	width: 90%;
}

article#proyecto h1{
	color: #2c3d63;
}
article#proyecto p{
	font-size: 1.7em;
	color:#000000;
}
article#img1, article#img2, article#img3,article#img4, article#img5, article#img6,article#img7, article#img8, article#img9{
	display: inline-block;
	
	padding: .9em;
	width: 30%;
	vertical-align: top;
}

article#urbanas,article#urbanas2,article#urbanas4,article#urbanas6,article#urbanas8,article#urbanas10,article#urbanas12{
	background: #6ba9cc;
	
	display:inline-block;
	margin-right: 5em;
	text-align:justify;
	vertical-align:middle;
	
	width: 100%;
	
}

article#urbanas h1{
	color: #0e0e25;
	font-size: 6.5em;
	text-align:center;
	vertical-align:middle;
	padding:43px
	
}


article#referencia-left {
	background: #0989f6;
	width: 15%;
	color: #ffffff;
	text-align: center;
	float:center;
	display: inline-block;
border-radius: .5em;	
	vertical-align: top;
	
}
article#referencia-left a{
	
	
	color: #ffffff;

}




/* clientes*/

section#sobre-clientes {
	background: #ffffff;
	color: #2c3d63;
	display:inline-block;
	margin: 0 auto;
	max-width:100%;
	padding: 0.25em;
	text-align: justify;
	vertical-align: top;
	width: 90%;
}
article#servicio p{
	font-size: 1.7em;
	color:#000000;
}

article#img1, article#img2,article#img3,article#img4,article#img5,article#img6,article#img7,article#img8{
	
	text-align:center;
	height: 200px;
	width: 200px;
	
	
	
}
article#img1 img{
	
	 margin-top: 5em;
	 width: 200px;
	 height: 50px;
	 
}
article#img2 img{
	
	 margin-top: 5em;
	 width: 200px;
	 height: 50px;
}
article#img3 img{
	
	 margin-top: 2em;
	width: 150px;
	 height: 150px;
}
article#img4 img{
	
	  margin-top: 2em;
	 width: 200px;
	 height: 160px;
	
}
article#img5 img{
	
	width: 200px;
	 height: 200px;
	 
}
article#img6 img{
	
	 margin-top: 4em;
}
article#img7 img{
	
	 margin-top: 4em;
}
article#img8 img{
	
	 margin-top: 2em;
}



/* contacto*/

section#contacto {

	text-align:justify;
	padding: 3em;


	
}
article#contacto1{
	
	border-radius:.5em;
	display:inline-block;
	
	color: #ffffff;
	width: 45%;
	
}


article#contacto1 p{
	color:#2c3d63;
	font-family:"Agency FB";
	font-size:1.5em;
	
}


article#servicio p{
	font-size: 1.7em;
	color:#000000;
}

article#formulario{
	padding: 1em;
	
	display:inline-block;
	vertical-align:middle;
	width: 45%;
	
}

/* formulario*/

.contact_form label {
	
    color: #2c3d63;
    display:block;
    float: left;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-top: 3px;
    padding: 3px;
    vertical-align:middle;
    width: 70px;
}

.contact_form input {
    height:15px; 
    width:180px; 
    padding:5px 8px;
}
.contact_form textarea {
    padding:8px; 
    width:180px;
}
.contact_form button {
    margin-left:90px;
}

/*----- estilos visuales de los elementos --------*/
.contact_form input, .contact_form textarea { 
	
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    color: #888;
    font-size: 12px;
    padding-right:80px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:80px;
}

/* === Estilos de Validacion === */
 
.contact_form input:required:valid, .contact_form textarea:required:valid {
	
    box-shadow: 0 0 5px #57ABB8;
    border-color: #57ABB8;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
    box-shadow: 0 0 5px #57ABB8;
    border-color: #57ABB8;
}

textarea{
	resize: none;
}
/* === Estilos del boton de Envio === */
button.submit {
    padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #2c3d63;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#2c3d63));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
button.submit:hover {
    opacity:.55;
    cursor: pointer; 
    color: #2c3d63;
}
button.submit:active {
    border: 1px solid #222;
    box-shadow: 0 0 10px 5px #444 inset; 
}

/* menu de abajo */

section#menu-abajo{
	background:#0989f6;
	font-size: 1em;
	
	text-align:center;
	
	

}

section#menu-abajo a{
	color: #ffffff;
font-family:"Arial Narrow";

	text-decoration: none;
	
}
/* footer*/

footer{
	color:#ffffff;
	background: #2c3d63 ;
	margin: 0 auto;
	max-width: 80%;
	text-align: center;
	font-size: 1em;
	padding: 1em;
}

/* sombreado imagen */

.fade{
	opacity: 1;
	filter: alpha(opacity=10);
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}

.fade:hover{
	opacity: 0.7;
	filter: alpha(opacity=7);
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}