@font-face {
  font-family: myFont;
  src: url('Gotham-Light.otf');
}
body,html{
	font-family:Roboto;
	padding:0px;
	margin:0px;
	height:100%;
	background-color:#0a0a0a;
	color:white;
}
.illu-title{
	font-family:myFont;
	font-size:75px;
	color:#FFF;
	line-height:100px;
}
.illu-header{
	font-family:myFont;
	font-size:36px;
	color:red;
	text-transform:uppercase;
	line-height:100px;
}
.illu-sms{
	font-family:myFont;
	font-size:18px;
	color:#FFF;
	text-decoration:underline solid red;
	line-height:24px;
}
#illu-form{
  width:1100px;
  margin:0px auto;
  background-color:#000000;
  position:relative;
  border-radius: 4px;
  box-shadow:0 0 0.5cm rgba(0,0,0,0.5);
  color:white;
  padding:20px 0px;
}
#illu-preview{
	display:none;
}
path{
	cursor:pointer;
	opacity:0;
}
path:hover{
	opacity:0.5;
}
.illu-navbar{
  background-color: #000000;
  overflow: hidden;
  position: sticky;
  width: 100%;
  box-shadow: 0px 1px 1px #000000;
  height:50px;
  font-size:12px;
  text-transform:uppercase;
  top:0px; 
  left:0px;
  right:0px;
  line-height:50px;
  z-index:1;
  text-align:center;
  padding:10px;
}
.illu-navbar img{
	height:60px;
}
.illu-maps, canvas{
	height:auto;
	width:100%;
	margin:0px auto;
	background-size:100% auto;
}
.illu-maps{
	position:relative;
}
.illu-maps img{
	width:100%;
	height:auto;
	min-height:100%;
	vertical-align:middle;
	object-fit:cover;
	opacity: 0;
}
canvas{
	position: absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
}
#illuzion-1st-floor-overlay{
	background-image: url('https://www.illuzionphuket.com/wp-content/uploads/tables/3d/illuzion-vip-tables-map-1st-floor.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
#illuzion-2nd-floor-overlay{
	background-image: url('https://www.illuzionphuket.com/wp-content/uploads/tables/3d/illuzion-vip-tables-map-2nd-floor.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
#illuzion-vip-a{
	background-image: url('https://www.illuzionphuket.com/wp-content/uploads/tables/3d/illuzion-vip-a-tables.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
#illuzion-vip-b{
	background-image: url('https://www.illuzionphuket.com/wp-content/uploads/tables/3d/illuzion-vip-b-tables.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
#illuzion-vip-c{
	background-image: url('https://www.illuzionphuket.com/wp-content/uploads/tables/3d/illuzion-vip-c-tables.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.illu-content{
  margin:0px;
  padding:0px;
  text-align:center;
  position:relative;
  z-index:0;
}
#order_id{ color:white;}

.illu-container{
	width:80%;
	position:relative;
	margin:0px auto;
}
.illu-search-box{
  font-size:25px;
  width:90%;
  margin:10px auto;
  color:#FFFFFF;
  padding:0px;
  text-align:center;
  background-color:black;
  display:block;
  list-style-type: none;
  padding: 0px;
}
.illu-search-box:after{
  content: "";
  display: table;
  clear: both;
}
.illu-search-box li, button{
	width:49%;
	line-height:50px;
	text-align:center;
	color:white;
	cursor:pointer;
	float:left;
	margin-top:20px;
	border:white solid 1px;
	margin:-1px;
}
.illu-search-box li:hover,.illu-search-box li.active, button:hover{
	background-color:red;
	border:red solid 1px;
}
button{
	color:white;
	background-color:red;
	float:none;
}
button:hover{
	background-color:white;
	color:red;
}

.illu-form-box{
	float:left;
	width:20%;
	text-align:left;
	//border:1px #666666 solid;
	margin:0px;
	//margin-left:-11px;
	//padding-right:9px;
	//background-color:white;
}


.illu-form-box span{
	border:1px #666666 solid;
  line-height:50px;
  font-size:20px;
  padding:0px;
  background-color:black;
  display:block;
  margin:10px 10px 10px 0px;
}
.illu-form-box input, .illu-form-box textarea{
  height:50px;
  line-height:50px;
  background-color:black;
  display:block;
	width:90%;
	font-size:20px;
	margin:0px;
	border:0px;
	padding:0px 5px;
	color:white;
}
.illu-form-box input:focus{
	border:0px;
}
.illu-form-box label{
	color:white;
	font-size:16px;
	padding-left:5px;
}
.illu-form-box select{
  width:100%;
  height:50px;
  line-height:50px;
  font-size:20px;
  border:0px #666666 solid;
  padding:0px 5px;
  background-color:black;
  color:white;
}
.illu-form-box option{
  width:100%;
  height:50px;
  line-height:50px;
  font-size:20px;
  border:1px #666666 solid;
  padding:15px 5px;
}
.illu-search-box:after{
  content: "";
  display: table;
  clear: both;
}
.long{
	width:30%;
}
.half{
	width:50%;
}
.summary{
	text-align:right;
	font-size:24px;
}
.summary span{
	font-size:24px;
	display:initial;
}
.remark{
	font-size:14px;	
	line-height:10px;
	display:initial;
}
#min,#topay{border:0px;font-size:40px;	display:initial;}
.formCus{
	display:none;
}
#illu-result-box{
	position:absolute;
	text-align:right;
	right:10%;
	top:0px;
	font-size:30px;
}
#illu-result-box span{
	color:red;
}
#illu-result{
  //border:1px #666666 solid;
  line-height:50px;
  font-size:20px;
  padding:10px;
  color:#FFFFFF;
  background-color:black;
  display:block;
  margin:0px auto;
  height:auto;
}
#illu-result ul{
  list-style-type: none;
  padding:0px;
  margin:0px;
  color:white;
  width:350px;
  margin:0px auto;
}
#illu-result ul li{
	display:block;
	overflow:hidden;
	text-align:center;
	cursor:pointer;
	margin:5px auto;
	border:1px dotted gray;
	padding:5px;
}
#illu-result ul li img{
	height:100px;
	float:left;
}
#illu-result ul li span{
	font-size:20px;
	float:right;
	width:240px;
	text-align:right;
}
#illu-result ul li span.price{
	font-size:30px;
}
#illu-result ul li span.details{
	font-size:14px;
}
#illu-result ul li:hover{
	background-color:gray;
}

#illu-result-left,#illu-result-right{
	height:auto;
	color:white;
	float:left;
	width:49%;
	padding-top:20px;
	background-color:black;
}
#illu-result-right{
	float:right;
}
#illu-result-left input,#illu-result-right input{
	background-color:black;
}
a{
	color:white;
	text-decoration:none;
}
a:hover{
	color:white;
	text-decoration:underline;
}
#illu-qr{
	width:720px;
	height:auto;
}

@media screen and (max-width: 1100px) {
  #illu-form{
	  width:100%;
	}
}


@media screen and (max-width: 800px) {
  .illu-form-box{
	float:none;
	width:90%;
	margin:0px auto;
	padding:0px;
  }
  .long, .half{
	width:90%;
  }
  .summary{
		text-align:center;
	}
}