@font-face {
    font-family: 'MMC OFFICE Bold';
    src: url('fonts/MMCOFFICE-Bold.eot');
    src: url('fonts/MMCOFFICE-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/MMCOFFICE-Bold.woff2') format('woff2'),
        url('fonts/MMCOFFICE-Bold.woff') format('woff'),
        url('fonts/MMCOFFICE-Bold.ttf') format('truetype'),
        url('fonts/MMCOFFICE-Bold.svg#MMCOFFICE-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MMC OFFICE';
    src: url('fonts/MMCOFFICE-Regular.eot');
    src: url('fonts/MMCOFFICE-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/MMCOFFICE-Regular.woff2') format('woff2'),
        url('fonts/MMCOFFICE-Regular.woff') format('woff'),
        url('fonts/MMCOFFICE-Regular.ttf') format('truetype'),
        url('fonts/MMCOFFICE-Regular.svg#MMCOFFICE-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, body{
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
}

.grecaptcha-badge{
	visibility: hidden;
}

button,
input,
textarea{
	outline: none;
}

.err{
	position: relative;
	display: block;
	width: 100%;
	color: red;
	text-align: left;
	display: none;
}
	.text-error,
	.text-error:focus{
		border: solid 1px red;
	}
	
	.body{
		width: 100%;
		min-height: 100%;
		background-image: url('../../images/BG-mobile-bottom.jpg'), url('../../images/BG-mobile-top.jpg'), url('../../images/BG-mobile-middle.jpg');
		background-repeat:no-repeat,  no-repeat, repeat-y;
		background-size:  100% auto,100% auto, 100% auto;
		background-attachment: fixed, fixed, fixed;
		background-position: center bottom, center top, center top;
	}
	
		.header{
			position: relative;
			display: block;
			width: 100%;
			text-align: center;
		}
			.logo-toyota{
				position: absolute;
				width: 40vw;
				top: 3vw;
				left: 0vw;
			}
			.logo-event{
				position: relative;
				width: 70vw;
				margin-top: 25vw;
			}
			.logo-toyota-50{
				position: absolute;
				width: 30vw;
				top: 3vw;
				right: 0vw;
			}
		
		.content{
			position: relative;
			display: block;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			margin-top: 20px;
			color: #fff;
			font-family: 'MMC OFFICE';
			font-size: 14px;
			text-align: center;
		}
			.judul{
				font-family: 'MMC OFFICE Bold';
				font-size: 26px;
				width: 100%;
				text-align: center;
				margin-bottom: 20px;
			}
			.group-input{
				position: relative;
				display: block;
				margin-bottom: 10px;
			}
				.group-input > label{
					position: relative;
					width: 100%;
					font-size: 18px;
				}
				.btn-submit{
					background-color: #fb2d18;
					color: #fff;
					font-family: 'MMC OFFICE Bold';
					font-size: 18px;
					padding: 5px 30px;
					border: none;
					border-radius: 5px;
					margin-bottom: 100px;
				}
				.btn-group{
					background-color: #fb2d18;
					color: #fff;
					font-family: 'MMC OFFICE Bold';
					font-size: 18px;
					padding: 4.5px 10px;
					border: none;
					border-radius: 0px 5px 5px 0px;
				}
				.btn-join{
					background-color: #fb2d18;
					color: #fff;
					font-family: 'MMC OFFICE Bold';
					font-size: 18px;
					padding: 5px 30px;
					border: none;
					border-radius: 5px;
				}
				.btn-join-disabled{
					background-color: #aaa;
				}
		#form{
			display: block;
		}
		#register{
			display: none;
		}
		#login{
			display: none;
		}
		#success{
			display: none;
		}
		#error{
			display: none;
		}
			.jdl-success{
				font-family: 'MMC OFFICE Bold';
				font-size: 20px;
				width: 100%;
				text-align: center;
				margin-top: 0px;
			}
			.text-thanks{
				position: relative;
				display: block;
				margin: 30px 0px;
				text-align: center;
				font-family: 'MMC OFFICE';
				font-size: 16px;
			}
			.prize{
				position: relative;
				display: block;
				margin-top: 10px;
			}
				.prize > img{
					width: 100%;
				}
			
			.info-error{
				position: relative;
				display: block;
				text-align: center;
				margin-top: 8vh;
				font-family: 'MMC OFFICE Bold';
				font-size: 20px;
			}
			.hubungi{
				position: relative;
				display: block;
				text-align: center;
				margin-top: 10vh;
				font-size: 20px;
			}
				.text-contact{
					font-family: 'MMC OFFICE';
				}
				.wa-contact{
					font-family: 'MMC OFFICE Bold';
				}
		
			.jdl-zoom{
				position: relative;
				display: block;
				width: 100%;
				text-align: center;
				font-family: 'MMC OFFICE';
				font-size: 20px;
				margin-bottom: 50px;
			}
			.countdown{
				position: relative;
				display: block;
				text-align: center;
			}
				.countdown-val{
					position: relative;
					display: inline-block;
					width: 22%;
					margin: 1%;
					font-family: 'MMC OFFICE Bold';
					font-size: 36px;
				}
					.countdown-des{
						position: relative;
						display: block;
						width: 100%;
						font-family: 'MMC OFFICE';
						font-size: 16px;
					}
			#btn-zoom,
			#btn-shd{
				display: none;
			}
			
			.link-text{
				font-size: 18px;
				color: #fff;
				cursor: pointer;
				text-decoration: underline;
			}
			
			#reupload{
				display: none;
			}

