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

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

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

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

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

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

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

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

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

@font-face {
    font-family: 'Nobel LightItalic';
    src: url('fonts/Nobel-LightItalic.eot');
    src: url('fonts/Nobel-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Nobel-LightItalic.woff2') format('woff2'),
        url('fonts/Nobel-LightItalic.woff') format('woff'),
        url('fonts/Nobel-LightItalic.ttf') format('truetype'),
        url('fonts/Nobel-LightItalic.svg#Nobel-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    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;*/
}

.select2-container .select2-selection--single{
	height: 38px;
	border: solid 1px #ebebeb;
	background-color: #ebebeb;
	width: 100% !important;
	border-radius: 5px;
}
.select2-dropdown{
	border: solid 1px #86bc42;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 35px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
	top: 5px;
}

/* Smartphone Default*/
.no-padding{
	margin: 0px;
	padding: 0px;
}
.no-padding-left,
.no-padding-right{
	padding: 0px;
}


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;
	}

.embed-container{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed{
	position: absolute;
	left: 50%;
	top: -1px;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 100%;
	height: 100%;
}

.modal-dialog{
	color: #000;
	top: 50%;
	transform: translateY(-50%) !important;
	-moz-transform: translateY(-50%) !important;
	-webkit-transform: translateY(-50%) !important;
}

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

	.content-login{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		background-image: url('../../images/elemen-grafis-kiri-bawah.png'), url('../../images/bg-login.jpg');
		background-size: 80% auto, auto 100%;
		background-repeat: no-repeat, no-repeat;
		background-attachment: fixed, fixed;
		background-position: bottom 5% left, top left 30%;
	}
		.logo-login{
			position: absolute;
			width: 50%;
			max-width: 250px;
			top: 8vh;
			left: 50%;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			z-index: 99;
		}
		
		.box-login{
			position: relative;
			display: block;
			width: 90%;
			padding: 50px 20px;
			left: 50%;
			top: 0px;
			padding-top: 20vh;
			margin-bottom: 100px;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			background: rgba(234, 234, 234, 0.85);
			border-radius: 0px 0px 20px 20px;
		}
			.judul-box-login{
				font-family: 'Nobel Light';
				font-size: 32px;
				letter-spacing: 2px;
				text-align: center;
				margin-bottom: 30px;
			}
				.inspire{
					font-weight: bold;
				}
			.frame-login{
				position: relative;
				display: block;
				width: 100%;
				font-family: 'Nobel Light';
				font-size: 18px;
			}
				.input-group{
					position: relative;
					display: block;
					width: 100%;
					margin-bottom:10px;
				}
					.label-input{
						position: relative;
						display: block;
						width: 100%;
						margin-bottom: 5px;
					}
					.text-input{
						position: relative;
						display: block;
						width: 100%;
						padding: 8px 10px;
						background-color: #fff;
						font-family: 'Nobel Light';
						font-size: 18px;
						border-radius: 7px;
						-moz-border-radius: 7px;
						-webkit-border-radius: 7px;
						border: solid 1px #8b8b8b;
					}
					select.text-input{
						padding: 11px;
					}
						input[name=password]::-webkit-input-placeholder{
							font-style: italic;
						}
						input[name=password]::-moz-placeholder{
							font-style: italic;
						}
				.link{
					cursor: pointer;
				}
				.link:hover{
					text-decoration: underline;
				}
				.signup{
					color: #c57d64;
				}
					.btn-submit{
						background-color: #000;
						color: #fff;
						font-family: 'Nobel Regular';
						font-size: 18px;
						padding: 10px 40px;
						border-radius: 7px;
						-moz-border-radius: 7px;
						-webkit-border-radius: 7px;
						text-align: center;
						border: none;
					}
	
	.content-register{
		position: relative;
		display: block;
		width: 100%;
		min-height: 100%;
		background-color: #e8e8e8;
		background-image: url('../../images/elemen-grafis-kanan-atas.png'), url('../../images/elemen-grafis-kiri-bawah.png');
		background-repeat: no-repeat, no-repeat;
		background-size: 100% auto, 100% auto;
		background-position: top right, bottom left;
		background-attachment: fixed, fixed;
	}
		.judul-box-register{
			font-family: 'Nobel Light';
			font-size: 32px;
			letter-spacing: 2px;
			text-align: center;
			margin-bottom: 30px;
			padding-top: 100px;
		}
		.box-register{
			position: relative;
			display: block;
			width: 90%;
			max-width: 1200px;
			left: 50%;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			margin-bottom: 100px;
			font-family: 'Nobel Light';
			font-size: 18px;
		}
			.section-foto{
				position: relative;
				display: inline-block;
				width: 100%;
				vertical-align: top;
			}
				.box-foto-profile{
					position: relative;
					display: block;
					width: 180px;
					height: 180px;
					border: solid 1px #8b8b8b;
					border-radius: 7px;
					-moz-border-radius: 7px;
					-webkit-border-radius: 7px;
					overflow: hidden;
					left: 50%;
					transform: translateX(-50%);
					-moz-transform: translateX(-50%);
					-webkit-transform: translateX(-50%);
					cursor: pointer;
				}
			.section-input{
				position: relative;
				display: inline-block;
				width: 100%;
				vertical-align: top;
			}
				.sub-section{
					position: relative;
					display: inline-block;
					width: 100%;
					vertical-align: top;
				}
	
	.header{
		position: fixed;
		display: block;
		background-color: #000;
		width: 100%;
		height: 50px;
		z-index: 999;
	}
		.box-header{
			position: relative;
			display: block;
			width: 95%;
			left: 50%;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			top: 10px;
		}
			.home-logo{
				position: relative;
				display: block;
				height: 30px;
				cursor: pointer;
			}
			.box-menu{
				position: absolute;
				display: block;
				top: 0px;
				right: 0px;
			}
				.btn-menu{
					padding: 2px 8px;
					background-color: #000;
					font-size: 16px;
					border: solid 3px #fff;
					color: #fff;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
				}
				.btn-notif{
					padding: 0px;
					font-size: 32px;
					line-height: 0px;
					position: absolute;
					display: block;
					right: 60px;
					color: #fff;
					cursor: pointer;
				}
					.isi-notif{
						position: absolute;
						z-index: 99;
						background-color: #f00;
						color: #fff;
						font-family: 'Nobel Regular';
						font-size: 14px;
						line-height: 20px;
						text-align: center;
						width: 20px;
						height: 20px;
						top: 0px;
						right: -5px;
						border-radius: 50%;
						-moz-border-radius: 50%;
						-webkit-border-radius: 50%;
						display: none;
					}
		.frame-menu{
			position: fixed;
			display: block;
			width: 100%;
			left: 50%;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			z-index: 9999;
			top: 50px;
		}
			.content-menu{
				position: relative;
				display: none;
				width: 100%;
				top: 0px;
				background-color: #fefefe;
			}
				.menu{
					position: relative;
					display: block;
					width: 100%;
					padding: 10px 30px;
					border-bottom: solid 1px #dcdcdc;
					color: #111;
					font-family: 'Nobel Regular';
					font-size: 18px;
					cursor: pointer;
				}
				.menu:hover{
					background-color: #000;
					color: #fff;
				}
				
	
	.banner-home{
		position: relative;
		display: block;
		height: 101vh;
	}
		.bg-banner{
			position: relative;
			display: block;
			width: 100vw;
			height: 101vh;
			background-repeat: no-repeat, no-repeat, no-repeat;
			background-position: top 60px right, bottom left, center center;
			background-size: 100% auto, 100% auto, cover;
		}
		.mouse{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			bottom: 15px;
			width: 25px;
			animation-duration: 1.5s;
			animation-iteration-count: infinite;
			cursor: pointer;
		}
		.bounce-1{
			animation-name: bounce-1;
			animation-timing-function: linear;
		}
		@keyframes bounce-1{
			0%   { transform: translateY(0); }
			50%  { transform: translateY(-10px); }
			100% { transform: translateY(0); }
		}
	
	.content-image-menu{
		position: relative;
		display: block;
		width: 100%;
		text-align: center;
	}
		.gambar-menu{
			position: relative;
			display: inline-block;
			border-bottom: solid 1px #fff;
			cursor: pointer;
			overflow: hidden;
		}
			.box-menu-pendek,
			.box-menu-panjang{
				width: 100%;
				height: 33vh;
			}
			.image-menu{
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-size: cover;
				transition: all .5s;
			}
		.gambar-menu:hover .image-menu{
			transform: scale(1.2);
		}
		.text-menu{
			position: absolute;
			display: block;
			width: 100%;
			bottom: 0px;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-family: 'Nobel Regular';
			font-size: 16px;
			padding: 20px 10px;
			text-align: left;
		}
	
	.box-content{
		position: relative;
		display: block;
		width: 100%;
		min-height: 100vh;
		padding-top: 60px;
		padding-bottom: 50px;
		background-color: #e8e8e8;
		background-image: url('../../images/elemen-grafis-kanan-atas.png'), url('../../images/elemen-grafis-kiri-bawah.png');
		background-repeat: no-repeat, no-repeat;
		background-position: top 50px right, bottom left;
		background-size: 100% auto, 100% auto;
	}
		.content{
			position: relative;
			display: block;
			width: 95%;
			max-width: 1300px;
			left: 50%;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			top: 10px;
			text-align: center;
		}
			.judul-content{
				position: relative;
				display: inline-block;
				text-align: left;
				width: 100%;
				margin-bottom: 30px;
			}
				.profile-m{
					position: relative;
					display: block;
					text-align: center;
					margin-bottom: 20px;
				}
				.profile-d{
					display: none;
				}
					.foto-profile{
						position: relative;
						display: inline-block;
						width: 50px;
						height: 50px;
						background-size: cover;
						overflow: hidden;
						border-radius: 50%;
						-moz-border-radius: 50%;
						-webkit-border-radius: 50%;
						border: solid 1px #fff;
						margin-right: 10px;
						vertical-align: top;
					}
					.nama-profile{
						position: relative;
						display: inline-block;
						height: 50px;
						font-family: 'Nobel Regular';
						font-size: 18px;
						vertical-align: top;
						line-height: 50px;
					}
				.jdl-content{
					position: relative;
					display: block;
					width: 100%;
					text-align: center;
					font-family: 'Nobel Regular';
					font-size: 20px;
				}
					.icon-jdl-content{
						height: 35px;
						margin-right: 10px;
					}
					.bold-jdl-content{
						font-family: 'Nobel Bold';
					}
			
			.isi-content{
				position: relative;
				display: inline-block;
				text-align: left;
				width: 100%;
			}
				.left-content{
					position: relative;
					display: inline-block;
					vertical-align: top;
					text-align: center;
					width: 100%;
					margin-bottom: 30px;
				}
				.right-content{
					position: relative;
					display: inline-block;
					vertical-align: top;
					text-align: left;
					width: 100%;
					border-top: solid 1px #8a8a8a;
					padding-top: 30px;
				}
					.box-isi-report{
						position: relative;
						display: block;
						width: 100%;
						margin-bottom: 20px;
					}
						.isi-report{
							position: relative;
							display: inline-block;
							vertical-align: top;
							width: 85%;
							text-align: left;
							font-family: 'Nobel Regular';
							font-size: 18px;
							cursor: pointer;
						}
						.jdl-report:hover{
							text-decoration: underline;
						}
							.tgl-report{
								position: relative;
								display: block;
								font-family: 'Nobel Light';
								font-size: 12px;
								font-style: italic;
							}
						.dl-report{
							position: relative;
							display: inline-block;
							vertical-align: top;
							width: 13%;
							text-align: right;
							font-size: 20px;
							padding-top: 20px;
						}
							.dl-report i{
								cursor: pointer;
							}
			.box-halaman{
				position: relative;
				display: block;
				width: 100%;
				margin-top: 30px;
				text-align: center;
			}
				.halaman{
					position: relative;
					display: inline-block;
					vertical-align: top;
					border: solid 1px #555;
					margin: 0px 2px;
					padding: 2px 0px;
					width: 25px;
					font-family: 'Nobel Regular';
					font-size: 14px;
					cursor: pointer;
				}
					.halaman:hover,
					.halaman-active{
						background-color: #838383;
						color: #fff;
					}
				
			
	.combobox{
		position: relative;
		display: block;
		width: 100%;
	}
		.title-combo{
			position: relative;
			display: block;
			width: 100%;
			background-color: #000;
			color: #fff;
			font-family: 'Nobel Light';
			font-size: 16px;
			padding: 7px 10px;
			text-align: left;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			cursor: pointer;
		}
		.title-combo::after{
			font-family: 'FontAwesome';
			content: "\f0d7";
			position: absolute;
			top: 5px;
			right: 10px;
		}
		.content-option{
			position: absolute;
			width: 100%;
			display: block;
			background-color: #fefefe;
			text-align: left;
			font-family: 'Nobel Light';
			font-size: 16px;
			border-radius: 0px 0px 5px 5px;
			-moz-border-radius: 0px 0px 5px 5px;
			-webkit-border-radius: 0px 0px 5px 5px;
			display: none;
			z-index: 9;
		}
			.combo-option{
				position: relative;
				display: block;
				width: 100%;
				padding: 5px 10px;
				border-bottom: solid 1px #eee;
				cursor: pointer;
			}
			.combo-option:hover,
			.combo-option-selected{
				font-family: 'Nobel Regular';
				background-color: #949399;
			}
	.combo-left{
		padding: 5px;
		padding-left: 0px;
	}
	.combo-right{
		padding: 5px;
		padding-right: 0px;
	}
	
	.box-search-input{
		position: relative;
		display: block;
		background-color: #fff;
		padding: 3px;
	}
		.text-find{
			background-color: #fff;
			color: #000;
			padding: 3px 0px;
			border: none;
			width: 78%;
			font-family: 'Nobel Light';
			font-size: 18px;
		}
		.text-find::-webkit-input-placeholder{
			font-style: italic;
		}
		.text-find::-moz-placeholder{
			font-style: italic;
		}
		.btn-find{
			background-color: #aaa9ae;
			color: #fff;
			padding: 3px;
			border: none;
			width: 20%;
			font-size: 16px;
			text-align: center;
		}
		
	.box-marketing-material-guideline{
		position: relative;
		display: block;
		width: 100%;
		text-align: center;
	}
		.marketing-material{
			position: relative;
			display: inline-block;
			width: 100%;
			height: 73vw;
			vertical-align: top;
			overflow: hidden;
			cursor: pointer;
		}
			.marketing-material:hover .image-menu{
				transform: scale(1.2);
			}
	
	.leaderboard{
		position: relative;
		display: block;
		width: 100%;
		max-height: 70vh;
		padding-right: 5px;
		padding-bottom: 5px;
	}
		.header-leaderboard{
			position: relative;
			display: block;
			width: 100%;
		}
			.tr-lb{
				position: relative;
				display: block;
				width: 100%;
				font-family: 'Nobel Light';
				color: #fff;
				padding: 5px;
				border-radius: 5px;
				margin-bottom: 5px;
			}
				.header-lb{
					padding: 5px;
					font-size: 10px;
				}
				.body-lb{
					padding: 5px;
					font-size: 14px;
				}
				.td-lb{
					position: relative;
					display: inline-block;
					vertical-align: middle;
				}
					.nama-lb{
						position: relative;
						display: inline-block;
						width: 100%;
					}
					.profile-lb{
						height: 30px;
						border-radius: 50%;
						border: solid 1px #fff;
					}
					.badge-lb{
						height: 30px;
					}
	
		.box-search-info{
			position: relative;
			display: block;
			margin-bottom: 30px;
		}
			.box-btn-upload{
				display: block;
				margin-bottom: 5px;
			}
				.btn-upload{
					background-color: #6e6d73;
					color: #fff;
					font-family: 'Nobel Regular';
					font-size: 18px;
					padding: 5px 20px;
					border: none;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
				}
		.box-isi-indo{
			position: relative;
			display: block;
		}
		
		.form-input-left{
			position: relative;
			display: inline-block;
			width: 100%;
			text-align: center;
		}
			.upload-label{
				font-family: 'Nobel Regular';
				font-size: 16px;
				text-align: left;
				margin-bottom: 5px;
				color: #555;
			}
			.form-combo{
				position: relative;
				display: block;
				width: 100%;
			}
				.form-combo-left{
					position: relative;
					display: inline-block;
					width: 100%;
					margin-bottom: 10px;
				}
				.form-combo-right{
					position: relative;
					display: inline-block;
					width: 100%;
					margin-bottom: 10px;
				}
			.form-cover{
				position: relative;
				display: block;
				width: 100%;
				margin-bottom: 5px;
			}
				.gambar-cover{
					position: relative;
					display: inline-block;
					vertical-align: top;
					width: 100%;
					margin-bottom: 5px;
					border: solid 1px #999999;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					overflow: hidden;
				}
		.form-input-right{
			position: relative;
			display: inline-block;
			width: 100%;
			text-align: center;
		}
		
		.box-user-report{
			position: relative;
			display: inline-block;
			width: 100%;
			cursor: pointer;
			margin-bottom: 20px;
		}
			.cover-report{
				position: relative;
				display: block;
				width: 100px;
				height: 100px;
				float: left;
				overflow: hidden;
				border-radius: 5px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				margin-right: 10px;
			}
				.gambar-cover-report{
					position: relative;
					display: block;
					width: 100%;
					height: 100%;
					background-size: cover;
					background-position: center center;
					transition: all 1s;
				}
			.isi-user-report{
				position: relative;
				display: block;
				text-align: left;
			}
				.jdl-user-report{
					font-family: 'Nobel Regular';
					font-size: 18px;
					line-height: 20px;
					margin-bottom: 5px;
				}
				.cat-user-report{
					font-family: 'Nobel Regular';
					font-size: 18px;
					color: #aaa;
				}
		.box-user-report:hover .gambar-cover-report{
			transform: scale(1.2);
		}
		.box-user-report:hover .jdl-user-report{
			text-decoration: underline;
		}
		
		.header-report-m{
			display: block;
		}
		.header-report-w{
			display: none;
		}
			.detail-report-cat{
				font-family: 'Nobel Regular';
				font-size: 20px;
				color: #999;
				margin-bottom: 5px;
			}
			.detail-report-judul{
				font-family: 'Nobel Bold';
				font-size: 22px;
				color: #000;
				margin-bottom: 10px;
				line-height: 20px;
			}
			.detail-report-share{
				margin-bottom: 10px;
			}
				.share-icon{
					cursor: pointer;
					height: 24px;
					margin-right: 10px;
				}
			.detail-report-by{
				font-family: 'Nobel Light';
				font-size: 18px;
				margin-bottom: 20px;
			}
			.detail-report-isi{
				font-family: 'Nobel Light';
				font-size: 18px;
				margin-top: 30px;
				margin-bottom: 20px;
			}
			.frame-comment{
				position: relative;
				display: block;
				font-family: 'Nobel Light';
				font-size: 18px;
			}
				.box-input-comment{
					position: relative;
					display: block;
					margin-bottom: 20px;
				}
				
				.box-isi-comment{
					position: relative;
					display: block;
					margin-bottom:20px;
					width: 100%;
				}
					.box-avatar{
						position: relative;
						display: inline-block;
						width: 50px;
						height: 50px;
						vertical-align: top;
						margin-right: 10px;
						border-radius: 50%;
						overflow: hidden;
					}
					.box-komen{
						position: relative;
						display: inline-block;
						vertical-align: top;
					}
						.tgl-komen{
							font-size: 14px;
						}
			
		.box-info-quiz{
			position: relative;
			display: block;
			width: 100%;
			left: 50%;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			margin-top: 10px;
			font-family: 'Nobel Light';
			font-size: 20px;
		}
		.box-jenis-quiz{
			position: relative;
			display: block;
			width: 100%;
			text-align: center;
			margin-top: 30px;
		}
			.box-quiz{
				position: relative;
				display: inline-block;
				width: 90%;
				padding: 20px;
				background-color: #fff;
				margin-bottom: 20px;
				border-radius: 10px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				cursor: pointer;
				transition: all .5s;
			}
			.box-quiz:hover{
				background-color: #000;
				color: #fff;
			}
				.box-no-quiz{
					position: relative;
					display: inline-block;
					width: 20%;
					vertical-align: top;
					text-align: left;
					font-family: 'Nobel Regular';
					font-size: 60px;
					line-height: 60px;
				}
				.box-des-quiz{
					position: relative;
					display: inline-block;
					width: 75%;
					vertical-align: top;
					text-align: left;
					font-family: 'Nobel Regular';
					font-size: 35px;
					line-height: 35px;
					border-left: solid 2px #000;
					padding-left: 20px;
					transition: all .5s;
				}
				.box-quiz:hover .box-des-quiz{
					border-left: solid 2px #fff;
				}
		
		.box-detail-quiz{
			margin-top: 0px;
			margin-bottom: 50px;
		}
			.box-isi-quiz{
				position: relative;
				display: inline-block;
				width: 100%;
				margin-bottom: 30px;
				font-family: 'Nobel Light';
				font-size: 18px;
				vertical-align: top;
			}
				.nomor-quiz{
					position: relative;
					display: inline-block;
					width: 5%;
					vertical-align: top;
				}
				.pertanyaan-quiz{
					position: relative;
					display: inline-block;
					width: 90%;
					vertical-align: top;
				}
					.isi-pertanyaan{
						position: relative;
						display: block;
						margin-bottom: 10px;
					}
					.box-jawaban{
						position: relative;
						display: block;
						margin-bottom: 10px;
					}
						.pilihan-jawaban{
							position: relative;
							display: inline-block;
							width: 10%;
							margin-right: 10px;
							background-color: #fff;
							padding: 8px;
							line-height: 10px;
							text-align: center;
							border-radius: 3px;
							vertical-align: top;
							cursor: pointer;
						}
						.pilihan-jawaban:hover,
						.pilih-jawab{
							background-color: #000;
							color: #fff;
						}
						.isi-jawaban{
							position: relative;
							display: inline-block;
							width: 80%;
						}
			.box-submit-quiz{
				position: relative;
				display: block;
				width: 100%;
				text-align: right;
			}
	
	.body-notif{
		background-color: transparent;
		color: #fff;
		box-shadow: none;
		border: none;
	}
		#popup-notif{
			height: 80vh;
			overflow-y: auto;
		}
		.header-notif{
			border-bottom: none;
			color: #fff !important;
			padding: 5px 10px;
		}
			.close{
				color: #fff;
			}
		.box-popup-notif{
			background-color: #000;
			padding: 15px 10px;
			margin-bottom: 10px;
			font-family: 'Nobel Light';
			font-size: 24px;
			cursor: pointer;
		}
			.box-popup-notif:hover .isi-popup-notif{
				text-decoration: underline;
			}
			.time-header-notif{
				font-size: 20px;
			}
			.isi-popup-notif{
				padding: 5px 20px;
				font-size: 20px;
			}
			
	.body-poin{
		background-color: transparent;
		color: #fff;
		box-shadow: none;
		border: none;
	}
		.get-poin{
			margin-bottom: 10px;
		}
		.total-poin{
			position: absolute;
			width: 100%;
			bottom: 60px;
			font-family: 'Nobel Regular';
			font-size: 32px;
			color: #fff;
			background-color: #6e6d72;
			padding: 5px 10px;
			text-align: center;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
		}
		
		.box-training{
			background-color: #d1d1d1;
			padding: 15px 20px;
			font-family: 'Nobel Regular';
			font-size: 18px;
			margin-bottom: 10px;
			border-radius: 10px;
			cursor: pointer;
		}
			.incoming-live{
				position: relative;
				display: block;
				margin-bottom: 30px;
				font-family: 'Nobel Regular';
				font-size: 18px;
			}
				.incoming-live img{
					height: 36px;
				}
			.judul-training{
				position: relative;
				display: block;
				font-family: 'Nobel Bold';
				font-size: 22px;
				margin-bottom: 20px;
			}
			.detail-training{
				font-family: 'Nobel Regular';
				font-size: 15px;
			}
			.countdown-training{
				position: relative;
				display: block;
				width: 100%;
				margin: 30px 0px;
				text-align: center;
			}
				.countdown-val{
					position: relative;
					display: inline-block;
					vertical-align: top;
					padding-top: 10px;
					width: 19vw;
					height: 19vw;
					font-size: 32px;
					background-image: url('../../images/frame-time.png');
					background-position: center center;
					background-size: cover;
					margin: 5px;
					font-family: 'Nobel RegularItalic';
					line-height: 7vw;
				}
				.countdown-des{
					font-family: 'Nobel Bold';
					font-size: 10px;
				}
				.box-attend{
					position: relative;
					display: block;
					margin-top: 20px;
					text-align: left;
					font-family: 'Nobel Regular';
					font-size: 18px;
					margin-bottom: 10px;
				}
		.box-join-training{
			position: relative;
			display: block;
			text-align: center;
			margin-top: 50px;
		}
		
				
	.footer{
		position: relative;
		display: block;
		background-color: #fefefe;
		width: 100%;
		padding: 30px 0px;
		font-family: 'Nobel Regular';
	}
		.box-footer{
			position: relative;
			display: block;
			width: 95%;
			max-width: 1300px;
			left: 50%;
			transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
		}
			.box-sosmed{
				position: relative;
				display: block;
				width: 100%;
				text-align: center;
				margin-bottom: 30px;
				font-size: 20px;
			}
				.sosmed{
					position: relative;
					display: inline-block;
					margin: 5px 10px;
				}
					.sosmed img{
						height: 30px;
					}
					.link-sosmed{
						cursor: pointer;
						margin-left: 5px;
					}
					.link-sosmed:hover{
						text-decoration: underline;
					}
				.join{
					width: 90%;
				}
			.box-copy{
				position: relative;
				display: block;
				width: 100%;
				text-align: center;
				font-size: 18px;
			}


