@charset "UTF-8";

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-MediumOblique.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-MediumOblique.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-MediumOblique.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-MediumOblique.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-MediumOblique.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-MediumOblique.svg#GreycliffCF-MediumOblique') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-HeavyOblique.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-HeavyOblique.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-HeavyOblique.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-HeavyOblique.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-HeavyOblique.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-HeavyOblique.svg#GreycliffCF-HeavyOblique') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Light.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Light.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Light.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Light.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Light.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Light.svg#GreycliffCF-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Bold.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Bold.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Bold.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Bold.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Bold.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Bold.svg#GreycliffCF-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Medium.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Medium.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Medium.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Medium.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Medium.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Medium.svg#GreycliffCF-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBold.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBold.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBold.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBold.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBold.svg#GreycliffCF-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Heavy.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Heavy.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Heavy.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Heavy.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Heavy.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Heavy.svg#GreycliffCF-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Regular.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Regular.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Regular.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Regular.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Regular.svg#GreycliffCF-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLightOblique.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLightOblique.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLightOblique.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLightOblique.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLightOblique.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLightOblique.svg#GreycliffCF-ExtraLightOblique') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBold.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBold.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBold.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBold.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBold.svg#GreycliffCF-DemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-BoldOblique.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-BoldOblique.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-BoldOblique.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-BoldOblique.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-BoldOblique.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-BoldOblique.svg#GreycliffCF-BoldOblique') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-RegularOblique.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-RegularOblique.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-RegularOblique.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-RegularOblique.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-RegularOblique.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-RegularOblique.svg#GreycliffCF-RegularOblique') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Thin.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Thin.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Thin.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Thin.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Thin.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-Thin.svg#GreycliffCF-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF Thin Oblique';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ThinOblique.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ThinOblique.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ThinOblique.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ThinOblique.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ThinOblique.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ThinOblique.svg#GreycliffCF-ThinOblique') format('svg');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBoldOblique.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBoldOblique.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBoldOblique.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBoldOblique.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBoldOblique.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraBoldOblique.svg#GreycliffCF-ExtraBoldOblique') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-LightOblique.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-LightOblique.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-LightOblique.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-LightOblique.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-LightOblique.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-LightOblique.svg#GreycliffCF-LightOblique') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBoldOblique.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBoldOblique.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBoldOblique.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBoldOblique.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBoldOblique.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-DemiBoldOblique.svg#GreycliffCF-DemiBoldOblique') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLight.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLight.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLight.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLight.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/GreycliffCF-ExtraLight.svg#GreycliffCF-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Regular.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Regular.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Regular.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Regular.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Regular.svg#AbhayaLibre-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Medium.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Medium.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Medium.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Medium.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Medium.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Medium.svg#AbhayaLibre-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-SemiBold.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-SemiBold.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-SemiBold.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-SemiBold.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-SemiBold.svg#AbhayaLibre-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Bold.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Bold.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Bold.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Bold.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Bold.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-Bold.svg#AbhayaLibre-Bold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-ExtraBold.eot');
    src: url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-ExtraBold.woff2') format('woff2'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-ExtraBold.woff') format('woff'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-ExtraBold.ttf') format('truetype'),
        url('https://www.ilsagroup.com/timeline/fonts/AbhayaLibre-ExtraBold.svg#AbhayaLibre-ExtraBold') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* VARIABLES */

:root {
	--color-white: #fff;
	--color-black: #000;
	--color-green: #00190a;
	--color-header: #447c6b;
	--font-serif: 'Abhaya Libre';
	--font-sans: 'Greycliff CF';
}

* { outline: none; }

/* Common */

body {
	display: flex;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
	width: 100vw;
	padding: 0 0 0 0;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	background: var(--color-green);	
	font-weight: 100;	
}

body.nomove { overflow: hidden; }
html.nomove { overflow: hidden; }

.debug {
	display: block;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 3px 10px;
	color: #0f0;
	font-family: courier, courier new, serif;
	background: rgba(0,0,0,.8);
	border-bottom: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	line-height: 2em;
	z-index: 101;
	font-size: 12px;
}

.debug span, .debug em, .debug i { display: inline-block; overflow: auto; vertical-align: bottom; font-style: normal; }
.debug span { display: inline-block; overflow: auto; margin: 0 12px 0 0; color: var(--color-white); }
.centerh, .centerv { position: fixed; display: block; overflow: hidden; background-color: #f00; opacity: 0.3; z-index: 100; }
.centerh { height: 1px; width: 100vw; top: 50vh; left: 0; }
.centerv { width: 1px; height: 100vh; left: 50vw; top: 0; }

.hide { display: none; }

header {
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 15px 25px;
	background-color: var(--color-header);
	z-index: 100;
}

#logo {
	display: block;
	position: relative;
	overflow: hidden;
	float: left;
	width: auto;
	font-weight: 300;
}

#logo img { width: auto; height: 50px; display: block; overflow: hidden; position: relative; }

header #menu {
	display: block;
	overflow: hidden;
	position: relative;
	float: right;
	list-style: none;
	padding: 16px 0 12px 0;
	margin: 0;
}

