@font-face {
  font-family: "KlavikaBasic-Medium";
  src: url("fonts/KlavikaBasic-Medium.eot"); /* IE9 Compat Modes */
  src: url("fonts/KlavikaBasic-Mediumd41d.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/KlavikaBasic-Medium.otf") format("opentype"), /* Open Type Font */
    url("fonts/KlavikaBasic-Medium.svg") format("svg"), /* Legacy iOS */
    url("fonts/KlavikaBasic-Medium.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/KlavikaBasic-Medium.woff") format("woff"), /* Modern Browsers */
    url("fonts/KlavikaBasic-Medium.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: "KlavikaBasic-Regular";
  src: url("fonts/KlavikaBasic-Regular.eot"); /* IE9 Compat Modes */
  src: url("fonts/KlavikaBasic-Regulard41d.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/KlavikaBasic-Regular.otf") format("opentype"), /* Open Type Font */
    url("fonts/KlavikaBasic-Regular.svg") format("svg"), /* Legacy iOS */
    url("fonts/KlavikaBasic-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/KlavikaBasic-Regular.woff") format("woff"), /* Modern Browsers */
    url("fonts/KlavikaBasic-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}


::selection {
    background: #555;   
    color: #fff;
}
::-moz-selection {
    background: #555;    
    color: #fff;
}
body {
    background: #fff;
    padding: 0;
    margin: 0 auto; 
    font-family: "KlavikaBasic-Medium";
    color: #151515; 
}
article,
aside,
details,
figcaption,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

.main{ margin:0; padding:0}
.warp-inner{ width:1280px; margin:0 auto; padding:20px 0;}
.section1{ border-top:6px solid #31af49; background:url(../images/bg-section1.jpg) no-repeat top center; background-size: cover; padding:0px 0 20px 0;   height:53vh}
.header{}
.logo{ margin:-27px 0 0 0}

.sect-right{ width:340px; float:right; text-align:center;  margin:-80px 0 0 0; }
.sect-left{ width:58%;  float:left; margin:0px 0 0 0}

.form-box{ background:#fff; border-radius: 8px; padding:10px 5%}
.form-inner{ text-align:center}
.form-inner h2{ font-size:20px; font-weight:normal; text-align:center; color:#000;   display:block; border-radius: 8px; padding:5px 0;  margin:0 0 10px 0;}
.form-f{ border:1px solid #cacaca; border-radius: 8px; padding:6px 2%; width:96%; font-family: "KlavikaBasic-Regular"; margin: 0 0 10px 0; font-size:18px;}
textarea.form-f{ height:40px; resize:none}
.submit-btn{ margin:5px auto 5px;  font-size:18px; font-weight:normal; text-align:center; color:#fff; background:#fa2837;  border-radius: 8px; padding:6px 25px; border:0;  font-family: "KlavikaBasic-Regular"; cursor:pointer;}
.submit-btn:hover{ background:#26963b}

.or-style{ font-size:24px; color:#fff; padding:5px 0; text-shadow: 2px 1px 2px #000000;}
.call-to{ font-size:22px; font-weight:normal;  font-family: "KlavikaBasic-Regular";  background:#fa2837;  text-align:center; color:#fff;  display:block; border-radius: 8px; padding:4px 12px; display:inline-block}
.call-to a{ color:#fff; text-decoration:none}

.left-inner{ padding:100px 0 0 0}
.left-inner h2{font-size:36px; font-weight:normal;  color:#fff;  padding:5px 0;  margin:0; text-shadow: 2px 1px 2px #000000;}
.left-inner h3{ font-size:18px; font-weight:normal; color:#fff; background:#fa2837; font-family: "KlavikaBasic-Regular"; border-radius: 8px; padding:8px 15px; display:inline-block ; margin:10px 0 0 0;}


.clearFix{ clear:both}


.section2{ border-top:1px solid #fff; background:url(../images/bg-section2.jpg) no-repeat top center; background-size: cover; padding:0 0; height:50vh}
.icon-box{ text-align:center;}
.icon-box h2{ color:#fff; font-size:28px; font-weight: 100; margin:0 0 20px 0; padding:0}

.icon-box ul{ margin:0; padding:10px 0; display:block; text-align:center}
.icon-box li{ margin:0 5px; padding:0; width:18%; display:inline-block; vertical-align:top}
 .icon-box li p{ font-size:18px; color:#fff; text-align:center}
  .icon-box li img{ opacity: 0.5; width:100px;}
 .icon-box li:hover img{ opacity: 1}
 

.footer{ padding:15px 0; background:#252525; font-family: "KlavikaBasic-Regular"; color:#fff; font-weight:100; font-size:16px; position:absolute; left:0;   width:100%} 
.footer a{ color:#fff; text-decoration:none}
.f-left{ float:left}
.f-right{ float:right}

.or-block-mobile{ display:none}
.or-block-desktop{ display:block}

@media all and (max-width: 1290px) {
 
.warp-inner{ width:96%; margin:0 auto}

}
 
@media only screen and (max-width: 850px) {

.section1{  height: auto}
.section2{  height: auto}

.sect-right{ width:40%; float:right; text-align:center }
.sect-left{ width:55%;  float:left}
.form-box{ background:#fff; border-radius: 8px; padding:20px 8%}

.left-inner br{ display:none}
.left-inner{ padding:50px 0 0 0}


}

@media only screen and (max-width: 750px) {
.icon-box li{ margin:0 5px; padding:0; width:30%; display:inline-block; vertical-align:top}

.logo{ width:80px; }
.logo img{ width:100%}

}

@media only screen and (max-width: 650px) {
.or-block-mobile{ display:block; margin-top:20px;}
.or-block-desktop{ display:none}

.icon-box li p{ font-size:16px;}
.icon-box h2{ font-size:22px;}
.f-left{ font-size:12px;}
.f-right{ font-size:12px;}

 .sect-right{ width:100%; float:none; text-align:center; padding-top:10px; width:300px; margin:0 auto; }
.sect-left{ width:100%; margin:0 auto;  float:none; text-align:center}
.left-inner{ padding:20px 0 0 0}

.f-left{ float:none; display:block; text-align:center}
.f-right{ float:none;  display:block; text-align:center; padding:5px 0 0 0}

.left-inner h2{font-size:26px; }
.left-inner h3{ font-size:15px; margin:0; }

.form-f{ font-size:14px;}
}


@media only screen and (max-width: 500px) {
 .icon-box li{ margin:0 5px; padding:0; width:45%; display:inline-block; vertical-align:top}
.icon-box h2 {
     	 
}
}


@media only screen and (max-width: 480px) {
 
.icon-box h2 { width:250px; margin:0 auto
     	 
}
}