/* Main CSS file for DXP.ae */
*:focus {
  outline: none;
}

* {
  cursor: default;
}

a:link {
  cursor: pointer !important;
}

/* Removing arrows on iPhone 5 Screens */
@media only screen and (min-width: 325px) {
  .next-case-study-tiny {
    display: none;
  }
}
@media only screen and (max-width: 320px) {
  .arrows-arrows-block {
    display: none;
  }
  .next-case-study-normal {
    display: none;
  }
}

.hvr-forward, .hvr-backward, .hvr-grow {
  cursor: pointer !important;
}

.attract-hover-easing {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.all-rights-reserved {
  padding-bottom: 3.85rem;
}

@media only screen and (max-width: 1280px) {
  .all-rights-reserved {
    padding-bottom: 2.9rem;
  }
}

.next-case-study {
  padding-bottom: 3.85rem !important;
}
@media only screen and (max-width: 1280px) {
  .next-case-study {
    padding-bottom: 2.9rem !important;
  }
}

.arrows-arrows-block {
  padding-bottom: 2.72rem;
}

@media only screen and (max-width: 1280px) {
  .arrows-arrows-block {
    padding-bottom: 1.72rem;
  }
}

/* CSS Scroll Snap creates a bug in page loading and never loads from the top for mobile iOS Safari */
@media only screen and (min-width: 414px) {
  /* body won't work for Chrome, Firefox ¯\_(ツ)_/¯ */
  html {
    scroll-snap-type: y mandatory;
  }
  /* html won't work for Safari ¯\_(ツ)_/¯ */
  body {
    scroll-snap-type: y mandatory;
  }
}

html {
  background: rgb(21,40,55);
  background: radial-gradient(circle, rgba(21,40,55,1) 0%, rgba(13,21,28,1) 100%);
  cursor: auto !important;
}

/* Fixing Scrollreveal issue */
html.sr .load-hidden {
  visibility: hidden;
}

body {
  overscroll-behavior-y: none;
  cursor: auto !important;
  background: rgb(21,40,55);
  background: radial-gradient(circle, rgba(21,40,55,1) 0%, rgba(13,21,28,1) 100%);
}

@font-face {
    font-family: 'NunitoSans-Bold';
    src: url('../font/NunitoSans-Bold.woff2') format('woff2'),
         url('../font/NunitoSans-Bold.woff') format('woff'),
         url('../font/NunitoSans-Bold.ttf') format('truetype');
    font-weight: bold;
  }
  @font-face {
    font-family: 'NunitoSans-SemiBold';
    src: url('../font/NunitoSans-SemiBold.woff2') format('woff2'),
         url('../font/NunitoSans-SemiBold.woff') format('woff'),
         url('../font/NunitoSans-SemiBold.ttf') format('truetype');
    font-weight: semibold;
  }
  @font-face {
    font-family: 'NunitoSans-Light';
    src: url('../font/NunitoSans-Light.woff2') format('woff2'),
         url('../font/NunitoSans-Light.woff') format('woff'),
         url('../font/NunitoSans-Light.ttf') format('truetype');
    font-weight: light;
  }

  /* Fix Numbering on Home Slider */
  #home .swiper-pagination-bullet:first-child {
    display: none !important;
  }

  hr {
    display: inline-block;
    height: 1px;
    width: 100px;
    border: 0;
    border-bottom: 0.1rem solid #fff;
    padding-right: 0;
  }

  .short-line hr {
    display: inline-block;
    height: 1px;
    width: 50px;
    border: 0;
    border-bottom: 0.1rem solid #fff;
    padding-right: 0;
  }

  .gray-line hr {
    display: inline-block;
    height: 1px;
    width: 75px;
    border: 0;
    border-bottom: 0.05rem solid #718096;
    padding-right: 0;
  }


  @-webkit-keyframes bounce-line {
    0% {
      width: 0;
      right: auto;
      left: 0;
    }
    4% {
      width: 100%;
      right: auto;
      left: 0;
    }
    90% {
      width: 100%;
      right: 0;
      left: auto;
    }
    95% {
      width: 0;
      right: 0;
      left: auto;
    }
    100% {
      width: 0;
      right: 0;
      left: auto;
    }
  }

  @keyframes bounce-line {
    0% {
      width: 0;
      right: auto;
      left: 0;
    }
    6% {
      width: 100%;
      right: auto;
      left: 0;
    }
    87% {
      width: 100%;
      right: 0;
      left: auto;
    }
    97% {
      width: 0;
      right: 0;
      left: auto;
    }
    100% {
      width: 0;
      right: 0;
      left: auto;
    }
  }

  /* Cursor */
