html {
	scroll-behavior:auto;
	overscroll-behavior:none;
}
body {
	font-family:'AG Book Pro', 'Akzidenz-Grotesk BQ', sans-serif;
	font-weight:300;
	background:#000;
	overscroll-behavior:none;
}

.footer--tfl{
    display: none !important;   
}

.header #lang-select {
	display:none;
}
.scrolled-past {
	background:#000;
}

.tfl-24-body-reset .methodology-wrapper {
    padding-top: var(--headerHeight);
}

.footer--tfl{
    display: none !important;
}

.methodology-wrapper {
	font-size: calc( 7.6px + (10 - 7.6) * (100vw - 1024px) / (1920 - 1024) ); /* I want the ems to go between being 10px on a 1024px screen to 21px on a 1920px screen.*/
	font-size: calc( 7.6px + (10 - 7.6) * (100vh - 720px) / (1080 - 720) ); /* I want the ems to go between being 7.6px on a 720px high screen to 10px on a 1080px high screen.*/
	font-size:max(7.61905px,
calc(
min(7.61905px + ( 10 - 7.61905 ) * (100vh - 768px) / (1080 - 768),
	7.61905px + (10 - 7.61905) * (100vw - 1024px) / (1920 - 1024) )
)
); /* ems from 10 on 1920x1080 to7.6... on a 1024x769 screen */
	position: relative;
    padding-top: var(--headerHeight);
}
.page {
	background:none!important;
}
.page h1 {
	font-family: 'New Century Schoolbook LT', 'new_century', serif;
	font-size:9em;
	font-size:
calc(
min(80px + ( 90 - 80 ) * (100vh - 768px) / (1080 - 768),
	80px + (90 - 80) * (100vw - 1024px) / (1920 - 1024) )
)
;
	margin:0;
	line-height:calc(110/90);
}
.page h2 {
	font-family: 'New Century Schoolbook LT', 'new_century', serif;
	font-size:5.4em;
	font-size:
calc(
min(50px + ( 54 - 50 ) * (100vh - 768px) / (1080 - 768),
	50px + (54 - 50) * (100vw - 1024px) / (1920 - 1024) )
)
;
	line-height:calc(66/54);
	margin-bottom:0.5em;
}
.page h3 {
	font-family: 'New Century Schoolbook LT', 'new_century', serif;
	font-size: 4em;
	font-size:
calc(
min(30px + ( 40 - 30 ) * (100vh - 768px) / (1080 - 768),
	30px + (40 - 30) * (100vw - 1024px) / (1920 - 1024) )
)
;
	line-height:calc(50/40);
	margin:0 0 0.15em;
	letter-spacing:calc(-0.8em/40);
}
.page h4 {
    font-style: italic;
    font-size: 
calc(
min(35px + ( 40 - 35 ) * (100vh - 768px) / (1080 - 768),
	35px + (40 - 35) * (100vw - 1024px) / (1920 - 1024) )
)
;
    font-weight: 300;
	margin:0;
	line-height:calc(60/40);
}
.page h5 {
	font-size:2.1em;
	font-weight:600;
	padding:0;
	margin-bottom: 0;
}
.page p {
	font-size:2.1em;
}
@media only screen and (max-width:1024px), only screen and (max-height:768px) {
	.page h1 {
		font-size:
calc(
min(45px + ( 80 - 45 ) * (100vh - 580px) / (768 - 580),
	45px + (80 - 45) * (100vw - 375px) / (1024 - 375) )
)
;
	}
	.page h2 {
    font-size:40px;
/* 		font-size:
calc(
min(40px + ( 50 - 40 ) * (100vh - 580px) / (768 - 580),
	40px + (50 - 40) * (100vw - 375px) / (1024 - 375) )
)
; */
    font-size:
calc(
min(34px + ( 40 - 34 ) * (100vh - 580px) / (768 - 580),
	34px + (40 - 34) * (100vw - 375px) / (1024 - 375) )
)
;
	}
	.page h3 {
		font-size:
calc(
min(25px + ( 30 - 25 ) * (100vh - 580px) / (768 - 580),
	25px + (30 - 25) * (100vw - 375px) / (1024 - 375) )
)
;
	}
	.page h4 {
		font-size:
calc(
min(26px + ( 35 - 26 ) * (100vh - 580px) / (768 - 580),
	26px + (35 - 26) * (100vw - 375px) / (1024 - 375) )
)
;
	}
}
@media only screen and (max-width:375px), only screen and (max-height:580px) {
	.methodology-wrapper {
		font-size:
calc(
min(6px + ( 7.61 - 6 ) * (100vh - 480px) / (580 - 480),
	6px + (7.61 - 6) * (100vw - 320px) / (375 - 320) )
)
;
	}
}
@media only screen and (min-width:1200px) and (max-height:720px) {
	.methodology-wrapper {
		font-size: calc( 6px + (7.61905 - 6) * (100vh - 500px) / (768 - 500) ); /* I want the ems to go between being 7.6px on a 720px high screen to 10px on a 1080px high screen.*/
	}
  .right-panel .graph-caption {
  max-width: 500px !important;
  font-size: 1.4em;
  position: absolute;
  bottom: 3em !important;
}
}

