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

#banner{
  width:100%;
  height:72vh;
  background: rgba(15,184,147,1) url(https://www.nethosted.co.uk/img/nhbg.png);
  background: -webkit-gradient(left top, right bottom, color-stop(rgba(15,184,147,0.87)), color-stop(rgba(114,175,205,0.87))), url(https://www.nethosted.co.uk/img/nhbg.png);
  background: linear-gradient(135deg, rgba(15,184,147,0.87), rgba(114,175,205,0.87)), url(https://www.nethosted.co.uk/img/nhbg.png);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64b6c1', endColorstr='#72afcd', 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 .person1{
  -webkit-animation:person-entrance-left 0.8s ease-in-out 0.4s forwards;
  animation:person-entrance-left 2s ease-in-out 0.4s forwards;
}

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

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


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

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

@-webkit-keyframes person-entrance{
  0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
    }
    80% {
        -webkit-transform: translateX(10px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}



@keyframes person-entrance{
0% {
        opacity: 0;
        transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        transform: translateX(-30px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes person-entrance-left{
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
    }
    80% {
        -webkit-transform: translateX(-10px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}



@keyframes person-entrance-left{
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }
    60% {
        opacity: 1;
        transform: translateX(30px);
    }
    80% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(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);
}

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

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

.feature:hover,
.feature.hover-effect{
  background:#64b6c1;
}




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


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

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

.package .total a.btn:hover{
  background:#51959e;
}

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

.package-option .details {
line-height:19px;
}


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

@media only screen and (max-width: 1025px){
	
#banner-title h1 {
margin-top:100px;
}
/*.hidemobile {display:none;}	*/
}

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

}