/*All Manage*/
#aph-body div{background-repeat:no-repeat;}
#aph-body {width:100%; height:100%; position:fixed; }


h1, h2, h3 {font-weight: 400; }
h1, h2, h3, a , p, body {font-family: monospace;}
p > b {text-decoration:underline;}

::-webkit-scrollbar {
  width: 1em;
}
::-webkit-scrollbar-track {
  background: white;
}
::-webkit-scrollbar-thumb {
  outline: 1px solid transparent;
  background-color: #094569;
  border: 3px solid white;
  border-radius: 25px;
}

::-webkit-scrollbar-thumb:hover{
background:#4eb25c;
}



a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}
body{
	background:#000;
	margin: 0;position:relative;
}


#rotateDeviceMessage {
    z-index: 99;
    position: absolute;
    background: white;
    width: 100%;
    height: 100vh;
    text-align: center;
    padding-top: calc(50vh - 70px);
    overflow: hidden;
}
#swipe {
position: absolute;
    bottom: 40px;
    z-index: 1;
    display: none;
    background: black;
    color: white;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.5;
}


#scrollPosition {
    display:none;
}
.toggleAudio {
    display:none;
    
}


/* Tooltips */

.ngb-tooltip{top:185px;}


/* .dialogue {
	background:white; 
	padding:10px; 
	border: 3px solid black; 
	position:absolute; 
	bottom: 10px; 
	z-index:9;
	width:150px;
} */

/* Button Movement Start*/
.headerbtn > button {
	background: rgba(10, 10, 10, 0.54);
	outline: none;
    width: 80px;
    height: 45px;
    color: #fff;
    border-radius: 8px;
    font: bold 20pt arial;
    -moz-border-radius: 4px;
    border-top: 1px solid #f5f5f5;
   /*  -webkit-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333; */
    -moz-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
   /*  box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333; */
    text-shadow: 0px 1px 0px #f5f5f5;
}


.headerbtn {

	position: fixed;
    bottom: 8%;
    right: 10%;
}

#upClick {display:none;}

#upClick:active, #downClick:active  {
	color: #100D0D;
	background: #ABABAB;
	margin: 7px 5px 3px;
/* 	-webkit-box-shadow:
		inset 0 0 25px #ddd,
		0 0 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333;
	box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333; */
	border-top: 1px solid #eee;
}

.journey-info, .gantry-tooltip, .digital-signage-tooltip, .high-mast-tooltip, .reliance-fresh-tooltip, .bank-tooltip, .kalighat-tooltip, .reebok-dhoot-tooltip, .xav-tooltip, .digitalhoarding-tooltip, .ledlight-tooltip{
position:absolute;
background: rgba(255, 255, 255, 0.8);
text-align:center;
border: 2px solid white;
line-height: 1.5;
padding:10px;
border-radius: 50%;

	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
	z-index: 9;
	
}

.journey-info:after, .gantry-tooltip:after, .digital-signage-tooltip:after, .high-mast-tooltip:after, .reliance-fresh-tooltip:after, .bank-tooltip:after, .kalighat-tooltip:after, .reebok-dhoot-tooltip:after, .xav-tooltip:after, .digitalhoarding-tooltip:after, .ledlight-tooltip{
    content: 'click';
    position: absolute;
    left: -10px;
    top: 22px;
}

