/*=============================
-----------Banner------------
=============================*/

#banner{
  width:100%;
  height:72vh;
  background: rgba(22,181,115,1);
  background: -webkit-gradient(left top, right bottom, color-stop(rgba(22,181,115,0.87)), color-stop(rgba(24,185,165,0.87))), url(https://www.nethosted.co.uk/img/nhbg.png);
  background: linear-gradient(135deg, rgba(22,181,115,0.87), rgba(24,185,165,0.87)), url(https://www.nethosted.co.uk/img/nhbg.png);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16b573', endColorstr='#18b9a5', GradientType=1 );
  overflow:hidden;
}

#banner-people{
  width:50vw;
  margin-left:25vw;
  bottom:-1px; /*Avoids any glitchy gaps*/
}

#banner-people .person{
  width:8vw;
  height:10vw;
  margin:0 1vw;
  -webkit-transform: translate(0,200%);
  transform: translate(0,200%);
}

#banner-people .person3{
  -webkit-animation:person-entrance 0.8s ease-in-out forwards;
  animation:person-entrance 0.8s ease-in-out forwards;
}

#banner-people .person2,
#banner-people .person4{
  -webkit-animation:person-entrance 0.8s ease-in-out 0.2s forwards;
  animation:person-entrance 0.8s ease-in-out 0.2s forwards;
}

#banner-people .person1,
#banner-people .person5{
  -webkit-animation:person-entrance 0.8s ease-in-out 0.4s forwards;
  animation:person-entrance 0.8s ease-in-out 0.4s forwards;
}

@-webkit-keyframes person-entrance{

    100% { -webkit-transform: translate(0,0); }
}

@keyframes person-entrance{

    100% { transform: translate(0,0); }
}



/*=============================
-----------General------------
=============================*/

section#content{
  padding-bottom:0;
  position:relative;
  z-index:0;
}

a.btn.large{
  padding:16px 32px;
  font-size:1.4em;
  margin-top:15px;
}


#banner-title h2 {
font-size:1.3em;
padding-bottom:20px;
color: rgba(0, 0, 0, 0.6);
}

.feature h3 {
font-size:2em;
}


/*=============================
-----------Features------------
=============================*/

.feature h3 [class^="icon-"], 
.feature h3 [class*=" icon-"],
.feature-expanded h3 [class^="icon-"], 
.feature-expanded h3 [class*=" icon-"],
.feature .figure{
  color:#18b9a5;
}

.feature:hover,
.feature.hover-effect{
  background:#18b9a5;
}



/*=============================
-----------Packages------------
=============================*/

.package.selected header,
.package.selected .total,
.package .total a.btn,
.package-order a.btn{
  background:#18b9a5;
}

.package.selected,
.package-options input[type="radio"]:checked + label{
  border-color:#18b9a5;
}

.package .total a.btn:hover{
  background:#138c7d;
}



/*=============================
--------Media queries----------
=============================*/

/*
@media only screen and (max-width: 1025px){
}
*/
/*-----Tablet portrait and smaller-----*/
@media only screen and (max-width: 850px){

  section#banner{
    padding-bottom:150px;
  }

}

/*-----Mobile-----*/

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

  section#banner{
    padding-bottom:100px;
  }


}