body, html{
	/*font-size:15px;*/
	font-size:22px;
	/*background:#efdfce;*/
	font-family: 'FuturaBook', 'Noto Sans TC', 'Noto Sans SC', Verdana, sans-serif;
	color:#8a0000;
}
#wrapper{
	min-height:100vh;
}
.desktop{
}
.mobile{
	display:none;
}
.cust-width{
	width:100%;
	max-width:980px;
	margin:0 auto;
	/*background:#ffffff;*/
}
.cust-width2{
	width:100%;
	max-width:800px;
	margin:0 auto;
}
.cust-width3{
	width:100%;
}
.orange-line{
	height:11px;
	background:#fed385;
	margin:17px 0px 28px;
	display:none;
}
.select2-container--default .select2-selection--single{
	padding:0.375em 0.75em;
	height:41px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
	height:41px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	padding:0 20px 0px 4px;
}
.clickable{
	cursor:pointer;
}
.about-header{
	font-size:26px;
	padding:0;
	font-weight:bold;
	color:#888;
}
.about-content{
	font-size:18px;
	padding-bottom:20px;
	color:#888;
}
.about-button{
	font-size:18px;
	line-height:46px;
	color:#e38876;
	background-color:#ffd9dd;
	letter-spacing:2px;
	width:60%;
	font-weight:bold;
}
.about-button img{
	width:50px;
}
.about-button .desc{
	padding:0 10px;
	padding-left:50px;
}
.about-button .dragImgCover{
	position:relative
}
.about-button .dragBar{
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:0px;
	background-color:#e38876;
}
.about-button .dragImg{
	position:absolute;
	top:0px;
	left:0px;
	cursor: e-resize;
}
.about-button .dragImg img{
	float:left;
	border:0px;
}
.about-details{
	font-size:20px;
	padding-bottom:20px;
	font-weight:bold;
	color:#e38876;
}
.about-countdown{
	font-size:20px;
	padding-bottom:20px;
	font-weight:bold;
	color:#a16064;
}
.about-expiry{
	font-size:20px;
	padding-bottom:20px;
	color:#888;
}
.about-code{
	border:1px solid #dbc5ba; 
	font-size:22px;
	line-height:46px;
	color:#f28775;
	width:60%;
}
.about-copy{
	font-size:22px;
	line-height:46px;
	color:#FFF;
	background-color:#f28775;
	letter-spacing:2px;
	width:60%;
}
.about-shop{
	font-size:22px;
	line-height:46px;
	color:#FFF;
	background-color:#586973;
	letter-spacing:2px;
	width:60%;
}
.about-shop a{
	color:#FFF;
	text-decoration:none;
}
.about-redeemed{
	font-size:16px;
	line-height:22px;
	color:#FFF;
	background-color:#999;
	width:60%;
	padding:5px 10px;
}

.code-details{
	font-size:20px;
	font-weight:bold;
	color:#e38876;
}
.code-clock{
	font-size:100px;
	line-height:120px;
	letter-spacing:-10px;
	color:#000;
}
.code-scroll{
	font-size:18px;
	line-height:22px;
	padding:10px;
	width:60%;
	background-color:#f48572;
	color:#FFF;
	margin:auto;
}
.code-desc{
	font-size:18px;
	font-weight:bold;
	padding-bottom:10px;
	color:#b08886;
}
.code-expiry{
	font-size:20px;
	padding-bottom:10px;
	color:#888;
}

.terms-header{
	font-size:22px;
	padding:0;
	font-weight:bold;
	color:#888;
}
.terms-content{
	font-size:12px;
	padding-bottom:5px;
	color:#888;
}
.terms-details{
	font-size:12px;
	padding-bottom:5px;
	color:#888;
	text-align:left;
}
.greyLine{
	width:90%;
	margin:auto;
	height:1px;
	background-color:#888;
}
.form{
	font-size:25px;
}
.form-header{
	font-size:38px;
}
.form .btn-submit{
	font-size:1.2rem;
	padding:0.5rem 7rem;
}
.errorModal .modal-body, .registeredModal .modal-body, #loadingMsg, #successMsg{
	font-size:25px;
	text-align:center;
}

