@charset "utf-8";

/* GENERAL */
*									{ margin:0; border:0; padding:0; outline:none; text-decoration:none; word-break:break-strict; }
/* img									{ width: 210px; height:100px; padding: 10px;} */
body								{ font-family: 'Montserrat', sans-serif;  position:relative; }
a:hover, button:hover, button:focus	{ text-decoration:none; outline:none; }
a									{ outline:none !important; }

.ff0								{ font-family: 'Montserrat', sans-serif; font-weight:300; }
.ff1								{ font-family: 'Montserrat', sans-serif; font-weight:400; }
.ff2								{ font-family: 'Montserrat', sans-serif; font-weight:500; }
.ff3								{ font-family: 'Montserrat', sans-serif; font-weight:700; }
.ff4								{ font-family: 'Montserrat', sans-serif; font-weight:700; }
.rrss								{ font-family: 'rrss', sans-serif; font-weight:400; }

/* ESTRUCTURA */
.ionix	{ 
	width:100%; 
	max-width:1440px; 
	height:auto; 
	position:relative; 
	margin:0 auto;
}

.generalMin { width:90%; max-width:1200px; min-width:320px; height:auto; position:relative; margin:0 auto; }

.general{ 
	width:100%; 
	height:auto; 
	position:relative; 
	margin:0 auto; 
}

.generalMax							{ width:96%; max-width:1920px; min-width:320px; height:auto; position:relative; margin:0 auto; }
.allion								{ height:700px; position:relative;  }
.cgeneral							{ width:100%; max-width:100%; min-width:320px; height:auto; position:relative;}
.cbotonoff							{ position:relative;}
.pPay 								{padding:15px 71px 10px 20px;background:url(../images/pay.png) right center no-repeat;height:41px;}

/* ZONAS */
.vMM 								{ display: flex; align-items: center; justify-content: center; }

