/*
Theme Name: Artrebels
Theme URI: http://components.underscores.me/
Author: Frederik Kirkeskov
Author URI: https://www.frederikkirkeskov.dk
Description: Artrebels website 2020
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: artrebels
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Artrebels is created by the theme generator at http://components.underscores.me/, (C) 2015-2016 Automattic, Inc.
Components is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/
 
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

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

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

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

td,
th {
  padding: 0;
}

/*******************
 *                 *
 * Art Rebels 2020 *
 *                 *
 *******************/


@font-face {
	font-family: 'Scarla';
	src: url('assets/HTS_Scarla_Regular.otf');
	font-style: normal;
}

@font-face {
	font-family: 'Sword';
	src: url('assets/Sword_Regular04.otf');
	font-style: normal;
}



html {
	overscroll-behavior-x: contain;
	box-sizing: border-box;
}

*,
*:after,
*:before {
	box-sizing: border-box;
}
*::-webkit-scrollbar { display: none; }
body {
	background: #f4f4f4;
	margin: 0;
	font-family: 'Scarla', sans-serif;
}



/*--------------------------------------------------------------
## Typography
--------------------------------------------------------------*/

h1, h2, h3, h4, h5 {
	font-weight: 500;
	margin-top: 1em;
	margin-bottom: .25em;
}

h6 { font-size: 16px; font-weight: 500; margin-top: 0; margin-bottom: .5em; }

p, h6 {
	margin-top: 0;
	margin-bottom: .5em;
}


a { color: black; text-decoration: underline; }
a:hover { color: black; text-decoration: none; }

/*--------------------------------------------------------------
## Front page
--------------------------------------------------------------*/

#mutebutton {
	position: absolute;
	bottom: 1em;
	left: 1em;
	cursor: pointer;
	opacity: 1;
	transition: all .3s;
	z-index: 4;
	font-size: 20px;
}

#mutebutton.hidden {
	opacity: 0;
}

@media only screen and (max-width: 768px){
	#mutebutton {
		top: 1em;
		bottom: unset;
	}
}

.contentright {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 5;
	background: rgba(244,244,244,0);
	transition: all 1s;
}

body.admin-bar .contentright {
	top: 32px;
	height: calc(100% - 32px);
	bottom: 0;
}

body.admin-bar #loadingscreen {
	top: 32px !important;
}

