body.overflow {overflow: hidden;}
@keyframes btnGlow {
  0% {box-shadow: 0 5px 15px rgb(73 165 127 / 40%);}
  25% {box-shadow: 0 5px 15px rgb(73 165 127 / 60%);}
  50% {box-shadow: 0 5px 15px rgb(73 165 127 / 80%);}
  100% {box-shadow: 0 5px 15px rgb(73 165 127 / 60%);}
}
.virtual-tour-main { display: flex; } 
.virtual-tour-main .middle { display: flex; align-items: center; } 
.virtual-tour { display: flex; justify-content: center;position:relative;margin-bottom: 25px;} 
.CostGuard { position: relative; left: 110px;transition-delay:0.6s;z-index:2} 
.virtual-tour.active .CostGuard{left:25px}
.UnitPrice { position: relative; right: 110px;transition-delay:0.6s} 
.virtual-tour.active .UnitPrice {right:25px}
.start { position: relative; left: 227px; z-index: 3;cursor:pointer} 
.virtual-tour.active .start{left:0}
.end { position: relative; right: 226px;cursor:pointer} 
.virtual-tour.active .end{right:0}
.virtual-tour-main>*, .middle>* { transition: 0.6s ease-in-out; }
.VirtualTags { position: relative; z-index: 1; }
.line-group { position: absolute; max-width: 644px; top: 0; bottom: 0; display: flex; width: 100%; opacity: 1; } 
.top-box img { display: block; } 
.line-group img { position: absolute; left: 0; width: 100%; right: 0; margin: auto; } 
.line-group img:first-child { top: 1px; width: 85%; } 
.line-group img:last-child { bottom: 6px; width: 85%; } 
.line-group img:nth-child(2) { top: calc(25% - 1px); width: 92%; } 
.line-group img:nth-child(3) { top: calc(50% - 4px); } 
.line-group img:nth-child(4) { top: calc(75% - 6px); width: 92%; } 
/*.virtual-tour.active .line-group { opacity: 1; transition-delay: 0.6s; transition-duration: 0.3s; }*/
.gas{position: absolute; left: 0; right: 0; text-align: center; bottom: -100px; opacity: 0;transition: 0.4s ease-in-out;}
.virtual-cloud-spends h2 { font-weight: 600; font-size: 28px; line-height: 34px; text-align: center; font-family: Poppins,sans-serif; margin-bottom: 16px; } 
.virtual-cloud-spends { padding-top: 46px; padding-bottom: 40px; } 
.virtual-cloud-spends .heading { max-width: 680px; margin: 0 auto; } 
.virtual-cloud-spends .tabing { text-align: center; margin-bottom: 28px; } 
.virtual-cloud-spends .tabing button { background: #49A57F; border: none; font-weight: 600; font-size: 16px; line-height: 24px; font-family: Poppins,sans-serif; padding: 7px 14px 7px 7px; display: inline-flex; align-items: center;animation-name: btnGlow; animation-duration: 1s; animation-iteration-count: infinite;} 
.virtual-cloud-spends .tabing button img { margin-right: 7px; display: inline-block; } 
.tabing >ul { display: flex; justify-content: center; margin-top: 28px;visibility: hidden;} 
.tabing >ul.active{visibility: visible;}
.tabing >ul>li>a { font-weight: 600; font-size: 16px; line-height: 24px; color: #999; font-family: Poppins,sans-serif; } 
.tabing >ul>li { padding: 0 17px; } 
.virtual-cloud-spends .text p { font-weight: 400; font-size: 16px; line-height: 24px; color: #666; font-family: Poppins,sans-serif; margin: 0px; text-align: center; } 
.virtual-cloud-spends .text { max-width: 787px; margin: 0 auto; }
.tabing>ul>li.active>a { color: #1B1F1D; } 
.middle .fadeOut { opacity: 0.1; } 
.middle .fadeIn { opacity: 1; top: -30px; z-index: 4; } 
.middle>div { top: 0; position: relative; } 
.middle .fadeIn .gas { opacity: 1; bottom: -60px; }
/****/
@keyframes example {
  0%   {opacity:0;top: -105px;left: 80px;}
  20%  {opacity:1}
  60%  {opacity:1;top:-90px}
  80%  {opacity:1;top:-66px}
  100% {opacity:0;top: -20px;left: 250px;}
}
@keyframes example1 {
  0%   {opacity:0;left: 80px;}
  20%  {opacity:1}
  90%  {opacity:1}
  100% {opacity:0;left: 250px;}
}
@keyframes example2 {
  0%   {opacity:0;top: 65px;left: 80px;}
  20%  {opacity:1}
  60%  {opacity:1;top:50px}
  80%  {opacity:1;top:35px}
  100% {opacity:0;top: -20px;left: 250px;}
}
.virtual-tour-icons { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; max-width: 644px; margin: 0 auto; width: 100%; z-index: 4;opacity:1; transition:0.4s ease-in-out;transition-delay:0.6s} 
.virtual-tour-icons>ul>li { position: absolute; transition-duration: .4s; transition-timing-function: ease-in-out;} 
.virtual-tour-icons>ul>li:first-child { animation-delay: 0s;} 
.virtual-tour-icons>ul>li:nth-child(2) { animation-delay: 0s; } 
.virtual-tour-icons>ul>li:nth-child(3) { animation-delay: 0s;} 
.virtual-tour-icons>ul>li:nth-child(4) { animation-delay: 1.6s;} 
.virtual-tour-icons>ul>li:nth-child(5) {animation-delay: 1.6s;} 
.virtual-tour-icons>ul>li:nth-child(6) { animation-delay: 1.6s; } 
.virtual-tour-icons>ul>li:nth-child(7) { animation-delay: 3.2s; }
.virtual-tour-icons>ul>li:nth-child(8) { animation-delay: 3.2s; }
.virtual-tour-icons>ul>li:nth-child(9) { animation-delay: 3.2s; }
.virtual-tour-icons>ul>li:first-child, .virtual-tour-icons>ul>li:nth-child(4), .virtual-tour-icons>ul>li:nth-child(8) {top: -105px;left: 80px;animation-name: example; animation-duration: 4.8s; animation-iteration-count: infinite; animation-timing-function: linear;}
/*.virtual-tour-icons>ul>li:nth-child(4) { left: 130px; top: -90px; } 
.virtual-tour-icons>ul>li:nth-child(8) { left: 190px; top: -66px; }*/
.virtual-tour-icons>ul>li:nth-child(2), .virtual-tour-icons>ul>li:nth-child(5), .virtual-tour-icons>ul>li:nth-child(9) {left: 80px;top: -20px;animation-name: example1; animation-duration: 4.8s; animation-iteration-count: infinite; animation-timing-function: linear;}
.virtual-tour-icons>ul>li:nth-child(3), .virtual-tour-icons>ul>li:nth-child(6), .virtual-tour-icons>ul>li:nth-child(7) {top: 65px;left: 80px;animation-name: example2; animation-duration: 4.8s; animation-iteration-count: infinite; animation-timing-function: linear;}
.virtual-cloud-spends.inViewPort .active .virtual-tour-icons>ul>li { opacity: 0 !important; transition-duration: .2s; transition-delay: 0s; }
.text-inner { display: none; opacity: 0; transition: opacity 0.4s ease-in-out; } 
.text-inner.active { display: block; opacity: 1; }
.virtual-tour.active .virtual-tour-icons { opacity:0 }
/*****/
.virtual-cloud-spends .container { display: flex; flex-flow: column; } .virtual-cloud-spends .heading { order: -2; } .virtual-cloud-spends .text { order: -1; margin-bottom: 24px; }
@media(min-width:768px){
  img.mob-img{display:none}
}
@media(max-width:767px){
  img.desk-img{display:none}
  .virtual-tour-icons { display: none; } 
  .virtual-tour-main { flex-flow: column; } 
  .start {top: 0;position: absolute;left: 0 !important;right: 0;} 
  .virtual-tour-main img { margin: 0 auto; } 
  .virtual-tour-main .middle { flex-flow: column; } 
  .middle>div {left: 0 !important;right: 0 !important;position: absolute;text-align: center;} 
  .end {right: 0;top: 45px;position: absolute;left: 0;text-align: center;} 
  .middle>.CostGuard {top: 0;} 
  .middle>.UnitPrice {top: 0;}
  .virtual-tour.active .start {top: 0;} 
  .virtual-tour.active .CostGuard {top: 149px;} 
  .virtual-cloud-spends .container { display: flex; flex-flow: column; } 
  .virtual-tour {order: 1;height: 190px;margin:0 auto;transition: 0.6s ease-in-out;max-width:375px;width: 100%;} 
  .middle .fadeIn { top: 0; } 
  .middle .fadeIn .gas { opacity: 0; }
  .virtual-cloud-spends h2 { font-size: 24px; line-height: 32px;} 
  .virtual-cloud-spends { padding-top: 0px; padding-left: 20px; padding-right: 20px;padding-bottom:0px} 
  .virtual-cloud-spends h2 br { display: none; } 
  .tabing >ul {justify-content: space-between; margin-top: 20px; } 
  .tabing >ul>li { padding: 0; } 
  .virtual-cloud-spends .text p { font-size: 14px; line-height: 20px; } 
  .line-group>img { opacity: 0; } 
  .virtual-cloud-spends .text {margin-bottom: 35px;padding: 0 5px;max-width:375px} 
  .line-group {background: url(https://8840961.fs1.hubspotusercontent-na1.net/hubfs/8840961/New%20Home/Lines.png) no-repeat center top 0px;background-size: 100% auto;}
  .virtual-tour.active .VirtualTags { top: 228px; } 
  .virtual-tour.active .UnitPrice { top: 307px; } 
  .virtual-tour.active .end { top: 414px; } 
  .virtual-tour.active { height: 514px; }
  .home-banner-content p br { display: none; }
  /* staging css */
  .anim .tabing >ul {/*visibility: visible;*/column-gap: 16px;justify-content: center;}
  .tabing >ul>li>a { font-weight: 600; font-size: 14px; line-height: 1.4;display: inline-block;} 
  .anim .virtual-tour-icons {display: block;}
  .anim .start {top: 33px;}
  .anim .end {top: 55px;}
  .anim .virtual-tour {height: 235px;}
  .anim .virtual-tour.active {height: 514px;}
  .anim .line-group {background-size: auto;}
  .anim .middle>div {top: 45px;}
/*   .anim .middle>.UnitPrice, .anim .middle>.CostGuard {top: 45px;} */
  .anim .virtual-tour-icons>ul>li:first-child, .anim .virtual-tour-icons>ul>li:nth-child(4), .anim .virtual-tour-icons>ul>li:nth-child(8) {
    right: 57px;
    left: unset;
    top: -192px;
  }
  .anim .virtual-tour-icons>ul>li:nth-child(2), .anim .virtual-tour-icons>ul>li:nth-child(5), .anim .virtual-tour-icons>ul>li:nth-child(9) {
    left: 94px;
    top: -192px;
  }
  .anim .virtual-tour-icons>ul>li:nth-child(3) {
    top: -192px;
    left: 94px;
  }
  .anim .virtual-tour-icons>ul>li:nth-child(6), .anim .virtual-tour-icons>ul>li:nth-child(7) {
    display: none;
  }
  @keyframes example {
    0%   {opacity:0;top: -192px;right: 57px;}
    20%  {opacity:1;}
    40%  {right: 120px;}
    60%  {opacity:1;top:-90px;}
    80%  {opacity:1;top:-66px;}
    100% {opacity:0;top: -50px;right: 120px;}
  }
  @keyframes example1 {
    0%   {opacity:0;left: 80px;}
    20%  {opacity:1}
    50%  {left: 120px;top: -122px;}
    90%  {opacity:1}
    100% {opacity:0;top: -50px;}
  }
  @keyframes example2 {
    0%   {opacity:0;left: 80px;}
    20%  {opacity:1}
    60%  {opacity:1;top:-110px;left: 48px;}
    80%  {opacity:1;}
    100% {opacity:0;top: -40px;left: 94px;}
  }
}