@charset "utf-8";
/* 
Plantilla:  Hero Section
Autor:      OncemediaMX / Miguel Solorio
Website:    oncemedia.com.mx
Fecha:      Abril 2021
------------------------------------------------------------*/
#hero2 {	
  	width: 100%;
  	height: 350px;
   	background: var(--color_cian);
}

#hero2 img {
	z-index: 0;
}

#hero2 .overlay {
	width: 100%;
	height: inherit;
	position: absolute;
	top:0;
	left: 0;
	background: var(--color_faint_h);
	opacity: .25;
	z-index: 1;
}

#hero2 .container {
	position:absolute;
  	z-index: 3;
  	padding-top: 72px;
	padding-left: 10%;
}


#hero2 h1 {
  	margin: 0 0 10px 0;
  	font-size: var(--font_size_xl);
  	font-weight: 700;
  	line-height: 56px;
  	color: var(--color_body);
}

#hero2 h2 {
  	color: var(--color_body);
  	margin-bottom: 50px;
  	font-size: var(--font_size_r);
}


#hero {	
  	width: 100%;
  	height: 600px;
   	background: var(--color_cian);
	justify-content: center;
}

#hero .overlay {
	width: 100%;
	height: inherit;
	position: absolute;
	top:0;
	left: 0;
	background: var(--color_faint_h);
	opacity: .25;
	z-index: 1;
}

#hero .container {
	position:absolute;
  z-index: 3;
  padding-top: 72px;
	padding-left: 10%;
}

#hero img{	
  	/* width: 100%; */
	display: flex;
  	height: auto;
	justify-content: center;
}



#hero h1 {
  margin: 0 0 10px 0;
  font-size: var(--font_size_xl);
  font-weight: 700;
  line-height: 56px;
  color: var(--color_body);
}

#hero h2 {
  color: var(--color_cian);
  margin-bottom: 50px;
  font-size: var(--font_size_r);
  border-left: 2px solid var(--color_body);
  padding-left: 10px;
}

#hero .btn-get-started {
  font-family: var(--font_titulo);
  font-weight: 500;
  font-size: var(--font_size_r);
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 11px 28px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px 0 0 0;
  color: var(--color_body);
  background: var(--color_cian);
}

#hero .btn-get-started:hover {
  background: var(--color_azul);
}

#hero .btn-watch-video {
  font-size: var(--font_size_n);
  display: flex;
  align-items: center;
  transition: 0.5s;
  margin: 10px 0 0 25px;
  color: var(--color_body);
  line-height: 1;
}

#hero .btn-watch-video i {
  line-height: 0;
  color: var(--color_body);
  font-size: var(--font_size_l);
  transition: 0.3s;
  margin-right: 8px;
}

#hero .btn-watch-video:hover i {
  color: var(--color_soft);
}

#hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 991px) {
  #hero {
    /* height: 100vh; */
    text-align: center;
  }
  #hero .animated {
    -webkit-animation: none;
    animation: none;
  }
  #hero .hero-img {
    text-align: center;
  }
  #hero .hero-img img {
    width: 50%;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: var(--font_size_m);
    line-height: 36px;
  }
  #hero h2 {
    font-size: var(--font_size_n);
    line-height: 24px;
    margin-bottom: 30px;
  }
  #hero .hero-img img {
    width: 70%;
  }
}

@media (max-width: 575px) {
  #hero .hero-img img {
    width: 80%;
  }
  #hero .btn-get-started {
    font-size: var(--font_size_n);
    padding: 10px 24px 11px 24px;
  }
}

@-webkit-keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}