/**
 *	Theme Name: MTC WP Theme
 *	Theme URI: https://www.mathematic.tv
 *	Author: Mathematic Studio
 *	Author URI: https://www.mathematic.tv
 *	Description: New 2022 theme for use with new data structures and ACFs
 *	Version: 1.0
 *	License:
 *	License URI:
 *	Tags:
 *	Text Domain:
 */

@import url('library/css/video-js.css'); /* default styles for video.js player */



/*

d8888b. d88888b .d8888. d88888b d888888b 
88  `8D 88'     88'  YP 88'     `~~88~~' 
88oobY' 88ooooo `8bo.   88ooooo    88    
88`8b   88~~~~~   `Y8b. 88~~~~~    88    
88 `88. 88.     db   8D 88.        88    
88   YD Y88888P `8888Y' Y88888P    YP    

*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;

	font-size: 100%;
	line-height: 100%;
	font: inherit;
	vertical-align: baseline;

	transition: 0.25s;
	scroll-behavior: smooth;
}

body {
	font-family: 'avalon-web', Helvetica, Arial;
	background-color: var(--clr-black);
	color: var(--clr-light);
	font-size: var(--font-size);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	overflow-y: scroll;
	overflow-x: hidden;
}
body.inv {
	background-color: var(--clr-white);
	color: var(--clr-dark);
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

ol,ul {
	list-style: none;
}

blockquote,q {
	quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*

.d8888. d88888b d888888b d888888b d888888b d8b   db  d888b  .d8888. 
88'  YP 88'     `~~88~~' `~~88~~'   `88'   888o  88 88' Y8b 88'  YP 
`8bo.   88ooooo    88       88       88    88V8o 88 88      `8bo.   
  `Y8b. 88~~~~~    88       88       88    88 V8o88 88  ooo   `Y8b. 
db   8D 88.        88       88      .88.   88  V888 88. ~8~ db   8D 
`8888Y' Y88888P    YP       YP    Y888888P VP   V8P  Y888P  `8888Y' 

*/
/* desktop vars */
:root {
	--font-size: 1rem;

	/* side margin for big titles (slideshow, page title) and layout elements (mtc logo, menu) */
	--top-margin: 3rem;
	--side-margin: 5rem;

	/* top padding to escape navigation on mobile */
	--padding-top: 8rem;
	--padding-top-fullscreen: -8rem; /* used for slideshow and other content going under the navigation */

	--inter-section: 5rem; /* space between sections */

	--flex-gap: 2rem;

	--icon-size: 2rem;

	/* main headers */
	--h0-font-size: 8rem;
	--h1-font-size: 5rem;
	--h2-font-size: 3.5rem;
	--h3-font-size: 2rem;
	--h4-font-size: 1.5rem;

	/* content blocks variables */
	--block-padding: 1rem;
	--block-h1-font-size: 4rem;
	--block-h2-font-size: 3rem;
	--block-h3-font-size: 1.5rem;
	--block-h4-font-size: 1.25rem;

	/* colors, we define blacks and whites so we can tweak them if needed */
	--clr-black: #000000;
	--clr-dark: #222222;
	--clr-medium: #888888;
	--clr-light: #EEEEEE;
	--clr-white: #ffffff;
	/* add a touch of color, we could set them via php as a theme option ? */
	--clr-accent1-a: #43cac3; /* left triangle */
	--clr-accent1-b: #df44a0; /* right triangle */
	--clr-accent1-mix: #3b3679; /* intersection */

	--clr-accent2-a: #e54509;
	--clr-accent2-b: #00dc9f;
	--clr-accent2-mix: #b2dd71;

	--clr-accent3-a: #5943ca;
	--clr-accent3-b: #dfa544;
	--clr-accent3-mix: #793564;

	/* we may need to define filters to change other black & white elements to accent colors */
}

/* tablet vars */
@media screen and (max-width: 60em) {
	:root {
		--top-margin: 2.5rem;
		--side-margin: 4rem;

		--h0-font-size: 6rem;
		--h1-font-size: 4rem;
		--h2-font-size: 3rem;
		--h3-font-size: 1.75rem;
		--h4-font-size: 1.5rem;

		--block-h1-font-size: 3rem;
		--block-h2-font-size: 2rem;
		--block-h3-font-size: 1.5rem;
		--block-h4-font-size: 1.25rem;
	}
}

/* mobile vars */
@media screen and (max-width: 35em) {
	:root {
		--top-margin: 1rem;
		--side-margin: 1rem;

		--padding-top: 4rem;
		--padding-top-fullscreen: -4rem;

		--inter-section: 3rem; /* space between sections */
		--flex-gap: 1rem;

		--h0-font-size: 5rem;
		--h1-font-size: 3rem;
		--h2-font-size: 2rem;
		--h3-font-size: 1.5rem;
		--h4-font-size: 1.25rem;

		--block-h1-font-size: 2.5rem;
		--block-h2-font-size: 1.75rem;
		--block-h3-font-size: 1.25rem;
		--block-h4-font-size: 1rem;
	}
}



