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

#banner{
  width:100%;
  height:72vh;
  background: rgba(142,101,165,1);
  background: -webkit-gradient(left top, right bottom, color-stop(rgba(142,101,165,0.87)), color-stop(rgba(114,85,185,0.87))), url(https://www.nethosted.co.uk/img/nhbg.png);
  background: linear-gradient(135deg, rgba(142,101,165,0.87), rgba(114,85,185,0.87)), url(https://www.nethosted.co.uk/img/nhbg.png);
  /*background: linear-gradient(135deg, rgba(112,81,135,1) 0%, rgba(114,85,185,1) 100%);*/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e65a5', endColorstr='#7255b9', 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;
}

#banner-people .person3{
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#banner-people .person2,
#banner-people .person4{
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 3.5s;
    animation-duration: 3.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;


}


#banner-people .person1,
#banner-people .person5{
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}

@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 

@-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:#7255b2;
}

.feature:hover,
.feature.hover-effect{
  background:#7255b2;
}



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

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

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

.package .total a.btn:hover{
  background:#5b438c;
}



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

@media only screen and (max-width: 1025px){
#banner-title h1{
}
}

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


}