@charset "UTF-8";
/* CSS Document */

/* ------------------------------------------------------- */
/* ---------------- Font imports ------------------------- */
/* ------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ------------------------------------------------------- */
/* --------------- Quick colours ------------------------- */
/* ------------------------------------------------------- */

body {
	--c3-color-cyan: #00ADEF;
	--c3-color-magenta: #EC008B;
}

/* -------- Global Styles ------------ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body, html { 
	color: white;
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	height: 100%;
}

div#c3_div_scroll_container {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}

/* -------- Header ------------ */

img#c3_img_sticky_logo {
	display: block;
	position: sticky;
	left: 20px;
	top: 20px;
	z-index: 10;
	width: 20vw;
	height: auto;
}

div#c3_div_scroll_container header {
	
	display: grid;
	position: absolute;
	top: 0px;
	left: calc(50% - (100vh / 5));
	width: 50%;
	height: 50dvh;
	z-index: 5;
	place-items: center;
	
	h1 {
		font-size: 4vw;
        font-weight: 200;
        margin-bottom: 1vw;
	}
	
	p {
		font-size: 2.75vh;
		line-height: 3.75vh;
		font-weight: 200;
		width: 75%;
	}
}
 
/* -------- Scroll Jacker ------------ */

canvas {
	width: 40vw;
	height: auto;
	display: block;
	margin: 0 auto;
	background-color: transparent;
	mix-blend-mode: overlay;
}

div#c3_div_scroller {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 850.25dvh;
}

div#c3_div_dna_container {
	display: block;
	position: sticky;
	top: 0px;
	left: 0px;
	z-index: 2;
}

/* -------- Year Articles ------------ */

section {
	display: block;
	position: absolute;
	overflow: visible;
	top: 50dvh;
	left: 50%;
	width: 50%;
	height: calc(100% - 100dvh);
	z-index: 1;
	
	article {
		
		display: block;
		position: absolute;
		overflow: visible;
		padding-top: 5px;
		top: 0;
		left: 0;
		width: 95%;
		height: auto;
		padding-left: calc(100vh / 2 / 2);
		opacity: 0.2;
		transition: opacity 0.5s ease;
	
		&.c3_in_range {
			opacity: 1;
		}
	
		h2 {
			display: block;
            position: absolute;
            color: var(--c3-color-cyan);
            font-weight: 200;
            font-size: 2.5vh;
            width: 100%;
            height: auto;
            line-height: 3.5vh;
            padding-bottom: 3px;
            z-index: 1;
            bottom: 100%;
		}

		h2:after {
			content: "";
            display: block;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 1px;
            transition: left 0.25s ease, width 0.25s ease;
		}
		
		&.c3_hide_white h2 {
			padding-left: 3dvh;
		}
		
		&.c3_highlight h2 {
			color: #FFF200;
		}

		&.c3_locked_in h2:after {
			left: calc(100vh / -10);
			width: calc(100% + 100vh / 10);
			background-image: linear-gradient(to left, rgba(255,255,255,0.6) 97.5%, transparent);
		}
		
		&.c3_locked_in.c3_odd_year h2:after {
			left: calc(100vh / 2 / -2);
			width: calc(100% + 100vh / 2 / 2);
			background-image: linear-gradient(to left, rgba(255,255,255,0.6), rgba(255,255,255,0.6));
		}

		h3 {
			font-weight: 400;
			font-size: 20px;
			color: var(--c3-color-cyan);
			margin-bottom: 5px;
		}

		p {
			display: block;
			position: relative;
			font-size: 1.75vh;
			line-height: 2.75vh;
			z-index: 1;
		}
		
		/* Inverted styles */
		&.c3_inverted {
			padding-top: 0px;
		}
		
		&.c3_inverted h2 {
			top: 0px;
			padding-top: 0px;
		}
		
		&.c3_inverted h2:after {
			top: -1px;
			bottom: auto;
		}
		
		&.c3_inverted p {
			display: block;
			height: auto;
			position: absolute;
			bottom: 0px;
			padding-bottom: 10px;
			z-index: 1;
		}
		
		img {
			display: block;
            position: absolute;
            top: -17.5vw;
            left: 0px;
            width: auto;
            height: 17.5vw;
            z-index: 0;
			transform: scale(0);
			transform-origin: bottom left;
			transition: transform 0.25s ease;
		}
		
		&.c3_locked_in img {
			transform: scale(1);
		}
		
		&.c3_inverted_image img {
			top: 0vh;
			z-index: 0;
		}

	}
	
	/* Active buttons */
	
	&#c3_section_buttons_global { z-index: 100; left: 0; }
	&#c3_section_buttons_carpmaels { z-index: 100; }
	
	& > a {
		display: block;
		position: absolute;
		overflow: hidden;
		font-size: 1.5dvh;
		font-weight: 700;
		color: white;
		left: calc(100dvh / 2 / 2);
		text-align: center;
		text-decoration: none;
		width: 2.25dvh;
		height: 2.25dvh;
		line-height: 2dvh;
		cursor: pointer;
		border-radius: 50%;
		border: solid 1px white;
		z-index: 1;
		opacity: 0.2;
		transition: opacity 0.5s ease;
	}
	
	& > a.c3_in_range {
		opacity: 1;
	}
	
	&#c3_section_buttons_global a {
		left: auto !important;
		right: calc(100vh / 2 / 2) !important;
	}
	
	&#c3_section_buttons_carpmaels p, &#c3_section_buttons_global p {
		display: none;
		position: absolute;
		font-size: 1.75vh;
		line-height: 2.75vh;
		top: 10px;
		left: calc(100vh / 2 / 2);
		background-color: rgba(0,0,0,0.75);
		border: solid 1px white;
		border-radius: 10px;
		padding: 10px;
		width: calc(80% - (100vh / 2 / 2));
		height: auto;
		z-index: 2;
	}
	
	&#c3_section_buttons_global p {
		left: auto;
		right: calc(100vh / 2 / 2);
		
	}
	
	/* Global section overrides */
	
	&#c3_section_events_global {
		left: 0px;
	}
	
	&#c3_section_events_global article {
		left: auto;
		right: 0;
		width: 95%;
		padding-left: 0;
		padding-right: calc(100vh / 2 / 2);
		text-align: right;
	}
	
	&#c3_section_events_global h2 {
		color: var(--c3-color-magenta);
		right: calc(100vh / 2 / 2);
	}
	
	&#c3_section_events_global article.c3_hide_white h2 {
		padding-right: 3dvh;
	}
	
	&#c3_section_events_global h3 {
		color: var(--c3-color-magenta);
	}
	
	&#c3_section_events_global .c3_locked_in h2:after {
		left: 0;
		width: calc(100% + 100vh / 10);
	}

	&#c3_section_events_global .c3_locked_in.c3_odd_year h2:after {
		left: 0;
		width: calc(100% + 100vh / 2 / 2);
	}
	
	/* Carpmaels overrides */
	&#c3_section_events_carpmaels img {
		left: auto;
		right: 0px;
		transform-origin: bottom right;
	}
	
	/* Source and attribution overrides */
	small {
		display: block;
		position: relative;
		font-size: 1vh;
		line-height: 1.5vh;
		margin-top: 1.5vh;
	}
	
	small a {
		color: white;
	}
}