@keyframes pulse {
	0% {
		transform: rotate(20deg);
		box-shadow: 0 0 0 0 rgb(255 100 50 / 80%);
	}

	70% {
		transform: rotate(-20deg);
		box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	}

	100% {
		transform: rotate(25deg);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

.journey-info{
top:140px;
}
.gantry-tooltip{
top:290px;
z-index:9;
}
.high-mast-tooltip {
    top: 160px;
    z-index: 1;
}
.reliance-fresh-tooltip {
    top: 250px;
	    z-index: 9;
}

.menu--label{
    position: absolute;
    z-index: 9999;
    top: 29px;
    font-size: 18px;
    left: 35px;
    color: #fff;
}

.digital-signage-tooltip {
    top: 160px;
}
.bank-tooltip {
    top: 234px;
}
.kalighat-tooltip {
    top: 140px;
}
.reebok-dhoot-tooltip {
    top: 120px;
}

.xav-tooltip{
    top: 140px;
}
.digitalhoarding-tooltip{
    top: 100px;
}

.ledlight-tooltip{
    top: 235px;
}
/* Button Movement End */
 
/*title screen 
.titleScreen{
	background:#0d3349;
	width:100%;
	height:100%;
	position:fixed;
	z-index:200 !important;
	top:0px;
	background-blend-mode: lighten;
}
*/


.scrollOff {
    overflow: hidden;
}

.menu-overlay nav ul{
	list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu-overlay nav ul li a{
	font-size: 2rem;
    line-height: 1.5;
    font-family: monospace;
    color: #fff;
    background: #ef7f1a;
    padding: 0 35px;
	transition:all .3s ease-in;
}

.menu-overlay nav ul li a:hover{
	color: #ef7f1a;
    background: #fff;
}

.overlay.menu {
    position: absolute;
    top: calc(50% - 304px);
    right: 0px;
    height: 80px;
    width: 150px;
}

.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1002;
}

.menu-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 50px;
  top: 0;
  right: 0;
  bottom: 1px;
}

/* ------------- */
.menu-line {
  background-color: #fff;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.25s ease-in-out;
}
.menu-line-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}
.menu-line-3 {
  bottom: 0;
}

.overlay.menu.open .menu-circle span{
	opacity:0;
}

.menu.open .menu-line-1 {
  transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
  opacity: 0;
}
.menu.open .menu-line-3 {
  transform: translateY(-7px) translateY(50%) rotate(45deg);
}

/* ------------- */

span.menu-circle span {
    position: absolute;
    top: calc(50% - 14px);
    font-size: 22px;
    left: 14px;
}

.menu-circle {
  background-color: #ef7f1a;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 0%;
  transform: scale(1);
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
  /* transform: scale(1.5); */
}
.menu.open .menu-circle {
  transform: scale(60);
}

/* ------------- */
.menu-overlay {
  background-color: #084569;
  color: #fff;
  height: 107%;
  width: 100%;
  position: fixed;
  text-align: center;
  transition: opacity 0.2s ease-in-out;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ------------- */
.info {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.overlay-info {
  text-align: center;
  color: #111825;
}

#popup-content strong{
	font-size: 16px;
    color: #084569;
    margin-bottom: -10px;
    display: block;
}

.tooltips--box{
	display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #9d9d9d;
    padding: 20px;
    border-radius: 5px;
	top: calc(50% / 1.5);
	left: 0;
    right: 0;
    margin: auto;
    max-width: 300px;
	z-index:1024
}

.tooltip--overlay{
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999;
    position: relative;
    opacity: .6;
	display:none;
}

.tooltips--box button{
	border: 0;
    margin-top: 27px;
    padding: 4px 15px;
    background: #ef7f1a;
    color: #fff;
    border-radius: 2px;
    display: block;
    float: right;
	transition: all .5s ease-in;
}

.tooltips--box button:hover{
	background:#084569;
}
/*credit screen */
.creditScreen{
	background:#000;
	width:100%;
	height:100%;
	position:fixed;
	z-index:200 !important;
	top:0px;
	color: white;
    text-align: center;
	display:none;
}
.creditmiddle {
    padding-top: calc(100vh/2 - 100px);
}

.logongb {
	background: white;
    position: fixed;
    padding: 10px 10px;
}
.logongb img {
    width: 100%;
    margin: auto;
    display: block;
}

.creditScreen a {
    color: white;
    text-decoration: underline;
}
.creditScreen a:hover {
    background: white;
    color: black;
}

.logongb {
    position: fixed;
    top: 0;
    z-index: 99;
    padding: 10px 30px;
    left: 0;
    width: 90px;
    margin: auto;
    right: 0;
}

.split {
    height: 100%;
    width: 50%;
    position: fixed;
    overflow-x: hidden;
    z-index: 1;
	cursor: pointer;
}

.left {
    left: 0;
    background-color: #0a4567;
    text-align: center;
}

.right {
    right: 0;
    background-color: #0f2f41;
    text-align: center;
}

.soundyesno {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.soundyesno img {
	height: 50px;
}

.soundyesno h3{
	color:white;
	text-transform: uppercase;
}

.split.left:hover {
    background: #073955;
}

.split.right:hover {
    background: #073955;
}

.ml-customize1{
	margin-left: -70px!important;
}

.scrollani{
	 position:fixed;
	 animation:scrollani 2s infinite;
    -webkit-animation:scrollani 2s infinite;
    -moz-animation:scrollani 2s infinite;
}




@-webkit-keyframes scrollani {
  0% {
    left:-20px;
  }

  50% {
    left:10px;
  }
  
  100% {
    left:-20px;
  }
}
@-moz-keyframes scrollani {
  0% {
    left:-20px;
  }

  50% {
    left:10px;
  }
  
  100% {
    left:-20px;
  }
}

/* Logo Static */
/* .toplogo {
	position:fixed;
    top: 20px;
    width: 105px;
    height: 68px;
    z-index: 9;
    display: block;
    background: url(../images/logo_full.png) no-repeat center center;
    left: 70px;
} */

.toplogo {
    position: fixed;
    top: 20px;
    width: 105px;
    height: 68px;
    z-index: 9;
    display: block;
    background: url(../images/logo-desk.png) no-repeat center center;
    left: 70px;
    background-size: contain;
}
   
     

.bounce {
  position:fixed;
  right:20%;
   animation:bounce 1s infinite;
  -webkit-animation:bounce 1s infinite;
  -moz-animation:bounce 1s infinite;
	margin-bottom: 10%;
}

@-webkit-keyframes bounce {
  0% {
    bottom:5px;
  }
  
  25%, 75% {
    bottom:15px;
  }
  
  
  50% {
    bottom:20px;
  }
  
  100% {
    bottom:0;
  }
}
@-moz-keyframes bounce {
  0% {
    bottom:5px;
  }
  
  25%, 75% {
    bottom:15px;
  }
  
  
  50% {
    bottom:20px;
  }
  
  100% {
    bottom:0;
  }
}


#Scene{
	position:fixed;
	width:100%;
	height:700px;
	margin-top:-350px;
	top:50%;
}


/* background layers for real looks */

.parallax-layer{
	position:fixed;
	height:700px;
	background-repeat:no-repeat;
}

#sky{
	background:url('../images/sky.jpg');
	background-repeat: no-repeat;
	width:6900px;
}

