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

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

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

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

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

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

@font-face{
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
		url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
		url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
		url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
		url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style:normal;
}

.grecaptcha-badge{
	visibility: hidden;
}

html, body{
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	background-color: #e6e7e8;
	background-image: url('../../images/BG-info-bbm-1280.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

button,
input,
select,
textarea{
	outline: none;
}
	.text-error,
	.text-error:focus{
		border-bottom: solid 1px red;
	}
	
	.header{
		position: relative;
		display: block;
		background-color: #fff;
		height: 15vh;
	}
		.frame-header{
			position: relative;
			display: block;
			width: 96%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
			.header-left{
				position: relative;
				display: inline-block;
				width: 49%;
				padding: 15px;
				vertical-align: middle;
			}
				.judul-header{
					position: relative;
					display: table-cell;
					height: 100%;
					font-family: 'Toyota Semibold';
					font-size: 1.8em;
				}
					.back{
						position: relative;
						display: block;
						padding-left: 9vh;
					}
						.back::before{
							position: absolute;
							top: -3.5vh;
							left: -1vh;
							display: block;
							content: url('../../images/angle-left.png');
							width: 8vh;
							height: 10vh;
							transform: scale(0.3);
						}
			.header-right{
				position: relative;
				display: inline-block;
				width: 50%;
				padding: 15px;
				vertical-align: middle;
				text-align: right;
			}
				.logo{
					height: 7vh;
				}
				.logo-comp{
					height: 17vh;
					border-radius: 10px;
				}
	
	.content{
		position: relative;
		display: block;
		width: 100%;
	}
		.box-content{
			position: relative;
			display: block;
			width: 96%;
			left: 50%;
			transform: translateX(-50%);
			padding: 15px;
		}
			.judul-content{
				position: relative;
				display: block;
				font-family: 'Toyota Bold';
				font-size: 1.8em;
				color: #fff;
			}
				.bottom-line{
					position: relative;
					display: inline-block;
					width: 5%;
					padding-top: 0.2em;
					border-bottom: solid 0.15em #00adee;
				}
					.line-detail{
						width: 10%;
					}
					.last-data{
						color: #f00;
						font-family: 'Toyota Semibold';
						font-size: .8em;
						font-style: italic;
					}
			.isi-content{
				position: relative;
				display: block;
				width: 100%;
				padding-top: 6vh;
				margin-bottom: 4vh;
			}
				.box-wilayah{
					position: relative;
					display: table;
					width: 100%;
					margin-bottom: 5vh;
					background: rgba(255, 255, 255, 0.8);
					border-radius: 5px;
				}
				.box-wilayah-3{
					position: relative;
					display: table;
					width: 50%;
					left: 50%;
					transform: translateX(-50%);
					margin-bottom: 5vh;
					background-color: #fff;
					border-radius: 5px;
				}
					.wilayah-4baris{
						margin-bottom: 3vh;
					}
					.isi-wilayah{
						position: relative;
						display: table-cell;
						height: 10vh;
						vertical-align: middle;
						font-family: 'Toyota Semibold';
						font-size: 1.5em;
						/*padding-left: 10vh;*/
						padding-left: 5vh;
					}
					/*.uncheck::before{
						position: absolute;
						top: -2vh;
						left: -1vh;
						display: block;
						content: url('../../images/uncheck.png');
						width: 8vh;
						height: 10vh;
						transform: scale(0.15);
					}
					.checked::before{
						position: absolute;
						top: -2vh;
						left: -1vh;
						display: block;
						content: url('../../images/checked.png');
						width: 8vh;
						height: 10vh;
						transform: scale(0.15);
					}*/
					
					.tabel-data{
						width: 100%;
					}
						.tabel-data td{
							padding: 5px;
						}
							.h-tabel div{
								background: rgba(255, 255, 255, 0.8);
								padding: 10px;
								height: 8vh;
								text-align: center;
								font-family: 'Toyota Semibold';
								font-size: 1.5em;
								color: #00adee;
							}
							.d-tabel .isi-produk{
								background: rgba(255, 255, 255, 0.8);
								padding: 5px;
								height: 8vh;
								text-align: center;
								font-family: 'Toyota Reg';
								font-size: 1em;
								color: #000;
							}
								.d-tabel .isi-produk img{
									height: 6vh;
								}
									.harga-produk{
										position: relative;
										display: inline-block;
										font-family: 'Toyota Reg';
										font-size: 1.7vh;
									}
										.harga{
											font-family: 'Toyota Semibold';
											font-size: 2.2vh;
										}
									.naik-turun{
										position: relative;
										display: inline-block;
										font-family: 'Toyota Reg';
										font-size: 1.2vh;
										padding-left: 1vh;
									}
										.hrg-naik{
											color: #ed1c24;
										}
											.hrg-naik::before{
												position: absolute;
												top: -4vh;
												transform: translateX(-50%);
												display: block;
												content: url('../../images/naik.png');
												width: 5vh;
												height: 5vh;
												transform: scale(0.35);
											}
										.hrg-turun{
											color: #39b54a;
										}
											.hrg-turun::before{
												position: absolute;
												top: -4vh;
												transform: translateX(-50%);
												display: block;
												content: url('../../images/turun.png');
												width: 5vh;
												height: 5vh;
												transform: scale(0.35);
											}
		
			.box-button{
				position: relative;
				display: block;
				width: 100%;
				text-align: center;
			}
				.btn-pilih{
					width: 48vh;
					background-color: #00adee;
					border: none;
					padding: 1.5vh;
					padding-bottom: 1.8vh;
					font-family: 'Toyota Reg';
					color: #fff;
					font-size: 1.5em;
					border-radius: 3.2vh;
					box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
					-webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
					-moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
				}


/*Desktop Full HD*/
@media only screen
and (min-width: 1920px) {
html, body{
	background-image: url('../../images/BG-info-bbm-1920.jpg');
}
			.header-left{
				padding-top: 18px;
			}
				.judul-header{
					font-size: 2.2em;
				}
				
			.judul-content{
				font-size: 2.2em;
			}
				.bottom-line{
					width: 4%;
				}
				
						.tabel-data td{
							padding: 5px;
						}
							.h-tabel div{
								height: 9vh;
								padding: 14px;
								font-size: 1.6em;
							}
							.d-tabel .isi-produk{
								height: 9vh;
								padding: 5px;
								font-size: 1em;
							}
								.d-tabel .isi-produk img{
									height: 7vh;
								}
									.harga-produk{
										font-size: 2vh;
									}
										.harga{
											font-size: 2.5vh;
										}
									.naik-turun{
										font-size: 1.6vh;
									}
											.hrg-naik::before{
												top: -4vh;
												transform: scale(0.45);
											}
											.hrg-turun::before{
												top: -4vh;
												transform: scale(0.45);
											}
}