header #menu li {
	display: inline-block;
	overflow: hidden;
	position: relative;
	padding-right: 25px;
	box-sizing: border-box;
}

header #menu li a {
	text-decoration: none;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 90%;
}

header #menu li a.active {
	color: var(--color-black);
	font-weight: bold;
}

header #menu li a:hover { color: var(--color-black); }


#mobilemenu {
	display: none;
	overflow: hidden;
	position: relative;
	width: 34px;
	height: 34px;
	float: right;
	margin: 10px 0;
	background-image: url('https://www.ilsagroup.com/timeline/img/menubutt-open.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#mobilemenu.active > div { background-color: var(--color-green); }

#menu.active { height: 100vh; margin-top: 10vh; }
#mobilemenu.active { background-image: url('https://www.ilsagroup.com/timeline/img/menubutt-close.png'); }

.audiolink {
	display: block;
	overflow: hidden;
	position: fixed;
	bottom: 40px;
	left: 40px;
	font-size: 200%;
	opacity: 1;
	color: var(--color-header);
	z-index: 506;
	cursor: pointer;
	caret-color: transparent;
}

.audiolink img { width: 32px; height: 32px; display: block; overflow: hidden; position: relative; }
.audiolink .off { display: none; }
.audiolink.active .off { display: block; }
.audiolink.active .on { display: none; }

/* PARALLAX */

#parallax {
	display: block;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	z-index: 1;
}

#back {
	display: block;
	overflow: hidden;
	position: absolute;
	width: 100%;
	max-width: 1280px;
	height: auto;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	z-index: 3;
}

#waves {
	display: block;
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	z-index: 5;
}
#back img, #waves img { width: 100%; height: auto; display: block; overflow: hidden; position: relative; }



/* TIMELINE */

#timeline {
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: 1280px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	z-index: 8;
}


#timeline figure#timepic {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
#timeline figure#timepic img { width: 100%; height: auto; display: block; overflow: hidden; position: relative; }


#timeline.animation.left { transform: translateX(30%); }
#timeline.animation.right { transform: translateX(-30%); }


#timeline > .decades {
	position: absolute;
	display: block;
	right: 20px;
	text-align: right;
	overflow: hidden;
	color: var(--color-header);
	transform-origin: center;
	font-size: 100%;
	margin: 0;
	z-index: 40;
	font-weight: 300;
	cursor: pointer;
}