.h-menu{
	width: calc(100vw - 12.8em);
	height:6.9em;
	background:black;
	display: flex !important;
	align-items:center;
	position: fixed;
	bottom: 0;
	z-index: 9;
	transition: transform 0.5s ease;
	overflow: visible;
	box-sizing:border-box;
	border-top: solid 1px white;
	opacity:0;
	transform:translateY(100%);
}
.h-menu.active{
	opacity:1;
	transform: translateY(0%);
}
.h-menu a{
	text-align:center;
	background-position: center;
	background-size: cover;
	text-decoration:none;
	font-size:2.3em;
	font-size: 
calc(
min(16px + ( 23 - 16 ) * (100vh - 768px) / (1080 - 768),
	16px + (23 - 16) * (100vw - 1024px) / (1920 - 1024) )
)
;
	line-height:3;
	flex: 1 1 auto;
	color:white;
	cursor:pointer;
	position: relative;
	transition: all 0.3s ease;
	transform: translateY(0%);
	user-select:none;
	margin: 0 0.7em;
}
.h-menu a:hover{
	text-decoration:underline;
}
.h-menu a.h-menu__button {
    line-height: 1.2;
    text-decoration: none !important;
    border: 1px solid #FFF;
    padding: .5em 0.9em;
    display: inline-block;
    flex: inherit;
}
.h-menu__scroll-reminder {
	position:absolute;
	left:50vw;
	transform:translate(-50%);
	bottom: calc(100% + 10px);
	text-align:center;
}
.h-menu__scroll-reminder svg {
	width: 3vw;
}
.h-menu a.mob-only {
	display:none;
}
/* .h-slider.hero-slider{
	position: fixed !important;
	top:150px !important;
} */
.to-top{
	opacity:0;
	position: fixed;
	bottom:0;
	right:0;
	width:12.8em;
	z-index: 9;
	height:6.9em;
	background:black;
	color:white;
	text-align: center;
	line-height: 6.9em;
	user-select: none;
	cursor: pointer;
	transition: transform 0.5s ease;
	box-sizing:border-box;
	display:flex !important;
	align-items:center;
	box-sizing:border-box;
	border-top:1px solid white;
	transform:translateY(100%);
	padding-left:4.5em;
	padding-right:5em;
}
.to-top.active{
	opacity:1;
	transform:translateY(0%);
}
.to-top:hover{
	background:#222;
}
.top-top img {
	width:3.7em;
}
@media only screen and (max-width:1200px), only screen and (max-height:768px) {
	.h-menu{
		width:100%;	
	}
	.to-top{
		display:none!important;
	}
}
@media only screen and (max-width:830px) {
	.h-menu {
		flex-direction:column;
		align-items: flex-start;
		width: 100%;
		padding-right: 9em;
		height:auto;
/* 		max-height:6.9em; */
    max-height:5.9em;
		transition:max-height 0.3s ease;
		overflow:hidden;
	}
	.h-menu.show-all {
		max-height:60em;
	}
	.h-menu a{
		font-size:2.5em;
/* 		line-height: 2.75; */
    line-height: 2.3;
	}
	.h-menu a.mob-only {
		display:block;
	}
	.h-menu a.before {
		display:none;
	}
	.h-menu.show-all a.before {
		display:block;	
	}
	.h-menu.show-all a.mob-only{
		display:none;	
	}
	a.h-menu__button {
		margin:0.2em 0.7em;
	}
	.to-top{
		display:flex!important;
		padding:0 2em;
		width:9em;
/* 		height: 6.7em; */
    height: 5.7em;
		border-top:0;
	}
	.h-menu__scroll-reminder {
		display:none;
	}
}

