@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800";
@import "https://fonts.googleapis.com/css?family=Philosopher:300,400,700,800";
					

body {font-family: 'Open Sans'; font-size: 13px; background: #eee;}
.relative {position: relative;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.aplus {
max-width: 800px; width: auto; display: block; padding: 15px; height: auto; margin: 0 auto;
}
.wells {box-shadow: 0 0 15px #aaa; border-radius: 6px; overflow: hidden;}
.wells .nom {position: absolute; top: 15px; right: 15px; z-index:200; background: #76cdd5; font-weight: 700; color: #fff; padding: 4px 15px; border-radius: 20px; text-decoration: none;}
.atable {width: 100%; height: 100px; border: 0; text-align: center; background: #580212;}
.aleft {width: 150px; padding: 10px 15px;}
.xleft {width: 160px; padding: 15px 10px; }
.aleft img {width: 100%;}
.xleft img {width: 100%; margin-right: 125px;}
.aright {text-align: left; color: #cefc53; padding: 0 5px 0 0;}
.aright h1 {margin: 5px 0; font: 800 22px/20px 'Open Sans'; color: #fff;}
.aright h2 {margin: 5px 0; font: 800 18px/16px 'Open Sans'; color: #fff;}
.aright h3 {margin: 5px 0; font: 400 16px/14px 'Open Sans'; color: #fff;}
.allert {padding: 10px; background: #f7f7f7; text-align: center; font-size: 18px;  color: #777;}
.allert strong {font-weight: 700; color: #f90;}


.aform {padding: 20px; background: #fff;}
.aform h4 {color: #555; text-align: center; font: 700 20px Philosopher;}
.aform h4 span {color: #f22;}

.aform h2 {font: 800 30px/30px 'Open Sans'; color: #3a0677; letter-spacing: -1px; text-align: center;}
.ainput {padding: 0; height:39px; background: #f7f7f7; border: 1px solid #ddd; margin: 15px 0; overflow: hidden;}
.cari {border:0 ! important; background: #f7f7f7; position: absolute; top:0; bottom:0;
right:0; left:0; z-index: 10; line-height:39px; padding: 0 15px; width:90%;}
.cari:focus {border:0 ! important; background: #f7f7f7; }
.subm {position:absolute; top:0; bottom:0; right:0; padding: 0 30px; border: 0;background: #C71585; color: #fff;
font-size: 20px; font-weight: 700; font: 700 20px Philosopher; z-index: 30;}
.red {font-weight: bold; color: #f22;}

.ahasil {padding: 0 20px;}
.thasil {border:0; margin-bottom: 8px;}
.thasil .green {background: #5e6f5a; color: #fff; font-weight: bold; font-size: 14px;}
.thasil .green td {border: 1px solid #777;}
.thasil td {border: 1px solid #ddd; margin-bottom: -1px; padding: 3px 8px; font-size: 14px;}
.ahasil p {font-size: 14px; text-align: right;}

.affoot {background:#fff; padding: 20px; text-align: center;}
.afoot {padding: 15px 20px; font-size: 13px; background:#860419; color: #fff; clear: both;}
.fleft {float: left; width: 50%}
.copy {float: right; width: 50%; text-align: right;}
.copy a {color: #cefc53; font-weight: bold;}

@media screen and (max-width:720px) {
.aright h3 {font: 400 14px/16px 'Open Sans';}
.aright h1 {font: 800 22px/22px 'Open Sans';}
.aright h2 {font: 800 28px/30px 'Open Sans';}
}

@media screen and (max-width:640px) {
.xleft {width: 140px; padding: 10px 15px;}
.aleft {width: 140px; padding: 10px 15px;}
.aright h3 {font: 400 14px/14px 'Open Sans';}
.aright h1 {font: 800 18px/18px 'Open Sans';}
.aright.aleft {display:none;} h2 {font: 800 24px/26px 'Open Sans';}
.aright.xleft {display:none;} h2 {font: 800 24px/26px 'Open Sans';}
}

@media screen and (max-width:600px) {
.aright h3 {font: 400 13px/13px 'Open Sans';}
.aright h1 {font: 800 16px/16px 'Open Sans';}
.aright h2 {font: 800 22px/24px 'Open Sans';}
}

@media screen and (max-width:520px) {
.xleft {display:none;}
.aleft {display:none;}
.aright {padding: 50px 15px 15px; text-align: center;}
.wells .nom {position: absolute; top: 15px; right: 50%; margin-right: -60px;}
.aform h2 { font: 800 22px/24px 'Open Sans';}
}

@media screen and (max-width:480px) {
.aform h4 {font: 700 16px Philosopher;}
.aright h3 { font: 400 13px/13px 'Open Sans';}
.aright h1 { font: 800 18px/18px 'Open Sans';}
.aright h2 { font: 800 24px/26px 'Open Sans';}

.fleft, .copy {width: 100%; text-align: center;}
}
@media screen and (max-width:360px) {
.aplus {padding: 0;}
.aright {padding: 50px 8px 15px;}
.aright h3 { font: 400 12px/12px 'Open Sans';}
.aright h1 {font: 800 16px/16px 'Open Sans';}
.aright h2 { font: 800 20px/22px 'Open Sans';}
.aform h2 {font: 800 22px/24px 'Open Sans';}
.subm {padding: 0 15px; }
}

@media screen and (max-width:320px) {
.aright h2 { font: 800 18px/20px 'Open Sans';}
.aform h2 {font: 800 18px/20px 'Open Sans';}
}