body{
	font-family:"Noto Sans";
}

.container {
	position:static;
	margin-left:500px;
	padding-top:40px;
	float:center;
}

.image-center{
	padding-top:50px;
	padding-bottom:50px;
	text-align:center;
}

.teks {
	font-family: "Noto Sans";
	text-align: center;
	color: #4C84FF;
	font-weight: bold;
	margin-top: 75px;
}

hr{
 margin: 10px -50px;
 border: 0;
 border-top: 1px solid #ccc;
 margin-bottom: 25px;
}
 
div.main{
 border-radius: 25px;
 background:#FFFFFF;
 width: 50%;
 padding: 10px 50px 30px;
 border: 1px solid #DFE0E3;
 font-family: raleway;
 float:center;
 margin-top:125px;
}

input[type=submit]{
 font-size: 16px;
 background: #4C84FF;
 color: #FFFFFF;
 font-weight: bold;
 cursor: pointer;
 width: 100%;
 padding: 10px 0;
 outline:none;
}

label{
 font-size: 14px;
 font-weight: bold;
 color:#000 ;
}

/*style untuk popup */	
#popup {
background-image: url("../images/bg.png");
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
-webkit-animation:autopopup 2s;
-moz-animation:autopopup 2s;
animation:autopopup 2s;
}

#popup:target {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
opacity: 0;
visibility: hidden;
}

.sticky{
    background-color:#0066c8;
    color : #ffffff;
    width:100%;
    padding:8px;
	font-family: "Ringbearer" !important ;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	div.main{
	 background:#FFFFFF;
	 width: 100%;
	 padding: 10px 15px 10px;
	 border: 1px solid #DFE0E3;
	 font-family: raleway;
	 float:center;
	 margin-top:15px;
	}
	
	.teks {
	font-family: "Noto Sans";
	text-align: center;
	font-size: 22px;
	color: #4C84FF;
	font-weight: bold;
	margin-top: 5px;
	}
}

/* small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	div.main{
	 background:#FFFFFF;
	 width: 66%;
	 padding: 10px 15px 10px;
	 border: 1px solid #DFE0E3;
	 font-family: raleway;
	 float:center;
	 margin-top:10px;
	}
	
	.teks {
	font-family: "Noto Sans";
	text-align: center;
	font-size: 26px;
	color: #4C84FF;
	font-weight: bold;
	}
}

/* Medium devices devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	div.main{
	 background:#FFFFFF;
	 width: 66%;
	 padding: 10px 15px 10px;
	 border: 1px solid #DFE0E3;
	 font-family: raleway;
	 float:center;
	 margin-top:10px;
	}
	
	.teks {
	font-family: "Noto Sans";
	text-align: center;
	color: #4C84FF;
	font-weight: bold;
	margin-top: 10px;
}
}

/*  large devices (laptop/desktop, 992px and up) */
@media only screen and (min-width: 992px) {
	div.main{
	 background:#FFFFFF;
	 width: 50%;
	 padding: 10px 30px 30px;
	 border: 1px solid #DFE0E3;
	 font-family: raleway;
	 float:center;
	 margin-top:30px;
	}
	
	.teks {
	font-family: "Noto Sans";
	text-align: center;
	color: #4C84FF;
	font-weight: bold;
	margin-top: 5px;
}
}