/*
 * -------------------------------------------------------------------
 *	Generales
 * -------------------------------------------------------------------
 *
 *
*/

	html,
	body{font-family: 'Montserrat', sans-serif;	font-weight: 400}
	h2.seccion{font-size: 2.5em;	color: #1a1a1a;	font-weight: 700;	line-height: 1.3em}
	h2.seccion b{color: #005bea;	font-weight: 700}
	h2.seccion ~ p.subtitulo{font-size: 1.5em;	color: #005bea;	font-weight: 600}



/*
 * -------------------------------------------------------------------
 *	Menú
 * -------------------------------------------------------------------
 *
 *
*/

	#menu{
		padding-top: 20px;	padding-bottom: 20px;
		color: #1a1a1a;	font-weight: 500;
		background: #fff;	box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 4px 8px rgba(0, 0, 0, .05)
	}
	#menu .logo{padding: 0}
	#menu .logo img{width: 102px}
	#menu button{
		outline: 0;
		border: none
	}
	#menu button span{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826, 26, 26, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M7 15h16M4 23h22'/%3e%3c/svg%3e")}
	#menu li a:hover,
	#menu li a.active{color: #000}
	#menu .cta{
		color: #fff !important;
		border-radius: 100px;
		background: #005bea;
		/* Animacion */
			-webkit-transition:all 0.15s ease 0s;
			-moz-transition:all 0.15s ease 0s;
			-o-transition:all 0.15s ease 0s;
			transition:all 0.15s ease 0s;
	}
	#menu .cta:hover{background: #2575fc}



/*
 * -------------------------------------------------------------------
 *	Header
 * -------------------------------------------------------------------
 *
 *
*/

	#header{
		height: 100vh;
		background: url('../img/header2.jpg') 80% 50% no-repeat;	background-size: cover
	}
	#header h1{
		color: #fff;	font-size: 3.75em;	font-weight: 700;	line-height: 1.3em
	}
	#header p{color: #fff;	font-size: 1.375em;	font-weight: 300;	line-height: 1.6em}
	#header a{
		display: inline-block;
		color: #1a1a1a;	font-size: 1.375em;
		border-radius: 100px;
		background: #fff;	box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
		/* Animacion */
			-webkit-transition:all 0.15s ease 0s;
			-moz-transition:all 0.15s ease 0s;
			-o-transition:all 0.15s ease 0s;
			transition:all 0.15s ease 0s;
	}
	#header a:hover{
		padding-left: 3.5rem !important;	padding-right: 3.5rem !important;
		color: #000
	}



/*
 * -------------------------------------------------------------------
 *	Clientes
 * -------------------------------------------------------------------
 *
 *
*/

	#clientes{
		overflow: hidden;
		padding-top: 100px;	padding-bottom: 100px;
		background-color: #005bea
	}
	#clientes .fondo{
		position: absolute;	top: 0;	bottom: 0;
		min-width: 720px;
		background-size: 100% 100%
	}
	#clientes .fondo.izq{
		left: -10%;	right: 65%;
		background-image: url('../img/clientes-izq.png')
	}
	#clientes .fondo.der{
		left: 65%;	right: 0;
		background-image: url('../img/clientes-der.png')
	}
	#clientes h2.seccion{color: #fff;	font-size: 2.75em}
	#clientes p{
		margin-bottom: 74px;
		color: #fff
	}