.contentright.tabopen {
	background: rgba(244,244,244,0.8);
}

	#eyeslogo {
		position: absolute;
		top: 0;
		right: 97vw;
		z-index: 1001;
		height: 50px;
		opacity: 0;
		transition: opacity .5s;
		transition-delay: 0s;
	}



	#eyeslogo::after {
		content: "GO BACK";
		position: absolute;
		font-size: 14px;
		width: 60px;
		left: 0;
		top: 0;
		transform: rotate(-90deg) translate(-60px,0%);
		transform-origin: top left;
		opacity: 0;
		transition: opacity .2s;
		pointer-events: none;
	}

	.contentright.tabopen #eyeslogo { opacity: 1; pointer-events: auto; transition: all .5s; transition-delay: 1s; }

	#eyeslogo img {
		height: 100%;
		margin-right: 10px;
		margin-top: 5px;
		cursor: pointer;
		opacity: 1;
		transition: all .2s;
	}


	#eyeslogo:hover img {
		opacity: 0;
	}
	#eyeslogo:hover::after {
		opacity: 1;
	}


	.tabscontainer.beforeload { right: -100vw; }
	.tabscontainer {
		display: flex;
		height: 100%;
		position: absolute;
		top: 0;
		right: -96vw;
		z-index: 999;
		transition: all 1s;
		transition-delay: .2s;
		pointer-events: auto;
	}
	.tabopen .tabscontainer {
		right: 0;
	}
	.contentcol, .tabscol { float: left; position: relative; }
	.clearfix:before, .clearfix:after { display: table; content: " ";  }
	.clearfix:after { clear: both; }

	.tabscol {
		width: 50px;
		overflow: hidden;
	}

	.tabscol:after {
		position: absolute;
		content: "";
		/*background: red;*/
		top: -10px; left: 0;
		width: 100%;
		height: calc(100% + 20px);
		z-index: -1;
		box-shadow: inset -7px 0 9px -4px rgba(0,0,0,0.2);
	}

	.tabspreview { right: -88vw; }

	
	nav.tabs {
		position: relative;
		padding-left: 0;
		left: -26px;
		width: 20px;
		margin-top: 60px;
		padding-top: 50px;
		/*z-index: 9;*/
		box-sizing: content-box;
	}

	nav.tabs a {
		box-sizing: content-box;
		text-transform: uppercase;
		padding: 4px;
		display: block;
		transform: rotate(-90deg);
		width: 120px;
		margin-bottom: 100px;
		height: 30px;
		text-align: center;
		border-width: 0px;
		background: white;
		border-bottom-color: black;
		color: black;
		text-decoration: none;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: margin .2s;
		box-shadow: -4px 0px 10px rgba(0,0,0,0.3);
		font-size: 18px;
	}

	@media only screen and (min-width: 1600px) {
		#eyeslogo::after {
			height: 85px;
			font-size: 20px;
			transform: rotate(-90deg) translate(-85px,0%);
			width: 90px;
		}
		#eyeslogo {
			height: 75px;
		}
		.tabscol {
			width: 70px;
		}
		nav.tabs {
			margin-top: 110px;
			left: -40px;
		}
		nav.tabs a {
			height: 30px;
			width: 170px;
			padding: 8px 6px 12px 6px;
			font-size: 22px;
			margin-bottom: 160px;
		}
		section h2 { font-size: 18px !important;  line-height: 30px; }
		.projects_scroller main section .project_nextprojectbutton { font-size: 18px !important; }

		/*p { font-size: 18px; }*/
		h6 { font-size: 18px !important; }

		.projects_scroller main section .project_description div p {
			font-family: utopia-std, serif;
			font-size: 18px !important;
			line-height: 1.2em !important;
		}
	}

	nav.tabs a:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		content: "";
		transition: all .2s;
		box-shadow: inset 0 -15px 9px -7px rgba(0,0,0,0.2);
	}
	nav.tabs a.selected:after {
		background: none;
		box-shadow: none;
	}

	nav.tabs a:hover {
		margin-left: -4px;
	}

	nav.tabs a.selected:hover:after {
		box-shadow: none;
	}
	nav.tabs a:hover:after {
		/*box-shadow: inset 0 -12px 9px -7px rgba(0,0,0,0.7);*/
	}

	nav.tabs a.selected {
		/*border-bottom-color: white;
		border-bottom-width: 1px;*/
		/*box-shadow: none;*/
		z-index: 10;
	}

	.contentdrawer {
		width: 97vw;
		overflow-x: scroll;
		height: 100%;
		/*border: 1px black solid;*/
		/*padding: 5px;*/
		background: white;
		/*z-index: 9;*/
		/*box-shadow: -4px 0px 10px rgba(0,0,0,0.5);*/
	}

	.contentdrawer #maincontent {
		/*padding: 1em;*/
	    position: relative;
	    bottom: 0;
	    right: 0;
	    left: 0;
	    top: 0;
	    height: 100%;
	    width: 100%;
	}

	.contentdrawer #maincontent article {
		padding: 2em;
		width: 100%;
	}

	.contentdrawer #maincontent article.onlyfullscreenvideo {
		padding: 0;
	}

	@media only screen and (min-width: 769px) {
		.contentdrawer #maincontent article.onlyfullscreenvideo {
			padding-left: 1em;
		}
		.contentdrawer #maincontent article.onlyfullscreenvideo .fullscreenvimeo {
			height: 100vh;
		}

		body.admin-bar .contentdrawer #maincontent article.onlyfullscreenvideo .fullscreenvimeo {
			height: calc(100vh - 32px);
		}

		.contentdrawer #maincontent article.onlyfullscreenvideo .fullscreenvimeo div {
			height: 100%; 
		}
		.contentdrawer #maincontent article.onlyfullscreenvideo .fullscreenvimeo div iframe {
			height: 100vh !important;
			width: 177.7vh !important;
			left: 50% !important;
			transform: translate(-50%, 0);
		}
	}

	/**/

	.contentdrawer #maincontent .fullscreenvimeo {
		width: 100%;
	}



	.tabscontent {
		float: left;

	}





