@font-face{font-family:'Guardian-Text-Egyp-Web-Reg';src:url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Text-Egyp-Web-Reg.eot');src:url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Text-Egyp-Web-Reg.eot?#iefix') format('embedded-opentype'),url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Text-Egyp-Web-Reg.woff') format('woff'),url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Text-Egyp-Web-Reg.ttf') format('truetype'),url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Text-Egyp-Web-Reg.svg#Guardian-Text-Egyp-Web-Reg') format('svg');font-weight:normal;font-style:normal;font-stretch:normal}@font-face{font-family:'Guardian-Ag-Sans-1-Web-Reg';src:url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Ag-Sans-1-Web-Reg.eot');src:url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Ag-Sans-1-Web-Reg.eot?#iefix') format('embedded-opentype'),url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Ag-Sans-1-Web-Reg.woff') format('woff'),url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Ag-Sans-1-Web-Reg.ttf') format('truetype'),url('http://pasteup.guim.co.uk/fonts/ascii/Guardian-Ag-Sans-1-Web-Reg.svg#Guardian-Ag-Sans-1-Web-Reg') format('svg');font-weight:normal;font-style:normal;font-stretch:normal}::-webkit-scrollbar{-webkit-appearance:none;width:7px}

.f-serif{font-family:Guardian-Text-Egyp-Web-Reg,Georgia,serif;font-weight:normal;font-style:normal}
.f-sans{font-family:Guardian-Ag-Sans-1-Web-Reg,Arial,sans;font-weight:normal;font-style:normal}

