/*///////////////////////// GENERALES /////////////////////////*/

@font-face {
  font-family: 'Gotham Md';
  src: url('../fonts/GothamRounded-Medium.otf');
  font-weight: 500;
}

@font-face {
  font-family: 'Gotham Bd';
  src: url('../fonts/GothamRounded-Bold.otf');
  font-weight: 700;
}

@font-face {
  font-family: 'Gotham Bk';
  src: url('../fonts/GothamRounded-Book.otf');
  font-weight: 400;
}

@font-face {
  font-family: 'Gotham Lg';
  src: url('../fonts/GothamRounded-Light.otf');
  font-weight: 300;
}

* {
  scroll-behavior: smooth;
}

html,
section {
  overflow-x: hidden;
}

body {
  font-family: 'Gotham BK', sans-serif;
  background-color: white;
}


img {
  width: 100%;
}

.img-rounded {
  border-radius: 25px;
}

a:hover {
  text-decoration: none;
}

strong {
  font-weight: 700;
}

.h1 {
  font-size: 3.6rem;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-700 {
  font-weight: 700;
  font-family: 'Gotham BD', sans-serif;
}

.lh-100 {
  line-height: 1;
}

.lh-140 {
  line-height: 1.4;
}

.bg-dark {
  background-color: #1D1D1B !important;
}

/*///////////////////// BOTONES QUE PISAN BS //////////////////*/

.btn {
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  transition: all 150ms ease-out;
  text-decoration: none !important;
  display: flex;
  width: fit-content;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-primary {
  border: 2px solid #FFAA00;
  color: #fff;
  background-color: #FFAA00;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
  background: #e09600;
  color: #fff;
  border: 2px solid #e09600;
  transition: all ease .25s;
}

.btn-outline-primary {
  border: 1px solid #0D8BCD;
  color: #0D8BCD;
  background-color: #fff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
  background: #0D8BCD;
  color: #fff;
  border: 1px solid #0D8BCD;
  transition: all ease .25s;
}

.btn-secondary {
  border: 2px solid #0D8BCD;
  color: #fff;
  background-color: #0D8BCD;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
  background: #0771aa;
  color: #fff;
  border: 2px solid #0771aa;
  transition: all ease .25s;
}

.btn:focus,
input:focus,
input:active,
.form-control:focus {
  box-shadow: none;
  outline: none;
}

.yellow-gradient {
  background: #fff;
  background: linear-gradient(to right, #fff 0%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.yellow-gradient.title-deco {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.yellow-gradient.title-deco::after {
  content: "";
  width: 100%;
  height: 4px;
  border-radius: 8px;
  background: #fff;
  background: linear-gradient(to right, #fff 0%, #fff 100%);
  position: absolute;
  bottom: -6px;
  left: 0;
}


.light-blue {
  color: #00D3EF;
}

.orange {
  color: #FFAA00;
}

.violet {
  color: #9116FF;
}

.pink {
  color: #FF1EAA
}

.blue {
  color: #3E7DFF;
}

.gray {
  color: #4D4D4D;
}

/* FLOAT BTN */
.wsp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 30px;
  right: 30px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 0px 10px 15px -7px rgba(0, 0, 0, 0.52);
  -webkit-box-shadow: 0px 10px 15px -7px rgba(0, 0, 0, 0.52);
  -moz-box-shadow: 0px 10px 15px -7px rgba(0, 0, 0, 0.52);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
}

.wsp-float:hover {
  text-decoration: none;
  color: white;
  background-color: #18b853;
}

/*///////////////////////// HEADER /////////////////////////*/

.menu {
  -webkit-transition: background 0.3s 0s linear;
  -moz-transition: background 0.3s 0s linear;
  -o-transition: background 0.3s 0s linear;
  transition: background 0.3s 0s linear;
}

.navbar-brand img {
  filter: brightness(0) invert(1)
}

.navbar {
  z-index: 5;
  width: 100%;
  padding: 0.8rem 3rem;
}

.nav-link {
  font-size: 18px;
  font-weight: 300;
  text-transform: lowercase;
  color: white !important;
  margin-right: 1rem !important;
  margin-left: 1rem !important;
  padding: 10px 0px !important;
}

.nav-item {
  position: relative;
}

.navbar .nav-item::after,
.navbar-light .navbar-nav .active::after {
  content: "";
  background-color: #fff;
  height: 2px;
  width: 35px;
  position: absolute;
  left: -15px;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  z-index: -5;
  margin-bottom: 5px;
  opacity: 0;
  transition: all .3s;
}

.navbar .nav-item:hover::after,
.navbar-light .navbar-nav .active::after {
  content: "";
  left: 0;
  opacity: 1;
}

.bsnav-sticky.bsnav-sticky-slide .nav-link.active-nav::before {
  content: "";
  background-color: #fff;
  height: 2px;
  width: 35px;
  position: absolute;
  left: 0px;
  right: 0;
  margin: 0 auto;
  bottom: 5px;
  z-index: -5;
}

.bsnav-sticky.bsnav-sticky-slide.sticked.in {
  background: #fff !important;
}

.bsnav-sticky.bsnav-sticky-slide.sticked.in .navbar-brand img {
  width: 75%;
  filter: none;
}

.bsnav-sticky.bsnav-sticky-slide.sticked.in.navbar .nav-item::after {
  background-color: #4F5AFF;
}


.bsnav-sticky.bsnav-sticky-slide.sticked.in .nav-link {
  color: #4F5AFF !important
}

.navbar.bsnav-sticky.bsnav-sticky-slide.sticked.in {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 8px 15px -5px,
    rgba(0, 0, 0, 0.25) 0px 4px 10px -8px;
}

.bsnav-sticky.bsnav-sticky-slide.sticked.in .nav-link.active-nav::before {
  content: "";
  background-color: #4F5AFF;
  height: 2px;
  width: 35px;
  position: absolute;
  left: 0px;
  right: 0;
  margin: 0 auto;
  bottom: 5px;
  z-index: -5;
}

.navbar-toggler {
  right: 20px;
}

.bsnav-sticky.bsnav-sticky-slide.navbar-toggler-icon,
.bsnav-sticky.bsnav-sticky-slide .navbar-toggler-icon::after,
.bsnav-sticky.bsnav-sticky-slide .navbar-toggler-icon::before {
  transition: .3s !important
}

.bsnav-sticky.bsnav-sticky-slide.sticked.in .navbar-toggler-icon,
.bsnav-sticky.bsnav-sticky-slide.sticked.in .navbar-toggler-icon::after,
.bsnav-sticky.bsnav-sticky-slide.sticked.in .navbar-toggler-icon::before {
  background-color: #4F5AFF !important;
  transition: .5s !important
}

.submenu {
  display: block;
  background: #4d4d4d3b;
  min-width: 18rem;
  border: 0;
  border-radius: 10px;
  margin-top: 0px;
  padding-left: 0;
  list-style: none;
  position: absolute;
  display: none;
}

.submenu .nav-item .nav-link {
  font-size: 16px;
  font-weight: 300;
  text-transform: lowercase;
}

.nav-item.hover-menu:hover .submenu {
  display: block;
}

.submenu .nav-item .nav-link:hover {
  margin-left: 25px !important;
}

.submenu .nav-item:hover::after {
  content: none;
}

.bsnav-sticky.bsnav-sticky-slide.sticked.in.navbar .hover-menu:hover>.submenu {
  display: block;
  background: #ffffffd7;
}

/* Bs nav para el menú mobile */

.bsnav-mobile .navbar {
  left: 0 !important;
  transform: translate3d(-300px, 0, 0) !important;
}

.bsnav-mobile.in .navbar {
  transform: translate3d(0px, 0, 0) !important;
}

.bsnav-mobile .navbar.bsnav-dark {
  background: #ffff !important;
  color: #4F5AFF !important;
  padding: 0px 0 15px;
  box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, 0.65);
  -webkit-box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, 0.65);
  border-bottom: 4px solid #4F5AFF;
}

.bsnav-mobile .nav-link {
  color: #1D1D1B !important;
}

.contact-mobile {
  display: none;
}

/*//////////////////////// MAIN-HERO ////////////////////////////*/

.main-section {
  min-height: 100vh;
  background: rgb(79, 90, 255);
  background: linear-gradient(153deg, rgba(79, 90, 255, 1) 0%, rgba(255, 170, 0, 1) 100%);
  display: flex;
  align-items: center;
  position: relative;
}

.main-section .container {
  position: relative;
  z-index: 2;
}

/* .main-video {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -5;
  height: 100%;
  object-fit: cover;
} */
.bg-cover {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.title-inter-ab {
  font-size: 60px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 850px;
  font-weight: 700;
  line-height: 1;
}

.btn-linkedin-float {
  position: absolute;
  bottom: 65px;
  right: 70px;
}

/*///////////////////////// NOSOTROS //////////////////////////*/

.service-block {
  position: relative;
  padding: 100px 0px;
  min-height: 90vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  display: flex;
  align-items: center;
}

.service-block.brand {
  background-image: url("../images/brand-bg.jpg");
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: .3s;
}

.service-block.brand .brand-overlay {
  background-color: #9116FF;
}

.service-block.brand:hover .brand-overlay {
  opacity: .38;
}

.service-block.experience {
  background-image: url("../images/experience-bg.jpg");
}

.service-block.experience .experience-overlay {
  background-color: #FF1EAA;
}

.service-block.experience:hover .experience-overlay {
  opacity: .48;
}

.service-block.digital {
  background-image: url("../images/digital-bg.jpg");
}

.service-block.digital .digital-overlay {
  background-color: #142778;
}

.service-block.digital:hover .digital-overlay {
  opacity: .48;
}

.service-block.design {
  background-image: url("../images/design-bg.jpg");
}

.service-block.design .design-overlay {
  background-color: #FFAA00;
}

.service-block.design:hover .design-overlay {
  opacity: .48;
}

/*///////// Pulpos ///////////*/
.pulpos {
  min-height: 90vh;
}

.pulpos-member {
  height: 45vh;
  object-fit: cover;
  transition: .3s;
  filter: grayscale(5);
}

.pulpos-member:hover {
  filter: none;
}


/* Carousel de marcas */

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  max-width: 140px;
  margin: auto;
}

.owl-carousel .owl-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.owl-carousel .owl-stage {
  display: flex;
}

.owl-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-75px);
}