.about{
	padding-left:15px;
	padding-right:15px;
}

.video-background{
	position:relative;
}

.video{
	position:absolute;
	top:9%;
	left:9%;
	width:81.875%;
}

.video-frame{
	position:relative;
	width:100%;
	height:100%;
}

.video-play{
	position:absolute;
	top:0px;
	left:0px;
	background:url(../image/play.png) no-repeat;
	background-position:center center;
	background-size: 96px 96px;
	width:100%;
	height:100%;
	cursor:pointer;
}

.header{
	position: relative;
}

.header .content{
	position: absolute;
	top:18%;
	left:28%;
}

.header .content .content-header{
	color:#006fb7;
	font-size:44px;
	line-height:1;
	padding-left:17%;
}

.header .content .text-blue{
	color:#006fb7;
}

.header .content .content-sub-header{
	font-size:27px;
	font-weight:bold;
	padding-top:3%;
}

.header .content .content-text{
	font-size:15px;
}

.form-check .form-check-label a, .form-check .form-check-label a:hover{
	color:inherit;
	text-decoration:underline;
}

.btn-submit{
	/*background:#006eb9;
	color:#ffffff;*/
	/*font-size:1.46rem;*/
	font-size:0.9rem;
	padding:0.5rem 9rem;
	border:1px solid #8a0000;
	color:#8a0000;
}

.btn-submit:hover{
	/*color:#ffffff;*/
	color:#8a0000;
	opacity:0.8;
}

.btn-submit:disabled:hover, .btn-submit.disabled:hover{
	opacity:0.65;
}


.btn-close{
	font-size:26px;
	line-height:1;
	padding:0;
	margin:0;
}

.tnc-table{
	border-spacing:0px;
    padding:0px;
    font-size:13px;
}
.tnc-table td{
	vertical-align:top;
}
.tnc-table sup{
	font-size:12px;
}

#ui-datepicker-div, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{
	font-family: 'FuturaBook', Verdana, sans-serif;
}

.overflow-x-hidden{
	overflow-x:hidden;
}

/* Old shadow dom for play button */
video::--webkit-media-controls-play-button {
    display: none!important;
    -webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works */
video::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none;
}

/*
form label{
	font-size:.875rem;
	padding:.25rem 0;
}

form label.form-check-label{
	padding:0;
}
*/

.font-small{
	font-size:0.85rem;
}
.font-large{
	font-size:1.15rem;
}

.was-validated .invalid-feedback.has-validation{
	display:block;
}

.was-validated .invalid-feedback.has-validation.form-check-msg{
	display:inline-block;
	width:auto;
	margin:0 0 0 0.3rem;
}


.btn-redemption{
	/*border:4px double #000000;*/
	border:4px double #8a0000;
	font-size:1.46rem;
	padding:0.5rem 9rem;
	color:#8a0000;
}

.btn-redemption:hover{
	opacity:0.8;
}

.btn-redemption.redeemed{
	border:4px double #ffffff;
	/*background:#000000;*/
	background:#8a0000;
	color:#ffffff;
	cursor:default;
}
.btn-redemption.redeemed:hover{
	opacity:1;
}

.form-control.is-valid, .was-validated .form-control:valid,
.form-control.is-invalid, .was-validated .form-control:invalid{
	background-image:none;
}

.form-check-input.is-valid~.form-check-label.form-check-label-black, .was-validated .form-check-input:valid~.form-check-label.form-check-label-black, 
.form-check-input.is-invalid~.form-check-label.form-check-label-black, .was-validated .form-check-input:invalid~.form-check-label.form-check-label-black{
	/*color:#000000;*/
	color:#8a0000;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'FuturaBook', 'Noto Sans TC', 'Noto Sans SC', Verdana, sans-serif;
}

