html, body {
  width: 100% !important;
  overflow-x: hidden;
}
.a_none_style{
  text-decoration: none;
}
/*********************
TYPOGRAPHY 
*********************/
@font-face {
  font-family: 'Akzidenz Grotesk BQ Super';
  src: url("fonts/AkzidenzGroteskBQ-Super.otf"); 
}
@font-face {
  font-family: 'Manrope Bold';
  src: url("fonts/Manrope-Bold.ttf"); 
}
@font-face {
  font-family: 'Manrope ExtraBold';
  src: url("fonts/Manrope-ExtraBold.ttf"); 
}
@font-face {
  font-family: 'Manrope ExtraLight';
  src: url("fonts/Manrope-ExtraLight.ttf"); 
}
@font-face {
  font-family: 'Manrope Light';
  src: url("fonts/Manrope-Light.ttf"); 
}
@font-face {
  font-family: 'Manrope Medium';
  src: url("fonts/Manrope-Medium.ttf"); 
}
@font-face {
  font-family: 'Manrope Regular';
  src: url("fonts/Manrope-Regular.ttf"); 
}
@font-face {
  font-family: 'Manrope SemiBold';
  src: url("fonts/Manrope-SemiBold.ttf"); 
}
.bold{
  font-family: 'Manrope Bold';
}
.extrabold{
  font-family: 'Manrope ExtraBold';
}
.semibold{
  font-family: 'Manrope SemiBold';
}
.light{
  font-family: 'Manrope Light';
}
.extralight{
  font-family: 'Manrope ExtraLight';
}
.regular{
  font-family: 'Manrope Regular';
}
.medium{
  font-family: 'Manrope Medium';
}
.akzidenzGroteskBQSuper{
  font-family: 'Akzidenz Grotesk BQ Super';
}
.fz-16{
  font-size: 12px ;
}
.fz-18{
  font-size: 14px ;
}
.fz-20{
  font-size: 16px ;
}
.fz-22{
  font-size: 18px ;
}
.fz-24{
  font-size: 20px ;
}
.fz-26{
  font-size: 22px ;
}
.fz-28{
  font-size: 24px ;
}
.fz-30{
  font-size: 26px ;
}
.fz-32{
  font-size: 28px ;
}
.fz-34{
  font-size: 30px ;
}
.fz-36{
  font-size: 32px ;
}
.fz-38{
  font-size: 34px ;
}
.fz-40{
  font-size: 40px ;
}
.fz-50{
  font-size: 45px ;
}
.fz-60{
  font-size: 50px ;
}
.fz-70{
  font-size: 55px ;
}
.fz-80{
  font-size: 60px ;
}
.fz-90{
  font-size: 70px ;
}
.fz-100{
  font-size: 80px ;
}
.fz-110{
  font-size: 90px ;
}
.fz-120{
  font-size: 100px ;
}
.fz-130{
  font-size: 110px ;
}
.fz-140{
  font-size: 120px ;
}
.fz-150{
  font-size: 130px ;
}
.fz-160{
  font-size: 140px ;
}
.fz-170{
  font-size: 150px ;
}
.fz-180{
  font-size: 160px !important;
}
/*********************
PADDINGS
*********************/
.padding-top-5{
  padding-top: 5rem;
}
.padding-top-6{
  padding-top: 6rem;
}
.padding-bottom-5{
  padding-bottom: 5rem;
}
.padding-left-3{
  padding-left: 3rem;
}
.padding-right-1{
  padding-right: 1rem;
}
.padding-top-22{
  padding-top: 22rem;
}
.padding-top-17{
  padding-top: 17rem;
}
.padding-top-3{
  padding-top: 3rem;
}
.padding-top-10{
  padding-top: 10rem;
}
.padding-top-12{
  padding-top: 12rem;
}
.padding-top-20{
  padding-top: 18rem;
}
.padding-top-24{
  padding-top: 24rem;
}
.padding-top-28{
  padding-top: 28rem;
}
.padding-start{
  padding-left: 3rem;
}
.padding-top-6{
  padding-top: 6rem;
}
.padding-top-200{
  padding-top: 10rem;
}
.padding-bottom-6{
  padding-bottom: 6rem;
}
.padding-x-6{
  padding-left: 5rem;
  padding-right: 5rem;
}
.padding-top-10{
  padding-top: 10rem;
}
.padding-top-8{
  padding-top: 8rem;
}
.padding-top-18{
  padding-top: 18rem;
}
.padding-top-4{
  padding-top: 4rem;
}
.padding-left-7{
  padding-left: 7rem;
}
.padding-top-3{
  padding-top: 23rem;
}
.padding-dir{
  padding-right: 5rem;
}
.padding-especialista{
  padding-top: 12rem;
}

/*********************
COLOR TEXTOS
*********************/
.txt-negro{
  color: #272727;
}
.txt-blanco{
  color: #ffffff;
}
.txt-gris{
  color:#797979;
}
/*********************
FONDOS SOLIDOS
*********************/
.bg-negro{
  background: #101010;
}
.bg-gris{
  background: #F5F5F7;
}
.bg-blanco{
  background: #FFFFFF;
}
/*********************
Sangria
*********************/
.sangria-1{
  text-indent: 10rem;
}
/*********************
LINE HEIGHT
*********************/
.line-height-1{
  line-height: 25px;
}
.line-height-2{
  line-height: 40px;
}
.line-height-3{
  line-height: 3rem;
}
.line-height-4{
  line-height: 4rem;
}
.line-height-5{
  line-height: 5rem;
}
.left-5{
  padding-inline-start: 5rem;
}
/*********************
ANIMACIÓN SCROLL
*********************/
.scroll-down-animation {
  margin: auto;
  width: 34px;
  height: 55px;
  z-index: 2;
}
.mouse-animation {
  width: 3px;
  padding: 3px 10px;
  height: 28px;
  border: 1.5px solid #fff;
  border-radius: 25px;
  opacity: .5;
  box-sizing: content-box;
}
.scroller-animation {
  width: 3px;
  height: 8px;
  border-radius: 25%;
  background-color: #fff;
  animation: scroll 3s infinite;
  animation-direction: alternate;
}
@keyframes scroll {
  0% {
    transform: translate(0, 0);    
  }
  90% {
    transform: translateY(10px);
  }
  100% {
    opacity: 0;
  }
}
/*********************
LOADER
*********************/
.preloader {
  position: fixed;
  z-index: 25000;
  background: rgb(0, 0, 0);
  background: linear-gradient(204deg, rgb(0, 0, 0) 7%, rgb(0, 0, 0) 51%, rgb(0, 0, 0) 100%);
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:all .3s ease;
  animation: slide 1s linear forwards, fadeOut 0.5s 4.5s forwards;
}

@keyframes slide {
  0%{ 
    transform: scaleY(0); 
  }
  25%{ 
    transform: scaleY(25%); 
  }
  50% { 
    transform: scaleY(50%);
  }
  75%{
    transform: scaleY(75%);
}
  100%{
    transform: scaleY(100%);
  }
}
/*********************
END LOADER
*********************/
/*********************
ANIMACIÓN MENÚ
*********************/
 .delayed-text {
    opacity: 0;
    animation: showText 1s ease-out 1s forwards;
  }

  @keyframes showText {
    to {
      opacity: 1;
    }
  }