/*
 * -------------------------------------------------------------------
 *	Formulario
 * -------------------------------------------------------------------
 *
 *
*/

	#form{background: url(../img/form-fondo.jpg) center center no-repeat; background-size: cover}
	#formulario{
		margin-top: 120px;	margin-bottom: -300px;	padding: 60px;
		border-radius: 40px;
		background: #fff;	box-shadow: 0 8px 16px rgba(0,0,0,.05), 0 16px 32px rgba(0,0,0,.05);
		z-index: 1
	}
	#formulario h2.seccion{margin-bottom: 30px}
	#formulario p.subtitulo{
		margin-bottom: 30px;
		font-size: 1.125em;	font-weight: 500;	line-height: 1.7em
	}
	#alerta{display: none}
	#formulario label,
	#formulario .label{
		margin-top: 20px;	padding-left: 10px;
		font-size: 1.125em;	color: #1a1a1a;	font-weight: 500
	}
	#formulario input,
	#formulario .reciboluz{
		border-color: #e0e0e0;	border-radius: .375em;
		background: #fafafa
	}
	#formulario input,
	#formulario .reciboluz,
	#formulario .custom-file{
		height: 2.875em;
		height: calc(1.5em + 1.25em + 2px)
	}
	#formulario .reciboluz{
		margin-top: 0;	padding: .5rem 1rem;
		font-size: 1.25rem;	line-height: 1.5
	}
	#formulario .reciboluz::after{
		content: "Buscar";
		height: 3.125em;
		padding: 0 1rem;
		font-size: .88em;	line-height: 3.125em;
		border-radius: 0 .375em .375em 0
	}
	#enviar{
		margin-top: 40px;	margin-bottom: 20px;
		color: #fff;	font-weight: 500;
		border-radius: 100px;
		background: #005bea
	}
	#enviar:hover{background: #2575fc}



/*
 * -------------------------------------------------------------------
 *	Servicios
 * -------------------------------------------------------------------
 *
 *
*/

	#servicios{
		overflow: hidden;
		padding-top: 500px;	padding-bottom: 430px
	}
	#servicios .fondo{
		position: absolute;
		background-position: center center;	background-repeat: no-repeat;	background-size: 100% 100%
	}
	#servicios .fondo.izq{
		top: 0;	right: 85%;	bottom: 40%;	left: -6%;
		max-width: 370px;
		background-image: url("../img/servicios-izq.png")
	}
	#servicios .fondo.der{
		top: 40%;	right: 0;	bottom: 0;	left: 90%;
		min-width: 200px;
		background-image: url("../img/servicios-der.png")
	}
	#servicios .servicio{margin-top: 155px}
	#servicios .servicio img{
		width: 96px;
		margin-bottom: 55px
	}
	#servicios .servicio h3{font-size: 1.875em;	color: #01b377;	font-weight: 700;	line-height: 1.3em}



/*
 * -------------------------------------------------------------------
 *	Crédito
 * -------------------------------------------------------------------
 *
 *
*/

	#credito{margin-top: -230px;	padding-bottom: 160px}
	#credito .tarjeta{
		padding-top: 60px;	padding-bottom: 70px;
		border-radius: 40px;
		background: #01b377;	background-image: linear-gradient(163deg, #0fd850 0%, #01b377 100%);
	}
	#credito h4{font-size: 3.25em;	color: #fff200;	font-weight: 700;	line-height: 1.3em}
	#credito p{
		margin-top: 15px;
		font-size: 1.2em;	color: #fff;	line-height: 1.6em
	}
	#credito img{width: 190px}
	#credito a{
		margin-top: 40px;
		font-size: 1.2em;	color: #1a1a1a;
		border-radius: 100px;
		background: #fff;	box-shadow: 0 4px 8px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1);
		/* Animacion */
			-webkit-transition:all 0.15s ease 0s;
			-moz-transition:all 0.15s ease 0s;
			-o-transition:all 0.15s ease 0s;
			transition:all 0.15s ease 0s;
	}
	#credito a:hover {
		padding-left: 3.5rem !important;	padding-right: 3.5rem !important;
		color: #000
	}
	#credito a .link-icon{margin-top: -5px}



