@charset "utf-8";
/* CSS Document */
@import url('fonts.css');

body { margin:0; padding:0; font-family:Arial; background:rgba(0, 0, 0, 0) url("../images/beamon-bg.png") no-repeat fixed center top / 100% auto; overflow-x:hidden;}
* {	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; }
.clear { clear:both; }
.contianer { width:700px; margin:0 auto; position: relative;}
.inner-content { background:rgba(0, 0, 0, 0) url("../images/background.png") no-repeat fixed center top / 100% auto; padding:15px 20px; }
.img-responsive { max-width:100%; }
.logo { float: left; width: 192px; }
.qrcode { float: right; }
.qrcode img { width: 70px;}
.qrcode p { float: left; margin: 0; padding: 15px 20px; text-align: center; }
.text-content h4 { font-size: 35px; font-weight: normal; margin: 0; }
.shapes h4 { font-size: 28px;  margin: 10px 0 0; text-align:center;}
.text-content p { font-size: 17px; margin: 0; }
.shapes{ text-align:center;}
.shapes ul { padding:0; margin-bottom: 0; }
.shapes ul li { display:inline-block; list-style: outside none none; padding-right:15px; padding-left:15px; padding-bottom: 0px; width: auto !important;}
.shapes ul li img { cursor: pointer; height: 92px !important; width: auto !important; }
.c-area-wrap { width:320px; margin:0 auto }
.area-wrapper{ margin:10px 0; border: 5px solid #353232; padding: 20px; background: linear-gradient(#33395d, #0583bf); background: -moz-linear-gradient(#33395d, #0583bf); background: -o-linear-gradient(#33395d, #0583bf); background: -webkit-linear-gradient(#33395d, #0583bf); }
.inner-wrapper { color: #fff; font-size: 26px; text-align: center;}
.inner-wrapper table { width: 100%; border: 2px solid #353232; border-collapse: collapse; }
.inner-wrapper table td { border-bottom: 1px solid #353232; padding: 5px 0; }
.inner-wrapper table tr:last-child td { border-bottom: 0px solid; padding: 5px 0; }
.inner-wrapper table td a{ background: linear-gradient(#4a4c4b, #9e9797); background: -moz-linear-gradient(#4a4c4b, #9e9797); background: -o-linear-gradient(#4a4c4b, #9e9797); background: -webkit-linear-gradient(#4a4c4b, #9e9797); border:1px solid #353232; border-radius: 5px; color: #fff;     font-size: 23px; padding: 2px 10px; text-decoration: none; position: relative; top:-2px; }
.inner-wrapper table td a:hover, .inner-wrapper table td a.active{ background: linear-gradient(#f9e800, #ece8ac); background: -moz-linear-gradient(#f9e800, #ece8ac); background: -o-linear-gradient(#f9e800, #ece8ac); background: -webkit-linear-gradient(#f9e800, #ece8ac); color:#000; }
.common-mm { padding: 2px 20px !important; }
.result { font-size: 22px; }
.result input { padding: 0px 5px; text-align: center; width: 70px; font-weight:bold; font-size:25px; border:1px solid #000;}
.area-calculation { font-size: 35px; font-weight: bold; padding-top: 25px; text-align: center; }
.area-calculation .green { background: #008000 none repeat scroll 0 0; }
.area-calculation .yellow{ background:rgb(255, 191, 0); }
.area-calculation input[disabled] { border: 1px solid #000; border-radius: 5px; color: #353232; font-size: 30px; font-weight: bold; text-align: center; width: 128px; }
.layout-slider { margin: 0 auto; width: 628px; }
.value_selection { padding-top: 45px; }
.thin-head { color: #fff; font-size: 24px; font-weight: bold; padding: 0 0 20px; text-align: center; }
.check-id { text-align: center; }
.check-id span { left: 10px; position: relative; top: -7px; }
footer { color: #fff; font-size: 14px; font-style: italic; padding-top: 50px; text-align: center; }
.c-area-wrap .area-wrapper:first-child{ display:block; }
.c-area-wrap .area-wrapper{ display:none; }
.flex-direction-nav { height: 100%; position: absolute; top: 0; width: 100%;}
.supplimentry-pop img { height: 170px; }
.supplimentry-pop { position: absolute; right: 91px; top: 0; padding: 25px 0; }
.calc-area { position: relative; }
.supplimentry-pop span { font-size: 17px; font-weight: bold; left: 35px; margin-top: -20px; position: absolute; text-align: center; top: 50%; }
.supplimentry-pop a { color: #000; }
.popup-static { height: 100%; position: absolute; top: 0; width: 100%;  background:rgba(0, 0, 0, 0) url("../images/background.png") no-repeat fixed center top / 100% auto; padding:15px 20px; z-index: 99999; }
.popup-static .supplimentry-pop { padding: 10px 15px; right: 0; }
.popup-static .supplimentry-pop a { color: #fff; text-decoration: none; font-weight:bold;}
.popup-static h1 { text-align: center; }
.summary-data { margin: 0 auto; width: 360px; }
.summary-data table { width: 100%; color: #fff; font-size: 18px; }
.summary-data input { border: medium none; border-radius: 2px; height: 28px; width: 80px; font-size: 18px; font-weight: bold; text-align:center; }
input.red { background: red none repeat scroll 0 0; color: #fff; }
.summary-data span { font-size: 14px; position: relative; top: 15px; }
.bordered { border: 1px solid yellow; border-radius: 2px; margin-top: 28px; padding: 15px; }
.bordered td { padding: 10px; }
.bordered img { padding-top: 10px; width: 100px;}
.pop-border { border: 3px solid rgb(85, 85, 85); border-radius:15px; margin: 22px 110px; padding: 18px; }
.popup-static h1 { margin-top: 0; text-align: center; }
.inner-value { background: rgba(0, 0, 0, 0) url("../images/value-bar.png") no-repeat scroll 25px 23px; height: 77px; }
#preloader { position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; overflow: visible; background: #fff url('../images/loading.gif') no-repeat center center; }