/*

d88888b  .d88b.  d8b   db d888888b .d8888.      .d888b.       db   db d88888b  .d8b.  d8888b. d888888b d8b   db  d888b  .d8888. 
88'     .8P  Y8. 888o  88 `~~88~~' 88'  YP      8P   8D       88   88 88'     d8' `8b 88  `8D   `88'   888o  88 88' Y8b 88'  YP 
88ooo   88    88 88V8o 88    88    `8bo.        `Vb d8'       88ooo88 88ooooo 88ooo88 88   88    88    88V8o 88 88      `8bo.   
88~~~   88    88 88 V8o88    88      `Y8b.       d88C dD      88~~~88 88~~~~~ 88~~~88 88   88    88    88 V8o88 88  ooo   `Y8b. 
88      `8b  d8' 88  V888    88    db   8D      C8' d8D       88   88 88.     88   88 88  .8D   .88.   88  V888 88. ~8~ db   8D 
YP       `Y88P'  VP   V8P    YP    `8888Y'      `888P Yb      YP   YP Y88888P YP   YP Y8888D' Y888888P VP   V8P  Y888P  `8888Y' 

*/
@font-face {
	font-family: 'avalon-web';
	src: url('library/fonts/Avalon-ExtraLight-webfont.woff2') format('woff2'),url('library/fonts/Avalon-ExtraLight-webfont.woff') format('woff');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'avalon-web';
	src: url('library/fonts/Avalon-Book-webfont.woff2') format('woff2'),url('library/fonts/Avalon-Book-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'avalon-web';
	src: url('library/fonts/Avalon-Medium-webfont.woff2') format('woff2'),url('library/fonts/Avalon-Medium-webfont.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'avalon-web';
	src: url('library/fonts/Avalon-Bold-webfont.woff2') format('woff2'),url('library/fonts/Avalon-Bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

.h0,h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {
	text-rendering: optimizelegibility;
	color: var(--clr-white);
}
.h0.inv,h1.inv,.h1.inv,h2.inv,.h2.inv,h3.inv,.h3.inv,h4.inv,.h4.inv,h5.inv,.h5.inv {
	color: var(--clr-black);
}

.h0 {
	font-size: var(--h0-font-size);
	font-weight: bold;
	letter-spacing: -0.35rem;
	line-height: 85%;
	margin-left: -0.03em;
}
.h0.thin {
	margin-left: -0.065em;
}

h1,.h1 {
	font-size: var(--h1-font-size);
	font-weight: bold;
	letter-spacing: -0.25rem;
	line-height: 85%;
	text-indent: -0.03em;
}

h2,.h2 {
	font-size: var(--h2-font-size);
	line-height: 90%;
	font-weight: bold;
	letter-spacing: -0.05rem;
}

h3,.h3 {
	font-size: var(--h3-font-size);
	line-height: 95%;
	font-weight: bold;
	letter-spacing: -0.03rem;
}

h4,.h4 {
	font-size: var(--h4-font-size);
	line-height: 95%;
	font-weight: bold;
	letter-spacing: -0.02rem;
}

.block-h1 {
	font-size: var(--block-h1-font-size);
	font-weight: bold;
	letter-spacing: -0.25rem;
	line-height: 75%;
}

.block-h2 {
	font-size: var(--block-h2-font-size);
	line-height: 85%;
	font-weight: bold;
	letter-spacing: -0.05rem;
}

.block-h3 {
	font-size: var(--block-h3-font-size);
	line-height: 90%;
	font-weight: bold;
	letter-spacing: -0.02rem;
}

.block-h4 {
	font-size: var(--block-h4-font-size);
	line-height: 90%;
	font-weight: bold;
	letter-spacing: -0.02rem;
}

strong, .strong {
	font-weight: 700;
}

.thin {
	font-weight: 200;
}

.book {
	font-weight: 400;
}

.bold {
	font-weight: 700;
}

.label {
	color: var(--clr-medium);
}

.expo {
	font-size: 0.8em;
	vertical-align: super;
	color: var(--clr-medium);
}

.underline::after {
	content: '';
	display: block;
	height: 2px;
	background: var(--clr-white);
	width: 100%;
	position: absolute;
	bottom: 0;
}

.slash {
	display: inline-block;
	position: relative;
	height: var(--font-size);
}
.slash::after {
	content: '';
	display: inline-block;
	position: relative;
	vertical-align: bottom;
	height: 1.2em;
	aspect-ratio: 1;
	background: url('library/svg/mtc-icon-slash-white.svg');
	background-size: cover;
	margin-right: .2em;

	opacity: .75;
}
.slash.inv::after {
	background: url('library/svg/mtc-icon-slash-black.svg');
}

/* helps read white text on white images */
.shadow {
	/*filter: drop-shadow(0 0.2rem 0.2rem rgba(7, 35, 63, 0.5));*/
	filter: drop-shadow(0 0.1em 0.1em rgba(7, 35, 63, 0.5));
}

/* we may want to define inv in specific cases rather than a generic class, see links */
/*
.inv, .inv:after {
	filter: invert();
}
*/

/* used for blocks titles, with added delays for each span, defined in page-specific css file */
/* may need to rename it, and manage inverse/accents colors */
/* maybe change opacity instead of color ? */
.animated {
	position: relative;
	color: rgba(0,0,0,0);
	transition: 0.25s color;
	transition-delay: 0.25s;
}
.animated.inv {
	color: rgba(255,255,255,0);
}

.shown .animated {
	color: var(--clr-white); /* maybe use a page-specific defined variable (referencing settings variable) here ? */
}
.shown .animated.inv {
	color: var(--clr-black); /* maybe use a page-specific defined variable (referencing settings variable) here ? */
}

.animated::before {
	content: '';
	display: block;
	position: absolute;
	background: var(--clr-white);
	z-index: 1;

	bottom: 0;
	height: 50%;
	left: -1.5rem;
	width: calc(100% + 3rem);

	transform-origin: left;
	transform: translateZ(0) skew(-45deg) scaleX(0);
}
.animated.inv::before {
	background: var(--clr-black); /* maybe use a page-specific defined variable (referencing settings variable) here ? */
}

.shown .animated::before {
	animation: mask-slanted 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: none;
	animation-delay: 0s;
}

p:not(:last-child) {
	margin-bottom: 1rem;
}



/*

d888888b  .o88b.  .d88b.  d8b   db .d8888. 
  `88'   d8P  Y8 .8P  Y8. 888o  88 88'  YP 
   88    8P      88    88 88V8o 88 `8bo.   
   88    8b      88    88 88 V8o88   `Y8b. 
  .88.   Y8b  d8 `8b  d8' 88  V888 db   8D 
Y888888P  `Y88P'  `Y88P'  VP   V8P `8888Y' 

*/
 .icon {
	display: inline-block;
	overflow: hidden;
	color: rgba(0,0,0,0);

	width: var(--icon-size);
	height: var(--icon-size);
	aspect-ratio: 1;
}

/* Header */
.icon--logo-mathematic {
	background: url('library/svg/mtc-logo-white.svg') no-repeat;
	width: calc(var(--icon-size) * 8);
	aspect-ratio: 8.5;
}

.icon--logo-mathematic-black {
	background: url('library/svg/mtc-logo-black.svg') no-repeat;
	width: calc(var(--icon-size) * 8);
	aspect-ratio: 8.5;
}

@media screen and (max-width: 35em) {
	.icon--logo-mathematic {
		width: calc(var(--icon-size) * 6);
		/*height: calc(var(--icon-size) * 0.75);*/
		margin-top: calc(var(--icon-size) * 0.125);
		background-size: 100%;
		aspect-ratio: 8.5;
	}

	.icon--logo-mathematic-black {
		width: calc(var(--icon-size) * 6);
		/*height: calc(var(--icon-size) * 0.75);*/
		margin-top: calc(var(--icon-size) * 0.125);
		background-size: 100%;
		aspect-ratio: 8.5;
	}
}

.icon--menu-burger {
	background: url('library/svg/mtc-icon-burger-white.svg') no-repeat;
}

.icon--menu-burger-black {
	background: url('library/svg/mtc-icon-burger-black.svg') no-repeat;
}

.icon--search {
	background: url('library/svg/mtc-icon-search-white.svg') no-repeat;
}

.icon--search-black {
	background: url('library/svg/mtc-icon-search-black.svg') no-repeat;
}

/* Common */
.icon--close {
	background: url('library/svg/mtc-icon-close-white.svg') no-repeat;
}

.icon--close-black {
	background: url('library/svg/mtc-icon-close-black.svg') no-repeat;
}

.icon--check {
	background: url('library/svg/mtc-icon-check-white.svg') no-repeat;
}

.icon--check-black {
	background: url('library/svg/mtc-icon-check-black.svg') no-repeat;
}

.icon--slash {
	background: url('library/svg/mtc-icon-slash-white.svg') no-repeat;
}

.icon--slash-black {
	background: url('library/svg/mtc-icon-slash-black.svg') no-repeat;
}

.icon--arrow-up {
	background: url('library/svg/mtc-icon-arrow-white.svg') no-repeat;
}

.icon--arrow-up-black {
	background: url('library/svg/mtc-icon-arrow-black.svg') no-repeat;
}

.icon--arrow-down {
	background: url('library/svg/mtc-icon-arrow-white.svg') no-repeat;
	transform: rotate(180deg);
}

.icon--arrow-down-black {
	background: url('library/svg/mtc-icon-arrow-black.svg') no-repeat;
	transform: rotate(180deg);
}

.icon--arrow-left {
	background: url('library/svg/mtc-icon-arrow-white.svg') no-repeat;
	transform: rotate(270deg);
}

.icon--arrow-left-black {
	background: url('library/svg/mtc-icon-arrow-black.svg') no-repeat;
	transform: rotate(270deg);
}

.icon--arrow-right {
	background: url('library/svg/mtc-icon-arrow-white.svg') no-repeat;
	transform: rotate(90deg);
}

.icon--arrow-right-black {
	background: url('library/svg/mtc-icon-arrow-black.svg') no-repeat;
	transform: rotate(90deg);
}


.icon--scroll-down {
}

.icon--filter-activated {
}

.icon--filters {
}

.icon--filters-white {
}

/* Social */
.icon--facebook {
	background: url('library/svg/mtc-icon-facebook-black.svg') no-repeat;
}

.icon--facebook-white {
	background: url('library/svg/mtc-icon-facebook-white.svg') no-repeat;
}

.icon--instagram {
	background: url('library/svg/mtc-icon-instagram-black.svg') no-repeat;
}

.icon--instagram-white {
	background: url('library/svg/mtc-icon-instagram-white.svg') no-repeat;
}

.icon--linkedin {
	background: url('library/svg/mtc-icon-linkedin-black.svg') no-repeat;
}

.icon--linkedin-white {
	background: url('library/svg/mtc-icon-linkedin-white.svg') no-repeat;
}

.icon--twitter {
	background: url('library/svg/mtc-icon-twitter-black.svg') no-repeat;
}

.icon--twitter-white {
	background: url('library/svg/mtc-icon-twitter-white.svg') no-repeat;
}

.icon--vimeo {
	background: url('library/svg/mtc-icon-vimeo-black.svg') no-repeat;
}

.icon--vimeo-white {
	background: url('library/svg/mtc-icon-vimeo-white.svg') no-repeat;
}



/*

db   db d88888b  .d8b.  d8888b. d88888b d8888b.                  .88b  d88. d88888b d8b   db db    db 
88   88 88'     d8' `8b 88  `8D 88'     88  `8D        db        88'YbdP`88 88'     888o  88 88    88 
88ooo88 88ooooo 88ooo88 88   88 88ooooo 88oobY'        88        88  88  88 88ooooo 88V8o 88 88    88 
88~~~88 88~~~~~ 88~~~88 88   88 88~~~~~ 88`8b        C8888D      88  88  88 88~~~~~ 88 V8o88 88    88 
88   88 88.     88   88 88  .8D 88.     88 `88.        88        88  88  88 88.     88  V888 88b  d88 
YP   YP Y88888P YP   YP Y8888D' Y88888P 88   YD        VP        YP  YP  YP Y88888P VP   V8P ~Y8888P' 

/*
/* page fader for transitions */
#fader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;

	pointer-events: none;
	background: black;

	animation-duration: 500ms;
	animation-timing-function: ease-in-out;
}

@keyframes fade-out {
	from { opacity: 1 }
	to { opacity: 0 }
}

@keyframes fade-in {
	from { opacity: 0 }
	to { opacity: 1 }
}

#fader.fade-out {
	opacity: 0;
	animation-name: fade-out;
}

#fader.fade-in {
	opacity: 1;
	animation-name: fade-in;
}






/* logo, navigation, navigation / search overlay */

 /* nav bar */
 .header-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: calc(100vw - 2*var(--side-margin));
	height: var(--icon-size);
	margin: var(--top-margin) var(--side-margin) var(--top-margin) var(--side-margin);
}