.acak-1,
.result-data1{
	background: url('../../images/BG-undi-HP.jpg') no-repeat;
}
.acak-2,
.result-data2{
	background: url('../../images/BG-undi-tv.jpg') no-repeat;
}
.acak-3,
.result-data3{
	background: url('../../images/BG-undi-dashcam.jpg') no-repeat;
}

.acak-1,
.acak-2,
.acak-3,
.result-data1,
.result-data2,
.result-data3{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-size: cover;
	background-position: top center;
}

.acak{
	position: absolute;
	bottom: 20.2vh;
	left: 14.8vw;
	width: 29.8vw;
	height: 13.5vh;
	text-align: center;
	color: #fff;
}
	#acak-nama{
		font-family: "MMC OFFICE Bold";
	}
	.acak-nama{
		font-size: 10vh;
		line-height: 12vh;
	}
	
	#result,
	.data-result1,
	.data-result2,
	.data-result3{
		position: absolute;
		right: 15vw;
		width: 33vw;
		text-align: center;
		color: #fff;
	}
	.result-1,
	.result-2,
	.data-result1,
	.data-result2{
		height: 18vh;
		bottom: 18vh;
	}
	.result-3,
	.data-result3{
		height: 90vh;
		bottom: 5vh;
	}
	.box-pemenang{
		position: relative;
		width: 33vw;
		height: 18vh;
		text-align: center;
		color: #fff;
		background: url('../../images/box-winner.png') no-repeat;
		background-size: cover;
		padding: 3vh 2vh;
	}
		.nama{
			font-family: "MMC OFFICE Bold";
			font-size: 1.5vw;
			line-height: 6vh;
		}
		.hp{
			font-family: "MMC OFFICE";
			font-size: 2vw;
			line-height: 3.5vh;
		}

.winner{
	position: absolute;
	bottom: 20.2vh;
	left: 14.8vw;
	width: 29.8vw;
	height: 13.5vh;
	text-align: center;
	color: #fff;
	font-family: "MMC OFFICE Bold";
	font-size: 10vh;
	line-height: 12vh;
}

/*Tablet / iPad / Laptop Portraid*/
@media only screen
and (min-width: 601px) {
			.logo-toyota{
				width: 23vw;
				left: 3vw;
			}
			.logo-event{
				width: 50vw;
				margin-top: 15vw;
			}
			.logo-toyota-50{
				width: 18vw;
				right: 3vw;
			}
			
		.content{
			width: 60%;
			font-size: 14px;
		}
			.judul{
				font-size: 32px;
			}
			.jdl-success{
				font-size: 30px;
				margin-top: 10vh;
			}
			.text-thanks{
				font-size: 20px;
			}
			.prize{
				margin-top: 5vh;
			}
			
			.info-error{
				font-size: 26px;
			}
			.hubungi{
				font-size: 26px;
			}
}


/*Tablet / iPad / Laptop Landscape*/
@media only screen
and (min-width: 1024px) {
	.body{
		background-image: url('../../images/BG-desktop.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		background-position: center top;
	}
			.logo-toyota{
				top: 2vw;
				width: 18vw;
				left: 3vw;
			}
			.logo-event{
				width: 30vw;
				margin-top: 5vw;
			}
			.logo-toyota-50{
				top: 2vw;
				width: 12vw;
				right: 3vw;
			}
			
		.content{
			width: 50%;
			max-width: 500px;
			font-size: 14px;
		}
		
			.jdl-zoom{
				font-size: 28px;
			}
		
				.countdown-val{
					font-size: 62px;
				}
					.countdown-des{
						font-size: 24px;
					}
		
		
		.box-scan{
			position: relative;
			display: block;
			text-align: center;
			margin-bottom: 50px;
		}
			.input-scan{
				width: 70%;
				padding: 5px;
				font-family: 'MMC OFFICE Bold';
				color: #000;
				text-align: center;
				font-size: 46px;
			}
			
		#result-absen{
			position: relative;
			display: block;
			width: 100%;
			text-align: center;
		}
			.welcome-absen{
				font-family: 'MMC OFFICE';
				font-size: 28px;
				margin-bottom: 10px;
			}
			.nama-absen{
				font-family: 'MMC OFFICE Bold';
				font-size: 38px;
				margin-bottom: 30px;
			}
}


/*Laptop / Desktop*/
@media only screen
and (min-width: 1280px) {
			.info-error{
				margin-top: 5vh;
			}
			.hubungi{
				margin-top: 5vh;
			}
}


/*Desktop 1366*/
@media only screen
and (min-width: 1366px) {
	.form-control{
		font-size: 16px;
		padding: 10px;
	}
			.logo-toyota{
				width: 18vw;
				right: 3vw;
			}
			.logo-event{
				width: 25vw;
				margin-top: 3vw;
			}
			.logo-toyota-50{
				width: 12vw;
				right: 3vw;
			}
}


/*Desktop MAC*/
@media only screen
and (min-width: 1440px) {
		.content{
			max-width: 600px;
		}
		
			.info-error{
				font-size: 36px;
			}
			.hubungi{
				font-size: 36px;
			}
}


/*Desktop Full HD MAC*/
@media only screen
and (min-width: 1680px) {
	
}


/*Desktop Full HD*/
@media only screen
and (min-width: 1920px) {
		
}