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

#banner{
  width:100%;
/*background: rgba(49,150,227,1);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(49,150,227,1)), color-stop(100%, rgba(49,180,227,1)));
  background: linear-gradient(to right, rgba(49,145,227,1) 0%, rgba(49,175,227,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3196e3', endColorstr='#31b4e3', GradientType=1 );*/
 background: linear-gradient(to bottom right, rgba(103, 181, 149, 0.87), rgba(36, 184, 208, 0.87)), url(https://www.nethosted.co.uk/img/nhbg.png);
  overflow:hidden;
}


/*====Banner navigation=====*/

#banner-title{
  position:relative;
  width:100%;
  overflow:hidden;
}

#banner-title h1{
  margin-top:80px;
}

/*=====Banner people======*/

#banner-people{
  width:100%;
  position:absolute;
  bottom:-3.05vw; /*The 0.05 fixes a small glitch gap in some browsers*/
}

#banner-people .person{
  width:25%;
  /*width:25vw;*/
  height:17vw;
  float:left;
}

#banner-people .person .person-bubble{
  position:relative;
  width:16vw;
  height:16vw;
  margin:0 auto;
  border-radius: 50%; 
  border:solid 0.4em rgba(255,255,255,0.5);
  text-align:center;
  overflow:hidden;
}

.person-bubble img{ 
  width:100%;  
  height:auto;
}

.slick-next,
.slick-prev{
  position:absolute;
  display:block;
  opacity:0.3;
  -webkit-transition:all 0.3s ease-in;
  font-size:3em;
  color:#000;
  cursor: pointer;
  top:50%;
  transform:translate(-50%, 0);
}

.slick-next{ 
  right:30px; 
}

.slick-prev{ left:30px; }

/*Hover*/
.slick-next:hover,
.slick-prev:hover{
  opacity:0.6;
  color:#000;
}

.slick-next:hover{ right:25px; }
.slick-prev:hover{ left:25px; }

.slide {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/*====The people=====*/


.person-bubble{
  -webkit-transform: translate(0, 200%);
}

#banner-people .person1 .person-bubble{
  -webkit-animation:bubble-bounce 0.6s ease-in-out forwards; 
          animation:bubble-bounce 0.6s ease-in-out forwards;
}

#banner-people .person2 .person-bubble{
  -webkit-animation:bubble-bounce 0.6s ease-in-out 0.2s forwards; 
          animation:bubble-bounce 0.6s ease-in-out 0.2s forwards;
}

#banner-people .person3 .person-bubble{
  -webkit-animation:bubble-bounce 0.6s ease-in-out 0.4s forwards;
          animation:bubble-bounce 0.6s ease-in-out 0.4s forwards;
}

#banner-people .person4 .person-bubble{
  -webkit-animation:bubble-bounce 0.6s ease-in-out 0.6s forwards;
          animation:bubble-bounce 0.6s ease-in-out 0.6s forwards;
}




/*---Bounce transition---*/


@-webkit-keyframes bubble-bounce{
    0% { -webkit-transform: translate(0, 200%); opacity:0; }
    80% { -webkit-transform: translate(0, 0) scale(1.5); opacity:0.6; border:solid 10px rgba(255,255,255,0.2); }
    100% { -webkit-transform: scale(1); opacity:1; }
}


@keyframes bubble-bounce{
    0% { transform: translate(0, 200%); opacity:0; }
    80% { transform: translate(0, 0) scale(1.5); opacity:0.6; border:solid 10px rgba(255,255,255,0.2); }
    100% { transform: scale(1); opacity:1; }
}






/*=============================
-----------Content------------
=============================*/

section#content{
  padding:60px 0 0 0;
}



/*=====Flexibility=====*/

.vps-info a.btn{ background:#ffcc16; }
.vps-info a.btn:hover{ background:#cda413; }



/*=====Feature details=====*/

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




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

/*-----Tablet portrait and smaller-----*/

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

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

  .slick-next,
  .slick-prev{
    display:none !important;
  }

}


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

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

  section#banner{
    padding-bottom:100px;
  }
  
  #hftp{
    display:none;
  }
  
  #epd{
    display:none;
  }

}

/*---Smaller screen heights---*/

@media screen and ( max-height: 900px ){

  #banner-title .h1,.br{
    display:none;
  }

  #slider{
    margin-top:140px;
  }

  #range{
    margin-top:0;
  }

  #banner-stats .statistic .stat-bubble{
    font-size:1.5em;
  }

  .stat-bubble span.stat-count{
    font-size:2.5em;
  }

}