/* WIDTH WIDE */
/* .container { width:100%!important; } *//* Nobile */
@import url('https://fonts.googleapis.com/css?family=Nobile');

* { font-family: 'Nobile', sans-serif; }
.font-main { font-family: 'Nobile', sans-serif !important; }
h1, h2, h3, h4, h5, h6, nav { font-family: 'Nobile', sans-serif; }
.font-title { font-family: font-family: 'Nobile', sans-serif !important; }
/* theme Light */
body { background-color: #FFF; color:#222; }
html,body
{
    overflow-x: hidden; 
}

.fa-angle-right { color: black !important; }
.fa-check { color: #225ebf !important; margin-right: 8px; }
.fa-phone { color: #225ebf !important; margin-right: 5px; }
.fa-globe { color: #225ebf !important; margin-right: 5px; }
.fa-envelope { color: #225ebf !important; margin-right: 5px; }

.center-bs {float: none;
    margin-left: auto;
    margin-right: auto;}

.theme-color { color:#225ebf; !important; }
.theme-background { background:#225ebf; !important; }

.btn-lux { display:inline-block; font: 400 normal 13px/21px 'Lato', sans-serif; background:#000; color:#FFF; border-radius:25px; min-width:150px; float:none; height: 25px; line-height: 1;}
.btn-lux:hover { color:#225ebf; }
.btn-lux.active { background: #225ebf; color: #FFF; }
.btn-lux.active:hover { background: #225ebf; color: #000; }

.lux-title { font: 300 normal 23px/32px 'Lato', serif !important; color: #000; margin: 0 0 0; text-align: center; }
.lux-title span { font-weight: 600; font-family: 'Lato', serif; color: #225ebf;}
.lux-title.black { color: #FFF; }
.lux-title-hr { display: block; border: 0; border-top: 2px solid black; padding: 0; margin: 12px 39%; margin-bottom: 20px; }
.lux-white-hr { display: block; border: 0; border-top: 1px solid white; padding: 0; margin: 12px 39%; margin-bottom: 20px; }
.lux-color-hr {display: block; border: 0; border-top: 1px solid #225ebf; padding: 0; margin: 12px 39%; margin-bottom: 20px; }
.lux-oh-hr {display: block; border: 0; border-top: 1px solid #225ebf; padding: 0; margin: 0 39%; margin-bottom: 0px; }
.lux-overlay-hr { display: block; border: 0; border-top: 2px solid white; padding: 0; margin: 12px 20%; margin-bottom: 25px; margin-top: 25px; }
.lux-contact-title {  font: 300 normal 28px/32px 'Raleway', serif !important; color: #000; margin: 0 0 0; text-align: center; }
.lux-contact-title span{ font-weight: 600; font-family: 'Raleway', serif; }

a, a:hover { text-decoration:none; }

.buttons-carousel-left, .buttons-carousel-right { color:#888; font-size:26px; }
.buttons-carousel-left:hover, .buttons-carousel-right:hover { color:#225ebf; }

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* carousel */
.carousel-inner { height:63vw; overflow:hidden; background:#000; }
.head-carousel .item { overflow:hidden; }
.head-carousel { height:63vw; } 
.carousel { position:relative; height:63vw; }
.carousel-img { 
	position:absolute; left:0; right:0; top: 0; bottom:0; 
	background-size:cover; background-repeat:no-repeat; background-position:center; }
.carousel-indicators { position:absolute; bottom: 0; right:0;  left:0; width:100%; text-align:center; margin:0; padding:0 30px; }
.carousel-indicators li { border:solid 1px rgba(255,255,255,.8); background:rgba(255,255,255,.2); border-radius:2px; width:22px; height:22px; }
.carousel-indicators li.active { background:rgba(255,255,255,1);; width:24px; height:24px; }
.carousel-indicators span { 
	display:inline-block; font: 300 normal 22px/24px 'Lato',sans-serif; float:left; 
	color:#FFF; text-shadow:1px 1px 4px rgba(0,0,0,1); display:none; }
.carousel-control.right { background-image: none !important; }
.carousel-control.left { background-image: none !important; }
.glyphicon { font-size: 25px;}

.carousel-fade .carousel-inner .item{
	transition-property: opacity;
	transition-duration: .75s;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

.carousel-control.left { transition: none; }
.carousel-control.right { transition: none; }
.slideshow-port { height: 67vw !important; width: auto !important; margin: 0 auto; display: block; }

.tour-body{display: none;}
#overlay { display: flex; align-items: center; justify-content: center;}
.overlay-text { display: inline-block;}
.overlay-text h1 { color: white; font: 400 normal 32px/32px 'Raleway', serif !important;} 
.overlay-text h2 { color: white; font: 300 normal 35px/35px 'Raleway', serif !important; margin-top: 0;} 
.overlay-text h3 {color: white; font: 300 normal 35px/35px 'Raleway', serif !important; margin-top: 0; text-transform: none;} 
.overlay-text h4 {color: white; font: 400 normal 32px/32px 'Raleway', serif !important; margin-top: 0;} 

.openhouse{ background-color: white; padding: 0px; position: relative; color: black; border-top: 2px solid black; margin-bottom: 3px;}
.openhouse h2 {font: 300 normal 13px/32px 'Lato', serif !important; margin-top: 0; margin-bottom: 0; text-align: center; height: 25px;}
.openhouse h2 i { color: #225ebf; } 
.openhouse h3 {font: 300 normal 14px/32px 'Lato', serif !important; margin-top: 0; margin-bottom: 0; text-align: center; color: black; height: 25px;}
.openhouse h3 span {color: #225ebf; font-weight: 600;}

/* menu */
.menu { position:relative; left:0; right:0; height:60px; background: white;  z-index:999999; text-shadow: none; border-bottom: 1px solid gray; border-top: 4px solid #225ebf; }
.navbar-collapse{ background: white !important; margin-top: 10px; border: 1px solid grey; padding: 5px 35px 5px 35px; width: 60%; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 999999;}
.navbar-toggle .icon-bar { background: black; }
.navbar-nav>li>a { font-size: 13px; color: black !important; }
.nav > li{ text-align: center; border: 1px solid grey; border-bottom: none;}
.nav > li:last-child{ border-bottom: 1px solid grey; }

.top-video-frame {     top: -7%; left: -15%;  position: absolute;}
.top-wrapper { width: 100%; height: 100%; padding-top: 56.25%; overflow: hidden; position: relative; }
.no-click { top: -7%; left: -15%;  position: absolute; width: 130%; height: 100%; z-index: 4; }

.menu.sticked { background: white; border-bottom: 1px solid #225ebf; text-shadow: none;}
.menu * { text-decoration:none; font: normal 400 14px/50px 'Lato', sans-serif;  text-shadow: none !important;  -webkit-box-shadow: none !important; box-shadow: none !important;}
.menu a:hover, .menu a:active, .menu a:link { background:none !important; } 
.menu a:hover, .menu a.active { color:#225ebf !important;}
.menu a.active { color#225ebf !important; font-weight: 600;}
.menu h1 { margin:0; padding:0; color:#225ebf !important; width: 80%; margin-top: 17px;}
.menu h1 span { color: black !important; font: normal 400 13px/50px 'Lato', sans-serif;  text-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; line-height: 1.1;}
.navbar-toggle span { background:#FFF; }
.navbar-collapse { background:#000; }
@media screen and (max-width: 500px) {
	.navbar-collapse { width: 90%; }
}
.close-button { position: fixed; right: 0; top: 0; z-index: 9999; display: none;}
.close-button i { font-size: 26px; color: grey; }

/* SHARE */
.share { inline-block; float: right; }
.share ul { padding:0; margin: 0; list-style-type:none; font:normal 300 13px/32px 'Open Sans', sans-serif; }
.share ul i { margin:0 17px; margin-top: 17px; }
.share ul li { display:inline-block; }
.share ul li ul li a:hover { color:#FFA; }
.share ul li ul li { width: 140px; border: none; color: #FF0; padding: 3px; background:rgba(0,0,0,.9); }
.share ul li ul li a { padding-top:3px; padding-bottom:3px; line-height:24px; }
.share ul li { float: left;; }
.share ul li a { line-height:28px; min-width:130px; }
.share li{ position:relative; float:left; }
.share ul li ul, #bottom-options:hover ul li ul, #bottom-options:hover ul li:hover ul li ul{ 
    display:none; list-style-type:none; width: 140px; }
.share:hover ul, .share:hover ul li:hover ul, #bottom-options:hover ul li:hover ul li:hover ul { 
    display:block; }
.share:hover ul li:hover ul li:hover ul { 
    position: absolute; margin-left: 145px; margin-top: -22px; }
.share:hover ul li:hover ul { position: absolute; margin-top: 1px; top:39px; left: -80px; z-index:101; }
.dropdown ul { background:#000; }


/* carousel overlay scroll*/
.controls-wrapper {position: absolute; bottom: 5%; margin-left: auto; margin-right: auto; left: 0; right: 0; transform: scale(0.7);}
.scroll-wrapper {margin: 0 auto; text-align: center;}
.scroll-text { color: white;  font: 300 normal 20px/20px 'Raleway', serif !important; text-align: center; margin-bottom: 0px;}



/* OPEN HOUSE */
#openhouse { display: none; background: black; height: 100%; }
#openhouse img { width: 50%; display: block; margin: 0 auto; margin-top: 20vh; }
.open-houses-wrapper { width: 100%; }
.open-houses-wrapper p { font-size: 17px; color: white; font-weight: 600; font-family: 'Lato'; margin-top: 40px; text-align: center;  }

* VIDEO */
.video {text-align: center;}
.video-player { 
	padding-top: 56.25%; position: relative;
	border:solid 2px #FFF; box-shadow: 10px 10px 30px rgba(0,0,0,.3); background:#FFF;  margin-bottom: 45px;
}
.video-player div { position:absolute; top:0; right:0; bottom:0; left:0; }
.video-player div .content { position:relative; width:100%; height:100%; }

.vimeo-wrapper { height: 58vw; position: relative; margin-top: -15px; width: 100%;}
.vimeo-wrapper iframe { width:100%; height:100%; position: absolute; top: 0; left: 0;}
.video-cover-img { width: 100%; height: 88%; z-index: 99; position: absolute; top: 21; left: 0;} 
.video-cover-img2 { width: 100%; height: 100%; z-index: 99; position: absolute; top: 0; left: 0;} 
.play-img { position: absolute; top: 0; left: 0; width: 10%; height: 15%; z-index: 999; margin-left: auto;margin-right: auto; left: 0; right: 0; margin-top: auto; margin-bottom: auto; top: 0; bottom: 0;}
.video-title { font: 400 normal 28px/32px 'Lato', sans-serif; color:black; margin: 0 0 25px; text-align: center; display: inline-block; border-right: 2px solid #225ebf; padding-right: 16px; padding-left: 15px; }
.video-title-end { font: 400 normal 16px/32px 'Lato', sans-serif; color:black; margin: 0 0 25px; text-align: center; display: inline-block; padding-left: 15px; }
.video-title-first { font: 400 normal 16px/32px 'Lato', sans-serif; color:black; margin: 0 0 25px; text-align: center; display: inline-block; padding-right: 15px; border-right: 2px solid #225ebf; }
.video-title-none{ font: 400 normal 16px/32px 'Lato', sans-serif; color: black; margin: 0 0 25px; text-align: center; display: inline-block; }
.video-title:hover { color: #225ebf; }
.video-title-end:hover { color: #225ebf; }
.video-title-first:hover { color: #225ebf; }
.video-title-none:hover { color: #225ebf; }


/* WALKTHROUGH */
.wt.fx { height: 50vw !important; width: 100% !important; margin-bottom: 40px;}
.wt { position:relative; height: 50vw !important; margin-bottom: 40px;}
.wt .full-screen-helper .container-fluid { height:100%; }
.wt .content { box-shadow: 0px 3px 3px rgba(0,0,0,.1);  height:50vw !important; }
.wt .controls { position:absolute; bottom: -40px; right:0px; left:0px; height:40px; z-index:50; background:rgba(0,0,0,.3); }
.wt .controls ul { display:block; height:40px; list-style:none; clear:none; margin:0; padding:0; text-align:center;}
.wt .controls li { display:inline-block; margin:0; padding:0 10px; }
.wt .controls li a { display:inline-block; width:40px; height:40px; text-decoration:none; color:#FFF; }
.wt .controls a.prev { background-image:url('../layout2/ico-w/prev.png'); }
.wt .controls a.playpause { background-image:url('../layout2/ico-w/pause.png'); }
.wt .controls a.next { background-image:url('../layout2/ico-w/next.png'); }
.wt .controls a.fstoggle, .fswt { position:relative; top:0; right:0; 
	background:transparent url('../layout2/ico-w/full-screen.png') center center no-repeat; background-size:30px 30px; }
.wt .controls a:hover { background-size:32px 32px; }
.wt .controls a.playpause.paused { background-image: url('../layout2/ico-w/play.png'); }
.wt .controls a { background-position: center center; background-repeat: no-repeat; background-size:24px 24px; }


/* matterport */
.matterport {  padding: 0px 0 0px; height: 95%; width: 100% !important;
	background: white; background-size: cover;  border-bottom: 1px solid #cecece; display: none;}
.matterport iframe { height: 95%; width: 100% !important;}

/* cloudpano */
.cloudpano { padding: 0px 0 0px; height: 95%; width: 100% !important;
	background: white; background-size: cover;  border-bottom: 1px solid #cecece; display: none;}
.cloudpano iframe { height: 95%; width: 100% !important;}

/* iguide */
.iguide { padding: 0px 0 0px; height: 95%; width: 100% !important;
	background: white; background-size: cover;  border-bottom: 1px solid #cecece; display: none;}
.iguide iframe { height: 95%; width: 100% !important;}

/* eyespy */
.eyespy { padding: 0px 0 0px; height: 95%; width: 100% !important;
	background: white; background-size: cover;  border-bottom: 1px solid #cecece; display: none;}
.eyespy iframe { height: 95%; width: 100% !important;}



/* overview */
.overview { padding:30px 0 10px; padding-top: 0;  background: url('/virtual-tour-cvt/layout6/description-bkg.png'); background-size: cover; border-top: 1px solid black; }
.overview p { color: #656565; font: 300 normal 110%/1.6 'Lato', sans-serif; }
.overview ul { }
.overview li { font: 300 normal 14px/20px 'Lato',sans-serif; display: inline-block; float:none; 
	padding:0 15px; text-align:center; }
.overview li span { font-size: 200%; color: #225ebf; display: block; padding: 15px 0; }
.overview .mt-h3 { margin-top:24px; }
.description-img{ margin-top: 0px !important; border: 1px solid black; margin-top: 2% !important;}
.overview-left { text-align:justify; margin-bottom: 23px;}
.overview-right { position:relative; color:#000; } 
.overview-right p { margin-top:10px; }
.overview-right a { color:#000; }
.details-list { position:absolute; left:0; bottom:0; }
.details-list-center { text-align:center; margin-top: 40px;} 


/* features */
.features { position: relative; padding: 60px 0;
	background: url('/virtual-tour-cvt/layout6/features-bkg.png'); background-size: cover;   
	border-top: 1px solid #cecece; border-bottom: 1px solid #cecece; }
.features-container { text-align: center }
.features-right-wrapper {
	background-color: white; padding-top: 20px; padding-bottom: 10px;
	-webkit-box-shadow: 10px 10px 92px 7px rgba(0,0,0,0.3);
	-moz-box-shadow: 10px 10px 92px 7px rgba(0,0,0,0.3);
	box-shadow: 10px 10px 92px 7px rgba(0,0,0,0.3);
	float: none; margin: 0 auto;
	width: 55vw;
}
.features-right-wrapper ul { list-style-type:none; display: inline-block; padding-left: 0px; }
.features-right-wrapper ul li {
	color: black;
	font: 300 normal 15px/32px 'Lato', sans-serif;
	text-align: left;
	padding-left: 8px;
}


/* photo gallery */
.photos { background-color: white; position: relative; padding: 30px 0 0 0; margin-top: 0px; display: none;}
.photos-container { text-align: center }
.photos .image-container { width: 45%; margin:2%; display: inline-block; position: relative; }
.photos .image-container:after { padding-top: 56.25%; display: block; content: ''; }
.photos .image { position: absolute; top: 0; bottom: 0; right: 0; left: 0; cursor:pointer; 
	background:#EEE url('../layout2/lightbox/loading.gif') center center no-repeat; }
.photos .image a { display:block; width:100%; height:100%; }
.photos .image a:hover { border:solid 4px #225ebf; background:rgba(0,0,0,.2) url('../layout2/lightbox/zoom.png') center center no-repeat; background-size:48px 48px; }

.photos-mini { background-color: white; position: relative; padding: 30px 0 15px 0; margin-top: 0px; border-top: 3px solid black;}
.photos-mini  .image-container { width: 45%; margin:2%; display: inline-block; position: relative; }
.photos-mini  .image-container:after { padding-top: 56.25%; display: block; content: ''; }
.photos-mini  .image { position: absolute; top: 0; bottom: 0; right: 0; left: 0; cursor:pointer; 
	background:#EEE url('../layout2/lightbox/loading.gif') center center no-repeat; }
.photos-mini  .image a { display:block; width:100%; height:100%; }
.photos-mini  .image a:hover { border:solid 4px #225ebf; background:rgba(0,0,0,.2) url('../layout2/lightbox/zoom.png') center center no-repeat; background-size:48px 48px; }



.pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 9999999; -webkit-text-size-adjust: 100%;  -webkit-backface-visibility: hidden; outline: none;}
.pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; }
.pswp img { width: auto !important;}
.pswp--animate_opacity {  opacity: 0.001; will-change: opacity;  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--open { display: block; }
.pswp--zoom-allowed .pswp__img {  cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
.pswp--zoomed-in .pswp__img {  cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; }
.pswp--dragging .pswp__img {  cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; }
.pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #FFF; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; }
.pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top;  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp__bg { will-change: opacity;  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; }
.pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; }
.pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
.pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; }
.pswp__img--placeholder { -webkit-backface-visibility: hidden; }
.pswp__img--placeholder--blank { background: #222; }
.pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; }
.pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; }
.pswp__error-msg a { color: #CCC; text-decoration: underline; }
.pswp__button { width: 44px; height: 44px; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.75; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-box-shadow: none; box-shadow: none; }
.pswp__button:focus, .pswp__button:hover { opacity: 1; }
.pswp__button:active { outline: none; opacity: 0.9; }
.pswp__button::-moz-focus-inner { padding: 0; border: 0; }
.pswp__ui--over-close .pswp__button--close { opacity: 1; }
.pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(../layout2/pswp.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px; }
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {  
	.pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { background-image: url(../layout2/pswp.svg); }
	.pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; }
}
.pswp__button--close { background-position: 0 -44px; }
.pswp__button--share { background-position: -44px -44px; }
.pswp__button--fs { display: none; }
.pswp--supports-fs .pswp__button--fs { display: block; }
.pswp--fs .pswp__button--fs { background-position: -44px 0; }
.pswp__button--zoom { display: none; background-position: -88px 0; }
.pswp--zoom-allowed .pswp__button--zoom { display: block; }
.pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; }
.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; }
.pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; }
.pswp__button--arrow--left { left: 0; }
.pswp__button--arrow--right { right: 0; }
.pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 35px; height: 50px; width: 50px; position: absolute; }
.pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; }
.pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; }
.pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.pswp__share-modal { display: block; background: rgba(255, 255, 255, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity; }
.pswp__share-modal--hidden { display: none; }
.pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFF; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; -webkit-backface-visibility: hidden; will-change: transform; }
.pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000; text-decoration: none; font-size: 14px; line-height: 18px; }
.pswp__share-tooltip a:hover { text-decoration: none; color: #000; }
.pswp__share-tooltip a:first-child {  border-radius: 2px 2px 0 0; }
.pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px; }
.pswp__share-modal--fade-in { opacity: 1; }
.pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
.pswp--touch .pswp__share-tooltip a { padding: 16px 12px; }
a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFF; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; }
a.pswp__share--facebook:hover { background: #888; color: #FFF; }
a.pswp__share--facebook:hover:before { border-bottom-color: #888; }
a.pswp__share--twitter:hover { background: #888; color: #FFF; }
a.pswp__share--pinterest:hover { background: #888; color: #FFF; }
a.pswp__share--download:hover { background: #888; color: #FFF; }
.pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: white; opacity: 0.75; padding: 0 10px; }
.pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px; }
.pswp__caption small { font-size: 11px; color: #BBB; }
.pswp__caption__center { text-align: left; max-width: 420px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: #CCC; }
.pswp__caption--empty { display: none; }
.pswp__caption--fake { visibility: hidden; }
.pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; will-change: opacity; direction: ltr; }
.pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; }
.pswp__preloader--active { opacity: 1; }
.pswp__preloader--active .pswp__preloader__icn {  background: url(../layout2/preloader.gif) 0 0 no-repeat; }
.pswp--css_animation .pswp__preloader--active { opacity: 1; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
.pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0; }
.pswp--css_animation .pswp__preloader__cut {  position: relative; width: 7px; height: 14px; overflow: hidden; }
.pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0; }
@media screen and (max-width: 1024px) { 
	.pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; }
}
@-webkit-keyframes clockwise { 
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes clockwise { 
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes donut-rotate { 
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); }
	100% { -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes donut-rotate { 
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); }
	100% { -webkit-transform: rotate(0); transform: rotate(0); }
}
.pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550; }
.pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; }
.pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { -webkit-backface-visibility: hidden; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; }
.pswp__top-bar, .pswp__caption { background-color: black; }
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: black; }
.pswp__ui--idle .pswp__top-bar { opacity: 1; }
.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; }
.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right {  opacity: 0.001; }
.pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; }
.pswp__element--disabled { display: none !important; }
.pswp--minimal--dark .pswp__top-bar { background: none; }
.pswp__bg { background:black; }


/* panoramics */
.pano { padding-top: 0px; background: white; margin-top: 0px; height: 100%; width: 94vw; position: absolute; top: 0; margin-left: auto; margin-right: auto; left: 0; right: 0;}
.pano-select { width:100%; height:52px; overflow:visible; position:relative; background: rgba(0,0,0,0); z-index: 999999;}
.pano-select select { position:absolute; top:10px; right:10px; z-index: 999998; 
	-webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	-webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAAdUlEQVRIx2MQllCs+P//vwcQM1ATM4waPGrwqMEjzmBSweAxGMgu+k8YFJHjYsvFixfvwWUiSA6khtygsFmxYsV+dENBYiA5SsPYfvXq1QdghoLYIDFqRZ7jxo0bD4MwiE3tVOECxYM0uVHd4NFCaNTgQW4wAKpugq+9Zk7QAAAAAElFTkSuQmCC');
	background-position: 97% center; background-repeat: no-repeat;
	overflow: hidden; border: 1px solid #AAA; min-width: 150px;
	color: #555; font-size: 12px; padding: 5px 10px; text-overflow: ellipsis; white-space: nowrap; }
.pano-wrapper { margin-top:0px; height: 0; overflow: hidden; position: relative; height: 100vh;}
.pano-outline { position:absolute; top:0; right:0; bottom:0; left:0; padding:0px; background:#FFF; }
.pano-outline .content { position:relative; }
.pano .fstoggle { 
	display:block; position:absolute; right:20px; bottom:20px; width:32px; height:32px; 
	background:url('/virtual-tour-cvt/layout2/ico-w/full-screen.png') no-repeat; 
	background-position:center center; 
	background-size:90% 90%; z-index:2147483648;
	}
.pano .fstoggle:hover { background-size:100% 100%; }
.fspano { display:inline-block; width:44px; height:44px; position:absolute; right:0; z-index:10000; margin:-46px 4px 0 0; 
	background: rgba(0,0,0,.8) url('../layout2/ico-w/full-screen.png') center center no-repeat; background-size:32px 32px;
}
#pano { height: 100vh !important; } 
#krpano { height: 100vh !important; }


.pano-tray::-webkit-scrollbar {
	height: 0.9em;
}
 
.pano-tray::-webkit-scrollbar-track {
}
 
.pano-tray::-webkit-scrollbar-thumb {
    background-color: #225ebf;
    border: 3px solid transparent;
    border-radius: 25px;
    background-clip: content-box;
}

.pthumb:hover .pano-tooltip { color: white; }
.pthumb.active .pano-tooltip { color: white; }
.pano-tooltip {letter-spacing: 0.5px; font-family: 'Open Sans', sans-serif; display: block; position:absolute; background-color: rgba(0,0,0,0.0); color: #fff; text-align: center; padding: 2px 5px; font-size: 12px; font-weight: 500; bottom: 0; left: 0px; width: 100%}
.pano-tooltip.active { color: black; }


.pano-move-left {  height: 75px; padding-top: 10px; width: 7%; z-index: 9999; position: fixed; bottom: 0; left: 0; background: rgba(0,0,0,0.3);  }
.pano-move-right {  height: 75px; padding-top: 10px; width: 7%; z-index: 9999; position: fixed; bottom: 0; right: 0; background: rgba(0,0,0,0.3);  }
.pano-tray {  height: 75px; padding-top: 10px; width: 86%; display: flex; justify-content: center; align-items: center; z-index: 999; position: fixed; bottom: 0; left: 0; margin-left: 7%; background: rgba(0,0,0,0.3); overflow-y: hidden; overflow-x: scroll; }
.pano-tray-inner { display: flex; justify-content: center; align-items: center; transition: all .5s ease 0s; position: absolute; left: 0;}
.pano-tray a { width: 85px; margin-right: 20px; height: 53px; overflow: hidden; position: relative; outline: 1px solid white;} 
.pano-tray a:hover { outline: 1px solid white; overflow: hidden; }
.pano-tray img {width: 230%; height: 100%; position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto;}
.pano-tray-tab { position: absolute; top: -20px; right: 30px;; width: 20vw; background: rgba(255,255,255, 0.0); height:20px;}
.pano-title h1 { margin-top: 5px; margin-bottom: 0; color: white !important; padding-left: 8px; font: normal 400 16px/50px 'Lato', sans-serif; text-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;}
.pthumb-active {  outline: 1px solid white; }
.scroll-bar { height: 2vh; position: absolute; bottom: 0; left: 0; width:100%; background: white; z-index: 999999;}
.scroll-bar h1 { color: black; display: inline-block; margin-top: 0;}
.scroll-bar div { width: 100vw; display: flex; justify-content: center; align-items: center; }
.scroll-bar div i { color: white; font-size: 16px; margin-right: 7px;}



*/ PANO MENU */
.menu-pano { position:absolute; top:0; left: 0; height:60px; background: rgba(0,0,0,0);  z-index:999; text-shadow: none; border-bottom: 1px solid gray; border-top: 4px solid #225ebf; }
.navbar-collapse-pano{ max-width: 230px; background: rgba(0, 0, 0, 0) !important; margin-top: 13px; padding: 0px 15px 0px 0px; width: 60%; position: absolute; top: 30px; right: 0; margin-left: auto; margin-right: 20px; z-index: 999999 !important;}
.navbar-nav>li>a { font-size: 13px; color: black !important; }
.nav-pano > li{ text-align: right; height: 35px;}
.nav-pano > li:last-child a{ color: #225ebf !important;}

.top-video-frame {     top: -7%; left: -15%;  position: absolute;}
.top-wrapper { width: 100%; height: 100%; padding-top: 56.25%; overflow: hidden; position: relative; }
.no-click { top: -7%; left: -15%;  position: absolute; width: 130%; height: 100%; z-index: 4; }

.menu-pano * { color:rgba(255,255,255,.9) !important; text-decoration:none; font: normal 400 14px/50px 'Lato', sans-serif;  text-shadow: none !important;  -webkit-box-shadow: none !important; box-shadow: none !important; z-index:999;}
.menu-pano a:hover, .menu a:active, .menu a:link { background:none !important; } 
.menu-pano a:hover, .menu a.active { color:#225ebf !important;}
.menu-pano a.active { color#225ebf !important; padding: 5px 15px 5px 15px;}
.menu-pano h1 { margin:0; padding:0; color:#225ebf !important; width: 40%; margin-top: 10px;}
.menu-pano h1 span { color: white !important; font: normal 400 13px/50px 'Lato', sans-serif;  text-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; line-height: 1.2;}
.navbar-toggle span { background:#FFF; }
.navbar-collapse { background:#000; }
@media screen and (max-width: 500px) {
	.navbar-collapse { width: 90%; }
}
.pano-dropdown { right:0; text-align: right; background: rgba(0,0,0,0) !important; border: none !important;}
.pano-dropdown li { height: 20px;}



/* MAP */
.map { 
	padding:20px 0 0; 
	background: white; background-size: cover; 
	margin-bottom: 10px;
}
.map-container { 
	margin:20px 0 0; height:39vw; background:#FFF; position:relative;
	border-top:solid 1px #000; border-bottom:solid 1px #000; }
.amenities { height:100%; width:20%; max-width:250px; float:right; border-left:solid 1px #000; padding:10px; }
.amenities p { color:#666; padding:0; font: 300 normal 15px/32px 'Lato', sans-serif; float:left; }
.amenities select { border:solid 1px #AAA; padding:6px 10px; display:block; width:100%; font-size:110%; }
.amenities-list { height: calc(100% - 85px); margin-top:8px; overflow-y:auto; }
.amenities-list div { padding:8px 0 3px; border-bottom: solid 1px #CCC; cursor:pointer; }
.amenities-list div.active { background:#EAEAEA; }
#map1 { height:100%; }
#map2 { height:100%; display: none;}
#map3 { height:100%; display: none;}
.maps-buttons { float:none; margin:0 auto; display: inline-block; }

.contact { padding:10px 0;  margin-top: 15px; }
.contact * { color:#000; font-weight: 300; font-family: 'Lato', sans-serif; }
.contact i { color:#000; }
.contact h2 { font-weight:500; font-size: 19px;  }
.contact h2 small { font-weight:300; }

.contact .row { position:relative; }
.contact .col-md-6 { padding:0 4vw; display: block; vertical-align: middle; float: none; margin-top: 30px;}
.contact .row:before { content: " "; display:block; position:absolute; left:50%; width:0; height:100%;  }


.contact-message { padding:30px 0; background:#FFF; }
.contact-message .container { padding:10px 12%; }
.contact-message label { font-weight: 400; font-family: 'Lato', sans-serif; color:#black; }
.contact-message input, .contact-message textarea { border-radius:25px; border:1px solid grey; }

.brokerage-wrapper{ text-align: center; margin-top: 30px;}
.brokerage-wrapper h2 { font-size: 18px; }

.sound { color:#FFF; background:#225ebf; height:20px; }
.inner-sound-toggle { width:20px; height:20px; margin:15px 0; overflow:hidden; margin-top: 15px; margin-right: 8px;} 
.inner-sound-slider { display:none; }
.inner-sound-toggle { background:url("../layout7/sound-unmute.png") !important; background-size: 100% 100% !important;}
.inner-sound-toggle.muted { background:url("../layout7/sound-muted.png") !important; background-size: 100% 100% !important;}



.fs a.fstoggle { position:absolute; bottom:10px; right:10px; z-index:112300000; width:50px; height:50px;
	background: rgba(0,0,0,.3) url('../layout2/ico-w/full-screen.png') center center no-repeat; background-size:32px 32px; }
.fs a.fstoggle:hover { background-size:40px 40px; }

/* FOOTER */
.footer-wrapper { background-color: black; padding: 15px 0 10px 0; bottom: 0; left: 0; width: 100vw;}
.footer-section { text-align: center;}
.footer-section h1 { font: 300 normal 19px/32px 'Lato', serif !important; color: white; margin: 0 0 0;} 

#spexigeo { display: block;}
.spexigeo { width: 100vw}
.spexi-wrapper { width: 100%; }
.spexi-wrapper iframe { width:100%; height: 100%; position: absolute; top: 0; left: 0; margin-top: 0 !important;}
.back-btn-spexigeo { position: absolute; top: 0; right: 0; background: rgba(0,0,0,0.6); z-index: 999999; padding: 10px;}
.back-btn-spexigeo h1 {color: white; font-weight: 400; font-size: 20px; margin: 0; font-family: 'Raleway', serif;}
.back-btn-spexigeo:hover { background: rgba(70,132,207,0.7); }

.pano-loading { text-align: center; z-index: 99999999999; display: none;}
.pano-loading h1 { font: 400 25px/100% Lato; font-size: 30px; height: 90px; color: white; z-index: 99999999999; position: absolute; margin: auto; position: absolute; top: 0; left: 30px; bottom: 0; right: 0; text-shadow: 2px 2px black;}


/* LOADING SCREEN MAIN */
#loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: black; z-index: 999999; transition: all 0.8s ease; }
.loading-screen-inner p { color: white; font-size: 35px; font-weight: 600; width: 100%; text-align: center;  margin-bottom: 30px;}




.earth-wrapper{
	position: absolute;
	top: 0;
	left: 0;
}

.earth-wrapper > h1{
	position: absolute;
	top: 47%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%;
	transform: translate(-50%, -47%);
	z-index: 11;
	color: white;
	font-weight: 600;
	font-size: 16px;
}

#foo{
	position: absolute;
	top: 60%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%;
	transform: translate(-50%, -60%);
	z-index: 11;
	color: white;
}



/* bootstrap collapse breakpoint */
@media (max-width: 1130px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
	  margin-bottom: 12px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}


@media screen and (max-width: 416px) { 

	.features-right-wrapper {
		width: 85vw !important;
	}

	.pano {width: 100vw;}
	.pano-move-left { height: 85px; width: 7%; z-index: 9999; position: fixed; bottom: 0; left: 0; background: rgba(0,0,0,0.3); }
	.pano-move-right { height: 85px; width: 7%; z-index: 9999; position: fixed; bottom: 0; right: 0; background: rgba(0,0,0,0.3); }
	.pano-tray { height: 85px; width: 86%; display: flex; justify-content: center; align-items: center; z-index: 999; position: fixed; bottom: 0; left: 0; margin-left: 7%; background: rgba(0,0,0,0.3); overflow-y: hidden; overflow-x: scroll; }
	.pano-tray-inner { display: flex; justify-content: center; align-items: center; transition: all .5s ease 0s; position: absolute; left: 0;}
	.pano-tray a { width: 115px; margin-right: 20px; height: 60px; overflow: hidden; position: relative;} 
	.pano-tray a:hover { border: 2px solid white; overflow: hidden; }
	.pano-tray img {width: 230%; height: 100%; position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto;}
	.pano-tray-tab { position: absolute; top: -20px; right: 30px;; width: 20vw; background: rgba(255,255,255, 0.0); height:20px;}

	.pswp img { width: auto !important; margin-left: auto; margin-right: auto; left: 0; right: 0;}

	.matterport { height: 96%; width: 100%; }
	.matterport iframe { height: 96%; width: 100%;}

	.map-container { 
	margin:20px 0 0; height:80vw !important; background:#FFF; position:relative;
	border-top:solid 1px #000; border-bottom:solid 1px #000; }

	.btn-lux {  min-width:100px !important; }

	.carousel-inner { height:67vw; overflow:hidden; background:#000; }
	.head-carousel .item { overflow:hidden; }
	.head-carousel { height:67vw;  } 
	.carousel { position:relative; height:67vw; }


	.video-cover-img { height: 83% !important;} 
	.play-img { width: 17%; height: 26%; }

	.wt.fx { height: 66vw !important; width: 100% !important;}
	.wt { position:relative; height: 66vw !important; width: 100% !important;}
	.wt .full-screen-helper .container-fluid { height:100%; }
	.wt .content { box-shadow: 0px 3px 3px rgba(0,0,0,.1);  height:66vw !important; }
	.wt .controls { position:absolute; bottom: -40px; right:0px; left:0px; height:40px; z-index:50; background:rgba(0,0,0,0.7); }

}


/* Dark Settings */
.menu { background: white; }
.menu h1 span { color: black !important;}
.navbar-toggle .icon-bar { background-color: black; }
.navbar-collapse { background: white !important; }
.navbar-nav>li>a { color: black !important; }
body.theme2 .overview { background: black; }
body.theme2 .lux-title { color: white; }
body.theme2 .contact * { color: white; }
body.theme2 .contact { margin-top: 0; }
body.theme2 .photos { background-color: black; }
body.theme2 .floorplans {background-color: black; }
body.theme2 .footer-wrapper { border-top: 1px solid white; }
body.theme2 .btn { color: black; }
body.theme2 #select_id { color: black; }
body.theme2 .contact-message { background-color: black; }
body.theme2 .btn-lux { background-color: #225ebf; color: white; }
body.theme2 .map{ background-color: black; }



#ss-only { display: none; } 


/* loading dots */
.loading-text { color: white; }
@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.loading-text span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.loading-text span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.loading-text span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}