@-webkit-keyframes bgcolor-animation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes bgcolor-animation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bgcolor-animation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.page {
  padding: 0;
  margin-top: 0;
}
/*
#fullpage {
  height: 100vh;
  overflow-y: scroll;
}
 */
.slides {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.section.full-width {
  grid-column: span 2;
}
@media (max-width: 767px) {
  .section {
    height: 100%;
    grid-column: span 2;
  }
  .section .arrow {
      display: none;
  }
}

.section .arrow {
  bottom: 12vh;
  border-color: #2F1E14;
  height: 24px;
  left: 50%;
  margin-left: -12px;
  position: absolute;
  width: 24px;
}
.section .arrow:hover {
  background: none;
}
.section.image {
  background-position: center center;
  background-size: cover;
}
.section.background-color {
  background: linear-gradient(270deg, #c3c1be, #e1c5a9, #d8857d, #c3c1be);
  background-size: 600% 600%;
  -webkit-animation: bgcolor-animation 30s ease infinite;
  -moz-animation: bgcolor-animation 30s ease infinite;
  animation: bgcolor-animation 30s ease infinite;
}
.section-content {
  color: #fff;
  left: 10vw;
  position: absolute;
  text-align: left;
  transform: translateY(-50%);
  top: 50%;
}
.left-top .section-content {
  top: 170px;
  transform: unset;
}
.left-bottom .section-content {
  bottom: 5vh;
  top: auto;
  transform: unset;
}
.center-top .section-content {
  left: 50%;
  top: 170px;
  transform: translateX(-50%);
}
.center-middle .section-content {
  left: 50%;
  transform: translate(-50%, -50%);
}
.center-bottom .section-content {
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
}
.section:not(.background-color) .section-content {
  bottom: 5vh;
  left: 2.5vw;
  top: auto;
  transform: none;
}
@media (max-width: 767px) {
  .section:not(.image):not(.video) .section-content {
    position: static;
    transform: unset !important;
    padding: 2rem;
  }
  .section.video,
  .section.image {
    min-height: 35vh;
  }
}

@media (max-width: 767px) {
  .claim-subtitle p {
    font-size: 33px !important;
  }
}

.section-content h1, .section-content h2 {
  font-size: 60px;
}
.section-content h3 {
  font-size: 50px;
  font-weight: 100;
}
.section-content h3 a {
  font-size: 25px;
}
.section-content p {
  font-size: 26px;
  line-height: 30px;
}
.section-content h4 {
  font-size: 20px;
  margin-top: 20px;
}
.section-content a {
  color: inherit;
}

.vimeo-wrapper {
  /* position: sticky; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.vimeo-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.vimeo-wrapper video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.go-to-projects {
  background: #fff;
  font-size: 30px;
  grid-column: span 2;
  padding: 50px 2.5vw 100px;
  text-align: center;
  font-weight: 200;
}
/* .go-to-projects a:before {
  visibility: visible;
  width: 100%;
} */


.services {
  padding: 25px 2.5vw;
}

.services h3 {
  font-family: 'DM Serif Text', serif;
  font-size: 46px;
  line-height: 48px;
  margin-bottom: 3rem;
  text-align: center;
}

.services .cards {
  background: url('../../image/line-services.png') no-repeat 30px 0px;
  gap: 40px;
}

.service:last-child {
  background: #fff;
}
.service h4 {
  background: #fff;
  border-radius: 50px;
  display: inline-block;
  font-size: 40px;
  font-weight: 200;
  line-height: 50px;
}
.service h4 a {
  border: 1px solid var(--black-slug);
  border-radius: 50px;
  display: inline-block;
  padding: calc(1rem - 10px) 28px;
  opacity: 1;
  color: rgb(48, 30, 18);
  font-size: 32px;
  font-weight: 100;
}

.service h4 a:hover:before {
  content: unset;
}
.service h4 a:hover {
  opacity: 1;
}
.service p {
  margin: 2rem 0 4rem 120px;
  font-size: 20px;
}

@media (min-width: 768px) {
  .services .cards {
    background: url('../../image/line-services-desktop.png') no-repeat 140px 20px;
    margin: auto;
    max-width: 1024px;
    padding-top: 30px;
  }

  .estrategia h4 {
    position: relative;
    top: -38px;
  }

  .identidad h4 {
    position: relative;
    left: 79px;
    top: 10px;
  }

  .activacion h4 {
    position: relative;
    left: 96px;
    top: -34px;
  }

  .service p {
    margin: 2rem 0 4rem 0;
    font-size: 20px;
  }

  .service:last-child {
    background: unset;
  }
  .service:last-child h4 {
    background: #fff;
    display: block;
  }
}

.posts {
  background: var(--light-gray);
  padding: 50px 2.5vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.posts header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.posts .ilustracio-blog {
  max-width: 5vw;
}

.posts article img {
  filter: grayscale(100%);
  height: 200px;
  object-fit: cover;
}

.posts article:hover img{
  filter: none;
}

.posts article h4 {
  font-size: 20px;
  margin: 1rem 0 .5rem;
}

.posts article .summary {
  font-weight: 200;
  max-height: 200px;
  display: -webkit-box;
  max-width: 200px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .5rem;
}


.intro .section-content h3{
  position: relative;
}

.intro .section-content h3 li{
  display: none;
  opacity: 0;
}

@media (max-width: 767px) {
  .section-content h3 li {
    font-size: 49px;
  }

  .posts{
    grid-template-columns: repeat(1, 1fr);
  }
}

.intro .section-content h3 li.active {
  display: block;
  opacity: 1;
  animation: fade 3s ease-in-out;
}


@keyframes fade {
  0% {
      opacity: 0;
  }
  25% {
      opacity: 1;
  }
  75% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

.page-home #menu-desktop * {
  color: white;
}

.intro .section-content{
  z-index: 999;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  top: 50% !important;
  bottom: auto !important;
}