@import url('preloader.css');
@import url('bootstrap.css');
@import url('theme.css');
/* Start you custom CSS styling here 
------------------------------------------*/

.demo-banner{padding-bottom:60px;}



/*************************************
   Features all  ( all pages Features )
 **************************************/
/*feature 1*/
.feature { background: #eceff7; padding: 3px; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 1; }
.feature-content { position: relative; z-index: 9; }
.feature i { background: #fff; width: 100%; font-size: 30px; color: #9a9a9a; padding: 35px 10px;  -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;}
.feature h4 { text-transform: none; padding:30px 0 10px; font-weight: 400; transition: all 0.3s ease-out 0s; }
.feature p { font-weight: 100; padding: 0 20px;  transition: all 0.3s ease-out 0s; }
.feature a { font-size: 14px; font-weight: 100; color: #808080; margin: 25px 0 10px; display: block; position: relative; z-index: 3; }
.feature .feature-img { bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; z-index: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 0; background-size: cover; background-position: center center; }
.feature .border { position: absolute; background: #9a9a9a; height: 0px; bottom: 0; left: 0; z-index:2; width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;  }
.feature:hover .feature-img, .feature.active .feature-img { opacity: 1; }
.feature:hover .border, .feature.active .border { height: 45px; }
.feature:hover i, .feature.active i { background: rgba(255, 255, 255, 0); color: #fff; padding-bottom: 15px; }
.feature:hover h4, .feature.active h4, .feature:hover p, .feature.active p { color: #fff; }
.feature:hover a, .feature.active a {  color: #fff; margin-top: 45px; }
.feature:hover:before, .feature.active:before { background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; color: #fff; content: ""; display: inline-block; height: 100%;
  left: 0; position: absolute; top: 0; width: 100%; z-index: 1;  -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }
 /*feature 2*/
.feature-2 span { float: left; margin-right: 15px; color: #9a9a9a; font-size: 26px; }
.feature-2 h5 {  display: table; padding-top: 4px; }
/*feature 3*/
.feature-3-title { float: left; display: table; margin-right: 20px; }
.feature-3-title span { font-size: 34px; color: #9a9a9a;}
.feature-3-info { display: table-cell; vertical-align: top; }
.feature-3 .work-hr p{ line-height: 30px; }
.feature-3-info p { margin-bottom: 0px; }
/*feature 4*/
.feature-4 span { float: left; margin-right: 19px; font-size: 34px; color: #9a9a9a; }
.feature-4 h4 { display: block; }
.feature-4 p { margin-left: 18px; padding-left: 36px; border-left:1px solid #eceff7; }
.feature-4-sec li { font-size: 14px; color: #626262; margin-bottom: 10px; }
.feature-4-sec i { color: #626262; font-size: 16px; margin-left: 17px; padding-right: /*28px*/8px; padding-top: 4px; }
/*feature 5*/
.feature5 span { font-size: 30px; color: #9a9a9a; font-weight: normal; margin-bottom: 20px; display: block; }
.feature5 h4 { position: relative; padding-bottom: 15px; }
.feature5 h4:before { position: absolute; bottom: 0px; content: ""; width: 70px; height: 2px; background: #9a9a9a; }
.feature5 p { font-weight: normal; }
.feature5 a { font-size: 15px; color: #363636; position: relative;}
.feature5 i { opacity: 0; position: absolute; left: 75px; margin-top: 9px; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; font-size: 12px; }
.feature5 a:hover  {   color: #9a9a9a; }
.feature5 a:hover i { left: 85px;  opacity: 1;  color: #9a9a9a; }
 /*feature6*/
.feature6 strong { font-size: 200px; font-weight: bold; color: #eceff8; position: relative; font-family: 'Lato', sans-serif; line-height: 140px;}
.feature6-item-top {  transform: translate3d(-50%, 0px, 0px); -webkit-transform: translate3d(-50%, 0px, 0px); -o-transform: translate3d(-50%, 0px, 0px); -ms-transform: translate3d(-50%, 0px, 0px); -moz-transform: translate3d(-50%, 0px, 0px); -ms-transform: translate(-50%, 0);  left: 50%; position: absolute; text-align: center; top: 15%;  }
.feature6-item-top span { font-size: 30px; line-height: 34px; background: transparent; color: #9a9a9a; margin-bottom: 10px; display: block; border:none; outline: none; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out;}
.feature6-item-top h3 { transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; }
.feature6 p { font-size: 15px; }
.feature6:hover .feature6-item-top span { margin-top: 40px; }
.feature6:hover .feature6-item-top h3 { margin-top: -100px; }
.work-process .feature6 { margin-bottom: 0px; }

/*feature 7*/
.feature7 .feature7-icon{ float: left; width: 70px; height: 70px; background: transparent; border:2px solid #fff; text-align: center; margin-right: 25px;}
.feature7 .feature7-icon span { font-size: 25px; line-height: 65px; color: #fff; }
.feature7 .feature7-info {  display: table; }
.feature7 .feature7-info p { color: #fff; line-height: 20px; }
/*feature 8*/
.feature-8-title { float: left; display: table; margin-right: 20px; }
.feature-8-title span { font-size: 34px; color: #9a9a9a;}
.feature-8-info { display: table-cell; vertical-align: top; }
.feature-8-info p { font-size: 14px; margin-bottom: 0px; }
.feature-8-main .feature-8 { margin-bottom: 0px; padding: 60px 0; }
.feature-8-main .feature-8-info p { font-size: 13px; }
/*owl-carousel-10*/
.feature-8-main .owl-carousel-10 { padding: 0 15px; }
.owl-carousel-10 .owl-nav { display: block; position: absolute; text-indent: inherit; left: 0; width: 100%; cursor: pointer; top: 4px; }
.owl-carousel-10 .owl-item { cursor: url("../images/client-arrow.png") 25 25, pointer; padding:0 15px; }
/*feature 9*/
.feature-9 { padding: 25px 35px;  position: relative; z-index: 9; background: #00c6ff; height: 250px; }
.feature-9-bg-1 { background: #00c6ff; }
.feature-9-bg-2 { background: #9a9a9a; }
.feature-9-bg-3 { background: #0091bb; }
.feature-9 .feature-9-title-left { float: left; opacity: 0.09; }
.feature-9 .feature-9-title-left h1 { font-size: 84px; line-height: 63px; margin-right: 20px; color: #000; }
.feature-9 .feature-9-title-right { display: table; }
.feature-9-icon { position: absolute; top: 14px; z-index: -1; right: 0px; opacity: 0.05;  -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; }
.feature-9-icon span { font-size: 200px; color: #000;  }
.feature-9:hover .feature-9-icon { right: 52%; }
/*feature 10*/
.feature-10 span { font-size: 33px; }
.feature-10 p { font-size: 13px; margin-bottom: 0px; }
/*feature 11*/
 .feature-11 .feature-11-icon { background: transparent; border:1px solid #e06f23; border-radius: 50%; display: block; height: 90px; margin: 0 auto; padding: 9px; text-align: center;
  width: 90px;  -webkit-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.feature-11 .feature-11-icon span { width: 70px; height: 70px; border-radius: 50%; color: #ffffff; font-size: 26px; text-align: center; line-height: 75px; background:#aa3c55; display: inline-block; -webkit-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.feature-11 .feature-11-info h4 {  position: relative; }
.feature-11 .feature-11-info h4:before { position: absolute;  width: 70px; height: 2px; background: #9a9a9a; margin: 0 auto; left: 37%; bottom: 0; }
.feature-11 .feature-11-info p { margin-bottom: 0px; }
.feature-11:hover .feature-11-icon { border-color: #9a9a9a; }
.feature-11:hover .feature-11-icon span { background: #b0404c; color: #fff; }
/*feature 12*/
.feature-12 span {font-size: 30px; color: #fff; margin-right: 20px; float: left; }
.feature-12 p { display: table; }
/*feature 13*/
.features13 { padding-top: 50px; padding-right: 25px; }
.features13 p { position: relative; z-index: 9; margin-top: 20px; margin-bottom: 20px; }
.features13 b { position: absolute; z-index: 0; top: 83px; font-family: 'Lato', sans-serif;  right: 19px; font-size: 72px; color: #dde1eb; line-height: 72px; }
.features13 ul { border-right: 6px solid #dde1eb; padding-right: 20px; }
.features13 li { color: #626262; font-size: 16px; line-height: 22px; padding: 2px 0 7px; }
.features13.left { padding-right: 0px; padding-left: 25px;  }
.features13.left b { position: absolute; z-index: 0; top: 83px; font-family: 'Lato', sans-serif;  left: 20px; font-size: 72px; color: #dde1eb; line-height: 72px; }
.features13.left ul { border-left: 6px solid #dde1eb; padding-left: 20px; border-right: 0px; padding-right: 0; }
/*features-14*/
.features-14 span { color: #fff; font-size: 32px; margin-bottom: 25px; display: block; }
 /*feature-15*/
.feature-15 {  background: #fff; padding: 40px 30px; -webkit-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;  }
.feature-15 .feature-15-icon { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #9a9a9a; margin: 0 auto; }
.feature-15 .feature-15-icon img { margin-top: 20px; }
.feature-15 .feature-15-content { margin-top: 30px; }
.feature-15 .feature-15-content h4 { margin-bottom: 30px; }
.feature-15 .feature-15-content p { margin-bottom: 0px; }
.feature-15:hover { box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1); }
/*feature-16*/
.feature-16 { padding: 0 85px; }
.feature-16 .feature-16-icon { display: table-cell; }
.feature-16 .feature-16-icon span {  font-size: 30px; color: #9a9a9a; margin-right: 20px; }
.feature-16 .feature-16-contant { display: table-cell; vertical-align: top; }
.feature-16 .feature-16-contant p { font-size: 13px; }
/*feature-17*/
.feature-17 .feature-17-icon { border: 20px solid #2b2b2b; display: inline-block; border-radius: 50%; margin-bottom: 30px; }
.feature-17 .feature-17-icon span { border: 1px solid #393939; width: 130px; height: 130px; border-radius: 50%; line-height: 130px; text-align: center; background: #323232; display: inline-block; font-size: 40px; color: #fff; box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);  }
.feature-17 .feature-17-content p { font-size: 13px; color: #fff; padding: 0 20px; }

.feature-18 i { display: table-cell; float: left; margin-right: 15px; font-size: 24px; }
.feature-18 h5 {  display: table-cell; margin-bottom: 20px; color: /*#363636*/#9a9a9a; line-height: 22px; }
.feature-18 p { margin-top: 20px; display: block; color:#363636}

 /*feature-19*/
 .feature-19 h1 { font-size: 60px; color: #323232; }
 .feature-19 h3 { font-weight: 300; margin: 30px 0px 20px; }
 .feature-19 a { font-size: 14px; color: #9a9a9a; }
 .feature-19 a:hover { color: #323232; }

  /*feature-20*/
.feature-20 {  background: #fff; padding: 40px 30px; -webkit-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;  }
.feature-20 .feature-20-icon span { width: 80px; height: 80px; border-radius: 50%; display: inline-block; background: #eceff7; border: 0px solid #9a9a9a; margin: 0 auto; line-height: 80px; font-size: 26px; color: #626262; }
 .feature-20 .feature-20-content { margin-top: 30px; }
.feature-20 .feature-20-content h4 { margin-bottom: 30px; color: #9a9a9a; }
.feature-20 .feature-20-content p { margin-bottom: 0px; }
.feature-20:hover { box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1); }



.service-box-2 {
    margin: auto auto 19px;
    position: relative;
}

.service-box-2 .icon {
    left: 0;
    position: absolute;
    top: 0;
}

.service-box-2 .icon span {
    background: rgba(0, 0, 0, 0) url("../img/home1/service-icon-bg-1.png") no-repeat scroll center center / contain;
    color: #ffffff;
    display: inline-block;
    font-size: 28px;
    height: 50px;
    line-height: 56px;
    text-align: center;
    width: 50px;
}

.service-box-2 .icon span.color-1 {
    background: rgba(0, 0, 0, 0) url("../img/home1/service-icon-bg-1.png") no-repeat scroll center center / contain;
}

.service-box-2 .icon span.color-2 {
    background: rgba(0, 0, 0, 0) url("../img/home1/service-icon-bg-2.png") no-repeat scroll center center / contain;
}

.service-box-2 .icon span.color-3 {
    background: rgba(0, 0, 0, 0) url("../img/home1/service-icon-bg-3.png") no-repeat scroll center center / contain;
}

.service-box-2 .icon span.color-4 {
    background: rgba(0, 0, 0, 0) url("../img/home1/service-icon-bg-4.png") no-repeat scroll center center / contain;
}

.service-box-2 .icon span.color-5 {
    background: rgba(0, 0, 0, 0) url("../img/home1/service-icon-bg-5.png") no-repeat scroll center center / contain;
}

.service-box-2 .icon span.color-6 {
    background: rgba(0, 0, 0, 0) url("../img/home1/service-icon-bg-6.png") no-repeat scroll center center / contain;
}

.service-box-2 .icon span.color-7 {
    background: rgba(0, 0, 0, 0) url("../img/home1/service-icon-bg-7.png") no-repeat scroll center center / contain;
}

.service-box-2 .icon span.color-8 {
    background: rgba(0, 0, 0, 0) url("../img/home1/service-icon-bg-8.png") no-repeat scroll center center / contain;
}

.service-box-2 .content .title {
    font-size: 18px;
    line-height: 22px;
    padding: 18px 0 0 70px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.service-box-2:hover .content .title {
    color: #00a0b8;
}

.service-box-2 .content .text {
    margin: 26px 0 0;
}

.service-box-2 .content .link {
    color: #919495;
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    margin: 22px 0 0;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.service-box-2 .content .link:hover {
    color: #00a0b8;
    margin-left: 3px;
}