/*Tablet / iPad / Laptop Portraid*/
@media only screen
and (min-width: 601px) {
		.box-login{
			width: 400px;
			padding: 50px;
			padding-top: 200px;
		}
				.input-group{
					margin-bottom:20px;
				}
			
		.judul-box-register{
			padding-top: 200px;
		}
			.section-foto{
				width: 30%;
				margin-right: 4%;
			}
			.section-input{
				width: 65%;
			}
				.sub-section{
					width: 100%;
				}
	
	.header{
		height: 70px;
	}
		.box-header{
			top: 15px;
		}
			.home-logo{
				height: 35px;
			}
			.box-menu{
				top: 0px;
				right: 0px;
			}
				.btn-menu{
					padding: 2px 9px;
					font-size: 16px;
				}
				
				.join{
					width: auto;
				}
		
		.frame-menu{
			top: 70px;
		}
			.content-menu{
				position: absolute;
				width: auto;
				top: 0px;
				right: 15px;
			}
				.menu{
					padding: 10px 50px;
				}		
				.btn-notif{
					font-size: 40px;
					right: 80px;
				}
					.isi-notif{
						font-size: 15px;
						line-height: 22px;
						width: 22px;
						height: 22px;
						top: 0px;
						right: -5px;
					}
			
	.box-content{
		padding-top: 70px;
	}
	
	.leaderboard{
		padding-right: 10px;
		padding-bottom: 10px;
	}
			.tr-lb{
				padding: 5px 10px;
				border-radius: 5px;
				margin-bottom: 10px;
			}
				.header-lb{
					padding: 10px;
					font-size: 18px;
				}
				.body-lb{
					padding: 10px;
					font-size: 18px;
				}
					.nama-lb{
						width: auto;
					}
					.profile-lb{
						height: 36px;
					}
					.badge-lb{
						height: 36px;
					}
					
		.form-input-left{
			width: 100%;
			vertical-align: top;
		}
			.upload-label{
				font-size: 16px;
			}
			.form-combo{
				width: 100%;
			}
				.form-combo-left{
					width: 49%;
					margin-bottom: 10px;
				}
				.form-combo-right{
					width: 49.9%;
					margin-bottom: 10px;
				}
			.form-cover{
				width: 100%;
				margin-bottom: 5px;
			}
				.gambar-cover{
					width: 32.7%;
					margin-bottom: 5px;
				}
		.form-input-right{
			width: 100%;
		}
		
		.box-user-report{
			width: 48%;
			vertical-align: top;
		}
			.box-user-report-left{
				margin-right: 1%;
			}
			.box-user-report-right{
				margin-left: 1%;
			}
			.cover-report{
				width: 120px;
				height: 120px;
				margin-right: 10px;
			}
				.jdl-user-report{
					font-size: 20px;
					line-height: 22px;
					margin-bottom: 10px;
				}
				.cat-user-report{
					font-size: 20px;
				}
				
			.detail-report-isi{
				margin-bottom: 50px;
			}
					.box-avatar{
						width: 80px;
						height: 80px;
					}
						.tgl-komen{
							font-size: 16px;
						}
			
		.box-info-quiz{
			margin-top: 30px;
			font-size: 24px;
		}
		.box-jenis-quiz{
			padding: 30px;
		}
			.box-quiz{
				width: 90%;
				padding: 20px;
				margin-bottom: 20px;
			}
				.box-no-quiz{
					width: 20%;
					font-size: 60px;
					line-height: 60px;
				}
				.box-des-quiz{
					width: 75%;
					font-size: 35px;
					line-height: 35px;
					padding-left: 20px;
				}
				
		.box-detail-quiz{
			margin-top: 0px;
			margin-bottom: 100px;
		}
		
			.incoming-live{
				margin-bottom: 30px;
				font-size: 30px;
			}
				.incoming-live img{
					height: 50px;
				}
			.judul-training{
				font-size: 32px;
			}
			.detail-training{
				font-size: 18px;
			}
			
				.countdown-val{
					padding-top: 30px;
					width: 15vw;
					height: 15vw;
					font-size: 68px;
					margin: 20px;
					line-height: 5vw;
				}
				.countdown-des{
					font-size: 16px;
				}
}