/*
 * -------------------------------------------------------------------
 *	Quiénes somos
 * -------------------------------------------------------------------
 *
 *
*/

	#quienes-somos{
		padding-top: 120px;	padding-bottom: 120px;
		background: url("../img/quienes.jpg") center center no-repeat;	background-size: cover
	}
	#quienes-somos h2{
		margin-bottom: 35px;
		font-size: 3.75em;	color: #fff;	font-weight: 700;	line-height: 1.3em
	}
	#quienes-somos p{font-size: 1.25em;	color: #fff;	font-weight: 300;	line-height: 1.6em}
	#quienes-somos a{
		font-size: 1.125em;	color: #1a1a1a;	font-weight: 500;
		border-radius: 100px;
		background: #fff;	box-shadow: 0 4px 8px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1);
		/* Animacion */
			-webkit-transition:all 0.15s ease 0s;
			-moz-transition:all 0.15s ease 0s;
			-o-transition:all 0.15s ease 0s;
			transition:all 0.15s ease 0s;
	}
	#quienes-somos a:hover{color: #fff;	background: #2575fc}
	#quienes-somos a b{
		color: #005bea;	font-weight: 500;
		/* Animacion */
			-webkit-transition:all 0.15s ease 0s;
			-moz-transition:all 0.15s ease 0s;
			-o-transition:all 0.15s ease 0s;
			transition:all 0.15s ease 0s;
	}
	#quienes-somos a:hover b{color: #fff}




/*
 * -------------------------------------------------------------------
 *	Redes
 * -------------------------------------------------------------------
 *
 *
*/

	.redes{padding-top: 90px;	padding-bottom: 90px}
	.redes h4{
		margin-bottom: 40px;
		font-size: 2.5em;	font-weight: 700;	line-height: 1.3
	}
	.redes a{
		color: #fff;
		border-radius: 100px
	}
	.redes a .icono{margin-right: 10px}
	#face{background: #fafcff}
	#face h4{color: #005bea}
	#face a{
		color: #fff;
		background: #005bea
	}
	#face a:hover{background: rgba(0, 91, 234, .9)}
	#insta h4{color: #833ab4}
	#insta a{
		color: #fff;
		background: #833ab4
	}
	#insta a:hover{background: rgba(131, 58, 180, .9)}



/*
 * -------------------------------------------------------------------
 *	Llama
 * -------------------------------------------------------------------
 *
 *
*/

	#llama{margin-top: 50px}
	#llama .fondo{
		position: absolute;	top: 50%;	bottom: 0;	left: 0;	right: 0;
		background: #1a1a1a
	}
	#llama .tarjeta{
		padding: 50px 100px;
		border-radius: 40px;
		background: #fafcff
	}
	#llama h4{font-size: 1.875em;	color: #1a1a1a;	font-weight: 700;	line-height: 1.6}
	#llama h4 b{
		display: block;
		color: #005bea
	}
	#llama a{
		font-size: 1.375em;	color: #fff; font-weight: 500;	line-height: 1.3em;
		border-radius: 100px;
		background: #005bea
	}
	#llama a:hover{background: #2575fc}
	#llama a .icono{margin-right: 15px}
	#llama svg ~ span{vertical-align: middle}



/*
 * -------------------------------------------------------------------
 *	Footer
 * -------------------------------------------------------------------
 *
 *
*/

	#footer{
		padding-top: 80px;	padding-bottom: 80px;
		background: #1a1a1a
	}
	#footer img{width: 205px}
	#footer h5{font-size: 1em;	color: #fff;	font-weight: 300;	line-height: 1.6}
	#footer h6{font-size: 1.125em;	color: #fff;	font-weight: 300;	line-height: 1.6}
	#footer a{color: #fff;	text-decoration: none}
	#footer a b{font-weight: 400}
	#footer a:hover b{padding-bottom: 3px;	border-bottom: 1px solid #fff}



/*
 * -------------------------------------------------------------------
 *	Loader
 * -------------------------------------------------------------------
 *
 *
*/

	.lds-ellipsis {
		position: relative;	display: none;
		width: 80px;	height: inherit;	min-height: 2.5em;
		margin: -.5rem auto
	}
	.lds-ellipsis div {
		position: absolute;	top: 50%;
		width: .6em;	height: .6em;
		margin-top: -.3em;
		border-radius: 50%;
		background: #fff;
		animation-timing-function: cubic-bezier(0, 1, 1, 0);
	}
	.lds-ellipsis div:nth-child(1) {
		left: 8px;
		animation: lds-ellipsis1 0.6s infinite;
	}
	.lds-ellipsis div:nth-child(2) {
		left: 8px;
		animation: lds-ellipsis2 0.6s infinite;
	}
	.lds-ellipsis div:nth-child(3) {
		left: 32px;
		animation: lds-ellipsis2 0.6s infinite;
	}
	.lds-ellipsis div:nth-child(4) {
		left: 56px;
		animation: lds-ellipsis3 0.6s infinite;
	}
	@keyframes lds-ellipsis1 {
		0% {
			transform: scale(0);
		}
		100% {
			transform: scale(1);
		}
	}
	@keyframes lds-ellipsis3 {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(0);
		}
	}
	@keyframes lds-ellipsis2 {
		0% {
			transform: translate(0, 0);
		}
		100% {
			transform: translate(24px, 0);
		}
	}



