/*======Banner background======*/

#banner{
  height:75vh;
  position:relative;
  z-index:0;
}

#banner #banner-title{
  position: relative;
  z-index:2;
}

a.btn.mobile{
  display:none;
}

#banner #banner-background{
  position:absolute;
  z-index:0;
  top:0;
  width:700vw;
  height:700vh;
  background: rgba(253,105,66,1);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(253,105,66,0.87)), color-stop(14%, rgba(253,140,37,0.87)), color-stop(28%, rgba(21,181,114,0.87)), color-stop(42%, rgba(24,185,166,0.87)), color-stop(56%, rgba(49,180,227,0.87)), color-stop(70%, rgba(49,150,227,0.87)), color-stop(84%, rgba(195,36,166,0.87)), color-stop(100%, rgba(211,41,123,0.87))), url(https://www.nethosted.co.uk/img/nhbg.png);
background: linear-gradient(135deg, rgba(253,105,66,0.87) 0%, rgba(253,140,37,0.87) 14%, rgba(21,181,114,0.87) 28%, rgba(24,185,166,0.87) 42%, rgba(49,180,227,0.87) 56%, rgba(49,150,227,0.87) 70%, rgba(195,36,166,0.87) 84%, rgba(211,41,123,0.87) 100%), url(https://www.nethosted.co.uk/img/nhbg.png);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd6942', endColorstr='#d3297b', GradientType=1 );
}
/*
http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28\-45deg\%2C\%20rgba\%28255\%2C205\%2C22\%2C1\%29\%200\%25\%2C\%20rgba\%28253\%2C165\%2C24\%2C1\%29\%2014\%25\%2C\%20rgba\%2821\%2C181\%2C114\%2C1\%29\%2028\%25\%2C\%20rgba\%2824\%2C185\%2C166\%2C1\%29\%2042\%25\%2C\%20rgba\%2849\%2C180\%2C227\%2C1\%29\%2056\%25\%2C\%20rgba\%2849\%2C150\%2C227\%2C1\%29\%2070\%25\%2C\%20rgba\%28195\%2C36\%2C166\%2C1\%29\%2084\%25\%2C\%20rgba\%28211\%2C41\%2C123\%2C1\%29\%20100\%25\%29\%3B'
*/


/*======Banner slider======*/

#range{
  position:relative;
  z-index:2;
  margin-top:60px;
}


/*-----The bubble-----*/

/*Added to stop JS centering of price info*/
.bubble{
  margin-left: -159px;
}

#range .bubble{
  position:absolute;
  left:20%;
  top:22px;
}

#range .bubble .bubble-content{
  background:rgba(0,0,0,0.4);
  padding:10px 15px;
  height:70px;
  color:#FFF;
  border-radius: 5px;
}

#range .bubble span.price{
  display:inline-block;
  margin-right:30px;
  position:relative;
  top:-8px;
}

#range .bubble span#digits{
  font-size:2.25em;
}


/*-----The slider-----*/

#slider{
  position:absolute;
  width:60%;
  left:20%;
  border:0;
  height:10px;
  background: #FFF;
  outline: none;
  z-index:2;
  margin:150px auto 0 auto;
}

#slider .ui-slider-handle {
  position: absolute;
  margin: -5px 0 0 -15px;
  border-radius: 100%;
  background: #fff;
  border: 0;
  height: 30px;
  width: 30px;
  outline: none;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

#slider .ui-slider-handle:hover,
#slider .ui-slider-handle:focus {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);

}

#slider .ui-slider-range {
  background: #f16826;
}

#range .bubble::after{
  content: "";
  position: absolute;
  display: block;
  margin: 0 auto;
  top: 100%;
  width: 0;
  height: 0;
  left: 50%;
  margin-left: -20px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.4);
}


/*-----The stats-----*/

#banner-stats{
  position:absolute;
  width:100vw;
  z-index:1;
  bottom:0;
}

#banner-stats .statistic{
  position:relative;
  float:left;
  width:25vw;
  height:20vw;
  bottom:-3vw;
}

#banner-stats .statistic .stat-bubble{
  position:relative;
  width:20vw;
  height:20vw;
  margin:0 auto;
  border-radius: 50%;
  border:solid 0.2em rgba(255,255,255,0.5);
  text-align:center;
  font-size:1.875em;
  color:#FFF;
}

.stat-bubble .stat-bubble-content{
  position:relative;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}

.stat-bubble span.stat-count{
  font-size:2.33em;
  line-height:1em;
}

