/*
Theme Name: HX5
Author:
Version: 1
*/
.pageloader
{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 100;
}

.logoholder
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.logoBlock
{
  width: 250px;
  height: 128px;
background: #FF7376;
  /* margin: 0 auto; */
  overflow: hidden;
  position: relative;
}
.logoBlock svg
{
  position: absolute;
  width: 102%;
  height: 102%;
  top: -2px;
  left: -2px;
  z-index: 10;
}
.slide1, .slide2, .slide3, .slide4, .slide5, .slide6
{
  position: absolute;
  z-index: 1;
  width: 100%;
  height:0px;
  bottom: 0px;
}
.slide1
{
  background: #A8123E;
}
.slide2
{
  background:#E65300;
}
.slide3
{
  background: #FFC03E;
}
.slide4
{
  background: #A2D9E7;
}
.slide5
{
  background: #002F87;
}
.slide6
{
  background: #005D63;
}
.slide1, .slide2, .slide3, .slide4, .slide5, .slide6
{
  -moz-animation: slide1 1s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);
   -webkit-animation: slide1 1s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);
   animation: slide1 1s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);
}
@keyframes slide1 {
  from {
  height: 0;
  }
  to {
  height: 100%;
  }
}
.slide2
{
  animation-delay: 1s;
}
.slide3
{
  animation-delay: 2s;
}
.slide4
{
  animation-delay: 3s;
}
.slide5
{
  animation-delay: 4s;
}
.slide6
{
  animation-delay: 5s;
}

.loaded .pageloader
{
  -moz-animation: slidemove 1s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);
   -webkit-animation: slidemove 1s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);
   animation: slidemove 1s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);
}
@keyframes slidemove {
  from {
  top: 0;
  opacity: 1;
  }
  to {
  top: -100%;
  opacity: 0;
  }
}


.flexNoWrap, .flexWrap, .flexStretch, .flexHorizontalCenter, .flexVerticalCenter, .flexRowReverse, .flexcolReverse,
.leftCol > div, .footerinner , .col_1_1, .HeroSection, .Bigtitle
{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;
}

.flexWrap, .scroll-container
{
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-flow: row wrap;
}


.flexStretch{
   -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;

}

.flexHorizontalCenter, .HeroSection, .Bigtitle
{
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;

}


.flexVerticalCenter, .HeroSection
{
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.flexRowReverse
{
  -webkit-flex-flow: row-reverse wrap;
  flex-flow: row-reverse wrap;
  -ms-flex-flow: row-reverse wrap;
}

.flexcolReverse
{
     -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.col_1_1 .col{
  width: 50%;
}


section{
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.greenText
{
  color: #005D63;
}
.darkpinkText
{
  color: #A8123E;
}
.lightpinkText
{
  color: #FF7376;
}
.blueText
{
  color: #002F87;
}
.orangeText
{
  color: #E65300;
}
header{
  padding: 30px 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0px;
  width: 100%;
  transition:all 0.6s ease-out;
  z-index: 21;
  background-color: #FFC03E;
}
.home header{
    background-color: transparent
}
header.sticky{
  background-color: #FFC03E !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 10px 0;
}
header.sticky .logo{
  width: 85px;
}

.logo{
width: 135px;
margin:0 auto;
display: block;
font-size: 0;
line-height: 0;
transition:all 0.3s ease-out;
}

/* .home a.logo {pointer-events: none} */




/* Menu CSS */
#menu-toggle {
width: 50px;
height: 30px;
position: absolute;
cursor: pointer;
right: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 6;
}

#menu-toggle * {
transition: .25s ease-in-out;
}

#menu-toggle #hamburger {
position: absolute;
height: 100%;
width: 100%;
}

#menu-toggle #hamburger span {
width: 30px;
height: 3px;
position: relative;
top: 0;
left: 0px;
margin: 7px 0;
}

#menu-toggle #hamburger span:nth-child(1) {
transition-delay: .5s;
margin-top: 3px;
}