/*
 * -------------------------------------------------------------------
 *	Responsivo
 * -------------------------------------------------------------------
 *
 *
*/
	/*Extra small devices (portrait phones, less than 576px)*/
	@media (max-width: 575.98px) {
		h2.seccion{font-size: 1.8em !important}
		h2.seccion ~ p.subtitulo{font-size: 1.3em !important}

		#menu .logo img{width: 80px}

		#header{font-size: 12px}
		#header h1{font-size: 2.8em}
		#header a{font-weight: 500}

		#clientes{padding-top: 80px;	padding-bottom: 80px}
		#clientes .fondo.izq{
			left: -60%;	right: 25%;
			min-width: auto
		}
		#clientes .fondo.der{left: 55%}
		#clientes p{margin-bottom: 54px}

		#form{background-position: 50% -50%;	background-size: auto}
		#formulario{padding: 60px 40px}
		#formulario h2.seccion{margin-bottom: 20px}
		#formulario p.subtitulo{font-size: 1em !important}
		#formulario label, #formulario .label{margin-top: 10px}

		#servicios{padding-top: 420px;	padding-bottom: 360px}
		#servicios .fondo.izq{left: -50%}
		#servicios .fondo.der{left: 88%}
		#servicios .servicio{margin-top: 80px}
		#servicios .servicio img{
			width: 80px;
			margin-bottom: 40px
		}
		#servicios .servicio h3{font-size: 1.6em}

		#credito h4{font-size: 2.2em}
		#credito a{font-size: 1em}
		#credito a .link-icon{width: 20px;	height: 20px}

		#quienes-somos{padding-top: 80px;	padding-bottom: 80px}
		#quienes-somos h2{font-size: 2.4em}
		#quienes-somos p{font-size: 1.125em}

		.redes h4{font-size: 1.8em}

		#llama .tarjeta{padding: 50px 30px}
		#llama h4{font-size: 1.6em}
		#llama a{display: block;	font-size: 1.2em}
		#llama a .icono{width: 22px;	height: 22px}
	}

	/*Small devices (landscape phones, 576px and up)*/
	@media (min-width: 576px) and (max-width: 767.98px) {
		#clientes .fondo.izq{left: -55%}

		#servicios .fondo.izq{left: -30%;	right: 88%}
		#servicios .fondo.der{left: 92%}

		#llama .tarjeta{padding: 50px}
		#llama h4{font-size: 1.6em}
		#llama a{font-size: 1.2em}

		#footer img{width: 160px}
	}

	/*Medium devices (tablets, 768px and up)*/
	@media (min-width: 768px) and (max-width: 991.98px) {
		#clientes .fondo.izq{left: -30%}

		#servicios .fondo.izq{left: -18%}
		#servicios .fondo.der{left: 91%}

		#llama .tarjeta{padding: 50px 80px}
		#llama h4{font-size: 1.6em}
		#llama a{font-size: 1.2em}
	}

	/*Large devices (desktops, 992px and up)*/
	@media (min-width: 992px) and (max-width: 1199.98px) {
		#clientes .fondo.izq{left: -20%}

		#servicios .fondo.izq{left: -10%}
		#servicios .fondo.der{left: 88%}

		#llama h4{font-size: 1.6em}
	}

	/*Extra large devices (large desktops, 1200px and up)*/
	@media (min-width: 1200px) {
		
	}