.menu-animation a {
  position: relative;
  display: block;
}
.menu-animation a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, 	#fffff2, 	#f9f9f9, #ffff);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.5s ease-in-out;
}
.menu-animation a:hover::before {
  transform: scaleX(1);
}
.menu-animation h1:hover {
  color: #fff;
  font-family: 'Manrope Bold';
}
.menu-animation i{
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.menu-animation h1:hover i{
  opacity: 1;
}
.menu-animation[data-animation="to-right"] a::before {
  transform-origin: left;
}
/***************************
MENÚ BLANCO Y FONDO NEGRO
*************************/
.menu-header{
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
.img-menu-header{
  left: 2rem;
  width: 5rem;
}
.icon-header{
  width: 100px;
}
.icon-email-menu-header{
  width: 25px;
  margin-right: 0.5rem;
}
.icon-phone-menu-header{
  width: 12px;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
.legal-menu{
  text-align: end;
  margin-top: 20rem;
}
.social-media-menu{
  width: 35px;
  height: 35px;
  border: 1px solid #fff;
  border-radius: 50%;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.menu-header-hr{
  border: none;
  border-top: 2px solid white;
  margin: 20px 0;
}
.menu-header-hr-negro{
  border: none;
  border-top: 2px solid #101010;
  margin: 20px 0;
}
/***************************
BURGUER MENU
*************************/
#menu--toggle[type=checkbox]:not(:checked),
#menu--toggle[type=checkbox]:checked {
  display: none;
}
.menu--toggle__trigger,
.menu--toggle__burger,
.menu--toggle__burger:before,
.menu--toggle__burger:after {
  position: absolute;
  top: 1.3rem;
  right: 3.5%;
  width: 2em;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  cursor: pointer;
  z-index: 100;
  transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.menu--toggle__trigger {
  height: 2em;
  background: none;
}
.menu--toggle__burger:before {
  content: "";
  top: 10px;
  left: 0;
}
.menu--toggle__burger:after {
  content: "";
  top: 20px;
  left: 0;
}
.menu__body {
  position: absolute;
  width: 4rem;
  height: 4rem;
  left: 1rem;
  margin: 0;
  padding: 0;
  z-index: 10;
  text-align: start;
  -webkit-animation: checkboxUncheckedAnimation 0.35s both;
          animation: checkboxUncheckedAnimation 0.35s both;
}
.menu__body-element,
.menu__body-link {
  display: none;
  margin: 4.4em 0 -3.3em -0.1em;
  font-weight: normal;
  color: #6E6E6E;
  text-decoration: none;
  text-transform: none;
  list-style: none;
  outline: 0;
}
.menu__body-element {
  text-indent: 2em;
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger {
  top: 15px;
  transform: rotate(405deg);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger:before {
  top: 0;
  transform: rotate(-90deg);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger:after {
  top: 0;
  transform: rotate(90deg);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger + .menu__body {
  -webkit-animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
          animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
#menu--toggle:checked + .menu--toggle__trigger ~ .menu__body .menu__body-element, #menu--toggle:checked + .menu--toggle__trigger ~ .menu__body .menu__body-link {
  display: block;
}
/* menu blanco */
.menu-animation-blanco a {
  position: relative;
  display: block;
}
.menu-animation-blanco a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, 	#fffff2, 	#f9f9f9, #ffff);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.5s ease-in-out;
}
.menu-animation-blanco a:hover::before {
  transform: scaleX(1);
}
.menu-animation-blanco h1:hover {
  color: #fff;
  font-family: 'Manrope Bold';
}
.menu-animation-blanco i{
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.menu-animation-blanco h1:hover i{
  opacity: 1;
}
.menu-animation-blanco[data-animation="to-right"] a::before {
  transform-origin: left;
}
#menu--toggle-blanco[type=checkbox]:not(:checked),
#menu--toggle-blanco[type=checkbox]:checked {
  display: none;
}
.menu--toggle__trigger-blanco,
.menu--toggle__burger-blanco,
.menu--toggle__burger-blanco:before,
.menu--toggle__burger-blanco:after {
  position: absolute;
  top: 1.3rem;
  right: 3.5%;
  width: 2em;
  height: 2px;
  background-color: #000000;
  border-radius: 2px;
  cursor: pointer;
  z-index: 100;
  transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.menu--toggle__trigger-blanco {
  height: 2em;
  background: none;
}
.menu--toggle__burger-blanco:before {
  content: "";
  top: 10px;
  left: 0;
}
.menu--toggle__burger-blanco:after {
  content: "";
  top: 20px;
  left: 0;
}
.menu__body-blanco {
  position: absolute;
  width: 4rem;
  height: 4rem;
  left: 1rem;
  margin: 0;
  padding: 0;
  z-index: 10;
  text-align: start;
  -webkit-animation: checkboxUncheckedAnimation 0.35s both;
          animation: checkboxUncheckedAnimation 0.35s both;
}
.menu__body-element-blanco,
.menu__body-link-blanco {
  display: none;
  margin: 4.4em 0 -3.3em -0.1em;
  font-weight: normal;
  color: #6E6E6E;
  text-decoration: none;
  text-transform: none;
  list-style: none;
  outline: 0;
}
.menu__body-element-blanco {
  text-indent: 2em;
}
#menu--toggle-blanco:checked + .menu--toggle__trigger-blanco + .menu--toggle__burger-blanco {
  top: 15px;
  transform: rotate(405deg);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle-blanco:checked + .menu--toggle__trigger-blanco + .menu--toggle__burger-blanco:before {
  top: 0;
  transform: rotate(-90deg);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle-blanco:checked + .menu--toggle__trigger-blanco + .menu--toggle__burger-blanco:after {
  top: 0;
  transform: rotate(90deg);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle-blanco:checked + .menu--toggle__trigger-blanco + .menu--toggle__burger-blanco + .menu__body-blanco {
  -webkit-animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
          animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
#menu--toggle-blanco:checked + .menu--toggle__trigger-blanco ~ .menu__body-blanco .menu__body-element-blanco, #menu--toggle-blanco:checked + .menu--toggle__trigger-blanco ~ .menu__body-blanco .menu__body-link-blanco {
  display: block;
}
/* end menu blanco */
/**
 *	Animations
 *
 *  @note checkboxCheckedAnimation - added fix for Microsoft Edge
 */
@-webkit-keyframes checkboxCheckedAnimation {
  50% {
    width: 100%;
    height: 100vh;
  }
  100% {
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }
}
@keyframes checkboxCheckedAnimation {
  50% {
    width: 100%;
    height: 100vh;
    border: none;
    background-image: url('../img/bg-menu.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
  }
  100% {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    border: none;
    background-image: url('../img/bg-menu.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
  }
}
@-webkit-keyframes checkboxUncheckedAnimation {
  0% {
    width: 100%;
    height: 100vh;
  }
}
@keyframes checkboxUncheckedAnimation {
  0% {
    width: 100%;
    height: 100vh;
  }
}
@-webkit-keyframes changeWidthOfElementAnimation {
  50% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes changeWidthOfElementAnimation {
  50% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/*********************
END BURGUER MENU
*********************/
/*********************
END HEADER
*********************/
/*********************
BOTONES ANIMADOS
*********************/
.content-header{
   position: absolute;
  top: 20rem;
  right: 5rem;
  align-items: start;
}
/*********************
BOTÓN CONOCE BCO
*********************/
.btn-conoce-mas a {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.btn-conoce-mas a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, 	#fffff2, 	#f9f9f9, #ffff);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.5s ease-in-out;
}
.btn-conoce-mas a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 1px;
  background: linear-gradient(to left, 	#fffff2, 	#f9f9f9, #ffff);
  z-index: 1;
}
.btn-conoce-mas a:hover::before {
  transform: scaleX(1);
}
.btn-conoce-mas img{
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.btn-conoce-mas:hover img{
  opacity: 1;
}
.btn-conoce-mas[data-animation="to-right"] a::before {
  transform-origin: left;
}

.btn-conoce-mas-n a {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.btn-conoce-mas-n a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, 	#000, 	#000, #000);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.5s ease-in-out;
}
.btn-conoce-mas-n a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 1px;
  background: linear-gradient(to left, 	#000, 	#000, #000);
  z-index: 1;
}
.btn-conoce-mas-n a:hover::before {
  transform: scaleX(1);
}
.btn-conoce-mas-n img{
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.btn-conoce-mas-n:hover img{
  opacity: 1;
}
.btn-conoce-mas-n[data-animation="to-right"] a::before {
  transform-origin: left;
}
.btn-t-articulos-n a {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.btn-t-articulos-n a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, 	#000, 	#000, #000);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.5s ease-in-out;
}
.btn-t-articulos-n a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80%;
  height: 1px;
  background: linear-gradient(to left, 	#000, 	#000, #000);
  z-index: 1;
}
.btn-t-articulos-n a:hover::before {
  transform: scaleX(1);
}
.btn-t-articulos-n img{
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.btn-t-articulos-n:hover img{
  opacity: 1;
}
.btn-t-articulos-n[data-animation="to-right"] a::before {
  transform-origin: left;
}
.btn-t-leer-art-n a {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.btn-t-leer-art-n a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, 	#000, 	#000, #000);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.5s ease-in-out;
}
.btn-t-leer-art-n a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 1px;
  background: linear-gradient(to left, 	#000, 	#000, #000);
  z-index: 1;
}
.btn-t-leer-art-n a:hover::before {
  transform: scaleX(1);
}
.btn-t-leer-art-n img{
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.btn-t-leer-art-n:hover img{
  opacity: 1;
}
.btn-t-leer-art-n[data-animation="to-right"] a::before {
  transform-origin: left;
}
.arrow-n{
  filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(324deg) brightness(0%) contrast(104%);
}
.margin-btn-conoce{
  margin-left: 4rem;
  margin-right: 1rem;
}
.margin-we-are-the-k-conoce{
  margin-top: 1rem;
  margin-left: 4rem;
}
.mejor-talento-con{
  margin-top: 5rem;
  margin-right: 7rem;
}
.margin-efficient-conoce{
  margin-left: 5rem;
  margin-right: 2rem;
}
/*********************
BOTÓN CONOCE NEGRO
*********************/
.compos{
  position: relative;
  top: -1.5rem;
}
/*********************
HEADER INDEX
*********************/
.txt-header-index{
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}
.bg-header{
  position: relative;
  right: 0;
  width: 100%;
  min-height: 113vh;
  z-index: 1; 
  color: #fff;
}
.txt-header-index p{
  line-height: 33px;
}
.bg-header video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.bg-header-clientes{
  position: relative;
  right: 0;
  width: 100%;
  min-height: 60vh;
  z-index: 1; 
}
.bg-header-clientes video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.txt-header{
    text-align: left;
    top: 7rem;
    line-height: 80px;
    z-index: 2;
}
.svg-negro{
    filter: invert(12%) sepia(33%) saturate(100%) hue-rotate(314deg) brightness(0%) contrast(96%);
}

/*********************
END HEADER INDEX
*********************/

/************************
EQUIPO DE ESPECIALISTAS
*************************/
.bg-equipo-especialista{
  background-image: url('../img/equipo_de_especialistas.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.btn-ayudamos{
  margin-top: 18rem;
}
.margin-bt-conoce{
  margin-left: 3rem;
  margin-right: 2rem;
}
.margin-conoce-dis{
  margin-right: 3rem;
}
.margin-unlock-con{
  margin-left: 4rem;
  margin-right: 3rem;
}
.margin-nuestro-con{
  margin-top: 2rem;
}
/*********************
END EN BEIRAT AYUDAMOS
*********************/
/************************
DISMINUCIÓN DE COSTOS
*************************/
.graficas-video{
  display: flex;
  justify-content: center;
  align-items: center;
}
.graficas-video video{
  width: 80%;
  height: auto;
}
.nuestro-equipo{
  margin-top: 10rem;
}
.nuestro-equipo p{
  line-height: 30px;
}
/* end section 3 */
/******************************
ENTENDEMOS LA RESPONSIBILIDAD
*******************************/
.bk-gray{
  background-color: #F5F5F7;
  width: 100%;
}
/********************************
ANIMACIÓN DE SCROLL HORIZONTAL
*********************************/
#horizontal-scoll {
  padding: 50px 0;
}
.horizontal-scoll-wrapper {
  overflow: hidden;
  height: 525px;
}
.horizontal {
  display: flex;
}
.horizontal > div {
  display: flex;
  flex-shrink: 0;
  padding: 0 0px;
}
.horizontal > div:first-child {
  padding: 0;
}
.horizontal > div:last-child {
  padding: 0;
}
.horizontal .card {
  align-items: stretch;
  width: 50rem;
  padding: 0;
  background: none;
  border: none;
  color: #000000;
}
.asterisk{
  margin-left: 13rem;
  width: 20px;
  position: absolute;
  top: 125px;
  z-index: 3;
}
.hr-scroll{
position: absolute;
border: 1px solid #000;
width: 100%;
top: 134px;
height: 1px;
z-index: 2;
}
.content-scroll{
  position: absolute;
  top: 10rem;
}
#progress{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  display: grid;
  place-items: center;
}
#progress-value{
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  background-color: #F5F5F7;
  border-radius: 50%;
  place-items: center;
  font-weight: 600;
  padding-left: 30%;
}
.texto-derecha {
  text-align: right;
}
/************************
SCROLL HORIZONTAL MOBIL
*************************/
.line-vertical{
  border-left: solid #000;
  height:65px;
  left: 3%;
  position: absolute;
}
.asterisc{
  margin-left: 1%;
  padding-top: 1%;
  width: 20px;
  position: absolute;
  left: 0;
}
/************************
END HORIZONTAL MOBIL
********************************/

/************************
END ANIMACIÓN SCROLL HORIZONTAL
*************************/
/*******************************
UNLOOK THE POTENCIAL
********************************/
.bg-unlock{
  background-image: url('../img/unlock-the-potencial.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100vh;
}
.bg-unlock p{
   color: #ffffff;
}
/************************
END UNLOOK THE POTENCIAL
*************************/
/*****************************
CONFÍA EN NUESTRO EQUIPO
*****************************/
.bg-beirat-blanco{
  background-image: url('../img/bg-beirat-blanco.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.txt-unlock{
  position: absolute;
  width: 100%;
  z-index: 10;
}
/*****************************
END CONFÍA EN NUESTRO EQUIPO
******************************/
/************************
ARTÍCULOS RECOMENDADOS
*************************/
.lg-beirat-na{
  width: 7rem;
}
.calendario-art{
  width: 16px;
}
.bg-articles{
  background-color: #F5F5F7;
}
/************************
END ARTÍCULOS EJEMPLOS
*************************/
/************************
CONTÁCTANOS
*************************/
.bg-contactanos{
  background-image: url('../img/bg-contactanos.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  color: #fff;
  font-family: 'Manrope Light';
}
.form-contactanos label{
  font-size: 18px;
  font-family: 'Manrope Light';
}
.form-contactanos input::placeholder{
  font-family: 'Manrope Light';
  font-size: 18px;
  color: #fff;
}
.form-contactanos textarea::placeholder{
  font-family: 'Manrope Light';
  font-size: 18px;
  color: #fff;
}
.icon-phone-contacto{
  width: 16px;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
.icon-email-contacto{
  width: 24px;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
.icon-location-contacto{
  width: 20px;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
.form-contactanos input{
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #707070;
  color: white;
  width: 100%;
  font-size: 18px;
}
.form-contactanos textarea{
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #707070;
  color: white;
  width: 100%;
  font-size: 18px;
}
.form-contactanos input:focus{
  outline: none;
}
.form-contactanos textarea:focus{
  outline: none;
}
.form-contactanos{
  padding-top: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-button{
  display: flex;
  justify: start;
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #707070;
  color: white;
  width: 100%;
  font-size: 18px;
  font-family: 'Manrope Light';
}
.form-button:hover{
  display: flex;
  justify: start;
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #707070;
  color: white;
  width: 100%;
  font-size: 18px;
  font-family: 'Manrope Light';
}
.form-button:focus{
  display: flex;
  justify: start;
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #707070;
  color: white;
  width: 100%;
  font-size: 18px;
  font-family: 'Manrope Light';
}
.arrow-button{
  margin-left: 185px;
  width: 30px;
}
.captcha{
  width: 100px !important;
}
/************************
END CONTÁCTANOS
*************************/
/************************
FOOTER
*************************/
.bg-footer{
  background-image: url('../img/bg-footer-white.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.img-footer-b{
  width: 120px;
}
.iso{
  padding-top: 8rem;
}
.iso img{
  bottom: 0;
  width: 100px;
  margin-left: 2rem;
}
.parent {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 210;
  bottom: 20px;
}
.heart {
position: relative;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: linear-gradient(to bottom, #03e27b, #0dbf6d);
border-radius: 50%;
cursor: pointer;
box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.2);
animation: beat 1.5s ease 0s infinite;
}

.heart span {
font-size: 22pt;
color: white;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
}

.heart:before, .heart:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #03e27b;
opacity: 0.4;
border-radius: inherit;
}

.heart:before {
z-index: -2;
animation: beat-before 1.5s ease 100ms infinite;
}

.heart:after {
z-index: -1;
animation: beat-after 1.5s ease 200ms infinite;
}
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes beat-before {
0% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
@keyframes beat-after {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
}
.icob-blanco{
filter: invert(99%) sepia(100%) saturate(0%) hue-rotate(274deg) brightness(113%) contrast(101%);
width: 2rem;
}

.btn-flotante-up img {
  width: 4rem;
}

.btn-flotante-up::after {
  position: absolute;
  cursor: pointer;
  display: block;
  left: 0;
  color: #fff;
}


.heart {
  /* ... el resto de tu estilo para el botón .heart ... */
}

.enlaces{
  margin-top: 1rem;
  text-align: center; 
  align-items: center;
  justify-content: center;
}
.enlaces a{
  text-decoration: none;
  color: #101010;
}
.legal a{
  text-decoration: none;
  color: #101010;
}
.social-media{
  width: 35px;
  height: 35px;
  border: 1px solid #363636;
  border-radius: 50%;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.logo-bb{
  width: 300px;
}
/************************
END FOOTER
*************************/
/* .bg-content{
  position: relative;
  width: 100%;
  min-height: 100vh;
  z-index: 1; 
  color: #ffffff;
}
.bg-content img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.bg-content p {
  position: relative;
} */
/************************
NOSOTROS
*************************/
/************************
MODALES
*************************/
.modal-sin-bg{
  background: transparent !important;
  border: none !important;
  color: #fff;
}
.btn-close{
  background-image: none!important;
  color: #fff !important;
}
.modal-enviado{
  background-image: url('../img/gracias-por-compartirnos.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.txt-modal{
  margin-top: 22rem;
}
.margin-enviado{
  margin-top: 13rem;
  margin-bottom: 12rem;
}
/************************
QUIÉNES SOMOS
*************************/
.txt-nosotros{
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}
.video-container {
  position: relative;
}
.video{
  position: relative; /* Esto es importante para z-index funcione */
  z-index: 1;
}
.play{
  position: absolute; /* Esto es importante para z-index funcione */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
}
/************************
END QUIÉNES SOMOS
*************************/
/************************
CONFÍA
*************************/
.bg-confia{
  background-image: url('../img/bg-confia-en-nosotros.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
/************************
END CONFÍA
*************************/
/************************
BEIRAT IS
*************************/
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/************************
EMPOWEING
*************************/
.bg-empowering-people{
  background-image: url('../img/empowering.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 120vh;
}
/*****************************
CONOCE NUESTRAS VIRTUDES
*****************************/
.container-small{
  padding-left: 1rem;
  padding-right: 1rem;
}
.accordion {
  background-color: #F5F5F7;
  border: none;  
  border-radius: 0;
}  
.accordion-item{
  border: none !important;
}
.accordion .accordion-button {
  padding: 0;
  background-color: #F5F5F7;
  font-size: 70px;
  font-family: 'Manrope ExtraLight' ;
  color: #080808; 
  text-align: center;
  border: none; 
  border-radius: 0;
  box-shadow: none !important;
  border-top: 1px solid #000;
}
.accordion .border-bottom {
  padding: 0;
  background-color: #F5F5F7;
  font-size: 70px;
  font-family: 'Manrope ExtraLight' ;
  color: #080808; 
  text-align: center;
  border-radius: 0;
  border: none; 
  box-shadow: none !important;
  border-top: 1px solid #000; 
  border-bottom: 1px solid #000 !important;
}
.accordion .border-bottom:not(.collapsed) {
  border-bottom: none !important;
  background-color: #F5F5F7 !important;
}
.accordion .border-bott .show{
  border-bottom: 1px solid #000 !important;
}
.accordion-button:focus{
  border-color: none !important;
  border-top: 1px solid #000 !important; 
  border-radius: 0;
}
.accordion-item:first-of-type .accordion-button{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.text-accordion{
  margin-left: 5rem;
}
.accordion-button:not(.collapsed){
  color: #000 !important;
  background-color: #F5F5F7 !important;
  box-shadow: none !important;
}
.accordion-button::after{
  margin-left: auto !important;
  margin-right: 30px !important;
  background-image: url('../img/svg/arrow-down.svg') !important;
  width: 30px !important;
  height: 35px !important;
}
.accordion-button::before{
  margin-left: auto !important;
  margin-right: 30px !important;
  background-image: url('../img/svg/arrow-up.svg') !important;
  width: 30px !important;
  height: 35px !important;
} 
.accordion .accordion-body {
  font-size: 32px; 
  padding: 1rem 1.5rem; 
  border-bottom: none;
  text-align: end; 
  background-color: #F5F5F7 !important;
  font-family: 'Manrope Light';
}
/* a */
.wrap {
  margin: 50px auto;
  width: 500px;
}  
.list li:hover ul {
  height: 114px;
  overflow: hidden;
}
/* a */
/***********************************
HEMOS TRABAJADO CON ORGANIZACIONES
************************************/
.bg-gris-card{
  background: #F5F5F7;
  height: 14rem;
  transition: background-color 1s ease, color 0.3s ease;
}
.bg-gris-card-clientes{
  background-color: #F5F5F7;
  height: 14rem;
}
.bg-gris-card-clientes img{
  width: 100px;
  height: 100px;
}
.bg-gris-card-clientes:hover{
  background-color: #ffffff;
}
.bg-gris-card:hover{
  background: #000000;
}
.contenedor {
  position: relative;
  height: 14rem;
  width: 19rem;
  float: left;
}  
.contenedor img {
  position: absolute;
  left: 33%;
  top: 33%;
  transition: opacity 1.5s ease-in-out;
}  
.contenedor img.top:hover {
  opacity: 0;
}

.marco-gris {
  display: inline-block;
  background-color: #f2f2f2;
  transition: background-color 0.3s;
  cursor: pointer;
  width: 100%;
  height: 10rem;
  display: flex;
  justify-content: center;
}
.marco-gris:hover {
  background-color: #ffffff; /* Cambia el color de fondo a blanco al pasar sobre el marco */
}
.travva{
  width: 170px;
}
.percapita{
  width: 210px;
}
.mem{
  width: 200px;
}
.textron{
  width: 220px;
}
.jeanswest{
  width: 210px;
}
.premier-nuts{
  width: 130px;
}
.lerwen{
  width: 180px;
}
.mapeber{
  width: 200px;
}
.movalia{
  width: 170px;
}
.amti{
  width: 150px;
}
.maralta{
  width: 170px;
}
.relier{
  width: 170px;
}
.blueberry{
  width: 170px;
}
.manufacturing{
  width: 170px;
}
.sb{
  width: 170px;
}
.bas{
  width: 150px;
}
.altamira{
  width: 170px;
}
.omaca{
  width: 170px;
}
.la-favorita{
  width: 180px;
}
.laqdi{
  width: 180px;
}
.blancos{
  width: 230px;
}
.tracto{
  width: 170px;
}
.premier{
  width: 170px;
}
.yaetza{
  width: 170px;
}
.kluane{
  width: 150px;
}
.great-experience{
  width: 190px;
}
.cubasa{
  width: 180px;
}
.stuen{
  width: 170px;
}
.dire-movil{
  width: 170px;
}
.vantte{
  width: 170px;
}
.high-vision{
  width: 150px;
}
.himas{
  width: 150px;
}
.dormo{
  width: 150px;
}
.tdmex{
  width: 150px;
}
.circo{
  width: 200px;
}
.via-plaza{
  width: 120px;
}
.oftalia{
  width: 150px;
}
.sng{
  width: 160px;
}
.hyra{
  width: 150px;
}
.maklen{
  width: 170px;
}
.wings-center{
  width: 150px;
}
.bfk{
  width: 110px;
}
.textylo{
  width: 180px;
}
.naturagel{
  width: 180px;
}
.ber-industrial{
  width: 180px;
}
.hispanocash{
  width: 180px;
}
.castalfana{
  width: 110px;
}
.figar{
  width: 120px;
}
.san-helados{
  width: 140px;
}
.power-golden{
  width: 170px;
}
.merza{
  width: 170px;
}
.vima{
  width: 120px;
}
.tierradiamante{
  width: 220px;
}
.casa-enfermera{
  width: 180px;
}
/* clientes */
.travva-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-travva-color.png');
}
.percapita-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-percapita-color.png');
}
.mem-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-mem-color.png');
}
.textron-aviation-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-textron-aviation-color.png');
}
.jeanswest-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-jeanswest-color.png');
}
.premier-nuts-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-premier-nuts-color.png');
}
.lerwen-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-lerwen-color.png');
}
.mapeber-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-mapeber-color.png');
}
.movalia-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-movalia-color.png');
}
.amti-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-amti-color.png');
}
.maralta-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-maralta-color.png');
}
.relier-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-realier-color.png');
}
.blueberry-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-blueberry-color.png');
}
.manufacturing-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-manufacturing-color.png');
}
.sb-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-sb-color.png');
}
.bas-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-bas-color.png');
}
.altamira-plus-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-altamira-plus-color.png');
}
.omaca-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-omaca-color.png');
}
.la-favorita-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-la-favorita-color.png');
}
.laqdi-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-ladqui-color.png');
}
.blancos-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-blancos-color.png');
}
.tracto-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-tracto-color.png');
}
.premier-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-premier-color.png');
}
.yaetza-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-yaetza-color.png');
}
.kluane-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-kluane-color.png');
}
.great-experience-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-great-experience-color.png');
}
.cubasa-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-cubasa-color.png');
}
.stuen-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-stuen-color.png');
}
.dire-movil-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-dire-movil-color.png');
}
.vantte-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-vantte-color.png');
}
.high-vision-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-high-vision-color.png');
}
.himas-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-himas-color.png');
}
.dormo-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-dormo-color.png');
}
.tdmex-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-tdmex-color.png');
}
.circo-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-circo-color.png');
}
.via-plaza-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-via-plaza-color.png');
}
.oftalia-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-oftalia-color.png');
}
.sng-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-sng-color.png');
}
.hyra-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-hyra-color.png');
}
.maklen-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-maklen-color.png');
}
.wings-center-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-wings-center-color.png');
}
.bfk-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-bfk-color.png');
}
.textylo-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-textylo-color.png');
}
.naturagel-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-naturagel-color.png');
}
.ber-industrial-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-ber-color.png');
}
.hispanocash-color:hover img {
  content: url('../img/logo-clientes/COLOR/logo-hispanocash-color.png');
}
.castalfana-color:hover img{
  content: url('../img/logo-clientes/COLOR/logo-castalfana-color.png');
}
.figar-color:hover img{
  content: url('../img/logo-clientes/COLOR/logo-figar-color.png');
}
.san-helados-color:hover img{
  content: url('../img/logo-clientes/COLOR/logo-san-helados-color.png');
}
.power-golden-color:hover img{
  content: url('../img/logo-clientes/COLOR/logo-power-golden-color.png');
}
.merza-color:hover img{
  content: url('../img/logo-clientes/COLOR/logo-merza-color.png');
}
.vima-color:hover img{
  content: url('../img/logo-clientes/COLOR/logo-vima-color.png');
}
.tierradiamante-color:hover img{
  content: url('../img/logo-clientes/COLOR/logo-tierradiamante-color.png');
}
.casa-enfermera-color:hover img{
  content: url('../img/logo-clientes/COLOR/logo-casa-enfermera-color.png');
}
/* end clientes */
/* Estilos para el cambio del color de fondo al hover */


