@charset "UTF-8";
/*@autor: Carlos Roman*/


/*Caja de sombra*/
	div#capaN{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		position: fixed;
		-webkit-opacity: 0.8;
		-mox-opacity: 0.8;
		-ms-opacity: 0.8;
		-o-opacity: 0.8;
		opacity: 0.8;
		z-index: 9999;
		top: 0px; }

	/*Caja de validacion*/
	div.popUpBox{
		width: 100%;
		max-width: 400px; /* width: 500px -100px de padding width */
		height: auto; /* height: 250px -100px de padding height */
		padding: 50px;
		position: fixed;
		/*margin: auto;*/
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #FFFFFF;
		z-index: 99999;
		overflow: auto;
		-webkit-border-radius: 10px !important;
		-moz-border-radius: 10px !important;
		-ms-border-radius: 10px !important;
		-o-border-radius: 10px !important;
		border-radius: 10px !important;
		border-top-left-radius: 10px !important;
		border-top-right-radius: 10px !important;
		border-bottom-right-radius: 10px !important;
		border-bottom-left-radius: 10px !important;
	}

	/*Caja de formulario*/
	.popUpForm{
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.popUpForm, .popUpAnsSi, .popUpAnsNo{ box-shadow: 0px 0px 70px #FFA500; }

		.contenidoPopUpBox{
			overflow-y: scroll;
		}

		form#formServ{
			position: relative;
			overflow-y: scroll;
			padding-top: 10px;
			width: 100%;
		}

		form#formServ > p.titlePop1{ line-height: 18px; }

		ol.listaFormTxt{
			width: 100%;
			list-style: none;
			float: left;
			margin-top: 10px;
			margin-bottom: 0px; }

			ol.listaFormTxt > li{
				height: 55px;
				text-align: right;
				margin-right: 30px;
			}

		.w100{ width: 100% !important; }
		.p0{ padding: 0px !important; }

		ol.listaFormInp{
			width: 73%;
			list-style: none;
			float: left;
			position: absolute;
			top: 55px;
			margin-bottom: 0px;
			line-height: 25px; }

			ol.listaFormInp > li{ height: 55px; }

				ol.listaFormInp > li > input{
					width: 93%;
					padding: 0 5px;
					margin-top: 5px; }

				ol.listaFormInp > li > span{
					float: right;
					position: relative;
					top: 12px;
					right: -5px; }

					/*Después del span*/
					#formServ input + span::before,
					#formServ select + span::before,
					#formServ textarea + span::before{
						position: relative;
						top: -5px;
						left: 0px; }

				/*Validación incorrecta*/
					#formServ input[type=text]:focus:invalid + span::before,
					#formServ input[type=tel]:focus:invalid + span::before,
					#formServ input[type=mail]:focus:invalid + span::before,
					#formServ select:focus:invalid + span::before,
					#formServ textarea:focus:invalid + span::before{
						content: "\f00d";
						font-family: 'FontAwesome';
						color: #FF0000; }
					#formServ input[type=text]:focus:invalid,
					#formServ input[type=tel]:focus:invalid,
					#formServ input[type=mail]:focus:invalid,
					#formServ select:focus:invalid,
					#formServ textarea:focus:invalid,
					.invalido{
						-webkit-box-shadow: 0 0 2px #FF0000 inset !important;
						-moz-box-shadow: 0 0 2px #FF0000 inset !important;
						-ms-box-shadow: 0 0 2px #FF0000 inset !important;
						-o-box-shadow: 0 0 2px #FF0000 inset !important;
						box-shadow: 0 0 2px #FF0000 inset !important; }

				/*Validación correcta*/
					#formServ input[type=text]:valid,
					#formServ input[type=tel]:valid,
					#formServ input[type=mail]:valid,
					#formServ select:valid,
					#formServ textarea:valid{
						-webkit-box-shadow: 0 0 2px #0078E7 inset !important;
						-moz-box-shadow: 0 0 2px #0078E7 inset !important;
						-ms-box-shadow: 0 0 2px #0078E7 inset !important;
						-o-box-shadow: 0 0 2px #0078E7 inset !important;
						box-shadow: 0 0 2px #0078E7 inset !important; }
					#formServ input[type=text]:valid + span::before,
					#formServ input[type=tel]:valid + span::before,
					#formServ input[type=mail]:valid + span::before,
					#formServ select:valid + span::before,
					#formServ textarea:valid + span::before{
						content: "\f00c";
						font-family: 'FontAwesome';
						color: #008000 !important; }

		.buttonPopForm{
			height: 40px !important;
			line-height: 35px !important;
			margin-left: 20%;
			border: 0px; }

		/*Botón para cerrar el PopUp*/
		div.closePopUp{
			width: 36px;
			height: 36px;
			background: url(../img/misc/fancybox_sprite.png);
			float: right;
			margin: -65px -65px 0 0; /* -15px +50px de padding del div.popUpBox */
			cursor: pointer; }

		/*Parrafos del PopUp*/
		p.titlePop1{
			color: #FAAF36;
			text-align: center;
			width: 100%;
		}
		p.titlePop2{
			color: #333333;
			text-align: center;
			width: 100%;
		}
		p.titlePop4{
			color: #777;
			font-family: 'Gotham-Bold';
		}
		p.titlePop1, p.titlePop2, .buttonPop{ font-size: 18px; }
		p.titlePop2, p.titlePop3{ margin-top: 15px; }
		p.titlePop3, p.titlePop4{ font-size: 16px; }
		p.mT20{
			margin-top: 12px;
			margin-bottom: 0px; }
		.buttonPop{
			margin: 10px;
			width: auto;
			height: 40px;
			text-align: center;
			line-height: 42px;
			background: #f56e13;
			border: 2px solid #FAAF36 !important;
			color: #FFFFFF;
			border: 0px none;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			clear: both;
			font-weight: normal;
			padding: 0px 25px;
			margin-bottom: 50px;
		}
		#sendServ{ padding-top: 3px; }

	/*Caja con Imagen*/
	.fancyPopUpImg{
		position: fixed !important;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}



	#formServ p.titlePop1{
		font-size: 22px;
	}
	#formServ input[type='radio']{
		width: auto !important;
		margin-left: 25px;
		margin-right: 10px;
		margin-top: 0px;
	}