#menu-toggle #hamburger span:nth-child(2) {
transition-delay: .625s;
}

#menu-toggle #hamburger span:nth-child(3) {
transition-delay: .75s;
}

#menu-toggle #cross {
position: absolute;
height: 100%;
width: 100%;
transform: rotate(45deg);
right: 20px;
top: -9px;
}

#menu-toggle #cross span:nth-child(1) {
height: 0%;
width: 4px;
position: absolute;
top: -2px;
left: 40px;
transition-delay: 0s;
background-color: #FFC600;
}

#menu-toggle #cross span:nth-child(2) {
width: 0%;
height: 4px;
position: absolute;
left: 56%;
top: 11px;
transition-delay: .25s;
background-color: #fff;
}

#menu-toggle.open #hamburger span {
width: 0%;
}

#menu-toggle.open #hamburger span:nth-child(1) {
transition-delay: 0s;
}

#menu-toggle.open #hamburger span:nth-child(2) {
transition-delay: .125s;
}

#menu-toggle.open #hamburger span:nth-child(3) {
transition-delay: .25s;
}

#menu-toggle.open #cross span:nth-child(1) {
height: 100%;
transition-delay: .625s;
}

#menu-toggle.open #cross span:nth-child(2) {
width: 60%;
transition-delay: .375s;
}

#menu-toggle span {
display: block;
background: #fff;
border-radius: 2px;
}
.overlay-navigation{
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
#menu-toggle #cross span{
  background-color: #fff !important
}

nav,
nav ul,
.menu-main-menu-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  list-style: none;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-flow: row wrap;
}

nav ul li {
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  transition: flex-basis .8s ease-in-out;
  transition-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
  position: relative;
  padding: 0px;

}

nav li a {
  position: relative;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 4.1875vw;
  line-height: normal;
  font-family: 'Gilroy-black';
    transition: opacity .4s ease-in-out;
}
nav ul li:hover a{
  color: #fff;
  opacity: 0.5
}

nav ul li:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  z-index: -1;
  animation: reverseheightFill 0.6s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);

}



