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

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{margin: 0 0 0 0; padding: 0 0 0 0; color: #FFFFFF; font-family: 'Roboto', sans-serif; font-weight: normal; line-height: 1; background-color: #161617; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;}

h1, h2, h3, h4, h5, h6, ul, li, a, p, figure{
padding: 0 0 0 0; margin: 0 0 0 0; list-style-type: none; font-weight: normal; font-size: inherit; line-height: normal;}

a{text-decoration: none;}
a:hover{text-decoration: none; color: inherit;}

button:focus{outline: none !important;}
button{background: none; border: none; color: #FFFFFF;}
a:focus{outline: none !important;}
a{background: none; border: none; color: #FFFFFF;}
a:visited{color: #FFFFFF;}
a:link{color: #FFFFFF;}

img{display: block; max-width: 100%; height: auto; border: 0; border: none;}
img.center-img{margin: 0 auto;}

.btn_{display: inline-block; color: #FFFFFF; font-size: 18px; font-weight: 700; height: 34px; line-height: 34px; padding: 0 27px; background-color: #39B24A; text-align: center; border-radius: 50px; transition-property: background; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 1, 1);}
.btn_:hover{color: #FFFFFF; background-color: #35c449;}

h1, h2, h3, h4, h5, h6{text-align: center;}
h1{color: #FFFFFF; font-size: 77px; font-weight: 900; margin-top: 50px;}
h2{color: #FFFFFF; font-size: 27px; font-weight: 300;}
h3{color: #FFFFFF; font-size: 43px; line-height: 34px; font-weight: 700; background: -webkit-linear-gradient(#FFFFFF, #808080); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
p{font-size: 19px; font-weight: 400; line-height: 26px; margin-bottom: 25px; text-align: center; color: #FFFFFF;}
p:last-child{margin-bottom: 0;}

/*BACKGROUND COLORS*/
.bg-000000{background-color: #000000 !important;}
.bg-161617{background-color: #161617 !important;}
.bg-F2333D{background-color: #F2333D !important;}
/*BACKGROUND COLORS*/

/*COLORS*/
.color-FFFFFF{color: #FFFFFF;}
.color-808080{color: #808080;}
.color-F2333D{color: #F2333D;}
.color-39B24A{color: #39B24A;}
/*COLORS*/

.content-top{padding-top: 150px;}
.content-bottom{padding-top: 130px; padding-bottom: 130px;}

.section-title{width: 100%; min-height: 68px; margin-top: 50px; margin-bottom: 37px;}
.section-title h3.style-2{line-height: 45px;}

/*BOOSTRAP*/
.container-fluid{max-width: 1920px;}
.container{
	max-width: 980px;
	padding-right: 9px;
    padding-left: 9px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
	padding-right: 9px;
    padding-left: 9px;
}
.row{
	margin-left: -9px;
	margin-right: -9px;
}
/*BOOSTRAP*/

/*HEADER*/
.main-header{position: relative; top: 0; left: 0; z-index: 998; background-color: #000000; border-bottom: solid 1px #2E2E2E;}
.main-header .content-header{position: relative; width: 100%; /*max-width: 100px;*/ margin: 0 150px; padding: 0px 0 0px 0;}
.main-header .main-logo{width: auto; height: 85px; display: inline-block;}
.main-header .main-nav{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main-header .main-nav ul{text-align: center;}
.main-header .main-nav ul li{display: inline-block; font-weight: 500; font-size: 18px; margin: 0 17px;}
.main-header .main-nav ul li a{display: block; color: #FFFFFF; font-weight: 500; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);}
.main-header .main-nav ul li a:hover{color: rgb(255,255,255, 0.7);}
.main-header .btn_{position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.main-header .btn_ img{display: none;}
/*HEADER*/

/*OPEN MENU*/
.openmenu{position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 998; width: 52px; height: 52px; background-color: transparent; border: solid 2px #FFFFFF; border-radius: 50%; display: none;}
.openmenu span{position: absolute; left: 12px; width: 23px; height: 2px; background-color: #FFFFFF; transition: .1s;}
.openmenu span:first-child{top: 16px;}
.openmenu span:nth-child(2){top: 23px;}
.openmenu span:nth-child(3){top: 30px;}

.openmenu .first-child.active{transform: rotate(45deg); top: 24px; left: 13px;}
.openmenu .third-child.active{transform: rotate(-45deg); top: 24px; left: 13px;}
/*OPEN MENU*/

/*SITE MENU*/
.site-menu{position: fixed; top: -100%; left: 0; width: 100%; height: 100%; z-index: 997; background-color: rgb(0,0,0, 1); transition: 0.3s;}
.site-menu.active{top: 0;}
.site-menu ul{position: absolute; left: 170px; top: calc(50% + 43px); transform: translate(0, -50%);}
.site-menu ul li{display: block; text-align: left; font-size: 35px; margin: 20px 0;}
.site-menu ul li a{color: #FFFFFF; font-weight: 500; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);}
.site-menu ul li a:hover{color: rgb(255,255,255, 0.7);}

.site-menu .btn_{font-size: 18px; height: 40px; line-height: 40px; padding: 0 35px;}
.site-menu .btn_:hover{color: rgb(255,255,255, 1);}
/*SITE MENU*/

/*HERO*/
#hero{position: relative; width: 100%;  height: calc(100vh - 100px);  background-color: #000000; padding: 50px 0 60px 0;}
#hero .content-hero{position: relative; height: calc(100% - 0px);  margin: 0 40px; border-radius: 35px; background-image: url("../images/banner_1.webp"); background-position: center center; background-size: cover; background-repeat: no-repeat; overflow: hidden;}
#hero .content-hero .overlay{position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-color: rgb(0,0,0, 0.2);}
#hero .content-hero h2{margin-bottom: 50px;}
/*HERO*/


@media (max-width: 767px){

#hero{position: relative; width: 100%;  height: calc(100vh - 160px);  background-color: #000000; padding: 20px 0 20px 0;}
#hero .content-hero{position: relative; height: calc(80% - 0px);  margin: 0 40px; border-radius: 35px; background-image: url("../images/redes_.jpg"); background-position: center center; background-size: 110% !important; background-repeat: no-repeat; overflow: hidden;}

}	

/*BOX*/
.box-1{position: relative; width: 100%; max-width: 588px; margin: 0 10px 20px 10px; padding: 0 60px 30px 60px; background-color: #000000; border-radius: 21px;}
.box-2{position: relative; width: 100%; max-width: 370px; margin: 0 10px 20px 10px; padding: 0 30px 30px 30px; background-color: #000000; border-radius: 21px;}
.box-3{position: relative; /*width: 100%; max-width: 100%;*/ margin: 0 10px 20px 10px; padding: 0 30px 30px 30px; background-color: #000000; border-radius: 21px;}
.box-important h3{background: inherit; -webkit-text-fill-color: #FFFFFF;}
.box-important .icon-important{width: 130px; margin: 0 auto; margin-bottom: 45px;}

.icon-date{width: 160px; height: 160px; background-color: #FFFFFF; border-radius: 35px; margin-bottom: 25px;}
.icon-date .day{display: block; font-size: 32px; font-weight: 300; color: #BE272D; text-align: center; margin-bottom: 10px;}
.icon-date .day-number{display: block; font-size: 85px; font-weight: 100; letter-spacing: -10px; margin-left: -10px; color: #000000; text-align: center;}
/*BOX*/

/*QUIENES SOMOS*/
#quienes-somos .download-app-nav{text-align: center; padding-top: 20px;}
#quienes-somos .download-app-nav li{display: inline-block; margin: 0 18px;}
#quienes-somos .download-app-nav li svg{fill: #1A1A1A; width: 63px; height: 63px; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);}
#quienes-somos .download-app-nav li:hover svg{fill: #3f3e3e;}
p.txt-disclaimer{margin-top: 60px;}
/*QUIENES SOMOS*/

/*SERVICIOS*/
#servicios .img-horario-disponible{max-width: 90%; margin: 0 auto;}
/*SERVICIOS*/

/*CLIENTES*/
#clientes .box-3{padding-top: 30px; padding-bottom: 70px;}
#clientes .clients-logos{text-align: center;}
#clientes .section-title{margin-top: 0;}
#clientes .clients-logos li{display: inline-block; margin: 0 50px;}
#clientes .clients-logos li img{height: 63px;}
#clientes .clients-logos li a{transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);}
#clientes .clients-logos li a:hover{opacity: 0.7;}
/*CLIENTES*/


/*LOADING*/
#preloader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; z-index: 9999;}

.loader{width: 16px; height: 16px; border-radius: 50%; display: block; margin:15px auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000000; box-shadow: -24px 0 #FFF, 24px 0 #FFF; box-sizing: border-box; animation: shadowPulse 2s linear infinite;}

.loader-logo{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 260px;  animation: loaderlogo 2s linear infinite;}

@keyframes loaderlogo {
	0% {
		opacity: 0;
  	}
	 50% {
		opacity: 0.5;
	  }
	 100% {
		opacity: 1;
	  }
}

@keyframes shadowPulse {
  33% {
    background: #FFF;
    box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
  }
  66% {
    background: #FF3D00;
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  }
  100% {
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 #9D7500;
  }
}
/*LOADING*/

@media (min-width: 1919px){
	.main-header .content-header{max-width: 1500px;}
}

@media (max-width: 1024px){
	.main-header .content-header{margin: 0 70px;}
	#hero .content-hero{margin: 0 0 0 0;}
}

@media (max-width: 980px){
	.main-header .main-logo{display: block; margin: 0 auto;}
	.main-header .main-nav{display: none;}
	.openmenu{display: block;}
}



@media (max-width: 767px){
	.content-top{padding-top: 60px;}
	
	.section-title{min-height: inherit; margin-top: 0;}
	
	.main-header .content-header{margin: 0 30px;}
	
	#hero{height: calc(100vh - 110px); padding: 30px 0 25px 0;}
	
	.box-1{max-width: inherit; width: calc(100% - 30px); margin: 0 15px 25px 15px; padding: 30px 60px 30px 60px;}
	.box-2{max-width: inherit; width: calc(100% - 30px); margin: 0 15px 25px 15px; padding: 30px 60px 30px 60px;}
	.box-3{max-width: inherit; width: calc(100% - 30px); margin: 0 15px 0 15px; padding: 30px 30px 30px 30px;}
	
	p.txt-disclaimer{margin-top: 30px;}
}

@media (max-width: 620px){
	#hero .content-hero{background-size: cover; border-radius: 25px;}
}

@media (max-width: 576px){
	h1{font-size: 50px; margin-top: 0;}
	h2{font-size: 19px;}
	
	.content-bottom{padding-bottom: 100px;}
	
	.main-header .content-header{margin: 0 20px;}
	.main-header .main-logo{height: 62px;}
	.main-header .btn_{padding: 0; width: 52px; height: 52px; background-color: transparent;}
	.main-header .btn_ span{display: none;}
	.main-header .btn_ img{display: block; width: 36px; margin-top: 8px; margin-left: 10px;}
	
	.openmenu{border: none;}
	.openmenu span{left: 5px;}
	.openmenu span:first-child{top: 20px;}
	.openmenu span:nth-child(2){top: 27px;}
	.openmenu span:nth-child(3){top: 34px;}
	.openmenu .first-child.active{top: 27px; left: 5px;}
	.openmenu .third-child.active{top: 27px; left: 5px;}
	
	.site-menu ul{left: 25px;}
	.site-menu ul li{font-size: 29px;}
	
	#hero{height: calc(100vh - 86px); padding: 20px 0 25px 0;}
	
	.box-1{padding: 40px 25px 40px 25px;}
	.box-2{padding: 40px 25px 40px 25px;}

	#clientes .clients-logos li{margin: 0 10px;}
	#clientes .clients-logos li img{height: 34px;}
	#clientes .box-3{padding: 40px 25px 40px 25px;}
}

@media (max-width: 490px){
	
}