/*Tablet / iPad / Laptop Landscape*/
@media only screen
and (min-width: 1024px) {
	.content-login{
		background-size: auto 15%, cover;
		background-position: bottom 10% left, auto;
	}
		.logo-login{
			top: 35px;
			left: 50px;
			transform: none;
		}
		
		.box-login{
			width: 400px;
			padding: 50px 50px;
			padding-top: 120px;
			left: 50%;
			top: 0px;
			transform: none;
		}
			.judul-box-login{
				font-size: 42px;
				letter-spacing: 2px;
				margin-bottom: 50px;
			}
			.frame-login{
				font-size: 20px;
			}
					.text-input{
						font-size: 20px;
					}
					.btn-submit{
						font-size: 20px;
					}
		
	.content-register{
		background-size: 60% auto, 60% auto;
	}
		.judul-box-register{
			font-size: 52px;
			padding-top: 20vh;
			margin-bottom: 5vh;
		}
		.box-register{
			font-size: 20px;
		}
			.section-foto{
				width: 25%;
				margin-right: 2%;
			}
			.section-input{
				width: 63%;
			}
				.sub-section{
					width: 47%;
				}
				.sub-left{
					margin-right: 5%;
				}
	
	.header{
		height: 80px;
	}
		.box-header{
			width: 90%;
			top: 15px;
		}
			.home-logo{
				height: 50px;
			}
			.box-menu{
				top: 5px;
				right: 0px;
			}
				.btn-menu{
					padding: 5px 12px;
					font-size: 18px;
				}
				
		.frame-menu{
			top: 80px;
			width: 90%;
		}
		
		.bg-banner{
			background-repeat: no-repeat, no-repeat, no-repeat;
			background-position: top 80px right, bottom left, center center;
			background-size: 50% auto, 50% auto, cover;
		}
	
		.mouse{
			width: 35px;
		}
		
			.box-menu-pendek{
				width: 42.5%;
				height: 35vh;
			}
			.box-menu-panjang{
				width: 57%;
				height: 35vh;
			}
		.text-menu{
			font-size: 18px;
			padding: 20px 10px;
		}
		
	.box-content{
		padding-top: 80px;
		background-position: top 80px right, bottom left;
		background-size: 60% auto, 60% auto;
	}
			.judul-content{
				margin-top: 30px;
				margin-bottom: 30px;
			}
				.profile-m{
					display: none;
				}
				.profile-d{
					display: inline-block;
					width: 29%;
					text-align: right;
					margin-bottom: 0px;
					vertical-align: top;
				}
					.nama-profile{
						font-size: 18px;
					}
				.jdl-content{
					display: inline-block;
					width: 69%;
					text-align: left;
					font-size: 32px;
					vertical-align: top;
				}
					.icon-jdl-content{
						height: 55px;
					}
			
				.left-content{
					width: 49%;
					margin-bottom: 0px;
					padding-right: 20px;
				}
				.right-content{
					width: 49%;
					min-height: 70vh;
					border-top: none;
					border-left: solid 1px #8a8a8a;
					padding-top: 0px;
					padding-left: 20px;
				}
						.isi-report{
							width: 90%;
						}
						.dl-report{
							width: 8%;
						}
		
	.box-marketing-material-guideline{
		margin-top: 2vh;
	}
		.marketing-material{
			width: 49.7%;
			height: 38vw;
		}
		
		
		.form-input-left{
			width: 48.5%;
			margin-right: 1.4%;
		}
			.upload-label{
				font-size: 16px;
			}
			.form-combo{
				width: 100%;
			}
				.form-combo-left{
					width: 100%;
					margin-bottom: 20px;
				}
				.form-combo-right{
					width: 100%;
					margin-bottom: 20px;
				}
			.form-cover{
				width: 100%;
				margin-bottom: 5px;
			}
				.gambar-cover{
					width: 32.7%;
					margin-bottom: 5px;
				}
		.form-input-right{
			width: 48.5%;
			margin-left: 1%;
		}
	
	.box-detail-info-report{
		margin-top: 50px;
		margin-bottom: 100px;
	}
		.header-report-m{
			display: none;
		}
		.header-report-w{
			display: block;
		}
			.detail-report-cat{
				font-size: 20px;
			}
			.detail-report-judul{
				font-size: 22px;
				line-height: 20px;
			}
				.share-icon{
					height: 24px;
				}
			.detail-report-by{
				font-size: 18px;
			}
			.detail-report-isi{
				font-size: 18px;
			}
			.frame-comment{
				font-size: 18px;
			}
			
		.box-info-quiz{
			margin-top: 30px;
			font-size: 24px;
		}
		.box-jenis-quiz{
			padding: 30px;
		}
			.box-quiz{
				width: 30%;
				padding: 20px;
				margin-bottom: 0px;
				margin: 0px 10px;
			}
				.box-no-quiz{
					font-size: 60px;
					line-height: 60px;
				}
				.box-des-quiz{
					font-size: 35px;
					line-height: 35px;
					padding-left: 20px;
				}
			
			.box-isi-quiz{
				width: 49%;
				font-size: 18px;
			}
			
			
			.incoming-live{
				margin-bottom: 30px;
				font-size: 26px;
			}
				.incoming-live img{
					height: 38px;
				}
			.judul-training{
				font-size: 28px;
			}
				.countdown-val{
					padding-top: 15px;
					width: 90px;
					height: 90px;
					font-size: 52px;
					margin: 10px;
					line-height: 35px;
				}
				.countdown-des{
					font-size: 12px;
				}
				.box-attend{
					margin-bottom: 100px;
				}
}