/*--------------------------------------------------------------
## Front page - manifesto and three js
--------------------------------------------------------------*/


.utopia { font-family: utopia-std, serif; line-height: 1.2em; }

.flexbox { display: flex; }
.flexbox .svgcontainer { width: 10%; margin-left: 1.5em; }
.flexbox .svgcontainer .fixed { position: sticky; height: 90vh; top: 0; padding: 1em; }

svg.svgdefinitions { display: none; }
svg.leftsvg {
	height: 90vh; width: auto;
}


svg.leftsvg:hover .scarla-outlines { fill: #000; }
svg.leftsvg:hover .sword-outlines { fill: none; }
.scarla-outlines{fill:none;}
.sword-outlines{fill:#000;}

.projects_intro svg { height: 100%; width: auto; margin-left: 1.5em; }


svg { width: 90%; }
svg.sword_tall { width: auto; height: 100%; transform: rotate(180deg); }
svg.sword_tall text { font-family: 'Sword'; }
svg.sword text { font-family: 'Sword'; }

svg.rotated {
	transform: rotate(-90deg) translate(0, -90vh);
    transform-origin: top right;
    width: 90vh;
    margin: 2em 1em;
}

#manifesto_overlay {
	position: fixed;
	left: 1em;
	top: 1em;
	/*min-height: 70%;*/
	
	pointer-events: none;
	background: rgba(255,255,255,1);
	z-index: 3;
	/*opacity: 0;*/
	transition: width .5s ease;
	border-radius: 1em;
	box-shadow: 0px 0px 13px rgba(0,0,0,0.4);
	transform-origin: top left;
	/*transform: scale(0);*/
	width: 0px;
	overflow: hidden;
}

#manifesto_overlay.show {
	/*transform: scale(1);*/
	width: 360px;
	opacity: 1;
}

@media only screen and (max-width: 768px) {
	#manifesto_overlay {
		z-index: 3;
		/*width: calc( 100vw - 2em );*/
	}
	#manifesto_overlay.show {
		width: calc( 100vw - 2em );
	}
	svg.rotated {
		transform: rotate(-90deg) translate(0, -80vh);
		width: 80vh;
	}
}


	#manifesto_overlay .manifesto_text {
		padding: 2em;
		display: none;
		font-size: 15px;
		width: 360px;
	}

		#manifesto_overlay .manifesto_text h2 {
			font-size: 20px;
			font-weight: normal;
			text-transform: uppercase;
			line-height: 20px;
		}
		#manifesto_overlay .manifesto_text p {
			font-size: 18px;
			line-height: 21px;
		}

		@media (max-width:768px) {
			#manifesto_overlay .manifesto_text p {
				font-size: 15px;
				line-height: 18px;
			}
		}







#manifesto_container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	cursor: url("assets/hoverarrow.png") 0 0, auto;
}

#manifesto_container h1 {
	font-family: 'Sword';
	font-size: 150px;
	font-weight: 300;
}



#three {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}



/*--------------------------------------------------------------
## Projects specific
--------------------------------------------------------------*/

.projects_intro {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em 1em;
	display: flex;
	/*margin-left: 2em;*/
	opacity: 1;
	z-index: 10;
}