.page {
    background: #fff;
    min-height: 50em;
    position: relative;
    z-index: 5;
	padding-bottom:0;
}
.blog-inner{
	padding-top:0;
}
.blog-inner small{
	margin-bottom:3em;
}

.background-animation{
	height: 100vh;
	height: calc(100vh - 104px - 6.9em);
    height: calc((var(--vh, 1vh) * 100) - var(--headerHeight,104px) - 6.9em);
    width: 100%;
    position: fixed;
	top:104px;
    top: var(--headerHeight,104px);
    left: 0px;
    overflow: hidden;
    transform: scale(1.12);
    transition: all 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
	background:#000;
	padding: 3.2% 24%;
}
.background-animation:after{
	content:'';
	display:block;
	width:100%;
	height:100%;
	background:black;
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	transition:all 0.5s ease;
}
.background-animation.active{
	transform:scale(1);
}
.background-animation.active:after{
	opacity:0.1;
}
.background-animation video{
	max-height: 100%;
}
@media only screen and (max-width:1024px), only screen and (max-height:660px) {
	.background-animation.active:after {
		opacity: 0.5;
	}
}
@media only screen and (max-width:830px), only screen and (max-height:660px) {
	.background-animation {
		padding:0;
	}
}

.split-wrap{
	display: flex;
/*     height: calc(100vh - 104px - 6.9em); */
    position: relative;
	height:calc(100vh - 104px);
	height:calc((var(--vh, 1vh) * 100) - var(--headerHeight,104px));
}
.split {
    height: 100%;
    width: 50%;
    box-sizing: border-box;
}
.split-left {
/*     background: white; */
}
.split-right {
/*     background: black; */
    color: white;
    position: relative;
}
.split-right{
/* 	background:none; */
}
.slider-nav{
	display:none;
}
.theTitle{
	position:relative;
	height:calc(100vh - 104px - 6.9em);
	height:calc((var(--vh, 1vh) * 100) - var(--headerHeight,104px) - 6.9em);
	padding:7.5em;
	box-sizing:border-box;
	display:none;
	align-items: center;
    justify-content: center;
}
.theTitle .center {
	text-align:center;
}
.theTitle svg {
	position:absolute;
	bottom:-2em;
  width:3vw; */
/* 	width:6vw; */
}

.scroll-text {
  position: absolute;
  bottom: 0.5em;
}

.split-slider .slide{
	height:calc(100vh - 104px - 6.9em);
	height:calc((var(--vh, 1vh) * 100) - var(--headerHeight,104px) - 6.9em);
	padding:7.5em;
	padding:
calc(
min(32px + ( 75 - 32 ) * (100vh - 768px) / (1080 - 768),
	32px + (75 - 32) * (100vw - 1024px) / (1920 - 1024) )
)
;
	padding-top:
calc(
min(0px + ( 75 - 0 ) * (100vh - 768px) / (1080 - 768),
	0px + (75 - 0) * (100vw - 1024px) / (1920 - 1024) )
)
;
	box-sizing:border-box;
}
@media only screen and (max-width:1200px), only screen and (max-height:768px) {
	.split-slider .slide{
		padding:3em 4.2em;
		box-sizing:border-box;
	}	
}
@media only screen and (max-width:400px) and (max-height:620px) {
	.split-slider .slide{
		padding:2em 4em;
		box-sizing:border-box;
	}
}
.splash-side{
	display:none;
	transition:none;
}

.slide .center{
	max-width:60em;
	text-align:center;
	margin:0 auto;
	left:0;
	right:0;
	top:50%;
	transform:translateY(-50%);
	position:absolute;
}