.header-nav .icon--logo-mathematic, .header-nav .icon--logo-mathematic-black {
	position: absolute;
	top: 0;
	left: 0;
}

.header-nav .icon--menu-burger, .header-nav .icon--menu-burger-black {
	position: absolute;
	top: 0;
	right: 0;
}

/* MENU OVERLAY */
.header-overlay {
	position: fixed;
	z-index: 200;

	width: 100vw;
	height: 100vh;
	top: 0;
	left: 100vw;

	visibility: hidden;

	transition: 0.5s cubic-bezier(0.26, 1.04, 0.54, 1) 0s;
}

.header-overlay.active {
	left: 0;
	visibility: visible;
}

.header-overlay .container {
	position: absolute;
	z-index: 210;
	color: var(--clr-black);

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	align-items: left;

	width: 100%;
	height: 100%;
	padding: var(--top-margin) var(--side-margin) var(--top-margin) var(--side-margin);
	overflow-x: hidden;
	overflow-y: scroll;
}

.header-overlay.active .container {
	top: 0; /* reset scrolling */
}

.header-overlay .container section {
	position: relative;
	width: 100%;
	margin: var(--inter-section) 0 0 0;
}


/* search form */
#header-search form {
	width: 80%;
}


/* menus */
#nav-menu-main {
	width: 50%;
}

#nav-menu-universes {
	width: 50%;
}

#nav-menu-universes>ul {
	margin-bottom: 2rem;
}

@media screen and (max-width: 35em) {
	#nav-menu-main {
		width: 100%;
	}
	
	#nav-menu-universes {
		width: 100%;
		margin-top: 2rem;
		margin-bottom: 0;
	}
}

.header-overlay .container li {
	margin-bottom: -0.3rem;
}

#nav-menu-main li>a, #nav-menu-universes li>a {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	padding-right: 1.5em;
}

#nav-menu-main li>a::after, #nav-menu-universes li>a::after {
	top: 0.1em;
	height: calc(100% - 0.2em);
}

/* newsletter */
#header-newsletter form {
	width: calc(100% - 2 * var(--side-margin));
}

/* addresses */
#header-addresses li {
	flex-basis: 15rem;
}

/* info + social */
#header-social li {
	display: inline-block;
}


#header-links a {
	color: var(--clr-medium);
}

#header-links a:hover {
	color: var(--clr-black);
}

