@charset "UTF-8";
/* CSS Document */

	/* wheeler library interactive */
	.interActiveBox {
		max-width: 800px;
		height: auto;
		margin: 0 auto;
		display: block;
	}
	
	#startWheeler {
		display: block;
	}
	
	#goBtn {
		width: 130px;
		height: 34px;
		display: block;
		background-color: #FFCA00;
		border: 3px solid #fff;
		border-radius: 6px;
		font-size: 22px;
		font-family: 'robotoblack', sans-serif;
		text-align: center;
		line-height: 1.6;
		position: absolute;
		margin-top: 230px;
		margin-left: 570px;
	}
	
	#backBtn {
		width: 120px;
		height: 22px;
		display: block;
		background-color: #E1D39E;
		border: 2px solid #fff;
		border-radius: 3px;
		font-size: 22px;
		font-family: 'robotoblack', sans-serif;
		text-align: center;
		line-height: 0.95;
		position: absolute;
		margin-top: 500px;
		margin-left: 10px;
	}
	
	#goBtn:hover, #backBtn:hover {
		background-color: rgba(0,149,250,1.00);
		color: white;
	}
	
	#menuWheeler {
		width: 120px;
		height: auto;
		display: none;
		position: absolute;
		margin: 10px 0 0 10px;
		z-index: 200;
		font-size: 20px;
		font-family: 'robotoblack', sans-serif;
		text-align: center;
		line-height: 0.95;
}
	
	#insideWheeler {
		display: none;
		z-index: -200;
	}
	
	.floorRoof, .floor2, .floor1, .floorB {
		width: inherit;
		height: auto;
		display: block;
		background-color: #E1D39E;
		border: 2px solid #fff;
		border-radius: 3px;
		margin-bottom: 12px;
	}
	
	.floorRoof:hover, .floor2:hover, .floor1:hover, .floorB:hover {
		background-color: rgba(0,149,250,1.00);
		color: white;
	}
	
	.interActiveBox img {
		width: 100%;
		border: 1px solid #858484;
	}
	
	.inter1 {
		display: block;
	}
	.inter2, .inter3, .inter4 {
		display: none;
	}
	/* end wheeler interactive */
	
	/* interactive links */
	.webFrame {
		width: 90%;
		display: block;
		margin: 0 auto;
}
	
	.webBoxL, .webBoxR {
		width: 250px;
		height: auto;
		display: block;
		float: left;
	}
	.webBoxR {
		float: right;
	}
	.webBoxL img, .webBoxR img {
		width: 100%;
		height: auto;
		display: block;
		border: 1px solid #AAAAAA;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	.webBoxL img:hover, .webBoxR img:hover {
		opacity: 0.5;
	}
	.webBoxL p, .webBoxR p {
		width: 100%;
	}
	/* end interactive links */
	
	/* animation */
	#introImage {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	}

	#canvas {
	width: inherit;
	}
	/* end animation */
	
	/* videos */
	.aVideo {
		max-width: 550px;
		height: auto;
		display: block;
		margin: 40px auto;
		padding: 20px;
		border: 1px solid #4c4c4c;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	
	/* video 2 */
	#vidContainer2 {
		max-width: 550px;
		height: auto;
		margin: 0 auto;
		padding: 20px 20px 10px 20px;
		border: 3px solid #fff;
		border-radius: 20px;
		background-color: #C4C4C4;
	}
	
     #myVideo {
		 width: 100%;
		 height: auto;
		 display: block;
          border: 3px solid #fff;
			-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
			-moz-box-sizing: border-box;    /* Firefox, other Gecko */
			box-sizing: border-box;         /* Opera/IE 8+ */
          border-radius: 10px;
          -moz-transition: all .5s ease-in-out;
          -webkit-transition: all .5s ease-in-out;
          -o-transition: all .5s ease-in-out;
          -ms-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
       }

       #controls2 {
			display: flex;
  			overflow: auto;
			flex-flow: row nowrap;
			justify-content:space-evenly;	
			align-content:space-around;
		   margin: 15px auto 15px auto;
       }
	
	button {
		display: block;
          padding: 5px;
          border-radius: 7px;
          width: 65px;
          background-color: #fff;
		border: none;
	}
	button:hover {
         box-shadow: 0 0 20px #FFFFFF;
	}

	#progressbar{
          width: inherit;
          height: 20px;
          margin: 10px 0;
          border-radius: 20px;
          background-color: #fff;
      }
        #loadingprogress{
         /* border */
          border-radius: 20px;
          /* initial size */
          height: 20px;
          width: 0;
          background-color: #0086FF;
        }
/* end video2 */	

	
/* responsive */
@media only screen and (max-width: 984px) {
	#goBtn, #backBtn {
		margin-top: 23%;
		margin-left: 55%;
		width: 15%;
		height: auto;
		font-size: 2.4vw;
	}
	#backBtn {
		width: 12%;
		margin-top: 48%;
		margin-left: 1%;
	}
	#menuWheeler {
		width: 35%;
		font-size: 2vw;
	}
}

@media only screen and (max-width: 840px) {
	.webBoxL, .webBoxR {
		float: none;
		max-width: 250px;
		margin: 0 auto 40px auto;
	}
}

@media only screen and (max-width: 767px) {
	#goBtn {
		margin-top: 27%;
		margin-left: 70%;
		width: 15%;
		font-size: 2.4vw;
	}
	#backBtn {
		margin-top: 60%;
	}
	.webFrame {
		width: 100%;
	}
	
	video {
		width: 90%;
	}
}