.stat-bubble span.stat-name{
  font-family: 'knockout';
  color:rgba(0,0,0,0.4);
  text-transform: uppercase;
}

#banner-stats .stat-bubble.drag{
  -webkit-animation:bubble-drag 0.5s ease-in-out 2;
  -webkit-animation: bubble-drag 0.5s ease-in-out 2;
  animation:bubble-drag 0.5s ease-in-out 2;
}

/*Drag transition*/
@-webkit-keyframes bubble-drag{
    50% { 
      -webkit-transform: scale(1.05); 
      border:solid 10px rgba(255,255,255,0.2); 
    }
}

@keyframes bubble-drag{
    50% { 
      -webkit-transform: scale(1.05); 
              transform: scale(1.05);
      border:solid 10px rgba(255,255,255,0.2); 
    }
}


#banner-stats .statistic:nth-child(1) .stat-bubble.animate{
  -webkit-animation:bubble-drag 0.5s ease-in-out;
  -webkit-animation: bubble-drag 0.5s ease-in-out;
  animation:bubble-drag 0.5s ease-in-out;
}

#banner-stats .statistic:nth-child(2) .stat-bubble.animate{
  -webkit-animation:bubble-drag 0.5s ease-in-out 0.2s;
  -webkit-animation: bubble-drag 0.5s ease-in-out 0.2s;
  animation: bubble-drag 0.5s ease-in-out 0.2s;
}

#banner-stats .statistic:nth-child(3) .stat-bubble.animate{
  -webkit-animation:bubble-drag 0.5s ease-in-out 0.4s;
  -webkit-animation: bubble-drag 0.5s ease-in-out 0.4s;
  animation: bubble-drag 0.5s ease-in-out 0.4s;
}

#banner-stats .statistic:nth-child(4) .stat-bubble.animate{
  -webkit-animation:bubble-drag 0.5s ease-in-out 0.6s;
  -webkit-animation: bubble-drag 0.5s ease-in-out 0.6s;
  animation: bubble-drag 0.5s ease-in-out 0.6s;
}

/*
#banner-stats .statistic:nth-child(1) .stat-bubble.animate{
  -webkit-animation:bubble-drag 0.5s ease-in-out infinite;
  -webkit-animation: bubble-drag 0.5s ease-in-out infinite;
  animation:bubble-drag 0.5s ease-in-out infinite;
}

#banner-stats .statistic:nth-child(2) .stat-bubble.animate{
  -webkit-animation:bubble-bounce 0.5s ease-in-out 0.2s;
  -webkit-animation: bubble-bounce 0.5s ease-in-out 0.2s;
  animation: bubble-bounce 0.5s ease-in-out 0.2s;
}

#banner-stats .statistic:nth-child(3) .stat-bubble.animate{
  -webkit-animation:bubble-bounce 0.5s ease-in-out 0.4s;
  -webkit-animation: bubble-bounce 0.5s ease-in-out 0.4s;
  animation: bubble-bounce 0.5s ease-in-out 0.4s;
}

#banner-stats .statistic:nth-child(4) .stat-bubble.animate{
  -webkit-animation:bubble-bounce 0.5s ease-in-out 0.6s;
  -webkit-animation: bubble-bounce 0.5s ease-in-out 0.6s;
  animation: bubble-bounce 0.5s ease-in-out 0.6s;
}*/

/*Bounce transition*/
@-webkit-keyframes bubble-bounce{
    0% { 
      -webkit-transform: scale(1); 
      opacity(1); 
    }
    50% { 
      -webkit-transform: scale(2); 
      opacity(0,6); 
      border:solid 10px rgba(255,255,255,0.2); 
    }
    80% { 
      -webkit-transform: scale(0.6); 
      opacity(0,8); 
    }
    100% { 
      -webkit-transform: scale(1); 
      opacity(1); 
    }
}

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


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

#banner-title h1 {
margin-top:30px;
margin-bottom:0px;
}

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

.orderbt {
top:-30px;
}
/*============================
--------Media queries----------
=============================*/

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

/*Smaller browser heights*/

@media screen and ( max-height: 900px ){
   
  #range{
    margin-top:0;
  }

}

/*Tablet portrait and smaller*/

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

  a.btn.mobile{
  margin-top:50px;
    display:inline-block;
  }

  #range, #banner-stats{
    display:none;
  }
#banner-title .container {
text-align:center;
}

#banner-title h1 {
margin-top:120px;
font-size:3em;
text-align:center;
margin-left:auto;
margin-right:auto;
}

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

}


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

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

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

}