.projects_intro.hidden {
	opacity: 0;
}


	.projects_intro_description {
		width: 30%;
		margin-left: 3em;
		display: flex;
		flex-direction: column;
	}
	.projects_intro_description p:first-child {
		margin-top: auto;
	}

.projects_scroller {
	position: absolute;
	top: 0;
	left: 1em;
	height: 100%;
	width: calc(100% - 1em);
	overflow: scroll;
	background: rgba(0,0,0,0);
	padding-left: 1em;
	/*box-shadow: 0 0 0 0;*/
	/*transition: box-shadow 0s linear 0s;*/
}
	.projects_scroller main {
		position: absolute;
		height: 100%;
		display: flex;
		/*transition: all .2s;*/
		min-width: 100%;
		/*padding-left: 1em;*/
		
	}
		/*.projects_scroller main.before_scroll { z-index: 1; }*/

		.projects_scroller main.before_scroll > :first-child {
			margin-left: auto;
		}

		

		.projects_scroller main section {
			margin: 0px;
			position: sticky;
			left: 0;
			/*transition: width .5s ease 0s, margin 0s ease 0s .5s;*/
			transition-timing-function: ease;
			transition-property: width, margin;
			transition-duration: .5s, .5s;
			transition-delay: 0s, 0s;
			width: 120px;
			z-index: 10;


			background-image: linear-gradient(white,white);
			background-repeat: no-repeat;
			background-position: 1em 0em;
		}

		.projects_scroller main section.active {
			width: calc(100% - 1em);
			/*width: 500px;*/
		}

		.projects_scroller main section.inactive {
			width: 0px !important;
		}

		.projects_scroller main.before_scroll section, main.before_scroll section .stickyproject  {
			width: 40px;
		}


			.projects_scroller main section .stickyproject {
				height: 100%;
				width: 120px;
				background: white;
				box-shadow: 0 0 13px 0 rgba(0,0,0,0.4);
				transition: width .5s ease 0s, margin .5s ease 0s;
				position: relative;
				overflow: hidden;
				margin-left: 0px;
			}

			.projects_scroller main section.active .stickyproject {
				width: 100%	;
				transition: width .5s ease 0s, margin .5s ease 0s;
			}

			.projects_scroller main section.inactive .stickyproject {
				width: 0px;
			}

			.projects_scroller main:not(.before_scroll) section:not(.active):not(.inactive):hover .stickyproject {
				width: 150px;
				margin-left: -30px;
				transition: width .5s ease 0s, margin .5s ease 0s;
			}

			.projects_scroller main > section.legacy:hover .stickyproject {
				margin-left: 0 !important;
			}

			.projects_scroller main section.legacy .project_description {
				opacity: 1;
			}

			.projects_scroller main:not(.before_scroll) section:not(.active):not(.inactive):first-child:hover .stickyproject {
				width: 120px;
				margin-left: 0px;
				transition: width .5s ease 0s, margin .5s ease 0s;
			}

				.projects_scroller main:not(.before_scroll) section:not(.active) h2 {
					/*height: 150px;*/
				}

				.projects_scroller main section h2 {
					position: absolute;
					top: 0;
					left: 0;
					/*width: 100vh;
					height: 50px;*/

					width: 50px;
					height: calc(100vh - ((97vw - 2em) * 0.39));

					margin: 0; padding: 0;

					/*text-align: right;*/
					text-transform: uppercase;
					font-size: 15px;
					font-weight: 300;

					/*transform: rotate(-90deg) translateY(-100vh);
					transform-origin: top right;*/

					cursor: pointer;
					z-index: 999;
				}

				.projects_scroller main section.legacy h2,
				.projects_scroller main section.active h2 {
					/*width: calc(100vh - ((97vw + 3em) * 0.39));
					transform: rotate(-90deg) translateY( calc(-100vh + ((97vw + 3em) * 0.39)) );*/
				}




				.projects_scroller main section h2 span {
					display: inline-block;
					/*margin-right: 10px;
					line-height: 35px;*/
					position: absolute;
					left: 12px;
				}

				@media (max-width:1440px) { 
						.projects_scroller main section h2 span {
							/*font-size: 10px;*/
						}
				}

				.projects_scroller main section h2 span:first-child {
					writing-mode: vertical-rl;
					transform: rotate(180deg);
					left: calc(12px - .25em);
    				line-height: 1.5em;
					bottom: 1em;
					top: 2em;
					margin-left: -2px;
					/*width: calc(100vh - ((97vw + 2em) * 0.39) - 50px);
					text-align: left;*/
				}

				.projects_scroller main section h2 span:last-child {
					top: .5em;
					/*height: 40px;
					transform: rotate(90deg);*/
				}

				
				.projects_scroller main section .closebutton {
					position: absolute;
					top: 10px;
					margin-top: .5em;
					right: 8px;
					color: black;
					opacity: 0;
					text-decoration: none;
					transition: opacity 0s ease 0s;
					pointer-events: none;
					width: 24px;
					height: 24px;
				}


				.projects_scroller main section .nextprojectcontainer {
					    position: absolute;
					    width: 25px;
					    height: calc(100vh - ((97vw - 2em) * 0.39));
					    top: 0;
					    right: 1.25em;

				}
				.projects_scroller main section .nextprojectcontainer .project_nextprojectbutton {
					position: absolute;
					writing-mode: vertical-rl;
    				transform: rotate(180deg);
    				bottom: 1em;
    				padding-right: 1em;
					
					margin: 0;
					
					text-decoration: none;
					text-align: left;
					text-transform: uppercase;
					font-weight: 300;
					font-size: 15px;
				
					cursor: url("assets/arrowsmall_thinner.png") 0 0, auto;
					z-index: 999;
					opacity: 0;
					transition: opacity 0s ease 0s;
					pointer-events: none;

				}

				.projects_scroller main section.active .project_nextprojectbutton,
				.projects_scroller main section.active .closebutton {
					opacity: 1;
					pointer-events: auto;
					transition: opacity .5s ease .2s;
				}


				.closebutton::after,
				.closebutton::before {
					content: " ";
					position: absolute;
					width: 24px;
					height: 1px;
					top: 0px;
					left: 0;
					background: black;

				}

				.closebutton::after {
					transform: rotate(-45deg);

				}

				.closebutton::before {
					transform: rotate(45deg);

				}

		.projects_scroller main section .project_description {
			opacity: 0;
			transition: all .2s;
		}

		.projects_scroller main section.active .project_description {
			opacity: 1;
		}

		.projects_scroller main section .project_description {
			position: absolute;
			left: 80px;
			top: 25px;
			width: calc(97vw - 1em - 80px);
			padding-top: 0em;
			padding-right: 150px;
			display: flex;
		}

		.project_description_year {
			width: 12% !important;
		}

		.projects_scroller main section .project_description div {
			margin-right: 20px;
			width: 15%;
		}

		.projects_scroller main section .project_description div p,
		.projects_scroller main section .project_description div h6 {
			margin-bottom: .5em;
			margin-top: .5em;
		}

		.projects_scroller main section .project_description div p {
			font-family: utopia-std, serif;
			font-size: 15px;
		}

		.projects_scroller main section .project_description div.project_description_text {
			width: 55%;
			padding-right: 4em;
		}

		/*.projects_scroller main section .project_description p:first-child {
			margin-top: 0;
		}*/



