/*   
Theme Name: 40grosvenorplace
Author: Cskills
Version: 1
*/

:root {
   --orange: #E67338;
   --Cream: #EAE1D3;
   --Grey: #D9D9D9;
   --Green: #053635;
   --Light_Green: #8AB27A;
   --black: #000000;
   --white: #ffffff;
}

h1 {
   font-family: 'Ninna' !important;
   color: var(--orange);
   letter-spacing: -0.06em;
   font-size: 109.77px;
   font-weight: 400 !important;
   line-height: 161.91px;

}



@font-face {
   font-family: 'GilroyLight';
   src: url('fonts/GilroyLight.eot');
   src: url('fonts/GilroyLight.eot?#iefix') format('embedded-opentype'),
      url('fonts/GilroyLight.woff2') format('woff2'),
      url('fonts/GilroyLight.woff') format('woff'),
      url('fonts/GilroyLight.svg#GilroyLight') format('svg');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'GilroyRegular';
   src: url('fonts/GilroyRegular.eot');
   src: url('fonts/GilroyRegular.eot?#iefix') format('embedded-opentype'),
      url('fonts/GilroyRegular.woff2') format('woff2'),
      url('fonts/GilroyRegular.woff') format('woff'),
      url('fonts/GilroyRegular.svg#GilroyRegular') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'GilroyMedium';
   src: url('fonts/GilroyMedium.eot');
   src: url('fonts/GilroyMedium.eot?#iefix') format('embedded-opentype'),
      url('fonts/GilroyMedium.woff2') format('woff2'),
      url('fonts/GilroyMedium.woff') format('woff'),
      url('fonts/GilroyMedium.svg#GilroyMedium') format('svg');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}


