.projectsIntro {
	padding: 85px var(--main-padding-space) 60px;
	width: 50%;
	position: relative;
}

.homeContent .projectsIntro {
	padding-top: 100px;
}

.projectsVisualization {
	width: 100%;
	padding: 0 var(--main-padding-space) 70px;
}

.projectsVisualization > * {
	width: var(--label-width);
	display: inline-block;
}

.projectsVisualization > .current:before {
	content: "[";
}

.projectsVisualization > .current:after {
	content: "]";
}

.projectsVisualization label {
	color: var(--third-color);
}

.projectsVisualization button {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	text-align: left;
	padding: 0;
}

.projectsVisualization .current {
	color: var(--fourth-color);
}

.projectList {
	padding: 0 var(--main-padding-space);
}

.projectThumbnail {
	transition: none !important;
}

.listLayout .projectThumbnail {
	display: flex;
	flex-wrap: wrap;
	padding: var(--main-padding-space) 0;
	width: 100%;
	position: relative;
}

.listLayout .projectThumbnail:first-child {
	padding-top: 0;
}

.listLayout .projectThumbnail:last-child {
	margin-bottom: 0;
}

.listLayout .projectThumbnail figure {
	display: none;
}

.projectListThumbnails {
	width: 40vw;
	height: 20vw;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: -1;
}

.projectListThumbnails figure {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	filter: blur(10px);
}

.projectListThumbnails figure.show {
	opacity: 1;
	filter: blur(0px);
}

.touchDevice .projectListThumbnails figure.show {
	opacity: 0;
}

.projectListThumbnails .pictureContainer,
.projectListThumbnails figure picture,
.projectListThumbnails figure .videoContainer {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding-bottom: 0 !important;
	object-fit: cover;
}

.listLayout .projectThumbnail .row {
	width: 100%;
	float: left;
	display: flex;
	flex-wrap: wrap;
}

.listLayout .projectThumbnail .column {
	width: 25%;
	padding-right: var(--main-padding-space);
}

.projectThumbnail .column .row {
	clear: both;
	float: left;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.projectThumbnail .column .label {
	width: var(--label-width);
	display: inline-block;
}

.projectThumbnail .column .value {
	width: -webkit-calc(100% - var(--label-width));
	width: calc(100% - var(--label-width));
}

.projectThumbnail .artists,
.projectThumbnail .music {
	display: none !important;
}

.gridLayout .projectThumbnail {
	width: -webkit-calc(25% - 20px);
	width: calc(25% - 20px);
	margin-bottom: var(--main-padding-space);
}

.gridLayout .projectThumbnail figure {
	margin-bottom: var(--main-padding-space);
	transform: none !important;
}

.gridLayout .projectThumbnail .column {
	display: none;
}

.gridLayout .projectThumbnail .column:first-of-type {
	display: inline-block;
	width: 50%;
	float: left;
}

.gridLayout .projectThumbnail .column:nth-child(3),
.gridLayout .projectThumbnail .column:nth-child(5) {
	opacity: 0;
	width: 50%;
	float: left;
	display: block;
	/*
	transition: opacity .4s ease;
	-webkit-transition: opacity .4s ease;
	-moz-transition: opacity .4s ease;
	-o-transition: opacity .4s ease;
	*/
}

.touchDevice .gridLayout .projectThumbnail .column:nth-child(3),
.touchDevice .gridLayout .projectThumbnail .column:nth-child(5) {
	display: none;
}

.touchDevice .gridLayout .projectThumbnail.expanded .column:nth-child(3),
.touchDevice .gridLayout .projectThumbnail.expanded .column:nth-child(5) {
	display: block;
}

.gridLayout .projectThumbnail:hover .column:nth-child(3),
.gridLayout .projectThumbnail:hover .column:nth-child(5) {
	opacity: 1;
}

.gridLayout .projectThumbnail .column:nth-child(5) {
	margin-left: 50%;
}

.gridLayout .projectThumbnail .column:nth-child(3) .row:last-child,
.gridLayout .projectThumbnail .column:nth-child(5) .row:first-child {
	display: none;
}

.touchDevice .gridLayout .projectThumbnail .column {
	width: 100%;
	margin-left: 0;
}

.projectThumbnail figure {
	transition-property: opacity;
	opacity: 0;
}

.gridLayout.masonryLoaded .projectThumbnail figure {
	opacity: 1;
}

.projectThumbnail .expandBtn {
	display: none;
}

.touchDevice .projectThumbnail .expandBtn {
	display: block;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	margin: 0;
	padding: 0;
	position: relative;
	top: -1px;
}

.touchDevice .projectThumbnail .expandBtn:before {
	content: '[+]';
}

.touchDevice .projectThumbnail.expanded .expandBtn:before {
	content: '[-]';
}

.touchDevice .projectThumbnail .column:nth-child(2) {
	display: flex;
	justify-content: space-between;
}

@media only screen and (max-width: 1920px) {
	.gridLayout .projectThumbnail {
		width: -webkit-calc(33.33% - 21px);
		width: calc(33.33% - 21px);
	}
}

@media only screen and (max-width: 1024px) {
	.gridLayout .projectThumbnail {
		width: -webkit-calc(50% - 24px);
		width: calc(50% - 24px);
	}
}

@media only screen and (max-width: 768px) {
	.projectsIntro {
		width: 100%;
		padding: 70px var(--main-padding-space) 40px;
	}

	.projectsVisualization {
		display: none;
	}

	.projectList {
		width: 100%;
		height: auto !important;
	}

	.projectThumbnail {
		width: 100% !important;
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		overflow: hidden;
		display: block;
		transform: none !important;
	}

	.projectThumbnail figure {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		pointer-events: initial !important;
		transform: none !important;
		left: 0 !important;
		top: 0 !important;
		opacity: 1 !important;
		transition: none !important;
		margin-bottom: var(--main-padding-space);
		display: block !important;
	}

	.projectThumbnail figure .pictureContainer,
	.projectThumbnail figure picture,
	.projectThumbnail figure .videoContainer {
		position: relative !important;
		height: auto !important;
		padding-bottom: 0 !important;
	}

	.projectThumbnail figure picture img,
	.projectThumbnail figure .videoContainer video {
		position: relative;
		height: auto;
	}

	.projectThumbnail .column {
		width: 100% !important;
		padding-right: 0 !important;
	}

	.projectThumbnail .column {
		display: none;
	}

	.projectThumbnail .column:nth-child(2),
	.projectThumbnail.expanded .column:nth-child(3),
	.projectThumbnail.expanded .column:nth-child(5) {
		display: block;
	}

	.projectThumbnail .column:nth-child(3) .row:last-child,
	.projectThumbnail .column:nth-child(5) .row:first-child {
		display: none;
	}
}