html {
min-height:100%;
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizelegibility}

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

body {
min-height:100%;
padding:0;
margin:0;
color:#333;
background:#F9F2D8;
font-size:15px;
line-height:1.25;
font-weight:200;
text-align:center;
font-family:'Montserrat', arial, san-serif;
overflow-x:hidden;
text-align:center;
letter-spacing:-.02em}

body:before {
content:'';
position:absolute;
left:50%;
top:50%;
width:40px;
height:40px;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" enable-background="new 0 0 40 40"%3E%3Cpath opacity="0.2" fill="%23333" d="M20.201 5.169c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946C35.146 11.861 28.455 5.169 20.201 5.169zM20.201 31.749c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634 6.425 0 11.633 5.209 11.633 11.634C31.834 26.541 26.626 31.749 20.201 31.749z"/%3E%3Cpath fill="%23333" d="M26.013 10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32 8.481 24.301 9.057 26.013 10.047z" transform="rotate(180 20 20)"%3E%3CanimateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/%3E%3C/path%3E%3C/svg%3E') no-repeat 50% 50%/contain}

header,
footer,
section,
main {
display:block}

h1,
h2,
h3,
h4,
h5,
h6,
b {
margin:0;
font-weight:900;
letter-spacing:-.04em}

a {
cursor:pointer;
color:inherit}

ol,
li {
margin:0;
padding:0}

li {
list-style-type:none}

#intro,
main,
footer,
.loaded:before {
display:none}

.loaded #intro,
.loaded main,
.loaded footer {
display:block}


/* HEADER */

#intro {
margin-top:6rem;
padding:0 2rem}

#work {
width:60px;
height:60px;
margin:0 auto;
border-radius:50%;
background:#EE2953 url(../img/thing.svg) no-repeat 50% 50%/60% 60%;
color:#fff;
font-size:40px;
font-weight:900;
line-height:60px;
-ms-animation:spin 4s linear infinite;
-webkit-animation:spin 4s linear infinite;
animation:spin 4s linear infinite}

@-ms-keyframes spin { 
	100% {
	-ms-transform:rotate(360deg)}
}

@-webkit-keyframes spin { 
	100% {
	-webkit-transform:rotate(360deg)}
}

@keyframes spin { 
	100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg)}
}

h1 {
margin:1.5rem auto 2rem;
max-width:640px;
font-size:50px;
line-height:1}

h1 + p {
margin:0 auto;
max-width:680px;
font-size:25px;
line-height:1.2}

h1 + p b {
color:#EE2953}

h1 + p b:hover {
color:#333}

h1 + p + p {
font-size:20px}

/* main */

main {
margin-top:10rem}

section {
background:#77BF9B;
position:relative;
padding:0 0 12rem}

.split {
position:relative;
max-width:990px;
margin:0 auto;
display:-ms-flexbox;
display:-webkit-flex;
display:flex}

.source {
font-weight:300;
font-size:11px;
margin:1.5rem 0 3rem}

.source + p {
font-size:11px;
margin-top:-2rem;
line-height:1.1;
padding:0 2rem;
font-weight:300}

.then,
.now {
position:relative;
width:50%;
padding:0 1rem 3rem}

section:after {
z-index:1;
content:'';
position:absolute;
left:50%;
top:0;
bottom:0;
margin-left:-1px;
border-left:2px dashed #333}

header,
#fin{
position:relative;
z-index:2;
margin:0 auto 2rem;
padding:5px 15px 12px;
border:4px solid #EE2953;
max-width:340px;
color:#EE2953;
background:#fff}

#fin {
margin:6rem auto 4rem;
border:4px solid #333;
color:#333;
padding:10px 15px;
font-size:13px;
max-width:400px}

#fin + p .back {
position:relative;
z-index:2;
margin-bottom:12rem;
border:2px solid #333;
color:#333;
background:#fff;
padding:10px 15px;
font-size:13px;
text-decoration:none;
font-weight:900} 

#fin + p .back:hover {
background:#333;
color:#fff}

header h3 {
font-size:2rem}

header p {
font-size:14px;
margin:.25rem 0 0;
line-height:1;
font-weight:300}

header.sm {
position:absolute;
left:50%;
top:0;
padding:8px 15px 10px;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
border-width:3px}

#x:before {
content:'5'}

header.sm h3 {
font-size:1rem;
line-height:1}

header.sm p {
font-size:.9rem}

h4 {
margin-top:2rem;
font-size:25px}

h5 {
margin:-3px auto 0;
font-weight:300;
font-size:13px}

h5 + p {
font-size:12px;
margin:.33rem auto 1rem;
line-height:1.1;
font-weight:700}

#sky {
padding:0;
background:none}

#sky .then, 
#sky .now {
padding-bottom:0}

#sky h2 {
position:relative;
top:-40px;
display:inline-block;
margin:0 auto;
font-size:50px;
background:#fff;
padding:5px 15px 10px;
line-height:1;
width:auto;
border:1px solid #333}

#sky h2 + p {
margin:0;
line-height:1;
position:relative;
top:-35px;
font-size:2rem}

/* COMPRESS SVGS AND ADD LOADER */