.f-bg,.f-highlight{background-color:#FFC7C4;cursor:pointer}

.container {
	margin: 25px auto 25px auto;
	width: 940px;
	text-align: center;
	font-family: Guardian-Ag-Sans-1-Web-Reg,Arial,sans;
	font-weight:normal;
	font-style:normal;
}
.row{
	margin: 25px 0 25px 0;
}
.hops-video {
	display: inline-block;
	margin: 0;
	width: 288px;
	vertical-align: top;
	border: 0px solid #EEE;
}

.hops-title {
	margin: 5px 0 20px 0;
}

.hops-title-title{
	line-height: 36px;
	font-size: 32px;
	text-align: center;
}

.hops-title-subtitle{
	font-size: 16px;
}

.hops-dek {
	display: inline-block;
	font-size: 16px;
	margin: 0 50px 0 0;
	text-align: left;
	line-height: 24px;
	width: 500px;
	height: 100%;
	vertical-align: center;
}

.hops-deck-row {
	height: 180px;
	margin: 0 0 25px 0;
}

.hops-textblock p {
	font-size: 16px;
	line-height: 24px;
}
.hops-textblock h1 {
	font-size: 36px;
}
.hops-circle {
	display: block;
	width: 100%;
	height: auto;
	color: #FFF;
	font-size: 18px;
}
.hops-circle img {
	align: center;
}
.hops-title {
	display: block;
	padding: 0 0 10px 0;
	vertical-align: top;
	font-size: 14px;
}
.hops-level {
	display: block;
	line-height: 100%;
}
.hops-header {
	margin: 0 0 10px 0;
	height: 85px;
	border-bottom: solid #000 1px;
	text-align: center;
}
.hops-intro {
	background-color: #FFF;
	transition: width .5s, height .5s;
}
.hops {
	overflow: hidden;
	height: 400px;
	background-color: #FFFFFF;
	transition: width .5s, height .5s;
}
.hops-block {
	display: inline-block;
	overflow: hidden;
	padding: 0;
	width: 275px;
	height: 100%;
	background-color: #FFFFFF;
	vertical-align: top;
	font-size: 10px;
}
.hops-comparison {
	margin: 10px 10px 0 10px;
	height: 40px;
	font-size: 16px;
	line-height: 20px;
}
.hops-relative {
	margin: 5px 0 0 0;
	height: 25px;
	text-transform: uppercase;
	font-size: 12px;
}
.hops-spacer {
	display: inline-block;
	margin: 0 17px 0 17px;
	width: 0px;
	height: 100%;
	border-left: dotted 1px;
}
.hops-number {
	font-size: 42px;
	line-height: 100%;
}
.hops-icon {
	display: block;
}
.hops-icon svg {
	margin: 10px auto 0 auto;
}
.ui-slider {
	position: relative;
	display: block;
	margin: 7px 0 7px 0;
	width: 100%;
	height: 16px;
	border-radius: 5px;
	background-color: #EEE;
}
.ui-slider a {
	text-decoration: none;
	background-color: #CC2F27;
}
.ui-slider-range {
	height: 16px;
	border-radius: 5px;
	background-color: #CC2F27;
}
.ui-slider-handle {
	position: absolute;
	top: -4px;
	display: block;
	margin-left: -25px;
	width: 50px;
	height: 24px;
	outline: none;
	border-radius: 4px;
	background-color: #CC2F27;
	box-shadow: 0 0 5px #999;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	line-height: 24px;
}
.slider-ui-text {
	display: inline-block;
	padding: 0 0 0 0;
	height: 30px;
	vertical-align: top;
	font-size: 18px;
	line-height: 30px;
}
#interactive-3 .fbk-container {
  position: relative;
  display: inline-block;
  width: 230px;
  height: 30px;
  border-radius: 5px;
  background-color: #3B5998;
  vertical-align: top;
  text-align: left;
  cursor: pointer;
}
.hops-pulsing {
  -webkit-animation-name: pulse;
  -moz-animation-name: pulse;
  -ms-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -animation-name: pulse;
  -animation-duration: 2s;
}
@-webkit-keyframes pulse {
  from {
    background-color: #2F477A;
  }
  50% {
    background-color: #627AAD;
  }
  to {
    background-color: #2F477A;
  }
}
@-moz-keyframes pulse {
  from {
    background-color: #2F477A;
  }
  50% {
    background-color: #627AAD;
  }
  to {
    background-color: #2F477A;
  }
}
@-ms-keyframes pulse {
  from {
    background-color: #2F477A;
  }
  50% {
    background-color: #627AAD;
  }
  to {
    background-color: #2F477A;
  }
}
@keyframes pulse {
  from {
    background-color: #2F477A;
  }
  50% {
    background-color: #627AAD;
  }
  to {
    background-color: #2F477A;
  }
}
.fbk-button {
	display: inline-block;
	margin-left: 35px;
	padding: 0 10px 0 10px;
	color: #FFF;
	font-size: 14px;
	line-height: 30px;
	cursor: pointer;
}
.fbk-explainer {
	position: absolute;
	top: 5px;
	right: 10px;
	display: inline-block;
	overflow: visible;
	margin: 0 0 0 0px;
	width: 16px;
	height: 16px;
	border: 2px solid #FFF;
	border-radius: 15px;
	color: #FFF;
	text-align: center;
	font-size: 14px;
	line-height: 16px;
}
.fbk-logout {
	display: inline-block;
	visibility: hidden;
	padding: 0 10px 0 10px;
	line-height: 30px;
	cursor: pointer;
}
.fbk-explainer-text {
	position: absolute;
	display: none;
	margin: -155px 0 0 -86px;
	padding: 10px;
	width: 160px;
	height: 100px;
	border: 0px solid #EEE;
	background-color: #EEE;
	color: #000;
	text-align: center;
	font-size: 14px;
	line-height: 18px;
}
.fbk-explainer-text:after,
.fbk-explainer-text:before {
	position: absolute;
	top: 100%;
	width: 0;
	height: 0;
	border: solid transparent;
	content: '';
}
.fbk-explainer-text:before {
	left: 78px;
	border-width: 16px;
	border-top-color: #EEE;
}
.fbk-explainer-text:after {
	left: 80px;
	border-width: 0px;
	border-top-color: #EEE;
}
.fbk-button-icon {
	position: absolute;
	top: 0px;
	left: 0px;
	display: inline-block;
	padding: 0 2px 0 2px;
	border-right: 2px solid #FFF;
}
.hops-slider {
	margin: 0 0 25px 0;
	width: 100%;
}
.slider-container {
	display: inline-block;
	margin: 0 20px 0 20px;
	padding: 0 20px 0 20px;
	width: 400px;
	vertical-align: top;
}
.active {
	fill: #000;
}
.inactive {
	fill: none;
}
.dots {
}
.highlight-text {
	background-color: #FFFF00;
	cursor: pointer;
}
.hops-horizontal-spacer {
	height: 25px;
}
.hops-credit {
	color: #999;
	font-size: 12px;
	line-height: 14px;
}
.hops-credit a {
	color: #999;
	text-decoration: underline;
}
@media screen and (max-width: 780px) {
	.hops {
		display: block;
	}
	.hops-icon {
		display: none;
	}
	.hops-video{
		display: none;
	}
	.hops-dek {
		width: 90%;
		margin: auto;
	}
	.hops-deck-row {
		height: auto;
	}
	.hops-block {
		display: block;
		margin: auto;
		padding: 15px 0 15px 0;
		width: 90%;
		border-bottom: 1px solid #000;
	}
	.hops-circle {
		display: none;
	}
	.hops-header {
		height: auto;
	}
	.hops-title {
		display: block;
		padding: 0 0 0 0;
		font-size: 14px;
	}
	.hops-header {
		border: 0;
	}
	.hops-comparison {
		display: none;
	}
	.hops-relative {
		display: none;
	}
	.fbk-container {
		display: none;
	}
	.hops-slider {
		margin: auto;
		width: 90%;
	}
	.slider-container {
		margin: auto;
		width: 90%;
	}
	.hops {
		height: auto;
	}
}