/* background elements */
.header-overlay .background--white {
	position: absolute;
	background-color: var(--clr-white);
	transform: skew(45deg);
	opacity: 1;

	width: calc((100vw + 100vh) * 2);
	height: 100%;
	left: 200vw;
	top: 0;

	transition: 0.5s cubic-bezier(0.26, 1.04, 0.54, 1);
}

.header-overlay .background--black {
	background: url('library/svg/mtc-triangle-black.svg') no-repeat;
	transform: rotate(180deg);
	opacity: 1;

	position: absolute;
	height: calc(100vw + 100vh);
	width: calc(100vw + 100vh);
	top: 0;
	left: 100vw;

	transition: 0.5s cubic-bezier(0.26, 1.04, 0.54, 1) 0.15s;
}

.header-overlay.active .background--white {
	left: calc((100vw + 100vh) / -2);
}

.header-overlay.active .background--black {
	left: 66.666vw;
}

/* close button */
.header-overlay .btn-close {
	position:absolute;
	z-index: 220;
	right: var(--side-margin);
	top: var(--top-margin);
}



/*

d88888b  .d88b.   .d88b.  d888888b d88888b d8888b. 
88'     .8P  Y8. .8P  Y8. `~~88~~' 88'     88  `8D 
88ooo   88    88 88    88    88    88ooooo 88oobY' 
88~~~   88    88 88    88    88    88~~~~~ 88`8b   
88      `8b  d8' `8b  d8'    88    88.     88 `88. 
YP       `Y88P'   `Y88P'     YP    Y88888P 88   YD 

*/
footer {
	position: relative;
	width: 100vw;
	bottom: 0;
	padding: 0 var(--side-margin) 4rem var(--side-margin);

	background-color: var(--clr-black);
}

footer>section {
	margin: 0;
}

/* logo */
#footer-logo {
	position: absolute;
	width: 8rem;
	height: 8rem;
	left: var(--side-margin);
	top: 1rem;
}

#footer-logo img {
	width: 100%;
	height: 100%;
	background: none;
}

/* addresses */
#footer-content {
	position: relative;
	width: calc(100% - 8rem - var(--flex-gap));
	top: var(--side-margin);
	left: calc(8rem + var(--flex-gap));
	padding-bottom: 3rem;
}

#footer-social {
	margin-bottom: var(--flex-gap);
}
#footer-social li {
	display: inline-block;
}

#footer-addresses li {
	flex-basis: 12rem;
}

#footer-links {
	margin: var(--flex-gap) 0 2rem 0;
	opacity: 0.5;
}

@media screen and (max-width: 35em) {
	footer {
	}

	#footer-logo {
		width: 6rem;
		height: 6rem;
	}

	#footer-content {
		width: calc(100% - 6rem - var(--flex-gap));
		left: calc(6rem + var(--flex-gap));
		top: calc(2 * var(--side-margin));
	}
}



/*

db       .d8b.  db    db  .d88b.  db    db d888888b 
88      d8' `8b `8b  d8' .8P  Y8. 88    88 `~~88~~' 
88      88ooo88  `8bd8'  88    88 88    88    88    
88      88~~~88    88    88    88 88    88    88    
88booo. 88   88    88    `8b  d8' 88b  d88    88    
Y88888P YP   YP    YP     `Y88P'  ~Y8888P'    YP    

*/
.loading {
	position:relative;
	width: 100%;
	min-height: 8rem;

	/*background: url('library/img/loading_pattern.gif') repeat;*/
}
/*
img {
	background: url('library/img/loading_pattern.gif') repeat;
}*/

.loading::before, .img::before, .block-img::before {
	content: '';
	display: block;
	position: absolute;

	width: 99%;
	height: 99%;
	left: 0.5%;
	top: 0.5%;

	/*background: var(--clr-medium) url('library/img/mtc_logo_halftone_alpha.gif') no-repeat center center;*/
	background: url('library/img/mtc_logo_halftone_alpha.gif') no-repeat center center,
				linear-gradient(to bottom right, rgba(0, 0, 0, 0), var(--clr-black)),
				url('library/img/loading_pattern_white.gif') repeat;
	background-size: 5rem auto, auto, auto;
	opacity: 0.4;
}

body {
	position: fixed;
	top: 0;
	width: 100vw;
	left: 50%;
	height: 100vh;
	transform: translateX(-50%);

	overflow-x: hidden;
	overflow-y: hidden;

	perspective: 10rem;
}

.scroll {
	position: fixed;

	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;

	touch-action: auto;
}

.noscroll {
	overflow-x: hidden;
	overflow-y: hidden !important;
	/*padding-right: 12px;*/

	touch-action: none;
}

.centered {
	position: relative;
	width: fit-content;
	left: 50%;
	transform: translateX(-50%);
}

main {
	width: 100vw;
	/*height: calc(100vh - var(--padding-top));*/
	padding-top: var(--padding-top);
	padding-bottom: 10rem;
}

main.fs {
	padding-top: 0;
	/*height: 100vh;*/
}

@media screen and (max-width: 35em) {
	main.fs {
		padding-top: var(--padding-top);
		/*height: calc(100vh - var(--padding-top));*/
	}
}

section {
	margin: 0 var(--side-margin) var(--inter-section) var(--side-margin);
	transform: translate3d(0,0,0); /* for 3d effect */
}

section.wide {
	margin: 0 0 var(--inter-section) 0;
	width:100%;
}
/* we assume 16/9 imgs, we may want to handle formats here too */
section.wide>img {
	width: 100%;
}

/* used for blocks lists */
.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	align-items: stretch;
	gap: var(--flex-gap);
}

/* general blocks styling */
.block {
	position: relative;
	/*overflow: hidden;*/

	flex-grow: 1;
	flex-basis: 20rem;
	/*aspect-ratio: 16/14; /* all blocks are 16/12 by default, but may be overriden if needed */

	opacity: 0;
	/*visibility: hidden;*/
}

.block.empty {
	aspect-ratio: unset;
	height: 0;
}

@media screen and (max-width: 35em) {
	.block {
		width: 100%;
		flex-basis: auto;
	}

	.block .block-info .h3 {
		font-size: var(--block-h2-font-size);
	}
}

/* link covers whole block */
.block a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* TODO : use additional format class to zoom in on 2.35 videos with black bars, or 1:1 prints etc */
.block-img {
	position: relative;
	top: 0;
	width: 100%;
	aspect-ratio: 16/9; /* all thumbnails are 16/9 by default, but may be overriden if needed */

	overflow: hidden; /* used for hover scale of cover images */
}

.block-img::before {
	content: '';
	display: block;
	position: absolute;

	width: 99%;
	height: 99%;
	left: 0.5%;
	top: 0.5%;

	/*background: var(--clr-medium) url('library/img/mtc_logo_halftone_alpha.gif') no-repeat center center;*/
	background: url('library/img/mtc_logo_halftone_alpha.gif') no-repeat center center,
				linear-gradient(to bottom right, rgba(0, 0, 0, 0), var(--clr-black)),
				url('library/img/loading_pattern_white.gif') repeat;
	background-size: 5rem auto, auto, auto;
	opacity: 0.4;
}