.clouds {
position:relative;
height:240px}

.sun {
position:absolute;
top:10%;
width:100px;
height:100px;
border-radius:50%;
background:#F3CC00;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform:translateX(-50%)}

.cloud {
position:absolute;
width:90px;
height:60px;
background:url(../img/cloud.svg) no-repeat 50% 50%/contain;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)}

#plane {
top:10%;
left:50%;
position:absolute;
width:100px;
height:45px;
margin:0;
background:url(../img/plane.svg) no-repeat 50% 50%/contain}

.then .sun {
left:0}

.then .c1 {
left:0;
top:50%}

.then .c2 {
right:0;
top:0}

.then .c3 {
right:5%;
top:12%}

.now .sun {
left:100%}

.now .c1 {
left:20%;
top:22.5%}

.now .c2 {
left:95%;
top:55%}

.now .c3 {
left:100%;
top:65%}

#boat {
bottom:100%;
left:20%;
position:absolute;
width:140px;
height:73px;
margin:0 0 84px;
background:url(../img/boat.svg) no-repeat 50% 50%/contain}

#plane .stat,
#boat .stat {
width:150px;
text-align:left;
left:0;
bottom:100%;
background:#F9F2D8;
border-width:2px;
margin:0 0 2.5rem 2rem}

#boat .stat p,
#plane .stat p {
font-weight:200}

#boat .stat:before,
#plane .stat:before {
width:0;
height:2.5rem;
top:100%;
right:auto;
left:.5rem;
border:0;
border-left:1px solid #333}

#plane .stat {
bottom:auto;
left:auto;
top:100%;
right:2rem;
margin:2.5rem 0 0 0}

#plane .stat:before {
top:auto;
right:.5rem;
left:auto;
bottom:100%}

.billboard {
position:relative;
width:210px;
margin:0 auto;
border:2px solid #333;
background:#fff;
padding:5px}

.billboard:before,
.billboard:after {
content:'';
height:22px;
border-left:2px solid #333;
position:absolute;
top:100%;
left:20px}

.billboard:after {
left:auto;
right:20px}

.billboard > div {
min-height:70px;
padding:5px;
background:#E6E6E6;
color:#95A0AC}

.billboard p {
margin:0 0 3px;
font-size:11px;
font-weight:400}

.billboard .source {
font-size:10px}

.billboard h3 {
line-height:1;
font-size:22px;
letter-spacing:-.033em}

.billboard h3:first-child {
margin-bottom:5px}

.billboard h4 {
margin:5px 0 5px;
font-weight:300;
line-height:1;
font-size:1rem;
text-decoration:none;
letter-spacing:-.033em}

.tree {
width:75px;
height:125px;
position:absolute;
left:15%;
top:100%;
z-index:1;
opacity:.5;
background:url(../img/tree-ie.svg) no-repeat 0 0/contain;
/*mix-blend-mode:multiply*/}

.tr2 {
-ms-transform:translate(3rem,1rem);
-webkit-transform:translate(3rem,1rem);
transform:translate(3rem,1rem)}

.tr3 {
left:80%;
-ms-transform:translate(0,-2rem);
-webkit-transform:translate(0,-2rem);
transform:translate(0,-2rem)}

.fact div > b {
margin:-10px 0 -8px;
display:block;
font-size:50px}

.fact div > b span {
font-weight:200}

.fact b + p {
margin:0 5px 5px;
font-size:1rem;
font-size:13px;
line-height:1.15}

#water {
padding-bottom:0}

#water:before {
z-index:1;
content:'';
display:block;
height:100px;
background:#A4D3EE}

#water .billboard {
top:-3rem}

