@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
/* CSS Document */


html, body {
  padding: 0;
  margin: 0;
  min-height: 100%;
  width: 100%;
    font-size:10px;
text-decoration:none;
    font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
        background-color:#FFF;
        color: #3F3F3F;
}
			
.animation {
		-webkit-transition: all .25s ease-out;
  	-moz-transition: all .25s ease-out;
  	-o-transition: all .25s ease-out;
  	transition: all .25s ease-out;
}
.main-align {
display: table;
width: 100%;
height: 100%;
}
.align {
	display: table-cell; 
	vertical-align: middle;
}

/*HEADER*/

header {
	width:  calc(100% - 16rem);
	height: 8rem;
	position: fixed;
	top: 4rem;
	left: 4rem;
	padding: 0 4rem;
    background-color: #FFF;
    display: table;
    z-index: 20;
}
.shadow {
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.1);
}


.logo {
	float: left;
	display: table;
	overflow: hidden;
	height: 100%;
    width: 26rem;
}
.logo img {
width: 100%;
height: auto;
}

.nav {
	float: right;
	width: calc(100% - 28rem);
	text-align: right;
	height: 100%;
	display: table;
}

.menu {
	font-size:1.2rem;
    font-weight: 500;
    color:#005681;
	text-decoration:none;
	letter-spacing:.1rem;
	margin: 0 4rem 0 0;
	vertical-align: middle;
	display: inline-block;
	cursor: pointer;
    text-transform: uppercase;
}




.icon-close, .icon-menu {
position: initial;
display: inline-block;
vertical-align: middle;
color: transparent !important;
text-decoration: none;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
width: 4rem;
height: 4rem;
}

.icon-menu {
display: none;
position: absolute;
left: 2rem;
top: 2rem;
color: #666;
background-image: url(images/icon-menu.svg?v=1.3);
}

.icon-close {
display: none;
position: absolute;
top: 3rem;
right: 2rem;
background-image: url(images/icon-close.svg?v=1.2);
}




/*FOOTER*/

footer {
width: calc(100% - 8rem);
position: relative;
padding: 4rem;
background-color: #33FFCC;
}

footer .top {
width:  calc(100% - 8rem);
padding: 8rem 4rem;
}
footer .top .left {
display: inline-block;
vertical-align: middle;
width: 50%;
padding-right: 10rem;
}
footer .top .right {
display: inline-block;
vertical-align: middle;
width: calc(50% - 10.5rem);
}
footer .bottom {
background-color: #FFF;
width:  calc(100% - 8rem);
padding: 0 4rem;
height: 8rem;
display: table;
}
.footer-column {
background-position: left top;
background-repeat: no-repeat;
background-size: 2.5rem auto;
padding-left: 5rem;
display: inline-block;
vertical-align: top;
text-align: left !important;
margin-right: 6rem;
}




/*MAIN BANNER*/


