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


html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
		font-size:10px;
		text-decoration:none;
		font-family: 'Rubik', sans-serif;
		font-weight: 400;
}

.shadow {
  box-shadow: 0 5px 50px -10px rgba(0, 0, 0, 0.5);
  background-color: #fff;
}
				
.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;
}

.content {
position: relative;
width: calc(100% - 16rem);
padding: 16rem 8rem 8rem 8rem;
z-index: 10;
}


.clients {
width: calc(33.3333% - 2.5rem);
display: inline-block;
margin: 1rem;
filter: grayscale(100%);
border-radius: 50%;
background-color: #FFF;
text-align: center;
}
.clients:hover {
filter: grayscale(0);
transform: scale(1.1);
}
.c-align {
width: 100%;
padding-top: 100%;
position: relative;
}
.c-wrap {
position: absolute;
top: 0; left: 0;right: 0; bottom: 0;
}
/*HEADER*/

header {
	width:  calc(100% - 16rem);
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	padding: 0 8rem 0 8rem;
    background-color: #FFF;
	box-shadow: 0 5px 50px -10px rgba(0,0,0,0.5);
}


header .left  {
float: left;
height: 8rem;
display: table;
width: calc(50% - 10rem - 5px);
}
header .right  {
float: right;
display: table;
height: 8rem;
text-align: right;
}
.logo {
position: absolute;
left: 50%;
top: 2rem;
margin-left: -10rem;
height: 100%;
width: 20rem;
text-align: center;
}
.logo img {
width: 80%;
height: auto;
}
.item-header {
padding-left: 4rem;
display: inline-block;;
background-position: left center;
background-repeat: no-repeat;
background-size: 2rem auto;
margin-right: 4rem;
text-decoration: none;
}






/*MAIN BANNER*/
.main-banner {
width: 100%; 
height: 100vh;
position: relative;
z-index: 1;
left: 0;
top: 0;
}