#road{
	background:url('../images/road2.png') left bottom;
	background-repeat: no-repeat;
	width:9000px; 
}

#road2 {
    width: 100%;
    position: absolute;
    height: 230px;
    background: #07091d;
    bottom: 100px;
}

#sun{
	position:absolute;
	background:url('https://www.ngbrothers.in/wp-content/themes/industrium-child/images/sun.png');
	background-repeat: no-repeat;
	width:194px;
	height:194px;
	/* left:180px; */
	left:70px; 
}

#sunFlare{position:absolute;width: 194px;height: 194px;}
#sfInner{background:url('https://www.ngbrothers.in/wp-content/themes/industrium-child/images/Sun_flare.png') center center;width:194px;height:194px; background-repeat: no-repeat;}


.sfglint{width:240px;height:240px;position:absolute;}
.sfg1{background:url('https://www.ngbrothers.in/wp-content/themes/industrium-child/images/sf_glint1.png');z-index:999; background-repeat: no-repeat;}
.sfg2{background:url('https://www.ngbrothers.in/wp-content/themes/industrium-child/images/sf_glint2.png');z-index:999; background-repeat: no-repeat;}
.sfglintsmall{width:40px;height:40px;position:absolute;z-index:999; background-repeat: no-repeat;}
.sfg3{background:url('https://www.ngbrothers.in/wp-content/themes/industrium-child/images/sf_glint3.png');z-index:999; background-repeat: no-repeat;}
.sfg4{background:url('https://www.ngbrothers.in/wp-content/themes/industrium-child/images/sf_glint4.png');z-index:999; background-repeat: no-repeat;}

#cloud{
	position:absolute;
	background:url('https://www.ngbrothers.in/wp-content/themes/industrium-child/images/clouds.png');
	background-repeat: no-repeat;
	width:2059px;
	height:347px;
}

.changeable {
    position: fixed;
    z-index: 9;
    bottom: 2%;
    left: 2%;
}

.changeable img {
    border: 4px solid #34345b;
    border-radius: 50%;
    opacity: 0.5;
}
img.selected {
    border-color: white;
    opacity: 1;
}



