body{margin:0;padding:0;clear:both;background:#b3d4f3;font-family: 'Myriad Pro', 'Trebuchet MS', sans-serif;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
input,button{outline:none;}
.main{width:100%;min-height:610px;padding:0;}
.header{margin:0;padding:10px 0;background-color:#3192ec;}
.header img{margin:0 10px;padding:0;}

.box-login{float:left;margin:20px;width:28%;border:5px solid #548f29;border:0px solid #adcae4;box-shadow: 0px 0 6px inset rgba(0, 0, 0, 0.4);position:relative;padding:15px;background-color:#fff;}
.box-login h2{margin:5px 0;padding:0;color:#06365b;font-size:22px;font-family:Bookman Old Style;}
.box-login label{width:100%;font-size:20px;font-family:arial;color:#2a530d;}
.box-login .icon{font-size:17px;font-family:arial;color:#3d861c;position:absolute;left:30px;margin-top:16px;}
.box-login   input::-moz-placeholder{color:#bbb1ab;}
.box-login  input::-ms-input-placeholder{color:#bbb1ab;}
.box-login  input::-webkit-input-placeholder{color:#bbb1ab;}
.box-login input[type="text"]{width:100%;padding:10px 10px;font-size:20px;margin:5px 0;  border: 1px solid #d9d9d9;color:#0d3806;border-radius:5px;}
.box-login input[type="password"]{width:100%;padding:10px 10px;font-size:20px;margin:5px 0;  border: 1px solid #d9d9d9;color:#0d3806;border-radius:5px;}
.box-login button{background-color: #ffe63e; box-shadow: 0px 0 2px inset rgba(0, 0, 0, 0.4);  border-radius:5px;  margin: 0;  display: block;  padding: 10px 0;  width: 100%;  font-size: 20px;  font-weight: bold;  border: 0;  cursor:pointer;  color:#662b0b;}

.informasi{float:right;box-shadow: 0px 0 2px inset rgba(0, 0, 0, 0.4);width:890px;min-height:100px;margin:20px;background:#fff;border-radius: 5px;}
.informasi h1{margin:0 0 10px 0;box-shadow: 0px 0px 2px inset rgba(0, 0, 0, 0.4);padding:5px 10px;background-color:#5a94ca;color:#fff;font-size:22px;border-radius: 5px 5px 0 0;}
.informasi .detail{margin:0;padding:5px 10px;border-bottom:1px solid #e5e8ea;}
.informasi .detail h2{margin:0;padding:0;color:#323232;font-size:18px;}
.informasi .detail .date{color:#d98002;margin:0;padding:0;font-size:15px;}
.informasi .detail p{margin:0;padding:5px 0;color:#043c3e;font-size:18px;text-align: justify;}

.Radio{margin-top:10px;margin-bottom:10px;height:35px;}
.Radio input[type="radio"]{display:none;}
.Radio label{display:block;position:relative;padding:9px 5px 10px 28px;cursor:pointer;width:auto;margin-right:10px;float:left;text-align:left;color:#022f52;font:bold 15px arial;}
.Radio label:before{content:'';position:absolute;top:7px;left:0;background:#FFF;border-radius:5px;border:2px solid #777;width:20px;height:20px;}
.Radio label:after{content:'';background:#666;position:absolute;top:5px;left:0;border-radius:2px;width:30px;height:20px;opacity:0;filter:alpha(opacity=0);}
.Radio input[type="radio"]:checked + label:before{border-color:#666;}
.Radio input[type="radio"]:checked + label:after{opacity:1;filter:alpha(opacity=100);width:12px;height:12px;top:11px;left:4px;}

.clear{clear:both;height:10px;}
.footer{border:0;padding:15px;text-align:center;background:#4893d9;color:#fff;border-top:1px solid #ddd;position:relative;bottom:0;}
.footer a{text-decoration:none;color:#fdd08f;}

@media only screen and (min-width: 320px) and (max-width:768px){
.main{width:100%;min-height:auto;padding:10px;}
.header{margin:0;padding:0 0;}
.header img{margin:0 0;padding:0;width:100%;}
.box-login{margin:10px 0 0 0;width:100%;}
.box-login button{width:100%;}

.informasi{float:left;width:100%;min-height:auto;margin:10px 0 0 0;}
.informasi h1{font-size:18px;}
.informasi .detail{margin:0;padding:5px 10px;}
.informasi .detail h2{margin:0;padding:0;font-size:15px;}
.informasi .detail .date{font-size:14px;}
.informasi .detail p{font-size:14px;}
}