/*--------------------------------------------------------------
## Project image slider
--------------------------------------------------------------*/


.arslider {
	width: calc(97vw - 2em);
	height: calc((97vw - 2em) * 0.39);
	bottom: 0;
	position: absolute;
}

.arsliderwrapper {
	overflow: hidden;
	position: relative;
	background: white;
	z-index: 1;
	height: 100%;
}

.aritems {
	width: 20000px;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
}

.aritems.shifting {
	transition: left .2s ease-out;
}

.arslide {
	width: calc(97vw - 2em);
	height: 100%;
	float: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: all 1s;
	position: relative;
	background: white;
}

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

.arslide iframe {
	width: 100%;
	height: 100%;
}

.arslide p.imagecaption {
	position: absolute;
	width: calc(97vw - 2em);
	background: white;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: .5em .5em .5em 1em;
	text-align: right;
}

/* nav control */
.arslidercontrol {
	position: absolute;
	/*top: 0;
	width: 25%;
	height: 100%;
	background: none;*/
	top: -30px;
	height: 20px;
	width: 20px;
	cursor: pointer;
	z-index: 2;
}

section:not(.active) .arprev, section:not(.active) .arnext { display: none; }
section.legacy .arprev, section.legacy .arnext { display: block; }


.arprev {
	/*left: -40px;
	cursor: url("assets/arrowleft.svg") -100 0, w-resize;*/
	left: 47%;
	background-image: url("assets/simplearrowleft.svg");
	background-repeat: no-repeat;
}

