@charset "UTF-8";

@font-face	{
	font-family: "Tw Cen MT Bold";
	src: url("font/TCB_____.TTF");
}

@font-face{
	font-family: "Tw Cen MT";
	src: url("font/TCM_____.TTF");
}

/* Body */
html {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
body {
	font-family: "Tw Cen MT";
	background-color: #ddd;
	color:#000;
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: 200;
	font-size: 10px;
}
/* Container */
.container {
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 0;
	text-align: left;
	min-height: 100vh;
}
.container-top	{
	display: block;
	position: relative;
	top: 0;
	left: 0;
	height:100vh;
	margin:0;
	padding:0;
	width:100%;
}
	.navlinks {
		position: absolute;
		bottom: 0;
		padding: 0;
		margin: 0;
		z-index: 11;
	}

.projects	{
	display: block;
	position: relative;
	top:0;
	left:0;
	width:100%;
	margin:0;
	padding: 0;
}
	.carousel	{
		margin: 0px;
		margin-top: -0.13em;
		margin-bottom: 0.10em;
		padding: 0px;
		left: 0px;
	}
		.carousel-cell	{
			width: 100vw;
			height: calc(100vh - 150px);
			padding: 0;
			margin:0;
			overflow: hidden;
			background-color: #ddd;
			/*overflow-y: auto;
			touch-action: pan-y;*/
		}
		.carousel img	{
			display: block;
			margin:0;
			margin-right: auto;
			height: 100%;
			width: auto;
			overflow: hidden;
		}

.video4to3	{
	width: calc( (100vh - 150px) * 4 / 3 );
	height: 100%;
	margin:0;
	padding:0;
	border: none;
}
.videohimmel	{
	width: calc( (100vh - 150px) * 1.0866 );
	height: 100%;
	margin:0;
	padding:0;
	border: none;
}
.videouseless	{
	width: calc( (100vh - 150px) * 1.4 );
	height: 100%;
	margin:0;
	padding:0;
	border: none;
}

.projecttext	{
	width: 80%;
	padding: 0;
	font-size: 38px;
	letter-spacing: 0.02em;
	line-height: 1.146em;
	height: 100%; 
	/* background-color: #e3e3e3; */
}
p {
	margin: 0;
	margin-bottom: 1em;
}
.about	{
	padding: 0px;
	font-size: 38px;
	letter-spacing: 0.02em;
	line-height: 1.146em;
	width: 90%;
}

b {
	font-family: 'Tw Cen MT Bold';
}
.bigtext	{
	font-family: 'Tw Cen MT Bold';
	position: relative;
	white-space: nowrap;
	text-overflow: clip;
	font-size: 132px;
	line-height: 0.64em;
	padding: 0px;
	margin: 0;
	margin-left:-0.07em;
	vertical-align: bottom;
	z-index: 11;
}
/*.bigtext:hover	{
	text-decoration:line-through #ddd;
}*/

.bigtext a  {
	color: #000;
	text-decoration: none;
}
a {
	color: #000;
	text-decoration: underline dotted;
}
a:hover, a:active {
	color:#000;
	text-decoration: none;
}
.bigtext a:hover, .bigtext a:active {
	color:#000;
	text-decoration: line-through #ddd;
}
a.arro:hover, a.arro:active {
	text-decoration: none;
}
a.proj:hover, a.proj:active {
	text-decoration: line-through #ddd;
}
a.home:hover, a.home:active {
	text-decoration: line-through #ddd;
}

/* Smaller phones */
@media (max-width: 320px) {
	
	.bigtext	{
		font-size: 30px;
	}
	.projecttext	{
		font-size: 12px;
		width: 90%;
	}
	.about	{
		font-size: 12px;
	}
	.carousel	{
		margin-top: -0.02em;
		margin-bottom: 0.03em;
	}
	.carousel-cell	{
		width: 100%;
		height: calc( 100vw * 2 / 3 );
	}
	.carousel-cell img {
		height: 100%;
		width: auto;
	}
	.video4to3	{
		width: calc( 100vw * 2 / 3 * 4 / 3 );
		height: 100%;
	}
	.videohimmel	{
		width: calc( 100vw * 2 / 3 * 1.0866 );
	}
	.videouseless	{
		width: calc( 100vw * 2 / 3 * 1.4 );
	}

}
/* big phones / Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
	
	.bigtext	{
		font-size: 38px;
	}
	.projecttext	{
		font-size: 16px;
		width: 90%;
	}
	.about	{
		font-size: 16px;
	}
	.carousel	{
		margin-top: -0.03em;
		margin-bottom: 0.05em;
	}
	.carousel-cell	{
		width: 100%;
		height: calc( 100vw * 2 / 3 );
	}
	.carousel-cell img {
		height: 100%;
		width: auto;
	}
	.video4to3	{
		width: calc( 100vw * 2 / 3 * 4 / 3 );
		height: 100%;
	}
	.videohimmel	{
		width: calc( 100vw * 2 / 3 * 1.0866 );
	}
	.videouseless	{
		width: calc( 100vw * 2 / 3 * 1.4 );
	}

}
/* iPad etc */
@media (min-width: 768px) and (max-width: 1096px) {
	.bigtext	{
		font-size: 70px;
	}
	.about 	{
		font-size: 30px;
	}
	.projecttext	{
		font-size: 30px;
		width: 90%;
	}
	.carousel	{
		margin-top: -0.1em;
		margin-bottom: 0.1em;
	}
	.carousel-cell	{
		width: 100%;
		height: calc( 100vw * 2 / 3 );
	}
	.carousel-cell img {
		height: 100%;
		width: auto;
	}
	.video4to3	{
		width: calc( 100vw * 2 / 3 * 4 / 3 );
		height: 100%;
	}
	.videohimmel	{
		width: calc( 100vw * 2 / 3 * 1.0866 );
	}
	.videouseless	{
		width: calc( 100vw * 2 / 3 * 1.4 );
	}
}