.decades.animation { padding-top: 30px; color: #f00 !important; }


.year {
	position: absolute;
	display: block;	
	text-align: center;
	overflow: visible;
	color: var(--color-white);
	transform-origin: center;
	font-size: 10px;
	z-index: 10;
	cursor: pointer;
	width: 10%;
	left: 50%;
	transform: translateX(-50%);
}

.year figure {
	width: 60%;
	height: auto;
	display: block;
	overflow: hidden;
	position: relative;
	padding: 0;
	margin: 0 auto 5px auto;
	border-radius: 51%;
	border: 4px solid var(--color-white);
	box-sizing: border-box;
}

.year figure img { width: 100%; height: auto; display: block; overflow: hidden; position: relative; }

.year h1 {
	width: 100%;
	display: block;
	overflow: hidden;
	position: relative;
	padding: 0;
	margin: 0;
	font-size: 440%;
	font-weight: 900;
	font-family: var(--font-serif);
	line-height: 1em;
	z-index: 300;
}

.year h2 {
	width: 100%;
	display: block;
	overflow: hidden;
	position: relative;
	padding: 0;
	margin: 0;
	font-size: 90%;
	font-weight: normal;
	box-sizing: border-box;
	white-space: wrap;
}


.year.left::after, .year.right::before {
	content: '';
	width: 120%;
	height: 2px;
	border-radius: 2px;
	background-color: var(--color-white);
	position: absolute;
	top: 28%;
}

.year.left::after { right: -120%; }
.year.right::before { left: -120%; }


.year.animation.left { margin-left: -30% !important; }
.year.animation.right { margin-left: 30% !important; }
.year.animation.left::after { width: 200%; right: -202% !important; }
.year.animation.right::before { width: 200%; left: -202% !important; }


/* Details Background Animation */
.circle {
	width: 1px;
	height: 1px;
	display: none;
	overflow: hidden;
	position: fixed;
	top: calc(50% - 4px);
	left: calc(50% - 4px);
	transform: translate(-50%,-50%);
	padding: 0;
	border-radius: 51%;
	border: 4px solid var(--color-white);
	box-sizing: border-box;
	-moz-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	z-index: 300;
	background-color: rgba(0,25,10,1);
	opacity: 0;
}

.circle img { width: 100%; height: auto; display: block; overflow: hidden; position: relative; }

/* Position Years */

#d1950 { top: 9%; }
#d1960 { top: 16.5%; }
#d1970 { top: 20.5%; }
#d1980 { top: 33%; }
#d1990 { top: 36.5%; }
#d2000 { top: 44%; }
#d2010 { top: 57%; }
#d2020 { top: 70.5%; }
#beyond { top: 84%; }

#y1956 { top: 12%; margin-left: -22%; }
#y1972 { top: 21%; margin-left: -22%; }
#y1976 { top: 26%; margin-left: 22%; }
#y1979 { top: 30%; margin-left: -22%; }
#y1993 { top: 37%; margin-left: 22%; }
#y2001 { top: 45%; margin-left: -22%; }
#y2003 { top: 48%; margin-left: 22%; }
#y2005 { top: 50%; margin-left: -22%; }
#y2007 { top: 53%; margin-left: 22%; }
#y2009 { top: 55%; margin-left: -22%; }
#y2010 { top: 58%; margin-left: 22%; }
#y2014 { top: 60%; margin-left: -22%; }
#y2016 { top: 63%; margin-left: 22%; }
#y2017 { top: 65%; margin-left: -22%; }
#y2019 { top: 68%; margin-left: 22%; }
#y2020 { top: 71%; margin-left: -22%; }
#y2022 { top: 73%; margin-left: 22%; }



/* DETAILS */

#slideshow {
	display: none;
	position: fixed;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	padding: 0 0 0 0;
	color: var(--color-white);
	font-weight: 100;
	z-index: 500;
	top: 0;
	left: 0;
}

#dates {
	position: absolute;
	bottom: -100px;
	left: 0;
	width: calc(100vw * 18);
	height: 50px;
	overflow: hidden;
	z-index: 505;
	padding: 0;
	margin: 0;
}

#dates.active {
	bottom: 40px;
}

#dates li {
	list-style: none;
	float: left;
	width: 25vw;
	height: 50px;
	font-size: 24px;
	text-align: center;
	margin: 0;
	background: url('https://www.ilsagroup.com/timeline/img/nav.png') center center no-repeat;
	background-size: 100% 100%;
}

#dates a {
	width: 100%;
	height: 50px;
	font-size: 20px;
	font-weight: 500;
	line-height: 50px;
	padding: 9px 10px;
	color: var(--color-white);
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
}

#dates .active {
	width: 50vw;
}

#issues {
	display: block;
	position: relative;
	overflow: hidden;
	width: calc(100vw * 18);
	height: 768px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	z-index: 502;
}

#issues li.detail {
	display: block;
	overflow: hidden;
	position: relative;
	width: 100vw;
	height: 100vh;
	list-style: none;
	float: left;
}