/* -------- Video BG ------------ */

div#c3_div_video_full_screen {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	video {
		object-fit: cover;
		object-position: center;
		width: 100%;
        height: 100%;
	}
}

/* -------- Scroll locking ------------ */

div#c3_div_scroll_lock {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 3;
}

/*
section article:nth-child(1) { top: 0%; }
section article:nth-child(2) { top: 50%; }
section article:nth-child(3) { top: 100%; }
*/

/* ------------------------------------------------------- */
/* ------------------- Responsives ----------------------- */
/* ------------------------------------------------------- */

@media only screen and (max-width: 900px) {
	
	img#c3_img_sticky_logo {
		position: absolute;
		left: calc(50% - (100vh / 5));
		top: 20px;
		width: 50vw;
	}
	
	div#c3_div_scroll_container header {
		
		width: 75%;
		
		h1 {
			font-size: 6vw;
		}
		
		p {
			font-size: 14px;
            line-height: 20px;
            font-weight: 200;
            width: 75%;
		}
	}
    
	section {
		
		z-index: 10;
	
		&#c3_section_events_carpmaels {
			background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.75) 50%);
		}
		
		&#c3_section_events_global {
			background-image: linear-gradient(to right, rgba(0,0,0,0.75) 50%, transparent);
		}
		
		&#c3_section_events_global h2 {
			right: 0px !important;
			padding-right: calc(100vh / 16);
		}
		
		article {
			
			h2 {
				font-size: 2dvh;
				line-height: 2.5dvh;
			}
			
			padding-left: calc(100dvh / 16);
			
			&.c3_locked_in h2:after {
				display: block;
				left: calc(100dvh / -32);
				width: 100dvh;
				border: none !important;
				border-bottom: dotted 1px rgba(255,255,255,0.5) !important;
				background-image: none;
			}
			
			&.c3_locked_in.c3_odd_year h2:after {
				display: block;
				left: calc(100dvh / -16);
				width: calc(100% + (100dvh / 16));
				border: none !important;
				border-bottom: dotted 1px rgba(255,255,255,0.5) !important;
				background-image: none;
			}
			
			&.c3_hide_white h2 {
            	padding-left: 0px;
        	}
			
			img {
				display: none;
			}
			
			p {
				display: none !important;
			}
		}
		
		article:first-of-type h2 {
			padding-bottom: 20px !important;
		}
		
		&#c3_section_events_global article {
			padding-right: calc(100dvh / 16);
		}
		
		&#c3_section_events_global h2::after {
			left: calc(100vh / -8) !important;
		}
		
		&#c3_section_events_global .c3_locked_in.c3_odd_year h2:after {
			left: calc(100dvh / 2 / -2) !important;
			width: calc(100% + 100dvh / 2 / 2);
		}
		
		& > a {
			font-size: 0px;
			left: 0px;
			width: 100%;
			height: 20px;
			border: none;
			z-index: 1;
			background-color: rgba(255,0,0,0);
		}
		
		&#c3_section_buttons_global a {
			right: 0px !important;
		}

		
		&#c3_section_buttons_carpmaels p, &#c3_section_buttons_global p {
			left: 0px;
			width: 95%;
		}

		&#c3_section_buttons_global p {
			left: auto;
			right: 0px;
		}
		
		&#c3_section_events_global article.c3_hide_white h2 {
        	padding-right: calc(100vh / 16);
    	}
		
	}
	
	.c3_desktop_only { display: none; }
	
}

@media only screen and (max-width: 450px) {
	
	section {
		
		h2 {
			font-size: 3.25dvw !important;
            line-height: 3.5dvw !important;
		}
		
		&#c3_section_events_global h2 {
			padding-left: 10px !important;
		}
		
		&#c3_section_events_carpmaels h2 {
			padding-right: calc(100dvh / 16) !important;
		}
	
	}
	
}