@font-face {
font-family:'Guardian Egyptian Web'; src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.eot');src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.eot?#iefix') format('embedded-opentype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.woff2') format('woff2'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.woff') format('woff'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.ttf') format('truetype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.svg#GuardianEgyptianWeb-Regular') format('svg');font-weight:400;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Egyptian Web'; src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.eot');src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.eot?#iefix') format('embedded-opentype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.woff2') format('woff2'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.woff') format('woff'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.ttf') format('truetype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.svg#GuardianEgyptianWeb-Medium') format('svg');font-weight:500;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Egyptian Web'; src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot');src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot?#iefix') format('embedded-opentype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.woff2') format('woff2'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.woff') format('woff'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.ttf') format('truetype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.svg#GuardianEgyptianWeb-Semibold') format('svg');font-weight:900;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Text Sans Web';
src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.eot');src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.eot?#iefix') format('embedded-opentype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.woff2') format('woff2'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.woff') format('woff'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.ttf') format('truetype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.svg#GuardianTextSansWeb-Regular') format('svg');font-weight:400;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Agate Sans';
src:url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.eot');src:url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.eot?#iefix') format('embedded-opentype'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.woff') format('woff'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.ttf') format('truetype'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.svg#Guardian-Text-Egyp-Web-Reg') format('svg');font-weight:normal;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Agate Sans';
src:url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.eot');src:url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.eot?#iefix') format('embedded-opentype'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.woff') format('woff'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.ttf') format('truetype'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.svg#Guardian-Text-Egyp-Web-Medium') format('svg');font-weight:bold;font-style:normal;font-stretch:normal}

html {
-webkit-font-smoothing:antialiased;
font-family:'Guardian Egyptian Web', georgia, serif;
box-sizing:border-box}

*, 
*:before, 
*:after {
box-sizing:inherit}

body {
margin:0;
line-height:1.5;
color:#000;
background:#fff}

#content {
font-size:.8rem}

h1 {
font-size:1.25rem;
line-height:1.375rem;
padding-bottom:.25rem;
font-weight:600;
border-bottom:1px solid #dcdcdc;
color:#000}

h1 + p {
line-height:1rem}

ol {
padding:0;
margin:1rem 0}

li {
padding:0;
list-style-type:none}

#key {
position:relative;
padding:0 0 0 2.5rem;
font-size:.75rem;
line-height:1em;
font-family:'Guardian Text Sans Web', 'Agate Sans', sans-serif}

#key:before {
content:'Key';
position:absolute;
/*font-size:.875rem;*/
left:0;
font-weight:bold}

#key li {
margin-bottom:.25rem}

#key li:before {
content:'';
display:inline-block;
width:.6rem;
height:.6rem;
border-radius:50%;
margin-right:.5rem;
background:#52C5D8}

#key #use:before  {
background:#fdb913}

#use span  {
text-transform:capitalize}

#stages {
text-align:center;
margin-top:2rem;
border-bottom:1px solid #000}

#stages li {
width:30%;
position:relative;
display:inline-block}

h3 {
margin:0;
line-height:1;
text-transform:capitalize;
font-size:.9375rem;
font-weight:500}

h4 {
margin:0;
color:#808080;
font-weight:normal;
font-size:.75rem}

.wrapper {
min-height:150px;
position:relative;
margin:0 auto}

.triangle {
position:absolute;
bottom:0;
left:0;
width:0; 
height:0;
border-left:0 solid transparent;
border-right:0 solid transparent;
border-bottom:0 solid #4DC6DD;
font-size:0;
line-height:0}

.target {
transition:.2s;
border-bottom-color:#fdb913}

.ground {
border-bottom:0;
border-top:0 solid #4DC6DD;
transition:.2s;
border-top-color:#FC5C42}

.triangle span {
font-weight:500;
font-size:1.25rem;
position:absolute;
bottom:100%;
right:0;
color:#4DC6DD;
white-space:nowrap;
margin:0 -2rem 1.25rem 0}

.target span {
font-size:.9375rem;
color:#000;
margin:0 .5rem .25rem 0}

#note {
opacity:0;
width:80px;
line-height:1;
margin:0;
left:0;
top:100%;
padding-top:1.25rem;
position:absolute;
font-size:0.625rem;
transition:.4s}

.residential #note {
opacity:1}

#note:before {
content:'';
position:absolute;
top:0;
left:50%;
border-left:1px solid #000;
height:1rem;}

.ground span {
font-size:.9375rem;
bottom:auto;
top:100%;
right:0;
color:#FC5C42;
margin:1rem -1rem 0 0}

#menu {
font-size:0;
text-align:center;
font-size:.75rem;
margin:4rem 0}

#menu:before {
margin-right:.5rem;
font-weight:500;
content:'GFA by use:'}

#menu li {
text-transform:capitalize;
cursor:pointer;
height:1.25rem;
line-height:1.25rem;
font-size:.75rem;
padding:0 .5rem;
margin:0 .25rem .25rem;
border-radius:.625rem;
display:inline-block;
transition:.2s}

#menu li:hover {
background:#DADADA}

#menu li.on {
background:#fdb913;
color:#fff}

.gu-graphic-footer {
border-top:1px solid #DADADA;
padding-top:1px;
margin-top:1rem;
color:#767676;
font-family:'Guardian Text Sans Web', arial, sans-serif;
font-size:.75rem;
position:relative}

.gu-graphic-footer p {
font-size:.75rem;
margin:0;
display:inline-block}

.gu-graphic-footer p:nth-of-type(2) {
float:right}

#info {
display:none;
text-align:center;
margin:-3rem 0 0 0;
font-size:.75rem;
background:#000;
color:#fff;
position:absolute;
padding:.5rem;
line-height:1;
border-radius:.25rem}

#info h5 {
margin:0;
line-height:1;
font-size:.7rem;
text-transform:capitalize}

@media all and (max-width:800px){

	#grounds {
	visibility:hidden}
	
	#stages .ground {
	display:none}

}

@media all and (max-width:480px){ 

	h1 + p {
	width:auto}
	
	#stages {
	border:0}

	#stages li {
	width:auto;
	display:block;
	border-bottom:1px solid #000;
	margin:0 auto 3rem}
	
	.wrapper {
	margin-top:3rem;
	min-height:0}
	
	#menu {
	margin-top:1rem}
	
	#menu li {
	margin-left:0;
	margin-right:0}
	
	#menu:before,
	#note {
	display:none}
}

@-moz-document url-prefix() { 
	.triangle {
	border-left-style:dotted;
	border-right-style:dotted}
}