.slide .inner{
	max-width:470px;
	min-height:0;
	height:100%;
}
/* .slide .inner p{
	font-size:19px;
} */
/* .slide .inner h2{
	font-size:37px;
	margin-top:0px;
} */
/* .slide .inner h3{
	font-family: 'New Century Schoolbook LT', 'new_century_i', serif;
/* 	font-style:italic; */
/* 	font-weight: 200; */
/* 	letter-spacing: -0.025em; */
/* 	font-size:40px; */
/* } */
.slide .inner h4, .slide .right-panel h4{
	font-size:27px;
	margin: 8px 0px;
	user-select:none;
	display:inline-block;
}
.slide .inner h4 span, .slide .right-panel h4 span{
	font-family: 'New Century Schoolbook LT', 'new_century_i', serif;
	font-style:italic;
	font-weight: 200;
	letter-spacing: -0.025em;
	font-size:20px;
}

.mid-right-img{
	position: absolute;
	left: 50%;
	max-width: 16.3%;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
}
.mid-right{
	position: absolute;
	left: 50%;
	max-width: calc(42% * 0.36);
    max-width: calc(var(--videoWidth,42%) * 0.36);
	top: 50%;
	width: 100%;
	transform: translate(18%,-50%);
	display: flex;
/* 	justify-content: space-between; */
	align-items:center;
	font-size: 2.3em;
	font-family: 'AG Book Pro';
	font-weight: 600;
}
.mid-right span {
	opacity:0;
	transition:all 0.3s ease;
	position: absolute;
    left: 0;
	transform:translate(-50%,0);
}
.mid-right span:nth-of-type(1) {left: 2.4%;}
.mid-right span:nth-of-type(2) {left: 19.5%;}
.mid-right span:nth-of-type(3) {left: 38.5%;}
.mid-right span:nth-of-type(4) {left: 61.7%;}
.mid-right span:nth-of-type(5) {left: 83%;}
.mid-right span:nth-of-type(6) {left: 98.5%;}

.mid-right span.active {
	opacity:0.5;
}
.mid-right span.current {
	opacity:1;
	color:#FFF;
	font-size:1.4em;
}
.slide .ft-right {
	position: absolute;
    top: max((
calc(
min(5px + ( 75 - 5 ) * (100vh - 768px) / (1080 - 768),
	5px + (75 - 5) * (100vw - 1024px) / (1920 - 1024) )
)
), 5px);
    left: calc(50% + (var(--videoWidth,42%) * 0.5) + 1em);
    max-width: 47em;
    width: calc(50% - (var(--videoWidth,42%) * 0.5) - 1em - 
calc(
min(30px + ( 70 - 30 ) * (100vh - 768px) / (1080 - 768),
	30px + (70 - 30) * (100vw - 1024px) / (1920 - 1024) )
)
);
}
.slide .ft-right p {
	margin:0.1em 0 1.3em;
}
.ft-right__item {
	opacity:0;
	transition:all 0.3s ease;
}
.ft-right__item.active {
	opacity:1;
}

@media only screen and (max-width:1200px), only screen and (max-height:660px) {
	.slide.ft .inner {
		visibility:hidden;
		opacity:0;
		transition:opacity 0.5s ease,visibility 0s linear 0.5s;
	}
	.slide.ft .inner.active {
		visibility:visible;
		opacity:1;
		transition:opacity 0.5s ease, visibility 0s linear 0s;
	}
	.slide .ft-right {
		left:4.2em;
		top:4.2em;
		width:45%;
		max-width:53em;
	}
}
@media only screen and (max-width:830px), only screen and (max-height:660px) {
	.slide .ft-right {
		top:auto;
		bottom:4.2em;
		width:calc(100% - 4.2em - 4.2em);
		min-height:14em;
	}
	.ft-right__item {
		display:none;
	}
	.ft-right__item.active.current {
		display:block;
	}
}

