*{margin: 0;box-sizing: border-box;}
a{text-decoration: none;}
ul{list-style: none;padding: 0;}
img{vertical-align: bottom;}
iframe{border:0}
[disabled]{cursor: not-allowed;}
button{cursor: pointer;}
[abbr]{cursor: help;}
.clear{clear: both;}
@font-face {
    font-family: opensansregular;
    src: url(../fonts/Open-Sans-regular.woff2);
}
@font-face {
    font-family: opensansbold;
    src: url(../fonts/opensans-bold.woff2);
}
@font-face {
    font-family: opensanslight;
    src: url(../fonts/opensans-light.woff2);
}
@font-face {
    font-family: opsb;
    src: url(../fonts/opensans-semibold.woff2);
}
@font-face {
    font-family: rw;
    src: url(../fonts/Raleway.woff2);
}
@font-face {
    font-family: rwr;
    src: url(../fonts/Raleway-Regular.woff2);
}
@font-face {
    font-family: rwb;
    src: url(../fonts/raleway-bold.woff2);
}

@font-face {
    font-family: rwlight;
    src: url(../fonts/RalewayLight.woff2);
}


body{ font: 14px 'opensansregular','sans-serif';}
h1,h2,h3,h4,h5,h6{font-family: 'opensansbold';}

.container{max-width: 1200px;padding: 0 15px ;margin: auto;}
.clear{clear: both;}
.row{margin: 0 -15px;}
.row:after{content: "";display: block;clear:both ;}
.col-1{width: 8.33%;float: left;padding: 0 15px;min-height: 1px;}
.col-2{width: 16.66%;float: left;padding: 0 15px;min-height: 1px;}
.col-3{width: 25%;float: left;padding: 0 15px;min-height: 1px;}
.col-4{width: 33.33%;float: left;padding: 0 15px;min-height: 1px;}
.col-5{width: 41.66%;float: left;padding: 0 15px;min-height: 1px;}
.col-6{width: 50%;float: left;padding: 0 15px;min-height: 1px;}
.col-7{width: 58.33%;float: left;padding: 0 15px;min-height: 1px;}
.col-8{width: 66.66%;float: left;padding: 0 15px;min-height: 1px;}
.col-9{width: 75%;float: left;padding: 0 15px;min-height: 1px;}
.col-10{width: 83.33%;float: left;padding: 0 15px;min-height: 1px;}
.col-11{width: 91.66%;float: left;padding: 0 15px;min-height: 1px;}
.col-12{width: 100%;float: left;padding: 0 15px;min-height: 1px;}