/* custom car codes */
.car {
	position:absolute;
	width: 280px;
	height:105px;
	background: url(https://www.ngbrothers.in/wp-content/themes/industrium-child/images/car.png) no-repeat;
	top:360px;
	left:300px;
	z-index: 999;
}

.car2 {
	position:absolute;
	width: 280px;
	height:105px;
	background: url(https://www.ngbrothers.in/wp-content/themes/industrium-child/images/car2.png) no-repeat;
	top:360px;
	left:131px;
	z-index: 999;
}	

.tyre1, .tyre2 {
	position: absolute;
    top: 50px;
    background: url(https://www.ngbrothers.in/wp-content/themes/industrium-child/images/tyre.png)no-repeat;
    width: 50px;
    height: 50px;
}
	
.tyre1 {
	left: 25px;
}

.tyre2 {
	right: 26px;
}

.carlight {
	background: url(../images/light.png);
	background-repeat: no-repeat;
    position: absolute;
    top: 29px;
    width: 70px;
    height: 43px;
    right: -50px;
    filter: grayscale(1);
	}

/*content*/
#fact {
	position:absolute;
	width:400px;
	height:auto;
	background:white;
	padding:10px;
	color:black;
}

/*Sign Boards*/

.gantry {
	width:443px;
	height:740px;
	position:absolute;
	top:111px;
}


#gantryunder{
	background: url(../images/gantry.png);
	background-repeat: no-repeat;
	width:253px;
	height:260px;
}


#gantryover{
	background: url(../images/gantry1.png);
	background-repeat: no-repeat;
	z-index: 9999;
	top: 100px;
	width:48px;
	height:600px;
	
}


#sign1 {
	background: url(../images/sign1.png);
	background-repeat: no-repeat;
	position:absolute;
	width:77px;
	height:93px;
	top: 280px;
}

#sign2 {
	background: url(../images/sign2.png);
	background-repeat: no-repeat;
	position:absolute;
	width:169px;
	height:350px;
	top: -66px;
}

/* High Mast*/
#mast{
	background: url(../images/high_mast.png);
	background-repeat: no-repeat;
	position:absolute;
	width:80px;
	height:257px;
	top: 123px;
} 
  
#barrier {
    background: url(../images/barrier.png);
    position: absolute;
    width: 546px;
    height: 44px;
    top: 328px;
    background-size: contain;
    z-index: -1;
}
  
#Digital_Hoarding {
    background: url(../images/digital-sign.gif);
	background-repeat: no-repeat;
    position: absolute;
    width: 144px;
    height: 175px;
    top: 198px;
    background-size: contain;
}  
  
#sine_bord{
	background: url(../images/bord-sine.png);
	background-repeat: no-repeat;
	position:absolute;
	width: 100px;
    height: 175px;
    top: 196px;
    background-size: cover;
}



/* changeable pump type with thumbnails */

#ppump{
    position: relative;
    width: 600px;
    height: 233px;
    top: 140px;
}

.thumbnails {
	list-style-type: none;
    position: absolute;
    top: -90px;
    left: -40px;
    width: 745px;
	z-index: 999999;
}

.thumbnails img {
    padding-left: 15px;
    width: 45px;
}

#main-img {
  position: absolute;
  top: 11px;
}
	
#more {
    top: -70px;
    float: left;
    position: absolute;
    top: 25px;
    left: -184px;
    background: white;
    padding: 6px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
	border-right: 2px solid #6d6d6d;
    opacity: 0.5;

}
#more p{
    margin: 0;
    font-weight: 600;
}

/* changeable showroom type with thumbnails */
#mall{
	background: url(../images/mall.png);
	position:absolute;
	width:1800px;
	height: 260px;
	top:124px;
}


/* changeable showroom type with thumbnails */
#showroom{
	position:absolute;
	width:800px;
	height:313px;
	top: 169px;
}

.showthumb {
	list-style-type: none;
	position:absolute;
	top: -100px;
	width: 700px;
	text-align: center;
		z-index: 999999;
}

.showthumb img {
	padding-left:30px;}


/* changeable showroom type with thumbnails */
#showroom2{
	position:absolute;
	width:800px;
	height:215px;
	top: 169px;
}

.showthumb2 {
	list-style-type: none;
	position:absolute;
	top: -100px;
	width: 700px;
	text-align: center;
		z-index: 999999;
}

.showthumb2 img {
	padding-left:30px;}

.fTSign {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 100px;
    left: 130px;
    background: rgb(223 187 81 / 54%);
}


