/* ============== RESET =============== */
*,
*::before,
*::after{box-sizing:border-box;}

/* ============ TYPOGRAPHY ============ */
* {
	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
}
html { font-size: 62.5%; } /* 1rem=10px */
body { 
	font-size: 1.6rem; /* =16px */
	font-family: forma-djr-text, sans-serif; 
	font-weight: normal;
}
h1 { 
	font-size: 10.2rem; /* =102px */
	font-family: forma-djr-banner, sans-serif;
	margin: 0px;
	font-weight: normal;
	line-height: 0.9;
}

/* ============ LAYOUT ============ */

/* ------------ GENERAL ----------- */

/* ............ Colours ........... */
/*            Background            */
.bg-teal { background-color: #45bea8; }
.bg-white { background-color: #ffffff; }
.bg-red { background-color: #ec3928; }
.bg-orange { background-color: #ee9425; }
.bg-black { background-color: #050505; color: #FFF;}
/*               Hover              */
.hover-teal:hover { background-color: #45bea8; color: #FFF; }
.hover-white:hover { background-color: #ffffff; color: #000; }
.hover-red:hover { background-color: #ec3928; color: #FFF; }
.hover-orange:hover { background-color: #ee9425; color: #FFF; }
.hover-black:hover { background-color: #050505; color: #FFF; }

/* ............ Buttons ........... */
button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

/* ---------- HOME PAGE ----------- */
/* ........... Landing ............ */
.h-landing {
	padding: 1rem 2rem;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100%; /* fallback */
	height: 100vh;
}
.h-landing h1 {
	color: #FFF;
}
.h-l-header {
	width: 100%;
	height: 20%;
	align-self: flex-start;
	z-index: 1;
}
.h-l-img {
	width: 100%;
	height: 60%;
	display: inline-flex;
	justify-content: center;
	padding: 1rem 0px;
	align-self: center;
	z-index: 0;
	overflow: visible;
}
.h-l-img svg {
	width: 50%;
	height: 100%;
}
.h-l-footer {
	width: 100%;
	height: 20%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	align-self: flex-end;
}
.h-landing button {
	color: #FFF;
	font-size: 10.2rem; /* =102px */
	line-height: 0.8;
	font-family: forma-djr-banner, sans-serif;
	margin: 0px;
	font-weight: normal;
}
.h-l-arrow {
	padding-bottom: 0.5rem;
}
.h-l-arrow svg  {
	height: 8rem;
	align-self: flex-end;
	vertical-align: bottom;
}
/* ........... Main ............ */
.h-main {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100vh;
}
.h-m-header {
	width: 100%;
	height: 10%;
	padding: 0px 2rem;
	align-self: flex-start;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border: #000 solid;
	border-width: 1px 0px;
}
.h-m-header, .h-m-header a {
	font-size: 2.0rem;
	font-weight: normal;
	text-decoration: none;
	color: #FFF;
}
.h-m-contact {
	position: relative;
}
.contact-small {
	display: none;
}
.h-m-c-button {
	position: absolute;
	background-color: #45bea8;
	padding-left: 28rem;
	height: 100%;
	transition: padding-left 0.3s ease-out;
}
.h-m-c-button:hover {
	text-decoration: underline;
}
.h-m-c-show {
	padding-left: 4rem;
	transition: padding-left 0.3s ease-out;
}
.h-m-c-show:hover {
	/*cursor: e-resize;*/
}
.h-m-header a {
	padding-left: 14rem;
}
.h-m-dots a {
	padding-left: 0rem;
}
.h-m-dots a svg {
	fill: #FFF;
}
.h-m-dots {
	font-size: 2.7rem;
	line-height: 1rem;
	vertical-align: middle;
	margin-left: 1.5rem;
}
.h-m-pages {
	width: 100%;
	height: 90%;
	display: flex;
	flex-wrap: wrap;
}
.h-m-pages a {
	width: 50%;
	height: 50%;
	padding: 2rem;
	font-size: 10.2rem;
	font-family: forma-djr-banner, sans-serif;
	line-height: 0.9;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
	text-transform: uppercase;
}
.h-m-pages a:nth-child(odd) {
	border-right: 1px #000 solid;
	padding-right: 4rem;
}
.h-m-pages a:nth-child(1), .h-m-pages a:nth-child(2) {
	border-bottom: 1px #000 solid;
}

/* ---------- MAIN PAGES ---------- */
/* ........... General ............ */
.main-page {
	height: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.m-main {
	flex: 1;
}
.m-main { /* Horizontal scroll container */
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden; 
	-webkit-overflow-scrolling: touch;
	line-height: 1.4;
}
/* SCROLLBAR STYLES*/
.m-main::-webkit-scrollbar {
    width: 0px;
    background: transparent; 
}
.m-main::-webkit-scrollbar-thumb {
    background: #000;
}
.bg-black .m-main::-webkit-scrollbar-thumb {
    background: #FFF;
}
/* ......... Header & Footer .......... */
.m-header {
	width: 100%;
	padding: 2rem 2rem 2rem;
	display: flex;
	justify-content: space-between;
}
.m-footer {
	position: absolute;
	right: 0px;
	bottom: 0px;
	padding: 1.5rem 2rem;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
.m-footer button, .m-header button {
	color: #000;
	font-size: 10.2rem; /* =102px */
	line-height: 0.8;
	font-family: forma-djr-banner, sans-serif;
	margin: 0px;
	font-weight: normal;
}
.bg-black .m-footer button, .bg-black .m-header button {
	color: #FFF;
}
.m-arrow {
	align-items: center;
	display: flex;
	display: none;
}
.m-cross {
	display: flex;
	align-items: flex-start;
	padding-top: 0.3rem;
}
.m-cross button {
	display: flex;
	align-items: top;
}
.m-arrow svg, .m-cross svg  {
	height: 7.5rem;
	fill: #000;
	font-size: 0px;
}
.bg-black .m-arrow svg, .bg-black .m-cross svg  {
	fill: #FFF;
}
.flip {
	transform: rotate(180deg);
	transform-origin: center;
}

/* ---------- SECTIONS ----------- */
.m-section:first-child {
	padding-left: 2rem;
}
.m-section > *:last-child {
	padding-right: 0rem;
}

/* ----------- BLOCKS ------------ */
/* ............ Grid ............. */
.w1 > * {
	width: 300px;
	width: 25vw;
	padding: 0px 2rem;
}
.w2 > * {
	width: 600px;
	width: 50vw;
	padding: 0px 2rem;
}

.w3 {
	width: 800px;
	width: 75vw;
	padding-right: 2rem;
}
.w4 {
	width: 1000px;
	width: 100vw;
	padding-right: 2rem;
}
/* ........... Columns ........... */
/* FLEX COLUMN WRAP FIXED WITH JS */
.c-multi, .c-single {
	display: flex;
	flex-flow: column wrap;
	height: 100%;
	align-items: flex-start;
	flex-shrink: 0;
	position: static;
}
.c-multi > *, .c-single > * {
	width: 25vw;
}
.c-multi > * {
	padding: 0px 2rem;
}
.c-single p:first-child, .c-single h3:first-child, .c-multi p:first-child, .c-multi h3:first-child, .c-single h2, .c-multi h2 {
	margin-top: 0px;
}
.c-single p:last-child, .c-multi p:last-child {
	margin-bottom: 0px;
}
.c-single h3, .c-multi h3, .c-single h2, .c-multi h2 {
	font-weight: normal;
	font-size: 2rem;
	margin-bottom: 1rem;
}
.c-single h2, .c-multi h2 {
	min-height: 5.6rem;
}
.c-single a, .c-multi a {
	color: #000;
	text-decoration: none;
	border: solid #000;
	border-width: 2px 0px;
	width: 100%;
	display: block;
	font-size: 1.8rem;
	text-transform: uppercase;
	padding: 0.5rem 0rem 0.5rem 1rem;
}
.timeline a {
	color: #FFFFFF;
	text-decoration: underline;
}
.timeline a:link    { color:#FFFFFF; }
.timeline a:visited { color:#FFFFFF; }
.timeline a:hover   { color:#FFFFFF; }
.timeline a:active  { color:#FFFFFF; }
.c-single a:hover, .c-multi a:hover {
	color: #FFF;
	background-color: #000;
}
.bg-black .c-single a, .bg-black .c-multi a {
	color: #FFF;
}
.bg-black .c-single a:hover, .bg-black .c-multi a:hover {
	color: #000;
	background-color: #FFF;
}
.c-single figure, .c-multi figure  {
	margin: 1rem 0px;
	width: 300px;
}
.c-single figure img, .c-multi figure img {
	width: 90%;
}
.c-single p, .c-multi p {
	margin-top: 0px;
	z-index: 2;
	background-color: inherit;
}

/* ..... Textarea Components ..... */
/*              Audio              */
.audioblock {
	width: 25vw;
	position: relative;
	margin: 0px;
	padding: 0px 2rem;

}
.audio-inner {
	border: solid #000;
	border-width: 1px 0px;
	height: 37px;
}
.bg-black .audioblock {
	border: solid #FFF;
	border-width: 1px 0px;
}
.audiotext {
	position: absolute;
	top: 8px;
	left: 80px;
	z-index: 10;
	pointer-events: none;
}

/* ........  Components ......... */
/* ......... Image Grid ......... */
.imagegrid {
	width: 600px;
	width: 50vw;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	flex-shrink: 0;
	padding: 0px 2rem;
}
.gridimage {
	width: 33.3%;
	padding: 0px 1rem 1rem 1rem;
	mix-blend-mode: multiply;
}
/* Right column */
.gridimage:nth-child(3n) {
	padding-right: 0px;
}
/* Left column */
.gridimage:nth-child(3n+1) {
	padding-left: 0px;
}
/* Bottom row*/
.gridimage:nth-last-child(-n+3) {
	padding-bottom: 0px;
}

/* ......... Big Video ......... */
.videoblock-inner {

}
.videoblock .plyr--video {
	padding: 0px;
}
.videoblock video {
	width: 100%;
}

/* ......... Big Image ......... */
.bigimageblock {
	flex-shrink: 0;
}

/* ........ Infographic ........ */
.infographic {
	width: 600px;
	width: 50vw;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}
.infographic svg {
	margin-bottom: 1rem;
	width: 100%;
	cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.infographic svg:active {
	cursor: move;
	cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.infographic-controls {
	display: flex;
	border: solid #000;
	border-width: 1px 0px 1px 0px;
	padding: 0px;
}
.bg-black .infographic-controls {
	border-color: #FFF;
}
.infographic-controls {
	display: flex;
	align-items: center;
}
.infographic-controls a {
	padding: 0.5rem 0px;
}
.infographic-controls button {
	font-family: forma-djr-banner, sans-serif;
	height: 100%;
	display: flex;
	align-content: center;
}
.infographic-controls button {
	border-right: 1px solid #000;
}
.bg-black .infographic-controls button {
	border-color: #FFF;
}
.bg-black .infographic-controls svg {
	fill: #FFF;
}
.infographic-controls button:hover {
	background-color: #000;
}
.bg-black .infographic-controls #zin:hover {
	background-color: #FFF;
}
.bg-teal .infographic-controls button:hover, .bg-teal .infographic-controls a:hover  { fill: #45bea8; color: #45bea8; }
.bg-white .infographic-controls button:hover, .bg-white .infographic-controls a:hover  { fill: #fff; color: #fff; }
.bg-red .infographic-controls button:hover, .bg-red .infographic-controls a:hover  { fill: #ec3928; color: #ec3928; }
.bg-orange .infographic-controls button:hover, .bg-orange .infographic-controls a:hover  { fill: #ee9425; color: #ee9425; }
.bg-black .infographic-controls button:hover, .bg-black .infographic-controls a:hover  { fill: #000; color: #000; }
.infographic-controls svg, .infographic-controls span {
	width: auto;
	height: 18px;
	margin: 0px;
	padding: 0px 5px;
}
.infographic-controls span {
	padding: 0px 8px;
}
.infographic-controls a {
	display: flex;
	align-content: center;
	margin-left: auto;
	border-left: 1px #000 solid;
	padding-left: 0.3rem;
	padding-right: 0.6rem;
	color: #000;
	text-decoration: none;
}
.infographic-controls a svg {
	height: 16px;
	margin-top: 2px;
}
.bg-black .infographic-controls a {
	color: #FFF;
	border-color: #FFF;
}
.infographic-controls a:hover {
	background-color: #000;
	color: #FFF;
}
.bg-teal .infographic-controls a:hover { color: #45bea8; }
.bg-white .infographic-controls a:hover { color: #ffffff; }
.bg-red .infographic-controls a:hover { color: #ec3928; }
.bg-orange .infographic-controls a:hover { color: #ee9425; }
.bg-black .infographic-controls a:hover { background-color: #FFF; color: #000; }


/* TIMELINE */
.timeline {
	width: auto;
	display: flex;
	border-top: #FFF 10px solid;
	padding-top: 2rem;
	margin-top: 4px;
}
.t-item, .t-intro {
	width: 600px;
	width: 50vw;
	margin-right: 2rem;
	display: inline-block;
	vertical-align: top;
}
.t-image, .t-image-blank {
	width: 40%;
	margin: 0% 5%;
	min-height: 50px;
	display: inline-block;
	margin-top: 0px;
	float: left;
}
.t-text {
	display: inline-block;
	width: 50%;
	float: left;
}


/* ---------- ERROR PAGE ---------- */
.error {
	width: 100%;
	height: 100%;
	height: 100vh;
	padding: 2rem;
	background-color: #45bea8;
	color: #FFF;
}
.home-link {
	color: #000;
}
.home-link h1 {
	margin-top: 2rem;
}

/* ============ RESPONSIVE ============ */

/* Desktop Medium */
@media only screen and (max-width: 1300px) {
	/* Home */
	.h-m-pages a {
		font-size: 8rem;
	}
	/* Main Page */
	.w1 > * {
		width: 400px; 
	}
	.w2 > * {
		width: 600px;
	}
	.w3 > * {
		width: 800px;
	}
	.w4 > * {
		width: 1000px;
	}
	.c-multi > * {
		width: 350px;
	}
	.imagegrid {
		width: 600px;
	}
	.t-item, .t-intro {
		width: 800px;
	}
}

/* Desktop Small */
@media only screen and (max-width: 1050px) {
	/* GENERAL */
	body {
		font-size: 1.7rem;
	}
	.h-m-pages a {
		font-size: 6rem;
	}
}

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

	/* GENERAL */
	html,body {
		height: auto;
		overflow-y: auto;
	}
	h1 { 
		font-size: 7rem;
		line-height: 1;
	}

	/* LANDING  */
	.h-landing button {
		font-size: 7rem;
		line-height: 1;
	}
	.h-l-arrow svg {
		height: 5.5rem;
	}
	.h-l-arrow {
		padding-bottom: 1rem;
	}
	.h-m-pages a {
		font-size: 5rem;
	}

	/* MAIN PAGE */
	.main-page {
		height: auto;
		padding-bottom: 4rem;
		border-bottom: 5px solid #000;
	}
	.bg-black.main-page {
		border-bottom-color: #FFF;
	}

	/* Header Section */
	.m-header {
		padding: 2rem 0rem 1rem;
	}
	.m-header h1 {
		width: 70%;
		margin-left: 15%;
		margin-bottom: 1rem;
	}
	.m-cross {
		right: 2rem;
		position: fixed;
		z-index: 10;
	}

	/* MAIN SECTION */
	.m-main { /* Horizontal scroll container */
		display: flex;
		flex-flow: column nowrap;
		overflow-x: auto;
		overflow-y: scroll; 
		height: auto;
		-webkit-overflow-scrolling: touch;
		line-height: 1.4;
		width: 100%;
		justify-content: center;
	}

	/* Grid and Layout */
	.w1, .w2, .c-multi, .m-block {
		width: 70%;
		align-self: center;
	}
	.w1 > *, .w2 > *, .w3 > *, .w4 > *, .c-multi > * {
		width: 100%;
		padding: 0px;
	}
	.c-multi, .c-single, .m-block {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		padding: 0px 0rem 0px 0rem;
		
		height: auto;
		writing-mode: horizontal-tb;
	}
	.c-single {
		margin-bottom: 1rem;
	}
	.c-multi > *, .c-single > * {
		writing-mode: horizontal-tb;
	}
	.c-multi > * {
		padding: 0px;
	}
	.c-single h3, .c-multi h3, .c-single h3:first-child, .c-multi h3:first-child {
		margin: 2rem 0rem 1rem;
	}
	.c-single p, .c-multi p {
		margin: 0.5rem 0px;
	}
	.c-single h2, .c-multi h2 {
		min-height: 1rem;
		margin-top: 2rem;
	}
	.c-single figure img, .c-multi figure img {
		width: 80%;
	}
	.c-single figure, .c-multi figure  {
		margin: 1rem 0px;
		width: 100%;
		text-align: center;
	}

	/* NEXT BUTTON */
	.m-footer {
		display: none;
	}

	/* Close Cross */
	.m-cross {	
		padding-top: 0.6rem;
	}
	.m-cross svg  {
		height: 5rem;
		font-size: 0px;
	}

	/* COMPONENTS */

	/* Video and Audio */
	.videoblock, .audioblock {
		margin: 1rem 0px;
	}

	/* Image Blocks */
	.bigimageblock {
		margin: 2rem 0rem;
	}

	/* Image Grid */
	.imagegrid {
		width: 70%;
		padding: 0px;
		margin-bottom: 1rem;
		align-self: center;
	}

	/* Links */
	.c-single a, .c-multi a {
		margin: 2rem 0px;
	}

	/* Infographic */
	.infographic-controls button {
		height: 33px;
	}

	/* Timeline */
	.timeline {
		width: 70%;
		align-self: center;
		height: auto;
		/*display: flex;*/
		flex-flow: column wrap;
		border-top: none;
		padding: 2rem 0rem 0rem;
		margin-top: 4px;
	}
	.t-item, .t-intro {
		width: 100%;
		margin-right: 0rem;
	}
	.t-item {
		text-align: center;
		margin-top: 2rem;
		padding-top: 2rem;
		border-top: 2px #FFF solid;
	}
	.t-image {
		width: 25%;
		min-height: 50px;
		display: inline-block;
		margin-top: 0px;
		margin: 0 auto 1rem;
		float: initial;
	}
	.t-image-blank {
		width: 0px;
		margin: 0px;
	}
	.t-text {
		width: 100%;
		text-align: left;
	}
	.t-text h1 {
		text-align: center;
	}
	.t-intro .t-text {
		width: 100%;
	}


}

/* Mobile */
@media only screen and (max-width: 600px) {

	/* GENERAL */
	h1 { 
		font-size: 5rem;
	}

	/* HOME LANDING */
	.h-landing {
		padding: 1rem 2rem;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 100%; /* fallback */
		height: 100vh;
	}
	.h-l-img svg {
		width: 70%;
	}
	.h-landing button {
		font-size: 5rem;
	}
	.h-l-arrow svg {
		height: 4rem;
	}
	.h-l-arrow {
		padding-bottom: 1rem;
	}

	/* HOME MAIN */
	.h-main {
		height: auto;
		min-height: 100vh;
		flex-flow: column nowrap;
		align-content: stretch;
	}
	/* Header Section */
	.h-m-header {
		padding: 1rem 2rem;
	}
	.h-m-contact {
		position: relative;
	}
	.contact-small {
		display: inline-block;
	}
	.contact-big {
		display: none;
	}
	.contact-big, .h-m-header a {
		padding-left: 0px;
	}
	.h-m-c-button {
		position: static;
		display: none;
		padding-left: 0rem;
		height: 100%;
	}
	/* Page Links Section */
	.h-m-pages {
		flex-grow: 1;
		flex-shrink: 0;
		align-content: stretch;
		height: auto;
		flex-flow: column nowrap;
	}
	.h-m-pages a {
		flex-grow: 1;
		flex-shrink: 0;
		width: 100%;
	}
	.h-m-pages a, .h-m-pages a:nth-child(odd), .h-m-pages a:nth-child(1), .h-m-pages a:nth-child(2)  {
		border: 1px solid #000;
		border-width: 0px 0px 1px 0px; 
	}
	.h-m-pages a:nth-child(odd) {
		padding-right: 2rem;
	}

	/* MAIN PAGES */
	/* Header*/
	.m-header {
		justify-content: center;
		flex-wrap: wrap;
		padding-top: 90px;
	}
	.m-header h1 {
		width: 100%;
		margin-left: 0px;
		padding-left: 2rem;
	}
	/* Cross */
	.m-cross {
		position: fixed;
		right: 0rem;
		z-index: 100;
		top: 0px;
		width: 100%;
		justify-content: center;
		padding: 1rem 0px;
		border-bottom: 1px solid;
		border-color: #000;
	}
	.bg-black .m-cross {
		border-color: #FFF;
	}
	.bg-teal .m-cross { background-color: #45bea8; }
	.bg-white .m-cross { background-color: #ffffff; }
	.bg-red .m-cross { background-color: #ec3928; }
	.bg-orange .m-cross { background-color: #ee9425; }
	.bg-black .m-cross { background-color: #050505; color: #FFF;}

	/* Main Section */
	.m-main {
		padding-bottom: 4rem;
	}
	.m-main h1 { 
		font-size: 5rem;
		line-height: 1;
		margin-bottom: 1rem;
		padding-top: 2rem;
	}
	/* Grid */
	.w1, .w2, .c-multi, .m-block {
		width: 100%;
	}
	.w1 > *, .w2 > *, .w3 > *, .w4 > *, .c-multi > *, .m-block {
		width: 100%;
		padding: 0px 1rem;
	}

	/* COMPONENTS */

	/* Image Grid */
	.imagegrid {
		width: 100%;
		align-self: center;
		margin-bottom: 1rem;
		padding: 0px 2rem;
	}

	/* Audio and Video */
	.plyr--video {
		padding: 0px;
	}
	.m-block.videoblock, .audioblock  {
		margin: 1rem 0px;
	}

	/* Timeline */
	.timeline {
		width: 100%;
		align-self: center;
		height: auto;
		flex-flow: column wrap;
		border-top: none;
		padding: 2rem 2rem 0rem;
		margin-top: 4px;
	}
	.t-image {
		width: 50%;
		margin-bottom: 0.5rem;
	}
	.t-text h1 {
		padding-top: 0.5rem;
		/*font-size: 6rem;*/
	}
}

@media only screen and (max-width: 350px) {
	.h-m-pages a {
		font-size: 4rem;
	}
}