.wrap-1{background: #000;color: #fff;line-height: 70px;position: fixed;top: 0;width: 100%;z-index: 2;}
.wrap-1 header h1 a{color: #fff;display: inline-block;}
.wrap-1 header span{color: #ff8b38;font-family: opensanslight;}
.wrap-1 nav ul{float: right;}
.wrap-1 nav ul li{float: left;margin: 0 10px;}
.wrap-1 nav ul li a{display: block;color: #fff;padding: 0 13px;font-family: opsb;font-size: 14px;}

/*wrap-1 mobbtn*/
.wrap-1 .btnmob{display: none;color: #ca3c3c;border: 2px solid;background-color: transparent;border-radius: 10px;float: right;padding: 3px 6px;margin-top: 25px;}
.wrap-1 .btnmob span{height: 2px;display: block;background-color: #ca3c3c;width: 50px;margin: 5px;transform-origin: right center;transition: 300ms;}
/* .btnmob.active span:nth-child(1){ transform: rotate(-13.5deg);}
.btnmob.active span:nth-child(2){ opacity: 0;}
.btnmob.active span:nth-child(3){ transform: rotate(13.5deg);} */


.wrap-2{background: url(../img/bg.jpg) no-repeat center center/cover;height: 711px;}
.wrap-2 h2{color: #fff;font-size: 80px;margin-top: 176px;font-family: rw;}
.wrap-2 h2 span{color: #ff8b38;font-family: rwlight;font-weight: 100;}
.wrap-2 .rel{color: #fff;font-size: 32px;font-weight: bold;}
.wrap-2 .sep{height: 2px;width: 64px;background: #fff;margin: 35px 0;}
.wrap-2 .pera{font-family:rwlight ;font-size: 16px;color: #fff;}
.wrap-2 a{display: inline-block;width:135px;line-height: 38px;color: #fff;border: 2px solid;text-align: center;font-size: 15px;font-family: opsb;margin: 45px 0;}
.wrap-2 .form{margin-top: 176px;float: right;width: 360px;}
.wrap-2 .header{background: #f5f5f5;color: #333;line-height: 54px;text-align: center;font-size: 20px;font-family: np;border-radius: 5px 5px 0 0;}
.wrap-2 .header span{color: #ff8b38;}
.wrap-2 .body{background: #fff;padding: 40px;}
.wrap-2 .body label{display: block;}
.wrap-2 .body label input{display: block;width: 100%;border: none;border-bottom: 1px solid #c9c9c9;padding: 13px;margin-bottom:13px ;}
.wrap-2 .body label input::placeholder{color: #c9c9c9;font-size: 14px;}
.wrap-2 .footer{background: #ff8b38;border-radius: 0 0 5px 5px;}
.wrap-2 .footer button{border: none;background: transparent;color: #fff;font-size: 15px;font-family: opsb;text-align: center;display: block;width: 100%;height: 54px;}

.wrap-3{background: #fff;padding: 20px 0;}
.wrap-3 h3{font-size: 20px;}
.wrap-3 p{font-size: 14px;color: #8f9094;}
.wrap-3 ul{cursor: pointer;float: right;}
.wrap-3 ul li{float: left;margin: 0 10px;}
.wrap-3 ul li a{display: block;padding: 0 22px;font-size: 44px;}
.wrap-3 span{font-size: 48px;color: #ccc;}

.wrap-4{background: #f5f5f5;padding: 145px 0 115px;}
.wrap-4 img{vertical-align: middle;}
.wrap-4 a{width: 121px;line-height: 121px;background: #333;color: #fff;display: inline-block;text-align: center;border-bottom:1px solid #fff;font-size: 15px;}
.wrap-4 a.active{background: #ff8b38;}
.wrap-4 .pager{margin: 0 90px;}
.wrap-4 .pager h3{font-size: 20px;}
.wrap-4 .pager p{font-size: 14px;line-height: 20px;color: #86878b;margin: 45px 0;}
.wrap-4 .pager a.download{width: 121px;line-height: 46px;background: #ff8b38;color: #fff;display: inline-block;text-align: center;font-size: 15px;font-family: opsb;}

.wrap-5{background: #fff;padding: 105px 0;}
.wrap-5 .review{padding-left:85px;}
.wrap-5 .review h3{font-size: 20px;line-height: 43px;}
.wrap-5 .sep{height: 2px;width: 64px;background: #ff8b38;margin: 25px 0;}
.wrap-5 p{font-size: 14px;color: #86878b;line-height: 20px;}
.wrap-5 .title{padding: 45px 0;}
.wrap-5 .title span{border: 2px solid #ff8b38;width: 40px;height: 40px;border-radius: 50%;}
.wrap-5 .title span.fa{color: #ff8b38;text-align: center;top: 10px;line-height: 36px;}
.wrap-5 .title h4{font-size: 14px;line-height: 20px;}

.wrap-6{background:#f5f5f5;padding: 100px 0;}
.wrap-6 h4{font-size: 20px;}
.wrap-6 .sep{height: 2px;width: 64px;background: #ff8b38;margin: 25px 0;}
.wrap-6 p{font-size: 14px;color: #86878b;}


.wrap-7{background: #fff;padding: 100px 0;}
.wrap-7 h3{font-size: 36px;font-family: rwr;text-align: center;}
.wrap-7 .sep{height: 2px;width: 12px;background: #ff8b38;margin: 25px auto;padding: 0 32px;}
.wrap-7 p{font-size: 14px;color: #86878b;text-align: center;line-height: 24px;}
.wrap-7 p.headline{margin: 0 0 78px;}
.wrap-7 .design{text-align: center;margin: 0 0  ;}
.wrap-7 .design span{border:2px solid #ff8b38;border-radius: 50%;color: #ff8b38;width: 70px;line-height: 70px;font-size: 32px;}
.wrap-7 .design h4{color: #333;line-height: 24px;margin: 22px 0;font-size: 20px;}

.wrap-8{background-color: #f5f5f5;padding: 95px 0;}
.wrap-8 h3{font-size: 36px;font-family: rw;text-align: center;}
.wrap-8 .sep{height: 2px;width: 12px;background: #ff8b38;margin: 25px auto;padding: 0 32px;}
.wrap-8 p{font-size: 14px;color: #86878b;text-align: center;line-height: 24px;}
.wrap-8 p.headline{margin: 0 0 78px;}
.wrap-8 .pricing{text-align: center;width: 343px;}
.wrap-8 .col-4{position: relative;}
.wrap-8 .dollerprice{position: absolute;top: 35px;left: 0;margin: 0 16px;}
.wrap-8 h4{font-size: 20px;color: #fff;background: #333;line-height: 59px;}
.wrap-8 .pricing .doller{color: #fff;background: #333;border-top: 1px solid #fff;line-height: 72px;font-family: rwb;}
.wrap-8 .pricing .doller {font-size: 35px;}
.wrap-8 .pricing .doller span{font-size: 94px;}
.wrap-8 .pricing .doller2{font-size: 14px;font-family: opsb;font-style: italic;line-height: 51px;background: #333;color: #86878b;}
.wrap-8 .pricing .sepr{width: 343px;height: 5px;background: #ff8b38;}
.wrap-8 .pricing .sepra p{width: 343px;background: #ff8b38;font-size: 14px;line-height: 40px;color: #fff;font-family: opensansbold;}
.wrap-8 .pricing .data{background: #fff;font-size: 14px;line-height: 24px;}
.wrap-8 .pricing .data p{line-height: 40px;border-bottom: 1px solid #f5f5f5;}
.wrap-8 .pricing .data p:last-child{border: none;}

.wrap-9{background: #fff;text-align: center;margin: 100px 0;}
.wrap-9 h4{font-size: 36px;font-family: rw;}
.wrap-9 .sep{height: 2px;width: 12px;background: #ff8b38;margin: 25px auto;padding: 0 32px;}
.wrap-9 p{font-size: 14px;color: #86878b;}
.wrap-9 p.headline{margin: 0 0 78px;}
.wrap-9 .profile .comment{background: #f5f5f5;width: 343px;line-height: 147px;padding: 23px 17px;}
.wrap-9 .profile .comment p{font-size: 14px;line-height: 24px;text-align: start;color: #86878b;}
.wrap-9 .profile .name{text-align: left;}
.wrap-9 .profile .name img{width: 70px;height: 70px;}
.wrap-9 .profile .name{margin-top: 24px;}
.wrap-9 .profile .name h5{font-size: 20px;margin-top: 10px;}
.wrap-9 .profile .name p{font-size: 14px;}

.wrap-10{background: url(../img/bgfooter.jpeg) no-repeat ;height:320px ;text-align: center;color: #fff;}
.wrap-10 .design{padding: 67px 0 0;}
.wrap-10 .design h4{font-size: 36px;font-family: rw;}
.wrap-10 .design .sep{height: 2px;width: 12px;background: #fff;margin: 25px auto;padding: 0 32px;}
.wrap-10 .design p{font-size: 16px;font-family: rwlight;}
.wrap-10 .design a{display: inline-block;width:135px;line-height: 38px;color: #fff;border: 2px solid;text-align: center;font-size: 15px;font-family: opsb;margin: 35px 0 60px;}

.wrap-11{background: #fff;text-align: center;padding: 97px 0 82px 0;}
.wrap-11 h5{font-size: 36px;font-family: rw;}
.wrap-11 .sep{height: 2px;width: 12px;background: #ff8b38;margin: 25px auto;padding: 0 32px;}
.wrap-11 p{font-size: 14px;line-height: 20px;color: #86878b;}
.wrap-11 form label input{display: block;width: 100%;padding: 0 10px 0 0;border: none;border-bottom: 1px solid #89878b;margin: 30px 0;padding:12px 8px;}
.wrap-11 form label ::placeholder{color: #89878b;font-family: opensansregular;font-size: 14px;}
.wrap-11 form textarea{width: 100%;border: none;margin: 30px 0;border-bottom: 1px solid #89878b;padding: 12px 8px 17px;resize: none;}
.wrap-11 a{text-align: center;}
.wrap-11 form textarea::placeholder{color: #89878b;font-size: 14px;}
.wrap-11 a.download{width: 148px;line-height: 46px;background: #ff8b38;color: #fff;display: inline-block;text-align: center;font-size: 15px;font-family: opsb;}

.wrap-12{background: #000;text-align: center;}
.wrap-12 .socialfooter{margin: 0 5px;padding: 22px 0 0;}
.wrap-12 .socialfooter a span.fa{color: #ccc;font-size: 24px;padding: 0 10px;}
.wrap-12 p{color: #fff;color: #89878b;font-size: 12px;padding: 10px 0 13px;}





/* ========= Media Query  ========== */

/* tablet landscape*/
@media screen and (max-width:1220px){
	.container{width:960px}
    /* .wrap-1{width: 1023px;} */
    .wrap-1 nav ul li{margin: 0 3px}
    .wrap-3 ul li a{padding: 0 10px;}
    .wrap-8 .pricing{width: 280px;}
    .wrap-8 .pricing .sepr{width: 280px;}
    .wrap-8 .pricing .sepra p{width: 280px;}
    .wrap-9 .profile .comment{width: 280px;}
    .wrap-6 img{height: 400px;width: 480px;}

}

/* tablet portrait*/
@media screen and (max-width:980px){
	.container{width:760px}
    .col-t-3{width:25%}
    .col-t-4{width:33.33%}
    .col-t-6{width:50%}
    .col-t-8{width:66.66%}
    .col-t-9{width:75%}
    .col-t-12{width:100%}
    .wrap-2 h2{font-size: 60px;}
    .wrap-2 .rel{font-size: 22px;}
    .wrap-2 .form{width: 330px;}
    .wrap-3 span{font-size: 30px;}
    .wrap-4 a{width: 80px;line-height: 80px;}
    .wrap-4 .pager{margin: 0;}
    .wrap-4 img{width: 220px;height: 150px;}
    .wrap-5 img{width: 400px;height: 300px;}
    .wrap-5 .review{padding-left:30px;} 
    .wrap-6 img{width: 350px;height: 260px;}
    .wrap-8 .pricing{width: 240px;}
    .wrap-8 .pricing .sepr{width: 240px;}
    .wrap-8 .pricing .sepra p{width: 240px;}
    .wrap-9 .profile .comment{width: 220px;}
    .wrap-9 .profile .name img{width: 60px;height: 60px;}

}

/* mobi landscape*/
@media screen and (max-width:767px){
	.container{width:100%}
    .col-m-3{width: 25%;}
    .col-m-4{width: 33.33%;}
    .col-m-6{width: 50%;}
    .col-m-8{width: 66.66%;}
    .col-m-12{width: 100%;}
    .collapse{display: none;clear: both;}
    .wrap-1 .btnmob{display: inline-block;}
    .wrap-2 h2{font-size: 40px;}
    .wrap-2 .rel{font-size: 15px;}
    .wrap-2 .pera{font-size: 12px;}
    .wrap-2 .form{width: 280px;}
    .wrap-2 .header{font-size: 16px;line-height: 40px;}
    .wrap-2 .body{padding: 16px;}
    .wrap-2 .footer button{height: 40px;}
    .wrap-3 span{font-size: 20px;}
    .wrap-3 p{font-size: 10px;}
    .wrap-4 .pager p{font-size: 10px;}
    .wrap-4 img{width: 190px;height: 150px;}
    .wrap-5 img{width: 300px;height: 200px;}
    .wrap-5 .title{padding: 20px 0;}    
    .wrap-5 p{font-size: 10px;}
    .wrap-5 .title span{width: 40px;line-height: 30px;}
    .wrap-5 .title{padding: 30px 0;}
    .wrap-6 p{font-size: 12px;}
    .wrap-6 img{width: 300px;}
    .wrap-7 p.headline{margin: 0 0 40px;}
    .wrap-8 .pricing{width: 180px;}
    .wrap-8 .pricing .sepr{width: 180px;}
    .wrap-8 .pricing .sepra p{width: 180px;}
    .wrap-9 .profile .comment{width: 180px;}
    .wrap-8 .pricing .data p{font-size: 12px;}
    .wrap-9 .profile .comment p{font-size: 12px;}
    .wrap-1 nav ul li{float: none;}
    .wrap-1 nav ul li a{  line-height: 40px;}

}

/* mobi portrait*/
@media screen and (max-width:460px) {
    .col-mp-3{width:25%}
    .col-mp-6{width:50%}
    .col-mp-9{width:75%}
    .col-mp-12{width:100%}
    .wrap-2 h2{margin-top: 80px;}
    .wrap-2 .form{margin-top: 10px;}
    .wrap-2 .sep{margin: 15px 0;}
    .wrap-2 a{margin: 20px 0;}
    .wrap-2 .form{width: 100%;}
    .wrap-3{background: #fff;padding: 20px 0;text-align: center;}
    .wrap-3 p{font-size: 12px;margin: 0 4px;}
    .wrap-3 ul li a{padding:0 5px;}
    .wrap-3 span{font-size: 20px;color: #ccc;}
    .wrap-4{background: #f5f5f5;padding:50px 0 50px;}
    .wrap-4 a{width: 40px;line-height: 70px;font-size: 10px;}
    .wrap-4 .pager p{margin: 10px 0;}
    .wrap-4 .pager a.download{width: 70px;line-height: 30px;font-size: 10px;}
    .wrap-4 img{width: 100%;height: 180px;margin: 40px 0 20px;}
    .wrap-5{padding: 50px 0;}
    .wrap-6{padding: 50px 0;}
    .wrap-6 h4{text-align: center;margin-bottom: 20px;}
    .wrap-6 .sep{text-align: center;margin: auto;}
    .wrap-6 p{margin-top: 20px;}
    .wrap-6 img{margin-top: 30px;width: 100%;}
    .wrap-7{padding: 50px 0;}
    .wrap-7 h3{font-size: 30px;}
    .wrap-7 .design{margin: 30px 0  ;}
    .wrap-8{padding: 50px 0;}
    .wrap-8 p.headline{margin: 0 0 40px;}
    .wrap-8 .pricing{width: 300px;margin-bottom: 70px;}
    .wrap-8 .pricing .sepr{width: 300px;}
    .wrap-8 .pricing .sepra p{width: 300px;}
    .wrap-8 .dollerprice{position: relative;}
    .wrap-8 .rightshift-mp{position: relative;left: 15px;margin-bottom: 10px;}
    .wrap-9 p.headline{margin: 0 0 40px;}
    .wrap-9 .profile{margin: 30px 0;}
    .wrap-9 .profile .comment{width: 100%;line-height: 147px;}
    .wrap-10 .design{padding: 40px 0 0;}
    .wrap-10 .design h4{font-size: 25px;}
    .wrap-10 .design p{font-size: 14px;}
    
}