section#content{
	padding-bottom:0;
	position:relative;
	z-index:0;
}


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

#banner{
  width:100%;
  height:72vh;
  background: #2bbfef;
  background: -webkit-gradient(left top, right bottom, color-stop(0%, #2bbfef), color-stop(100%, #19b1bf)), url(https://www.nethosted.co.uk/img/nhbg.png);
  background: linear-gradient(135deg, rgba(43, 191, 239, 0.90) 0%, rgba(25, 177, 191, 0.90) 100%), url(https://www.nethosted.co.uk/img/nhbg.png);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2bbfef', endColorstr='#19b1bf', GradientType=1 );
  overflow:hidden;
  min-height:540px;
}

#banner-people {
  max-width:1280px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#banner-people .person{
	position:relative;
	width:16.66%;
	height:13.3vw;
}

#banner-people .person .person-bubble{
	width:13.3vw;
	height:13.3vw;
	border:solid 0.15em rgba(255,255,255,0.5);
}

#banner-people .person .person-bubble img{
	width:50%;
	left:25%;
	height:auto;
	display:block;
	position:absolute;
	bottom:20%;	
}


/*======Quotes======*/

#banner-people .person .person-quote{
	display:none;
	opacity:0;
	position:absolute;
	background:rgba(0,0,0,0.2);
	width:200%;
	color:#FFF;
	text-align:center;
	bottom:16vw;
	left:-50%;
	border-radius: 5px;
	-webkit-transform-origin: 50% 100%;
	min-width:250px;
}

#banner-people .person .person-quote .quote{
	padding:20px;
}

#banner-people .person .person-quote:after{
	content:"";
	position:absolute;
	left:50%;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid rgba(0,0,0,0.2);
}

/*First person */
#banner-people .person:first-child .person-quote{
	left:30px;
}

#banner-people .person:first-child .person-quote:after{
	left:20%;
}

/*Last person */
#banner-people .person:last-child .person-quote{
	left:-110%;
}

#banner-people .person:last-child .person-quote:after{
	left:80%;
}


/*----Show quote animation----*/

/*Show quote*/
#banner-people .person.show-quote .person-quote{
	display:block;
	-webkit-animation:quote-bounce 1.0s ease-in-out 0.1s forwards; 
    animation:quote-bounce 1.0s ease-in-out 0.1s forwards;
}

@-webkit-keyframes quote-bounce{
	0%{ -webkit-transform: scale(0) translate(0, 200%); opacity:0; }
    50% { -webkit-transform: scale(1.5) translate(0, 0); opacity:0.8; }
    90% { -webkit-transform: scale(0.9) translate(0, 0); }
    100% { -webkit-transform: scale(1) translate(0, 0); opacity:1; }
}

@keyframes quote-bounce{
	0%{ -webkit-transform: scale(0) translate(0, 200%); transform: scale(0) translate(0, 200%); opacity:0; }
    50% { -webkit-transform: scale(1.5) translate(0, 0); transform: scale(1.3) translate(0, 0); opacity:0.8; }
    90% { -webkit-transform: scale(0.9) translate(0, 0); transform: scale(0.9) translate(0, 0); }
    100% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); opacity:1; }
}

/*Bounce the person*/
#banner-people .person.show-quote .person-bubble{
	-webkit-animation:bubble-bounce 0.5s ease-in-out; 
    animation:bubble-bounce 0.5s ease-in-out;
}

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

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




/*=============================
-----------Narrative-----------
=============================*/


#narrative{
	background:#222;
	color:#ccc;
	width:200%;
	margin-left:-50%;
}

/*======Equal column heights======*/

#narrative .container{
	width:830px; /*Equivalent to 8 cols*/
	margin:0 auto;
	display: table;
	border-collapse:separate;
	/*border-spacing:40px;*/
}

#narrative .row{
	display:table-row;
	width:100%;
}

#narrative .row .column{
	 display: table-cell;
	 vertical-align: middle;
	 float:none;
	 width:50%;
}



/*======Facts=======*/

#narrative .fact{
	position: relative;
	border-radius: 50%;
	width:100%;
	height: auto;
	padding-top: 100%;
	background:#31b3e3;
	font-size:1.875em;
	font-family: 'knockout';
	text-transform: uppercase;
	text-align:center;
	color:#222;
	z-index:1;
}


/*----Fact colours----*/

#narrative .row:nth-child(5n+1) .fact{
  background:#31b3e3;
}

#narrative .row:nth-child(5n+2) .fact{
  background:#18b9a5;
}

#narrative .row:nth-child(5n+3) .fact{
  background:#d3297a;
}

#narrative .row:nth-child(5n+4) .fact{
  background:#f16826;
}

#narrative .row:nth-child(5n+5) .fact{
  background:#ffcc16;
}


/*---Fact details---*/

#narrative .fact .fact-details{
	position:absolute;
	width:70%;
	padding:0 15%;
	top: 50%;
  	transform: translate(0,-50%);
  	-webkit-transform: translate(0,-50%);
}

#narrative .fact span.figure{
	display:block;
	font-family: 'betonsh-xboldregular';
	font-size:3.33em;
	line-height:1em;
	color:#FFF;
}

#narrative .fact .fact-details img{
	width:auto;
	max-width:100%;
}


/*======Description=======*/

#narrative .row:nth-child(odd) .description{
	padding-left:40px;
}

#narrative .row:nth-child(even) .description{
	padding-right:40px;
}



/*=====Bounce effect======*/

#narrative .fact.bounce{
	-webkit-animation:fact-bounce 0.5s ease-in-out; 
    animation:fact-bounce 0.5s ease-in-out;
}

@-webkit-keyframes fact-bounce{
    50% { -webkit-transform: scale(1.1); }
    95% { -webkit-transform: scale(0.9); }
    100% { -webkit-transform: scale(1); }
}

@keyframes fact-bounce{
    50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
    90% { -webkit-transform: scale(0.9); transform: scale(0.9); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}



/*======Connecting lines=======*/

#narrative .row:before{
	content:"";
	display:block;
	position:absolute;
	height:2px;
	background:#FFF;
	z-index:0;
}

#narrative .row:nth-child(odd):before{
	width:21.5%;
	left:39%;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

#narrative .row:nth-child(even):before{
	width:23%;
	left:40%;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

#narrative .row:first-child:before{
	background:none;
}

.whyusavg {
	width: 70%; 
	padding: 10px;
	border: 1px solid #efefef;
	background: #F3F3F3;
}

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


#banner-title h2 {
font-size:1.3em;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
color: rgba(0, 0, 0, 0.6);
}

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


/*-----Tablet portrait and smaller-----*/
@media only screen and (max-width: 850px){

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

	.container.padded{
		padding-top:0;
	}

  	#narrative .container{
		width:96%;
		padding:0 2%;
	}

	#narrative .fact{
		font-size:1.5em;
	}

	#narrative .fact span.figure{
		font-size:2em;
		line-height:1.2em;
	}

	#narrative .description{
		font-size:0.8em;
		line-height:1.2em;
	}

}

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

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

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

	#narrative .fact{
		font-size:1.2em;
	}

	#narrative .fact span.figure{
		font-size:1.5em;
	}

	#narrative .description{
		font-size:0.6em;
		
	}


}


/*---For smaller screen heights---*/
@media only screen and ( max-height: 900px ){
   
  #banner a.btn{
  	display:none;
  }

}

@media only screen and (max-width: 1024px){
#narrative{
        background:#222;
        color:#ccc;
        width:100%;
        margin-left:0;
}
}