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

body { margin:0; padding:0;color: #2b2a29; font-family:Arial; background:rgba(0, 0, 0, 0) url("../images/beamon-bg.jpg") no-repeat fixed center top ; overflow-x:hidden;}

.clear { clear:both; }
.contianer { width:80%; margin:0 auto; position: relative;}
.inner-content {background:#FFFFFF url(../images/subpage_bg.jpg) top center no-repeat; padding: 0 20px 15px; }
.img-responsive { max-width:100%; }
.logo { float: left; width: 192px; }
.qrcode { float: right; }
.qrcode img {
    margin: 0 0 0 40px;
    width: 70px;
}
.qrcode p {
    float: left;
    font-size: 16px;
    margin: 0 0 0 15px;
    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;    color: #002469;}
.text-content p {
    color: #4a4849;
    font-size: 17px;
    font-style: italic;
    margin: 0;
}
.shapes{ text-align:center;    margin: 0 auto; width: 600px;}
	
h1 {
    text-align: center;
}
.shapes ul { padding:0; margin-bottom: 0; }
.shapes ul li { display:inline-block; list-style: outside none none; padding-right:5px; padding-left:5px; padding-bottom: 0px; width: auto !important;}
.shapes ul li img { cursor: pointer; height: 92px !important; width: auto !important; }
.c-area-wrap {
	width:100%;
    margin: 0;
   
}
.all_shapes {
    display: block;
    margin: 18px 0;
    width: 100%;
}
.inner-wrapper > img {
    width: 105px;
}

.box {
    border: 5px solid #000;
    border-radius: 10px;
    margin: 25px 0;
    overflow: hidden;
    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;
    float: left;
    font-size: 26px;
    text-align: center;
    width: 50%;
}


.inner-wrapper h3 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #002469;
    font-size: 23px;
    margin: 15px 0;
}
.data_s {
    float: left;
    width: 50%;
}
.inner-wrapper table { width: 100%; border-collapse: collapse; }
.inner-wrapper table td { 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: 14px; padding: 2px 10px; text-decoration: none; position: relative; top:-2px; }

.instrutons {
     background-image:url(../images/final_arrow2.png);
    float: left;
}
.instr_img > img {
    height: 56px;
    left: 31%;
    position: absolute;
    top: 0;
    width: 180px;
}

.instrutons_cont {
    left: 36%;
    position: absolute;
    top: 15px;
}
.blink_me {
                -webkit-animation-name: blinker;
                -webkit-animation-duration: 4s;
                -webkit-animation-timing-function: linear;
                -webkit-animation-iteration-count: infinite;

                -moz-animation-name: blinker;
                -moz-animation-duration: 4s;
                -moz-animation-timing-function: linear;
                -moz-animation-iteration-count: infinite;

                animation-name: blinker;
                animation-duration: 4s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }
            @-moz-keyframes blinker {  
                0% { opacity: 1.0; }
                50% { opacity: 0.0; }
                100% { opacity: 1.0; }
            }
            @-webkit-keyframes blinker {  
                0% { opacity: 1.0; }
                50% { opacity: 0.0; }
                100% { opacity: 1.0; }
            }
            @keyframes blinker {  
                0% { opacity: 1.0; }
                50% { opacity: 0.0; }
                100% { opacity: 1.0; }
            }
.inner-wrapper p a {
    background: rgba(0, 0, 0, 0) linear-gradient(#4a4c4b, #9e9797) repeat scroll 0 0;
    border: 1px solid #353232;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    padding: 2px 10px;
    text-decoration: none;
}
.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;  color: #2b2a29; }
.area-calculation .green { background: #008000 none repeat scroll 0 0; }
.area-calculation .yellow{ /*background:rgb(255, 191, 0); */}
.area-calculation input[disabled] {background-color: #fff; 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 {
    float: left;
     margin: -18px 20px 0 0;
    padding: 0;
    width: 15%;
}
.roller {
    background: #fff none repeat scroll 0 0;
    margin: 7px 1px 0;
    padding: 22px 10px 9px 12px;
}
.inner-wrapper input {
    border-radius: 5px;
    color: #295d29;
    font-size: 15px;
    font-weight: inherit;
    height: 28px;
	  margin: 0 0 0 10px;
    text-align: center;
	border: 1px solid #373635;
    width: 80px;
}

.content_area {
    float: left;
    width: 70%;
}
.text-content h1 {
    color: #008ddd;
    font-family: "Open Sans Condensed",sans-serif;
    font-size: 35px;
    font-style: normal;
    font-weight: bolder;
    line-height: 50px;
    margin: 0;
    padding: 0;
    text-align: left;
}
.inner-wrapper span {
    margin: 0 25px;
}
.c-area-wrap tr td,.c-area-wrap tr th,.c-area-wrap p{font-size: 18px;
    font-weight: inherit;color:#2b2a29;}
.thin-head {color:#2b2a29; font-size: 18px; font-weight: bold; padding: 0; text-align: center; }
.check-id { text-align: center; }
.check-id span { left: 10px; position: relative; top: -7px; }

.text-content {
    clear: both;
}
footer { color: #002469; font-size: 14px; font-style: italic;  text-align: center; }
.c-area-wrap .area-wrapper:first-child{ display:block; }
.c-area-wrap .area-wrapper {
    display: none;
    margin-top: 11%;
}
.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: #002469; }
.popup-static { background: rgba(0, 0, 0, 0) url("../images/background.png") no-repeat fixed center top / 100% auto; box-shadow: -11px 0 50px 10px #000; padding: 15px 20px; margin: 0 auto; width: 75%; }
.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: #002469; font-size: 18px; }
.summary-data input { border: 1px solid #373635; border-radius: 5px; height: 28px; width: 80px; font-size: 18px; font-weight: bold; text-align:center; }
input.red { 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 15px; padding: 18px; }
.popup-static h1 { margin-top: 0; text-align: center; }
.shapes{  padding: 0 25px;}
.all_shapes > span {
    font-size: 12px;
}
.you_tube > img {
    float: left;
    height: 50px;
    margin-left: 12%;
    margin-top: 3px;
    width: 60px;
}
.header_part{}
.container{    /*background-color: #d0d2d4;*/
    display: block;
    margin: 0 auto;
    overflow: hidden;
     width:960px;}



.inner-value {
    background: rgba(0, 0, 0, 0) url("../images/value-bar.png") no-repeat scroll 0 0;
    height: 395px;
    position: relative;
}
#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; }
.pop-up-div { height: 100%; left: 0; overflow: hidden;  position: fixed; top: 0; width: 100%; display:none; background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;}

@media only screen and (max-width: 1050px) {
	.inner-wrapper input{margin: 0 0 0 6px;}
}
@media only screen and (max-width: 980px) {
	.area-wrapper{   margin: 10px 5% 10px 0; padding:0;}
	.all_shapes {
    float: left;
    width: 75%;
}
.shapes{width:80%;}
.data_s {
    float: none;
    margin: 0 auto;
    padding: 10px 0 25px;
    width: 80%;
}

.inner-wrapper {
    float: none;
    margin: 0 auto;
    text-align: center;
    width: 80%;
}
.value_selection {
    width: 20%;
}
}
@media only screen and (max-width: 767px) {
	.data_s,.inner-wrapper{width:100%;}
	
.summary-data {
    margin: 0 auto;
    width: 90%;
}
	}
@media only screen and (max-width: 600px) {
.area-calculation{font-size:25px;}
.c-area-wrap tr td, .c-area-wrap tr th, .c-area-wrap p{font-size: 16px;}	
.container{width:100%;}

.qrcode img {
    width: 50px;
}
.all_shapes{width:79%;}
.qrcode{float:none;}
.qrcode p{ padding: 15px 7px;}	
}
@media only screen and (max-width: 480px) {
	
.value_selection {
    width: 25%;
}
.all_shapes {
    width: 75%;
}
.c-area-wrap tr td, .c-area-wrap tr th, .c-area-wrap p {
    font-size: 13px;
}

.inner-wrapper span {
    display: block;
    margin: 0 25px;
}
.inner-wrapper p a{font-size: 14px;  display: block;  margin: 10px 0;}

.inner-wrapper input {
    display: block;
    margin: 10px auto;
    text-align: center;
    width: 50px;
	font-size:14px;
}

.inner-wrapper h3 {
    color: #002469;
    font-size: 20px;
}

.shapes h4 {
    font-size: 20px;}
	
.inner-wrapper > img {
    width: 100px;
}

.area-calculation,.area-calculation input[disabled] {
    font-size: 20px;
}
.summary-data input{width:50px;}

.all_shapes > span {
    font-size: 14px;
}
}
@media only screen and (max-width: 360px) {
	.value_selection {
    width: 30%;
}
h1 {
    font-size: 20px;
}
.all_shapes {
    width: 70%;
}
}