.txtani {
	 position:fixed;
  -webkit-animation:textani 2s infinite;
  -moz-animation:textani 2s infinite;
}

@-webkit-keyframes textani {
  0% {
    left:-180px;
  }
  
 
  
  50% {
    left:-150px;
  }
  
  100% {
    left:-180px;
  }
}
@-moz-keyframes textani {
  0% {
    left:-180px;
  }
  
 
  
  50% {
    left:-150px;
  }
  
  100% {
    left:-180px;
  }
}


/* Factory Layout */

.factory {
	width:1384px;
	height:393px;
	position:absolute;
	top:100px;
}
/*add new css*/

.addscroll{
   margin: 0;
   font-size: 15px;
   font-family: monospace;
}


#factoryunder{
	background: url(../images/warehouse2.png);
	z-index: 99;
    background-repeat: no-repeat;
}


#factoryover{
	background: url(../images/warehouseover2.png);
	z-index: 999;
    background-repeat: no-repeat;
}


#mall-1{
	background: url(../images/mall-1.png);
	position:absolute;
	width:1000px;
	height: 260px;
	top:124px;
    background-repeat: no-repeat;
}  
	
#ngb_kol {
    background: url(../images/ngb_kol.png);
    position: absolute;
    background-size: 80%;
    width: 647px;
    height: 175px;
    top: 29%;
    background-repeat: no-repeat;
}

#metro {
    background: url(../images/metro.png);
    position: absolute;
    width: 498px;
    height: 170px;
    top: 215px;
    background-repeat: no-repeat;
}

#xavier{
	background: url(../images/xaviers.png);
	position:absolute;
	width:650px;
	height: 290px;
	top:81px;
    background-repeat: no-repeat;
}

#moon{
	background: url(../images/moon.png);
    width: 94px;
    height: 94px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 30px;
	
}
.night-cloud{
	background: url(../images/night-cloud.png);
    width: 262px;
    height: 87px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 60px;
	right: -60px;
}

#jaipur{
	background: url(../images/jaipur.png);
	position:absolute;
	width:1741px;
	height: 575px;
	top:0;
    background-repeat: no-repeat;
	background-size: cover;
}
	
#atms{
	position:absolute;
	width:200px;
	height: 260px;
	top:124px;
}
#atms .thumbnails {
	list-style-type: none;
	position: absolute;
	top: 40px;
	width: 286px;
	left: -10px;
	z-index: 999999;
}
#atms .thumbnails img {
	padding-left: 0;
	width: 25%;
	margin: 0 2%;
}

.factoryDoor{
	background:url('../images/warehouse_door.png') 0px -10px;
	width:629px;
	height:279px;
	position:absolute;
	z-index: 999;
	background-size: 100%;
}


#fDoor{
	position:absolute;
	top:212px;
	overflow:hidden;
	width:626px;
	height:279px;
		z-index: 999;
}

#fleet {
	background:url(../images/paste.png);
	background-repeat: no-repeat;
	width:145px;
	height:190px;
	position:absolute;
	top:300px;
	z-index: 999;
}


#iocl-jabalpura {
    background: url(../images/iocl-jabalpura.png);
	background-repeat: no-repeat;
    position: absolute;
    width: 617px;
    height: 230px;
    top: 143px;
}


#airplane {
    background: url(../images/airplane.png);
	background-repeat: no-repeat;
    position: absolute;
    width: 100px;
    height: 63px;
	background-size: contain;
	top: 123px;
	
}

#airport {
    background: url(../images/Airport.png);
	background-repeat: no-repeat;
    position: absolute;
    width: 517px;
    height: 152px;
	background-size: contain;
	top: 223px;
	
}


.navigation--arrow img{
	display:none;
}

.fSign{
	background:url('../images/fleet.png');
	background-repeat: no-repeat;
	width:180px;
	height:132px;
	position:absolute;
	top:70px;
		z-index: 999;
}


#fdesign{left:90px;}

/*Traffic*/
#traffic{
 	background:url(../images/the-car.png);
	background-repeat: no-repeat;
	width:800px;
	height:129px;
	position:absolute;
	bottom: 0px;
}
   
.flash {
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
	position: absolute;
    top: 20px;
    z-index: 9;
    right: 70px;
}