.txt-banner {
position: absolute;
left: 0;
bottom: 0;
text-align: left;
padding: 8rem;
width: 60%;
z-index: 3;
}
.mask-banner {
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
z-index: 2;
background-color: rgba(0,0,0,.35);
}
.main-banner .slide {
width: 100%; 
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: 1;
padding: 0;
text-align:center;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

.scroll {
width: 4rem;
float: left;
}



/*SLIDES */
.slide-nosotros, .slide-servicios, .slide-clientes, .slide-extras, .slide-frase, .slide-contacto, .slide-cotiza  {
width: calc(100% - 16rem);
position: relative;
text-align: left;
padding: 8rem;
}

.slide-nosotros  {
z-index: 2;
}
.slide-nosotros .txt {
display: inline-block;
vertical-align: middle;
width: 60%;
}
.slide-nosotros .img {
display: inline-block;
vertical-align: middle;
width: calc(40% - 1rem);
text-align: center
}
.benefit-wrap {
display:flex; 
justify-content:space-between; 
width: 100%;
flex-flow: row wrap; 
margin: 10rem 0;
}
.benefit {
float: left;
line-height: 1.6rem !important;
font-weight: 600;
text-transform: uppercase;
background-position: left center;
background-repeat: no-repeat;
background-size: 6rem auto;
padding-left: 8rem;
display: table;
height: 10rem;
}


.gal {
width: 100%; 
}
.gal-box {
width: 33.3333%;
float: left;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}



.slide-servicios {
background-color: #38498D;
padding-top: 16rem;
z-index: 1;
margin-top: -16rem;
}
.slide-servicios .tittle {
display: inline-block;
vertical-align: top;
margin-right: 4rem;
width: calc(20% - 4rem - 5px);
}
.slide-servicios .serv {
display: inline-block;
vertical-align: top;
margin-right: 2rem;
width: calc(20% - 2rem - 5px);
}
.slide-servicios .desc {
display: inline-block;
vertical-align: top;
width: calc(40% - 2rem - 5px);
margin-left: 2rem;
}


.slide-clientes {
background-color: #ADAAA4;
text-align: center;
}

.c-left {
width: calc(50% - 4rem);
margin-right: 8rem; 
float: left;
}
.c-right {
width: calc(50% - 4rem); 
float: right;
}
.slide-extras {
text-align: center;
}

.access {
width: calc(50% - 2rem - .5rem);
margin-right: 4rem;
position: relative;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
vertical-align: top;
}
.access .mask {
width: 100%;
padding-top: 50%;
mix-blend-mode: multiply;
}
.access .txt {
position: absolute;
z-index: 2;
top: 0; 
left: 0; 
bottom: 0;
right: 0;
padding: 4rem;
}




.slide-frase {
background-color: #000;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
height: 30vw;
display: table;
text-align: center;
width: 100%;
padding: 0;
}
.slide-cotiza {
background-color: #33CC00;
text-align: center;
z-index: 3;
}
.what-tittle {
argin-right: 5rem; 
vertical-align: middle; 
display: inline-block; 
font-weight: 500;
}
.slide-contacto {
padding: 0;
width: 100%;
z-index: 2;
}
.slide-contacto .datos {
background-color: #ADAAA4;
float: left;
width: calc(50% - 16rem);
padding: 8rem;
height: calc(35vw - 16rem);
}
.slide-contacto .mapa {
float: right;
width: calc(50% - 16rem);
padding: 8rem;
height: calc(35vw - 16rem);
}


.item-contacto {
padding-left: 4rem;
margin-bottom: 3rem;
width: calc(100% - 4rem);
display: block;
background-position: left top;
background-repeat: no-repeat;
background-size: 2rem auto;
}




/* FONTS */
.t1 {
	font-size:3rem;
	line-height: 4rem;
}
.t2 {
	font-size:2rem;
	line-height: 3rem;
}
.t3 {
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.t4 {
	font-size: 1.2rem;
	line-height: 1rem;
    letter-spacing: .2rem;
    text-transform: uppercase;
}
.t5 {
	font-size: 1rem;
    letter-spacing: .2rem;
    text-transform: uppercase;
}


.white {
	color:#FFF;
}
.black {
color: #333399;
}
.grey {
color: #ADAAA4;
}



/* REDES */


.bt-whatsapp {
position: absolute;
z-index: 4;
right: 8rem;
bottom: 4rem;
width: 5rem;
height: 5rem;
}
.bt-whatsapp:hover {
transform: scale(1.10);
}

.icon-whatsapp {
display: inline-block;
vertical-align: middle;
width: 10rem;
margin-left: 4rem;
height: 10rem;
}
.icon-whatsapp:hover {
transform: scale(1.10);
}



.bt-cotiza {
background-color: #38498D;
color: #FFF;
font-size:1.4rem;
letter-spacing: .2rem;
text-transform: uppercase;
padding: 1rem 2rem;
border-radius: .5rem;
}
.bt-cotiza:hover {
background-color: #33CC00;
transform: scale(1.2) !important;
}


/* FORM*/

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

.field, .area {
	border: none;
	color:#333399;
	width:100%;
	height: 3rem;
	text-decoration:none;
	font-size:1.6rem;
	background-color: transparent;
	border-bottom: solid 1px #999;
	display: block;
	outline:none;
	-webkit-appearance:none;
     -moz-appearance:none;
     appearance:none;
	resize:none;
}
.area {
height: 10rem;
resize: none;
}

.send {
	color:#333399;
background-color: transparent;
	text-decoration:none;
	width: calc(100% - 2px);
	border: #333399 solid 1px;
	display:block;
	cursor:pointer;
	text-align: center;
	height: 4rem;
	font-size: 1.8rem;
	padding: 0 0 0 2rem;
	font-weight: 500;
	-webkit-appearance:none;
 -moz-appearance:none;
 appearance:none;
}

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


.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-wrapper .bx-controls-direction a { 
	 top: inherit;
	 margin-top: 0px; 
	 bottom: 20px;
     display: none;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 30px;
	background: url('images/arrow_left_white.png') no-repeat center center; 
}
.bx-wrapper .bx-next {
	right: 30px;
	background: url('images/arrow_right_white.png') no-repeat center center; 
}

.bx-wrapper .bx-controls-direction a {
	width: 50px !important;
	height: 50px !important;
	background-size: contain;
}

/* PAGER */
.bx-wrapper .bx-pager { 
	display: none;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	background: rgba(255,255,255,.5);
	text-indent: -9999px;
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.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 screen and (max-width: 1250px) {


html, body {
		font-size:9px;
}
.main-banner .slide {
background-attachment: scroll;
}

.slide-servicios .tittle, .slide-servicios .serv {
width: calc(33.3333% - 4rem - 5px);
margin-bottom: 3rem;
}

.slide-servicios .desc {
display: block;
width: 100%;
margin-left: 0;
}

.slide-contacto .datos {
    min-height: calc(35vw - 16rem);
    height: initial;
}

}

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


/*HEADER*/

html, body {
		font-size:10px;
}

header {
	width:  calc(100% - 8rem);
	padding: 0 4rem;
    height: 8rem;
}


header .left, header .right  {
display: none;
}


/*MAIN BANNER*/

.txt-banner {
padding: 4rem;
width: calc(100% - 8rem);
}



/*SLIDES */
.slide-nosotros, .slide-servicios, .slide-extras, .slide-cotiza, .slide-clientes  {
width: calc(100% - 8rem);
padding: 4rem;
}


.slide-nosotros .txt, .slide-nosotros .img {
width: 100%;
margin-bottom: 4rem;
}
.slide-nosotros {
padding-bottom: 12rem;
}

.main-banner .slide {
background-attachment: scroll;
}



.slide-servicios {
padding-top: 4rem;
margin-top: 0;
}
.slide-servicios .tittle, .slide-servicios .serv, .slide-servicios .desc  {
text-align: center;
margin-right: 0;
margin-left: 0;
width: 100%;
}
.slide-servicios .tittle {
margin-bottom: 3rem;
}
.slide-servicios .desc  {
margin-top: 3rem;
}


.c-left, .c-right {
width: 100%;
margin-right: 0; 
float: none;
}


.access {
width: 100%;
margin-right: 0;
margin-bottom: 3rem;
}

.access .mask {
padding-top: 75%;
}



.slide-frase {
height: 100vw;
}


.slide-contacto .datos, .slide-contacto .mapa {
float: none;
width: calc(100% - 8rem);
padding: 4rem;
height: initial;
min-height: initial;
}


.benefit-wrap {
margin: 4rem 0;
}
.brake {
display: none;
}

.gal {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
}
.what-tittle {
argin-right: 0;
margin-bottom: 4rem;
}
.main-banner .slide {
background-attachment: scroll;
}
.icon-whatsapp {
margin-left: 0;
}


.field_box, .area_box {
width: 100%;
display: block;
}

}