/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	background:#b12613;
}
.container{
	background:#fff;
}
.fondo-blanco-header{
	background:#fff;
}
.sixteen.columns{
	height:220px;
	text-align:center;
	padding-top:60px;
}
.sixteen.columns:before {
	box-shadow: -20px 0 30px -30px #000 inset;
	content: " ";
	height: 100%;
	left: -20px;
	position: absolute;
	top: 0;
	width: 20px;
}
.sixteen.columns:after {
	box-shadow: 20px 0 30px -30px #000 inset;
	content: " ";
	height: 100%;
	right: -20px;
	position: absolute;
	top: 0;
	width: 20px;
}
.fondo-blanco{
	background-color:#fff;
	padding-top:70px;
	border-top:14px solid #b12613;
	height: 720px;
}
.fondo-blanco figure img{
	width:100%;
}
.fondo-blanco:before {
	box-shadow: -20px 0 30px -30px #000 inset;
	content: " ";
	height: 100%;
	left: -20px;
	position: absolute;
	top: 0;
	width: 20px;
}
.fondo-blanco:after {
	box-shadow: 20px 0 30px -30px #000 inset;
	content: " ";
	height: 100%;
	right: -20px;
	position: absolute;
	top: 0;
	width: 20px;
}
.seven.columns{
	padding-left:60px;
	padding-right:60px;
}
.fondo-rojo{
	background: url(../images/bg-grande.jpg) no-repeat #b12613;
	background-position:center;
}

/* Estilos del formulario */
.formulario_grande{
	width: 460px;
}
form.contacto {
    margin: 0 auto;
    width: 100%;
}
form.contacto fieldset {
    border: none;
}
form.contacto fieldset > div {
    clear: both;
    margin-bottom: 20px;
    overflow: hidden;
}
form.contacto fieldset div label {
    display: block;
    float: left;
    margin-left: 5px;
	margin-bottom:12px;
    width: 100%;
	color: #555555;
	font: 16px 'Quicksand', sans-serif;
	font-weight:bold;
	font-style:italic;
}
form.contacto input[type="text"], form.contacto textarea {
    font: 16px 'Quicksand', sans-serif;
    background: #ededed;
    border: 1px solid #898989;
    color: #666;
    display: block;
    float: left;
    padding: 8px;
    resize: none;
    width: 100%;
	margin-bottom: 0px;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-webkit-border-radius: 4px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-radius: 4px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
}
form.contacto input[type="text"]:focus, form.contacto textarea:focus {
	color: #867964;
	background: #F9F9F9;
	border: 2px solid #867964;
	outline: none;
}
form.contacto .ultimo{
    margin-bottom: 0;
    position: relative
}
form.contacto button {
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:0.1em;
	font-family:'Quicksand', sans-serif;
	cursor:pointer;
	background: #999999;
    color: #FFFFFF;
    float: right;
    height: 30px;
	width:120px;
    padding: 0 10px;
    position: relative;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-webkit-border-radius: 4px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-radius: 4px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

	/* useful if you don't want a bg color from leaking outside the border: */
	background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
	text-shadow:none;
	-webkit-box-shadow: 0px 2px 0px #444444;
	-moz-box-shadow: 0px 2px 0px #444444;
	box-shadow: 0px 2px 0px #444444;
	border:none;
}
form.contacto button:hover{
	background-color: #669933;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* AJAX Gif y mensajes de exito o fracaso */
.hide{
	display: none;
}
.ajaxgif{
	position: absolute;
    right: 150px;
    top: 5px;
}
.msg{
    color: white;
	font-size:16px;
	font-family:'Quicksand', sans-serif;
	font-weight: bold;
    height: 30px;
    line-height: 32px;
    padding: 0 10px;
    position: absolute;
	right: -155px;
	min-width: 121px;
	-webkit-border-radius: 4px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-radius: 4px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

	/* useful if you don't want a bg color from leaking outside the border: */
	background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
}
.msg_ok{
	background-color: #589D05;
	-webkit-box-shadow: 0px 2px 0px #396208;
	-moz-box-shadow: 0px 2px 0px #396208;
	box-shadow: 0px 2px 0px #396208;
}
.msg_error{
	background-color: #c90b0b;
	-webkit-box-shadow: 0px 2px 0px #770707;
	-moz-box-shadow: 0px 2px 0px #770707;
	box-shadow: 0px 2px 0px #770707;
}


/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		.seven.columns {
			padding-right: 20px;
		}
		
		.fondo-blanco {
			height: 696px;
		}
		
		/* Estilos del formulario */
		.formulario_grande{
			width: 352px;
		}
	
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		.sixteen.columns {
			height: 140px;
			padding-top: 30px;
		}
		
		.sixteen.columns figure{
			height:80px;
		}
		
		.sixteen.columns figure img{
			height:100%;	
		}
		
		.seven.columns {
			padding-left: 30px;
			padding-right: 30px;
			padding-bottom: 30px;
		}
		
		.fondo-blanco {
			padding-top: 30px;
		}
		
		.nine.columns {
			padding-left: 30px;
			padding-right: 30px;
		}
		
		/* Estilos del formulario */
		.formulario_grande{
			width: 360px;
		}
	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
		.sixteen.columns {
			height: 128px;
		}
		
		.sixteen.columns figure{
			height:66px;
		}
		
		.seven.columns {
			padding-left: 20px;
			padding-right: 20px;
		}
		
		.fondo-blanco {
			padding-top: 20px;
		}
		
		.nine.columns {
			padding-left: 20px;
			padding-right: 20px;
		}
		
		/* Estilos del formulario */
		.formulario_grande{
			width: 260px;
		}
	
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

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