.slide .right-panel{
	position: absolute;
    padding: inherit;
    top: 0;
    right: 0;
    height: 100%;
    width:50%;
	max-width: 50%;
    display: flex;
    align-items: center;
}
.slide .macro-graph {
/* 	max-width:63.5em; */
 	max-width:640px;
	max-width: 560px;
	width: 100%;
	margin-bottom: 10%;
}
@media only screen and (max-width:1030px) {
	.slide .right-panel{
		width:auto;
		max-width: 44%;
	}
}
@media only screen and (max-width:900px), only screen and (max-height:659px) {
	.slide .inner {
		height:auto;
	}
	.slide .right-panel{
		position:static;
		padding:0;
		max-width: 470px;
		height: auto;
	}
}

.hn-title, .gd-title {
	margin-right:-3em;
}
/* .slide.hn .inner h4{
	cursor:pointer;
} */

/* .slide.human-needs{
	padding: 0px !important;
	position: absolute !important;
	top:7.5em;
	height:calc(100vh - 346px) !important;
} */
.part2{
	display:none;
}
.slide .human-needs {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	padding:inherit;
	box-sizing: border-box;
}
.slide.gd .inner {
	max-width:80em;
}
.slide.gd .part1 {
/* 	max-width:47em; */
  max-width: 470px;
}
.slide .part2 .inner h3{
	opacity:0.5;
	transition:opacity 0.3s ease;
	cursor:pointer;
}
.slide .part2 .inner h3:hover{
	opacity:1;
}
.slide .part2 .inner h3.active{
	opacity:1;
}
.slide .part2 .inner h3:hover{
	opacity:0.9;
}

