.bg-white{background: #fff}
.banner,
section{
width: 100%;
position: relative;
overflow: hidden;
}
.services,
.banner{
background: url(../img/slider.jpg);
background-repeat: no-repeat;
background-size: cover;
color: #fff
}

.banner{height: 350px;}
.features,
.services,
.news{padding: 60px 0;}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom: 0;
 background-color: rgba(0, 32, 74, 0.82);
}

.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,
.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{
position:relative;
padding-left:15px;
}

/*banner*/
.banner .content{
    width: 60%;
    margin: 0 auto;
    padding-top: 8%;
    position: relative;
}
.banner .content p{
    padding: 3%;
}
.banner .content .btn{background: #fd5f00;color: #fff}

.section-title{text-align: center;}
.section-title h2{
position: relative;
padding:10px 5px;
margin-bottom: 70px;
display: inline-block;
}
.section-title h2:before{
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #fd5f00
}
/*Featuers*/

.feature-box .title{
margin: 15px 0;
font-size: 20px;
}
.feature-box{
text-align: center;
margin-bottom: 30px;
padding: 20px;
border-radius: 30px;
border: 1px solid #e7e7e7;
}
.feature-box .feature-icon{
width: 75px;
height: 75px;
line-height: 70px;
font-size: 36px;
background: #fd5f00;
color: #fff;
border-radius: 50%;
margin: 0 auto;
}
.feature-box .description{
font-size: 13px;
color :#666;
line-height: 25px;
margin: 0 0 30px 0;
}
/*Services */
.services-img{
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    height: auto;
    display: none;
}
.service-box{
  text-align: center;
padding: 20px;
}
.service-box .img{
width: 75px;
height: 75px;
line-height: 70px;
margin: 0 auto;
}

.service-box .desc p{
font-size: 13px;
line-height: 25px;
margin: 0 0 30px 0;
}
/*News*/
.news .section-title h2{display: inline-block;}
.news .section-title .btn{margin: 10px;}

.news-slider,
.related-post-item{margin-bottom: 30px}
.news-slider{position: relative;text-align: right;}
.related-post-item,
.news-slider .post-slider{
  position: relative;
  border: 1px solid #d3d5d7;
}
.news-slider .img img{
display: block;
width: 100%;
height: 445px;
}
.related-post-item .content,
.news-slider .content{
  width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 32, 74, 0.82);
    padding: 20px 30px;
    color: #bec5cd;
}
.related-post-item .content{padding: 0 30px}
.related-post-item h3,
.news-slider .content h3{
  margin: 0;
  color: #fff
}
.news-slider .entry-meta > span{
  background: transparent;
  border: 1px solid #5b6573;
  color: #bec5cd;
}
.related-post-item .img img{
  display: block;
width: 100%;
height: 208px;
}


/*Media*/
@media screen and (min-width:768px){

.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:right}
.col-sm-12{width:100%}
.col-sm-11{width:91.66666667%}
.col-sm-10{width:83.33333333%}
.col-sm-9{width:75%}
.col-sm-8{width:66.66666667%}
.col-sm-7{width:58.33333333%}
.col-sm-6{width:50%}
.col-sm-5{width:41.66666667%}
.col-sm-4{width:33.33333333%}
.col-sm-3{width:25%}
.col-sm-2{width:16.66666667%}
.col-sm-1{width:8.33333333%}
}
@media screen and (min-width: 992px) {
  .services-img{display: block;}
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:right}
.col-md-12{width:100%}
.col-md-11{width:91.66666667%}
.col-md-10{width:83.33333333%}
.col-md-9{width:75%}
.col-md-8{width:66.66666667%}
.col-md-7{width:58.33333333%}
.col-md-6{width:50%}
.col-md-5{width:41.66666667%}
.col-md-4{width:33.33333333%}
.col-md-3{width:25%}
.col-md-2{width:16.66666667%}
.col-md-1{width:8.33333333%}
}

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}



.bounceIn {
  animation-name: bounceIn;
}
.slideInDown {
  animation-name: slideInDown;
}
.slideInUp {
animation-name: slideInUp;
}
.slideInLeft {
animation-name: slideInLeft;
}
.slideInRight {
animation-name: slideInRight;
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: flipInX;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}

to {
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}

to {
opacity: 1;
transform: none;
}
}
@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes flipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}

40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}

60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}

80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}

to {
transform: perspective(400px);
}
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}

to {
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}

to {
transform: translate3d(0, 0, 0);
}
}