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

#banner{
  width:100%;
  height:72vh;
  background: rgba(194,38,113,0.93);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(194,38,113,0.93)), color-stop(100%, rgba(178,32,152,0.86))), url(https://www.nethosted.co.uk/img/nhbg.png);
  background: linear-gradient(135deg, rgba(194,38,113,0.87) 0%, rgba(178,32,152,0.87) 100%), url(https://www.nethosted.co.uk/img/nhbg.png);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c22671', endColorstr='#b22098', 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:#c22671;
}

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



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

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

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

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

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



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


}