@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
         local('MaterialIcons-Regular'),
         url(../iconfont/MaterialIcons-Regular.woff2) format('woff2'),
         url(../iconfont/MaterialIcons-Regular.woff) format('woff'),
         url(../iconfont/MaterialIcons-Regular.ttf) format('truetype');
 }

 .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;  /* Preferred icon size */
   display: inline-block;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;

   /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
   /* Support for Safari and Chrome. */
   text-rendering: optimizeLegibility;

   /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;

   /* Support for IE. */
   font-feature-settings: 'liga';
 }



@font-face {
 font-family: 'li';
 src: url('../font/Comfortaa/Comfortaa-Light.ttf');
 format('truetype');
}
@font-face {
 font-family: 're';
 src: url('../font/Raleway/Raleway-Regular.ttf');
 format('truetype');
}
@font-face {
 font-family: 'bo';
 src: url('../font/Raleway/Raleway-Bold.ttf');
 format('truetype');
}
@font-face {
 font-family: 'num';
 src: url('../font/RobotoCondensed-Bold.ttf');
 format('truetype');
}

*{font-family: 're'; text-decoration: none; font-style: normal; margin: 0px; outline:0px;}

body{margin: 0px;}

.main_ico{min-height:400px; background: url(../lo.svg) no-repeat center center; background-size:50px; text-align:center; font-size:12px; color:silver;}

.inx{width: 1100px; margin: auto; }