.flash {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

#haldia-refinery{
	background: url(../images/haldia-refinery.png);
	background-repeat: no-repeat;
    position: absolute;
    width: 495px;
    height: 252px;
    top: 120px;
}


.pace {
  pointer-events: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 180px;
  border: 0px;
  height: 1px;
  overflow: hidden;
  background:#1b1b1b;
}

.pace .pace-progress {
  box-sizing: border-box;
  transform: translate3d(0, 0, 0);
  max-width: 400px;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: grey;
}

.pace.pace-inactive {
  display: none;
}



 #preloader{
  width:100%;
  height:100vh;
  background:#101010;
  overflow:hidden;
  position:fixed;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  z-index:9;
  top: 0;
}  

.p {
	font-family: sans-serif;
    letter-spacing: 8px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}


@media screen and (max-device-width: 2400px) and (orientation: portrait) {
	
	.with-overlay {
		position: fixed;
		display:block;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		z-index: 9999;
		visibility: hidden;
		transition: all .3s ease-in-out;
	}
	.with-overlay.active {
		background: rgba(0,0,0,.7);
		opacity: 1;
		visibility: visible;
	}
	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
		max-width: calc(100% - 20px);
		width: 270px;
		text-align: center;
		background: #424242;
		text-transform: none;
		padding: 30px;
		font-size: 16px;
		line-height: 24px;
		font-weight: 300;
		border-radius: 3px;
		transition: all .2s linear;
		z-index: 999999;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, .1);
	}
	.popup:not(.active) {
		transform: translate(-50%, calc(-50% + 10px));
		opacity: 0;
		visibility: hidden;
		z-index: 0;
	}
	.popup-box h3 {
		color: #fff;
	}

}

@media screen and (max-device-width: 2440px) and (orientation: landscape) {

	/* .overlay.menu { */
		/* top: calc(50% - 206px); */
		/* height: 50px; */
		/* width: 110px; */
	/* } */
	/* .menu--label { */
		/* top: 14px; */
		/* left: 18px; */
	/* } */
	.with-overlay2 { 
		position: fixed;
		display:block!important;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		z-index: 9999;
		visibility: hidden;
		transition: all .3s ease-in-out;
	}
	.with-overlay2.active2 {
		background: rgba(0,0,0,.7);
		opacity: 1;
		visibility: visible;
	}
	.popup2 {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
		max-width: calc(100% - 20px);
		width: 270px;
		text-align: center;
		background: #424242;
		text-transform: none;
		padding: 30px;
		font-size: 16px;
		line-height: 24px;
		font-weight: 300;
		border-radius: 3px;
		transition: all .2s linear;
		z-index: 999999;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, .1);
	}
	.popup2:not(.active2) {
		transform: translate(-50%, calc(-50% + 10px));
		opacity: 0;
		visibility: hidden;
		z-index: 0;
	}
	.popup-box2 h3 {
		display: flex;
		align-items: center;
		justify-content: center;
		color:#fff;
	}
	#btnRefresh{
		cursor:pointer;
	}
	.navigation--arrow img{
		display: block!important;
		position: fixed;
		top: 25px;
		width: 30px;
		right: 24px;
	}
	.navigation--arrow2 img{
		display: block!important;
		position: fixed;
		width: 30px;
		right: 24px;
		bottom: 125px;
		rotate: 180deg;
		bottom: 24px;
	}
	
}
@media(max-width:1000px)
{
	#showroom2
	{
		display:none;
	}
	.fTSign
	{
		font-size: 1.5rem;
        top: 40px;
        left: 31px;
	}
	#fdesign
	{
		top: 27px !important;
		left: 87px !important;
		width: 86px !important;
	}
	.showthumb img
	{
		width: 44px !important;
		padding-left: 19px;
	}
	.thumbnails img
	{
		width: 33px !important;
	}
	.factoryDoor {
		width: 249px !important;
		height: 109px !important;
	}
	#fDoor.fDoor1, #fDoor.fDoor2 {
		width: 249px !important;
        top: 332px !important;
	}
	#fDoor
	{
		left: 268px;
	}
	#road2
	{
		left: 5100px;
		bottom: 1px;
	}
	#road
	{
		width: 8000px;
		bottom: -95px;
	}
	#factoryover {
		background-size: 100%;
		width: 550px;
		top: 288px !important;
	}
	#factoryunder
	{
		top: 288px !important;
	}
}