.arnext {
	/*right: -40px;
	cursor: url("assets/arrowright.svg") 100 0, e-resize;*/
	right: 47%;
	background-image: url("assets/simplearrowright.svg");
	background-repeat: no-repeat;
}

.arprev:active,
.arnext:active {
	transform: scale(0.8);
}

@media (min-width:769px) {
	.arslide.oneline {
		background: black;
	}
	.arslide.oneline div {
		height: 100%;
		width: 70%;
		margin: 0 auto;
	}
	.arslide.oneline.cropvideo div {
		width: 100% !important;
	}
}
		
		


/*--------------------------------------------------------------
## Mobile
--------------------------------------------------------------*/







@media (max-width:768px) {
	p { font-size: 20px; }

	.hideonbig { display: block; }
	.hideonmobile { display: none; }
	.contentdrawer { width: 90vw; }
	.contentright {  }
	#eyeslogo { display: none !important;  }

	#manifesto_container {position: fixed; }
	.tabscontainer {
		right: 0;
		width: 100%;
		flex-direction: column;
		top: calc(100% - 55px);
		transition: all .5s;
		transition-delay: 0s;

	}
	.contentright.tabopen { background: none; }
	.tabscontainer.beforeload { right: 0; top: 100%; }
	.tabopen .tabscontainer { right: 0; top: 0; }
	.contentdrawer { width: 100%; height: calc(100vh - 45px); position: relative; border-top: 1em white solid; }
	.tabscol { position: relative; width: 100%; height: 45px; }
	nav.tabs {
		margin: 10px 0 0 0;
		padding: 0 10px;
		left: 0;
		width: 100%;
		display: flex;
		font-size: 12px;
		box-sizing: border-box;
	}
	nav.tabs a {
		transform: rotate(0deg);
		margin-bottom: 0;
		margin-left: 10px;
		padding: 5px 0px;
		width: 33%;
		height: 32px;
		box-sizing: border-box; 
		font-size: 16px;
	}
	nav.tabs a:first-child, nav.tabs a:first-child:hover { margin-left: 0px; }

	nav.tabs a:hover { margin-left: 10px; }

	.tabscol:after {
		/*box-shadow: inset -7px 0 9px -4px rgba(0,0,0,0.2);*/
		box-shadow: inset 0px -20px 10px -10px rgba(0,0,0,0.3);
		/* -4px 0px 10px rgba(0,0,0,0.3) */
	}
	
	.contentdrawer #maincontent article {
		padding: 1em;
	}
	.contentdrawer #maincontent article.onlyfullscreenvideo { position: absolute; height: 100%; display: flex; align-items: center;  }

	.projects_intro {
		position: relative;
		flex-direction: column;
		margin: 0;
		height: auto;
		opacity: 1;
		/*max-height: 500px;*/
		padding: 0em 1em;
		transition: max-height .5s ease 0s;
		overflow: hidden;
	}

	.projects_intro.hidden {
		/*height: 0px;*/
		max-height: 0px;
		transition: max-height .5s ease 0s;
		opacity: 1;
	}

	.projects_intro svg {
		min-height: 50px;
		height: 50px;
		z-index: 2;
		display: none;
	}


	.projects_scroller {
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		overflow: initial;
		padding-left: 0;
	}



	.projects_intro_description {
		margin: 0;
		width: 100%;
	}


	.projects_scroller main {
		flex-direction: column;
		padding-top: 1em;
		height: 100%;
		width: 100%;
	}

	.projects_scroller main > :first-child {
		margin-left: 0 !important;
	}

	.projects_scroller main.before_scroll section {
		width: 100% !important;
		height: 40px;
		transition: all .5s;
	}

	.projects_scroller main.before_scroll section.active, .projects_scroller main section.active {
		/*height: calc( 100vh - 40px - 1em );*/
	}

	.projects_scroller main section .stickyproject {
		width: 100% !important;
		margin-left: 0 !important;
	}


	main section .stickyproject {
		height: 100%;
		overflow: hidden;
	}

	main section.active .stickyproject {
		overflow: scroll;
	}

	.projects_scroller main section {
		width: 100% !important;
		height: 40px;
	}

	.projects_scroller main section.inactive {
		width: 100% !important;
		height: 0px;
		overflow: hidden;
	}

	.projects_scroller main section h2 {
		position: relative;
    	transform: none !important;
    	width: 100% !important;
    	height: 32px;
    	text-align: left;
    	padding: 0em 1em;
    	display: flex;
    	flex-direction: row-reverse;
    	justify-content: flex-end;

	}

	.projects_scroller main section h2 span {
		margin-right: 20px;
	}

	.projects_scroller main section h2 span:first-child {
		writing-mode: unset;
	    transform: none;
	    left: 32px;
	    line-height: unset;
	    bottom: 0;
	    top: .5em;
	    margin-left: 0px;
	}

	.projects_scroller main section h2 span:last-child {
					transform: rotate(0deg);
				}	

	.arprojectslider {
		/*display: none;*/
	}

	.projects_scroller main section .closebutton {
		top: 18px;
		line-height: 30px;
		margin-top: 0;
		width: 22px;
	}

	.closebutton::after,
	.closebutton::before {
		width: 22px;
	}

	.projects_scroller main section .project_nextprojectbutton {
		display: none;
	}


	.projects_scroller main section .project_description {
		left: 0;
		top: calc(40px + 66vw);
		padding: 1em;
		width: 100%;
		display: block;
	}

		.projects_scroller main section .project_description div p,
		h6 {
			font-size: 20px !important;
		}

		.projects_scroller main section .project_description div.project_description_text,
		.projects_scroller main section .project_description div.project_description_year
		 {
			width: 100%;
			padding-right: 0;
			display: block;
			margin-right: 0;
		}

		.projects_scroller main section .project_description div.project_description_year {
			margin-top: 1.5em;
		}

		.projects_scroller main section .project_description div.project_description_focus_areas,
		.projects_scroller main section .project_description div.project_description_collaborators
		 {
		 	display: block;
			width: 100%;
			margin-top: 1.5em;
		}

		.projects_scroller main section .project_description div.project_description_collaborators
		 {
		 	margin-bottom: 1.5em;
		 }


	.arslider {
		position: absolute;
		width: 100vw;
		top: 40px;
		bottom: unset;
		height: 66vw;
	}

	.arslide {
		width: 100vw;
	}

	.arprev,
	.arnext {
		display: none;
	}
	.arslide p.imagecaption {
		text-align: left;
		width: 100%;
		font-size: 14px;
		bottom: -1px;
	}

}

/*--------------------------------------------------------------
## Styling of blocks
--------------------------------------------------------------*/


figure.fullwidth img {
	width: 100%;
}

figure { margin: 0; }