 .slide-content-cta, .slide-side-text, .controls-button {



   text-transform: uppercase;



   color: #fff;



   letter-spacing: 0.06rem;



}



 [v-cloak] {



   opacity: 0;



}



 .wrapper {



   height: calc(63vh - 41px);



   min-height: 40rem;



   position: relative;



}





 .slide-wrapper {



   background-size: cover;



   height: 100%;



   background-position: center center;



   position: absolute;



   width: 100%;



   background-blend-mode: darken;



}



 .slide-wrapper {



   background-color: rgba(115, 129, 153, 0.4);



}



 .slide-wrapper:before {



   background-color: rgba(115, 129, 153, 0.25);



}



 .slide-wrapper .slide-content-text {



   text-shadow: 2px 5px 45px rgba(85, 96, 113, 0.25);



}



/* .slide-wrapper:nth-child(2) {



   background-color: rgba(144, 171, 184, 0.7);



}



 .slide-wrapper:nth-child(2):before {



   background-color: rgba(144, 171, 184, 0.3);



}



 .slide-wrapper:nth-child(2) .slide-content-text {



   text-shadow: 2px 5px 45px rgba(121, 142, 152, 0.2);



}



 .slide-wrapper:nth-child(3) {



   background-color: rgba(86, 125, 156, 0.5);



}



 .slide-wrapper:nth-child(3):before {



   background-color: rgba(86, 125, 156, 0.2);



}



 .slide-wrapper:nth-child(3) .slide-content-text {



   text-shadow: 2px 5px 55px rgba(57, 83, 103, 0.4);



}*/



 .slide-wrapper:before {



   content: "";



   position: absolute;



   width: 100%;



   height: 100%;



   z-index: 1;



}



 .slide-inner {



   position: relative;



   z-index: 2;



   height: 100%;



   overflow: hidden;



}



 .slide-bg-text {



   font-family: "Playfair Display";



   color: #000;



   font-size: 42vh;



   line-height: 0.8;



   opacity: 0.03;



   font-weight: 900;



   margin-top: -4rem;



   position: absolute;



   top: 50%;



   left: 5vw;



   transform: translateY(-50%);



}



 .slide-bg-text > p:last-child {



   padding-left: 4rem;



}



 .slide-content {



   color: #fff;



   margin-top: 5rem;



   position: absolute;



   top: 50%;



   left: calc(1vw + (0.7) * 39vh);



   transform: translateY(-50%);



   display: flex;



   flex-direction: column;



   width: 100%;



}



 @media (max-width: 1000px) {



   .slide-content {



     left: calc(13vw + 1rem);



  }



}



 @media (max-height: 730px) {



   .slide-content {



     top: 30%;



     transform: translateY(-30%);



     left: calc(9vw + (0.7) * 16vw);



  }



}



 .slide-content-text {



 font-family: 'gotham_probold', sans-serif;

 font-size: 52px;

line-height: 50px;





}











 

 .slide-content-text > p:last-child {



   padding-left: 3rem;



}



 .slide-content-cta {



  font-family: 'gotham_probold', sans-serif;



  font-size: 14px;



  line-height: 13px;



   cursor: pointer;



   align-self: flex-start;



   margin-top: 4.5rem;



   margin-left: 0;



   padding: 0.9rem 2.2rem;



   border: 1px solid #F2F2F2;



   transition: 0.18s ease-in-out;



}







 @media (max-width: 1000px) {



   .slide-content-cta {



     background-color: rgba(255, 255, 255, 0.3);



     padding-top: 1.2rem;



     padding-bottom: 1.2rem;



  }



}





 .slide-content-cta:hover {



 background: #0E7232;

  color: #fff;



  border: 1px solid #0E7232;



}



 .slide-rect {



   height: 126px;



   width: 100%;



   max-width: 221px;





   position: absolute;



   bottom:  0;



   transform: translateY(-50%);



   right: 0;





}





 .slide-rect-filter {



   filter: brightness(110%) contrast(110%) saturate(110%);



position: relative;

    height: 100%;



}



 .slide-side-text {



   position: absolute;



   left: calc(13vw - 3rem);



   writing-mode: vertical-rl;



   top: calc((50% - (62vh / 2)) + (5vh / 2));



}



 @media (max-height: 790px) {



   .slide-side-text {



     top: calc((50% - (20vw / 2)) + (5vh / 2));



  }



}



 @media (max-height: 730px) {



   .slide-side-text {



     top: calc((40% - (20vw / 2)) + (5vh / 2));



  }



}



 .slide-side-text > span:first-child {



   font-weight: 700;



}



 .slide-side-text:after {



   content: "";



   width: 1px;



   background-color: #fff;



   height: 40px;



   display: block;



   position: absolute;



   top: calc(100% + 25px);



   left: 50%;



   transform: translateX(-50%);



}



 .controls-container {



   position: absolute;



   z-index: 200;



   display: flex;



   bottom: 0;



   right: 0;



   align-items: flex-end;



}



 @media (max-width: 630px) {



   .controls-container {



     display: none;



  }



}



 .controls-button {



   cursor: pointer;



   background-color: rgba(208, 206, 204, 0.32);



   border: 0;



   padding: 1.6rem 2.2rem;



   flex-basis: 0;



   flex-grow: 1;



   min-width: 15rem;



   transition: 0.25s ease-in-out;



   outline: 0;



}



 @media (max-width: 730px) {



   .controls-button {



     padding: 1.2rem 1.4rem;



     min-width: 13rem;



  }



}



 .controls-button:not(.active):hover {



   color: #000;



   background-color: #fff;



}



 .controls-button.active {



   cursor: default;



   font-weight: 700;



   background-color: #3b3e45;



   padding-top: 1.9rem;



   padding-bottom: 1.9rem;



   margin-bottom: -0.3rem;



   position: relative;



}



 @media (max-width: 730px) {



   .controls-button.active {



     padding-top: 1.4rem;



     padding-bottom: 1.4rem;



     margin-bottom: -0.15rem;



  }



}



 .controls-button.active:after {



   content: "";



   background-color: #e3e3e3;



   height: 5px;



   width: calc(100% - 8px);



   position: absolute;



   top: 100%;



   left: 4px;



}



 .controls-button:not(.active) + .controls-button {



   border-left: 1px solid rgba(255, 255, 255, 0.2);



}



 .pagination-container {



   position: absolute;



   z-index: 200;



   display: flex;



   flex-direction: column;



   align-items: flex-end;



   right: 4rem;



   top: 50%;



   transform: translateY(-50%);



}



 @media (max-width: 920px) {



   .pagination-container {



     display: none;



  }



}



 .pagination-item {



   width: 12px;



   height: 12px;



   background-color:  rgba(229, 239, 224, 0.67);



   transition: 0.18s ease-in-out;



   border-radius: 13px;



}



 .pagination-item + .pagination-item {



   margin-top: 1rem;



}



 .pagination-item.active {



   background-color: #E2001D;



   position: relative;



}







 .pagination-item:not(.active) {



   cursor: pointer;



}



 .pagination-item:not(.active):hover {



   background-color: #fff;



   width: 35px;



}



 @keyframes slideLeft {



   from {



     transform: translateX(0);



  }



   to {



     transform: translateX(-100%);



  }



}



 @keyframes slideRight {



   from {



     transform: translateX(-100%);



  }



   to {



     transform: translateX(0);



  }



}



 @keyframes cutTextUp {



   from {



     clip-path: inset(0 0 -10% 0);



  }



   to {



     clip-path: inset(0 0 100% 0);



  }



}



 @keyframes cutTextDown {



   from {



     clip-path: inset(100% 0 0 0);



  }



   to {



     clip-path: inset(-10% 0 -20% 0);



     opacity: 1;



  }



}



 @keyframes cutTextDownFromTop {



   from {



     clip-path: inset(0 0 100% 0);



  }



   to {



     clip-path: inset(0 0 -30% 0);



     opacity: 1;



  }



}



 @keyframes rectMovement {



   0% {



     transform: translateX(0) rotate(0) translateY(-50%);



  }



   60% {



     opacity: 1;



  }



   100% {



     transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%);



     opacity: 0;



  }



}



 @media (max-height: 730px) {



   @keyframes rectMovement {



     0% {



       transform: translateX(0) rotate(0) translateY(-30%);



    }



     60% {



       opacity: 1;



    }



     100% {



       transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%);



       opacity: 0;



    }



  }



}



 @keyframes rectMovementFromRight {



   0% {



     transform: translateX(calc(48vh)) rotate(12deg) translateY(-50%);



     opacity: 0;



  }



   60% {



     opacity: 1;



  }



   100% {



     transform: translateX(0) rotate(0) translateY(-50%);



     opacity: 1;



  }



   @media (max-height: 730px) {



     100% {



       transform: translateX(0) rotate(0) translateY(-30%);



    }



  }



}



 @media (max-height: 730px) {



   @keyframes rectMovementFromRight {



     0% {



       transform: translateX(calc(48vh)) rotate(12deg) translateY(-30%);



       opacity: 0;



    }



     60% {



       opacity: 1;



    }



     100% {



       transform: translateX(0) rotate(0) translateY(-30%);



       opacity: 1;



    }



  }



}



 @keyframes rectMovementRight {



   0% {



     transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%);



  }



   40% {



     opacity: 1;



  }



   100% {



     transform: translateX(0) rotate(0) translateY(-50%);



     opacity: 1;



  }



   @media (max-height: 730px) {



     100% {



       transform: translateX(0) rotate(0) translateY(-30%);



    }



  }



}



 @media (max-height: 730px) {



   @keyframes rectMovementRight {



     0% {



       transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%);



    }



     40% {



       opacity: 1;



    }



     100% {



       transform: translateX(0) rotate(0) translateY(-30%);



       opacity: 1;



    }



  }



}



 @keyframes fadeIn {



   from {



     opacity: 0;



  }



   to {



     opacity: 1;



  }



}



 .slide-wrapper {



   opacity: 0;



   transition-delay: 1.4s;



   transition-duration: 0s;



   transition-property: opacity;



   will-change: opacity, transform;



}



 .slide-wrapper:not(.active) {



   animation-delay: 0.5s;



   animation-name: slideLeft;



   animation-duration: 0.9s;



   animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93);



   pointer-events: none;



}



 .slide-wrapper:not(.active) .slide-content-text > p, .slide-wrapper:not(.active) .slide-side-text {



   animation-name: cutTextUp;



   animation-duration: 0.5s;



   animation-timing-function: ease-out;



}



 .slide-wrapper:not(.active) .slide-rect {



   animation-name: rectMovement;



   animation-duration: 0.5s;



   animation-timing-function: ease;



   animation-fill-mode: forwards;



}



 .slide-wrapper.active {



   transition-delay: 0s;



   opacity: 1;



}



 .slide-wrapper.active .slide-content-text > p {



   opacity: 0;



   animation-delay: 0.8s;



   animation-name: cutTextDown;



   animation-duration: 0.5s;



   animation-timing-function: ease;



   animation-fill-mode: forwards;



}



 .slide-wrapper.active .slide-rect {



   opacity: 0;



   animation-name: rectMovementFromRight;



   animation-duration: 0.45s;



   animation-timing-function: ease;



   animation-fill-mode: forwards;



   animation-delay: 0.9s;



}



 .is-previous .slide-wrapper:not(.active) {



   animation: none;



}



 .is-previous .slide-wrapper:not(.active) .slide-rect {



   animation: none;



}



 .is-previous .slide-wrapper.active {



   transform: translateX(-100%);



   animation-fill-mode: forwards;



   animation-delay: 0.5s;



   animation-name: slideRight;



   animation-duration: 0.8s;



   animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93);



}



 .is-previous .slide-wrapper.active .slide-rect {



   opacity: 0;



   animation-name: rectMovementRight;



   animation-duration: 0.5s;



   animation-timing-function: ease-out;



   animation-fill-mode: forwards;



   animation-delay: 0.9s;



}



 .first-load .slide-wrapper.active .slide-side-text, .first-load .slide-wrapper.active .slide-content-cta, .first-load .slide-wrapper.active .slide-rect, .first-load .controls-container {



   opacity: 0;



   animation-name: fadeIn;



   animation-delay: 0.3s;



   animation-duration: 0.3s;



   animation-fill-mode: forwards;



   animation-timing-function: ease-in;



}



 .first-load .slide-wrapper.active .slide-content-text > p {



   animation-name: fadeIn;



   animation-delay: 0.5s;



   animation-duration: 0.7s;



}