@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") 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; padding: 0 20px 15px; }
.img-responsive { max-width:100%; }
.logo { float: left; width: 192px; }
.qrcode {
    float: right;
    margin: -14px auto 0;
    padding-right: 84px;
    width: 170px;
}
.left_bemon_aerow{float:left;}
.slider {
    margin-top: 25px;
}
.qrcode img  {
    float: right;
    margin: 5px 0;
    width: 70px;
}

.qrcode p{
    float: left;
    font-size: 13px;
    margin-top: 15px;
    text-align: center;
}
.text-content h4 { font-size: 35px; font-weight: normal; margin: 0; }
.shapes h4 { font-size: 28px;  margin:0 0; text-align:center;    color: #002469;}
.text-content p {
    color: #4a4849;
    font-size: 17px;
    font-style: italic;
    margin: 0;
}
.shapes {
    margin: 0 auto;
    text-align: center;
    width: 550px;
	/*background:url(../images/slider_bg.png);*/
	background-size:auto 100%;
}
	
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 {
    margin: 0;
    overflow: hidden;
    width: 75.2%;
}
.all_shapes {
    display: block;
    float: left;
    width: 100%;
}

.shape_top {
    width: 100%;
}
.value_selection {
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
    width: 16%;
}

.inner-wrapper > img {
    display: block;
    height: 92px;
    margin: 0 auto;
    width: auto;
}
.left_bemon_aerow > span {
    float: left;
    font-size: 12px;
   
}
.box {
    border: 5px solid #373435;
    border-radius: 15px;
    margin: 0 0 10px;
    overflow: hidden;
    padding: 25px 50px 20px 0;

 /*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: 5px 0 15px;
}
.data_s > h1,.inner-wrapper > h1 {
    color: #002469;
    margin-top: 10px;
}



.inner-wrapper > h1 {
	font-size:25px;
	
	}
.data_s {
    float: left;
    margin-top: 0;
    width: 50%;
}
.data_s > h1{color:#373435;}
.inner-wrapper table {
    border-collapse: collapse;
    margin: 0 auto;
    width: 210px;
}
.inner-wrapper table td { padding: 0px 0; }
.inner-wrapper table tr:last-child td { border-bottom: 0px solid; padding: 0 0; }
.specify {
    margin: 6px auto 8px;
}	
 table.specify td 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;
	cursor:pointer;
    padding: 5px 25px;
    position: relative;
    text-decoration: none;}
.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; }
            }
.specify td a {
    background: rgba(0, 0, 0, 0) linear-gradient(#4a4c4b, #9e9797) repeat scroll 0 0;
    border: 1px solid #353232;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    margin-left: 6px;
    padding: 2px 10px;
    text-decoration: none;
}

.round .specify td a.active{ background:#075887;}
.square .specify td a.active{ background:#f78528;}
.rectangle .specify td a.active{ background:#5f104f;}
.t-homebase .specify td a.active{ background:#3f8217;}
.th-homebase .specify td a.active{ background:#32ceb5;}

.inner-wrapper table p a:hover, .inner-wrapper table p 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: 5px 29px !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 h3, .inner-wrapper h3 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #373435;
    font-size: 32px;	
    font-weight: bold;
    margin: 0;
    padding-top: 11px;
    text-align: center;
}
.area-calculation .green { background: #008000 none repeat scroll 0 0; }
.area-calculation .yellow{ background:rgb(255, 191, 0);}
	.layout-slider { margin: 0 auto; width: 628px; }
.area_img img{ float:right; display:none;}
.container_full_wi {
    background: #d0d2d4 none repeat scroll 0 0;
    padding:0 3% 70px;
}
.value_selection {
    float: left;
    margin: 8px 0 0;
    padding: 0;
    width: 16%;
}
.roller {
    margin: 0 1px;
    padding: 13px 0 0;
}

.inner-wrapper input {
    border: 1px solid #373635;
    border-radius: 5px;
    color: #295d29;
    font-size: 21px;
    font-weight: bold;
    height: 28px;
    margin: 0 0 0 20px;
    text-align: center;
    width: 80px;
}
.inner-wrapper input[type=number]::-webkit-inner-spin-button, 
.inner-wrapper input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.inner-wrapper input[type=number] {
    -moz-appearance:textfield;
    color: #000;
}
.radio_button {
    display: none;
}
.thickness_selected {
    display: block;
}

.length, .width {
    float: left;
    margin: 10px 0 0 !important;
}
.width {
    float: right;
}
.content_area {
    float: left;
    margin: 10px 2px 0;
    width: 70%;
}
.enter_value {
    float: none;
    margin:10px 0 0 !important;
    width: 138px !important;
}
.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;
}
.area-calculation input[disabled],input.thickness_selected  {
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 7px;
    color: #353232;
    display: block;
    font-size: 30px;
    font-weight: bold;
    height: 30px;
    margin: 7px auto 0;
    text-align: center;
    width: 128px;
}
.c-area-wrap tr td,.c-area-wrap tr th,.c-area-wrap p,.c-area-wrap span{font-size: 21px;
    font-weight: inherit;color:#373435;}
.thin-head {
    color: #373435;
    font-size: 18px;
    font-weight: normal;
    margin-left: 50px;
    padding: 0;
    text-align: center;
}
.check-id { text-align: center; }
.check-id span { left: 10px; position: relative; top: -7px; }
.inner-wrapper span {
    margin: 0 25px;
	font-weight:bold;
}
section.text-content {
   /* border-bottom: 3px solid #373435;*/
    clear: both;
    overflow: hidden;
    padding-bottom: 7px;
}
footer { color: #002469; font-size: 14px; font-style: italic;  text-align: center; overflow: hidden; width: 100%; clear: both;}
.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: #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 {
    color: #002469;
    font-size: 21px;
    margin-top: 14px;
    width: 100%;
}

.summary-data input {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #373635;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    text-align: center;
    width: 80px;
	margin: 5px 0;
}
.area-calculation {
    margin-top: 32px;
}
.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 45px;
}
.all_shapes > span {
    font-size: 12px;
}

.stock_item {
    clear: both;
    float: left;
    margin: 5px 0 8px;
    overflow: hidden;
    padding: 0 8px 0 62px;
}
.stock_item > p {
    color: #2b2a29;
    float: left;
    font-size: 18px;
    margin: 17px 0 0 15px;
}
.stock_item > img {
    float: left;
}
.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;
     width:960px;}

.inner-value {
    background: rgba(0, 0, 0, 0) url("../images/value-bar.png") no-repeat scroll 85px 1px;
    height: 312px;
    position: relative;
}
.bottom_stock {
    margin-left: 15px;
}
#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%;
}




}

/*Custom Code Start Here*/
.addui-slider .addui-slider-track .change-color,.addui-slider .addui-slider-track .change-color:hover  {
background-image:url(../images/slider_rooler.png) !important;
}

.addui-slider .addui-slider-track .addui-slider-handle.change-color-round:after,.addui-slider .addui-slider-track .addui-slider-handle.change-color-round:after:hover
{
 background-image:url(../images/slider_rooler.png) !important;
}


/*Custom Code Start End*/


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.change_slider { color: #6b809b !important; }