.graph {
max-width:990px;
margin:0 auto 1rem;	
position:relative;
height:250px;
border-bottom:2px solid #333}

.lines {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
color:#fff}

.lines div {
position:absolute;
width:100%;
border-bottom:1px dashed #BADECC}

.lines div.g3 {
bottom:75%}

.lines div.g2 {
bottom:50%}

.lines div.g1 {
bottom:25%}

.lines span {
font-weight:900;
font-size:13px;
position:absolute;
left:0;
bottom:0;
line-height:1;
padding-bottom:2px}

.lines span:after {
content:'%';
font-weight:200}

.graph .key {
position:absolute;
top:7%;
left:5rem;
text-align:left;
line-height:1;
font-size:11px;
font-weight:400}

.graph .key li {
margin-bottom:4px}

.graph .key li:before {
content:'';
width:12px;
height:12px;
border:2px solid #333;
margin:0 5px -2px 0;
display:inline-block;
vertical-align:baseline;
background:#fff}

.graph .key li:first-child:before {
background:#333}

.bars {
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
display:-ms-flexbox;
-ms-flex-align:end;
display:-webkit-flex;
-webkit-align-items:flex-end;
display:flex;
align-items:flex-end}

.bars .then,
.bars .now {
padding:0;
height:100%;

display:-ms-flexbox;
-ms-flex-align:end;
-ms-flex-pack:center;

display:-webkit-flex;
-webkit-align-items:flex-end;
-webkit-justify-content:center;

display:flex;
align-items:flex-end;
justify-content:center}

.bar {
position:relative;
width:60px;
background:#fff;
margin:0 15px;
border:2px solid #333;
border-bottom:0;
transition:.2s}

/*
.bar[data-n] {
}

.bar[data-n]:hover {
border-color:#EE2953;
background:#EE2953}
*/

.bar > b {
position:absolute;
left:50%;
bottom:100%;
color:#fff;
margin-bottom:7px;
font-size:2rem;
line-height:1;
white-space:nowrap;
font-weight:900;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform:translateX(-50%)}

.bar > b span {
font-weight:200}

.bar > span {
position:absolute;
left:50%;
min-width:64px;
top:100%;
margin-top:10px;
font-size:10px;
line-height:1;
font-weight:400;
text-transform:uppercase;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform:translateX(-50%)}

.bar > span br {
display:none}

/*
.manu {
background:#333}

.manu b {
color:#333}
*/

#top-5 {
margin-bottom:4rem}

.stat {
position:absolute;
width:160px;
left:100%;
margin:-1rem 0 0 4rem;
border:3px solid #333;
padding:10px 15px;
font-size:12px;
line-height:1.1;
font-weight:400;
background:#F9F2D8}

.stat .mobile {
display:none}

.stat:before {
content:'';
position:absolute;
width:5rem;
top:2rem;
right:100%;
border-top:1px solid #333}

.then .stat {
left:auto;
right:100%;
margin:0 20rem 0 0}

.then .stat:before {
width:21rem;
right:auto;
left:100%}

.stat.left {
left:auto;
margin-left:0;
margin-right:4rem;
right:100%}

.stat.left:before {
right:auto;
left:100%}

.stat > b {
margin:-10px 0 5px;
display:block;
font-size:4rem}

.stat > b span {
font-weight:200}

.stat p {
margin:0;
/*font-weight:400*/}

.blue {
color:#fff;
background:#00ADEE}

#top-5 .tree {
top:auto;
bottom:100%}

#top-5 .tr1 {
display:none;
left:25%;
-ms-transform:translate(0,4rem);
-webkit-transform:translate(0,4rem);
transform:translate(0,4rem)}

#top-5 .tr2,
#top-5 .tr3 {
left:90%;
-ms-transform:translate(0,5rem);
-webkit-transform:translate(0,5rem);
transform:translate(0,5rem)}

#top-5 .tr3 {
-ms-transform:translate(-3rem,4rem);
-webkit-transform:translate(-3rem,4rem);
transform:translate(-3rem,4rem)}


/* TECHNOLOGY */

#technology {
padding-left:0;
padding-right:0}

#technology .split:first-of-type .then h4 {
text-align:right;
margin-right:2.5rem;
margin-bottom:-2rem}

#technology .split:first-of-type .now h4 {
text-align:left;
margin-left:2.5rem;
margin-bottom:-2rem}

#wall {
background:#fff;
border-top:3px solid #333;
border-bottom:3px solid #333;
padding-top:15px;
margin-bottom:6rem}

#technology .source {
margin-top:0}

#wall .split {
height:100%;
max-width:1180px;
-ms-flex-align:end;
-webkit-align-items:flex-end;
align-items:flex-end}

#wall .split > div {
width:100%;
max-width:560px;
padding:0;
margin:0 15px 0 15px;
background:url(../img/office-then.svg) no-repeat 50% 100%/contain}

#wall .split > div:before {
content:'';
display:block;
padding-top:63.4%}

#wall .split > .now {
background-image:url(../img/office-now.svg)}

#wall .tag {
position:absolute;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
border:2px solid #333;
background:#F9F2D8;
font-size:12px;
line-height:1;
padding:5px 10px 7px}

#wall .tag:before {
content:'';
left:50%;
top:100%;
position:absolute;
border-left:1px solid #333;
height:122px}

/* 560 x 355 */

.then .t1 {
/*left:90px;
top:111px;
*/
left:16.1%;
top:31.3%;
margin-top:70px}

#wall .then .t1:before {
top:auto;
bottom:100%;
height:72px}

.now .t1 {
/*
left:225px;
bottom:326px;
margin-bottom:120px
*/
left:40.2%;
bottom:91.8%;
/*margin-bottom:33.8%*/
margin-bottom:120px}

.now .t2 {
/*
left:143px;
bottom:199px;
*/
left:25.5%;
bottom:56.1%;
margin-bottom:162px}

#wall .now .t2:before {
height:164px}

.now .t3 {
/*
left:510px;
top:80px;
*/
left:91.1%;
top:22.5%;
margin-top:120px}

#wall .now .t3:before {
top:auto;
bottom:100%}

#wall .now .t4 {
left:55%;
bottom:39.4%;
-ms-transform:none;
-webkit-transform:none;
transform:none}

#wall .now .t4:after {
content:'';
position:absolute;
top:50%;
left:auto;
right:100%;
border-top:1px solid #333;
width:30px}

#wall .now .t4:before {
top:auto;
bottom:50%;
left:auto;
right:100%;
margin-right:30px;
height:37px}