#slideshow .closer {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 25px;
	left: 100px;	
	width: 52px;
	height: 52px;
	line-height: 1.2em;
	text-align: center;
	font-size: 40px;
	opacity: 0;
	border: 2px solid var(--color-white);
	border-radius: 51%;	
	z-index: 506;
	cursor: pointer;
}

#slideshow .overlay {
	display: block;
	position: absolute;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	padding: 0 0 0 0;
	z-index: 501;
	background: url('https://www.ilsagroup.com/timeline/img/backsheet.jpg') center center no-repeat;
	background-size: cover;
	opacity: 0;
	top: 0px;
	left: 0px;
}

#slideshow .over {
	position: absolute;
	display: none;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: url('https://www.ilsagroup.com/timeline/img/backsheet.jpg') center center no-repeat;
	background-size: cover;
	opacity: 1;
	z-index: 510;
}

.detail {
	padding: 0 0 0 0;
	color: var(--color-white);
	font-weight: 100;
	z-index: 500;
}

.detail h1 {
	display: block;
	overflow: hidden;
	position: absolute;
	font-family: var(--font-serif);
	font-size: 340px;
	top: -770px;
	left: -580px;
	width: 768px;
	height: 200px;
	font-weight: 700;
	font-size: 1600%;
	transform: rotate(-90deg) translate(0, -100%);
	transform-origin: 100% 0;
	text-align: right;
	line-height: 180px;
	opacity: 0.1;
	padding: 0;
	margin: 0;
	z-index: 502;
}

.detail h2 {
	width: 50vh;
	display: block;
	overflow: hidden;
	position: relative;
	font-size: 42px;
	font-weight: 400;
	text-align: left;
	padding: 0;
	line-height: 1em;
	z-index: 503;
	margin: 0 0 30px -900px;
	white-space: wrap;
}

.detail h3 {
	width: 50vh;
	display: block;
	overflow: hidden;
	position: relative;
	font-size: 18px;
	font-weight: 300;
	text-align: left;
	padding: 0;
	margin: 260px 0 30px -900px;
	line-height: 1em;
	text-transform: uppercase;
	z-index: 503;
	white-space: wrap;
}

.detail p {
	display: block;
	width: 50vh;
	max-height: 154px;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	font-size: 17px;
	font-weight: 300;
	text-align: left;
	padding: 0;
	margin: 0 0 0 -900px;
	line-height: 1.3em;
	z-index: 503;
}

.detail .video {
	display: block;
	width: 720px;
	height: 450px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	right: -730px;
	padding: 0;
	margin: 0;
	background-color: rgba(0,0,0,.8);
	border-left: 4px solid var(--color-white);
	border-bottom: 4px solid var(--color-white);
	border-radius: 0 0 0 200px;
	z-index: 510;
	-webkit-box-shadow: inset 1px -1px 5px 0px #000000; 
	box-shadow: inset 1px -1px 5px 0px #000000;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.detail.nopic .video { height: 450px; width: 640px; }



.extlink { font-size: 150%; position: absolute; overflow: hidden; display: block; right: -500px; bottom: 200px; text-decoration: none; color: var(--color-white); font-weight: 600; }
a.videolink { width: 42px; height: 42px; display: inline-block; position: relative; margin: 0 0 0 6px; vertical-align: middle; border: 2px solid var(--color-white); border-radius: 51%; background: url('https://www.ilsagroup.com/timeline/pages/play_white.png') center center no-repeat; background-size: 60%; }

.detail.nopic.novid h2,
.detail.nopic.novid h3,
.detail.nopic.novid p {
	width: 50%;
}

.detail .video .play {
	position: absolute;
	display: block;
	overflow: hidden;
	top: calc(50% - 10px);
	left: calc(50% + 10px);
	width: 58px;
	height: 58px;
	transform: translate(-50%,-50%);
	opacity: .8;
	z-index: 504;
}

#slideshow iframe {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%; 
	height: 100vh;
	z-index: 520;
}

.detail .video.active {
	width: 100%; 
	height: 100vh;
	border-left: 0px;
	border-radius: 0px;
}

#slideshow #player {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 100vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 520;
}

