/** ********************************************************************************************** **/
/**  Descripción: Hoja de estilo para la página "contacto".                                        **/
/** ---------------------------------------------------------------------------------------------- **/
/**  Fecha de creación: 4 de marzo de 2016                                                         **/
/** ********************************************************************************************** **/

.contact_direccion {
	font-size: 18px;
}
.contact_form_wrapper {
	max-width: 450px;
	margin: 0 auto;     /* Para centrar los input */
	text-align: center; /* Para centrar el Boton */
}
.contact_form_wrapper .input_wrapper, .contact_form_wrapper .textarea_wrapper  {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 16px 0;	
	max-width: 450px;
	width: 100%;
	vertical-align: top;
	float: right;
}
.contact_form_wrapper .input_wrapper:first-child, 
.contact_form_wrapper .textarea_wrapper:first-child  {
	margin-top: 10px
}
.contact_form_wrapper input, .contact_form_wrapper textarea {
	position: relative;
	display: block;
	float: right;
	width: 100%;
	border: none;
	padding: 0px 6px;
	z-index: 5;
	background: transparent;
	color: #444;
	resize: none;
	font-family: JosefinSans-Regular;
	font-size: 20px;
	line-height: 30px; 
	vertical-align: middle;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.3s, color 0.3s;
	-moz-transition: -moz-transform 0.3s, color 0.3s;
	-o-transition: -o-transform 0.3s, color 0.3s;
	-ms-transition: -ms-transform 0.3s, color 0.3s;		
	transition: transform 0.3s, color 0.3s;
}
.contact_form_wrapper input:focus, .contact_form_wrapper textarea:focus {
	outline: none;
}
.contact_form_wrapper label {
	position: absolute;
	top: 0px;
	display: inline-block;
	float: right;
	margin: 0px;
	padding: 0px;
	width: 100%;
	color: #fff;
	text-align: left;
	font-family: JosefinSans-Regular;
	font-weight: normal;
	font-size: 20px;
	pointer-events: none;
}
.contact_form_wrapper label::after {
	content: '';
	position: absolute;
	top: -10px;
	width: 100%;
	height: 50px;
	background: #A00000;
	left: 0;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
	-moz-transition: -moz-transform 0.3s, background-color 0.3s;
	-o-transition: -o-transform 0.3s, background-color 0.3s;
	-ms-transition: -ms-transform 0.3s, background-color 0.3s;
	transition: transform 0.3s, background-color 0.3s;
}
.contact_form_wrapper textarea + label::after {
	height: 110px;
}
.contact_form_wrapper .background-color1_label label::after { background-color: #750600; }
.contact_form_wrapper .background-color2_label label::after { background-color: #D70B00; }
.contact_form_wrapper .background-color3_label label::after { background-color: #880700; }
.contact_form_wrapper .background-color4_label label::after { background-color: #AF0900; }
.contact_form_wrapper .background-color5_label label::after { background-color: #C30A00; }
.contact_form_wrapper .background-color6_label label::after { background-color: #9C0800; }
.contact_form_wrapper .label-content {
	position: relative;
	display: block;
	width: 100%;
	line-height: 30px;
	vertical-align: middle;
	padding: 0px 6px;
	z-index: 10;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.3s, color 0.3s;
	-moz-transition: -moz-transform 0.3s, color 0.3s;
	-o-transition: -o-transform 0.3s, color 0.3s;
	-ms-transition: -ms-transform 0.3s, color 0.3s;
	transition: transform 0.3s, color 0.3s;
}
.contact_form_wrapper input:focus,
.contact_form_wrapper textarea:focus,
.contact_form_wrapper .filled input,
.contact_form_wrapper .filled textarea {
	background: #ddd;
	resize: vertical;
	-webkit-transform: translate3d(0, 10px, 0);
	-moz-transform: translate3d(0, 10px, 0);
	-o-transform: translate3d(0, 10px, 0);
	-ms-transform: translate3d(0, 10px, 0);
	transform: translate3d(0, 10px, 0);
}
.contact_form_wrapper .filled input.error {
	background: #FFE7E7;
	color: #FF6565;
}
.contact_form_wrapper input:focus + label::after,
.contact_form_wrapper .filled input + label::after {
	background: #A00000;
	-webkit-transform: translate3d(0, -32px, 0) scale3d(1, 0.06, 1);
	-moz-transform: translate3d(0, -32px, 0) scale3d(1, 0.06, 1);
	-o-transform: translate3d(0, -32px, 0) scale3d(1, 0.06, 1);
	-ms-transform: translate3d(0, -32px, 0) scale3d(1, 0.06, 1);
	transform: translate3d(0, -32px, 0) scale3d(1, 0.06, 1);
}
.contact_form_wrapper textarea:focus + label::after,
.contact_form_wrapper .filled textarea + label::after {
	background: #A00000;
	-webkit-transform: translate3d(0, -92px, 0) scale3d(1, 0.027, 1);
	-moz-transform: translate3d(0, -92px, 0) scale3d(1, 0.027, 1);
	-o-transform: translate3d(0, -92px, 0) scale3d(1, 0.027, 1);
	-ms-transform: translate3d(0, -92px, 0) scale3d(1, 0.027, 1);
	transform: translate3d(0, -92px, 0) scale3d(1, 0.027, 1);
}
.contact_form_wrapper input:focus + label .label-content,
.contact_form_wrapper textarea:focus + label .label-content,
.contact_form_wrapper .filled label .label-content {
	color: #A00000;
	-webkit-transform: translate3d(2px, -13px, 0) scale3d(0.655, 0.655, 1); 
	-moz-transform: translate3d(2px, -13px, 0) scale3d(0.655, 0.655, 1); 
	-o-transform: translate3d(2px, -13px, 0) scale3d(0.655, 0.655, 1); 
	-ms-transform: translate3d(2px, -13px, 0) scale3d(0.655, 0.655, 1); 
	transform: translate3d(2px, -13px, 0) scale3d(0.655, 0.655, 1);
}
/** ============================================================================================== **/



/** ============================================================================================== **/
/** ======================================= Boton "Enviar" ======================================= **/
/** ============================================================================================== **/

.contact_form_wrapper .progress-button {
	position: relative;
	display: inline-block;
	text-align: center;
	width: 45%;
	min-width: 250px;
	margin: 12px;
}
.contact_form_wrapper .progress-button button {
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 250px;
	height: 70px;
	border: 2px solid #A00000;
	border-radius: 40px;
	background: transparent;
	color: #A00000;
	letter-spacing: 1px;
	font-size: 24px;
	font-family: JosefinSans-Regular;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	-moz-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	-o-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	-ms-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}
.contact_form_wrapper .progress-button button:hover {
	background-color: #A00000;
	color: #fff;
}
.contact_form_wrapper .progress-button button:focus {
	outline: none;
}
/* Transición para que el texto del botón vuelva al estado inicial ================================ */
.contact_form_wrapper .progress-button button span {
	-webkit-transition: opacity 0.3s 0.1s;
	-moz-transition: opacity 0.3s 0.1s;
	-o-transition: opacity 0.3s 0.1s;
	-ms-transition: opacity 0.3s 0.1s;
	transition: opacity 0.3s 0.1s;
}
/* Estilo del "svg" utilizado para hacer el efecto de convertir el botón en un círculo ============ */
.contact_form_wrapper .progress-button svg {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
}
.contact_form_wrapper .progress-button svg path {
	opacity: 0;
	fill: none;
}
.contact_form_wrapper .progress-button svg.progress-circle path {
	stroke: #A00000;
	stroke-width: 5;
}
.contact_form_wrapper .progress-button svg.checkmark path,
.contact_form_wrapper .progress-button svg.cross path {
	stroke: #fff;
	stroke-linecap: round;
	stroke-width: 4;
	-webkit-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	transition: opacity 0.1s;
}
/* Efectos de "carga", "exito" y "error" ========================================================== */
.contact_form_wrapper .loading.progress-button button {
	width: 70px;
	border-width: 5px;
	border-color: #ddd;
	background-color: transparent;
	color: #fff;
}
.contact_form_wrapper .loading.progress-button span {
	-webkit-transition: opacity 0.15s;
	-moz-transition: opacity 0.15s;
	-o-transition: opacity 0.15s;
	-ms-transition: opacity 0.15s;
	transition: opacity 0.15s;
}
/* El texto del botón esta oculto en los tres estados: "carga", "exito" y "error" ================= */
.contact_form_wrapper .loading.progress-button span,
.contact_form_wrapper .success.progress-button span,
.contact_form_wrapper .error.progress-button span {
	opacity: 0;
}
.contact_form_wrapper .success.progress-button button,
.contact_form_wrapper .error.progress-button button {
	-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
	-moz-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
	-o-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
	-ms-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
	transition: background-color 0.3s, width 0.3s, border-width 0.3s;
}
/* Color del botón cuando el correo se envia CORRECTAMENTE ======================================== */
.contact_form_wrapper .success.progress-button button {
	border-color: #718e3f;
	background-color: #718e3f;
}
/* Color del botón cuando hay un ERROR en el envio del correo ===================================== */
.contact_form_wrapper .error.progress-button button {
	border-color: #fb797e;
	background-color: #fb797e;
}
.contact_form_wrapper .loading.progress-button svg.progress-circle path,
.contact_form_wrapper .success.progress-button svg.checkmark path,
.contact_form_wrapper .error.progress-button svg.cross path {
	opacity: 1;
	-webkit-transition: stroke-dashoffset 0.3s;
	-moz-transition: stroke-dashoffset 0.3s;
	-o-transition: stroke-dashoffset 0.3s;
	-ms-transition: stroke-dashoffset 0.3s;
	transition: stroke-dashoffset 0.3s;
}
/* Efecto elastico para el ancho del botón ======================================================== */
.contact_form_wrapper .elastic.progress-button button {
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
	-moz-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
	-o-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
	-ms-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
}
.contact_form_wrapper .loading.elastic.progress-button button {
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
	-moz-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
	-o-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
	-ms-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
}
/** ============================================================================================== **/