/* font start here */
@font-face {
    font-family: 'TT-Norms-Pro-Light';
    src: url('font/TTNormsPro-Light.eot');
    src: url('font/TTNormsPro-Light.eot?#iefix') format('embedded-opentype'),
        url('font/TTNormsPro-Light.woff2') format('woff2'),
        url('font/TTNormsPro-Light.woff') format('woff'),
        url('font/TTNormsPro-Light.ttf') format('truetype'),
        url('font/TTNormsPro-Light.svg#TTNormsPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'TT-Norms-Pro-Bold';
    src: url('font/TTNormsPro-Bold.eot');
    src: url('font/TTNormsPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/TTNormsPro-Bold.woff2') format('woff2'),
        url('font/TTNormsPro-Bold.woff') format('woff'),
        url('font/TTNormsPro-Bold.ttf') format('truetype'),
        url('font/TTNormsPro-Bold.svg#TTNormsPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* font end here */

/*  smooth animation start here */
ul.footerLargeMenu li a::after, ul.footerLargeMenu li a::before, .rowLevel, .slick-arrow,
.fancybox-custom-layout .fancybox-inner .fancybox-caption{
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menuoverlay, .menuHolder, header, .responsiveLink, .logo svg{
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

/*  smooth animation end here */

/* common page animations */
.fadeIn, .lazyLoadImage{
	opacity: 0;
  transition: opacity 1s ease .4s;
	-webkit-transition: opacity 1s ease .4s;
	-moz-transition: opacity 1s ease .4s;
	-o-transition: opacity 1s ease .4s;
}

.fadeIn.animateMe, .lazyLoadImage.entered.lazyloaded, .lazyLoadImage.lazyloaded {opacity:1}

.fadeInUp {-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	transform: translateY(30px);
	opacity: 0;
	transition: opacity 1s ease .4s,transform 1s ease .4s;
	-webkit-transition: opacity 1s ease .4s,transform 1s ease .4s;
	-moz-transition: opacity 1s ease .4s,transform 1s ease .4s;
	-o-transition: opacity 1s ease .4s,transform 1s ease .4s;}
.fadeInUp.animateMe { -webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;}
/* common page animations */

.coupleSmall.animateMe{
  -webkit-animation: coupleSmall 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -moz-animation: coupleSmall 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -ms-animation: coupleSmall 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation: coupleSmall 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 1s;
}
@keyframes coupleSmall {
  0%{opacity:0;}
  100%{opacity:1;}
}
@-webkit-keyframes coupleSmall {
  0%{opacity:0;}
  100%{opacity:1;}
}


.localAreaBanner.animateMe::before{
  -webkit-animation: showtopTriangle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -moz-animation: showtopTriangle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -ms-animation: showtopTriangle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation: showtopTriangle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 1.5s;
}
@keyframes showtopTriangle {
  0%{opacity:0; left:-40px;}
  100%{opacity:1; left:0px;}
}
@-webkit-keyframes showtopTriangle {
  0%{opacity:0; left:-40px;}
  100%{opacity:1; left:0px;}
}

.parkBlock.animateMe::before{
  -webkit-animation: parkBlockTriangle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -moz-animation: parkBlockTriangle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -ms-animation: parkBlockTriangle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation: parkBlockTriangle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 1.8s;
}
@keyframes parkBlockTriangle {
  0%{opacity:0; right:-40px;}
  100%{opacity:1; right:0px;}
}
@-webkit-keyframes parkBlockTriangle {
  0%{opacity:0; right:-40px;}
  100%{opacity:1; right:0px;}
}

body.page-template-template-building .largeCaption.animateMe::before,
body.page-template-template-retail .shapeBox.animateMe::before{
  -webkit-animation: buildingCircle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -moz-animation: buildingCircle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -ms-animation: buildingCircle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation: buildingCircle 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 0.5s;
}
@keyframes buildingCircle {
  0%{opacity:0; left:-42%;}
  100%{opacity:1; left:-20%;}
}
@-webkit-keyframes buildingCircle {
  0%{opacity:0; left:-42%;}
  100%{opacity:1; left:-20%;}
}

body.page-template-template-building .largeCaption.animateMe::after{
  -webkit-animation: buildingTriangle 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -moz-animation: buildingTriangle 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -ms-animation: buildingTriangle 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation: buildingTriangle 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 1s;
}
@keyframes buildingTriangle {
  0%{opacity:0; bottom:-20px; right:-20px;}
  100%{opacity:1; bottom:0px; right:0px;}
}
@-webkit-keyframes buildingTriangle {
  0%{opacity:0; bottom:-20px; right:-20px;}
  100%{opacity:1; bottom:0px; right:0px;}
}

.heroImage.animateMe::after{
  -webkit-animation: showHero 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -moz-animation: showHero 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -ms-animation: showHero 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation: showHero 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 0.8s;
}

body.animation_loaded .heroImage::after{
  -webkit-animation: showHero 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -moz-animation: showHero 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -ms-animation: showHero 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation: showHero 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 7s;
}

@keyframes showHero {
  0%{left:0;}
  100%{left:-100%;}
}
@-webkit-keyframes showHero {
  0%{left:0;}
  100%{left:-100%;}
}
/* londonConnection animation css start */

.animateMe .mainline {
  fill: none;
  stroke: #172B36;
  stroke-dasharray: 0 1260;
  stroke-dashoffset: -780;
  -webkit-animation: expand-from-centre 0.5s linear forwards;
  animation: expand-from-centre 0.5s linear forwards;
  animation-delay: 1s;
}

@-webkit-keyframes expand-from-centre
{
  from {
    stroke-dasharray: 0 1260;
    stroke-dashoffset: -780;
  }

  to {
    stroke-dasharray: 1260 1260;
    stroke-dashoffset: 0;
  }
}


@keyframes expand-from-centre
{
  from {
    stroke-dasharray: 0 1260;
    stroke-dashoffset: -780;
  }

  to {
    stroke-dasharray: 1260 1260;
    stroke-dashoffset: 0;
  }
}

.maincircle, .maincircleText, .leftText1, .leftText2, .leftText3, .leftText4, .leftText5, .rightText1, .rightText2, .rightText3
{
  opacity: 0;
}
.animateMe .maincircle, .animateMe .maincircleText
{
  opacity: 0;
  -webkit-animation: appear-element 1s linear forwards;
  animation: appear-element 1s linear forwards;
}

@-webkit-keyframes appear-element
{
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}


@keyframes appear-element
{
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}


@-webkit-keyframes expand-from-bottom
{
  from {stroke-dasharray:50; stroke-dashoffset:50; opacity:0;}
  to {stroke-dasharray:50; stroke-dashoffset:100; opacity:1;}
}


@keyframes expand-from-bottom
{
  from {stroke-dasharray: 50; stroke-dashoffset:50; opacity: 0;}
  to {stroke-dasharray: 50; stroke-dashoffset: 100; opacity: 1;}
}


@-webkit-keyframes expand-from-top
{
  from {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    opacity: 0;
  }

  to {
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}


@keyframes expand-from-top
{
  from {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    opacity: 0;
  }

  to {
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
.leftline1, .leftline3, .leftline5, .rightline1, .rightline3
{
  opacity: 0;
}
.animateMe .leftline1, .animateMe .leftline3, .animateMe .leftline5, .animateMe .rightline1, .animateMe .rightline3 {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  opacity: 0;
}

.rightline2, .leftline2, .leftline4
{
  opacity: 0;
}
.animateMe .rightline2, .animateMe .leftline2, .animateMe .leftline4{
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  opacity: 0;
}

.animateMe .leftline1, .animateMe .rightline1
{
  -webkit-animation: expand-from-bottom 0.5s linear forwards;
  animation: expand-from-bottom 0.5s linear forwards;
  animation-delay: 2s;
}

.animateMe .leftline2, .animateMe .rightline2
{
  -webkit-animation: expand-from-top 0.5s linear forwards;
  animation: expand-from-top 0.5s linear forwards;
  animation-delay: 2.6s;
}

.animateMe .leftline3, .animateMe .rightline3
{
  -webkit-animation: expand-from-bottom 0.5s linear forwards;
  animation: expand-from-bottom 0.5s linear forwards;
  animation-delay: 3.1s;
}

.animateMe .leftline4
{
  -webkit-animation: expand-from-top 0.5s linear forwards;
  animation: expand-from-top 0.5s linear forwards;
  animation-delay: 3.6s;
}
.animateMe .leftline5
{
  -webkit-animation: expand-from-bottom 0.5s linear forwards;
  animation: expand-from-bottom 0.5s linear forwards;
  animation-delay: 4.2s;
}

.animateMe .leftText1, .animateMe .rightText1
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 2.4s;
}
.animateMe .leftText2, .animateMe .rightText2
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 2.9s;
}
.animateMe .leftText3, .animateMe .rightText3
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 3.4s;
}
.animateMe .leftText4
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 3.9s;
}
.animateMe .leftText5
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 4.5s;
}
/* londonConnection animation css end */



/* londonConnection mobile animation css start */
.mobilemainline
{stroke-dasharray: 500; stroke-dashoffset: 500;}
.animateMe .mobilemainline{
  -webkit-animation: expand-top-bottom 1s linear forwards;
  animation: expand-top-bottom 1s linear forwards;
  animation-delay: 1s;
}
@-webkit-keyframes expand-top-bottom{
  from {stroke-dasharray: 500; stroke-dashoffset:500;}
  to {stroke-dasharray: 500; stroke-dashoffset: 1000;}
}
@keyframes expand-top-bottom{
  from {stroke-dasharray:500; stroke-dashoffset:500;}
  to {stroke-dasharray:500; stroke-dashoffset:1000;}
}

.texttop
{
  opacity: 0
}
.animateMe .texttop
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 2s;
}

.mobileline1,.mobileline2, .mobileline3, .mobileline4, .mobileline5 {
  stroke-dasharray: 0 60;
  stroke-dashoffset: -30;
}


.animateMe .mobileline1 {
  -webkit-animation: expand-mobile-centre 0.5s linear forwards;
  animation: expand-mobile-centre 0.5s linear forwards;
  animation-delay: 3s
}
.animateMe .mobileline2 {
  -webkit-animation: expand-mobile-centre 0.5s linear forwards;
  animation: expand-mobile-centre 0.5s linear forwards;
  animation-delay: 4s
}
.animateMe .mobileline3 {
  -webkit-animation: expand-mobile-centre 0.5s linear forwards;
  animation: expand-mobile-centre 0.5s linear forwards;
  animation-delay: 5s
}
.animateMe .mobileline4 {
  -webkit-animation: expand-mobile-centre 0.5s linear forwards;
  animation: expand-mobile-centre 0.5s linear forwards;
  animation-delay: 6s
}
.animateMe .mobileline5 {
  -webkit-animation: expand-mobile-centre 0.5s linear forwards;
  animation: expand-mobile-centre 0.5s linear forwards;
  animation-delay: 7s
}

@-webkit-keyframes expand-mobile-centre
{
  from {
    stroke-dasharray: 0 60;
    stroke-dashoffset: -30;
  }

  to {
    stroke-dasharray: 60 60;
    stroke-dashoffset: 0;
  }
}


@keyframes expand-mobile-centre
{
  from {
    stroke-dasharray: 0 60;
    stroke-dashoffset: -30;
  }

  to {
    stroke-dasharray: 60 60;
    stroke-dashoffset: 0;
  }
}

.mobileTextleft1, .mobileTextleft2, .mobileTextleft3, .mobileTextleft4, .mobileTextleft5, .mobileTextright1, .mobileTextright2, .mobileTextright3
{
  opacity: 0;

}

.animateMe .mobileTextleft1, .animateMe .mobileTextright1
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 3.5s;
}
.animateMe .mobileTextleft2, .animateMe .mobileTextright2
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 4.5s;
}
.animateMe .mobileTextleft3, .animateMe .mobileTextright3
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 5.5s;
}
.animateMe .mobileTextleft4
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 6.5s;
}
.animateMe .mobileTextleft5
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 7.5s;
}
/* londonConnection mobile animation css end */
.mappointer .local-occupiers > span > span{
  -webkit-animation: colorOccupiers 1.2s infinite;
-moz-animation: colorOccupiers 1.2s infinite;
-ms-animation: colorOccupiers 1.2s infinite;
animation: colorOccupiers 1.2s infinite;}
@-webkit-keyframes colorOccupiers{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-moz-keyframes colorOccupiers{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-o-keyframes colorOccupiers{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-o-keyframes colorOccupiers{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@keyframes colorOccupiers{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}

.mappointer .restaurants-bars > span > span{
  -webkit-animation: colorrestaurants 1.2s infinite;
-moz-animation: colorrestaurants 1.2s infinite;
-ms-animation: colorrestaurants 1.2s infinite;
animation: colorrestaurants 1.2s infinite;}
@-webkit-keyframes colorrestaurants{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-moz-keyframes colorrestaurants{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-o-keyframes colorrestaurants{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-o-keyframes colorrestaurants{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@keyframes colorrestaurants{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}

.mappointer .leisure-fitness > span > span{
  -webkit-animation: colorleisure 1.2s infinite;
-moz-animation: colorleisure 1.2s infinite;
-ms-animation: colorleisure 1.2s infinite;
animation: colorleisure 1.2s infinite;}
@-webkit-keyframes colorleisure{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-moz-keyframes colorleisure{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-o-keyframes colorleisure{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-o-keyframes colorleisure{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@keyframes colorleisure{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}

.mappointer .hotels > span > span, .mappointer .connections > span > span{
  -webkit-animation: colohotels 1.2s infinite;
-moz-animation: colorhotels 1.2s infinite;
-ms-animation: colorhotels 1.2s infinite;
animation: colorhotels 1.2s infinite;}
@-webkit-keyframes colorhotels{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-moz-keyframes colorhotels{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-o-keyframes colorhotels{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@-o-keyframes colorhotels{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}
@keyframes colorhotels{
  0%{background-color:#D7D4C8;}
  50%{background-color:#ffffff;}
  100%{background-color:#D7D4C8;}
}

/* esg circletext animation start */

.drawcircle
{
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
.animateMe .drawcircle
{
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: drawcircle 2s ease forwards;
 -moz-animation: drawcircle 2s ease forwards;
 -ms-animation: drawcircle 2s ease forwards;
 animation: drawcircle 2s ease forwards;
animation-delay: 0.5s;
}

@-webkit-keyframes drawcircle{
  from{stroke-dashoffset:2000;}
  to{stroke-dashoffset:0;}
}

@-moz-keyframes drawcircle{
  from{stroke-dashoffset:2000;}
  to{stroke-dashoffset:0;}
}

@-o-keyframes drawcircle{
  from{stroke-dashoffset:2000;}
  to{stroke-dashoffset:0;}
}

@-o-keyframes drawcircle{
  from{stroke-dashoffset:2000;}
  to{stroke-dashoffset:0;}
}

@keyframes drawcircle{
  from{stroke-dashoffset: 2000;}
  to{stroke-dashoffset:0;}
}

.mainText, .middletext1, .middletext2, .middletext3, .dot1, .dot2, .dot3, .text1_1, .text1_2, .text2_1, .text2_2, .text3_1, .text3_2, .text3_3
{
    opacity: 0;
}
.animateMe .mainText
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
}

.animateMe .middletext1, .animateMe .dot1
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 2.5s;
}

.animateMe .text1_1
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 2.8s;
}
.animateMe .text1_2
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 3s;
}

.animateMe .middletext2, .animateMe .dot2
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 3.5s;
}
.animateMe .text2_1
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 3.8s;
}
.animateMe .text2_2
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 4s;
}

.animateMe .middletext3, .animateMe .dot3
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 4.5s;
}
.animateMe .text3_3
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 4.8s;
}
.animateMe .text3_2
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 5s;
}
.animateMe .text3_1
{
  opacity: 0;
  -webkit-animation: appear-element 1s ease forwards;
  animation: appear-element 1s ease forwards;
  animation-delay: 5.2s;
}

@keyframes ripple {
  0% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(255, 255, 255, 0.3), 0 0 0 15px rgba(255, 255, 255, 0.3);
  }
  100% {box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3), 0 0 0 15px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}

/* 404 animation start */
@-webkit-keyframes balance {0% {-webkit-transform: translate3d(0,0,0); } 50% {-webkit-transform: translate3d(0,1rem,0); } 100% { -webkit-transform: translate3d(0,0,0); }}
@-moz-keyframes balance {0% {-moz-transform: translate3d(0,0,0);} 50% {-moz-transform: translate3d(0,1rem,0);} 100% {-moz-transform: translate3d(0,0,0);}}
@-o-keyframes balance {0% {-o-transform: translate3d(0,0,0);} 50% {-o-transform: translate3d(0,1rem,0);} 100% {-o-transform: translate3d(0,0,0);}}
@-ms-keyframes balance {0% {-ms-transform: translate3d(0,0,0); } 50% {-ms-transform: translate3d(0,1rem,0);}100% {-ms-transform: translate3d(0,0,0); }}
@keyframes balance {0% {transform: translate3d(0,0,0); } 50% {transform: translate3d(0,1rem,0); } 100% {transform: translate3d(0,0,0); }}
/* 404 animation end here */

/* screen loader start here */
@-webkit-keyframes screen1colorchange
{
0% { background:#E7E4DF;opacity: 1;}
18% { background:#E7E4DF;opacity: 1;}
20%{ background:#A2927F;opacity: 1;}
38%{ background:#A2927F;opacity: 1;}
40% { background:#86e0c7;opacity: 1;}
58% { background:#86e0c7;opacity: 1;}
60% { background:#172B36;opacity: 1;}
100% { background:#172B36;opacity: 0;}
}
@-moz-keyframes screen1colorchange {
  0% { background:#E7E4DF;opacity: 1;}
  18% { background:#E7E4DF;opacity: 1;}
  20%{ background:#A2927F;opacity: 1;}
  38%{ background:#A2927F;opacity: 1;}
  40% { background:#86e0c7;opacity: 1;}
  58% { background:#86e0c7;opacity: 1;}
  60% { background:#172B36;opacity: 1;}
  100% { background:#172B36;opacity: 0;}
}
@-o-keyframes screen1colorchange {
  0% { background:#E7E4DF;opacity: 1;}
  18% { background:#E7E4DF;opacity: 1;}
  20%{ background:#A2927F;opacity: 1;}
  38%{ background:#A2927F;opacity: 1;}
  40% { background:#86e0c7;opacity: 1;}
  58% { background:#86e0c7;opacity: 1;}
  60% { background:#172B36;opacity: 1;}
  100% { background:#172B36;opacity: 0;}
 }
@keyframes screen1colorchange {
  0% { background:#E7E4DF;opacity: 1;}
  18% { background:#E7E4DF;opacity: 1;}
  20%{ background:#A2927F;opacity: 1;}
  38%{ background:#A2927F;opacity: 1;}
  40% { background:#86e0c7;opacity: 1;}
  58% { background:#86e0c7;opacity: 1;}
  60% { background:#172B36;opacity: 1;}
  100% { background:#172B36;opacity: 0;}
} 

/* lading logo end */
@-webkit-keyframes screen2{ 0%{opacity:1;} 100%{opacity:0;} }
@-moz-keyframes screen2 { 0%{opacity:1;} 100%{opacity:0;} }
@-o-keyframes screen2 { 0%{opacity:1;} 100%{opacity:0;} }
@keyframes screen2 { 0%{opacity:1;} 100%{opacity:0;} } 
/* screen2 end */

@-webkit-keyframes logoiconScale{
  0%{
  transform-origin: center center;
  -webkit-transform: scale(30);
 -moz-transform: scale(30);
 -ms-transform: scale(30);
 -o-transform: scale(30);
 transform: scale(30);
 opacity: 0;
}
20%{
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
90%{
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100%{
transform-origin: center center;
-webkit-transform: scale(80);
-moz-transform: scale(80);
-ms-transform: scale(80);
-o-transform: scale(80);
transform: scale(80);
opacity:0;
}
}
@-moz-keyframes logoiconScale {
  0%{
  transform-origin: center center;
  -webkit-transform: scale(30);
 -moz-transform: scale(30);
 -ms-transform: scale(30);
 -o-transform: scale(30);
 transform: scale(30);
 opacity: 0;
}
20%{
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
90%{
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100%{
transform-origin: center center;
-webkit-transform: scale(80);
-moz-transform: scale(80);
-ms-transform: scale(80);
-o-transform: scale(80);
transform: scale(80);
opacity:0;
}
}
@-o-keyframes logoiconScale {
  0%{
  transform-origin: center center;
  -webkit-transform: scale(30);
 -moz-transform: scale(30);
 -ms-transform: scale(30);
 -o-transform: scale(30);
 transform: scale(30);
 opacity: 0;
}
20%{
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
90%{
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100%{
transform-origin: center center;
-webkit-transform: scale(80);
-moz-transform: scale(80);
-ms-transform: scale(80);
-o-transform: scale(80);
transform: scale(80);
opacity:0;
}
 }
@keyframes logoiconScale {
  0%{
  transform-origin: center center;
  -webkit-transform: scale(30);
 -moz-transform: scale(30);
 -ms-transform: scale(30);
 -o-transform: scale(30);
 transform: scale(30);
 opacity: 0;
}
20%{
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
90%{
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100%{
transform-origin: center center;
-webkit-transform: scale(80);
-moz-transform: scale(80);
-ms-transform: scale(80);
-o-transform: scale(80);
transform: scale(80);
opacity:0;
}
}   
/* logoiconScale end */

@-webkit-keyframes landingLogo{
  0%{
 opacity: 1;
 transform-origin: center center;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
2%{

opacity: 1;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
90%{

opacity: 1;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
100%{
  opacity: 0;
  transform-origin: center center;
  -webkit-transform: scale(90);
  -moz-transform: scale(90);
  -ms-transform: scale(90);
  -o-transform: scale(90);
  transform: scale(90);
}
}
@-moz-keyframes landingLogo {
  0%{
 opacity: 1;
 transform-origin: center center;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
2%{

opacity: 1;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
90%{

opacity: 1;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 0;
transform-origin: center center;
-webkit-transform: scale(90);
-moz-transform: scale(90);
-ms-transform: scale(90);
-o-transform: scale(90);
transform: scale(90);
}
}
@-o-keyframes landingLogo {
  0%{
 opacity: 1;
 transform-origin: center center;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
2%{

opacity: 1;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
90%{

opacity: 1;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
100%{
  opacity: 0;
  transform-origin: center center;
  -webkit-transform: scale(90);
  -moz-transform: scale(90);
  -ms-transform: scale(90);
  -o-transform: scale(90);
  transform: scale(90);
}
 }
@keyframes landingLogo {
  0%{
 opacity: 1;
 transform-origin: center center;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
2%{

opacity: 1;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
90%{

opacity: 1;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 0;
transform-origin: center center;
-webkit-transform: scale(90);
-moz-transform: scale(90);
-ms-transform: scale(90);
-o-transform: scale(90);
transform: scale(90);
}
} 

/* lading logo end */

/* screen loader end here */