#newspaper,
#internet {
position:relative;
left:-1rem;
margin:2rem auto -2rem;
/*
width:459px;
height:316px;
*/
padding-top:69%;/* nice */
background:url(../img/newspaper.svg) no-repeat 50% 50%/contain}

#internet {
/*
width:471px;
height:330px;
*/
left:auto;
right:-1rem;
background-image:url(../img/internet.svg)}

#technology .tree {
margin-top:-275px}

#technology .tr1,
#technology .tr2{
left:5%}

#technology .tr3{
margin-top:-230px;;
left:90%}


/* ROAD */

#road {
position:relative;
background:#333;
height:220px;
font-size:14px}

#road .source {
margin:0}

.car {
position:absolute;
right:5%;
top:25%;
width:55px;
height:35px;
background:url(../img/car.svg) no-repeat 0 0/contain;
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%)}

#road .c2 {
right:10%}

#road .c3 {
right:75%}

#desc {
position:absolute;
left:53%;
top:25%;
color:#fff;
max-width:350px;
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%)}

#road .alt {
display:none;
position:absolute;
left:0;
right:0;
top:25%;
max-width:420px;
margin:0 auto;
color:#fff;
padding:0 1rem;
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%)}

#road #desc-alt-2 {
top:75%}

#desc:before {
content:'';
position:absolute;
left:100%;
top:50%;
margin-left:10px;
width:45px;
border-top:1px solid #fff}

#desc:after {
content:'';
position:absolute;
left:100%;
top:50%;
width:55px;
height:35px;
margin-left:50px;
background:url(../img/car.svg) no-repeat 0 0/contain;
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%)}

.van {
width:150px;
position:absolute;
left:35%;
top:75%;
color:#fff;
text-align:left;
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%)}

.van:before {
content:'';
position:absolute;
top:50%;
right:100%;
width:35px;
margin-right:10px;
border-top:1px solid #fff}

.van:after {
content:'';
position:absolute;
top:50%;
right:100%;
width:85px;
height:52px;
margin-right:30px;
background:url(../img/van.svg) no-repeat 0 0/contain;
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%)}

.v2 {
left:60%}

.v2:before {
width:30px}

.v2:after  {
width:42px;
height:26px}

#road:before {
content:'';
position:absolute;
left:0;
right:0;
top:50%;
border-top:5px dashed #fff}

#road:after {
display:none}

#road .billboard {
margin-top:-3rem;
-ms-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%)}

#road .tr1,
#road .tr2 {
top:115%;
left:33%}

#road .tr3 {
-ms-transform:translate(3rem,22rem);
-webkit-transform:translate(3rem,22rem);
transform:translate(3rem,22rem)}

/* qualifications */

#qualifications .billboards {
max-width:none;
padding-bottom:12rem}

#qualifications .billboards .then .billboard {
position:absolute;
left:12.5%;
-ms-transform:translate(0,2.5rem);
-webkit-transform:translate(0,2.5rem);
transform:translate(0,2.5rem)}

#qualifications .billboards .now  .billboard {
position:absolute;
right:10%;
-ms-transform:translate(0,-20%);
-webkit-transform:translate(0,-20%);
transform:translate(0,-20%)}

#qualifications header.sm {
left:75%;
-ms-transform:translate(-50%,-75%);
-webkit-transform:translate(-50%,-75%);
transform:translate(-50%,-75%)}

.group {
position:absolute;
width:180px;
top:100%;
left:50%;
margin:5rem 0 0;
border:3px solid #333;
padding:7px 10px 10px;
font-size:13px;
line-height:1.1;
background:#F9F2D8;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform:translateX(-50%)}

.group:before {
content:'';
position:absolute;
bottom:100%;
left:50%;
height:3rem;
border-left:1px solid #333}

.group:after {
content:'';
position:absolute;
bottom:100%;
left:50%;
width:220px;
margin-bottom:3rem;
border-top:1px solid #333;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform:translateX(-50%)}

/* RIVER */

#river {
height:8rem;
border-top:2px solid #333;
border-bottom:2px solid #333;
background:
url(../img/waves.svg) no-repeat 15% 30%,
url(../img/waves.svg) no-repeat 20% 45%,
url(../img/waves.svg) no-repeat 40% 55%,
url(../img/waves.svg) no-repeat 38% 68%;
background-color:#00ADEE;
padding-bottom:0}

#river .desc {
font-weight:300;
margin:0;
position:absolute;
top:50%;
left:75%;
color:#fff;
max-width:333px;
font-size:14px;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)}

#river .tree {
margin-top:4rem}

#river .tr3 {
left:5%;
margin:0;
top:auto;
bottom:100%;
-ms-transform:translate(0,-2rem);
-webkit-transform:translate(0,-2rem);
transform:translate(0,-2rem)}

#river .billboard {
position:absolute;
top:100%;
margin-top:2.5rem;
left:75%;
z-index:1}

/* WORK-TYPE */

#work-type {
padding-top:15rem}

#work-type .graph {
margin-top:3rem}

#work-type .g3 {
bottom:66%}

#work-type .g2 {
bottom:33%}