.block-img.format-2-35>* {
	transform: scale(135%); /* values to be refined */
}
.block-img.format-4-3>* {
	transform: scale(133.5%); /* values to be refined */
}

.block-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.block-img.cover-image img{
	transform: scale(100%);
	transition: 0.5s;
}

.active .block-img.cover-image img {
	transform: scale(105%);
}

.block.cb-image:hover .block-img.cover-image img {
	transform: scale(105%);
}
.block-img .rollover-video, .block-img .rollover-image {
	position: absolute;
	width: 100%;
	/*visibility: hidden;*/
	opacity: 0;
}

.block-info {
	position: relative;
	width: 100%;
	left: 0;
	font-size: .8rem;
	padding-top: 0.5rem;
}
/* no info on reels page */
#reels-general .block-info>span:first-child,
#reels-makingof .block-info>span:first-child {
	display: none;
}

.left .block-info {
	text-align: right;
	right: 0;
}
.center .block-info {
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
}
.right .block-info {
	text-align: left;
	left: 0;
}

.block-info span {
	position: relative;
}

.block-info span {
	transition-delay: 0.25s;
}

.block-info span:nth-of-type(2) {
	transition-delay: 0.5s;
}

.block-info span:nth-of-type(2)::after {
	animation-delay: 0.25s;
}

.block-info span:nth-of-type(3) {
	transition-delay: 0.75s;
}

.block-info span:nth-of-type(3)::after {
	animation-delay: 0.5s;
}



/*

 .o88b.  .d88b.  d8b   db d888888b d88888b d8b   db d888888b 
d8P  Y8 .8P  Y8. 888o  88 `~~88~~' 88'     888o  88 `~~88~~' 
8P      88    88 88V8o 88    88    88ooooo 88V8o 88    88    
8b      88    88 88 V8o88    88    88~~~~~ 88 V8o88    88    
Y8b  d8 `8b  d8' 88  V888    88    88.     88  V888    88    
 `Y88P'  `Y88P'  VP   V8P    YP    Y88888P VP   V8P    YP    

*/
.block.left {
	left: 0;
}
.block.center {
	left: 50%;
	transform: translateX(-50%);
}
.block.right {
	left: 100%;
	transform: translateX(-100%);
}
.block.full-width {
	width: 100%;
}
.block.half-width {
	width: calc(50% - var(--flex-gap) / 2);
}
.block.one-third {
	width: calc(33.333% - var(--flex-gap) * 0.666);
}
.block.two-thirds {
	width: calc(66.666% + var(--flex-gap) * 0.333);
}
.block.one-quarter {
	width: calc((100% - var(--flex-gap) * 3) * 0.25);
}
.block.three-quarters {
	/*width: calc(75% + var(--flex-gap) * 0.25);*/
	width: calc((100% - var(--flex-gap) * 3) * 0.75 + var(--flex-gap) * 2);
}
.content>.block {
	margin-top: var(--flex-gap);
}

.cb-text, .cb-video {
	aspect-ratio: unset;
}

.cb-text a {
	position: relative;
	width: unset;
	height: unset;
}

.cb-quote {
	padding: var(--inter-section) var(--side-margin) var(--inter-section) var(--side-margin);
	aspect-ratio: unset;
}

.cb-quote::before, .cb-quote::after {
	content: '';
	position: absolute;
	z-index: -1;

	width: calc(var(--side-margin) * 2);
	height: calc(var(--side-margin) * 2);

	background: url('library/svg/mtc-triangle-white.svg') no-repeat;
	opacity: 0.25;
}

@media screen and (max-width: 35em) {
	.cb-quote::before, .cb-quote::after {
		width: calc(var(--side-margin) * 4);
		height: calc(var(--side-margin) * 4);
	}

	.block.half-width, .block.one-third, .block.two-thirds, .block.one-quarter, .block.three-quarters {
		width: 100%;
	}
}

.cb-quote::before {
	left: 0;
	top: 0;
	transform: rotate(90deg);
}

.cb-quote::after {
	right: 0;
	bottom: 0;
	transform: rotate(-90deg);
}

.cb-quote .author {
	position: relative;
	width: fit-content;
	right: 0;
}

.cb-single-image {
	aspect-ratio: unset; /* unset ratio for vertical / custom format images */
}

.cb-single-image>img, .cb-single-image>video {
	width: 100%;
}
.cb-single-image>a {
	position: absolute;
	width: 100%;
	height: 100%;
}

.cb-images {
	aspect-ratio: unset;
}

.cb-images>.block {
	flex-grow: 1;
	flex-basis: 25em;
	/*max-width: 30em;*/
	aspect-ratio: unset;
}

.cb-images .block-img {
	position: relative;
	aspect-ratio: unset;
}

.cb-images .block-img img {
	position:relative;
}

.cbtm-member {
	flex-grow: 1;
	flex-basis: 10em;
	aspect-ratio: unset;
}

.cbtm-member .block-img {
	aspect-ratio: 2/3;
	margin-bottom: .5em;
}

.cbtm-member .block-img img {
	filter: grayscale(100%);
}

@media screen and (max-width: 35em) {
	.cbtm-member {
		flex-basis: 8em;
	}
}

/* grids */
.grid {
	display: grid;
	gap: var(--flex-gap);
	aspect-ratio: unset;
}

/* grid item */
.grid>div {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

	/*background-color: var(--clr-medium);*/
}

