hr {color:#fff;}
*{margin:0; padding:0}
body{font-family: sans-serif;color:#fff;height:100%}
#awakna {position:fixed;left:0;top:0;right:0;bottom:0;background:#ccc url('../images/gambar.jpg') no-repeat center center;background-size:cover;}
#masuk {background:#fff;width:34%;opacity:0.8;padding:0;position:fixed;left:33%;top:0;bottom:0;z-index:20;overflow-y:auto;}
input {max-width:100%}
.form{width:95%;margin:10px auto; color:#333;border-top:5px solid #ccc;padding-top:5px;}
.header{padding:5px;}
.header h2{font-size:20px;color:#fff; text-align:center}
.login{padding:0 10px;text-align:center}
.login span.un{width:10%; text-align:center; color:blue; border-radius:3px 0 0 3px}
.login span.un .fa {font-size:35px;}textarea, select,.text{background:#fff; width:90%; border:1px solid #ddd;border-radius:0 3px 3px 0; outline:none; font-family: 'Source Sans Pro', sans-serif;padding:11px;} select,.text,.login span.un{display:inline-block; vertical-align:top; line-height:10px; background:#fff;}
.btn{height:40px; border:none; background:blue; width:90%; margin:10px auto;outline:none; font-family: 'Source Sans Pro', sans-serif; font-size:16px; font-weight:bold; color:#fff; border:solid 3px orange; border-radius:3px; cursor:pointer}
.btn:hover {background:black;color:yellow;}
ul li{margin:15px 0; list-style:none}
.span{display:table; width:100%; font-size:14px;}
.ch{display:inline-block; width:50%; color:#CCC}
.ch a{color:#CCC; text-decoration:none}
.ch:nth-child(2){text-align:right}
.social{height:30px; line-height:30px; display:table; width:100%}
.social div{display:inline-block; width:42%; color:#eee; font-size:12px; text-align:center; border-radius:3px}
.social div i.fa{font-size:16px; line-height:30px}
.fb{background:#3B5A9A; border-bottom:solid 3px #036} .tw{background:#2CA8D2; margin-left:16%; border-bottom:solid 3px #3399CC}
.sign{width:100%; padding:0; margin:0;display:table; text-align:center;}
.sign div{display:inline-block; width:100%; color:#ccc; font-size:13px}
.up{text-align:center}
#verifi td p, #verif td p {padding:3px 10px;background:blue;border-radius:0;color:#fff;height:40px}
#verifi td p input, #verif td p input{background:#FFF;border-radius:0;color:#000;text-align:center;width:98%;}

.up a{display:inline-block; background:blue; text-align:center; margin:0 0 10px 0;padding:10px 0; width:48%; font-size:14px; text-decoration:none; color:#eee; border-bottom:solid 2px #336699; font-weight:bold;}
.up a:hover {background:black;}
.loader1 {width:300px;position:fixed;z-index:999999999;background:blue;left:50%;margin-left:-150px;top:46%;color:#fff;border-radius:1px;}
 .textx {
 
  width: 94%;margin:10px auto;
  overflow: hidden;position:relative;
 
}
  .loader {
  height: 12px;
  width: 94%;margin:10px auto;
  overflow: hidden;position:relative;
  background-color: #82CAFF;
}
.loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -100px;
  width: 100px;
  height: 12px;
  background-color: #fff;
  animation: loading 0.7s linear infinite;
}

@keyframes loading {
    from {left: -100px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}
@media(max-width:1000px){#masuk {background:#fff;width:50%;padding:0;position:fixed;left:25%;top:0;bottom:0;z-index:20;overflow-y:auto;}}
@media(max-width:800px){#masuk {background:#fff;width:60%;padding:0;position:fixed;left:20%;top:0;bottom:0;z-index:20;overflow-y:auto;}}
@media(max-width:580px){ .form{width:100%}
#masuk {background:#fff;width:80%;padding:0;position:fixed;left:10%;top:0;bottom:0;z-index:20;overflow-y:auto;}
}
.links{width:300px; margin:0 auto; height:50px}
.links a{display:block; float:left; height:40px; line-height:40px; padding:0 20px; background:#fff; text-decoration:none; margin-left:5px; font-size:16px; font-weight:bold; color:#09F}