/* CSS
.loading-box {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:20px; width:200px; text-align:center;}
.loading-box .circles {padding-top:10px;}
.loading-box .circles i {animation:scaleBounce .8s alternate infinite;display:inline-block; margin:0 5px; width:15px; height:15px; background:#ffffff; border-radius:50em;}
.loading-box .circles i:nth-child(2) {animation-delay:.3s;}
.loading-box .circles i:nth-child(3) {animation-delay:.5s;}
.loading-box .circles i:nth-child(4) {animation-delay:.7s;}
.loading-box .circles i:nth-child(5) {animation-delay:.9s;}
.loading-box p {margin-top:20px; font-size:30px;color: #ffffff} */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");

.video {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:0px; width:640px; text-align:center;}

.video.closeVideo
{
	position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:0px; width:640px; text-align:center;
}

.video.closeVideo.hide
{
    display: none;
}

video.hide {
	display: none;
}  

@keyframes scaleBounce{
	from {transform:scale(.8)}
	to {transform:scale(1.7)}
}
@media (max-width: 768px) {
    .loading-box p{
		font-size:10px;
    }

   .loading-box .circles i {
		width:5px;
		height:5px; 
		margin: 2px;
	}
	.video {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:0px; width:240px; text-align:center;}

}
@media (max-width: 1920px) {
	.loading-box p{
		font-size:30px;
    }

   .loading-box .circles i {
		width:15px;
		height:15px; 
		margin: 4px;
	}
	.video {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:0px; width:640px; text-align:center;}

}

/*
.tour { position: fixed;
	left:5%; top:92%;
	z-index:100;
	}
	
*/

.loading-box{
    text-align: center;
    background-color: rgba(0,0,0,0);
	overflow: hidden;
	position:fixed; 
	left:50%; top:50%; 
	z-index:100; 
    transform:translate(-50%, -50%); padding:20px; 
    width:100%;
    height: 100%; 
}

.box:nth-child(2n-1){
    background-color: rgba(0,0,0,0);
}

.box{
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
    /*margin:0 -4px -5px -2px;*/
    transition: all .2s ease;
}



/* MEDIA QUERIES */
@media (max-width: 700px){
    .box{
        width: 50%;
    }

    .box:nth-child(2n-1){
        background-color: inherit;
    }

    .box:nth-child(4n),.box:nth-child(4n-3) {
        background-color: rgba(0,0,0,0.05);
    }

}

@media (max-width: 420px){
    .box{
        width: 100%;
    }

    .box:nth-child(4n),.box:nth-child(4n-3){
        background-color: inherit;
    }

    .box:nth-child(2n-1){
        background-color:rgba(0,0,0,0.05);
    }

}
.hourglass{
    position: relative;
    height: 80px;
    width: 80px;
    top: 28%;
    top: -webkit-calc(50% - 43px);
    top: calc(50% - 43px);
    left: 35%;
    left: -webkit-calc(50% - 43px);
    left: calc(50% - 43px);
    border: 3px solid #fff;
    border-radius: 80px;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-animation: hourglass 2s ease-in-out infinite;
            animation: hourglass 2s ease-in-out infinite,glower 2s ease-in-out infinite;
}

.hourglass:before{
    content: "";
    position: absolute;
    top:8px;
    left: 18px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 37px 22px 0 22px;
    border-color: #fff transparent transparent transparent;
}
.hourglass:after{
    content: "";
    position: absolute;
    top: 35px;
    left: 18px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 22px 37px 22px;
    border-color: transparent transparent #fff transparent;
}

@-webkit-keyframes hourglass{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(180deg);}
}

@keyframes hourglass{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(180deg);}
}
.threetext {
    position: fixed;
    color: #fff;
    transform: translate(50%,50%);
    animation: glower 2s ease-in-out infinite;
   
}
@keyframes glower {
    40% {
      text-shadow: 0 0 8px #fff;
    }
  }