@font-face {
   font-family: 'Gilroy';
   src: url('fonts/Gilroy-LightItalic.eot');
   src: url('fonts/Gilroy-LightItalic.eot?#iefix') format('embedded-opentype'),
      url('fonts/Gilroy-LightItalic.woff2') format('woff2'),
      url('fonts/Gilroy-LightItalic.woff') format('woff'),
      url('fonts/Gilroy-LightItalic.svg#Gilroy-LightItalic') format('svg');
   font-weight: 300;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Gilroy';
   src: url('fonts/Gilroy-Light.eot');
   src: url('fonts/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
      url('fonts/Gilroy-Light.woff2') format('woff2'),
      url('fonts/Gilroy-Light.woff') format('woff'),
      url('fonts/Gilroy-Light.svg#Gilroy-Light') format('svg');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}



@font-face {
   font-family: 'Gilroy';
   src: url('fonts/Gilroy-Regular.eot');
   src: url('fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
      url('fonts/Gilroy-Regular.woff2') format('woff2'),
      url('fonts/Gilroy-Regular.woff') format('woff'),
      url('fonts/Gilroy-Regular.svg#Gilroy-Regular') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Gilroy';
   src: url('fonts/Gilroy-RegularItalic.eot');
   src: url('fonts/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
      url('fonts/Gilroy-RegularItalic.woff2') format('woff2'),
      url('fonts/Gilroy-RegularItalic.woff') format('woff'),
      url('fonts/Gilroy-RegularItalic.svg#Gilroy-RegularItalic') format('svg');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Gilroy';
   src: url('fonts/Gilroy-Medium.eot');
   src: url('fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
      url('fonts/Gilroy-Medium.woff2') format('woff2'),
      url('fonts/Gilroy-Medium.woff') format('woff'),
      url('fonts/Gilroy-Medium.svg#Gilroy-Medium') format('svg');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Gilroy';
   src: url('fonts/Gilroy-MediumItalic.eot');
   src: url('fonts/Gilroy-MediumItalic.eot?#iefix') format('embedded-opentype'),
      url('fonts/Gilroy-MediumItalic.woff2') format('woff2'),
      url('fonts/Gilroy-MediumItalic.woff') format('woff'),
      url('fonts/Gilroy-MediumItalic.svg#Gilroy-MediumItalic') format('svg');
   font-weight: 500;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Ninna';
   src: url('fonts/Ninna-Regular.eot');
   src: url('fonts/Ninna-Regular.eot?#iefix') format('embedded-opentype'),
      url('fonts/Ninna-Regular.woff2') format('woff2'),
      url('fonts/Ninna-Regular.woff') format('woff'),
      url('fonts/Ninna-Regular.svg#Ninna-Regular') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}


/* Header */

header {
   display: none;
}

body:not(.animationLoad, .loaded) {
   overflow: hidden;
}

#contentHolder {
   overflow-x: hidden;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: 5s opacity ease;
   -o-transition: 5s opacity ease;
   transition: 5s opacity ease;
}

.animationLoad #contentHolder,
.loaded #contentHolder{
   opacity: 1;
   visibility: visible;
}




/* Video Section */
.videoHolder {
   /* min-height: 100vh; */
   overflow: hidden;
}

.videoHolder video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* max-height: 100vh;
   min-height: 500px; */
   display: block;
}

video::-webkit-media-controls {
   display: none !important;
}

video::-webkit-media-controls-play-button {
   display: none !important;
}

video::-moz-media-controls {
   display: none !important;
}

video {
   -webkit-appearance: none;
   appearance: none;
}

.heroCaption {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9;
   position: relative;
   overflow: hidden;
}

.page-template-default .heroCaption {
   display: none;
}

.heroCaption .centerBlock {
   height: 100%;
   position: relative;
}

.contentWrapper {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

.heroCaption .imgloader {
   display: none;
}

.clippingMask {
   -webkit-mask-size: auto 100%;
   mask-size: auto 100%;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   position: relative;
   -webkit-mask-image: url(images/hero-image.svg);
   mask-image: url(images/hero-image.svg);
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
   -webkit-transition: 0.5s opacity ease;
   -o-transition: 0.5s opacity ease;
   transition: 0.5s opacity ease;
   transition-delay: 0.2s;
}

.loading .clippingMask,
.loaded .clippingMask {
   opacity: 1;
}

.clippingMask::before {
   padding-top: 10.6%;
   content: "";
   width: 100%;
   display: block;
}

.clippingMask img {
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-32%, -25%);
   -ms-transform: translate(-32%, -25%);
   transform: translate(-32%, -25%);
   width: 101%;
   height: 300px;
   object-fit: cover;
   object-position: center center;
   max-width: unset;
   -moz-animation: homeLogoGradient 15s ease-out 0s infinite normal forwards;
   -webkit-animation: homeLogoGradient 15s ease-out 0s infinite normal forwards;
   animation: homeLogoGradient 15s ease-out 0s infinite normal forwards;
}

.clipText {
   margin: 0;
   font-family: 'Gilroy', sans-serif;

   text-align: center;
   position: relative;
   top: calc(50% + 150px);
   right: 0;
   bottom: 0;
   left: 0;
   transform: translateY(-50%);
   padding-bottom: 165px;
   opacity: 0;
   -webkit-transition: 0.5s opacity ease;
   -o-transition: 0.5s opacity ease;
   transition: 0.5s opacity ease;
   transition-delay: 0.2s;
}
.clipText h3
{
         font-size: 25px;
            font-weight: 500;
}

.clipText h2 {
   font-size: 30px;
   font-weight: 500;
}
.clipText h2,
.clipText h3{
      color: transparent;
         background-image: url(images/40GP_Logo_V1.png);
         background-repeat: no-repeat;
         background-size: cover;
         background-clip: text;
         -webkit-background-clip: text;
}

.loading .clipText,
.loaded .clipText {
   opacity: 1;
}

@keyframes homeLogoGradient {
   0% {
      transform: translate(-32%, -25%);
   }

   15%,
   17% {
      transform: translate(-45%, -71%);
   }

   30%,
   32% {
      transform: translate(-49%, -68%);
   }

   45%,
   47% {
      transform: translate(-47%, -75%);
   }

   60%,
   62% {
      transform: translate(-57%, -69%);
   }

   75%,
   77% {
      transform: translate(-60%, -64%);
   }

   90%,
   92% {
      transform: translate(-53%, -71%);
   }

   100%,
   98% {
      transform: translate(-50%, -76%);
   }
}

/* Info Area */
.rightTextArea {
   padding: 30px 0px !important;
}

.infoArea {
   text-align: center;
   background-color: rgba(5, 54, 53, 0.1);

}

.infoArea h1 {
   color: var(--orange);
   font-family: 'Ninna', sans-serif;
   font-size: 109px;
   font-weight: 400;
   line-height: 1;
   letter-spacing: -0.03em;
   padding-bottom: 0px;
}

.infoArea h1 sub {
   font-family: 'Gilroy', sans-serif !important;
   font-weight: 400;
   font-size: 48px;
   line-height: 58px;
   letter-spacing: normal !important;
   position: relative;
   bottom: 25px;
   left: 10px;
}

.infoArea h2 {
   font-family: 'Gilroy', sans-serif !important;
   font-weight: 300;
   color: var(--Cream);
   text-transform: uppercase;
   padding-bottom: 0;
}

.infoArea h2+.upcoaming_text {
   padding-top: 56px;
}

.infoArea div {
   font-size: 25px;
   line-height: 30px;
   font-family: 'Gilroy', sans-serif !important;
   font-weight: 400;
   color: var(--Cream);
   text-transform: uppercase;
}

.mapArea {
   position: relative;
}

.mapArea a {
   display: block !important;
}
.mapArea img{
   width: 100%;
}

/* FANCYBOX */

.fancybox-bg {
   background: var(--Green);
}

.fancybox-is-open .fancybox-bg {
   opacity: 1 !important;
}



/* SW1*/
.rightTextArea img {
   max-width: 940px;
   margin: 0 auto;
}

.rightTextArea p {
   font-family: 'Gilroy', sans-serif !important;
   font-weight: 300;
   font-size: 28px;
   font-weight: 300;
   line-height: 33px;
   letter-spacing: -0.02em;
   color: var(--Cream);
   max-width: 530px;
   width: 100%;
   position: absolute;
   top: 50%;
   right: 62px;
   transform: translateY(-50%);
}

/* Swiper Slider CSS */
.gallerySlider {
   background-color: var(--Green);
   height: 100vh;
   width: 100%;
}

.swiper-container {
   width: 100%;
   height: 100%;
   /*     background: #fd5; */
}

.swiper-slide{
   position: relative;
}
.swiper-slide .caption {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
    left: auto;
    background-color: var(--Cream);
    color: var(--Green);
    padding: 10px 30px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    max-width: 40%;
    height: auto;
    display: block;
}

.swiper-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.swiper-pagination {
   bottom: 12px;
}

.swiper-pagination-bullet {
   margin: 0px 6px;
   width: 12px;
   height: 12px;
}

.swiper-pagination-bullet {
   border: 2px solid var(--Grey) !important;
   background-color: transparent !important;
}

.swiper-pagination-bullet-active {
   background-color: var(--Grey) !important;
}


/* Sticky Video & Image */
.slide-bg {
   position: fixed;
   width: 100%;
   display: flex;
   justify-content: center;
   top: 0;
   left: 0;
   z-index: -1;
}

.slide-bg>video,
.slide-bg>img {
   height: 100vh;
   object-fit: cover;
}

/* Legal pages */

.pageinfoOpen {
   overflow: hidden;
}

.pageinfoOpen::-webkit-scrollbar {
   display: none;
}


.infoPopup {
   width: 100%;
   height: 100%;
   background-color: var(--Green);
   padding: 0px;
   overflow: auto;
   overflow-x: hidden;
   position: fixed;
   top: 0px;
   left: 0;
   transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   opacity: 0;
   visibility: hidden;
   z-index: 9;
   padding: 34px 44px;
}

.infoPopupContent {
   padding: 66px 0px;
}

.infoPopupContent h3 {
   color: var(--Cream);
   font-family: 'Gilroy', sans-serif !important;
   font-weight: 300;
   font-size: 30px;
   font-weight: 300;
   line-height: 35px;
   text-transform: uppercase;
}

.pageinfoOpen .infoPopup.active {
   opacity: 1;
   visibility: visible;

}

.closebtnpop {
   position: absolute;
   right: 0px;
   top: 0px;
   width: 40px;
   height: 40px;
   cursor: pointer;
   z-index: 999;
   background-size: 30px;
}


.infoPopup footer {
   position: relative;
}

.infoPopup footer::before {
   content: '';
   width: calc(100% + 88px);
   height: 1px;
   background-color: var(--Light_Green);
   position: absolute;
   top: 0;
   right: 0;
   bottom: auto;
   left: -44px;
}

.infoPopup.active footer ul li .popupLink {
   cursor: default;
   pointer-events: none;

}

/* Footer */
footer {
   padding: 52px 0px 52px 0px;
   background-color: var(--Green);
   color: var(--Cream);
}

footer .footerArea {
   justify-content: space-between;
}

footer .wrapper:nth-child(1) {
   width: 22%;
}

footer .wrapper:nth-child(2) {
   width: 65%;
   justify-content: space-between;
}

footer .wrapper:nth-child(3) {
   width: 10%;
   justify-content: flex-end;
}

footer .brochure {
   margin-top: 25px;
   font-family: 'Gilroy', sans-serif !important;
   font-weight: 300;
   font-size: 14px;
   font-weight: 300;
   line-height: 14px;
   display: block;
   padding: 10px 20px;
   border: 1px solid var(--Cream);
   border-radius: 30px;
}

footer .brochure svg {
   margin-left: 5px;
}
footer .brochure:hover svg path {
   transition: fill 0.5s ease;
}
footer .brochure:hover svg path{
  fill: var(--Light_Green);
}

footer ul {
   width: 100%;
   padding-top: 35px !important;
}

footer ul li {
   font-family: 'Gilroy', sans-serif !important;
   font-weight: 300;
   font-size: 10px;
   line-height: 12px;
   padding-bottom: 10px;
}

footer ul li a,
.logoContentWrap a,
.brochure,
#button {
   cursor: pointer;
   -webkit-transition: color 0.35s ease;
   -o-transition: color 0.35s ease;
   transition: color 0.35s ease;
}