#slideshow .vidclose {
	display: none;
	overflow: hidden;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 58px;
	height: 58px;
	line-height: 1.3em;
	text-align: center;
	font-size: 42px;
	z-index: 530;
	opacity: 0;
	background-color: rgba(0,0,0,.8);
	border-radius: 51%;
	cursor: pointer;
}

.detail .video.active .play { opacity: 0 }
.detail .video .play img { width: 100%; height: auto; display: block; overflow: hidden; position: relative; }

#slideshow .vidclose.active { opacity: 1; }
#slideshow .closer.active { opacity: 1; }
#slideshow .overlay.active { opacity: 1; }

.detail.active h1 { top: -40px; }
.detail.active h2 { margin-left: 100px; }
.detail.active h3 { margin-left: 100px; }
.detail.active p { margin-left: 100px; }
.detail.active .video { right: 0px; }
.detail.active .extlink { right: 50px; }


.video.off .play { display: none !important; }



.detail h1 {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition-timing-function: ease-in;
}


#dates li,
.detail h3 {
	transition: all 0.6s;
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition-timing-function: ease-in;
}

.detail .video,
.detail h2 {
	transition: all 0.7s;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-o-transition: all 0.7s;
	transition-timing-function: ease-in;
}


/* FAST ANIMATION */
#menu li a {
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition-timing-function: ease-in;
}

/* MEDIUM ANIMATION */
.year,
.year::before,
.year::after,
.year,
.year .expand,
.year figure,
.year .line,
.year h1,
.year h2,
.decades,
.circle,
#logo,
#mobilemenu,
#menu {
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition-timing-function: ease-out;
}

/* SLOW ANIMATION */
#timeline,
#dates,
#slideshow .closer,
#slideshow .overlay,
.detail .extlink,
.detail p {
	transition: all 0.8s;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition-timing-function: ease-in;
}


/* RESPONSIVE DESIGN */
@media screen and (max-width: 1280px) {
	.year { width: 15%; font-size: 65% }
	.year h2 { font-size: 110% }
	#timeline figure#timepic img { width: 150%; height: auto; display: block; overflow: hidden; position: relative; margin-left: -25% }
	
	.year.left::after, .year.right::before { width: 51%; top: 22%; }
	.year.left::after { right: -43%; }
	.year.right::before { left: -43%; }
	.year.animation.left::after { width: 105%; right: -100% !important; }
	.year.animation.right::before { width: 105%; left: -100% !important; }
	
	#menu { height: 1px; width: 100%; padding-top: 0 !important; padding-bottom: 0 !important; }
	#menu li { display: block; width: 100%; padding: 20px 20px; font-weight: 400; text-align: center; font-size: 260%; }
	#mobilemenu { display: block; }
}

@media screen and (max-width: 1000px) {
	.year { width: 15%; font-size: 90% }
	.year h2 { font-size: 110% }
	#menu { font-size: 100%; }
	#logo img { width: auto; height: 90px; display: block; overflow: hidden; position: relative; }
	#mobilemenu { width: 60px; height: 60px; margin: 15px 0; }
	
	
	#issues { height: auto !important; }
	.detail { font-size: 140%; height: auto !important; }

	.detail h2 {
		width: 100% !important;
		box-sizing: border-box !important;
		margin: 0px 0 30px -100vw !important;
		padding: 0 40px !important;
	}

	.detail h3 {
		width: 100% !important;
		box-sizing: border-box !important;
		margin: 550px 0 30px -100vw !important;
		padding: 0 40px !important;
	}

	.detail p {
		word-break: break-all !important;
    	white-space: normal;
		width: 100% !important;
		box-sizing: border-box !important;
		height: auto !important;
		max-height: 70vh !important;
		margin: 0px 0 0 -100vw;
		padding: 0 40px !important;
		font-size: 120% !important;
	}
	.detail.active h2, .detail.active h3, .detail.active p { margin-left: 0px !important; }
	.detail.active .video { right: 0px !important; }
	.detail.active .extlink { right: 40px !important; top: 500px; bottom: auto; }
	
	#dates.active { bottom: 85px; }
	
	#slideshow .closer { top: 25px; left: 40px; }
	
}