/* Media Queries  /  Mobile First
–––––––––––––––––––––––––––––––––––––––––––––––––– */

	/* Mobile / Coded in min-width 240px */
	@media (min-width: 0px) {
		/*Caja de validacion*/
			div.popUpBox{
				max-width: 230px; /* width: 210px -60px de padding width */
				padding: 20px; }
		/*Botón para cerrar el PopUp*/
			div.closePopUp{ margin: -25px -20px 0 0; /* -15px +20px de padding del div.popUpBox */ }
		/*Parrafos del PopUp*/
			p.titlePop1, p.titlePop2, .buttonPop{ font-size: 16px; }
			p.titlePop3, p.titlePop4{ font-size: 14px; }
			.buttonPop{
				margin-top: 30px;
				height: 45px;
				line-height: 45px; }
		/*Caja de formulario*/
			.popUpForm{
				max-width: 270px !important; }
		/*Caja de respuesta*/
			.popUpAnsSi{ margin-top: -125px !important; }
			.popUpAnsNo{ margin-top: -175px !important; }
	}

	/* Larger than mobile */
	@media (min-width: 400px) {
		/*Caja de validacion*/
			div.popUpBox{
				max-width: 240px; /* width: 210px -60px de padding width */ }
		/*Caja de formulario*/
			.popUpForm{
				max-width: 440px !important; }
		/*Caja de respuesta*/
			.popUpAnsSi{ margin-top: -105px !important; }
			.popUpAnsNo{ margin-top: -150px !important; }
		/*Listas de formulario*/
			ol.listaFormTxt{
				width: 30%;
				clear: both; }
				ol.listaFormTxt > li{ height: 40px; }
			ol.listaFormInp{
				width: 65%;
				position: initial;
				margin-top: 5px; }
				ol.listaFormInp > li{ height: 40px; }
					ol.listaFormInp > li > input{
						width: 93%;
						padding: 0 5px;
						margin-top: 5px; }
			.buttonPopForm{
				margin-top: 0px !important;
				margin-bottom: 0px !important; }
		#formServ input[type='radio']{ margin-top: 13px; }
	}

	/* Larger than phablet (also point when grid becomes active) */
	@media (min-width: 550px) {
		/*Caja de validacion*/
			div.popUpBox{
				max-width: 300px; /* width: 210px -60px de padding width */ }
	}	

	/* Larger than tablet */
	@media (min-width: 750px) {
		/*Caja de validacion*/
			div.popUpBox{
				max-width: 500px; /* width: 210px -60px de padding width */
				padding: 50px; }
		/*Botón para cerrar el PopUp*/
			div.closePopUp{ margin: -55px -50px 0 0; /* -15px +20px de padding del div.popUpBox */ }
		/*Parrafos del PopUp*/
			p.titlePop1{ font-size: 30px; }
			p.titlePop2{ font-size: 20px; }
			.buttonPop{ font-size: 18px; }
			p.titlePop3, p.titlePop4{ font-size: 16px; }
			.buttonPop{
				margin-top: 40px;
				height: 50px;
				line-height: 50px; }
		/*Caja con Imagen*/
			.fancyPopUpImg{
				max-width: 720px !important;
				padding: 10px !important; }
		/*Botón para cerrar la Caja con Imagen*/
			.closePopUpImg{
				position: relative;
				right: 40px;
				top: 40px; }
		/*Caja de formulario*/
			.popUpForm{
				max-width: 650px !important; }
		/*Caja de respuesta*/
			.popUpAnsSi{ margin-top: -150px !important; }
			.popUpAnsNo{ margin-top: -200px !important; }
		/*Listas de formulario*/
			ol.listaFormTxt{ margin-top: 50px; }
				ol.listaFormTxt > li{ height: 50px; }
			ol.listaFormInp{ margin-top: 43px; }
				ol.listaFormInp > li{ height: 50px; }
			.buttonPopForm{
				margin-top: 20px !important; }
	}

	/* Normal Tablet */
	@media (min-width: 1000px) {
		/*Caja con Imagen*/
			.fancyPopUpImg{
				max-width: 800px !important; }
	}

	/* Big Tablet */
	@media (min-width: 1200px) {
		
	}

	/* Desktop */
	@media (min-width: 1366px) {
		
	}

	/* Big Desktop */
	@media (min-width: 1920px) {
		/*Caja con Imagen*/
			.fancyPopUpImg{
				max-width: 1000px !important; }
	}