/* .page,
.page a {
  cursor: pointer !important;
} */

.circle-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
}
.circle-cursor--outer {
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  z-index: 9999999;
  opacity: 0.7;
}
.circle-cursor--inner {
  width: 5px;
  height: 5px;
  left: -2.5px;
  top: -2.5px;
  z-index: 9999999;
  background: #fff;
}

  .slider-scroll-down {
    display: inline-block;
    padding-bottom: 0.15rem;
    width: 100px;
    position: relative;
    color: #fff;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
  }
  .slider-scroll-down .bounce-line {
    display: block;
    position: relative;
    width: 100px;
    height: 2px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .slider-scroll-down .bounce-line:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-name: bounce-line;
            animation-name: bounce-line;
  }

  .text-7xl {
    font-size: 5rem;
  }
  @media only screen and (max-width: 600px) {
    .text-7xl {
      font-size: 3.75rem;
    }
  }

  .text-7xl-future {
    font-size: 5rem;
  }
  /* Fixing Sky Dome Mobile Text */
  @media only screen and (max-width: 600px) {
    .text-7xl-future {
      font-size: 3.5rem;
    }
  }

  .text-7xl-about {
    font-size: 5rem;
  }
  @media only screen and (max-width: 600px) {
    .text-7xl-about {
      font-size: 2.3rem;
    }
  }

  .text-8xl {
    font-size: 5rem;
  }
  @media only screen and (max-width: 1024px) {
    .text-8xl {
      font-size: 4rem;
    }
  }
  @media only screen and (max-width: 768px) {
    .text-8xl {
      font-size: 3rem;
    }
  }

  @media screen and (max-height: 700px) {
    .text-8xl {
      font-size: 2rem;
    }
    .text-8xl li {
      padding-bottom: 0.3rem;
    }
  }

  @media screen and (max-height: 600px) {
    .text-8xl {
      font-size: 1.5rem;
    }
    .mob-address {
      padding-top: 0.5rem !important;
    }
  }

 .nunito-bold {
    font-family: NunitoSans-Bold;
  }
 .nunito-semibold {
    font-family: NunitoSans-SemiBold;
  }
 .nunito-light {
    font-family: NunitoSans-Light;
  }

  .bg-showreel {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }

  .bg-gradient-light {
    background: rgb(108,123,144);
    background: linear-gradient(144deg, rgba(108,123,144,1) 0%, rgba(189,203,212,1) 100%);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .bg-dubai-urban-sky-dome-img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: -webkit-fill-available;
    min-height: 100vh;
  }

  .bg-sharjah {
    background: linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.25)
    ),url(../img/bg-invest-in-sharjah-task.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: -webkit-fill-available;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

 .bg-abu-dhabi {
    background: linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.25)
    ),url(../img/bg-abu-dhabi-plan.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: -webkit-fill-available;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  @media only screen and (min-width: 600px) {
  .bg-abu-dhabi {
    background: linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.25)
    ),url(../img/bg-full-screen-abu-dhabi-plan.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: -webkit-fill-available;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
 }

  .bg-time-to-care {
    background: linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.25)
    ),url(../img/bg-Time-To-Care.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: -webkit-fill-available;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .bg-business-excellence-awards {
    background: linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.25)
    ),url(../img/bg-Business-Excellence-Awards.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: -webkit-fill-available;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .bg-dubai-urban-sky-dome {
    background: linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.25)
    ),url(../img/bg-dubai-urban-sky-dome-task.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: -webkit-fill-available;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .bg-portfolio {
    background: rgb(21,40,55);
    background: radial-gradient(circle, rgba(21,40,55,1) 0%, rgba(13,21,28,1) 100%);
  }

  .bg-film {
    background: rgb(21,40,55);
    background: radial-gradient(circle, rgba(21,40,55,1) 0%, rgba(13,21,28,1) 100%);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .video-player video {
    -webkit-box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.25), 0 0 10rem 1rem rgba(255, 255, 255, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.25);
    box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.25), 0 0 10rem 1rem rgba(255, 255, 255, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.25);
  }

  .portfolio-mob-line {
    width: 3rem;
  }

  .image-box {
    height: auto; /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  }
  #portfolio .swiper-slide-active .titlehvr .image-box img {
    transition: transform .75s ease !important;
  }
  #portfolio .swiper-slide-active .titlehvr:hover .image-box img {
    transform: scale(1.07);
  }
  #portfolio .swiper-slide-active .titlehvr .title-hvr-grow {
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }
  #portfolio .swiper-slide-active .titlehvr:hover .title-hvr-grow {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  #portfolio .swiper-slide-active .portfolio-mob-language {
    opacity: 0.7;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #portfolio .portfolio-mob-language {
    opacity: 0.20;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #portfolio .portfolio-mob-language {
    bottom: 0vh;
    margin-bottom: -2.25rem;
  }

  #portfolio .swiper-slide-active img {
    filter: brightness(100%) !important;
    -webkit-box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.25), 0 0 10rem 1rem rgba(255, 255, 255, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.25);
    box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.25), 0 0 10rem 1rem rgba(255, 255, 255, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.25);
    -webkit-transition: filter 0.75s ease;
    transition: filter 0.75s ease;
    -webkit-transition: box-shadow 2.5s ease-in-out;
    transition: box-shadow 2.5s ease-in-out;
  }

  @media only screen and (max-width: 767px) {
  #portfolio .swiper-slide-active img {
      filter: brightness(75%) !important;
      -webkit-box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.25), 0 0 10rem 1rem rgba(255, 255, 255, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.25);
      box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.25), 0 0 10rem 1rem rgba(255, 255, 255, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.25);
      -webkit-transition: filter 0.75s ease;
      transition: filter 0.75s ease;
      -webkit-transition: box-shadow 2s ease-in-out;
      transition: box-shadow 2.5s ease-in-out;
    }
  }

  @media only screen and (max-width: 767px) {
    #portfolio .swiper-container {
      height: 110vh !important;
      bottom: 10vh !important;
    }
  }

  #portfolio .swiper-slide {
    pointer-events: none !important;
  }

  #portfolio .swiper-slide-active {
    pointer-events: auto !important;
  }

  #portfolio .swiper-slide .relative {
    opacity: 0.2;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
  }

  #portfolio .swiper-slide-active .relative {
    opacity: 1;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #portfolio .swiper-slide .portfolio-mob-text {
    opacity: 0.1;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
  }

  #portfolio .swiper-slide-active .portfolio-mob-text {
    opacity: 1;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #portfolio .swiper-slide img {
    filter: brightness(15%);
    -webkit-transition: filter 0.75s ease;
    transition: filter 0.75s ease;
  }

  #portfolio .swiper-slide-active hr {
    border-bottom: 0.15rem solid #fff;
  }

  #portfolio hr {
    border-bottom: 0.1rem solid #979797;
  }

  #portfolio .bg-film {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  #case-study .bg-film {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  /* SwiperJS */
  .swiper-container {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #case-study .film-top {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }

  .sharjah-reel video {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100% !important;
    object-fit: cover;
    pointer-events: none !important;
  }

  .sharjah-reel img {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100% !important;
    object-fit: cover;
    pointer-events: none !important;
  }

  #home .swiper-slide {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }

  #home .swiper-slide .items-center {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }

  #sky-dome .swiper-container .items-center {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }

  #home .swiper-slide video {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100% !important;
    object-fit: cover;
    pointer-events: none !important;
  }

  #case-studies .swiper-slide {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }

  #case-studies .swiper-slide .items-center {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }

  #case-studies .swiper-slide img {
    filter: saturate(140%);
    -webkit-filter: saturate(140%);
    filter: brightness(60%);
    -webkit-filter: brightness(60%);
    height: 100vh !important;
    width: 100% !important;
    object-fit: cover;
    pointer-events: none !important;
  }

  #case-studies .swiper-slide video {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100% !important;
    object-fit: cover;
    pointer-events: none !important;
  }

  .portfolio-video {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  #home .swiper-slide img {
    filter: saturate(140%);
    -webkit-filter: saturate(140%);
    filter: brightness(60%);
    -webkit-filter: brightness(60%);
    height: 100vh !important;
    width: 100% !important;
    object-fit: cover;
    pointer-events: none !important;
  }

  @media only screen and (max-width: 1280px) {
    .swiper-pagination {
      padding-right: 2.19rem !important;
    }
  }
  .swiper-pagination {
    cursor: pointer !important;
    top: 48% !important;
    transform: translateY(-50%);
    padding-right: 3.2rem;
  }

  .swiper-pagination-bullet {
    cursor: pointer !important;
    display: inline-block;
    vertical-align: middle;
    width: 2rem;
    height: 2rem;
    text-align: center;
    font-size: 1.15rem;
    color:#fff;
    opacity: 0.5;
    font-family: NunitoSans-Light;
    font-weight: light;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }

  .swiper-pagination-bullet:hover, .swiper-pagination-bullet:focus, .swiper-pagination-bullet:active {
    opacity: 1;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  .swiper-pagination-bullet-active {
    opacity: 1;
    font-family: NunitoSans-Bold;
    font-weight: bold;
  }

  #case-study .swiper-button-next, #case-study-arrows .swiper-button-next {
    opacity: 0.2;
    position: absolute;
    top: 50%;
    transform: translateY(-90%);
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #case-study .swiper-button-next:hover, #case-study-arrows .swiper-button-next:hover {
    opacity: 1;
    position: absolute;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #case-study .swiper-button-prev, #case-study-arrows .swiper-button-prev {
    opacity: 0.2;
    position: absolute;
    top: 50%;
    transform: translateY(-30%);
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #case-study .swiper-button-prev:hover, #case-study-arrows .swiper-button-prev:hover {
    opacity: 1;
    position: absolute;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #case-studies .case-study-nav {
    z-index: 1;
    position: absolute;
    letter-spacing: 0.25em;
    top: 49.25% !important;
    transform: translateY(-50%);
    right: -2.27rem !important;
  }
  @media only screen and (max-width: 1280px) {
    #case-studies .case-study-nav {
      right: -3.27rem !important;
    }
  }

  #home .case-study-nav {
    z-index: 1;
    position: absolute;
    letter-spacing: 0.25em;
    top: 49.25% !important;
    transform: translateY(-50%);
    right: -2.27rem !important;
  }
  @media only screen and (max-width: 1280px) {
    #home .case-study-nav {
      right: -3.27rem !important;
    }
  }

  #home .swiper-button-next {
    cursor: pointer !important;
    position: absolute;
    top: 46.15% !important;
    transform: translateY(-50%);
    right: -0.35rem !important;
  }
  @media only screen and (max-width: 1280px) {
    #home .swiper-button-next {
      right: -1.37rem !important;
    }
  }
  #home .swiper-button-prev {
    cursor: pointer !important;
    position: absolute;
    top: 46.15% !important;
    transform: translateY(-50%);
    right: 10rem !important;
  }
  @media only screen and (max-width: 1280px) {
    #home .swiper-button-prev {
      right: 8.9rem !important;
    }
  }

  #home .swiper-pagination-bullet {
    padding-bottom: 2rem !important;
    padding-right: 2.18rem !important;
    padding-left: 0.84rem !important;
    padding-top: 0.25rem !important;
    margin-left: 0rem !important;
  }
  #case-studies .swiper-pagination-bullet {
    padding-bottom: 2rem !important;
    padding-right: 2.18rem !important;
    padding-left: 0.84rem !important;
    padding-top: 0.25rem !important;
    margin-left: 0rem !important;
  }

  #case-studies .swiper-button-next {
    cursor: auto !important;
    position: absolute;
    top: 46.15% !important;
    transform: translateY(-50%);
    right: -0.35rem !important;
  }
  @media only screen and (max-width: 1280px) {
    #case-studies .swiper-button-next {
      right: -1.37rem !important;
    }
  }
  #case-studies .swiper-button-prev {
    cursor: auto !important;
    position: absolute;
    top: 46.15% !important;
    transform: translateY(-50%);
    right: 10rem !important;
  }
  @media only screen and (max-width: 1280px) {
    #case-studies .swiper-button-prev {
      right: 8.9rem !important;
    }
  }

  #gallery-arrows .swiper-button-next {
    position: absolute;
    top: 47.5% !important;
    transform: translateY(-50%);
    right: 3rem !important;
  }
  #gallery-arrows .swiper-button-prev {
    position: absolute;
    top: 47.5% !important;
    transform: translateY(-50%);
    left: 3rem !important;
  }

  #sky-dome .swiper-container {
    box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.25), 0 0 80rem 0.25rem rgba(255, 255, 255, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.25);
  }

  .gclose.gbtn {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    right: 3rem !important;
    top: 3.9rem !important;
  }
  @media only screen and (max-width: 1280px) {
    .gclose.gbtn {
      right: 2rem !important;
      top: 2.7rem !important;
    }
  }
  .gclose.gbtn:hover {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    cursor: pointer !important;
  }

  .gnext.gbtn {
    top: 46% !important;
    right: 4rem !important;
    width: 3rem !important;
    cursor: pointer !important;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }
  @media only screen and (max-width: 1280px) {
    .gnext.gbtn {
      right: 3rem !important;
    }
  }
  .gnext.gbtn:hover {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  @media only screen and (max-width: 767px) {
    .gnext.gbtn {
      display:none !important;
    }
  }
  .gprev.gbtn {
    top: 46% !important;
    left: 4rem !important;
    width: 3rem !important;
    cursor: pointer !important;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }
  @media only screen and (max-width: 1280px) {
    .gprev.gbtn {
      left: 3rem !important;
    }
  }
  .gnext.gbtn:hover {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  @media only screen and (max-width: 767px) {
    .gprev.gbtn {
      display:none !important;
    }
  }
  .gprev.gbtn:hover {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }

@media only screen and (min-width: 767px) {
  .gslide-video {
    max-width: 80vw !important;
    margin: auto;
  }
}

@media (min-width: 769px){
.gslide-image img {
  max-width: 75% !important;
  pointer-events: none !important;
  }
}

@media only screen and (min-width: 767px) {
  #sky-dome #glightbox-slider {
    width: 75vw;
    margin: auto;
    pointer-events: none;
  }
}

  #portfolio .swiper-button-next {
    cursor: pointer !important;
    opacity: 0.4;
    height: 5rem;
    position: absolute;
    /* margin-top: 0.4rem !important; */
    top: 49% !important;
    transform: translateY(-50%);
    right: 6rem !important;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  @media only screen and (max-width: 1280px) {
    #portfolio .swiper-button-next {
      right: 4.85rem !important;
    }
  }

  #portfolio .swiper-button-prev {
    cursor: pointer !important;
    opacity: 0.4;
    height: 5rem;
    /* margin-top: 0.4rem !important; */
    position: absolute;
    top: 49% !important;
    transform: translateY(-50%);
    left: 13.3rem !important;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #portfolio .gnext.gbtn {
    display: none !important;
    pointer-events: none;
  }

  #portfolio .gprev.gbtn {
    display: none !important;
    pointer-events: none;
  }


  #portfolio .swiper-button-prev:hover {
    opacity: 1;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  #portfolio .swiper-button-next:hover {
    opacity: 1;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
  }

  /* Hammburger Menu */
  .button_container {
    cursor: pointer !important;
    position: fixed;
    top: 48%;
    left: 4.1rem;
    height: 27px;
    width: 35px;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
  }
  @media only screen and (max-width: 1280px) {
    .button_container {
      left: 3.25rem;
    }
  }
  @media only screen and (max-width: 767px) {
  .button_container {
    top: 3rem;
    right: 2.25rem;
    left: auto;
  }
}
  .button_container:hover {
    opacity: .9;
  }
  .button_container.active .top {
    -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
            transform: translateY(11px) translateX(0) rotate(45deg);
    background: #FFF;
  }
  .button_container.active .middle {
    opacity: 0;
    background: #FFF;
  }
  .button_container.active .bottom {
    -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
            transform: translateY(-11px) translateX(0) rotate(-45deg);
    background: #FFF;
  }
  .button_container span {
    background: #FFF;
    border: none;
    height: 2px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    cursor: auto;
  }
  .button_container span:nth-of-type(2) {
    top: 11px;
  }
  .button_container span:nth-of-type(3) {
    top: 22px;
  }

  @media only screen and (max-width: 767px) {
    .overlay {
      border-left: 25vw solid white !important;
      right: -25vw !important;
    }
    .overlay.open {
      width: 150vw !important;
    }
  }

  .overlay {
    position: fixed;
    background: rgb(21,40,55);
    background: radial-gradient(circle, rgba(21,40,55,1) 0%, rgba(13,21,28,1) 100%);
    border-left: 12vw solid white;
    top: 0;
    right: -12vw;
    width: 0%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    /* opacity: 0; */
    opacity: 1;
    /* -webkit-transition: opacity .35s, visibility .35s, width .35s ease;
    transition: opacity .35s, visibility .35s, width .35s ease; */
    -webkit-transition: width 0.8s cubic-bezier(0.85, 0, 0.15, 1);
    transition: width 0.8s cubic-bezier(0.85, 0, 0.15, 1);
    overflow: hidden;
  }
  .overlay.open {
    opacity: 1;
    /* visibility: visible; */
    width: 124vw;
  }
  .overlay.open li {
    -webkit-animation: fadeInRight .5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            animation: fadeInRight .5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    -webkit-animation-delay: .5s;
            animation-delay: .5s;
  }
  .overlay.open li:nth-of-type(2) {
    -webkit-animation-delay: .55s;
            animation-delay: .55s;
  }
  .overlay.open li:nth-of-type(3) {
    -webkit-animation-delay: .6s;
            animation-delay: .6s;
  }
  .overlay.open li:nth-of-type(4) {
    -webkit-animation-delay: .65s;
            animation-delay: .65s;
  }
  .overlay nav {
    position: absolute;
    top: 51%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  /* @media only screen and (max-width: 600px) {
  .overlay nav {
    top: 35%;
  }
} */

  .overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: 100%;
  }
  .overlay ul li {
    /* height: 25%;
    height: calc(100% / 4); */
    /* min-height: 50px; */
    position: relative;
    opacity: 0;
  }
  .overlay ul li a {
    position: relative;
    color: #FFF;
    text-decoration: none;
    overflow: hidden;
  }

  @-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      bottom: 10%;
    }
    100% {
      opacity: 1;
      bottom: 0;
    }
  }

  @keyframes fadeInRight {
    0% {
      opacity: 0;
      bottom: 10%;
    }
    100% {
      opacity: 1;
      bottom: 0;
    }
  }