/* CONTADOR */
.counter {
  background-color: #F7F7F7;
  padding: 75px 0px;
}

.counter-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter-block span,
.counter-block .counter-value {
  font-weight: 700 !important;
}

.column-border {
  border-right: 1px solid #E1E1E1;
}

.row-border {
  border-bottom: 1px solid #E1E1E1;
}

.newsletter {
  position: relative;
}

.newsletter .form-control {
  border-radius: 35px !important;
  border: 2px solid #c7c7c7;
  font-style: italic;
  padding: 1rem !important
}

.newsletter .input-group-append {
  position: absolute;
  right: 0;
  bottom: 0;
}

.newsletter .btn {
  color: #4D4D4D;
  font-weight: 700;
  text-transform: uppercase;
}

.orange-linear-text {
  color: #4D4D4D;
  -webkit-text-fill-color: white;
  /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #4D4D4D;
}

/*///////////////////////// FOOTER //////////////////////////*/

footer {
  background-color: #000000;
  color: white;
}

footer ul {
  list-style: none;
  display: flex;
  padding-left: 0;
}

footer a {
  transition: .3s;
}

footer a:hover {
  color: #FFAA00;
}

.social-media {
  width: 40px;
  height: 40px;
  border: 2px solid white;
  border-radius: 50%;
  color: #fff;
  padding: 15px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
  margin: 0px 8px 0px 0px;
}