.form-control.is-valid, .was-validated .form-control:valid{
	/*border-color:#ced4da;*/
	border-color:#8a0000;
}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus{
	border-color:#ced4da;
	box-shadow:0 0 0 0.2rem rgb(0 123 255 / 25%);
}

.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label{
	/*color:#000000;*/
	color:#8a0000;
}

.details{
	font-size:22px;
}

.details h2{
	font-size:43px;
}

.details h3{
	font-size:30px;
}

.details .font-large{
	font-size:28px;
}

.input-group .input-group-text{
	background: transparent;
    border-right: none;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
}

.input-group .form-control{
	border-left:none;
	border-top-left-radius: unset;
    border-bottom-left-radius: unset;
	padding-left:0;
}

.logo{
	width:60%;
	margin:0 auto;
}

.form-control, .form-select{
	color:#8a0000;
	border-color:#8a0000;
	font-size:0.9rem;
}

.form-control::-webkit-input-placeholder {
    color:#8a0000;
	opacity:1;
}

.form-control::-moz-placeholder {
    color:#8a0000;
	opacity:1;
}

.form-control:-ms-input-placeholder {
    color:#8a0000;
	opacity:1;
}

.form-control::-placeholder {
    color:#8a0000;
	opacity:1;
}

.form-check-inline .form-check-input, input[type=checkbox], input[type=radio]{
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-content: center;
	justify-content: center;
	font-size: 2rem;
	padding: 1px;
	border: 1px solid #8a0000;
	border-radius: 3px;
	width: 16px;
	height: 16px;
}

input[type=radio]{
	border-radius: 15px !important;
}

input[type=checkbox]::before {
	content: "";
	clip-path: polygon(100% 15%, 43.98% 97.38%, 0% 67.47%, 13.34% 47.85%, 37.67% 64.39%, 80.34% 1.63%);
	transform: scale(0);
	background-color: #8a0000;
	width: 12px;
	height: 12px;
}

input[type=radio]::before {
	content: "";
	clip-path: circle(43.6% at 50% 50%);;
	transform: scale(0);
	background-color: #8a0000;
	width: 12px;
	height: 12px;
}

input[type=checkbox]:checked::before, input[type=radio]:checked::before {
	transform: scale(1);
}

input[type=checkbox]:hover, input[type=radio]:hover {
	color: black;
}

.form-check-label{
	font-size:0.9rem;
}

.select-wrapper{
	width:100%;
	position:relative;
}

.select-wrapper .dropdown-arrow{
    /*padding: 0.2272rem 0.1818rem 0px 0px;*/
    position: absolute;
    pointer-events: none;
	z-index:999;
	top:0.2272rem;
	right:0.1818rem;
	width:0.5454rem;
}

.select-wrapper select.form-control{
	-webkit-appearance: none;
}


@media screen and (max-width:1499px) and (min-width:641px){
}


@media screen and (max-width:640px){
	body, html{
		font-size:3.43vw;
	}
	.desktop{
		display:none;
	}
	
	.mobile{
		display:block;
	}
	
	.video-play{
		background-size: 15vw 15vw;
	}
	
	.header .content .content-header{
		font-size:6.875vw;
	}

	.header .content .content-sub-header{
		font-size:4.218vw;
	}

	.header .content .content-text{
		font-size:2.343vw;
	}

	.details{
		font-size:3.43vw;
	}

	.details h2{
		/*font-size:6.71vw;*/
		font-size:5.21vw;
	}

	.details h3{
		font-size:4.68vw;
	}
	
	.details .font-large{
		font-size:4.5vw;
	}
	
	.btn-redemption{
		padding: 0.5rem 6rem;
	}

	.logo{
		width:80%;
		margin:0 auto;
	}
}