.grid>div>img, .grid>div>video {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;

	transition: 0.5s;
}
.grid>div:hover>img {
	transform: scale(105%);
}
.grid>div>span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	opacity: 0;
	transition: 0.5s;
}
.grid>div:hover>span {
	opacity: 1;
}
.grid>div>a {
	position: absolute;
	width: 100%;
	height: 100%;
}
.grid-1 {
	grid-template-columns: 1;
	grid-template-rows: 1;
}
.grid-1-1 {
	grid-column: 1 / 2;
  	grid-row: 1 / 2;
	object-fit: contain;
}
.grid-1-1>img, .grid-1-1>video {
	position: relative !important;
}
.grid-2, .grid-3a, .grid-3b, .grid-4b {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
}
.grid-2-1 {
	grid-column: 1 / 3;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-2-2 {
	grid-column: 3 / 5;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-3a-1 {
	grid-column: 1 / 4;
  	grid-row: 1 / 3;
	aspect-ratio: calc((3 - 2 * var(--flex-gap)) / (2 - var(--flex-gap)));
}
.grid-3a-2 {
	grid-column: 4 / 5;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-3a-3 {
	grid-column: 4 / 5;
  	grid-row: 2 / 3;
	aspect-ratio: 1;
}
.grid-3b-1 {
	grid-column: 1 / 3;
  	grid-row: 1 / 2;
	aspect-ratio: calc(2 + var(--flex-gap));
}
.grid-3b-2 {
	grid-column: 1 / 3;
  	grid-row: 2 / 3;
	aspect-ratio: calc(2 + var(--flex-gap));
}
.grid-3b-3 {
	grid-column: 3 / 5;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-4a {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
}
.grid-4a-1 {
	grid-column: 1 / 2;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4a-2 {
	grid-column: 2 / 3;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4a-3 {
	grid-column: 3 / 4;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4a-4 {
	grid-column: 4 / 5;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4b-1 {
	grid-column: 1 / 2;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4b-2 {
	grid-column: 1 / 2;
  	grid-row: 2 / 3;
	aspect-ratio: 1;
}
.grid-4b-3 {
	grid-column: 2 / 4;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-4b-4 {
	grid-column: 4 / 5;
  	grid-row: 1 / 3;
	aspect-ratio: calc(1 / (2 + var(--flex-gap)));
}
.grid-6 {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.grid-6-1 {
	grid-column: 1 / 3;
  	grid-row: 1 / 2;
	aspect-ratio: calc(2 + var(--flex-gap));
}
.grid-6-2 {
	grid-column: 2 / 3;
  	grid-row: 2 / 3;
	aspect-ratio: 1;
}
.grid-6-3 {
	grid-column: 3 / 5;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-6-4 {
	grid-column: 1 / 2;
  	grid-row: 2 / 4;
	aspect-ratio: calc(1 / (2 + var(--flex-gap)));
}
.grid-6-5 {
	grid-column: 2 / 4;
  	grid-row: 3 / 4;
	aspect-ratio: calc(2 + var(--flex-gap));
}
.grid-6-6 {
	grid-column: 4 / 5;
  	grid-row: 3 / 4;
	aspect-ratio: 1;
}



/*

d8888b. db    db d888888b d888888b  .d88b.  d8b   db .d8888. 
88  `8D 88    88 `~~88~~' `~~88~~' .8P  Y8. 888o  88 88'  YP 
88oooY' 88    88    88       88    88    88 88V8o 88 `8bo.   
88~~~b. 88    88    88       88    88    88 88 V8o88   `Y8b. 
88   8D 88b  d88    88       88    `8b  d8' 88  V888 db   8D 
Y8888P' ~Y8888P'    YP       YP     `Y88P'  VP   V8P `8888Y' 

*/
/* for use with icons */
.btn {
	cursor: pointer;
}



/*

db      d888888b d8b   db db   dD .d8888. 
88        `88'   888o  88 88 ,8P' 88'  YP 
88         88    88V8o 88 88,8P   `8bo.   
88         88    88 V8o88 88`8b     `Y8b. 
88booo.   .88.   88  V888 88 `88. db   8D 
Y88888P Y888888P VP   V8P YP   YD `8888Y' 

*/
a,a:visited {
	color: var(--clr-white);
	text-decoration: none;
	transition: color 0.5s cubic-bezier(0.26, 1.04, 0.54, 1);
	-webkit-tap-highlight-color: transparent;
}

a:hover,a:visited:hover {
	transition: 0s;
}

a:focus,a:visited:focus {
	outline: none;
}

a:active,a:visited:active {
	color: var(--clr-white);
}

/* default link : animated underline, no added side margins */
/* default color = white, invert = black */
.link {
	position: relative;
	display: inline-block;
	color: var(--clr-white);
	cursor: pointer;

	vertical-align: bottom;

	padding: 0 0.05em 0 0.05em;
	margin: 0 -0.05em 0 -0.05em;

	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1)
}

.link.inv {
	color: var(--clr-black);
}

.link::after {
	content: '';
	display: block;
	position: absolute;
	background: var(--clr-white);

	bottom: -0.05em;
	left: 0.075em;
	height: 0.075em; /* em is relative to element font-size */
	width: 0;
	/*z-index: -1;*/

	transform: skew(-45deg);
	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.link.thin::after {
	height: 0.03em;
}
.link.inv::after {
	background: var(--clr-black);
}

.link:hover:after, .link.active:after {
	width: calc(100% - 0.1em);
	transition: 0.4s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

/* link with animated slanted background */
.link-slanted {
	position: relative;
	display: inline-block;
	color: var(--clr-white);
	cursor: pointer;

	vertical-align: bottom;

	padding: 0 2em 0 2em;

	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1)
}

.link-slanted::after {
	content: '';
	display: block;
	position: absolute;
	background: var(--clr-white);

	top: 0;
	left: 0.875em;
	height: 100%;
	width: 0;
	z-index: -1;

	transform: skew(-45deg);
	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.link-slanted:hover, .link-slanted.active {
	color: var(--clr-black);
	transition: 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

.link-slanted:hover::after, .link-slanted.active::after {
	width: calc(100% - 2em);
	transition: 0.4s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

.link-slanted.inv {
	color: var(--clr-black);
}
/*
.link-slanted.inv::before {
	border-color: var(--clr-black);
}
*/
.link-slanted.inv::after {
	background: var(--clr-black);
}

.link-slanted.inv:hover, .link-slanted.inv.active {
	color: var(--clr-white);
}

/* link with animated slanted background and border */
.link-slanted-border {
	position: relative;
	display: inline-block;
	color: var(--clr-white);
	cursor: pointer;

	vertical-align: bottom;

	padding: 0 2em 0 2em;
	margin: 0 1em 0 1em;

	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1)
}

.link-slanted-border::before {
	content: '';
	display: block;
	position: absolute;
	border: 0.05em solid var(--clr-medium);

	top: 0.025em;
	left: 0;
	height: 90%;
	right: 0;
	z-index: -1;

	transform: skew(-45deg);
	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.link-slanted-border::after {
	content: '';
	display: block;
	position: absolute;
	background: var(--clr-white);

	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	z-index: -1;

	transform: skew(-45deg);
	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.link-slanted-border:hover, .link-slanted-border.active {
	color: var(--clr-black);
	transition: 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

.link-slanted-border:hover::after, .link-slanted-border.active::after {
	width: calc(100%);
	transition: 0.4s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

.link-slanted-border.inv {
	color: var(--clr-black);
}
/*
.link-slanted-border.inv::before {
	border-color: var(--clr-black);
}
*/
.link-slanted-border.inv::after {
	background: var(--clr-black);
}

.link-slanted-border.inv:hover, .link-slanted-border.inv.active {
	color: var(--clr-white);
}


/* link with animated slanted background, left justified/cropped */
.link-slanted-left {
	position: relative;
	display: inline-block;
	color: var(--clr-white);
	cursor: pointer;

	vertical-align: bottom;

	padding-left: 0.5em;
	padding-right: 1.5em;
	margin-left: -0.5em;
	margin-right: 0;
	z-index: 20;

	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1)
}

.link-slanted-left::after {
	content: '';
	display: block;
	position: absolute;

	/*background: var(--clr-white);*/
	background-image: linear-gradient(45deg, var(--clr-white) 50%, rgba(0,0,0,0) 50%);
	background-size: 200% 200%;
	background-position: 100% 0%;

	top: 0;
	/*left: calc(-100% - 1em);*/
	left:0;
	height: 100%;
	width: 100%;
	z-index: -1;

	/*transform: skew(45deg);*/
	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.link-slanted-left:hover,.link-slanted-left.active {
	color: var(--clr-black);
	transition: 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98);
	margin-left: 0;
	margin-right: -0.5em;
}

.link-slanted-left:hover::after, .link-slanted-left.active::after {
	background-position: 0% 0%;
	/*left: -1em;*/
	transition: 0.4s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

.link-slanted-left.inv {
	color: var(--clr-black);
}

.link-slanted-left.inv::after {
	background-image: linear-gradient(45deg, var(--clr-black) 50%, rgba(0,0,0,0) 50%);
}

.link-slanted-left.inv:hover, .link-slanted-left.inv.active {
	color:var(--clr-white);
}

/* hidden by default */
.more {
	opacity: 0;
	visibility: hidden;
	margin-top: var(--inter-section);

	font-size: var(--h4-font-size);
	font-weight: 400;
}


.disabled {
	opacity: 0.3 !important;
	pointer-events: none;
}



/*

d888888b d8b   db d8888b. db    db d888888b .d8888. 
  `88'   888o  88 88  `8D 88    88 `~~88~~' 88'  YP 
   88    88V8o 88 88oodD' 88    88    88    `8bo.   
   88    88 V8o88 88~~~   88    88    88      `Y8b. 
  .88.   88  V888 88      88b  d88    88    db   8D 
Y888888P VP   V8P 88      ~Y8888P'    YP    `8888Y' 

*/
input[type='text'],input[type='password'],input[type='datetime'],input[type='datetime-local'],input[type='date'],input[type='month'],input[type='time'],input[type='week'],input[type='number'],input[type='email'],input[type='url'],input[type='search'],input[type='tel'],input[type='color'],select,textarea {
	display: block;
	font-family: 'avalon-web', Helvetica, Arial;
	font-size: 100%;
	font-weight: normal;
	color: var(--clr-white);
	border: none;
	margin: 0;
	padding: 0;
	position: relative;
	transition: color, background 0.2s ease-out;
	background: transparent;
}

input[type='text']:focus,input[type='text']:active,input[type='password']:focus,input[type='password']:active,input[type='datetime']:focus,input[type='datetime']:active,input[type='datetime-local']:focus,input[type='datetime-local']:active,input[type='date']:focus,input[type='date']:active,input[type='month']:focus,input[type='month']:active,input[type='time']:focus,input[type='time']:active,input[type='week']:focus,input[type='week']:active,input[type='number']:focus,input[type='number']:active,input[type='email']:focus,input[type='email']:active,input[type='url']:focus,input[type='url']:active,input[type='search']:focus,input[type='search']:active,input[type='tel']:focus,input[type='tel']:active,input[type='color']:focus,input[type='color']:active,select:focus,select:active,textarea:focus,textarea:active {
	outline:none
}

input[type=checkbox] {
	display:none
}

input[type=checkbox]+label {
	-webkit-tap-highlight-color:transparent;
	display:inline-block;
	white-space:nowrap;
	position:relative;

	height: var(--font-size);

	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select: none;

	cursor: pointer;
	transition: transform 0.5s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

input[type=checkbox]+label:before {
	content:'';
	display:inline-block;
	vertical-align: baseline;
	height: 60%;
	aspect-ratio:1;
	background: url('library/svg/mtc-triangle-white.svg');
	background-size: cover;
	margin-right: calc(var(--font-size) * 0.2);

	transition: 0.5s;
	opacity: 0.5;
}

input[type=checkbox]+label:hover {
	transform: translate3d(3px, 0, 0);
}

input[type=checkbox]+label:hover:before {
	transform: translate3d(-3px, 0, 0);
}

input[type=checkbox]:checked+label:before {
	opacity: 1;
	filter: invert();
}

input[type='submit'] {
	cursor: pointer;
	border: none;
	outline: none;
	color: rgba(0,0,0,0);
	font-family:'avalon-web',Helvetica,Arial;
	position:relative;
}

/* specifics for simple sinlge line form, with only one input */
.inline-form {
	position: relative;
	overflow: hidden;
	max-width: 35rem;
	height: var(--icon-size);
}

.inline-form:after {
	content: '';
	display: block;
	position: absolute;
	background-color: var(--clr-black);
	top: 0;
	right: calc(var(--icon-size) * 0.5);
	height: 100%;
	width: 100%;
	z-index: -1;
	transform: translate3d(0, 0, 0) skew(45deg);
}

.inline-form input {
	display: inline-block;
	overflow: hidden;
	width: calc(100% - 0.5rem - var(--icon-size) * 2);
	height: 100%;
	font-size: 150%;
	padding-left: 0.5rem;
}


.inline-form input[type='submit'] {
	position: absolute;
	width: var(--icon-size);
	right: var(--icon-size);
}

::selection {
	background: var(--clr-medium);
}



/*

db    db d888888b d8888b. d88888b  .d88b.  d8888b. db       .d8b.  db    db d88888b d8888b. 
88    88   `88'   88  `8D 88'     .8P  Y8. 88  `8D 88      d8' `8b `8b  d8' 88'     88  `8D 
Y8    8P    88    88   88 88ooooo 88    88 88oodD' 88      88ooo88  `8bd8'  88ooooo 88oobY' 
`8b  d8'    88    88   88 88~~~~~ 88    88 88~~~   88      88~~~88    88    88~~~~~ 88`8b   
 `8bd8'    .88.   88  .8D 88.     `8b  d8' 88      88booo. 88   88    88    88.     88 `88. 
   YP    Y888888P Y8888D' Y88888P  `Y88P'  88      Y88888P YP   YP    YP    Y88888P 88   YD 

*/
/* video.js player overrides */
.vjs-mtc.video-js {
	/*color: #00ff00;*/
	overflow: hidden;

	width: 100%;
	max-width: 100%;
	height: auto;

	font: inherit;
	font-size: 0.8rem;
}

/* formats */
.vjs-mtc.video-js.format-2-35 .vjs-tech {
	height: auto;
	top: -14%; /* to be refined */
}
.vjs-mtc.video-js.format-2-35 .vjs-poster {
	height: auto;
	background-size: cover;
}

.vjs-mtc.video-js.format-4-3 .vjs-tech {
	width: 133.33%;
	left: 50%;
	transform: translateX(-50%);
}
.vjs-mtc.video-js.format-4-3 .vjs-poster {
	height: 100%;
	background-size: cover;
}

.vjs-mtc .vjs-big-play-button {
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.25);
  transition: all 0s;
}

.vjs-mtc .vjs-control-bar {
	background-color: transparent;
	width: calc(100% - var(--side-margin) * 2);
	left: var(--side-margin);
	right: var(--side-margin);
}

.vjs-mtc button:focus {
	outline: 0;
}

.video-js .vjs-time-control {
	font-size: 1.2em;
	line-height: 2.55em;
}

@media screen and (max-width: 35em) {
	.vjs-mtc.video-js {
		font-size: 1rem;
	}

	.vjs-mtc .vjs-control-bar {
		width: 100%;
		left: 0;
		right: 0;
	}
}



/*

.d8888. db      d888888b d8888b. d88888b .d8888. db   db  .d88b.  db   d8b   db 
88'  YP 88        `88'   88  `8D 88'     88'  YP 88   88 .8P  Y8. 88   I8I   88 
`8bo.   88         88    88   88 88ooooo `8bo.   88ooo88 88    88 88   I8I   88 
  `Y8b. 88         88    88   88 88~~~~~   `Y8b. 88~~~88 88    88 Y8   I8I   88 
db   8D 88booo.   .88.   88  .8D 88.     db   8D 88   88 `8b  d8' `8b d8'8b d8' 
`8888Y' Y88888P Y888888P Y8888D' Y88888P `8888Y' YP   YP  `Y88P'   `8b8' `8d8'  

*/
.slideshow {
	position: relative;
	margin: 0 0 var(--inter-section) 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	max-height: 75vw;
	user-select: none;

	overflow: hidden;
}

/* diagonal line */
.slideshow::before {
	content: "";
	position: absolute;
	z-index: 2;
	display: block;
	height: 100%;
	top: 0;
	left: 50%;
	width: 1px;
	background:rgba(255,255,255,0.4);
	transform: skew(45deg);
	/*opacity:0;*/
	transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.slideshow-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	font-size: 0;
	/*clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);*/
	z-index: 0;
}

/* slant to get 45° cut */
.slideshow-wrapper.slanted {
	left: -50%;
	transform: skew(45deg);
	z-index: 1;
}

/* slant back to get img right */
.slideshow-wrapper.slanted .slideshow-item {
	transform: skew(-45deg);
}

.slideshow-transition-a {
	transition: 0.75s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}
.slideshow-transition-b {
	transition: 0.5s cubic-bezier(0.16, 1.08, 0.38, 0.98) 250ms;
}

.slideshow-item {
	position: relative;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 18px;
	align-items: center;
	cursor: grab;

	overflow: hidden;
}

.slideshow-item::before {
	content: '';
	display: block;
	position: absolute;

	width: 99%;
	height: 99%;
	left: 0.5%;
	top: 0.5%;

	background: var(--clr-medium) url('library/img/mtc_logo_halftone_alpha.gif') no-repeat center center;
	background-size: 50% auto;
	opacity: 0.1;
}

/*
.slideshow-item a {
	width: 100%;
	height: 100%;
	position: absolute;
}
*/
.slideshow-item .block-img {
	position: absolute;
	width: unset;
	min-width: 100%;
	min-height: 100%;
}

/* pattern for video resolution */
.slideshow-item .block-img::after {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: url('library/img/lines-pattern.png') repeat;
	background-size: 16px;
	opacity: 0.5;
}

@media screen and (max-width: 60em) {
	.slideshow-item .block-img::after {
		display: none;
	}
}

.slideshow-item .info {
	user-select: none;
	white-space: normal;
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translate(0, -50%);
	display: inline-block;

	width: calc(100% - 2 * var(--side-margin));
}
/*
.slideshow-item .info h1 {
	font-size: 8rem;
}

.slideshow-item .info h2 {
	font-size: 5rem;
	font-weight: normal;
}
*/

.slideshow-item .info .slanted {
	clear: both;
	font-size: var(--block-h3-font-size);
	margin-top: 20px;
	display: inline-block;
}

.slideshow-item .info .slanted:before {
	background:#fff;
}

.slideshow-item .info--left {
	left: var(--side-margin);
}

.slideshow-item .info--left .h1--small,.slideshow .info--left .slanted {
	float: left;
}

.slideshow-item .info--center {
	text-align: center;
	left: 50%;
	transform: translate(-50%, -50%);
}

.slideshow-item .info--right {
	text-align: right;
	right: var(--side-margin);
}

.slideshow-item .info--right .h1--small,.slideshow .info--right .slanted {
	float: right;
}

.slideshow nav {
	position: absolute;
	bottom: var(--top-margin);
	left: var(--side-margin);
	width: calc(100% - 2 * var(--side-margin));
	z-index: 20;

	display: flex;
	align-items: space-between;
}

.slideshow nav>div {
	position: absolute;
	right: 0;
}

.slideshow .btn {
	transition: opacity 0.5s cubic-bezier(0.26, 1.04, 0.54, 1)
}

.slideshow .btn.hidden {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

.slideshow.shown:before {
	opacity: 1 !important;
}

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

	.slideshow .info .slanted {
		font-size: 14px;
		margin-top: 5px;
	}

	.slideshow .slideshow-wrapper .slideshow__block .container:after {
		transform-origin: 0 100%;
	}
}



/*

 .d8b.  d8b   db d888888b .88b  d88.  .d8b.  d888888b d888888b  .d88b.  d8b   db .d8888. 
d8' `8b 888o  88   `88'   88'YbdP`88 d8' `8b `~~88~~'   `88'   .8P  Y8. 888o  88 88'  YP 
88ooo88 88V8o 88    88    88  88  88 88ooo88    88       88    88    88 88V8o 88 `8bo.   
88~~~88 88 V8o88    88    88  88  88 88~~~88    88       88    88    88 88 V8o88   `Y8b. 
88   88 88  V888   .88.   88  88  88 88   88    88      .88.   `8b  d8' 88  V888 db   8D 
YP   YP VP   V8P Y888888P YP  YP  YP YP   YP    YP    Y888888P  `Y88P'  VP   V8P `8888Y' 

*/


@keyframes mask-slanted {
	0% {
		transform-origin: left;
		transform: translateZ(0) skew(-45deg) scaleX(0);
		animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
	}

	0.0001% {
		transform-origin: left;
	}

	50% {
		transform-origin: left;
		transform: translateZ(0) skew(-45deg) scaleX(1);
	}

	50.0001% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: translateZ(0) skew(-45deg) scaleX(0);
	}
}


@keyframes mask {
	0% {
		transform-origin: left;
		transform: scaleX(0) translateZ(0);
		animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
	}

	0.0001% {
		transform-origin: left;
	}

	50% {
		transform-origin: left;
		transform: scaleX(1) translateZ(0);
	}

	50.0001% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: scaleX(0) translateZ(0);
	}
}



.hidden {
	display: none;
}

.shown {
	transition: opacity 0.5s;
	opacity: 1 !important;
	visibility: visible !important;
}