nav li:nth-of-type(1):after{background-color: #FFC03E;}
nav li:nth-of-type(2):after{background-color: #FF7376;}
nav li:nth-of-type(3):after{background-color: #E65300;}
nav li:nth-of-type(4):after{background-color: #A8123E;}

.overlay-active nav li:after{animation: heightFill 0.4s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);}
.overlay-active nav li:nth-of-type(1):after{animation-delay: 0s}
.overlay-active nav li:nth-of-type(2):after{animation-delay: 0.2s}
.overlay-active nav li:nth-of-type(3):after{animation-delay: 0.4s}
.overlay-active nav li:nth-of-type(4):after{animation-delay: 0.6s}


.letters {white-space: nowrap; opacity: 0; animation: fadeIn 0.6s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);display: block; position: relative; display: block;}
.overlay-active nav li:nth-of-type(1) .letters {animation-delay: 0s}
.overlay-active nav li:nth-of-type(2) .letters {animation-delay: 0.4s}
.overlay-active nav li:nth-of-type(3) .letters {animation-delay: 0.6s}
.overlay-active nav li:nth-of-type(4) .letters {animation-delay: 0.8s}

.overlay-active nav li .letters:after{content: ""; background-color: #FFC03E; position: absolute; left: 0; top:100%; width: 100%; height: 150%;}
.overlay-active nav li:nth-of-type(2) .letters:after{background-color:#FF7376 }
.overlay-active nav li:nth-of-type(3) .letters:after{background-color:#E65300 }
.overlay-active nav li:nth-of-type(4) .letters:after{background-color:#A8123E }


.overlay-active nav li .letter{animation: directionUp 1s ease-in-out forwards; animation-timing-function: cubic-bezier(.16,.84,.44,1);display: block; transform: translateY(80px);}
.overlay-active nav li:nth-of-type(1) .letter{animation-delay: 0.4s}
.overlay-active nav li:nth-of-type(2) .letter{animation-delay: 0.6s}
.overlay-active nav li:nth-of-type(3) .letter{animation-delay: 0.8s}
.overlay-active nav li:nth-of-type(4) .letter{animation-delay: 1s}



@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



@keyframes directionUp {
  from {
		transform: translateY(80px);
  }
  to {
		transform: translateY(0);
  }
}

@keyframes mobdirectionUp {
  from {
		transform: translateY(50px);
  }
  to {
		transform: translateY(0);
  }
}


@keyframes heightFill {
  0% {
    height: 0;
  }
  100% {
  height: 100%;
  }
}

@keyframes reverseheightFill {
  0% {
    height: 100%;
  }
  100% {
  height: 0;
  }
}
/* Menu CSS end*/

.ProjectHeading
{
  padding-bottom: 50px;
}

.HeroSection
{
  background: #FFC03E;
height: 100vh;
  text-align: center;
  position: relative;
  padding: 210px 100px 210px 100px;
}
.HeroSection > div
{
  max-width: 1400px;
  /* margin: 0 auto; */
}
.HeroSection h4
{
  color: #A8123E;
}

.HeroSection h5
{
  color: #002F87;
}
.Bigtitle
{
max-width: 65vh;
  margin: 50px auto;
}


.fullwidthImage .ms-slide
{
  position: relative;
}
.mappointerSec
{
  position: relative;
}
.zoomingIcon {position: absolute; left: 0; top: 0; text-align: center; z-index: 1;}
.zoomingIcon a {display: block; background-color: #FF7376; padding: 5px; font-size: 0; line-height: 0; cursor: pointer;}
.zoomingIcon a.zoomOut {border-top: 1px solid #fff}
.zoomingIcon svg {width: 30px;height: 40px;}
.mapimg img{width: 100%;}


.viewAvailability
{
  font-size: 35px;
  line-height: 26px;
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  font-family: 'Gilroy-black';

}
.viewAvailability svg{
  width: 55px;
}

.viewAvailability span, .viewAvailability svg .pathcolor
{
  transition: all 0.3s linear;
}
.viewAvailability svg .pathcolor
{
  fill:#fff;
}
.viewAvailability span{
  display: inline-block;
  margin: 0 auto;
  cursor: pointer;
    color: #fff;
}
.viewAvailability span:hover{
  color: #A8123E;
}
.viewAvailability span:hover svg .pathcolor{
  fill: #A8123E;
}
.viewAvailability svg
{
  margin-top: 30px;
  animation: bounce 2s infinite
}

/* Animation Effects */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
.contactLink {
    font-family: 'Gilroy-black';
    font-size: 26px;
    line-height: 19px;
    color: #FFF;
    background-color: #002F87;
    position: fixed;
    top: calc(55% - 60px);
    right: -69px;
    text-decoration: none;
    padding: 12px 20px 15px;
    transform: rotate(-90deg) translateY(-50%);
    z-index: 20;
    cursor: pointer;
    pointer-events: auto !important;
    transition-delay: 0.2s !important;
    overflow: hidden;
}
.contactLink::after
{
  content: "";
display: block;
position: absolute;
z-index: -1;
    border-radius: 0 0 75% 75%/0 0 50% 50%;
    -webkit-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    background-color: #002F87;
}

.contactLink:hover::after {
    -webkit-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
    height: 300%;
    background-color: #000;
}



.executiveSummery
{
  background: rgba(252, 246, 218, 0.84);
  text-align: center;
  padding: 100px 100px 100px 100px;
}
.executiveSummery > div
{
  max-width: 1400px;
  margin: 0 auto;
  font-size: 35px;
  line-height: 40px;
  font-family: 'Gilroy-medium';
}
.executiveSummery > div > h2
{
  padding-bottom: 80px;
}
.executiveSummery > div p:last-of-type
{
  padding: 0px;
}





.BuildingStacker
{
  padding: 100px 200px 120px 300px;
    text-align: right;
    max-width: 1600px;
    margin: 0 auto;
}
.stackerHolder
{
  max-width: 1080px;
margin: 0 0 0 auto;
position: relative;
padding: 0px;
}
.stackerHolder::before
{
  content: '';
  display: block;
  position: relative;
  padding-top: 63%;
}

.stackerHolder svg
{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

.hoverpartarea
{
  cursor: pointer;
  background:rgba(255,113,120,0.0);
  opacity:1;
  transition: background .8s cubic-bezier(.16,.84,.44,1);
 -webkit-transition: background .8s cubic-bezier(.16,.84,.44,1);
 -moz-transition: background .8s cubic-bezier(.16,.84,.44,1);
 -o-transition: background .8s cubic-bezier(.16,.84,.44,1);
}
.hoverpartarea:hover
{
  cursor: pointer;
  background:rgba(255,113,120,0.8);

}

.touch .hoverpartarea {
    cursor: pointer;
    /* background: rgba(255,113,120,0.2); */
  }
.disable
{
  display: none;
}
.partarea
{
  fill:none;
}

.hoverBlock
{
  position: absolute;
  z-index: 1;
  height: 100%;
  bottom: 0%;
  left: 0%;
  width: 100%;
}


.Level1{
  position: absolute;
  width: 100%;
  height: 3.3%;
    left: 0px;
    bottom: 7.1%;
}

.hoverBlock
{
  position: absolute;
  height: 100%;
  bottom: 0%;
  left: 0%;
  width: 100%;
}

.hoverBlock > div{
  position: absolute;
  width: 100%;
    left: 0px;
}

.Level1{
    bottom: 31.7%;
    height: 20%;
}
.Level2{
    bottom: 51.5%;
    height: 20%;
}
.Level3{
    bottom: 71.5%;
    height: 20%;
}

.PartGround
{
  bottom: 11.9%;
      height: 20%;
      width: 100%;
      position: absolute;
      left: 0%;
      /* display: block; */
      z-index: 3;
}

.Level3::before
{
  content: '';
  display: block;
  left: 0px;
  width: 1.8%;
  height: 100%;
  position: absolute;
  bottom: 1px;
  background: #fff;
}
.Level3::after
{
  content: '';
display: block;
left: 0px;
width: 10%;
height: 62%;
position: absolute;
top: 0%;
background: #fff;
}


.levelTitle
{
  width: 150px;
  font-size: 20px;
  line-height: 25px;
  font-family: 'Gilroy-black';
  color: #FF7178;
  opacity: 0.3;
  position: absolute;
    top: 0px;
}

.hoverBlock .levelTitle, .PartGround .levelTitle
{
  left: -180px;
  text-align: right;
}

.hoverinfo
{
opacity: 0;
top: -25px;
  position: absolute;
  z-index: 1;

  width: 250px;
text-align: left;
  padding-right: 10px;
  font-size: 15px;
  line-height: 18px;
  font-family: 'Gilroy-regular';
  transition: all .4s cubic-bezier(.16,.84,.44,1);
 -webkit-transition: all .4s cubic-bezier(.16,.84,.44,1);
 -moz-transition: all .4s cubic-bezier(.16,.84,.44,1);
 -o-transition: all .4s cubic-bezier(.16,.84,.44,1);
}
.hoverinfo > div, .PartGround .hoverinfo > div{
  background: #fff;
  min-height: 85px;
}

.hoverBlock .hoverinfo, .PartGround .hoverinfo {
    left: -250px;
}

.hoverBlock .Level3 .hoverinfo
{
  left: -140px;
}

.hoverBlock .hoverinfo > div, .PartGround .hoverinfo > div{
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
 -webkit-transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
 -moz-transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
 -o-transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);

}

.hoverBlock .active .hoverinfo > div, .PartGround.active .hoverinfo > div
{
  opacity: 1;
    transform: translateX(0px);
}
.hoverBlock .active .hoverinfo, .PartGround.active .hoverinfo
{
  opacity: 1;
    left: -250px;
}


.hoverBlock .Level3.active .hoverinfo
{
  left: -140px;
}



.hoverinfo h6
{
  font-size: 20px;
  line-height: 25px;
  font-family: 'Gilroy-black';
  color: #FF7178;
  border-bottom: 1px solid #FF7178;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.hoverinfo h6 span
{
  font-family: 'Gilroy-regular';
}



.Floorplan
{
    /* padding: 100px 50px 100px 50px; */
    /* background: #A8123E; */
    background: #cecece;
    margin: 0 auto;
}
.Floorplan > div{
  /* max-width: 1800px; */
  margin: 0 auto;
  position: relative;
}
.FloorplanSlider .slick-slide
{
  height: auto;
}
.FloorplanSlider .plan > div
{
  max-width: 1800px;
  margin: 0 auto;
  padding: 100px 100px;
}

.sectionHeading
{
  text-align: center;
  padding-bottom: 30px;
      color: #002F87 !important;
}
/* .plan.RedBG
{background: #A8123E;

}
.plan.GreenBG
{background: #005D63;

} */
.FloorText p
{
  text-align: center;
  color:  #A8123E;
  padding: 0px;
}
.Floorplan h3
{
  font-size: 40px;
  line-height: 42px;
  color:#A8123E;
  text-align: center;
  padding-bottom: 30px;
}
.Floorplan h6{
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #FFC03E;
  position: relative;
  font-family: 'Gilroy-medium';
}
.Floorplan h6::after
{
  content: '';
  display: block;
  position: relative;
  width: 30px;
  height: 15px;
  background: url('images/down-arrow-yellow.svg');
  background-position: center;
  background-repeat:no-repeat;
  background-size: 30px 15px;
 margin: 10px auto 0px auto;
}
.floorLabel
{
  position: absolute;
    left: 0px;
    bottom: 20px;
}
.floorLabel ul{
  margin: 0px;
  padding: 0px;list-style: none;
  color: #FFC03E;
  display: flex;
}
.floorLabel ul li{
  font-size: 20px;
  line-height: 24px;
  font-family: 'Gilroy-medium';
  padding: 0px 50px;
  position: relative;
}

.floorLabel ul li::before
{
  content: '';
  display: block;
  position: absolute;
  left: 0px;
  width: 26px;
  height: 26px;
  top: 50%;
  margin-top: -13px;
  border: 2px solid #fff;
}

.floorLabel ul li:nth-child(1)::before{
  background: #E2A7AC;
}
.floorLabel ul li:nth-child(2)::before{
  background: #AF2243;
}
.floorLabel ul li:nth-child(3)::before{
  background: #BF5061;
}

.FloorText
{
  padding-bottom: 40px;
}
.touriconText
{
position: absolute;
/* width: 200px;
height: 200px; */
left:0px;
top: 50%;
transform: translateY(-50%);
}
.touriconText h4
{
  font-size: 22px;
  line-height: 26px;
  text-align: center;
  text-transform: uppercase;
  color: #005e63;
  max-width: 150px;
  font-family: 'Gilroy-black';
}
.FloorText .view360Icon {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto;
    transform: none;
    background: url('images/360_View_Icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

/* ============================VR section css start========================= */
.vrTourpopup {
	position: fixed;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #DEDEDE;
	top: -100%;
	transition: all .5s ease-in-out;
	z-index: 115;
	overflow: hidden;
	opacity: 0
}
.vrTourpopup.active {
	top: 0;
	opacity: 1
}
.vrTourpopup .closeIcon {
	z-index: 4;
	cursor: pointer;
}
.closeIcon {
	position: absolute;
	right: 20px;
	top: 20px;
	margin: auto;
	background: url('images/cross.svg') no-repeat center center;
	background-size: auto;
  background-color: rgba(0, 47, 135, 0.8);
	width: 40px;
	height: 40px;
	background-size: 25px;
  opacity: 0;
}
.vrLoader {
	cursor: pointer;
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	margin: auto;
	background: url('images/view-360-popup.svg') no-repeat center center;
	width: 120px;
	height: 120px;
	-webkit-animation: ripple 0.7s linear infinite;
	animation: ripple 0.7s linear infinite;
	border-radius: 50%;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(226, 56, 63, 0.3), 0 0 0 5px rgba(226, 56, 63, 0.3), 0 0 0 15px rgba(226, 56, 63, 0.3);
  }
  100% {
    box-shadow: 0 0 0 5px rgba(226, 56, 63, 0.3), 0 0 0 15px rgba(226, 56, 63, 0.3), 0 0 0 30px rgba(226, 56, 63, 0);
  }
}
@-webkit-keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(226, 56, 63, 0.3), 0 0 0 5px rgba(226, 56, 63, 0.3), 0 0 0 15px rgba(226, 56, 63, 0.3);
  }
  100% {
    box-shadow: 0 0 0 5px rgba(226, 56, 63, 0.3), 0 0 0 15px rgba(226, 56, 63, 0.3), 0 0 0 30px rgba(226, 56, 63, 0);
  }
}
.iframeContainer {
	width: 100%;
	height: 100%;
	clear: both;
	overflow: hidden;
	opacity: 0;
  z-index: 1;
}
.iframeContainer iframe {
	width: 100%;
	height: 100%;
}



/* ============================VR section css end========================== */


.Connections
{
  background: #fff;
  padding: 100px 100px 100px 100px;
}
.Connections .centerBlock{
  max-width: 1400px;
  margin: 0 auto;

  color: #002F87;
  font-family: 'Gilroy-medium';
  font-size: 20px;
  line-height: 25px;
  text-align: center;
}
.Connections h2{
  text-align: center;
    padding-bottom: 100px;
}
.Connections h5{
  padding-bottom: 30px;
}

.Connections .col{
  text-align: left;
  padding: 0px 20px;
}
.Connections .col_1_1
{
  margin-bottom: 50px;
}

.FloorplanSlider
{
  min-height: 52vw;
}
.StatisticsSlider, .FloorplanSlider, .FloorTextSlider
{
  opacity: 0;
  visibility: hidden;
  /* display: none !important; */
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
 display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
 display: -ms-flexbox;      /* TWEENER - IE 10 */
 display: -webkit-flex;     /* NEW - Chrome */
 display: flex;
}

.StatisticsSlider.loaded, .FloorplanSlider.loaded, .FloorTextSlider.loaded
{
  opacity: 1;
  visibility: visible;
}
.figureBlock
{
  text-align: center;
  padding-bottom: 50px;
}
.figureBlock h6
{
  font-family: 'Gilroy-black';
  font-size: 22px;
  line-height: 28px;
}
.figureBlock h2{
  font-family: 'Gilroy-black';
  /* font-size: 258px;
  line-height: 180px; */
  font-size: 13.5vw;
  line-height: 10vw;
  padding-bottom: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.figureBlock h2 span{
  display: inline-block;
}

.mac-os .figureBlock h2{
    line-height: 12vw;
}

.harbourIsland
{
  position: relative;
}

.harbourIsland svg
{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.buildingPart
{
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
  width: 100%;
  height: 100%;
}


.pageWrapper
{
  max-width: 1820px;
  margin: 0 auto;
  padding: 100px 100px;
  margin: 130px auto 0px auto;
}

.pageWrapper a {
color: #000;
font-family: 'Gilroy-medium';
text-decoration: none !important;
cursor: pointer;
position: relative;
transition: all 0.3s linear;
}
.pageWrapper a:hover {
color: #A8123E;
}

.pageWrapper a::before {
content: '';
position: absolute;
background-color: #A8123E;
z-index: -1;
height: 5%;
  width: 0%;
    left: 0;
    bottom: 0;
    -webkit-transition: width ease 0.4s;
    transition: width ease 0.4s;
  }

.pageWrapper a:hover::before {
width: 100%;
}


/* page not found */
.pageNotFound{max-width: 50%; margin: 0 auto; font-size: 20px; line-height: 30px; text-align: center; padding:50px 20px 50px 20px;}
.pageNotFound h1{margin-bottom: 50px;}
.pageNotFound p:last-of-type{
  padding: 0px;
}
.pageNotFound a, .pageNotFound a:hover{color: #FFC600;}
.pageNotFound h1 {
    font-size: 16.25vw;
    font-family: 'Gilroy-black';
    color: #FF7376;
    line-height: 16.25vw;
    display: block;
}
/* page not found */

footer{
  border-top: 4px solid #A8123E;
  padding: 60px 100px 80px 100px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  footer{
      padding: 60px 100px 80px 100px;
  }
  .viewAvailability svg
  {
    height: 35px;
  }
}
footer a {
color: #000;
text-decoration: none !important;
cursor: pointer;
position: relative;
transition: all 0.3s linear;
}
footer a:hover {
color: #A8123E;
}

footer a::before {
content: '';
position: absolute;
background-color: #A8123E;
z-index: -1;
height: 5%;
  width: 0%;
    left: 0;
    bottom: 0;
    -webkit-transition: width ease 0.4s;
    transition: width ease 0.4s;
  }

footer a:hover::before {
width: 100%;
}
footer .centerBlock
{
  max-width: 1620px;
  margin: 0 auto;

}
footer .centerBlock h2
{
  padding-bottom: 80px;
  width: 100%;
}

footer .centerBlock h3
{
  font-size: 32px;
  line-height: 28px;
  color: #FFC03E;
  padding-bottom: 20px;
}
.leftCol{
    max-width: 360px;
    width: 100%;
    min-width: 360px;
}
.blankcol
{
  max-width: 50%;
  width: 100%;
}
.downloadcol
{
  width: 100%;
  max-width: 250px;
  overflow: hidden;
}

 .rightcol {
   font-size: 15px;
   line-height: 18px;
   text-align: right;
   font-family: 'Gilroy-light';
   width: 100%;
   max-width: 250px;
 }
 .rightcol > div{

   width: 100%;

 }
 .rightcol > div > div{
   text-align: left;
   overflow: hidden;

 }
 .footerAddress p:last-of-type
 {
   padding: 0px;
 }
.downloadLink{
  font-size: 20px;
  line-height: 17px;
  color: #000;
  font-family: 'Gilroy-medium';
}
.downloadLink svg
{
  margin-right: 5px;
}
.downloadLink svg .hoverpath
{
  transition: all 0.3s linear;
}
.downloadLink:hover svg .hoverpath{
  fill: #A8123E;
}

ul.footerMenu{
  margin: 0px 0px 20px 0px;
  padding: 0px;
  list-style: none;
  display: inline-block;
  text-align: left;
}
ul.footerMenu li{
  margin: 1px 0px;
  padding: 0px;
  display: block;
}
ul.footerMenu li a{
  display: inline-block;
  padding: 2px 0px;
}

.leftCol > div > div strong{
  display: block;
  color: #FFC03E;
}
.leftCol > div > div:first-child
{
  padding-right: 50px;
}

.partnerlogo
{
  width: 120px;
  height: 120px;
  pointer-events: none;
}
.partnerlogo[href]
{
  pointer-events: auto;
}
.partnerlogo img{
  width: 120px;
  height: auto;
}
.footerLogo
{
  width: 100%;
  margin: 0 auto;
  display: block;
}

.cky-consent-container .cky-btn::after, .cky-consent-container .cky-btn::before,
.cky-prefrence-btn-wrapper .cky-btn::after, .cky-prefrence-btn-wrapper .cky-btn::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
}
.cky-consent-container .cky-btn::after, .cky-prefrence-btn-wrapper .cky-btn::after {
  bottom: auto;
  border-radius: 0 0 75% 75%/0 0 50% 50%;
  background: #000;
}
.cky-consent-container .cky-btn::after, .cky-prefrence-btn-wrapper .cky-btn::after {
  height: 300%;
}
.cky-consent-container .cky-btn::after, .cky-prefrence-btn-wrapper .cky-btn::after {
-webkit-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 0;
width: 100%;
}
.no-touch .cky-consent-container .cky-btn:hover::after,
.no-touch .cky-prefrence-btn-wrapper .cky-btn:hover::after{
-webkit-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
height: 300%;
}
#cookie-notice{background-color: #FF7376 !important; font-family: 'Gilroy-light' !important;}
.cookie-notice-container{padding: 8px 35px 8px 35px !important;}
#cookie-notice .cn-button, .cky-consent-container .cky-btn,
 .cky-prefrence-btn-wrapper .cky-btn{background-color: #fff !important; color: #FF7376 !important; font-family: 'Gilroy-medium' !important;font-size: 14px;
    line-height: 18px; border:0px !important; position: relative; overflow: hidden;
    padding: 7px 20px;}
     .cky-prefrence-btn-wrapper .cky-btn{background-color: #dedfe0 !important; border:1px solid #FF7376 !important
     }
#cookie-notice .cn-button:after, .cky-consent-container .cky-btn::after,
.cky-prefrence-btn-wrapper .cky-btn::after{background-color: #000}
#cookie-notice .cn-button, .cky-consent-container .cky-btn, .cky-prefrence-btn-wrapper .cky-btn{vertical-align: middle}
#cookie-notice .cn-close-icon{  top: 24px; right: 10px;}


.footerinner > div{min-width: 0; max-width: none; display: -webkit-box;  display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.partnerlogo{display: block;}
.partnerlogo:before{display: none;}



.footerLft{padding-right: 25px; width: 65%;}
.footerRgt{padding-left: 25px; justify-content: flex-end; width: 35%;}
.footerLft > div, .footerRgt > div{width: 50%; min-width: 0; max-width: none}
.footerRgt .rightcol {display: flex; justify-content: flex-end;}
.footerRgt .rightcol > div{width: auto;;}
.footerRgt > div.downloadcol{width: auto; padding-right: 40px;}
.footerLft > div:first-child{width: auto; padding-right: 40px;}
.cky-preference-center{
  background-color: #fff !important
}
  .cky-consent-container .cky-consent-bar {
      background-color:  #FF7376 !important;
      border:0 !important;
      padding: 8px 25px !important;
      box-shadow: none;
  }
   .cky-notice .cky-title, .cky-prefrence-btn-wrapper + div, .cky-footer-shadow,
  .cky-consent-bar .cky-banner-btn-close {display: none !important;}
  .cky-notice-des p{padding: 0px;    color: #fff !important;}
  .cky-notice-des a{color: #fff !important; text-decoration: underline !important;}

  @media (max-width: 576px) {
      .cky-notice-btn-wrapper {
          flex-direction: row !important;
      }
      .cky-notice-btn-wrapper .cky-btn{
        margin: 5px !important
      }
      .cky-custom-brand-logo-wrapper, .cky-notice .cky-title, .cky-notice-des, .cky-notice-btn-wrapper
      {
        padding: 0px !important
      }
  }

  .entry .cky-cookie-audit-table {
    font-family: 'Gilroy-regular' !important;

  }
  .entry .cky-cookie-audit-table th,   .entry .cky-cookie-audit-table td {
    border: 1px solid #000 !important;
    font-size: 20px;
line-height: 25px;
  }
  .entry .cky-cookie-audit-table, .entry .cky-cookie-audit-table td, .entry .cky-cookie-audit-table th {
      background-color: transparent !important;
    }