.unemployed  {
background:#333}

.unemployed > b  {
color:#333}

.underemployed  {
background:#666}

.underemployed > b  {
color:#666}

.underemployed .note {
width:125px;
border-width:2px;
font-size:11px;
left:50%;
bottom:100%;
margin-bottom:10rem}

.underemployed .note p {
margin:0}

.underemployed .note:after {
content:'';
position:absolute;
left:50%;
top:100%;
border-left:1px solid #333;
height:7rem}

#work-type .sm {
top:20%}

#work-type .sm > b {
font-size:3.75rem;
margin-bottom:0}

#work-type .then .billboard {
-ms-transform:translateY(-1rem);
-webkit-transform:translateY(-1rem);
transform:translateY(-1rem)}

#work-type .tr3 {
-ms-transform:translate(-10rem,-10rem);
-webkit-transform:translate(-10rem,-10rem);
transform:translate(-10rem,-10rem)}

#work-type .now .tr3 {
-ms-transform:translate(0,-15rem);
-webkit-transform:translate(0,-15rem);
transform:translate(0,-15rem)}

/* LIFE EXPECTANCY */

header .stat {
background:#F9F2D8;
top:1rem;
margin-left:10rem}

header .stat:before {
width:11rem}

header .stat p {
color:#333;
line-height:1.1;
font-size:13px;
font-weight:200}

#life-expectancy .split .then h4 {
text-align:right;
margin-right:5.75rem}

#life-expectancy .split .then h5 {
text-align:right;
margin-right:7rem}

#life-expectancy .split .now h4 {
text-align:left;
margin-left:5.75rem}

#life-expectancy .split .now h5{
text-align:left;
margin-left:6.75rem}

#life-expectancy .split .then > .source {
margin-left:50%}

#life-expectancy .split .now > .source {
margin-right:50%}

#life-expectancy .lines span:after {
content:' years'}

#life-expectancy .lines div.g3 {
bottom:70%;
border-bottom:1px solid #fff}

#life-expectancy .lines div.g3 span {
padding-bottom:2px}

#life-expectancy .lines div.g2 {
bottom:65%;
border-bottom:1px solid #fff}

#life-expectancy .lines div.g2 span {
bottom:auto;
top:100%;
padding-top:2px}

#life-expectancy .lines div.g1 {
bottom:50%}

#life-expectancy .bars .then {
padding-right:3rem;
-ms-flex-align:end;
-webkit-justify-content:flex-end;
justify-content:flex-end}

#life-expectancy .bars .now {
padding-left:3rem;
-ms-flex-align:start;
-webkit-justify-content:flex-start;
justify-content:flex-start}

.bar.men {
background:#00ADEE}

.billboard.men b,
.billboard.men .count {
color:#00ADEE}

.bar.women {
background:#62125C}

.billboard.women b,
.billboard.women .count {
color:#62125C}

.note {
position:absolute;
margin:0;
border:3px solid #333;
padding:7px 10px 10px;
font-size:13px;
line-height:1.1;
background:#F9F2D8;
-ms-transform:translate(-50%);
-webkit-transform:translate(-50%);
transform:translate(-50%)}

.note .source,
.stat .source {
font-size:10px;
margin:5px 0 0}

#current-pension {
border-width:2px;
bottom:65%;
margin-bottom:7rem;
left:150px;
padding:5px 10px 7px;
font-size:12px;
white-space:nowrap}

#current-pension:before,
#current-pension:after,
#future-pension:before,
#future-pension:after {
content:'';
position:absolute;
left:50%;
top:100%}

#current-pension:before,
#future-pension:before {
width:5px;
height:5px;
border-radius:50%;
margin-top:7rem;
background:#333;
-ms-transform:translate(-50%,0);
-webkit-transform:translate(-50%,0);
transform:translate(-50%,0)}

#current-pension:after,
#future-pension:after {
height:7rem;
border-left:1px solid #333;
-ms-transform:translate(-50%);
-webkit-transform:translate(-50%);
transform:translate(-50%)}

#future-pension {
width:150px;
top:30%;
margin-top:7rem;
left:100%;
-ms-transform:translate(-115%);
-webkit-transform:translate(-115%);
transform:translate(-115%)}

#future-pension:before,
#future-pension:after {
top:auto;
bottom:100%}

#future-pension:before{
margin:0 0 7rem}

#future-pension:before {
content:'!';
color:#fff;
font-weight:900;
line-height:17px;
margin:0 0 7rem;
width:22px;
height:22px;
border:2px solid #333;
background:#EE2953;
-ms-transform:translate(-50%,35%);
-webkit-transform:translate(-50%,35%);
transform:translate(-50%,35%);
z-index:1}

#life-expectancy .billboard {
margin:0 4px;
margin-bottom:2rem}

#life-expectancy .graph {
z-index:1}

#life-expectancy .source {
z-index:0}

#life-expectancy .tree {
top:auto;
bottom:6rem}

#life-expectancy .tr3 {
left:66%;
-ms-transform:none;
-webkit-transform:none;
transform:none}