.main-banner {
width: 100%; 
height: calc(100vh - 8rem);
position: relative;
z-index: 3;
overflow:visible;
background-color: #EBEEFB;
background-image: url("images/texture-banner-bottom-left.svg"), url("images/texture-banner-top-right.svg");
background-position: left bottom, top right;
background-repeat: no-repeat;
background-size: 8% auto, 65% auto;
}
.interior-banner {
width: 100%; 
height: 100vh;
position: relative;
z-index: 2;
overflow: hidden;
background-color: #005681;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.banner-mask {
background-color: rgba(0,86,129,.65); 
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
.banner-txt {
position: absolute;
top: 8rem;;
left: 8rem;
bottom: 8rem;
width: 35%;
z-index: 2;
}

.bl-small {
position: absolute;
bottom: 0;
z-index: 3;
right: 17.5%;
width: 25%;
}
.bl-medium {
position: absolute;
bottom: 0;
z-index: 2;
right: 0;
width:30%;
}
.bl-large {
position: absolute;
bottom: 0;
z-index: 1;
right: 24%;
width: 17.5%;
}
.couple {
position: absolute;
bottom: -4rem;
z-index: 5;
left: 50%;
margin-left: -10%;
width: 20%;
}
.city {
position: relative; 
width: 100%; 
height: 100%;
}
.ben-con {
display: flex; 
flex-direction: row-reverse; 
justify-content: space-between;
}
.benefit {
display: inline-table;
vertical-align: top;
text-align: left;
height: 10rem;
}
.icon-benefit {
display: inline-table;
vertical-align: middle;
border-radius: 50%;
border:solid .4rem #3DB9EF;
width: 6rem;
height: 6rem;
text-align: center;
margin-right: 2rem;
}
.icon-benefit img {
width: 70%;
height: auto;
margin-top: 1rem;
}
.txt-benefit {
display: inline-block;
vertical-align: middle;
width: calc(100% - 11.3rem);
}


/*SLIDES */

.slide-intro, .slide-about, .slide-stats, .slide-testimonials, .slide-phrase, .slide-benefits {
width: calc(100% - 16rem);
padding: 8rem;
text-align: left;
position: relative;
z-index: 2;
background-color: #FFF;
}
.slide-intro, .slide-about {
padding-bottom: 0;
}
.slide-intro {
background-image: url("images/texture-slide-top-left.svg");
background-position: top left;
background-repeat: no-repeat;
background-size: 33% auto;
}
.slide-intro .patch {
background-color: #005681;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 8rem;
}
.slide-about .patch {
background-color: #EBEEFB;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 8rem;
}
.slide-stats {
background-color: #005681;
padding-top: 12rem;
text-align: center;
}
.slide-phrase {
background-color: #005681;
text-align: center;
width: 100%;
padding: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.slide-benefits {
padding-top: 0;
background-color: #EBEEFB;
}


.testimonio {
margin: auto;
max-width: 90rem;
}


/* CONTENIDO */
.phrase-wrapper {
background-color: rgba(0,86,129,.65); 
width: calc(100% - 16rem); 
height: calc(100% - 32rem); 
padding: 16rem 8rem;
}
.phrase-margin {
width: 50%; 
margin: auto;
}
.content {
width: calc(100% - 16rem);
padding: 20rem 8rem 8rem 8rem;
background-color: #EBEEFB;
}
.content-contact {
width: calc(100% - 16rem);
padding: 20rem 8rem 0 8rem;
background-color: #33FFCC;
}

.intro-img {
display: inline-block; 
vertical-align: top; 
background-color: antiquewhite; 
width: calc(55% - 20.5rem); 
border-radius: 1rem; 
position: relative; 
z-index: 2;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.about-img {
display: inline-block; 
vertical-align: top; 
background-color: antiquewhite; 
width: calc(55% - 20.5rem); 
border-radius: 1rem; 
position: relative; 
z-index: 2;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.intro-txt {
display: inline-block; 
vertical-align: top; 
width: 45%; 
padding: 10rem; 
position: relative; 
z-index: 3;
}
.about-txt {
display: inline-block; 
vertical-align: top; 
width: 45%; 
padding: 0 20rem 0 0; 
position: relative; z-index: 3;
}
.test-right {
float: right; 
width: 50%;
}
.test-left {
float: left;
width: 50%;
}

.contact-txt {
width: calc(40% - 2.5rem);
margin-right: 5rem;
float: left;

}
.contact-form {
width: calc(60% - 2.5rem);
float: right;
}


.contact-column {
background-position: left top;
background-repeat: no-repeat;
background-size: 2.5rem auto;
padding-left: 5rem;
vertical-align: top;
display: block;
text-align: left !important;
margin-bottom: 3rem;
}


.stat {
display: inline-block;
vertical-align: top;
margin: 0 5rem;
background-image: url("images/icon-plus.svg");
background-position: left top;
background-repeat: no-repeat;
background-size: 10rem auto;
padding: 2rem 0 0 8rem;
text-align: left;
}
.stat-num {
width: 100%;
}
.stat-txt {
width: 100%;
}

.serv-img, .serv-img-mobile {
vertical-align: middle; 
display: inline-block; 
width: 50%;
background-color: aliceblue;
border-radius: 2rem;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.serv-img-mobile {
display: none;
}
.serv-img-wrapper {
width: 100%;
padding-top: 60%;
}
.serv-txt {
vertical-align: middle; 
display: inline-block; 
width: calc(50% - 16.5rem);
padding: 8rem;
text-align: left;
}
.serv-box {
width: calc(33.3333% - 16rem); 
float: left; 
height: calc(25vw - 16rem); 
padding: 8rem;
}



.thumb {
float: left;
width: calc(33.3333% - 8rem);
margin-right: 6rem;
padding: 2rem;
background-color: #FFF;
border-radius: 1rem;
text-decoration: none;
margin-bottom: 6rem;
}
.thumb:hover {
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.1);
transform: scale(1.05);
}
.thumb-img {
width: 100%;
padding-top: 60%;
background-color: aliceblue;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.thumb-txt {
width: 100%;
color: #005681;
text-decoration: none;
text-align: left;
padding: 2rem 0;
height: 6rem;
}

.article-content {
margin: auto;
width: 100%;
max-width: 100rem;
margin-bottom: 8rem;
text-align: center;
}
.article-relatives {
margin: auto;
width: 100%;
text-align: center;
}
.client-logo {
ertical-align: middle; 
display: inline-block; 
width: calc(25% - 5rem);
margin-right: 6rem;
background-color: aliceblue;
border-radius: 2rem;
color: transparent;
text-decoration: none;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.client-logo-wrapper {
width: 100%;
padding-top: 100%;
}


/* FONTS */

.t1 {
	font-size:5rem;
	line-height: 5rem;
}
.t2 {
	font-size:3rem;
	line-height: 3rem;
}
.t3 {
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.t4 {
	font-size:1.2rem;
    letter-spacing: .2rem;
	line-height: 1.6rem;
}
.t5 {
	font-size:2.4rem;
	line-height: 3rem;
}
.t6 {
	font-size:10rem;
	line-height: 8rem;
}
.t7 {
	font-size:2rem;
	line-height: 3rem;
}


.white {
	color:#FFF;
}
.black {
color: #005681;
}
.green {
color: #33FFCC;
}
.blue {
color: #0099CC;
}

/* REDES */


.whatsapp {
height: 10rem;
color: #005681;
background-position: left center;
background-repeat: no-repeat;
background-size: auto 100%;
background-image: url(images/icon-whatsapp.svg);
padding-left: 12.5rem;
display: inline-block;
vertical-align: middle;
text-decoration: none; 
font-weight: 100;
font-size: 3.4rem;
line-height: 3rem;
} 
.whatsapp:hover {
transform: scale(1.1);
} 

.bt-home {
display: inline-block;
vertical-align: middle;
width: 2rem;
height: 2rem;
background-image: url("images/icon-home-black.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
color: transparent;
text-decoration: none;
margin-right: 4rem;
}




.bt-green, .bt-blue, .bt-clientes, .bt-cotiza {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: .1rem;
text-decoration: none;
padding: 1.2rem 2rem 0 2rem;
height: 2.8rem;
color: #005681;
background-color: #33FFCC;
display: inline-block;
font-weight: 500;
}
.bt-clientes {
background-color: transparent;
border: .1rem solid #005681;
height: 2.6rem;
margin-right: 2rem;
}
.bt-blue {
color: #33FFCC;
background-color: #005681;
}
.bt-green:hover, .bt-blue:hover {
transform: scale(1.1);
}

/* FORM*/

.field_box, .area_box {
text-align: left;
background-color: #FFF;
width: calc(50% - 3rem - .5rem);
margin: 0 2rem 2rem 0;
display: inline-block;
padding: 1rem;
}
.area_box {
width: calc(100% - 2rem);
display: block;
margin: 0 0 2rem 0;
}


.field, .area, .drop {
	border: none;
	color:#005681;
	width:100%;
	height: 3rem;
	text-decoration:none;
	font-size:1.6rem;
	background-color: transparent;
	border-bottom: solid .1rem #005681;
	display: block;
	outline:none;
	-webkit-appearance:none;
 -moz-appearance:none;
 appearance:none;
	resize:none;
}
.drop {
background-image: url("images/icon-drop.svg");
background-position: right center;
background-repeat: no-repeat;
background-size: 2rem auto;
max-width: 30rem;
margin: auto;
display: inline-block;
}
.area {
height: 12rem;
resize: none;
}

.send_wrapper {
margin: auto; 
width: 50%;
}
.send {
	color:#FFF;
    background-color: #005681;
	text-decoration:none;
	width: 100%;
	border: none;
	display:block;
	cursor:pointer;
	height: 6rem;
	font-size: 1.2rem;
	padding: 0;
    text-align: center;
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

.send:hover {
background-color: #AB2021;
transform: scale(1.025);
}


.result_box {
width: 100%; 
min-height: 300px; 
text-align: center;
display: table;
}



	label.error  {
		color: red;
		font-style: italic; 
		display:inline-block;
	}
	  
	form  label.error  {
		display:none !important;
	}
	  
	form  input.error,
	form  textarea.error,
	form  select.error{
		background-color:#FFC6C6 !important;
	}





.panelBaner {
	position: relative;
}

.bx-controls {
    z-index: 6 !important;
    position: absolute !important;
    right: 8rem !important;
    bottom: 6rem !important;
}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-controls-direction {
    display: inline-block;
    vertical-align: middle;
}
.bx-wrapper .bx-controls-direction a {
    display: inline-block;
	width: 4rem !important;
	height: 3rem !important;
    color: transparent;
    text-decoration: none;
    background-size: 100% auto;
}

.bx-wrapper .bx-prev {
	background: url('images/arrow-left-green.svg') no-repeat center center; 
    margin-right: 4rem;
}
.bx-wrapper .bx-next {
	background: url('images/arrow-right-green.svg') no-repeat center center; 
}



/* PAGER */
.bx-wrapper .bx-pager { 
	display: inline-block;
    vertical-align: middle;
    margin-right: 4rem;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	background: rgba(255,255,255,.5);
	text-indent: -9999px;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
.bx-pager-item {
display: inline-block;
vertical-align: middle; 
margin: .5rem;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #fff;
}

.panelBaner .bx-wrapper, .panelBaner .bx-viewport, .panelBaner .boxSlider, .panelBaner .slide{
	position:absolute !important;
	left:0px;
	top:0px;
	width:100% !important;
	height:100% !important;
}
.panelBaner .bx-wrapper{
	z-index:0;
}
@media screen and (max-width: 600px) {
.panelBaner .bx-controls .bx-controls-direction {
	display:none !important
}
}



@media (min-width: 651px) and (max-width: 650px) {
html, body {
	zoom: 90%;
	-moz-zoom: 90%;
	-webkit-zoom: 90%;
}
}

@media (min-width: 1500px) {
html, body {
	zoom: 110%;
	-moz-zoom: 110%;
	-webkit-zoom: 110%;
}
}

@media (min-width: 1700px) {
html, body {
	zoom: 120%;
	-moz-zoom: 120%;
	-webkit-zoom: 120%;
}	
}

@media (min-width: 2000px) {
html, body {
	zoom: 125%;
	-moz-zoom: 125%;
	-webkit-zoom: 125%;
}
}

@media (min-width: 2400px) {
html, body {
	zoom: 130%;
	-moz-zoom: 130%;
	-webkit-zoom: 130%;
}
}

@media (min-width: 2800px) {
html, body {
	zoom: 137.5%;
	-moz-zoom: 137.5%;
	-webkit-zoom: 137.5%;
}
}




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


.icon-close, .icon-menu  {
display: block;
}



/*HEADER*/


header {
	width:  calc(100% - 8rem);
	top: 2rem;
	left: 2rem;
	padding: 0 2rem;
}


.logo {
    width: 20rem;
    margin: auto;
    float: none;
}


.nav {
	width: 100%;
	float: none;
	position: fixed;
	text-align: center;
	background-color: #005681;
	min-height: 100vh;
	z-index: 100;
	top: 0;
	left: -100%;
}

.menu {
	font-size:2rem;
	margin: 4rem 0;
	display: block;
	color: #FFF !important;
}



/*FOOTER*/


footer {
width: calc(100% - 4rem);
padding: 2rem;
}

footer .top {
width:  calc(100% - 4rem);
padding: 2rem;
margin-bottom: 4rem;
}
footer .top .left {
width: 100%;
padding-right: 0;
}
footer .top .right {
width: 100%;
margin-top: 4rem;
}
footer .bottom {
width:  calc(100% - 4rem);
padding: 2rem;
height: initial;
}
.footer-column {
display: block;
margin-right: 0;
margin-bottom: 2rem;
}



/*MAIN BANNER*/


.main-banner {
height: calc(100vh - 8rem);
min-height: 74rem;
background-position: left bottom, bottom right -12.5rem;
background-size: 5rem auto, 30rem auto;
}


.banner-txt {
top: 14rem;;
left: 2rem;
text-align: center;
right: 2rem;
bottom: initial;
width: calc(100% - 4rem);
}

.bl-small {
right: 40%;
width: 60%;
}
.bl-medium {
right: 0;
width:70%;
}
.bl-large {
right: 57.5%;
width: 40%;
}
.couple-1 {
margin-left: -25%;
width: 50%;
}

/*
.benefit {
display: inline-block;
vertical-align: top;
width: calc(20% - .5rem);
text-align: center;
}
*/

/* FONTS */

.t1 {
	font-size:3.6rem;
	line-height: 4rem;
}
.t2 {
	font-size:2.8rem;
	line-height: 2.8rem;
}
.t6 {
	font-size:7rem;
	line-height: 6rem;
}

.testimonio .t3 {
font-size: 1.6rem !important;
}

/*SLIDES */

.slide-intro, .slide-about, .slide-stats, .slide-testimonials, .slide-benefits {
width: calc(100% - 4rem);
padding: 4rem 2rem;
}
.slide-intro {
background-image: none;
padding-top: 6rem;
}
.slide-intro .patch, .slide-about .patch {
display: none;
}

.slide-benefits {
text-align: center;
}





/* CONTENIDO */

.content {
width: calc(100% - 4rem);
padding: 20rem 2rem 4rem 2rem;
}
.content-contact {
width: calc(100% - 4rem);
padding: 20rem 2rem 0 2rem;
}



.contact-txt, .contact-form {
width: 100%;
margin-right: 0;
float: none;
}




.stat {
display: block;
margin: 5rem 0;
background-size: 5rem auto;
padding: 0 0 0 4rem;
}
.stat-num {
float: left;
margin-right: 1rem;
width: 10rem;
}
.stat-txt {
float: left;
width: calc(100% - 11rem);
}

.stat-num .t6 {
	font-size:5rem;
}
.stat-txt .t5 {
	font-size:2rem;
}

.serv-img, .serv-img-mobile {
width: 100%;
margin-bottom: 2rem;
}
.serv-txt {
width: 100%;
padding: 0;
}
.serv-box {
width: calc(100% - 4rem); 
float: none; 
height: initial; 
padding: 4rem 2rem;
}


.client-logo {
width: calc(50% - 4rem);
margin: 2rem;
}

.intro-img, .about-img {
width: 100%; 
margin-bottom: 2rem;
}
.intro-txt, .about-txt {
width: 100%; 
padding: 0; 
text-align: center;
margin-bottom: 4rem;
}
.test-left, .test-right {
loat: none; 
width: 100%;
margin-bottom: 4rem;
}


/* FORM*/

.field_box, .area_box {
width: calc(100% - 4rem);
margin: 0 2rem 0 0;
}


.phrase-wrapper {
background-color: rgba(0,86,129,.5); 
width: calc(100% - 4rem); 
height: calc(100% - 16rem); 
padding: 8rem 2rem;
}
.phrase-margin {
width: 100%; 
}

.whatsapp {
font-size: 2.6rem;
line-height: 2.6rem;
height: 8rem;
padding-left: 10rem;
} 

.thumb {
float: none;
width: calc(100% - 4rem);
margin-right: 0;
margin-bottom: 4rem;
}
.city {
margin: auto;
width: 80%; 
}
.couple {
margin-left: -25%;
width: 60%;
}
.slide-testimonials {
text-align: center !important;
}
.bt-clientes {
border: .1rem solid #FFF;
color: #FFF !important;
display: block;
margin: auto;
margin-top: 4rem;
margin-bottom: 2rem;
max-width: 20rem;
}
.bt-cotiza {
display: block;
margin-right: 0;
margin: auto;
max-width: 20rem;
}

.serv-img-mobile {
display: block;
}
.serv-img-hide {
display: none;
}


.ben-con {
display: initial; 
flex-direction: initial; 
justify-content: initial;
}
.benefit {
text-align: center;
height: initial;
width: calc(50% - 5px);
margin-bottom: 4rem;
}
.icon-benefit {
margin: auto;
margin-bottom: 2rem;
margin-right: 0;
}
.txt-benefit {
display: block;
width: 100%;
}

}