/*	Reset
--------------------------------------------------------------------*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p,a, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr,iframe {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;
	font: inherit;
	text-decoration:none;
	list-style:none;
	
}

a,a:active,a:hover {outline: none;}
img{max-width:100%}

/*	html5 display rule
--------------------------------------------------------------------*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}


body {
	background: rgb(246,246,246);
	color: rgb(118,126,158);
	margin: 0;
	padding:0;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 300;
	border-top: 5px solid rgb(0,165,80);
}
/*------------------------------------------------------------------*/



/*	Tipografia
--------------------------------------------------------------------*/
h1 { font-size:80px; font-weight: 700; margin:0; }
h2 { font-size:24px; font-weight: 700; margin:0; }
h6 { font-size:16px; font-weight: 900; margin:0; }

p { font-size: 16px; line-height:20px; margin: 0 0 20px 0; }
span { font-weight: 700; }
a { color:rgb(86,172,24); }
a:hover { color: rgb(0,88,167); }
/*------------------------------------------------------------------*/



/* FORMULARIO
--------------------------------------------------------------------*/
.contacto { width: 100%;}
.datos span { font-weight: bold; }
form { width:100%; margin:0; position: relative; }
label {
	display:block; margin-top:10px; letter-spacing:2px;
	color:rgb(70,70,70);
}
input, textarea {
	width:96%;
	height:0;
	border:1px rgb(0,0,0);
	padding:20px 10px;
	margin-top:10px;
	font-size:0.7em;
	color:rgb(118,126,158);
	background: rgb(255,255,255);
}
	input:focus, textarea:focus {
		border:1px rgb(0,0,0);
	}

input[type='text']:focus, textarea:focus{
	outline: none;
	box-shadow:0 0 0 1px rgb(255,255,255);
}
input[type='text'].invalido, textarea.invalido{
	box-shadow:0 0 0 1px rgb(255,255,255);
}

textarea {
	height:127px;
}

/* ---- boton de envio ------ */
button.boton {
	width: 100%;
	font-weight: bold;
	background: rgb(0,165,80);
	color: rgb(255,255,255);
	text-align: center;
	margin: 20px 0 0;
	padding:20px 10px;
	border: 0;
	height:167px;
}
button.boton:hover {
	opacity:.85;
	cursor: pointer; 
}
button.boton:active {
	color: #000;
}
/* ---- mensajes de error ------ */
span.error{
	background: rgb(255,1,1);
	color: rgb(255,255,255);
	margin: 0;
	padding:5px 5%;
	position: relative;
	display: block;
	right:0%;
	text-align: right;
	width: 90%;
	font-size: .9em;
}
.result_fail{
	background: none repeat scroll 0 0 rgb(255,1,1);
	color: white;
	font-weight: normal;
	padding: 10px 20px;
	text-align: center;
}
.result_ok{
	background: none repeat scroll 0 0 rgb(1,211,144);
	color: white;
	font-weight: normal;
	padding: 10px 20px;
	text-align: center;
}
/*------------------------------------------------------------------*/



/* FOOTER
--------------------------------------------------------------------*/
#footer { margin: 40px 0; text-align: center; }
#footer p { font-size: 12px; }

/*------------------------------------------------------------------*/



/* FORMULARIO
--------------------------------------------------------------------*/
.box { float: left; margin-right:1%; }
#root { max-width: 1200px; margin: 5% auto 0; }

#contenedor { width: 100%; }
#logos { width: 50%; }
#productos { width: 50%; }
#formularios { width: 100%; margin: 3% 0 5%; }
#box1 { width: 38%; }
#box2 { width: 48%; }
#box3 { width: 8%; }
#footer { width: 100%; }


/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
	#contenedor { width: 100%; }
	#logos { width: 100%; }
	#productos { width: 100%; }
	#formularios { width: 100%; }
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#footer { width: 100%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
	#contenedor { width: 100%; }
	#logos { width: 100%; }
	#productos { width: 100%; }
	#formularios { width: 100%; }
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#footer { width: 100%; }
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
	#contenedor { width: 100%; }
	#logos { width: 100%; }
	#productos { width: 100%; }
	#formularios { width: 100%; }
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#footer { width: 100%; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
	#contenedor { width: 100%; }
	#logos { width: 100%; }
	#productos { width: 100%; }
	#formularios { width: 100%; }
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#footer { width: 100%; }
}