.social-media:hover {
  text-decoration: none;
  background-color: #00D3EF;
  border-color: #00D3EF;
  transform: scale(1.1);
  color: black;
}

.btn-linkedin-float .social-media:hover {
  background-color: #0771aa !important;
  border-color: #0771aa !important;
  color: #fff !important;
}

.footer-flags {
  width: 100%;
  max-width: 500px;
}

.footer-logo {
  max-width: 150px;
  display: flex;
  margin-left: auto;
}



/*////////////////////// INTERNAS - Trabajos //////////////////*/
.about-bg {
  background-color: #000000;
}

.main-video {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  height: 100%;
  object-fit: cover;
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-wrapper .video-item {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  object-fit: cover;
}

.playpause {
  background-image: url("../images/play-btn.svg");
  background-repeat: no-repeat;
  width: 110px;
  height: 110px;
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  margin: auto;
  background-size: contain;
  background-position: center;
  filter: invert(1);
  cursor: pointer;
  transition: .3s;
}

.playpause:hover {
  filter: invert(1) drop-shadow(5px 5px 10px #000);
}

.counter-row {
  margin: 0 auto;
}

.counter-internal {
  width: 150px;
}

.counter-internal span {
  font-size: 45px;
}

.counter-internal .counter-value {
  font-size: 95px;
}

.counter-description {
  font-size: 28px;
  line-height: 1.1;
}

#internal-owl .owl-nav i {
  color: white;
}

.inter-ul-li {
  list-style: none;
  padding-left: 0px;
}

.inter-ul-li li {
  padding: 10px 5px;
  border-bottom: 2px solid #222222;
}

/*////////////////////// INTERNAS - Experiencias //////////////////*/
.experiences-hero {
  min-height: 100vh;
  background-image: url(../images/experiencias-hero.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  position: relative;
  color: #606060;
}

.movement {
  background-image: url(../images/movimiento-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #606060;
  position: relative;
  min-height: 1400px;
}

.movement .container {
  position: relative;
  z-index: 1;
}

.blue-linear-text {
  color: #4F5AFF;
  -webkit-text-fill-color: white;
  /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #4F5AFF;
}

.movement .map-deco {
  height: 1300px;
  width: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

/*////////////////////// EQUIPO //////////////////*/
.team-name {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 0;
  padding-left: 2.2rem;
  transition: all .35s;
}

.team-container {
  border-bottom: 1px solid #3a3a3a;
  padding-bottom: 2.6rem;
  padding-top: 2.6rem;
  transition: all .35s;
  color: white;
  border-left: 6px solid transparent;
}

.team-container:hover {
  background-color: rgb(20, 20, 20);
  border-left: 6px solid #e09600;
}

.team-container:hover .team-name,
.team-container:hover .team-position,
.team-container:hover span.badge {
  margin-left: .6rem;
}

.team-container span.badge {
  transition: all .35s;
}

.badge {
  padding: 0.35em 0.8em;
  border-radius: 1rem;
  text-transform: uppercase;
}

.badge-dark {
  background-color: #000;
  border: 1px solid white;
}

.team-position {
  font-size: 18px;
  transition: all .35s;
}

.team-social {
  display: flex;
}

.expand-btn {
  font-size: 24px;
}

.expand-btn[aria-expanded=false]:before {
  content: "▼";
  display: block;
  transition: all .3s;
}

.expand-btn[aria-expanded=true]:before {
  content: "▼";
  display: block;
  transform: rotate(180deg);
  transition: all .3s;
}

.social-media .fas.fa-phone {
  transform: scaleX(-1);
}

/*////////////////////// RESPONSIVE //////////////////*/

@media (max-width: 1200px) {
  .btn-linkedin-float {
    position: absolute;
    bottom: 30px;
    right: 38px;
  }
}

@media (max-width: 1024px) {
  .btn-linkedin-float {
    position: absolute;
    bottom: 25px;
    right: 35px;
  }
}

@media (max-width: 768px) {
  .btn-linkedin-float {
    position: absolute;
    bottom: 15px;
    right: 25px;
  }

  .bsnav-sticky.bsnav-sticky-slide.sticked.in .navbar-toggler.active .navbar-toggler-icon {
    background-color: white !important;
  }

  .navbar {
    padding: 0.8rem 1rem;
  }

  .submenu {
    position: relative;
    background-color: white;
    min-width: auto;
  }

  .team-name {
    font-size: 30px;
   padding-left: 0;
}

  .submenu .nav-item .nav-link {
    color: #4F5AFF !important;
  }

  .counter-row {
    justify-content: center;
    text-align: center;
  }

  .counter-row .col {
    text-align: center !important;
  }

  .title-inter-ab {
    font-size: 40px;
    line-height: 1.2;
    width: 300px;
  }

  .movement .map-deco {
    opacity: .5 !important;
  }

  .deco-sm {
    width: 190px !important;
    margin-left: 75px !important;
  }

}

@media (max-width: 525px) {

  .h1 {
    font-size: 2.6rem;
  }

  .column-border {
    border: 0;
  }

  .pulpos-member {
    height: 30vh;
  }

  .yellow-gradient.title-deco::after {
    content: "";
    width: 100%;
    max-width: 215px;
    left: 0;
    margin: 0 auto;
    right: 0;
  }

  .counter-row {
    display: block;
  }

  .counter-internal {
    width: auto;
  }

  .counter-internal .counter-value {
    font-size: 75px;
  }

  .counter-internal .counter-description {
    font-size: 36px;
  }

  .team-container {
    margin: 0;
  }

  .footer-logo {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
  }

  .movement {
    min-height: 1000px;
    height: auto;
  }

  .movement .h3,
  .experiences-hero .h3 {
    font-size: 1.3rem;
  }

  .movement .map-deco {
    height: 1000px;
    opacity: .2 !important;
  }
}

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

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


.fa-chevron-left:before, .fa-chevron-right:before{
  color: #fff !important;
}