/* GLOBAL ---------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&family=Roboto&display=swap');

body {
	font-family: 'Roboto', sans-serif;
	background-color: #e5e5e5;
	color: #5b5b5b;
	margin: 0px;
	text-size-adjust: none;
	font-size: 1.1em;
}

@media (max-width: 27cm) {
	body {
		font-size: 2.4em;
	}
}


h1 {
	font-size: 2.1em;
}

h2 {
	font-size: 1.4em;
}

h3 {
	font-size: 1em;
}

li {
	line-height: 1.5em;
}

ul {
	margin: 0px;
}

ol {
	margin: 0px;
}

code {
	font-size: 1.2em;
	color: rgb(22, 22, 22);
	padding: 0px 8px;
	background-color: rgba(255, 255, 255, .4);
}

h1, h2, h3 {
	color: #007cba;
	font-family: 'Poppins', sans-serif;
}

sup {
	font-size: .75em;
}

.button {
	background-color: #007cba;
	border-radius: 4px;
	border-width: 0;
	padding: .5em;
	color: white;
	font-size: 1.0em;
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.button .label {
	flex: 0 0 auto;
}

.button .icon {
	width: 1.3em;
	height: 1.3em;
	
}

.button .icon + .label {
	margin-left: .5em;
}

.button:hover {
	background-color: #1a91cc;
}

.video-wrapper-16-9 {
	align-self: stretch;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	background-color: black;
}

.video-wrapper-16-9 iframe, .video-wrapper-16-9 img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.home {
	display:flex;
	flex-direction: column;
	align-items: center;
}


/* HERO ----------------------------------------------------*/

.hero {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	max-width: 1000px;
	margin: 40px;
}

.hero .stripes {
	flex: 0 0 50px;
	background-image: url("img/Stripes.png");
	background-position: center center;
	background-size: 100% 100%;
}

.hero h1 {
	margin: 0px;
	font-size: 3em;
	margin-bottom: 20px;
}

.hero h2 {
	font-weight: 200;
	color: #747474;
	margin: 0px;
}

.hero p {
	margin: 10px 0px;
	line-height: 1.6em;
}

.hero .content {
	display: flex;
	flex-direction: column;
	background-color: #f0f0f0;
	padding: 80px 40px 40px 40px;
}

.hero .button {
	margin-top: 40px;
	align-self: flex-end;
}


/* PROJECT LIST ---------------------------------------------*/

.project-list {
	max-width: 1025px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0px 30px;
}

.project-list .row {
	flex: 0 1 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.project-list .thumbnail {
	background-color: #f0f0f0;
	border: 0px solid #cccccc;
	display: flex;
	flex-direction: column;
	flex: 1 1 440px;
	margin: 10px;
	box-shadow: 0px 0px 8px rgba(0,0,0,0);
	text-decoration: none;
	padding: 0px;

	transition: background-color 0.1s, border 0.1s, box-shadow 0.1s;
}

.project-list .thumbnail:hover,.thumbnail:active {
	border: 0px solid white;
	background-color: white;
	box-shadow: 0px 0px 8px rgba(0,0,0,.35);
	transition: background-color 0.1s, border 0.1s, box-shadow 0.1s;
}

.project-list h1 {
	font-weight: 200;
	color: #747474;
	font-size: 1.1em;
	margin: 16px 16px 0px 16px;
}

.project-list h2 {
	font-size: 1.5em;
	margin: -8px 16px 12px 16px;
}

.project-list .thumbnail img {
	width: 100%;
}


/* PROJECT -------------------------------------------------*/

.project-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.project-container {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.project {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 55px;
}

.project .header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 20px;
}

.project .header .button {
	flex: 0 0 auto;
	margin-left: 20px;
	padding: .8em;
}

.project .header h1 {
	flex: 1 1 auto;
	margin-top: 0px;
	margin-bottom: 0px;
}

.project .content {
	width: 94%;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-bottom: 50px;
}

.project h2 {
	margin-top: 30px;
	margin-bottom: 0px;
}

.project p {
	line-height: 1.5;
	margin-top: 10px;
	margin-bottom: 10px;
}

.project .video-theatre {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: black;
}

.project .video-container {
	width: 100%;
	max-width: 1200px;
}

.project .content>img,.video-wrapper-16-9 {
	margin-top: 20px;
	margin-bottom: 20px;
}

.project .video-container .video-wrapper-16-9 {
	margin-top: 0px;
	margin-bottom: 0px;
}

.image-comparison-container {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 500px;
	margin-top: 20px;
	margin-bottom: 20px;
	overflow: hidden;
}

.image-comparison-under {
	position: absolute;
	top: 0px;
	width: 100%;
}

.image-comparison-over {
	position: absolute;
	top: 0px;
	width: 100%;
	clip-path: inset(0px 50% 0px 0px);
	animation-name: image-comparison;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes image-comparison {
	0% { clip-path: inset(0px 0px 0px 0%); }
	25% { clip-path: inset(0px 0px 0px 0%); }
	75% { clip-path: inset(0px 0px 0px 100%); }
	100% { clip-path: inset(0px 0px 0px 100%); }
}

.project .video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.project .image-flow-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.image-container {
	display: block;
	overflow: hidden;
}

.image-container.two-column {
	flex: 1 1 0;
	margin: 5px;
	min-width: 400px;
}

.image-container img {
	width: 100%;
	height: 100%;
}


/* MENU -------------------------------------------------*/

.menu {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	background-color: #e5e5e5;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1;
	font-size: .7em;
	box-shadow: 0px 8px 8px 1px rgba(0, 0, 0, .1);
	padding: .5em;
}

.menu .stripes {
	flex: 0 0 1em;
	background-image: url("img/Stripes.png");
	background-position: left top;
	background-size: contain;
	background-repeat: no-repeat;
}

.menu p {
	margin: 0px 10px;
	align-self: center;
}
.menu a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.menu .home-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 4em;
}
.menu .home-btn .icon {
	background-image: url(img/home_icon.svg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 3em;
	height: 3em;
	margin: 1em;
}

/* GALLERY -------------------------------------------------*/

.gallery .row {
	flex: 0 1 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: -10px;
}

.gallery .thumbnail {
	background-color: #f0f0f0;
	border: 1px solid #cccccc;
	display: flex;
	flex-direction: column;
	flex: 1 1 440px;
	margin: 10px;
	box-shadow: 0px 0px 8px rgba(0,0,0,0);
	text-decoration: none;
	padding: 5px;

	transition: background-color 0.1s, border 0.1s, box-shadow 0.1s;
}

.gallery .thumbnail:hover,.thumbnail:active {
	border: 1px solid white;
	background-color: white;
	box-shadow: 0px 0px 8px rgba(0,0,0,.35);
	transition: background-color 0.1s, border 0.1s, box-shadow 0.1s;
}

.gallery .thumbnail img {
	width: 100%;
}