/*Reset*/
*{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;}
[abbr]{cursor: help;}
button{cursor: pointer;}

/*Fonts*/
@font-face{
    font-family: ProximaRegular;
    src: url(../fonts/Proxima-Nova-Reg.woff) format('woff');
}
@font-face{
    font-family: ProximaBold;
    src: url(../fonts/Proxima-Nova-Bold.woff) format('woff');
}
@font-face{
    font-family: ProximaThin;
    src: url(../fonts/pnt.woff2) format('woff');
}
body{font-family: ProximaRegular,sans-serif;}
.thin{font-family: ProximaThin,sans-serif; }
h1,h2,h3,h4,h5,h6,b,strong{font-family: ProximaBold, sans-serif;}
.clear{clear: both;}

.container{width: 1200px;margin: auto;padding: 0 15px;}

/*Grid*/
.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;}

/*Layout*/
.wrap-1{background-color: #000;color: #fff;}
.wrap-1 h1{font-size: 30px;line-height: 80px;}
.wrap-1 h1 a{color: inherit;display: inline-block;}


.wrap-1 nav ul{margin: 0 -20px;}
.wrap-1 nav ul li{float: left;margin:0 5px;}
.wrap-1 nav ul li a{color: inherit;display:block;line-height: 80px;padding: 0 15px;}

.wrap-1 .btn-nav{color: #da4141;display: block;border: 2px solid;width: 90px;line-height: 31px;text-align: center;
border-radius: 10px;font-size: 16px;}
.wrap-1 .btn-nav{float: right;margin-top: 23px;}
/*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:#666 ;color: #fff;}
.wrap-2 .video{padding: 200px 0;}
.wrap-2 .video .play{background: transparent;border: none;color: #fff;font-size: 150px;float: left;margin-right: 40px;}
.wrap-2 .video p.thin{font-size: 60px;padding-top: 50px;}
.wrap-2 .video a{font-size: 16px;color: #f3bdbd;}

.wrap-3{background: #ca3c3c;color: #fff;padding: 20px 0;}
.wrap-3 h2{font-size: 72px;border-bottom: 10px solid;}
.wrap-3 .feature{margin: 30px 0;}
.wrap-3 .feature .circle{width: 100px;border: 2px solid;border-radius: 50%;font-size: 36px;text-align: center;line-height: 96px;float: left;
margin-right:30px ;}
.wrap-3 .feature h3{font-size: 16px;line-height: 30px;}
.wrap-3 .feature p.thin{font-size: 14px;line-height: 22px;}

.wrap-4{background:#fff;line-height: 150px;color: #ca3c3c;text-align: center;}
.wrap-4 span{font-size: 36px;}

.wrap-5{background:#ebebeb;color: #363636;padding: 80px 0 140px 0;}
.wrap-5 h3{font-size: 72px;border-bottom: 10px solid;}
.wrap-5 .btn-nav{color: #ca3c3c;display: inline-block;border: 2px solid;width: 90px;line-height: 31px;text-align: center;
    border-radius: 10px;font-size: 16px;margin-top: 23px;}
.wrap-5 .active{background:#ca3c3c ;color:#fff;border-color:  #ca3c3c;}
.wrap-5 .project{position: relative;margin: 30px 0 0 0;}
.wrap-5 .over{background:#fff;position: absolute;bottom: 0;width: 100%;text-align: center;padding: 20px 0;display: none;}
.wrap-5 .over h4{color: #ca3c3c;font: 18px;line-height: 40px;}
.wrap-5 .over p.thin{color: #ccc;font: 14px;line-height: 20px;}
.wrap-5 .project:hover .over{display: block;}
.wrap-5 .plus span{font-size: 36px;color: #ca3c3c;display: block;width: 32px;height: 32px;margin: 30px 0 0 0;}
.wrap-5 img{max-width: 100%;}

.wrap-6{background: #666;color: #fff;padding: 45px 0;}
.wrap-6 .review{text-align: center;}
.wrap-6 .review p.thin{font-size: 36px;line-height: 41px;}
.wrap-6 .review img{border-radius: 50%;margin-top:20px ;}
.wrap-6 .review h4{font-style: 16px;}
.wrap-6 .review{display: none;}
.wrap-6 .review.active{display: block;}

.pager{width: 60px;margin: 25px auto;}
.pager ul li{float: left;margin: 0 5px;}
.pager ul li a{display: block;border: 2px solid #fff;height: 10px;width: 10px;border-radius: 50%;}
.pager ul li a.active{background: #fff;}

.wrap-7{background: #fff;padding: 80px 0 140px;}
.wrap-7 h2{font-size: 72px;border-bottom: 10px solid;}
.wrap-7 .team{ position: relative;margin:80px 0 ;}
.wrap-7 .social{position: absolute;top:60px;right: 60px;}
.wrap-7 .social ul li{float: left;margin: 0 5px;}
.wrap-7 .social ul li a{color: #ffff;background:#ca3c3c ;font-size: 24px;display: block;line-height: 50px;width: 50px;text-align: center;border-radius: 50px;}
.wrap-7 .left100{padding-left: 100px;margin-top: 45px;}
.wrap-7 .left100 h3{color: #ca3c3c;line-height: 30px;font-size: 18px;}
.wrap-7 .left100 h4.thin{color: #898989;line-height: 30px;font-size: 14px;}
.wrap-7 .left100 p.thin{color: #363636;font-size: 14px;line-height: 22px;}
.wrap-7 .plus span{font-size: 36px;color: #ca3c3c;display: block;width: 32px;height: 32px;}

.wrap-8{background: #666;color: #fff;text-align: center;padding:85px 0;}
.wrap-8 span{font-size: 72px;}
.wrap-8 p.thin{font-size: 72px;margin-top: 20px;}
.wrap-8 p{font-size: 18px;}

.wrap-9{background: #fff;padding: 80px 0 140px;}
.wrap-9 h2{font-size: 72px;border-bottom: 10px solid;}
.wrap-9 img{padding: 80px 0 30px ;}
.wrap-9 img{float: right;}
.wrap-9 .left100{padding-left: 100px;}
.wrap-9 .left100 h3{color: #ca3c3c;font-size: 18px;line-height: 60px;}
.wrap-9 .left100 p{font-size: 14px;line-height: 22px;color: #363636;}
.wrap-9 .accordian{padding: 80px 0;}
.wrap-9 .accordian ul li{margin: 5px 0;color: #898989;}
.wrap-9 .accordian ul li p{display: none;}
.wrap-9 .accordian ul li.active p{display: block;}
.wrap-9 .accordian ul li.active h4{color: #ca3c3c;}
.wrap-9 .accordian ul li h4{line-height: 50px;border: 1px solid #ebebeb;border-radius: 10px;padding: 0 20px ;cursor: pointer;}
.wrap-9 .accordian span.fa:first-child{margin-right: 25px;}
.wrap-9 span.fa{font-size: 24px;}
.wrap-9 span.pull-right{margin-top: 17px;font-size: 14px;}
.wrap-9 p.thin{font-size: 14px;line-height: 22px;margin: 14px 20px 18px;}

.wrap-10{background: #ca3c3c;color: #fff;padding: 19px 0;}
.wrap-10 form input[type="email"]{width: 100%;background: transparent;border: none;height: 42px;font-size: 36px;color: #fff;}
.wrap-10 form input[type="email"]:focus{outline: none;}
.wrap-10 ::placeholder{font-size: 36px;color: #fff;}
.wrap-10 button{background: #fff;color: #ca3c3c;border: none;height: 35px;width: 90px;font-size: 16px;border-radius: 10px;}

.wrap-11{background: #7f7f7f;color: #fff; padding: 25px 0;}
.wrap-11 .box{background: #a6a6a6;line-height: 95px;}
.wrap-11 .box img{vertical-align: middle;}

.wrap-12{background: #ebebeb;padding: 80px 0 140px;}
.wrap-12 h2{font-size: 72px;border-bottom: 10px solid;}
.wrap-12 address{font-size: 14px;font-style: normal;line-height: 30px;margin: 32px 0;}
.wrap-12 .social-footer ul li{float: left;margin-right: 14px;}
.wrap-12 .social-footer ul li a{display: block;color: #ca3c3c;font-size: 16.22px;}

.wrap-12 form{padding-top: 10px;}
.wrap-12 form label{border: 2px solid ;display: block;padding: 20px;font-size: 16px;margin: 15px 0;}
.wrap-12 form label input{background: transparent;border: none;font-size: 16px;width: 230px;}
.wrap-12 form label textarea{background: transparent;border: none;font-size: 16px;vertical-align: top;resize: none;}
.wrap-12 form button{width:100%;line-height: 80px;margin: 15px 0;background: #fff;color: #ca3c3c;font-size: 16px;border: none;border-radius: 10px;}
.wrap-12 form button span{font-size: 36px;vertical-align: middle;}


.wrap-13{background: #252525;color: #fff;text-align: center;padding:45px 0 ;}
.wrap-13 h5{font-size: 30px;}
.wrap-13 p.thin{font-size: 14px;line-height: 22px;}


/* Responsive (Media Quary) */
/* tablet landscape*/
@media screen and (max-width:1220px){
    .container{ width: 960px; }
    .wrap-3 h2{font-size: 60px;border-bottom: 10px solid;}
    .wrap-5 .btn-nav{margin-right: 3px;}
    .wrap-11 .box img{vertical-align: middle;width: 120px;}
}

/* tablet portrait*/
@media screen and (max-width:980px){
    .container{ width: 760px; }
    .col-t-3{width:25%}
    .col-t-6{width:50%}
    .col-t-9{width:75%}
    .col-t-12{width:100%}
    .wrap-7 .social {top: 170px;right: 0px;}
    .wrap-7 .left100 {margin-top: 60px;}
    .wrap-7 .left100 p.thin{font-weight: 900;color: #000;}
    .wrap-8 p.thin{font-size: 60px;}
    .wrap-11 .box img{vertical-align: middle;width: 90px;}
    .wrap-9{padding: 80px 0 30px;}
    .wrap-9 .left100{margin-left: -96px;}
}

/* mobile landscape*/
@media screen and (max-width:767px){
    .container{width: 100%;}
    .col-m-4{width: 33.33%;}
    .col-m-6{width: 50%;}
    .wrap-7 .left100{margin-left: -60px ;}
    .wrap-11 .box{background: #a6a6a6;line-height: 60px;}
    .wrap-11 .box img{vertical-align: middle;width: 70px;}
    .collapse{display: none;clear: both;}
    .wrap-1 .collapse a{margin-bottom: 20px;}
    .wrap-1 .btnmob{display: inline-block;}
    .wrap-1 nav ul li { float: none; text-align: right;}
    .wrap-1 nav ul li a{  line-height: 40px;}
}

/* mobile 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 .video p.thin{clear: both;font-size: 50px;}
    .wrap-6 .review p.thin{font-size: 26px;}
    .wrap-7 .team{margin:15px 0;}
    .wrap-10 ::placeholder{font-size: 22px;}
    .wrap-10 button{margin-top: 6px;}
    .wrap-11 .box{background: #a6a6a6;line-height: 155px;margin-bottom: 15px;}
    .wrap-11 .box img{vertical-align: middle;width: 100%;}
    .wrap-9 img{float: right;}
    .wrap-12 form label textarea{width:100%}
}