.bg-gris-card:hover img{
  filter: invert(100%) sepia(0%) saturate(7467%) hue-rotate(70deg) brightness(108%) contrast(110%);
}
.bg-gris-card:hover p{
  color: #ffffff;
}
.bg-gris-card img{
  margin-top: 2rem;
  margin-left: 2rem;
}
.bg-gris-card .centrar-0{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 6rem;
}
.bg-gris-card .clientes{
  font-size: 18px;
  margin-top: 1rem;
  margin-left: 2rem;
  margin-bottom: 0;
}
.bg-gris-card .industria{
  font-size: 28px;
  margin-left: 2rem;
}
/***********************************
CARDS SVG
************************************/
.industria-agropecuaria{
  width: 50px;
}
.manufactura-transformacion{
  padding-bottom: 1rem;
  width: 60px;
}
.productos-consumo{
  width: 50px;
  filter: invert(12%) sepia(33%) saturate(100%) hue-rotate(314deg) brightness(0%) contrast(96%);
}
.servicios-financieros{
  width: 55px;
  padding-bottom: 1rem;
}
.construccion-bienes-raices{
  width: 50px;
}
.energia-recursos-naturales{
  width: 55px;
  padding-bottom: 7px;
}
.industria-farmaceutica{
  width: 55px;
  padding-bottom: 6px;
}
.agroindustria{
  width: 55px;
  padding-bottom: 6px;
}
.servicios-tecnologia{
  width: 55px;
}
.medios-telecomunicacion{
  width: 55px;
}
.comercio-x-mayor{
  width: 60px;
}
.industria-alimenticia{
  width: 25px;
}
/***********************************
END CARDS SVG
************************************/
/*********************
RECLUTAMIENTO
**********************/
.bg-reclutamiento{
  background-image: url('../img/bg-we-are-the-key.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: auto;
  color: #fff;
}
/*********************
EL MEJOR TALENTO
**********************/
.txt-talento{
  margin-top: 8rem;
}
.talento-img{
  margin-top: 23rem;
}
.bg-beirat-blanco-derecha{
  background-image: url('../img/bg-beirat-blanco-derecha.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
/*************************
DESCURBIR EL POTENCIAL
**************************/
.bg-el-reclutamiento-solo{
  background-image: url('../img/descubrir-potencial-unico.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.txt-reclutamiento-solo{
  padding-top: 12rem;
}
.txt-descubrir{
  padding-top: 8rem;
}
/*********************
ADMINISTRACIÓN
**********************/
.bg-administracion{
  background-image: url('../img/efficient-people.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
/*************************
ADMINISTRAMOS TU PERSONAL
*************************/
.txt-admin{
  padding-top: 30rem;
}
.hr-administracion{
  opacity: 1;
  border: 5px solid #000000;
  margin: 0;
}
.bg-beirat-blanco-izq{
  background-image: url('../img/bg-adminnistramos-tu-personal.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
/*************************
NUESTRAS VENTAJAS
*************************/
/*************************
CIRCULOS NÚMEROS
*************************/
.circle-1{
  position: absolute;
  left: 15%;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 2;
  background-color: #000000;
}
.circle-2{
  position: absolute;
  top: 10rem;
  left: 15%;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 2;
  background-color: #000000;
}
.circle-3{
  position: absolute;
  top: 20rem;
  left: 15%;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 2;
  background-color: #000000;
}
.circle-4{
  position: absolute;
  top: 30rem;
  left: 15%;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 2;
  background-color: #000000;
}
.circle-5{
  position: absolute;
  left: 15%;
  top: 40rem;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 2;
  background-color: #000000;
}
.circle-6{
  position: absolute;
  top: 50rem;
  left: 15%;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 2;
  background-color: #000000;
}
/*************************
LÍNEA TIMELINE
*************************/
.timeline{
  position: relative;
}
.timeline-line {
  position: absolute;
  left: 40%;
  width: 40vh;
}
.line-step{
  height: 50rem;
  width: 2px;
}
.line-step-rec{
  height: 45rem;
  width: 2px;
}

/*************************
CARDS DE TIME LINE
*************************/
.card-1{
  padding-left: 2.5rem;
}
.card-2{
  padding-top:10rem;
  padding-left: 2.5rem;
}
.card-3{
  padding-top:10.5rem;
  padding-left: 2.5rem;
}
.card-4{
  padding-top:10.5rem;
  padding-left: 2.5rem;
}
.card-5{
  padding-top:10.5rem;
  padding-left: 2.5rem;
}
.card-6{
  padding-top:11rem;
  padding-left: 2.5rem;
}
.card{
  border: none !important;
}
.card-mobile{
  padding-top: 1rem;
  padding-left: 1rem;
}
.card-blanco {
  background-color: #ffffff !important;
  color: #000;
  height: 150px !important;
  border-radius: 25px !important;
  border: none;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.card-negro {
  background-color: #000000 !important; 
  color: #ffffff;
  height: 150px !important;
  border-radius: 25px !important;
  border: none;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.card-gris {
  background-color: #E6E6E6 !important; 
  color: #000;
  height: 150px !important;
  border: none;
  border-radius: 25px !important;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.align-r{
  text-align: right;
}
/*************************
INCREASING TALENT
*************************/
.bg-and-increasing{
  background-image: url('../img/and-increasing-talent.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.txt-increasing{
  padding-top: 10rem;
}
.align-right {
  text-align: right;
}
/*********************
CLIENTES
**********************/
.txt-clientes{
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 10;
}
.tit-clientes{
  padding-top: 14rem;
}
/*********************
CARROUSEL
**********************/
.bg-carousel{
  background-color: #F7F7F7;
}
.gtco-testimonials {
  position: relative;
  margin-top: 30px;
}
.gtco-testimonials .owl-stage-outer {
  padding: 30px 0;
}
.gtco-testimonials .card {
  background: #fff;
  box-shadow: 0 8px 30px -7px #767676;
  margin: 0 20px;
  padding: 0 10px;
  border-radius: 20px;
  border: 0;
}
.gtco-testimonials .card .card-img-top {
  max-width: 100px;
  border-radius: 50%;
  margin: 15px auto 0;
  width: 100px;
  height: 100px;
}
.gtco-testimonials .card h5 {
  color: #080808;
  line-height: 1.3;
}
.gtco-testimonials .card p {
  color: #555;
  padding-bottom: 15px;
}
.gtco-testimonials .active {
  opacity: 0.5;
  transition: all 0.3s;
}
.gtco-testimonials .center {
  opacity: 1;
}
.gtco-testimonials .center .card-img-top {
  max-width: 100%;
  height: 120px;
  width: 120px;
}      
@media (max-width: 767px) {
  .gtco-testimonials {
    margin-top: 20px;
  }
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
  outline: 0;
  background-color: #080808;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  color: #fff;
  font-size: 25px;
}
.gtco-testimonials  .owl-prev{
  position: absolute;
  top: 50%;
  left: 33%;
}
.gtco-testimonials  .owl-next{
  position: absolute;
  top: 50%;
  right: 33%;
}
.logo-clientes{
  margin-left: auto;
  margin-right: auto;
  width: 100px !important;
}
/*********************
NEWS AND MEDIA
**********************/
.tit-media{
  padding-top: 10rem;
}
.bk-gray-newsmedia{
  background-color: #F5F5F7;
  width: 100%;
}
.select-newmedia{
  position: relative;
  display: inline-block;
  padding: 5px;
  background-color: transparent;
  border-bottom: 1px solid black;
}
.form-media{
  border: none !important;
  border-bottom: 1px solid #000000 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  background-image: url('../img/flecha-select.png') !important;
  background-size: 16px 18px !important;
  font-family: 'Manrope Medium' !important;
}
.form-media:focus{
  border-color: none !important;
}
/*********************
DETALLE ARTICULO
**********************/
.bg-header-detalle-articulo{
  background-image: url('../img/bg-detalle-articulo.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 80vh; 
}
.txt-articulo{
  padding-top: 20rem;
  text-align: center;
}
.categoria-articulo{
  border: 1px solid #707070;
  text-align: center;
  height: 44px;
}
/*********************
BOLSA DE TRABAJO
**********************/
.bg-sube-tu-cv{
  background-image: url('../img/bg-sube-tu-cv.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  color: #fff;
}
.txt-bolsa{
  position: absolute;
  width: 100%;
  top: 0;
}
.tit-bolsa{
  padding-top: 12rem;
  text-align: center;
}
/*********************
SUBE CV
**********************/
/*********************
COMPARTIR DATOS
**********************/
.file-upload {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-top: 7px;
  background-color: #343434;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.file-upload input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
/* Estilos para el botón de enviar (ajusta según tus preferencias) */
.form-sube-tu-cv .submit-btn-container {
  float: left; /* Alineación a la izquierda */
  margin-top: 10px;
}
.form-sube-tu-cv button {
  background-color: transparent;
  color: #fff;
  border: none;
  width: 100%;
  border-bottom: 2px solid #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.form-sube-tu-cv button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.arrow-enviar{
  width: 20px;
  margin-left: auto;
  padding-top: 5px;
}
/*********************
CONTACTO
**********************/
.bg-header-contacto{
  background-image: url('../img/hablemos-y-encontremos.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%; 
  color: #fff;
}
.tit-contacto{
  padding-top: 20rem;
}
.subt-cont h1{
  line-height: 48px;
}
/****************************
RESPONSIVO
*****************************/
@media only screen and (min-width:320px) and (max-width: 479px){
  .fz-24{
    font-size: 16px;
  }
  .fz-28{
    font-size: 17px;
  }
  .fz-34{
    font-size: 18px;
  }
  .fz-36{
    font-size: 20px;
  }
  .fz-60{
    font-size: 25px;
  }
  .fz-70{
    font-size: 40px;
  }
  .fz-80{
    font-size: 43px;
  }
  .fz-90{
    font-size: 45px;
  }
  .fz-100{
    font-size: 45px;
  }
  .fz-110{
    font-size: 40px;
  }
  .fz-120{
    font-size: 50px;
  }
  .fz-130{
    font-size: 50px;
  }
  .fz-150{
    font-size: 55px;
  }
  .fz-160{
    font-size: 55px;
  }
  .btn-ayudamos{
    margin-top: 3rem;
  }
  .menu__body-element{
    text-indent: 0;
  }
  .legal-menu{
    margin-top: 5rem;
  }
  .padding-top-3{
    padding-top: 1rem;
  }
  .padding-x-6{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .talento-img{
    margin-top: 1rem;
  }
  .txt-admin{
    padding-top: 6rem;
  }
  @keyframes checkboxCheckedAnimation {
    50% {
      width: 100%;
      height: auto;
      border: none;
      background-image: url('../img/bg-menu.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      top: 0;
      left: 0;
    }
    100% {
      width: 100%;
      height: auto;
      border-radius: 0;
      border: none;
      background-image: url('../img/bg-menu.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      top: 0;
      left: 0;
    }
  }
  .play{
    width: 20%;
  }
  .card-3{
    padding-top: 4rem;
  }
  .slick-next{
    right: 30px;
    z-index: 2;
  }
  .slick-prev{
    left: 30px;
    z-index: 2;
  }
  .gtco-testimonials  .owl-prev{
    position: absolute;
    top: 50%;
    left: 0;
  }
  .gtco-testimonials  .owl-next{
    position: absolute;
    top: 50%;
    right: 0;
  }
  .tit-contacto{
    padding-top: 10rem;
  }
  .margin-btn-conoce{
    margin-left: 3rem;
    margin-right: 0;
  }
  .margin-ayudamos{
    margin-right: 3rem;
  }
  .margin-especialistas{
    margin-right: 2rem;
  }
  .margin-unlock-con{
    margin-left: 1rem; 
  }
  .bg-empowering-people{
    background-image: url('../img/movil/empowering-movil.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 120vh;
  }
  .bg-reclutamiento{
  background-image: url('../img/movil/we-are-the-key-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: auto;
  color: #fff;
}
.bg-el-reclutamiento-solo{
  background-image: url('../img/movil/el-reclutamiento-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.bg-administracion{
  background-image: url('../img/movil/efficient-people-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.bg-and-increasing{
  background-image: url('../img/movil/15-years-of-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.bg-equipo-especialista{
  background-image: url('../img//movil/equipo-especialistas-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.pt-movil-3{
  padding-top: 3rem;
  }
  .sangria-1{
  text-indent: 0;
}
.tit-contacto{
  padding-top: 1rem;
}
}
@media only screen and (min-width:480px) and (max-width: 577px){
  .fz-24{
    font-size: 20px;
  }
  .fz-34{
    font-size: 25px;
  }
  .fz-60{
    font-size: 35px;
  }
  .fz-90{
    font-size: 40px;
  }
  .fz-100{
    font-size: 40px;
  }
  .fz-110{
    font-size: 50px;
  }
  .fz-120{
    font-size: 55px;
  }
  .fz-130{
    font-size: 60px;
  }
  .fz-150{
    font-size: 80px;
  }
  .fz-160{
    font-size: 85px;
  }
  .slick-next{
    right: 30px;
    z-index: 2;
  }
  .slick-prev{
    left: 30px;
    z-index: 2;
  }
  .gtco-testimonials  .owl-prev{
    position: absolute;
    top: 50%;
    left: 0;
  }
  .gtco-testimonials  .owl-next{
    position: absolute;
    top: 50%;
    right: 0;
  }
  .btn-conoce-mas a::after {
    width: 40%;
  }
  .btn-conoce-mas-n a::after {
    width: 40%;
  }
  .btn-t-articulos-n a::after{
    width: 55%;
  }
  .btn-t-leer-art-n a::after{
    width: 30%;
  }
  .margin-btn-conoce{
    margin-left: 5rem;
    margin-right: 4rem;
  }
  .btn-ayudamos{
    margin-top: 2rem;
    margin-right: 6rem;
  }
  .margin-especialistas{
    margin-right: 6rem;
  }
  .margin-nuestro-con{
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-right: 5rem;
  }
  .margin-t-art{
    margin-bottom: 1rem;
  }
  .padding-top-3{
    padding-top:1rem;
  }
  .talento-img{
  margin-top: 1rem;
  }
  .bg-empowering-people{
    background-image: url('../img/movil/empowering-movil.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 120vh;
  }
  .bg-reclutamiento{
  background-image: url('../img/movil/we-are-the-key-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: auto;
  color: #fff;
}
.bg-el-reclutamiento-solo{
  background-image: url('../img/movil/el-reclutamiento-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.bg-administracion{
  background-image: url('../img/movil/efficient-people-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.bg-and-increasing{
  background-image: url('../img/movil/15-years-of-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.bg-equipo-especialista{
  background-image: url('../img//movil/equipo-especialistas-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.sangria-1{
  text-indent: 0;
}
}
@media only screen and (min-width:578px) and (max-width: 767px){
  .fz-90{
    font-size: 50px;
  }
  .fz-100{
    font-size: 55px;
  }
  .fz-110{
    font-size: 60px;
  }
  .fz-120{
    font-size: 65px;
  }
  .fz-130{
    font-size: 70px;
  }
  .fz-150{
    font-size: 80px;
  }
  .fz-160{
    font-size: 90px;
  }
  .slick-next{
    right: -20px;
    z-index: 2;
  }
  .slick-prev{
    left: -20px;
    z-index: 2;
  }
  .gtco-testimonials  .owl-prev{
    position: absolute;
    top: 50%;
    left: 20%;
  }
  .gtco-testimonials  .owl-next{
    position: absolute;
    top: 50%;
    right: 20%;
  }
  .btn-conoce-mas a::after {
    width: 38%;
  }
  .btn-conoce-mas-n a::after {
    width: 38%;
  }
  .btn-t-articulos-n a::after{
    width: 50%;
  }
  .btn-t-leer-art-n a::after{
    width: 30%;
  }
  .margin-btn-conoce{
    margin-left: 6rem;
  }
  .btn-ayudamos{
    margin-top: 2rem;
    margin-right: 6rem;
  }
  .margin-especialistas{
    margin-right: 6rem;
  }
  .margin-conoce-dis{
    margin-right: 6rem;
  }
  .margin-unlock-con{
    margin-left: 1rem;
    margin-right: 9rem;
  }
  .margin-nuestro-con{
    margin-bottom: 1rem;
    margin-right: 6rem;
  }
  .margin-t-art{
    margin-bottom: 1rem;
    /* margin-right: 6rem; */
  }
  .padding-top-3{
    padding-top: 1rem;
  }
  .talento-img{
    margin-top: 1rem;
  }
  .tit-contacto{
    padding-top:10rem;
  }
  .bg-empowering-people{
    background-image: url('../img/movil/empowering-movil.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 120vh;
  }
  .bg-reclutamiento{
    background-image: url('../img/movil/we-are-the-key-movil.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: auto;
    color: #fff;
  }
  .bg-el-reclutamiento-solo{
    background-image: url('../img/movil/el-reclutamiento-movil.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
  }
  .bg-administracion{
    background-image: url('../img/movil/efficient-people-movil.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
  }
  .bg-and-increasing{
  background-image: url('../img/movil/15-years-of-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.bg-equipo-especialista{
  background-image: url('../img//movil/equipo-especialistas-movil.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.sangria-1{
  text-indent: 0;
}
}
@media only screen and (min-width:768px) and (max-width: 1023px){
  .fz-110{
    font-size: 70px;
  }
  .fz-120{
    font-size: 75px;
  }
  .fz-130{
    font-size: 80px;
  }
  .fz-150{
    font-size: 90px;
  }
  .fz-160{
    font-size: 100px;
  }
  .slick-next{
    right: -20px;
    z-index: 2;
  }
  .slick-prev{
    left: -20px;
    z-index: 2;
  }
  .gtco-testimonials  .owl-prev{
    position: absolute;
    top: 50%;
    left: 20%;
  }
  .gtco-testimonials  .owl-next{
    position: absolute;
    top: 50%;
    right: 20%;
  }
  .btn-conoce-mas a::after {
    width: 40%;
  }
  .btn-conoce-mas-n a::after {
    width: 38%;
  }
  .btn-t-articulos-n a::after{
    width: 50%;
  }
  .btn-t-leer-art-n a::after{
    width: 30%;
  }
  .margin-btn-conoce{
    margin-left: 0;
  }
  .btn-ayudamos{
    margin-top: 1rem;
  }
  .margin-especialistas{
    margin-right: 6rem;
  }
  .margin-nuestro-con{
    margin-bottom: 1rem;
  }
  .margin-t-art{
    margin-bottom: 1rem;
    margin-left: 50%;
  }
  .margin-we-are-the-k-conoce{
    margin-left: 0;
  }
  .talento-img{
    margin-top: 1rem;
  }
  .margin-leer-art{
    margin-right: 50%;
  }
  .padding-top-3{
    padding-top: 1rem;
  }
  .tit-contacto{
    padding-top:10rem;
  }
}
@media only screen and (min-width:1024px) and (max-width: 1200px){

}
@media only screen and (min-width: 1300px) and (max-width: 1599px){
  .fz-24{
    font-size: 15px;
  }
  .fz-26{
    font-size: 17px;
  }
  .fz-28{
    font-size: 19px;
  }
  .fz-30{
    font-size: 20px;
  }
  .fz-36{
    font-size: 30px;
  }
  .fz-38{
    font-size: 30px;
  }
  .fz-40{
    font-size: 35px;
  }
  .fz-60{
    font-size: 40px;
  }
  .fz-70{
    font-size: 43px;
  }
  .fz-80{
    font-size: 50px;
  }
  .fz-90{
    font-size: 60px;
  }
  .fz-100{
    font-size: 65px;
  }
  .fz-110{
    font-size: 70px;
  }
  .fz-120{
    font-size: 85px;
  }
  .fz-130{
    font-size: 95px;
  }
  .fz-150{
    font-size: 110px;
  }
  .fz-160{
    font-size: 115px;
  }
  .nuestro-equipo{
    margin-top: 2rem;
  }
  .txt-admin{
    padding-top: 20rem;
  }
  .txt-increasing{
    padding-top: 6rem;
  }
  .txt-articulo{
  padding-top: 14rem;
  text-align: center;
  }
  .tit-bolsa{
    padding-top: 8rem;
    text-align: center;
  }
  .tit-contacto{
    padding-top: 5rem;
  }
  .circle-1{
    left: 20%;
  }
  .circle-2{
    left: 20%;
  }
  .circle-3{
    left: 20%;
  }
  .circle-4{
    left: 20%;
  }
  .circle-5{
    left: 20%;
  }
  .circle-6{
    left: 20%;
  }
  .btn-conoce-mas a::after {
    width: 42%;
  }
  .btn-conoce-mas-n a::after {
    width: 42%;
  }
  .margin-ayudamos{
    margin-left: 4rem;
    margin-right: 1rem;
  }
  .margin-unlock-con{
    margin-left: 6rem;
    margin-right: 3rem;
  }
  .margin-leer-art{
    margin-right: 2rem;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 2900px){
  .margin-unlock-con{
    margin-left: 12rem;
    margin-right: 3rem;
  }
  .circle-1{
    left: 26%;
  }
  .circle-2{
    left: 26%;
  }
  .circle-3{
    left: 26%;
  }
  .circle-4{
    left: 26%;
  }
  .circle-5{
    left: 26%;
  }
  .circle-6{
    left: 26%;
  }
  .tit-contacto{
    padding-top:10rem;
  }
  .timeline-line{
    left: 50%;
  }
}