.hover{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	display:flex;
	align-items:center;
	
/* 	position: absolute;
    top: 0;
	padding:inherit;
    left: calc(50% + (var(--videoWidth,42%) * 0.5) + 1em);
    max-width: 47em;
    width: calc(50% - (var(--videoWidth,42%) * 0.5) - 1em - 7em); */
}
.hover > div{
	color:white;
	display:none;
	flex-direction:column;
	align-items:flex-end;
	justify-content:center;
	position:absolute;
	left:0;
	width:90%;
	max-width: 76em;
}
.hover__top {
	width:48.5em;
	height: 50vh;
	height: calc(var(--vh, 1vh) * 50);
    display: flex;
    flex-direction: column-reverse;
}
.hover__bottom {
	width:48.5em;
	height: 50vh;
	height: calc(var(--vh, 1vh) * 50);
    display: flex;
	flex-direction:column;
}
.hover .img{
	width:100%;
	padding-bottom:calc(100% / (485/262));
	background-size:cover;
	background-position:center;
	margin-bottom:2.1em;
	position:relative;
}
.hover .img:before{
	content:' ';
	display:block;
	background:black;
	opacity:0.2;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.hover .img h2{
	font-family:'AG Book Pro', 'Akzidenz-Grotesk BQ', sans-serif;
	font-weight: 400;
	line-height:calc(65/50);
    letter-spacing: -0.02em;
    font-size: 5em;
	font-size: 
calc(
min(35px + ( 50 - 35 ) * (100vh - 768px) / (1080 - 768),
	35px + (50 - 35) * (100vw - 1024px) / (1920 - 1024) )
)
;
	color: white;
    text-align: center;
    width: 100%;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
	padding-left: 0.4em;
    padding-right: 0.4em;
}
.hover .img .caption {
	position:absolute;
	bottom:1em;
	left:1em;
	font-size:1.4em;
}
.hover .hr{
	background:white;
	height:1px;
	width: 0;
	right: 0;
	transition:width 1s ease;
}
.hover .hr.active{
	width: 100%;
}
.hover .text{
	max-width:100%;
	margin-top:0.9em;
	font-size:2.1em;
}
.hover .box{
	margin-top:2em;
	border:solid 1px white;
	padding:1em 1em;
	box-sizing:border-box;
	width:100%;
	font-size:1.4em;
	text-transform:uppercase;
}
.hover .box span{
/* 	font-family: 'ag_book_proreg',sans-serif; */
	padding:0.3em;
	display:inline-block;
}
.hover .box__title {
	padding:0.3em;
	text-decoration:underline;
}
.hover .button {
    font-size: 1.7em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #FFF;
    align-self: flex-start;
    padding: 0.5em 0.8em;
    margin-top: 1.4em;
    z-index: 999;
}

.right-panel .graph-caption {
  max-width: 560px;
  font-size: 1.4em;
  position: absolute;
  bottom: 11em;
}

@media only screen and (max-width:1024px), only screen and (max-height:768px) {
	.hover .img h2{
		font-size: 
calc(
min(33px + ( 35 - 33 ) * (100vh - 550px) / (768 - 550),
	33px + (35 - 33) * (100vw - 375px) / (1024 - 375) )
)
;
	}
}
@media only screen and (max-width:1000px) {
	.slide.gd .inner .part2 {
		max-width:385px;
	}
}
@media only screen and (max-width:830px) {
.right-panel .graph-caption {
    font-size:1.4em;
    position: ;
    bottom: 0em;
  }
  
  .hn-title, .gd-title {
		margin-right:0;		
	}
	.slide.hn .inner .part2, .slide.gd .inner .part2 {
		display:none!important;
	}
	.slide .human-needs {
		width:100%;
	}
	.hover {
		padding:inherit;
		max-width:100%;
		justify-content: center;
	}
	.hover > div {
		position: static;
		width: auto;
		max-width: min(100%,calc( 300px + (385 - 300) * (100vh - 500px) / (620 - 500) ));
		border-left: 1px solid;
		padding-left: 2em;
		min-height: 100%;
		justify-content: flex-start;
	}
	.hover__top {
		max-width: 100%;
		height: auto;
	}
	.hover .hr {
		display:none;
	}
	.hover__bottom {
		max-width: 100%;
		height: auto;
	}
	.hover .img {
	    padding-bottom: calc(100% / (18/9));
	}
	.gd .hover .img {
		padding-bottom: calc(100% / (14/9));
	}
	.hover .text {
		margin-top:0;
	}
	.hover .box {
		margin-top:1.3em;
		font-size:1.8em;
		padding:0.7em 0.9em;
	}
	.hover .box__title {
		display:inline-block;
		padding:0.25em;
	}
	.hover .box span {
		padding:0.25em;
	}
}

.slide__button {
	font-size: 1.7em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #FFF;
    color: white;
    padding: 0.5em 0.8em;
    margin-top: 0.5em;
	display:inline-block;
}


.scroll_trigger{
/* 	height:calc(100vh - 150px); */
	height:calc(100vh - 104px - 6.9em);
	height:calc((var(--vh, 1vh) * 100) - var(--headerHeight,104px) - 6.9em);
	width:100%;
}

footer{
	z-index:9;
}

@media only screen and (max-width:600px) {
.right-panel .graph-caption {
    font-size:1.4em;
    bottom: 3em;
  }
}

/* @media screen and (max-width: 900px) {
	.h-menu, .to-top{
		display:none;
	}
	
	.hover{
		display:none !important;
		visibility:hidden;
	}
	.mid-right-img{
		display:none;
	}
	.mid-right {
		display:none;
	}
	.split-slider .slide{
		height:auto;
		padding:0px;
		margin-top:100px;
	}
	.split-slider .inner{
		width:100%;
		max-width:100%;
		padding-bottom:30px;
	}
	
	.split-slider .slide:nth-child(1){
		height:calc(100vh  - 50px);
		position:relative;
		margin-top:0;
	}
	.background-animation{
		height:calc(100vh - 50px);
		bottom:auto;
		top:50px;
		transform:none !important;
	}
	.slide h2{
		font-size:37px;
	}
	.slide .inner h3{
		padding:0px 20px;
	}
	.slide .inner h4{
		padding:0px 20px;
		font-size:22px;
	}
	.slide .inner h4 span{
		font-size:17px;
	}
	.splash-side{
		display:block;
	}
	.slide .right-panel{
		position:relative;
		width:100%;
		max-width:100%;
		float:none;
		top:auto;
		left:auto;
		padding:0px 20px;
		box-sizing:border-box;
		right:auto;
		height:auto;
	}
	.slide .right-panel h5, .slide .right-panel p{
		font-size:16.5px !important;
	}
	.part2{
		display:block;
		position:relative;
		float:none;
		top:-30px;
		left:auto;
		padding:0px;
		box-sizing:border-box;
		right:auto;
		width:100%;
		max-width:100%;
		height:auto;
	}
	.slide .part2 h2{
		display:none;
	}
} */