.baco1 { 
	background-image:url(../images/vehiculo-fondo.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: transform;
	contain: layout style paint;
}
.ComfandiLogo{
	width: 170px; 
	height:90px; 
	padding: 10px;
}
.FinesaLogo{
	width: 245px;  
	padding: 10px;
}
.titulo1{
	font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
    font-size:50px;
}
.titulo2{
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 30px;
}
.all-content {
	height: auto;
	width: 100%;
	display: flex;
	padding: 10px;
	justify-content: space-between;
}

.baco2 { background-image:url(../../resources/img/tranquilidad.jpg); }

.legal-comfandi-izq {
	position: absolute;
	z-index: 100;
	width: 440px;
	transform: rotate(-90deg);
	float: left;
	left: -400px;
	top: 50%;	
	
	font-size: 8px;
	line-height: 8px;
	text-align: center;
	color: #fff;
	padding: 0;
	margin: 0;
	}	
	
	.legal-comfandi-der {
	position: absolute;
	z-index: 100;
	width: 12px;
	right: 20px;
	top: 50%;
	}

.ctexto	{ 
	padding: 30px 0px 20px 60px; 
	display: flex; 
	flex-direction: column; 
	flex: 1 1 auto;
	height: 100%;
	width: 40%;
	margin-top: 2px;
	margin-left: -16px;
}

.sidebar { 
	display: flex;
	width: 60% !important;
}

header {
	display: block;
	padding: 5px 40px;
	box-shadow: 0px 8px 2px rgba(0,0,0,0.3); 
	z-index: 100;

	/*display: flex;
	align-items: center;
	justify-content: space-between;*/
}

.contenion-parlelo                  { width:calc(100% - 400px); height: auto; }

.sidebar { 
	width:auto; 
	position:-webkit-sticky; 
	position: sticky; 
	top:0; 
	padding: 30px 0;
}

.pAA_resp							{ padding:150px 0; }

.exxt	{
	display: flex; 
	align-items: baseline;
	
}
.texx {
	padding: 30px;
	margin: 30px;
}
.exxt::before	{
	content: ""; 
	font-family: FontAwesome; 
	content: "\f101"; 
	color:#82d800 ; 
	font-size: 32px; 
	margin-right: -40px;
	margin-left:-20px;
}
.all{
	margin-left:-20px;
	margin-top:20px;
}
.pLeftEsp1 .exxt2 {
	display: flex; 
	flex-direction: column;
	/*flex-wrap: wrap; 
	justify-content: space-between;*/
	margin-left: -30px;
	margin-top: -50px;
	padding: 0 10px;
}

.pLeftEsp1 .exxt2 span	{ 
	display: flex; 
	align-items: center;
	color: #fff;
	margin-left: 10px;
	margin-top: 10px;
	font-size: 1.2rem;
}

.pLeftEsp1 .exxt2 span::before	{ 
	font-family: FontAwesome; 
	color: #82d800 ;
	/* background-color: #fff; */
	border-radius: 100%;
	margin-right: 10px;
	font-size: 20px;
	padding: 5px;
	text-align: center;
	width: 40px;
	height: 40px;
}

.pLeftEsp1 .exxt2 span.Aprobacion::before	{ 
	content: "\f058";
}

.pLeftEsp1 .exxt2 span.Categoria::before	{ 
	content: "\25";
}

.pLeftEsp1 .exxt2 span.Tasa::before	{ 
	content: "\25";
}

.pLeftEsp1 .exxt2 span.Persona::before	{ 
	content: "\e533";
}

.pLeftEsp1 .exxt2 span.Seguro::before	{ 
	content: "\e574";
}

.pLeftEsp1 .exxt2 span.Dinero::before	{ 
	content: "\f0d6";
}

.pLeftEsp1 .exxt2 span.Meses::before	{ 
	content: "\f073";
}

.pLeftEsp1.phone {
	display: none;
}

.car-img.phone {
	display: none;
}

.car-img img {
	height: 280px;
	width: auto;
    position: absolute;
    left: 0;
    bottom: 10px;
}

.man-img  {
 	width: 250px;
}

.man-img img {
 	position: absolute;
 	width: auto;
 	height: 600px;
 	z-index: -1;
}

.formulario {
	background-color: #fff;
	border-radius: 10px;
	padding: 20px 30px;
	width: 40%;
}

.info {
	width: 100%;
	text-align: center;
}

.titulo-form {
	font-weight: 800;
	font-size: 16px;
	font-weight: 800 !important;
	line-height: 20px;
	width: 80%;
	text-align: center;
	color:#2B4676;
	margin: auto;
}

.input-form {
	padding: 15px 0;
	font-size: 16px;
}

.input-field { 
	width: 100%; 
	outline: none;
	padding: 5px 15px 5px 0 !important;
	font-size: 13px;
	background: none;
	color: #828282;
}

.form-select {
	width: 100%; 
	outline: none;
	padding: 5px 15px 5px 0 !important;
	font-size: 13px;
	background: none;
	color: #828282;
}

.w100{ 
	background: none;
}

.input-container { 
	display: flex; 
	border-collapse: separate; 
	margin-bottom: 5px; 
	border: black; 
	border-radius: 6px;
	width: 100%;
	border: 1px solid #82d800 ;
}

.label-input {
	width: 100%;
	font-size: 12px;
	margin-top: 4px;
	color: #828282;
}	

.label-input.nombre::before {
	content: "Nombre y apellidos* ";
	
}

.label-input.fnacimiento::before {
	content: "Fecha de nacimiento* ";
}	

.label-input.city::before {
	content: "Ciudad de residencia*";
}	

.label-input.number::before {
	content: "N° de documento*";
}	

.label-input.fexpedicion::before {
	content: "Fecha de expedición*";
}	

.label-input.celular::before {
	content: "Celular*";
}

.label-input.email::before {
	content: "Correo electrónico*";
}

.label-input.rango::before {
	content: "Rango de ingresos*";
}

.label-input.carro::before {
	content: "Tipo de vehículo*";
}

.label-input.encuentra::before {
	content: "¿Ya encontraste el carro que deseas?*";
}
.label-input.referido::before{
	content: "¿Alguien te recomendó Movilidad Comfandi?*";
}
.label-input.referidos::before {
	content: "Nombre del referidor*";
}
.label-input.idreferidos::before {
	content: "Cédula del referidor*";
}
.label-input.empresa::before{
	content: "Empresa del referidor*";
}
.input-container-doble {
	display: flex;
	flex: 1;
}

.input-container-doble .label-input:first-child {
	margin-right: 20px;
}

.icon { 
	white-space: nowrap; 
	padding: 8px; 
	color: #82d800 ; 
	min-width: 30px; 
	text-align: center; 
	vertical-align: bottom;
	font-size: 13px;
}

.input-container .input {
	font-size: 13px;
	padding: 0px !important;
}

.politicas {
	position: relative;
}

.politicas-card {
	display: flex;
	font-size: 12px;
	line-height: 16px;
	margin: 0px;
}

.politicas-check {
	margin-right: 10px;
}

.politicas-text p {
	margin-bottom: 5px !important;
}

.boton {
	width: 100%;
	padding: 20px;
	align-items: center;
	display: flex;
}

button {
	background-color: transparent;
}

.boton {
	background-color: #82d800 ;
	padding: 10px 32px;
	border-radius: 100px;
	margin: auto;
	text-align: center;
	color: #213B6B;
	font-size: 15px;
	font-weight: 800;
	width: 40%;
	position: relative;
	max-height: 45px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.noboton {
	background-color: #dbdbdb;
	padding: 10px 32px;
	border-radius: 100px;
	margin: auto;
	text-align: center;
	color: #213B6B;
	font-size: 15px;
	font-weight: 800;
	width: 40%;
	position: relative;
	max-height: 45px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.boton-thank {
	background-color: #82d800;
	padding: 10px 32px;
	border-radius: 100px;
	margin: auto;
	text-align: center;
	color: #213B6B;
	font-size: 15px;
	font-weight: 800;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.boton:hover {
	background-color: #fff;
	border: solid 2px #82d800;
	color: #82d800;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
}

.boton-thank:hover {
	background-color: #fff;
	border: solid 2px #82d800;
	color: #82d800;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
}

.boton .text-boton {
	display: flex;
	align-items: center;
	text-align: center;
	color: #213B6B;
}

.boton a {
	display: flex;
	align-items: center;
	text-align: center;
	color: #213B6B;
}

.boton a i {
	margin-right: 10px;
}

.footer {
	padding: 10px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
}

.footer .social-media {
	display: flex;
}

.footer .social-media .icono a {
	font-size: 16px;
	color: #fff !important;
	margin: 10px;
}

.footer .derechos {
	font-size: 13px;
	font-weight: 100;
}

.tabion														{ margin:0 auto; }
.tabion .nav												{ border:0; width:100%; }
.tabion .nav-tabs											{ border:0; }
.tabion .nav-tabs .nav-item									{ border:0; width:50%; background-color:#eee; text-align:center; border-radius:0 !important; }
.tabion .nav-tabs .nav-item .nav-link						{ border:0; color:#fff; background-color:#0d7d36; border-radius:0 !important; padding:20px; }
.tabion .nav-tabs .nav-item .nav-link .wh40					{ background-color:#fff; color:#0d7d36; }
.tabion .nav-tabs .nav-item .nav-link.active				{ border:0; color:#0d7d36; background-color:#fff; font-weight:bold; border-radius:0 !important; }
.tabion .nav-tabs .nav-item .nav-link.active .wh40			{ background-color:#0d7d36; color:#fff; }
.tabion .nav-tabs .nav-item .nav-link:hover					{ border:0; color:#fff; background-color:#0d7d36; border-radius:0 !important; }
.tabion .nav-tabs .nav-item .nav-link.active:hover			{ border:0; color:#0d7d36; background-color:#fff; font-weight:bold; border-radius:0 !important; }

.p816 								{ padding:8px 16px; }

.colorVerde							{ color:#defcdd; }
.colorVerde2						{ color:#0d7d36; }
.colorVerde3						{ color:#1e421f; }
.colorAmarillo 						{ color:#f6dc15; }
.colorRojo 							{ color:#fc476e; }
.colorAzul							{ color:#2B4676; }
.colorAzul2							{ color:#0697d4; }
.colorAzul3							{ color:#ddeef9; }
.colorNaranja						{ color:#E07144; }	

.bVerde 							{ background-color:#defcdd; }
.bVerde2 							{ background-color:#0d7d36 ; }
.bVerde3 							{ background-color:#1e421f; }
.bAmarillo 							{ background-color:#f6dc15; }
.bRojo 								{ background-color:#fc476e; }

.bAzul { 
	background-color:#023A6F; 
}

.bAzul2 							{ background-color:#0697d4; }
.bAzul3 							{ background-color:#ddeef9; }

.bCeee 								{ border-color:#eee; }
.bCfff 								{ border-color:#fff; }

.b000T3 							{ background-color:rgba(255,255,255,0.2); }

.maxHLat::-webkit-scrollbar{
    width: 5px;
}
.maxHLat::-webkit-scrollbar-track{
    background-color: #fff;
}
.maxHLat::-webkit-scrollbar-thumb{
    background-color: #b8e3ff;
}

.bShadow 							{ -webkit-box-shadow: 0 0 15px 1px rgba(0,0,0,0.3); box-shadow: 0 0 15px 1px rgba(0,0,0,0.3); }
.bShadow2 							{ -webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); }
.tShadow 							{ text-shadow: 0 0 10px rgba(0,0,0,0.8); }

.bGrad1								{
	background: #0699d6; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #0699d6 0%, #176cb1 66%, #176cb1 66%, #176cb1 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #0699d6 0%,#176cb1 66%,#176cb1 66%,#176cb1 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #0699d6 0%,#176cb1 66%,#176cb1 66%,#176cb1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0699d6', endColorstr='#176cb1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.bGrad2								{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#febbbb+0,fe9090+45,ff5c5c+100;Red+3D+%231 */
background: #febbbb; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #febbbb 0%, #fe9090 45%, #ff5c5c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

/* TRANSFORM */
.aHover:hover						{ color:#ccc; }
.aHover2:hover						{ background-color:#eee; color:#000; }
.bHover:hover						{ background-color:#0051a0; color:#fff; border-color:#0051a0; }
.bHover1:hover						{ background-color:#032e58; color:#fff; border-color:#032e58; }
.bHover2:hover						{ background-color:#eee; color:#333; }

.bHover, .bHover2, .bHover1, .aHover, .aHover2, .aS  {
	-webkit-transition: all 350ms ease-in;
	-moz-transition: all 350ms ease-in;
	-ms-transition: all 350ms ease-in;
	-o-transition: all 350ms ease-in;
	transition: all 350ms ease-in;
}

input.placeh::-webkit-input-placeholder 	{ color:#999; }
input.placeh:-moz-placeholder 				{ color:#999; }
input.placeh:-ms-placeholder 				{ color:#999; }
input.placeh::placeholder 					{ color:#999; }

.cont-thanks {
	display: flex;
    align-items: center;
    justify-content: space-around;

    margin: 40px;
    text-align: center;
}

.thankspage {
	background-color: #fff;
	width: 60%;
	height: auto;
	border-radius: 10px;
	padding: 40px 60px;
	box-shadow: 0x 2px 8px rgba(0,0,0,0.3);

	display: flex;
    flex-direction: column;
    align-items: center;
}

.icono-thanks {
	display: flex;
	align-items: center;
    justify-content: space-around;

	font-size: 50px;
	margin: 5px !important;
	background-color: #82d800;
	color: #fff;
	width: 70px;
	height: 70px;
	padding: 2px;
	border-radius: 100px;
	box-shadow: 0x 4px 8px rgba(0,0,0,0.4);
}

.thankspage h1 {
	color: #023A6F;
    margin: 5px 10px 20px;
}

.thankspage h3 {
	text-align: center;
    font-size: 24px;
}

.thankspage h5 {
	text-align: center;
    font-size: 18px;
    width: 80%;
    padding: 10px;
}

/*Responsive Celular*/
@media only screen and (max-width: 600px) {

	header {
		padding: 2px;
		height: 110px;
		margin:2px;
	}

	header img {
		width: 200px;
		height:100px;
		padding: 10px;
		margin-left: 20px;

	}

  .ionix { 
		width: auto;
		height: auto;
		display: flex;
		flex-direction: column; 
		align-items: center;
		padding-top: 30px;
	}
	.all{
		margin-left:20px;
		margin-top:-20px;
	}
  .man-img {
 		display: none;
	}

  .ctexto { 
		padding: 0; 
		display: flex; 
		align-items: center;
		flex-direction: column; 
		width: 90% !important;
	}

	.exxt {
		display: flex; 
		width: 90% !important;
	}

	.exxt h2 {
		font-size: 22px;
		font-weight: 800;
	}

	.exxt h4 {
		font-size: 16px;
	}

	.exxt::before	{
		display: none;
	}

	.exxt h2::before	{
		content: ""; 
		font-family: FontAwesome; 
		content: "\f101"; 
		color:#82d800; 
		font-size: 20px; 
		margin-right: 4px;
	}

	.pLeftEsp1.phone {
		display: flex; 
		text-align: left;
		width: 90%;
		margin-left: 0px; 
    	padding: 0px; 
	}

	.pLeftEsp1.phone .exxt2 {
    	display: flex;
   	 	flex-direction: column;
     	margin-left: 0px;
     	padding: 0px;
		margin-top:10px;
    }

	.pLeftEsp1.phone  span	{ 
		display: flex; 
		align-items: center;
		color: #fff;
		margin-top: 10px;
	}

	.pLeftEsp1.phone  span	h4 { 
		display: flex; 
		align-items: flex-start;
		color: #fff;
		margin-top: 0px;
		text-align: left;
	}

	.pLeftEsp1.web {
		display: none;
	}

	.formulario {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		width: 100% !important;
	}
	
	.info {
		width: 100%;
		text-align: center;
	}
	
	.input-field { 
		width: 100%; 
		outline: none;
		background: none;
	}
	
	.form-select {
		width: 100%; 
		outline: none;
		padding: 5px 15px 5px 0 !important;
		font-size: 14px;
		background: none;
	}
	
	.w100{ 
		background: none;
	}
	
	.input-container { 
		display: flex; 
		border-collapse: separate; 
		border: black; 
		border-radius: 6px;
		width: 100%;
		border: 1px solid #82d800;
	}	
	
	.input-container-doble {
		display: flex;
		 flex-direction: column;
	}
	
	.input-container-doble .input-container:first-child {
		margin-right: 20px;
	}

	.car-img.web {
		display: none;
	}

	.car-img.phone {
		display: block;
		height: auto;
	}

	.car-img img {
		width: 100%;
		height: auto;
		position: relative;
    	left: -30px;
    	bottom: 0px;
	}

	.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

	.footer div {
		margin: 4px;
	}

	.all-content {
		max-width: 100% !important;
	}

}

@media only screen and (max-width: 1000px) {

  .ionix { 
		width: auto;
		display: flex;
		flex-direction: column; 
		align-items: center;
		padding-top: 30px;
	}
	.texx {
		padding: 30px;
		margin: 10px;
		text-align: center;
	}
	.all-content {
		max-width: 100% !important;
	}
    .all{
		margin-left:20px;
		margin-top:-50px;
	}
	.ctexto { 
		padding: 0; 
		display: flex;
    	width: 100% !important;
    	flex-direction: column;
		width: 100%; 
	}

	.exxt {
		display: flex; 
		width: 100% !important;
		flex-direction: column;
		align-items: center;

	}

	.exxt h2 {
		font-size: 22px;
		font-weight: 800;
	}

	.exxt h4 {
		font-size: 16px;
	}

	.exxt::before	{
		display: none;
	}

	.exxt h2::before	{
		content: ""; 
		font-family: FontAwesome; 
		content: "\f101"; 
		color:#82d800; 
		font-size: 20px; 
		margin-right: 4px;
	}

	.pLeftEsp1.web {
		width: 100% !important;
		padding-top: 0px;
		margin-left: 0px;
		text-align: left;
	}

	.pLeftEsp1.web .exxt2 {
		width: 98%;
		display: flex; 
		flex-direction: row;
		flex-wrap: wrap; 
		justify-content: space-between;
		margin-left: 20px;
		margin-top: -80px;
		padding: 10px;
		    align-items: center;
    	align-content: stretch;
        justify-content: space-around;

}

.pLeftEsp1.web .exxt2 span	{ 
	/* width: 22%; */
}

.pLeftEsp1.web .exxt2 h4	{ 
	width: 60%;
}

.pLeftEsp1.web .exxt2 span	{ 
	display: flex; 
	align-items: center;
	color: #fff;
	margin-left: 10px;
	margin-top: 10px;
}

.pLeftEsp1 .exxt2 span::before	{ 
	font-family: FontAwesome; 
	color: #82d800;
	background-color: #fff;
	border-radius: 100%;
	margin-right: 10px;
	font-size: 20px;
	padding: 5px;
	text-align: center;
	width: 40px;
	height: 40px;
}

.sidebar{
	width: 90% !important;
}
.formulario {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		width: 100% !important;
	}
	
	.info {
		width: 100%;
		text-align: center;
	}
	
	.titulo-form {
		font-weight: 800;
		font-size: 16px;
		line-height: 18px;
		width: 90%;
		text-align: center;
		color:#2B4676;
		margin: auto;
	}
	
	.input-form {
		padding: 20px 0;
		font-size: 16px;
	}

	button {
    	background-color: #82d800;
    	padding: 10px 32px;
    	border-radius: 100px;
    	margin: auto;
    	text-align: center;
    	color: #213B6B;
    	font-size: 15px;
    	font-weight: 800;
    	width: 100%;
    	position: relative;
    	max-height: 45px;
	}

	.w100{ 
		background: none;
	}

	.input-container-doble {
		display: flex;
		flex-direction: column;

	}
	
	.input-container-doble .input-container:first-child {
		margin-right: 20px;
	}
	
	.icon { 
		white-space: nowrap; 
		padding: 10px; 
		color: #82d800; 
		min-width: 40px; 
		text-align: center; 
		vertical-align: bottom;
	}

	.car-img.web {
		display: none;
	}

	.man-img {
		display: none;
	}

	.car-img.phone {
		display: block;
		position: relative !important;
	}

	.car-img.phone img {
		position: relative;
		height: auto;
		left: -100px;
	}	

	.cont-thanks {
    	margin: 10px;
    	text-align: center;
	}

	.thankspage {
		background-color: #fff;
		width: 80%;
	}
}