@import url('https://fonts.googleapis.com/css?family=Poppins');

* {
    -webkit-font-smoothing: antialiased;
}
body {
	font-family: "Poppins", Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 24px;
	font-weight:normal !important;
	color: #333333;
	font-weight : 400;
	background: url(../images/bg.home.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
	padding-top:0px;
}

html {
      font-size   : 1em;
      line-height : 1.4;
}


::-moz-selection {
  background  : #b3d4fc;
  text-shadow : none;
}

::selection {
  background  : #b3d4fc;
  text-shadow : none;
}


a,
a:active,
a:focus,
a:active {
    text-decoration:none !important;
    outline:none
}

a {
	color           : #444;
	text-decoration : none;
	transition      : all 0.2s ease 0s;
}

a:hover,
a:focus {
	color           : #197a41;
	text-decoration : underline;
}

label,
th{
  font: 600 15px/1.4em ;
}
h4, .h4 {
	line-height:28px;
	}

strong{
}
/* Global Margin for all block
----------------------------------*/
.m-0{
	margin: 0 !important
}
.mt-0{
    margin-top:0 !important;
}
.m-5{
	margin:5px;
	}
.ml-0{
    margin-left:0 !important;
}
.mr-0{
    margin-right:0 !important;
}
.mt-5{
	margin-top:5px !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mt-10 {
margin-top: 10px !important;
}

.mt-15 {
margin-top: 15px !important;
}
.ml-15 {
margin-left: 15px !important;
}


.mt-30 {
margin-top: 30px !important;
}

.mt-50 {
margin-top: 50px !important;
}

.mb-0 {
margin-bottom: 0 !important;
}
.mb-15 {
margin-bottom: 15px !important;
}
.mb-50 {
margin-bottom: 50px !important;
}
.mt-100 {
margin-top: 100px !important;
}


.p-0{
	padding: 0 !important
}
.pt-0{
	padding-top: 0 !important
}
.pl-0{
  padding-left: 0 !important
}
.pr-0{
  padding-right: 0 !important
}
.pb-0{
	padding-bottom: 0 !important
}
.p-7{
	padding:7px;
}

.p-10{
	padding:10px;
}
.p-15{
	padding:15px;
	}

.p-20{
	padding:20px;
}
/*--------------------------------
  Border
----------------------------------*/
.bt-none{
	border-top: none !important;
}
.relative{
	position: relative !important;
}
/*--------------------------------
  Page Wrapper
----------------------------------*/
.wrapper {
    overflow:hidden
  }

/* Non-responsive overrides
 *
 * Utilitze the following CSS to disable the responsive-ness of the container,
 * grid system, and navbar.
 */

/*--------------------------------
  Reset Container
----------------------------------*/
.container {
  max-width: none !important;
}

.img-gray-border{
	border: 6px solid #dcdbdb;
}
.img-thumbnail.blue{
	background:#1f7bb8;
}
.img-fluid,
.fluid{
  width: 100% !important
}
.inline-block{
  display: inline-block;
}
.img-user-avatar img{
  width: 100%;
}

.intro{
	text-align:center;
	font-size:18px;
	color:#ffffff;
	width:100%;
	padding:20px;
	float:left;
	background-color:rgba(0, 0, 0, 0.5);
	margin:20px 0px 20px 0px;
	border-radius:20px;
	}

.level{
	float:left;
	width:100%;
	}
.level-item{
	width:100%;
	float:left;
	margin:2px;
	padding:5px;
	border:1px solid #FFFFFF;
	color:#FF9933;
	border-radius: 10px;
	font-weight:bold;
	}
.level-item-active{
	width:100%;
	float:left;
	margin:2px;
	padding:5px;
	border:1px solid #FFFFFF;
	background:#FF9933;
	color:#993300;
	border-radius: 10px;
	font-weight:bold;
	}

.soal{
	position:relatif;
	margin-top:350px;
	width:100%;
	float:left;
	}

.notif{
	position:absolute;
	top:40px;
	width:auto;
	}

.notif-success{
	text-align:center;
	font-size:18px;
	color:#ffffff;
	width:100%;
	padding:20px;
	font-size:22px;
	float:left;
	background-color:rgba(101, 145, 7, 0.8);
	margin:20px 0px 20px 0px;
	border-radius:50px;
	border:2px solid #FFFFFF;
	line-height:38px;
	}

.notif-end{
	text-align:center;
	font-size:18px;
	color:#ffffff;
	width:100%;
	padding:20px;
	font-size:22px;
	float:left;
	background-color:rgba(190, 49, 6, 0.8);
	margin:20px 0px 20px 0px;
	border-radius:50px;
	border:2px solid #FFFFFF;
	line-height:38px;
	}


.soal-item{
	text-align:center;
	font-size:18px;
	color:#ffffff;
	width:100%;
	padding:20px;
	font-size:18px;
	float:left;
	background-color:rgba(0, 0, 0, 0.8);
	margin:20px 0px 20px 0px;
	border-radius:50px;
	border:2px solid #FFFFFF;
	}
.jawaban-item{
	float:left;
	width:50%;
	margin:5px 0px 5px 0px;
	background-color:rgba(0, 0, 0, 0.8);
	border-radius:50px;
	border:2px solid #FFFFFF;
	padding:8px 20px 8px 20px;
	color:#FFFFFF;
	text-align:center;
	font-size:18px;
	white-space: pre-wrap;
	}
.jawaban-item2{
	float:left;
	width:50%;
	margin:5px 0px 5px 0px;
	background-color:rgba(0, 0, 0, 0.8);
	border-radius:50px;
	border:2px solid #FFFFFF;
	padding:8px 20px 8px 20px;
	color:#FFFFFF;
	text-align:center;
	font-size:18px;
	}

.jawaban-item:hover{
	background-color:#FF6600;
	color:#FFFFFF;
	}
.jawaban-lock{
	background-color:#FF6600;
	color:#FFFFFF;
	}
.jawaban-right{
	background:url(../images/bg.right.gif) repeat;
	color:#FFFFFF;
	}
.jawaban-salah{
	background-color:#c93204;
	color:#FFFFFF;
	}
.nominal{
	font-size:48px;
	font-weight:bold;
	text-decoration:blink;
	animation: blinker 1s linear infinite;
	}
@keyframes blinker 
{  
  50% { opacity: 0; }
}
.count{
	padding:30px;
	font-size:50px;
	border-radius:50%;
	border:2px solid #FFFFFF;
	top:150px;
	width:150px;
	height:150px;
	position:relative;
	color:#FFFFFF;
	}
.btn-sec{
	padding:20px;
	font-size: 15px;
	}
.bantuan{
	float:right;
	margin-bottom:-90px;
	padding-top:20px;
	}