.top{position: absolute; width: 100%; box-shadow: 3px 3px 60px #632900;}

.logo{background: #F94A00;}
.logo .in{padding: 25px; overflow: auto; padding-left:0px; padding-right:0px;}
.but_box{float: right; overflow: auto;}

.logo_div{float: left; text-align: left;}

.on_one{ display: grid; grid-template-columns: 1fr; grid-gap: 15px;}
.sandwi{padding: 15px; background: white; display: block; color: black; font-family: 'bo'; border: solid 1px silver; overflow: auto; font-size: 17px;}
.sandwi i{display: inline-block; float: right;}
.texo{margin-top: 10px; padding: 15px; background: #F5F5F5; font-size: 14px; display: none; overflow: auto;}
.cp{font-family: 'bo'; cursor: pointer;}

.buto{display: block; color: white; padding: 10px; font-size: 12px; text-transform: uppercase; background: #FBAF00; font-family: 'bo'; border-radius: 2px; float: right; border:0px; cursor:pointer;}
.buto2{display: block; color: white; padding: 10px; font-size: 13px; text-transform: ; background: url(../img/ti.png) no-repeat center left ; background-size:; font-family: 'bo'; border-radius: 2px; float: right; border-left:;}
.buto2{display: inline-block; float: left; font-size: 13px;}
.buto2 i{display: inline-block; float: left; font-size: 18px; margin-right: 5px;}
.butoo{display: inline-block; color: white; padding: 10px; font-size: 12px; text-transform: uppercase; background: #FBAF00; font-family: 'bo'; border-radius: 2px; }

.ip{text-transform: none; text-align: justify; padding-top: 7px; font-size: 13px;}

.menu{background: #F94A00;}
.menu .in{ overflow: auto; }
.menu a{display: block; float: left; color: white; text-transform: uppercase; padding: 16px; font-size:13.5px; font-family: 'bo'; }
.menu .call_index{display: none; overflow: auto; font-size: 17px; }
.menu .call_index i{ font-size: 21px; float: left; margin-right: 5px;}
.menu .call_index i{display: inline-block; float: left; }
.menu em{display: block; float: left; color: #F94A00; text-transform: uppercase; padding: 16px; font-size:13.5px; font-family: 'bo'; width: 50px; }
.logo .menu_box{display: none; float: right; color: white; text-transform: uppercase; padding: 16px; padding-top: 7px; font-size:13.5px; font-family: 'bo'; background: #F94A00; }


.barr{display: grid; grid-template-columns: 4fr 1fr; margin-top: 20px; grid-gap: 20px; }
.barr2{display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 20px; grid-gap: 20px; }

.slide{ background: url(../slide/1.png) no-repeat center center #B4B4B4; background-size:cover; padding: 30px; padding-bottom: 40px; padding-top: 40px;}
.slide .in{ text-align: center;}
.slide h2{ font-size: 48px; font-family: 'bo'; color: white; text-shadow: 2px 2px 10px black; margin: 0px; margin-bottom: 15px;}

.seek_pan{margin: auto; display: inline-block; padding: 30px; background: url(../img/seem.png); border-radius: 5px;}
.seek_pan input{padding: 15px; text-transform: uppercase; font-family: 'bo'; border: 0px; border-radius: 3px;}
.seek_pan .sub{background: #FBAF00; color: white;}
.seek_pan select{padding: 15px; text-transform: uppercase; font-family: 'bo'; border: 0px; color: #F94A00; border-radius: 3px;}
.seek_pan select option{padding: 15px; font-family: 'bo'; color: black; border-radius: 3px;}

.seem_dem{background: url(../img/seem2.png) fixed; padding: 30px; border-radius: 3px;}
.big_text1{font-weight: normal; font-family: 'bo'; font-size: 40px; width: 80%; color: #F94A00; padding-top: 50px;}
.big_text2{font-weight: normal; font-family: 'bo'; font-size: 25px; width: 80%; color: white; text-shadow: 2px 2px 10px black; padding-top: 50px;}

.sep{height: 138px; background: #F94A00;}

.error{border: solid 1px #FFC1C2; background: #F7F7F7; font-size: 12.5px; padding: 15px; text-align: center; color: red;}

.thema{ background: #F0F0F0; padding: 40px; padding-left: 10px; padding-right: 10px;}
.thema .in{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; }
.thema .in .box{ display: block; background: white; text-align: center; text-transform: uppercase; color:black; }
.thema .in .box .pad{padding: 20px; font-family: 'bo';}
.thema .in .box img{ display: block; width: 100%;}
.thema .in .box i{color: #F94A00; font-size: 35px; }

.sample{background: #F9F9F9; padding: 30px; padding-left: 10px; padding-right: 10px;}
.sample .in{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px;}
.sample .in3{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px;}
.sample .in4{display: grid; grid-template-columns: 2.5fr 1fr; grid-gap: 30px;}

.activv{ text-align: center; font-weight: normal; font-family: 'bo'; padding: 30px; font-size: 23px;}

.card{ height: ; border: solid 1px ##F0F0F0; background: white;}
.card .image{height: 170px;}
.card .legend{/* border: solid 1px #E8E8E8; */ border-top: 0px; padding: 20px;}
.card strong{display: block; font-weight: normal; font-family: 'bo'; margin-bottom: 6px; float: left; font-size: 20px;}
.card b{display: block; font-weight: normal; /*font-family: 'bo';*/ float: right;}
.card b em{color: gray;}
.card .type{display: block; font-weight: normal; font-family: 'bo'; float: right; background: orangered; color: white; padding: 10px; font-size: 13px;}
.lin{display: block; overflow: auto;}
.lin i{display: inline-block; margin-right: 5px; margin-top: 8px; padding: 5px; padding-right: 10px; padding-left: 10px; border-radius: 5px; background: #F0F0F0; font-size: 12px; }
.lin span{display: block; float: left; margin-top: 10px;}
.lin a{display: block; float: right; color: orangered; border: solid 1px orangered; border-radius: 15px; margin-top: 10px; text-decoration: ; text-transform: lowercase; font-size: 13px; padding: 4px; padding-right: 10px; padding-left: 10px; transition: background 0.3s;}
.lin a:hover{background: orangered; color: white;}

.tito{overflow: auto;}
.tito h3{font-family: 'bo'; font-weight: normal; margin: 0px; padding-bottom: 30px; font-size: 20px; text-transform: uppercase;}
.tito h3 a{color: black; font-size:12px; display: inline-block; float: right; text-transform: lowercase; background: white; padding: 8px; border: solid 1px #F0F0F0; overflow: auto;}
.tito h3 a i{color: black; float: left; font-size: 13px; margin-right: 4px;}

.this_house{padding: 30px;}
.this_house .in{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.op_ico{}
.op_ico img{display: block; width: 100%;}
.main_prev{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; padding-top: 20px;}
.op_detail{}
.op_detail h1{font-weight: normal; font-family: 'bo'; text-transform: uppercase;}
.op_detail h2{font-weight: normal; font-family: 'bo'; padding-top: 10px; overflow: auto;}
.op_detail span{ font-family: 'bo'; display: block; float: right;}
.op_detail hr{border: 0px; border-top: dashed 1px silver; margin-bottom: 15px; margin-top: 15px;}
.op_detail strong{font-weight: normal; display: block;}
.op_detail strong em{font-family: 'num';}
.op_detail i{display: inline-block; float: left; font-size: 18px; margin-right: 8px;}
.detail_this{padding: 15px; background: #F5F5F5; font-size: 14px;}
.buy{ text-align: center; padding-top: 10px;}
.buy button{ display: inline-block; padding: 10px; font-size: 15px; border: 0px; border-radius: 3px; color: white; font-family: 'bo'; background: #FBAF00; text-transform: uppercase; cursor: pointer;}

.preveve{ display: grid; grid-template-columns: 1.2fr 4fr; background: #F7F7F7;}
.icool{}
.icool img{width: 100%; display: block;}
.the_cart_name{padding: 15px;}
.the_cart_name strong{display: block; font-family: 'bo'; font-weight: normal; font-size: 19px;}
.the_cart_name span{overflow: auto; display: block; margin-top: 5px; font-size: 17px;}
.the_cart_name span i{display: block; margin-right: 5px; float: left; font-size: 17px;}
.cap{text-align: center;}
.cap em{display: block; font-family: 'bo'; text-transform: uppercase; color: #FBAF00; font-size: 25px; }
.cap em a{ color: #FBAF00;}
.cap em i{ font-size: 30px; display: block; float: right;}
.captwo{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}


.pop{position: fixed; height: 100%; width: 100%; background: url(../img/seem2.png) white; z-index: 30; display: none;}
.pop .cloz{ cursor: pointer; }
.inapop{width: 600px; margin: auto; background: white; padding: 20px; display: grid; grid-template-columns: 1fr; grid-gap: 15px; border-radius: 4px;}
.pop_comm{padding-top: 50px;}
.pop_comm input{padding: 15px; text-transform: ; font-family: 'bo'; border: solid 1px #E8E8E8; border-radius: 3px;}
.pop_comm .sub{ display: inline-block; padding: 10px; font-size: 14px; border: 0px; border-radius: 3px; color: white; font-family: 'bo'; background: #FBAF00; text-transform: uppercase;}

.par{padding: 8px; font-size: 13px;}

.visited{background: white; padding: 30px; padding-right: 10px; padding-left: 10px; }
.visited .pro_pad p{ padding: 10px; padding-bottom:15px; }
.visited .pro_pad img{ width:100%; }
.visited .in{display: grid; grid-template-columns: 1fr 1fr ; grid-gap: 30px;}
.visited .in2{display: grid; grid-template-columns: 3fr 1.2fr ; grid-gap: 30px;}
.img{display: block;}

.present{ padding-top: 30px; background: #F0F0F0;}
.present .in{ text-align: center;}
.present .in h2{font-size: 18px; font-family: 'bo'; font-weight: normal; margin: 0px; margin-bottom: 15px;}
.present .in p{font-size: 14px; margin: 0px; color: #664222;}

.pro_box{ }
.pro_box img{width: 100%;}
.pro_pad{padding: 30px; background: white; border: solid 1px #F0F0F0; text-align: center;}
.pro_pad strong{display: block; font-weight: normal; font-size: 20px; font-family: 'bo'; text-transform: uppercase;}

.promo_band{display: grid; grid-template-columns: 0.8fr 3fr; border:solid 1px #F0F0F0; background: #F8F8F8; margin-bottom: 20px;}
.promo_band2{ border:solid 1px #F0F0F0; background: #F8F8F8;}
.icop{}

.upper{text-transform: uppercase; display: block; margin-bottom: 8px;}
.upper em{color: #F94A00; font-family: 'bo';}
.textcop .conjo{ float: right; background: #FBAF00; color: white; font-family: 'bo'; padding: 5px; border-radius: 3px;}
.textcop .conjo2{ background: #FBAF00; color: white; font-family: 'bo'; padding: 5px; border-radius: 3px;}
.overf{overflow: auto; padding: 5px;}

.feat{padding: 5px; font-family: 'bo'; }
.expli{text-align: justify; padding-right: 20px; padding-left: 20px;}

.icon_box{width: 110px; height: 110px; border-radius: 110px; margin: auto; background: red; margin-bottom: 10px; border: solid 6px white; box-shadow: 0px 4px 5px silver;}

.on_in{}
.on_in_pro{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.icop img{width: 100%;}
.textcop{padding: 13px;  font-size: 13px; }
.textcop a{color: #F94A00; display: inline-block; }
.textcop b{ font-size: 16px; display: block; font-family: 'bo'; font-weight: normal;}

.center{text-align: center;}
.copy{display: block; padding-top: 20px; font-size: 13px;}

.hint{background: #EBEBEB; color: dimgray; padding: 30px; font-size: 13px;}

.promo_box{}
.promo_box h4{margin: 0px; font-weight: normal; font-family: 'bo'; font-size: 20px; padding-bottom: 15px;}

.sign_up{}
.sign_up h4{margin: 0px; font-weight: normal; font-family: 'bo'; font-size: 20px; padding-bottom: 15px;}
.sign_up p{ padding-bottom: 15px;}
.sinu{display: grid; grid-template-columns: 1fr; grid-gap: 20px;}
.sinu input{padding: 15px; text-transform: ; font-family: 'bo'; border: solid 1px #E8E8E8; border-radius: 3px;}
.sinu textarea{padding: 15px; text-transform: ; border: solid 1px #E8E8E8; border-radius: 3px; font-size: 13px;}
.sinu select{padding: 15px; text-transform: ; font-family: 'bo'; border: solid 1px #E8E8E8; border-radius: 3px;}
.sinu input:focus{ border: solid 1px #FBAF00; }
.sinu .sub{ background: #FBAF00; border: solid 1px #FBAF00; color: white; text-transform: uppercase; padding: 10px; font-family: 'bo'; border-radius: 3px;}
.sinu span{ color: gray;}
.sinu .ii{ display: block; font-size: 12px;}
.sinu option{ font-family: 'bo';}

.libo{font-family: 'bo'; color: black; border:0px; background: transparent; cursor: pointer;}
.libo:hover{ color: darkorange;}

.add_pic{padding-bottom: 5px;}
.add_pic i{font-size: 35px;}

.logg{padding: 20px; background: #FFF7E1; border-radius: 3px; border:solid 1px #FFF0CA;}
.logg2{padding: 20px; background: #F1F8FA; border-radius: 3px; border:solid 1px #D8ECF1;}
.logg3{padding: 20px; background: url(../img/seem2.png); border-radius: 3px; border:solid 1px #D8ECF1;}

.pen1{display: grid; grid-template-columns: 1fr;}
.pen2{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.pen3{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.pen4{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px;}

.notif{ width:100%; position:fixed; z-index:20; top:-210px; }
.notif_in{padding:20px; margin:auto;  width:50%; }
.notif_ina{ overflow:hidden; background:white; border-radius:4px;  box-shadow:1px 1px 10px #983F21;  }
.notif_text{padding:25px; text-align:center; }
.notif_text a{ color:#9FCE00; font-family: 'bo'; }
.notif_in strong{ display:block; padding:20px; background:#F9FFE1; font-weight:normal; color:#9FCE00; font-family: 'bo'; }
.notif_in strong .clo{ display:inline-block; float:right; cursor:pointer; }
.clo{ cursor:pointer; }
.notif_in strong .not{ display:inline-block; float:left; margin-right:7px; font-size:21px; }

.range{padding:50px; background: url(../slide/1.png) no-repeat center center #B4B4B4; background-size:cover; }
.range h2{ text-align:center; font-size: 48px; font-family: 'bo'; color: white; text-shadow: 2px 2px 10px black; margin: 0px; margin-bottom: 15px;}
.op_rec_pac{display:grid; grid-template-columns:1fr; grid-gap:20px; width:500px; margin:auto;}

.op2{display:grid; grid-template-columns:1fr 1fr; grid-gap:15px;}
.op_inp{padding:10px; background:white; border:solid 1px white; border-radius:3px; color:#F94A00; font-family: 'bo'; cursor:pointer;}

.op22{display:grid; grid-template-columns:2.5fr 1fr; grid-gap:15px;}
.op22 input{padding:10px; border:solid 1px white; border-radius:3px; color:black; font-family: 'bo'; font-size:16px;}
.op22 .subop{background:#FBAF00; color:white; text-transform:uppercase; border:solid 1px #FBAF00; font-size:14px;}

.popo{ position:absolute; display:none; background:white; border:solid 1px #EFF0F1; z-index:100; padding:10px; border-radius:8px; /* box-shadow:2px 2px 25px #BEC5CB, -2px -2px 25px #BEC5CB; */}
.popo2{ position:absolute; display:none; background:white; border:solid 1px #EFF0F1; z-index:100; padding:10px; border-radius:8px; /* box-shadow:2px 2px 25px #BEC5CB, -2px -2px 25px #BEC5CB; */}

.sel_cat{}
.sel_cat i{display:block; padding:10px; color:#687077; font-family: 'bo'; cursor:pointer;}
.sel_cat i:hover{color:#F94A00;}

#demo{padding-top:5px; display:block; text-align:center; font-family: 'bo';}
#stro_demo{padding-bottom:8px; display:block; text-align:center; font-family: 'bo';}

.chamber{ padding-top: 10px; }
.chamber h4{ font-family: 'bo'; font-weight: normal; display: block; padding-bottom: 5px; }
.chamber .cha_grid{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.chamber .cha_grid div{display: block; height: ; background: red; padding: 10px; overflow: auto; padding-top:70px;}
.chamber .cha_grid div h4{ float: right; padding: 10px; background: white; text-align: right;}

.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;  
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%; 
background: #FBAF00;
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #FBAF00;
cursor: pointer;
}

.post_skills{ padding:30px; background:#F0F0F0; border-bottom:solid 1px #E9E9E9;}
.post_skills .buto{display: block; color: white; padding: 10px; font-size: 12px; text-transform: uppercase; background: #FBAF00; font-family: 'bo'; border-radius: 2px; float: right; border:0px; cursor:pointer;}
.post_skills h2{color:#FBAF00;}
.post_skills p{color:gray;}

@media (max-width:1100px ) {
 .inx{margin: auto; width: 95%;}
}
@media (max-width:956px ) {
 .menu{display: none; }
 .logo .menu_box{display: block; float: right; cursor: pointer;}
 .mno{display: none;}
 .sep{height: 100px; background: #F94A00;}
 .top{position: fixed; width: 100%;}
}
@media (max-width:835px ) {
 
 .thema .in{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; }
 .sample .in3{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
 
}
@media (max-width:740px ) {
 .visited .in{display: grid; grid-template-columns: 1fr ; grid-gap: 30px;}
 .pen3{display: grid; grid-template-columns: 1fr; grid-gap: 15px;}
 .pen2{display: grid; grid-template-columns: 1fr; grid-gap: 15px;}

 .sinu input{padding: 15px; text-transform: ; font-family: 'bo'; border: solid 1px #E8E8E8; border-radius: 3px; width:85%; margin: auto; }
 .sinu textarea{padding: 15px; text-transform: ; border: solid 1px #E8E8E8; border-radius: 3px; font-size: 13px; width:85%; margin: auto; }
 .sinu select{padding: 15px; text-transform: ; font-family: 'bo'; border: solid 1px #E8E8E8; border-radius: 3px; width:85%; margin: auto;}
}
@media (max-width:705px ) {
 .range h2{ text-align:center; font-size: 28px; font-family: 'bo'; color: white; text-shadow: 2px 2px 10px black; margin: 0px; margin-bottom: 15px;}
 .op2{display:grid; grid-template-columns:1fr; grid-gap:15px;}
 .op_inp{padding:10px; background:white; border:solid 1px white; border-radius:3px; color:#F94A00; font-family: 'bo'; cursor:pointer;}

 .op22{display:grid; grid-template-columns:2.5fr 1fr; grid-gap:15px;}
 .op22 input{padding:10px; border:solid 1px white; border-radius:3px; color:black; font-family: 'bo'; font-size:16px;}
 .op22 .subop{background:#FBAF00; color:white; text-transform:uppercase; border:solid 1px #FBAF00; font-size:14px;}
}
@media (max-width:635px ) {
 .op_rec_pac{width: 96%; margin: auto;}
 /* .logo_div{float: none; text-align: center;} 
 .but_box{float: none; overflow: auto; padding-top: 15px; text-align: center;}*/

 .sample .in{display: grid; grid-template-columns: 1fr; grid-gap: 30px;}
}
@media (max-width:531px ) {
  .thema .in{ display: grid; grid-template-columns: 1fr; grid-gap: 10px; }
}
@media (max-width:490px ) {
 .menu a{display: block; float: none; padding-top: 5px; }
 .menu .call_index{display: block; float: none; padding-top: 5px; }
  .sample .in3{display: grid; grid-template-columns: 1fr; grid-gap: 10px;}
  .thema .in{ display: grid; grid-template-columns: 1fr; grid-gap: 10px; }
}@media (max-width:426px ) {
  .op22{display:grid; grid-template-columns: 1fr; grid-gap:15px;}
  .mn2{display: none;}
}
@media (max-width:391px ) {
  .range h2{ text-align:center; font-size: 19px; font-family: 'bo'; color: white; text-shadow: 2px 2px 10px black; margin: 0px; margin-bottom: 15px;}
}