/*Laptop / Desktop*/
@media only screen
and (min-width: 1280px) {
		.box-login{
			width: 450px;
			padding: 50px 50px;
			padding-top: 120px;
			left: 55%;
		}
		
		.box-info-quiz{
			margin-top: 0px;
			font-size: 24px;
			padding: 50px;
		}
		.box-jenis-quiz{
			padding: 10px 50px;
		}
			.box-quiz{
				width: 30%;
				padding: 20px;
				margin-bottom: 0px;
				margin: 0px 10px;
			}
				.box-no-quiz{
					font-size: 60px;
					line-height: 60px;
				}
				.box-des-quiz{
					font-size: 35px;
					line-height: 35px;
					padding-left: 20px;
				}
		
		.box-detail-quiz{
			margin-top: 50px;
			margin-bottom: 100px;
		}
		
				.countdown-val{
					padding-top: 20px;
					width: 120px;
					height: 120px;
					font-size: 64px;
					margin: 10px;
					line-height: 45px;
				}
				.countdown-des{
					font-size: 16px;
				}
}


/*Desktop 1366*/
@media only screen
and (min-width: 1366px) {
			.content-menu{
				right: 0px;
			}
			
			.box-menu-pendek{
				height: 45vh;
			}
			.box-menu-panjang{
				height: 45vh;
			}
		.text-menu{
			font-size: 26px;
			padding: 30px;
		}
		
		.box-info-quiz{
			font-size: 26px;
			padding: 50px;
		}
		.box-jenis-quiz{
			padding: 10px 80px;
		}
			.box-quiz{
				padding: 30px;
			}
				.box-no-quiz{
					font-size: 64px;
					line-height: 64px;
				}
				.box-des-quiz{
					font-size: 38px;
					line-height: 38px;
					padding-left: 20px;
				}
			
		.box-detail-quiz{
			margin-top: 50px;
			margin-bottom: 120px;
		}
		
			.incoming-live{
				margin-bottom: 30px;
				font-size: 30px;
			}
				.incoming-live img{
					height: 50px;
				}
			.judul-training{
				font-size: 32px;
			}
			.detail-training{
				font-size: 22px;
			}
}


