@charset "UTF-8";
/* CSS Document */

body, html{ width: 100%; height: 100%; }
body{ font-family: 'Manrope', sans-serif; }
.content{overflow: hidden;}

/* ===========================  Menu  ============================== */

.menu{
	width: 100%;
	float: left;
	height: 100px;
	padding-top: 30px;
	margin: 0 auto;
	position: relative;
	z-index: 999999999;
}

.menu img.logo{
	width: 210px;
	margin: 10px;
	float: left;
}

.menu ul{
	padding: 0;
	margin: 15px 0 0 30px;
	list-style: none;
	float: left;
}

.menu ul.display{display: block;}

.menu ul li{
	float: left;
	padding: 0 20px;
}

.menu ul li a{color: #73739A;}
.menu ul li a.on{color: #6E72EE;}

.menu ul li a.color-2{color: #fff;}
.menu ul > a.color-2{color: #fff;}

.menu ul > a{ color:#73739A; margin-left: 20px; }

.menu ul > a.bg{
	background: #2164EE;
	padding: 5px;
	border-radius: 4px;
	color: #fff;
}

.menu ul > a.bg.yellow{
	background: #FFD452;
	color: #000;
}

.menu .boton{
	float: right;
	margin: 10px 0 0 0;
	z-index: 9999999999;
	display: none;
}

.menu a.clientes{
	background: #2164EE;
	margin: 10px 0 0 0;
	padding: 8px 30px;
	border-radius: 8px;
	float: right;
	color: #fff;
}

.menu a.clientes-2{
	background: #FFD452;
	margin: 10px 0 0 0;
	padding: 8px 30px;
	border-radius: 8px;
	float: right;
	color: #000;
}


.menu .btn-close{
	position: fixed;
	top: 40px;
	right: 15px;
	z-index: 9999999999;
	display: none;
}

.velo{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: 9999999;
	display: none;
}

.menu .btn-close.on{display: block; z-index: 9999999999;}
.velo.on{display: block;}

/* ------- Media ------ */

@media only screen and (max-width: 768px) {
	.menu .boton{display: block;}
	.menu ul{
		display:none; 
		position:fixed; 
		top:0; left:0; 
		background:#F7F7FC; 
		width: 100%; margin: 0; 
		padding: 60px; z-index: 999999999;}
	.menu ul.black{background: black;}
	.menu ul li{ float: none; width: 100%; padding: 10px;}
	.menu a.pay{margin-right: 20px;}
	.menu a.clientes{ margin-right: 10px; }
	.menu ul > a{ padding-left:10px; margin-top:10px; float:left; }
}


/* ===========================  Header  ====================================== */

.header{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 90vh;
	background: url(../images/header-bg.jpg)no-repeat center left;
	background-size: cover; 
	display:flex;
    align-items: center;
    justify-content: center;
}

.header-2{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 90vh;
	background: url(../images/header-bg-2.jpg)no-repeat center left;
	background-size: cover; 
	display:flex;
    align-items: center;
    justify-content: center;
}

.header h1{
	font-weight: 800;
	font-size: 48px;
	line-height: 68px;
	padding: 0 0 20px 0;
	color: #3B3B3B;
	display:table-cell; 
	vertical-align:middle
}

.header-2 h1{
	font-weight: 800;
	font-size: 48px;
	line-height: 68px;
	padding: 0 0 20px 0;
	color: #fff;
	margin-top: 200px;
}

.header h1 > span{
	color: #2164EE;
	margin: 0;
	text-transform: none;
}

.header-2 h1 > span{
	color: #FFD452;
	margin: 0;
	text-transform: none;
}

.header p{
	color: #73739A;
	font-size: 20px;
}

.header-2 p{
	color: #fff;
	font-size: 20px;
}

.header a.btn-home{
	padding: 13px 0;
	width: 100%;
	background: #2164EE;
	border-radius: 8px;
	margin: 20px 0 0 0;
	float: left;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: 300;
}

.header-2 a.btn-home{
	padding: 13px 0;
	width: 100%;
	background: #FFD452;
	border-radius: 8px;
	margin: 20px 0 0 0;
	float: left;
	text-align: center;
	color: #000;
	font-size: 18px;
	font-weight: 300;
}

@media only screen and (max-width: 768px) {
	.header h1, .header-2 h1{text-align: center; margin-top: 120px; font-size: 44px;}
	.header p, .header-2 p{text-align: center;}
}


/* ===========================  Banner  ====================================== */

.banner{
	padding-top: calc(90vh - 60px);
	width: 100%;
}

.banner-wrapper{
	width: 100%;
	height: 120px;
	position: relative;
	z-index: 99999;
	border-radius: 12px;
	-webkit-box-shadow: 0px 15px 28px -12px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 15px 28px -12px rgba(0,0,0,0.4);
	box-shadow: 0px 15px 28px -12px rgba(0,0,0,0.4);
		background: #fff;
/*	background: red;*/
}

.banner-wrapper p{
	padding: 20px;
	margin: 20px 0 0 20px;
/*	background: green;*/
}

.banner-wrapper p:before{
	content: "";
	position: absolute;
	top: 45px;
	left: 15px;
	width: 30px;
	height: 30px;
	background: url(../images/arrow.svg) no-repeat;
	background-size: 30px;
}

@media only screen and (max-width: 768px) {
	.banner-wrapper{ 
		height: auto; 
		display: inline-block; 
		padding: 20px 0 35px 0; 
		width: 95%; 
		margin-left: 2.5%;}

	.banner-wrapper p{ margin:10px 0 0 20px;}
	.banner-wrapper p:before { top: 25px;}
}

/* ===========================  Content  ====================================== */

.content{
	width: 100%;
	margin: 100px 0;
}

.content span{
	font-size: 12px;
	text-transform: uppercase;
}

.content h2{
	font-weight: 600;
	font-size: 40px;
	line-height: 52px;
	margin: 0;
	padding: 10px 0 20px 0;
	color: #3B3B3B;
}

.content h4{
	font-size: 28px;
	padding: 20px 0 0 0;
	color: #2164EE;
}

.content a.btn-content{
	padding: 13px 0;
	width: 100%;
	background: #2164EE;
	border-radius: 8px;
	margin: 20px 0 0 0;
	float: left;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: 300;
}

.content img{
	display: block;
	width: 100%;
}

.content img.img-a{
	width: 50%;
	display: block;
	margin: 0 auto;
}

.content img.img-b{
	width: 70%;
	display: block;
	margin: 0 auto;
}


/* ===========================  Brands  ====================================== */

.brands{
	width: 100%;
	margin: 100px 0 100px 0;
}

.brands h3{
	width: 100%;
	text-align: center;
	padding: 20px 0 50px 0;
	font-size: 20px;
}

.brands img{
	display: block;
	height: 50px;
	margin: 0 auto;
}

@media only screen and (max-width: 768px) {
	.brands img{ height: 50px; margin: 20px auto;}
}


/* ===========================  Review  ====================================== */

.review{
	width: 100%;
	margin: 100px 0;
}

.review h3{
	width: 100%;
	text-align: center;
	padding: 20px 0 20px 0;
	font-size: 32px;
	font-weight: 600;
}

.review p{
	width: 80%;
	margin: 0 10%;
	text-align: center;
	margin-bottom: 60px;
}

.review-wrapper{
	width: 100%;
	height: 280px;
	border-radius: 12px;
	background: #F0F0F0;
	padding: 20px;
}

.review-wrapper img.profile-img{
	position: absolute;
	top: -30px;
	width: 100px;
}

.review-wrapper h5{
	text-align: left;
	font-weight: 600;
	font-size: 18px;
	padding: 0 0 0 110px;
	margin: 0 0 0 0;
}

.review-wrapper span{
	padding: 0 0 0 110px;
	margin: 10px 0 0 0;	
}

.review-wrapper p{
	text-align: left;
	padding: 20px 0 0 0;
	font-size: 15px;
}

@media only screen and (max-width: 768px) {
	.review-wrapper{ margin-bottom:50px; }
}


/* ===========================  Banner Big  ====================================== */

.banner-big{
	width: 100%;
	margin: 100px 0;
}

.banner-big img.banner-big-img{
	display: block;
	width: 100%;
}

.banner-big h6{
	text-align: left;
	font-weight: 600;
	font-size: 18px;
	padding: 0 0 0 0;
	margin: 30px 0 20px 0;
}


/* ===========================  Banner Txt  ====================================== */

.banner-txt{
	width: 100%;
	margin: 100px 0;
}

.banner-txt h2{
	width: 100%;
	text-align: center;
	font-weight: 600;
	font-size: 32px;
	padding: 0 0 0 0;
	margin: 30px 0 20px 0;
}

.banner-txt p{
	width: 100%;
	text-align: center;
}

.banner-txt a.btn-center{
	padding: 13px 0;
	width: 40%;
	background: #2164EE;
	border-radius: 8px;
	margin: 20px 0 0 30%;
	float: left;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: 300;
}


/* ===========================  Footer  ====================================== */

.footer{
	width: 100%;
	margin: 100px 0 0 0;
	padding-bottom: 100px;
	background: #F9F9F9;
}

.footer ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer ul li{
	padding: 10px 0;
}

.footer h6{
	width: 100%;
	text-align: left;
	font-weight: 600;
	font-size: 20px;
	padding: 0 0 0 0;
	margin: 50px 0 20px 0;
}

.footer input{
	width: 60%;
	margin: 20px 0 20px 0;
	border-radius: 8px 0 0 8px;
	border: 1px #D5D5D5 solid;
	padding: 10px;
	background: #fff;
}


.footer a.btn-input{
	padding: 8px 0;
	width: 40%;
	background: #2164EE;
	border-radius: 0 8px 8px 0;
	margin: 20px 0 0 0;
	float: right;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: 300;
}


@media only screen and (max-width: 430px) {
	.header h1, .header-2 h1{text-align: center; margin-top: 120px; font-size: 38px; line-height: 50px;}
	.header p, .header-2 p{text-align: center;}
	.content h2, .content p{text-align: center;}
	.content img.img-b{width: 100%; margin: 30px auto 0 auto}
}