.hvr-grow {
  /* display: inline-block; */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
/* Sink */
.hvr-sink {
  display: inline-block;
  /* vertical-align: middle; */
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}

/* Forward */
.hvr-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}

/* Backward */
.hvr-backward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active {
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
}

@-webkit-keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(100px) scaleX(1.5) scaleY(0.2);
            transform: translateX(100px) scaleX(1.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(100px) scaleX(1.5) scaleY(0.2);
            transform: translateX(100px) scaleX(1.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-out-blurred-right {
  0% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px) scaleX(1.5) scaleY(0.2);
            transform: translateX(1000px) scaleX(1.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
}
@keyframes slide-out-blurred-right {
  0% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100px) scaleX(1.5) scaleY(0.2);
            transform: translateX(100px) scaleX(1.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(20px);
            filter: blur(20px);
    opacity: 0;
  }
}

/* Prevents the CSS From Loading on Page Load */
.showhim:not(:hover) .showme  {
  visibility: hidden;
  transition: visibility 0.001s 1s;
}

.showme {
  -webkit-animation: slide-out-blurred-right 0.3s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
  animation: slide-out-blurred-right 0.3s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.showhim:hover .showme {
  display: inline-block;
	-webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

.play-button {
  width: 12%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* New Toggle Pure CSS */
.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;
  color: #fff;
  -webkit-transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lbl-toggle:hover {
  color: #ccc;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid currentColor;
  vertical-align: middle;
  margin-right: 1rem;
  transform: translateY(-2px);
  -webkit-transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0vh;
  overflow: hidden;
  -webkit-transition: max-height 1.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: max-height 1.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 30vh;
  -webkit-transition: max-height 2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: max-height 2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: max-height 2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: max-height 2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bg-film a {
  color: #fff;
  transition: all 0.25s ease-out;
}

.bg-film a:hover {
  color: #ccc;
}

.link-3 a {
  color: #fff;
  transition: all 0.25s ease-out;
}

.link-3 a:hover {
  color: #ccc;
}

.video-player a {
  opacity: 0.75;
  transition: .4s ease;
}

.video-player a:hover {
  opacity: 1;
}

/* Index Link Underline */
.link-2 {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  -webkit-transition: color ease 0.3s;
  transition: color ease 0.3s;
  cursor: pointer !important;
}

.link-2::before, .link-2::after {
    content: '';
    position: absolute;
    background-color: #fff;
    z-index: 1;
    height: 5%;
  }

.link-2::before {
    width: 0%;
    left: 0;
    bottom: 0;
    -webkit-transition: width ease 0.4s;
    transition: width ease 0.4s;
  }

.link-2::after {
    width: 100%;
    left: 0;
    bottom: 0;
    -webkit-transition: all ease 0.6s;
    transition: all ease 0.6s;
  }

.link-2:hover::before {
      width: 100%;
    }

.link-2:hover::after {
      left: 100%;
      width: 0%;
      -webkit-transition: all ease 0.2s;
      transition: all ease 0.2s;
    }

/* Scroll Down Animation */
.scroll-down .scrolling {
  margin-bottom: -0.14rem;
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

.scroll-down span {
    position: relative;
  	display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    animation-name: scrolly;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	  -webkit-transition: -webkit-transform 0.3s;
	  -moz-transition: -moz-transform 0.3s;
	  transition: transform 0.3s;
}

.scroll-down .scrolling {
	overflow: hidden;
	/* padding: 0 4px; */
	height: 1em;
}

span::before {
  position: absolute;
	top: -100%;
	content: attr(data-hover);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

@-webkit-keyframes scrolly {
  0% {
    transform: translatey(0%);
  }
  20% {
    transform: translatey(100%);
  }
  100% {
    transform: translatey(100%);
   }
}

@keyframes scrolly {
  0% {
    transform: translatey(0%);
  }
  20% {
    transform: translatey(100%);
  }
  100% {
    transform: translatey(100%);
   }
}

.white {
  height: 100vh;
  pointer-events: none !important;
}
.white:before {
  z-index: 1000;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-color: none;
}
.white:after {
  z-index: 1000;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20vh;
  background-color: none;
}
.squares {
  height: 100%;
  display: -webkit-box;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}
.square {
  -webkit-animation: squares 30s linear infinite;
          animation: squares 30s linear infinite;
  align-self: flex-end;
  border-radius: 5em;
  width: 1em;
  height: 1em;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  background: rgba(255, 255, 255, 0.096);
}
.square:nth-child(2) {
  border-radius: 5em;
  height: 0.4em;
  width: 0.4em;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.square:nth-child(3) {
  border-radius: 5em;
  height: 0.6em;
  width: 0.6em;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 18s;
          animation-duration: 18s;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.square:nth-child(4) {
  border-radius: 5em;
  height: 0.5em;
  width: 0.5em;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
}
.square:nth-child(5) {
  border-radius: 5em;
  height: 0.5em;
  width: 0.5em;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  -webkit-animation-duration: 18s;
          animation-duration: 18s;
}
.square:nth-child(6) {
  border-radius: 5em;
  height: 0.35em;
  width: 0.35em;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.square:nth-child(7) {
  border-radius: 5em;
  height: 0.75em;
  width: 0.75em;
  -webkit-filter: blur(2.5px);
  filter: blur(2.5px);
  -webkit-animation-duration: 18s;
          animation-duration: 18s;
}
.square:nth-child(8) {
  border-radius: 5em;
  height: 0.25em;
  width: 0.25em;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  -webkit-filter: blur(6px);
  filter: blur(6px);
  -webkit-animation-duration: 18s;
          animation-duration: 18s;
}
.square:nth-child(9) {
  border-radius: 5em;
  height: 0.7em;
  width: 0.7em;
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
}
.square:nth-child(9) {
  border-radius: 5em;
  height: 0.8em;
  width: 0.8em;
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
}

@-webkit-keyframes squares {
  from {
    -webkit-transform: translateY(100%) rotate(-50deg);
            transform: translateY(100%) rotate(-50deg);
  }
  to {
    -webkit-transform: translateY(calc(-100vh + -100%)) rotate(20deg);
            transform: translateY(calc(-100vh + -100%)) rotate(20deg);
  }
}

@keyframes squares {
  from {
    -webkit-transform: translateY(100%) rotate(-50deg);
            transform: translateY(100%) rotate(-50deg);
  }
  to {
    -webkit-transform: translateY(calc(-100vh + -100%)) rotate(20deg);
            transform: translateY(calc(-100vh + -100%)) rotate(20deg);
  }
}

/* Swipe Right Animation */
.swipe-right {
  transform: rotate(-90deg);
}

.swipe-right .swiping {
 position: relative;
 display: block;
}

.swipe-right span {

   position: relative;
   display: inline-block;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
   animation-name: swiping;
   animation-duration: 1500ms;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   -webkit-transition: -webkit-transform 0.3s;
   -moz-transition: -moz-transform 0.3s;
   transition: transform 0.3s;
}

.swipe-right .swiping {
 overflow-y: hidden;
 /* padding: 0 4px; */
 /* height: 1em; */
}

span::before {
 position: absolute;
 top: -100%;
 content: attr(data-hover);
 -webkit-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

@keyframes swiping {
 0% {
   transform: translatey(100%);
 }
 20% {
   transform: translatey(0%);
 }
 100% {
   transform: translatey(0%);
  }
}

/* Scroll Down Effect on Hover */

.link-4 a {
	position: relative;
	display: inline-block;
  color: #fff;
  cursor: pointer !important;
  /* padding-top: 0.15rem; */
}

.link-4 a:hover,
.link-4 a:focus {
  outline: none;
  cursor: pointer !important;
}

@media only screen and (max-width: 767px) {
  .link-4 {
    max-height: 2rem !important;
  }
  .link-4 a {
    max-height: 2rem !important;
    padding-bottom: 0.8rem !important;
  }
}

.link-4 {
  max-height:0.8rem !important;
  cursor: pointer !important;
}

.link-4 a {
  overflow: hidden;
  max-height:0.7rem !important;
  cursor: pointer !important;
}

.link-4 a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  cursor: pointer !important;
}

.link-4 a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.link-4:hover span,
.link-4:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

/* Hover Home Page Case Studies */

.link-5 div {
	position: relative;
	display: inline-block;
  color: #fff;
  /* padding-top: 0.15rem; */
}

.link-5 div:hover,
.link-5 div:focus {
	outline: none;
}

.link-5 {
  max-height:0.8rem !important;
}

.link-5 div {
  overflow: hidden;
  max-height:0.7rem !important;
}

.link-5 div span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

.link-5 div span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.link-5:hover span,
.link-5:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

/* Hover Case Studies Special */

.link-6 div {
	position: relative;
	display: inline-block;
  color: #fff;
  /* padding-top: 0.15rem; */
}

.link-6 div:hover,
.link-6 div:focus {
	outline: none;
}

@media only screen and (min-width: 767px) {
  .link-6 div {
    max-height:0.7rem !important;
  }
}

.link-6 {
  max-height:0.8rem !important;
}

.link-6 div {
  overflow: hidden;
}

.link-6 div span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

.link-6 div span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

#arrows-arrows:hover .link-6 span,
#arrows-arrows:focus .link-6 span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

@keyframes slideinAbuDhabi {
  0% {
    transform: translateX(80%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

#portfolio .slideinAbuDhabi {
  animation: slideinAbuDhabi;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
}

@keyframes slideinInvestinSharjah {
  0% {
    transform: translateX(40%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

#portfolio .slideinInvestinSharjah {
  animation: slideinInvestinSharjah;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
}

@keyframes slideinDubaiEconomy {
  0% {
    transform: translateX(-30%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

#portfolio .swiper-slide-duplicate .slideinDubaiEconomy {
  animation: slideinDubaiEconomy;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
}