footer ul li a:hover,
.logoContentWrap a:hover,
.brochure:hover,
#button:hover {
   color: var(--Light_Green);
}

footer .logoContentWrap {
   width: 48%;
   flex-wrap: nowrap;
}

footer .logoContentWrap p:last-child {
   padding-bottom: 0px;
}

footer .logoContentWrap img {
   max-width: 120px;
   width: 100%;
   margin-right: 30px;
}

footer .infoWrap {
   font-family: 'Gilroy', sans-serif !important;
   font-size: 14px;
   font-weight: 300;
   line-height: 19px;
   text-align: left;
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
}

footer #button {
   font-size: 12px;
   font-weight: 300;
   line-height: 13px;
   cursor: pointer;
}

footer #button svg {
   margin-left: 7px;
}






/* 404 */
.errorContainer {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.message-block>div {
   width: 50%;
}

.leftImage svg {
   width: 100%;
   max-width: 200px;
}





/* Defaultpage */

.defaultContent {
   padding: 100px 0px;
}




.btn {
   margin-top: 45px;
   font-family: 'Gilroy', sans-serif !important;
   font-weight: 300;
   font-size: 14px;
   font-weight: 400;
   line-height: 14px;
   display: inline-block!important;
   padding: 10px 20px;
   color: var(--orange);
   border: 1px solid var(--orange);
   border-radius: 30px;
   background: transparent!important;
   transition: 0.5s ease!important;
   letter-spacing: 0.56px;
   cursor: pointer;
}
.no-touch .btn:hover { 
   background: var(--orange)!important;
   color: var(--white)!important;
}

.videoWrapper{
   opacity: 0;
   visibility: hidden;
   z-index: -1;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   background-color: #000;
   transition: .35s ease;
}
.videoWrapper>div {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}
.videoWrapper .closeFancyCustom {
   position: absolute;
   right: 0;
   top: 0;
   color: #fff;
   width: max(38px, min(38px + 12*(100vw - 880px)/1040, 50px));
   height: max(38px, min(38px + 12*(100vw - 880px)/1040, 50px));
   display: inline-flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   background: var(--Green);
   z-index: 1111;
}

.videoWrapper.active {
   opacity: 1;
   visibility: visible;
   z-index: 9999;
   
}
.videoIframeWrapper {
   padding-bottom: 56.25%;
   position: relative;
   width: 100%;
   margin-bottom: 0;

}
.videoIframeWrapper iframe,
.videoIframeWrapper video {
   width: 100%;
   height: 100%;
   z-index: 1;
   border: 0;
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}
.bodyVideoactive,
.fancybox-active {
   overflow: hidden;
}
.fancybox-slide .fancybox-content {
   background: transparent!important;
   overflow: hidden!important;
}

.fancybox-button--close {
   opacity: 1 !important;
   visibility: visible !important;
}

.fancybox-button--close {
   transition: none !important;
}