footer {
padding:3rem 0 1rem;
background:#333;
color:#fff}

footer h3 {
margin:0 auto 2rem;
line-height:1;
font-size:16px;
padding:6px 10px 8px;
border:2px solid #fff;
max-width:120px}

#links {
margin:3rem auto;
text-align:left;
max-width:960px;
font-size:12px}

footer h6 {
font-size:12px;
font-weight:900;
cursor:pointer}

#links ol {
margin:.25rem 0 1rem}

#links li {
line-height:1;
margin-bottom:2px}

footer p:last-child {
margin-top:6rem;
font-size:12px}

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

	.then .stat,
	#road .c2 {
	display:none}
	
	.stat .mobile {
	display:inline}
}

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

	#work-type .stat.sm,
	#the-economy .stat {
	margin-left:1.5rem}
	
	#work-type .stat.sm:before,
	#the-economy .stat:before {
	width:2.5rem}
	
	.cloud,
	.sun {
	display:none}
	
	#sky .clouds {
	margin:0;
	max-width:none;
	background: 
		url(../img/cloud.svg) no-repeat 105% 50%,
		url(../img/cloud.svg) no-repeat 60% 50%,
		url(../img/cloud.svg) no-repeat 37.5% 17.5%,
		url(../img/cloud.svg) no-repeat 40% 0%,
		url(../img/cloud.svg) no-repeat -2.5% 50%,
		url(../img/sun.svg) no-repeat -5% 10%,
		url(../img/sun.svg) no-repeat 105% 10%}

}

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

	#boat {
	left:17.5%}
	
	#plane {
	left:45%}

	.split,
	.graph,
	#links {
	max-width:720px}

	header {
	max-width:300px}

	.graph {
	height:200px}

	.bar {
	width:50px}

	.bar > span {
	font-size:9px}

	.stat > b,
	.fact div > b,
	#work-type .sm > b {
	font-size:50px}

	#sky h2 {
	font-size:40px}

	#sky h2 + p,
	.bar > b,
	header h3 {
	font-size:25px}

	.billboard h3 {
	font-size:20px}

	header p,
	#road,
	#river .desc {
	font-size:13px}

	.stat,
	.fact b + p,
	h4 + p,
	.lines span {
	font-size:12px}

	.graph .key,
	#current-pension {
	font-size:11px}

	.fact div > b {
	margin-bottom:-5px}

	#x:before {
	content:'3'}

	#top-5 {
	margin:-2rem auto 2rem}

	#desc {
	left:50%;
	margin-left:-25px;
	-ms-transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%)}

	.van {
	width:140px;
	-ms-transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%)}

	.v1 {
	left:33%}

	.v2 {
	left:80%}

	#newspaper, 
	#internet {
	left:auto;
	right:auto;
	max-width:340px}

	#the-economy .stat,
	#the-economy .bar:nth-child(4),
	#the-economy .bar:nth-child(5),
	#qualifications .billboards,
	.car,
	#top-5 .tr1,
	#qualifications-desktop,
	#work-type .blue,
	header .stat {
	display:none}
	
	#top-5 .tree {
	bottom:90%}
	
	#road .tr1, 
	#road .tr2 {
	top:120%;
	left:15%}

	#qualifications {
	padding:10rem 0 0}

	#qualifications-alt {
	display:block}

	#qualifications-alt .bar > span {
	min-width:95px}

	#river {
	background:#00ADEE}
	
	#river .tr3 {
	display:none}
	
	#river .desc {
	left:25%;
	max-width:320px}

	#river .billboard {
	width:200px;
	margin-top:-2.5rem;
	left:75%;
	-ms-transform:translate(-50%);
	-webkit-transform:translate(-50%);
	transform:translate(-50%)}

	#work-type {
	padding-top:10rem}

	#work-type .bars .then {
	padding-left:4rem}

	#work-type .bars .now {
	padding-right:4rem}

	#work-type .sm {
	top:15%;
	background:#00ADEE;
	color:#fff;
	margin-left:2rem}

	#work-type .sm > b {
	font-size:40px}

	#work-type .sm p {
	font-size:11px}

	#work-type .stat:before {
	width:3rem}

	#life-expectancy .split .then h4 {
	margin-right:4rem}
	
	#life-expectancy .split .then h5 {
	margin-right:5rem}

	#life-expectancy .bars .then {
	padding-right:2rem}

	#life-expectancy .split .now h4 {
	margin-left:4rem}
	
	#life-expectancy .split .now h5 {
	margin-left:4.75rem}

	#life-expectancy .bars .now {
	padding-left:2rem}

	#current-pension {
	margin-bottom:6rem;
	left:150px}

	#current-pension:before {
	margin-top:6rem}

	#current-pension:after {
	height:6rem}

	#future-pension {
	margin-top:5rem;
	margin-left:-.5rem;
	-ms-transform:translate(-100%);
	-webkit-transform:translate(-100%);
	transform:translate(-100%)}

	#future-pension:before {
	margin-bottom:5rem;
	content: '';
	line-height:0;
	width:10px;
	height:10px;
	border:none;
	background:#EE2953;
	-ms-transform:translate(-50%,25%);
	-webkit-transform:translate(-50%,25%);
	transform:translate(-50%,25%)}

	#future-pension:after {
	height:5rem}

	#life-expectancy .avg {
	display:block}

	#life-expectancy .counters .men,
	#life-expectancy .counters .women{
	display:none}

	#life-expectancy .billboard h3 {
	font-size:13px}
	
}	

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

	#wall,
	#work-type .then .tr1,
	#work-type .now .tr3,
	#technology .tr3 {
	display:none}
		
	#water .tr1,
	#water .tr2 {
	left:5%;
	top:85%}
	
	#technology .tr1 {
	left:33%}

	#technology .tr2 {
	display:none}
	
	#road .tr1,
	#road .tr2 {
	left:5%}
	
	#road .tr3 {
	-ms-transform:translate(3rem,15rem);
    -webkit-transform:translate(3rem,15rem);
    transform:translate(3rem,15rem)}
	
	#river .tr1,
	#river .tr2 {
	margin-top:3rem;
	left:7.5%}
	
	#work-type .tr3 {
    -ms-transform:translate(1rem,-10rem);
    -webkit-transform:translate(1rem,-10rem);
    transform:translate(1rem,-10rem)}

	#wall-alt {
	background:#fff;
	border-top:3px solid #333;
	border-bottom:3px solid #333;
	padding-top:1rem;
	margin-bottom:5rem}
	
	#wall-alt .then,
	#wall-alt .now {
	padding:0 1rem}
	
	#technology .split:first-of-type .then h4,
	#technology .split:first-of-type .now h4 {
	text-align:center;
	margin:1rem 0 -1.5rem}
	
	#technology .tree {
	margin-top:-295px}
	
	#the-economy > .tr1,
	#the-economy > .tr2 {
	left:5%}
	
	#the-economy .billboard + .tr1 {
	left:-50%}
	
	#wall-alt .then div,
	#wall-alt .now div {
	/*height:368px;*/
	width:100%;
	max-width:180px;
	background:url(../img/office-then-sm.svg) no-repeat 50% 100%/contain;
	margin:0 auto}
	
	#wall-alt .now div {
	background-image:url(../img/office-now-sm.svg)}
	
	#wall-alt .then div:after,
	#wall-alt .now div:after {
	content:'';
	display:block;
	padding-top:140%}
	
	#work-type .tr1,
	#work-type .tr2 {
	left:7.5%}
	
	#future-pension,
	#work-type .sm {
	width:120px}
	
	.note {
	font-size:12px}

}

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

	#river .desc {
	display:none}
	
	#river {
    height:2rem}
    
    #river .billboard {
    margin-top:-4rem}

	.split,
	.graph,
	#links {
	margin-left:10px;
	margin-right:10px;
	max-width:none}
	
	#work-type .bars .then {
    padding-left:6rem}
    
	#work-type .bars .now {
    padding-right:6rem}
    
    #current-pension {
    left:15%}
    
    #future-pension {
    margin-right:.5rem}

}

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

	.then .c2,
	.then .c3,
	.now .c1,
	.graph .key,
	.graph header, 
	#top-5,
	#top-5 + .split,
	#technology .tree,
	.van,
	#desc,
	#river .billboard,
	.counters {
	display:none}
	
	#plane {
	left:40%}
	
	#boat {
	left:15%}
	
	#sky .clouds {
	background: 
		url(../img/cloud.svg) no-repeat 110% 50%,
		url(../img/cloud.svg) no-repeat 90% 90%,
		url(../img/cloud.svg) no-repeat 27.5% 17.5%,
		url(../img/cloud.svg) no-repeat 20% 0%,
		url(../img/cloud.svg) no-repeat -7.5% 50%,
		url(../img/sun.svg) no-repeat -10% 10%,
		url(../img/sun.svg) no-repeat 110% 10%}
	
	.now .c3 {
	top:45%;
	left:75%}
	
	#the-economy .tr1,
	#the-economy .tr2 {
	top:77%}
	
	#the-economy .tr3 {
    -ms-transform:translate(0,-4rem);
    -webkit-transform:translate(0,-4rem);
    transform:translate(0,-4rem)}
	
	section {
	padding-bottom:4rem}
	
	section:after {
	border-width:1px}
	
	.then, 
	.now {
	padding:0 10px 4rem}
	
	.billboard {
    width:180px}
    
    header.sm {
    -ms-transform:translate(-50%,-100%);
    -webkit-transform:translate(-50%,-100%);
    transform:translate(-50%,-100%)}
    
	#intro {
	margin-top:3rem}
	
	header {
	border-width:3px;
	max-width:220px;
	padding:5px 10px 10px}
	
	#fin {
	border-width:3px;
	max-width:280px;
	margin-top:10rem;
	line-height:1rem}
	
	header p {
	margin-top:0}

	#work {
	height:35px;
	width:35px}

	h1 {
	font-size:35px;
	margin-top:1rem}
	
	h1 + p,
	.billboard h3 {
    font-size:16px}
    
    h1 + p + p {
    font-size:14px}
    
    #sky h2 {
    font-size:30px}
    
	#sky h2 + p, 
	.bar > b, 
	header h3,
	h4 {
    font-size:20px}
    
    header p, #road, 
    #river .desc,
    .billboard h4 {
    font-size:12px}
    
    .lines span,
    .billboard p,
    h4 + p {
    font-size:11px}
    
    h4 + p {
    max-width:140px}
	
	#technology {
	padding-bottom:8rem}
	
	#technology .source {
	margin-top:0}
	
	#road .billboard {
	margin-top:-2rem}
	
	#road {
	height:150px}
	
	#road:before {
	border-width:3px}
	
	#road .alt {
	display:block}
	
	#river .tr1 {
	display:none}
	
	#road .tr3 {
	-ms-transform:translate(0,3rem);
    -webkit-transform:translate(0,3rem);
    transform:translate(0,3rem)}
    
    #work-type .tree {
    display:none}
	
	#work-type .graph {
	margin-top:0}
	
	#work-type .bars .then,
	#work-type .bars .now {
	padding:0}
	
	#work-type .stat.sm {
	width:150px;
	top:100%;
	left:50%;
    margin:5rem 0 0 0;
    -ms-transform:translate(-50%);
    -webkit-transform:translate(-50%);
    transform:translate(-50%)}
    
    #work-type .stat.sm:before {
    width:0;
    height:2rem;
    border:0;
    border-left:1px solid #333;
    top:auto;
    bottom:100%;
    right:50%}
    
    #work-type .billboard {
    margin-top:10rem}
	
	#life-expectancy {
	padding-bottom:18rem}
	
	#life-expectancy .split .then h4,
	#life-expectancy .split .then h5,
	#life-expectancy .split .now h4,
	#life-expectancy .split .now h5{
	margin:0;
	text-align:center}
	
	#life-expectancy .g1,
	#life-expectancy .g2 span:after,
	#life-expectancy .g3 span:after{
	display:none}
	
	#life-expectancy .split .then > .source,
	#life-expectancy .split .now > .source {
	margin-left:auto;
	margin-right:auto}
	
	#life-expectancy .bars .then {
	padding-right:10px}
	
	#life-expectancy .bars .now {
	padding-left:10px}
	
	.bar > span br {
	display:block}
	
	#current-pension {
    bottom:auto;
    top:35%;
    margin:13rem 0 0 0;
    left:10px;
    -ms-transform:none;
    -webkit-transform:none;
    transform:none}
	
	#current-pension:before,
	#current-pension:after {
	left:15px;
	top:auto;
	bottom:100%;
    margin:0 0 13rem;
    -ms-transform:translate(-50%,0);
    -webkit-transform:translate(-50%,0);
    transform:translate(-50%,0)}
    
    #current-pension:after {
    margin:0;
    height:13rem}
    
    #future-pension {
    width:135px;
    bottom:auto;
    left:auto;
    right:5px;
    top:30%;
    margin:14rem 0 0 0;
    -ms-transform:none;
    -webkit-transform:none;
    transform:none}
	
	#future-pension:before,
	#future-pension:after {
	right:10px;
	left:auto;
	top:auto;
	bottom:100%;
    margin:0 0 14rem;
    -ms-transform:translate(50%,0);
    -webkit-transform:translate(50%,0);
    transform:translate(50%,0)}
    
    #future-pension:after {
    margin:0;
    height:14rem}
	
	#links li {
	font-weight:300;
	font-size:10px;
	margin-bottom:7px}
	
	#life-expectancy .tr1,
	#life-expectancy .tr2 {
	left:7.5%}
	
	.source + p {
	padding:0}
	
}

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

	.bar {
	width:45px;
	margin:0 12px}

	.tree {
	background-size:70%}
	
	.tr2 {
	-ms-transform:translate(2.25rem,.75rem);
	-webkit-transform:translate(2.25rem,.75rem);
	transform:translate(2.25rem,.75rem)}

	#sky .clouds {
	background: 
		url(../img/cloud.svg) no-repeat 85% 70%,
		url(../img/cloud.svg) no-repeat 110% 50%,
		url(../img/cloud.svg) no-repeat 17.5% 17.5%,
		url(../img/cloud.svg) no-repeat 10% 0%,
		url(../img/cloud.svg) no-repeat -7.5% 50%,
		url(../img/sun.svg) no-repeat -10% 10%,
		url(../img/sun.svg) no-repeat 110% 10%}

	#river,
	#plane,
	#boat{
	display:none}

	.billboard {
    width:130px}
    
    #water {
    padding-bottom:3rem}
    
    #water .tr1, 
    #water .tr2 {
    top:60%}
    
    #water .tr3 {
    left:75%;
    top:75%}
    
    #newspaper, 
    #internet {
    width:137px;
    height:186px;
    max-width:none}
    
    #newspaper {
    left:-.5rem;
    background-image:url(../img/newspaper-sm.svg)}
    
    #internet {
    background-image:url(../img/internet-sm.svg)}
    
    .underemployed .note {
    margin-left:20px}
    
    .underemployed .note:after {
    margin-left:-10px}
    
    #work-type .stat.sm {
    width:135px;
    margin-left:-30px}
    
    #work-type .stat.sm:before {
    height:3.5rem;
    margin-right:-40px}

}