/*Desktop MAC*/
@media only screen
and (min-width: 1440px) {
		.box-login{
			width: 480px;
			padding: 100px 80px;
			padding-top: 200px;
			left: 53%;
		}
					.foto-profile{
						width: 70px;
						height: 70px;
					}
					.nama-profile{
						font-size: 26px;
						line-height: 70px;
					}
				.jdl-content{
					font-size: 38px;
				}
					.icon-jdl-content{
						height: 65px;
					}
					
			.cover-report{
				width: 150px;
				height: 150px;
				margin-right: 10px;
			}
				.jdl-user-report{
					font-size: 24px;
				}
				.cat-user-report{
					font-size: 24px;
				}
			
			.detail-report-cat{
				font-size: 24px;
			}
			.detail-report-judul{
				font-size: 28px;
				line-height: 28px;
			}
				.share-icon{
					height: 28px;
				}
			.detail-report-by{
				font-size: 22px;
			}
			.detail-report-isi{
				font-size: 22px;
			}
			.frame-comment{
				font-size: 22px;
			}
			
		.box-info-quiz{
			font-size: 32px;
			padding: 50px;
		}
		.box-jenis-quiz{
			padding: 10px 80px;
		}
			.box-quiz{
				padding: 30px;
			}
				.box-no-quiz{
					font-size: 64px;
					line-height: 64px;
				}
				.box-des-quiz{
					font-size: 38px;
					line-height: 38px;
					padding-left: 20px;
				}
		
		.box-detail-quiz{
			margin-top: 50px;
			margin-bottom: 150px;
		}
			.box-isi-quiz{
				font-size: 22px;
			}
}


/*Desktop Full HD MAC*/
@media only screen
and (min-width: 1680px) {
		.box-login{
			left: 58%;
		}
}


/*Desktop Full HD*/
@media only screen
and (min-width: 1920px) {
		.box-login{
			left: 60%;
		}
		
			.box-menu-pendek{
				height: 50vh;
			}
			.box-menu-panjang{
				height: 50vh;
			}
}