html {
overflow: hidden;
}

body {
	color: #595959;
	background-color: #eaeaea;
	font-family: Verdana, sans-serif;
	margin: 0;
	padding: 0;
	cursor: default;
}

#test5 {
	position: absolute;
	top: 0;
	left: 0;
}

.noLinkOptics {
	text-decoration: none;
	color: #595959;
	cursor: default;
}

.logoContainer {
	position: fixed;
	width: 100%;
}

.logo {
	position: absolute;
	right: 3%;
	text-align: right;
}

.footerContainer {
	position: fixed;
	width: 100%;
}

.footer {
	position: absolute;
	right: 3%;
	color: #999999;
}

.navBar {
	position: fixed;
	left: 0;
	width: 25%;
}

.navSectionContainer {
	position: absolute;
	width: 100%;
}

.navSection {
	/*will-change: transform;*/
	position: absolute;
	right: 8%;
	color: #999999;
}


.navSubSectionContainer {
	will-change: opacity;
	position: absolute;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}

.navSubSection {
	float: right;
	margin-right: 8%;
}

.contentContainer {
	will-change: opacity;
	position: fixed;
	right: 0;
	width: 75%;	
	overflow: hidden;
	z-index: 1;
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
}

.contentContainer > h1 {
	position: absolute;
	top: 0;
}

.animatedNavSectionSub {
	display: block;
}

.selectedNavSection {
	color: #595959;
	font-weight: bold;
}

.homePic {
	will-change: opacity;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;	
	background-position: center center;
	background-size: cover;	
	transition: opacity 2s linear;
	-webkit-transition: opacity 2s linear;
}


.clickableText:hover{
	transform: scale(1.07);
}

#Blur {
	position:absolute;
	width: 100%;
	height: 100%;
	transition: filter 0.7s;
	-webkit-transition: -webkit-filter 0.7s;
}


#ContentContainerProjects {
	position: absolute;
	height: 100%;
	width: 100%;
}

.projectContainer {
	will-change: filter, transform, width;
	position: absolute;
	height: 100%;
	-webkit-transition: -webkit-filter 0.5s, width 0.5s ease 0.5s, -webkit-transform 0.5s ease 0.5s;
	transition: filter 0.5s, width 0.5s ease 0.5s,  transform 0.5s ease 0.5s;	
}

.projectContainer.selectedProject {
	-webkit-transition: -webkit-filter 0.5s, width 0.5s;
	transition: filter 0.5s, width 0.5s;	
}

.projectContainer.unselectedProjectRight {
	-webkit-transition: -webkit-filter 0.5s, -webkit-transform 0.5s;
	transition: filter 0.5s, transform 0.5s;	
}

.projectContainer:hover{
	-webkit-filter: grayscale(0) opacity(1);
	filter: grayscale(0) opacity(1);
}

.unselectedProject {
	-webkit-filter: grayscale(1) opacity(0.65); /* Chrome, Safari, Opera */
	filter: grayscale(1) opacity(0.65);
}

.unselectedProjectRight {
	transform: translate(140px, 0);
	-webkit-transform: translate(140px, 0);
}

#ProjectsEndArea {
	position: absolute;
	height: 100%;
	width: 100%;
}

#ProjectsStartArea {
	position: absolute;
	height: 100%;
}

.projectEndAreaProjectSelected {
	width: 100% !important;
}

.projectPicSection {
	will-change: width;
	position: absolute;
	height: 100%;
	-webkit-transition: width 0.5s ease 0.5s;
	transition: width 0.5s ease 0.5s;
}

.projectPicSection.projectPicSectionSelected {
	-webkit-transition: width 0.5s;
	transition: width 0.5s;	
}

.projectPicContainer {
	position: absolute;
	height: 0;
	padding-top: 92%;
	width: 92%;
	background-position: center center;
	background-size: cover;	
	-webkit-transition: opacity 0.6s linear;
	transition: opacity 0.6s linear;
}

.projectInfoContainer {
	position: absolute;
	width: 92%;
	transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
}

.projectInfoContainer:not(.hidden) {
	transition: opacity 0.2s ease 0.8s;
	-webkit-transition: opacity 0.2s ease 0.8s;
}

#ContentScrollbarHorizontalTrack {
	width: 75%;
	position: fixed;
	left: 25%;
	background: transparent;
	transition: opacity 0.5s;
	z-index: 5;
}

#ContentScrollbarHorizontalTrack.hidden {
	-webkit-transition: opacity 0.5s ease 0.3s;
}

#ContentScrollbarHorizontalTrack:not(.hidden) {
	-webkit-transition: opacity 0.5s;
}

#ContentScrollbarHorizontal {
	height: 100%;
	position: absolute;
	bottom: 0;
	background: transparent;
	z-index: 10;
}

#ContentScrollbarHorizontalVisual {
	height: 30%;
	width: 100%;
	position: absolute;
	bottom: 35%;
	background: #999999;
	border-radius: 3px;
}

.hidden {
	opacity: 0;
	pointer-events: none;
}

.projectTextContainer {
	will-change: opacity;
	position: absolute;
	overflow: hidden;
}

.projectTextTitle{
	font-weight: bold;
}

.projectTextDescription{
	margin-top: 0;
	line-height: 145%;
}

.projectPicsNavBar {
	position: absolute;
}

.projectPicContainerSmall {
	position: absolute;
	bottom: 0;
	background-position: center center;
	background-size: cover;	
	-webkit-transition: -webkit-filter 0.6s linear;
	transition: filter 0.6s linear;
}

.projectPicContainerSmall:hover {
	-webkit-filter: grayscale(0); /* Chrome, Safari, Opera */
	filter: grayscale(0);	
}

.projectDetailsContainer {
	position: absolute;
	height: 100%;
	width: 100%;
}

.projectDetailsContainer:not(.hidden) {
	transition: opacity 0.5s ease 0.5s;
	-webkit-transition: opacity 0.5s ease 0.5s;
}

.projectDetailsContainer.hidden {
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
}

.unselectedSmallPic {
	-webkit-filter: grayscale(1) opacity(0.6); /* Chrome, Safari, Opera */
	filter: grayscale(1) opacity(0.6);	
}

.projectPicsNavBarArrowContainer {
	position: absolute;
	bottom: 0;
	right: 0;
}

.projectPicsNavBarArrow {
	position: absolute;
	background-size: contain;	
	background-repeat: no-repeat;
}

.arrowBack {
	background-image: url('https://ce-a.de/sources/symbols/arrow_left_89_255.png');
	background-position: left center;
}

.arrowBackLight {
	background-image: url('https://ce-a.de/sources/symbols/arrow_left_150_90.png');
	background-position: left center;
}

.arrowForward {
	right: 0;
	background-image: url('https://ce-a.de/sources/symbols/arrow_right_89_255.png');
	background-position: right center;
}

.arrowForwardLight {
	right: 0;
	background-image: url('https://ce-a.de/sources/symbols/arrow_right_150_90.png');
	background-position: right center;
}

.arrowBackFullScreen {
	background-image: url('https://ce-a.de/sources/symbols/arrow_left_89_255.png');
	background-position: left center;
}

.arrowBackLightFullScreen {
	background-image: url('https://ce-a.de/sources/symbols/arrow_left_150_90.png');
	background-position: left center;
}

.arrowForwardFullScreen {
	right: 0;
	background-image: url('https://ce-a.de/sources/symbols/arrow_right_89_255.png');
	background-position: right center;
}

.arrowForwardLightFullScreen {
	right: 0;
	background-image: url('https://ce-a.de/sources/symbols/arrow_right_150_90.png');
	background-position: right center;
}

.exitCrossContainer {
	position: absolute;
	right: 0;
	background-size: contain;	
	background-repeat: no-repeat;
	background-image: url('https://ce-a.de/sources/symbols/exit_cross_89_255.png');
	background-position: center center;
}

.fullScreenSymbolContainer {
	position: absolute;
	background-size: contain;	
	background-repeat: no-repeat;
	background-image: url('https://ce-a.de/sources/symbols/full_screen_trans_55.png');
	background-position: center center;
}

.fullScreenClickableContainer {
	position: absolute;
}

#FullScreenPicBackground {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba(15, 15, 15, 0);
	z-index: 10;
	transition: opacity 0.7s;
	-webkit-transition: opacity 0.7s;
}

.projectFullScreenPicContainer {
	position: absolute;
	top: 4vh;
	left: 8vmin;
	width: calc(100vw - 16vmin);
	height: 90vh;
	background-size: contain;	
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
}

#FullScreenPicArrowLeft {
	position: absolute;
	top: calc(50vh - 3vmin);
	left: 2vmin;
	width: 5vmin;
	height: 6vmin;
	background-size: contain;	
	background-repeat: no-repeat;
}

#FullScreenPicArrowRight {
	position: absolute;
	top: calc(50vh - 3vmin);
	right: 2vmin;
	width: 5vmin;
	height: 6vmin;
	background-size: contain;	
	background-repeat: no-repeat;
}

#FullScreenPicExitCross{
	position: absolute;
	right: 2.1vmin;
	top: 4vh;
	width: 3.5vmin;
	height: 3.5vmin;
	background-size: contain;	
	background-repeat: no-repeat;
	background-image: url('https://ce-a.de/sources/symbols/exit_cross_70_89_255.png');
	background-position: center center;	
}

.scrollableContent {
	position: absolute;
	height: 100%;
}

.contentColumn {
	position: absolute;
	height: 100%;
}

.contentTextContainer {
	position: absolute;
	height: 100%;
	width: 95%;
}

.scrollableContentAboutUs {
	left: 0;
}

.scrollableContentImpressum {
	left: 0;
}

.scrollableContentTeam {
	left: 0;
}

.scrollableContentContact {
	left: 0;
}

.bold {
	font-weight: bold;
}

.notransition * {
	transition-duration: 0s !important;
	-webkit-transition-duration: 0s !important;
}

.notransition2 * {
  -webkit-transition: none !important;
  transition: none !important;
}

.notransition3 * {

}

#test5 {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	height: 20vh;
	width: 20vh;
	background-color: grey;
	font-size: 10vh;
}

@media (min-aspect-ratio: 3/2) {
	
	body {
		font-size: 1.8vh;
	}
	
	.logoContainer {
		height: 25vh;
	}
	
	.footerContainer {
		height: 20vh;
		top: 80vh;
	}
	
	.navBar {
		top: 25vh;
		height: 55vh;
	}
	
	.contentContainer {
		top: 25vh;
		height: 55vh;	
	}
	
	.navSection {
		font-size: 2.34vh;
	}
	
	.footer {
		top: 8.5vh;
	}
	
	.logo {
		top: 10vh;
		font-size: 3.24vh;
	}
	
	#ContentScrollbarHorizontalTrack {
		top: 78vh;
		height: 3vh;
	}

	#ContentScrollbarHorizontalVisual {
		border-radius: 0.5vh;
	}
	
	.projectContainer {
		width: 30vh;
	}

	.projectPicSection {
		width: 30vh;
	}
	
	.projectInfoContainer {
		top: 29vh;
	}
	
	.projectInfo {
		height: 2.9vh;
	}
	
	.projectPicSectionSelected {
		width: 51vh;
	}
	
	.selectedProject {
		width: 93vh ;
	}
	
	.unselectedProjectRight {
		transform: translate(66vh, 0);
		-webkit-transform: translate(66vh, 0);
	}
	
	#ProjectsStartArea {
		width: 9vh;
	}
	
	.projectStartAreaProjectSelected {
		width: 8.97vh;
	}
	
	.projectTextContainer {
		left: 50vh;
		width: 41vh;
		height: 55vh;
	}
	
	.projectPicsNavBar {
		bottom: 0.5vh;
		height: 7.58vh;
		width: 46.92vh;
	}
	
	.projectPicContainerSmall {
		height: 6.2vh;
		width: 6.2vh;
	}
	
	.smallPic_1 {
		left: 0;
	}

	.smallPic_2 {
		left: calc(7.58vh * 1);
	}

	.smallPic_3 {
		left: calc(7.58vh * 2);
	}

	.smallPic_4 {
		left: calc(7.58vh * 3);
	}

	.smallPic_5 {
		left: calc(7.58vh * 4);
	}
	
	.projectPicsNavBarArrowContainer {
		height: 6.2vh;
		width: 8.2vh;
	}
	
	.projectPicsNavBarArrow {
		width: 4.1vh;
		height: 6.2vh;
	}
	
	.exitCrossContainer {
		height: 2.8vh;
		width: 2.8vh;
		top: 0.1vh;
	}
	
	.fullScreenSymbolContainer {
		left: 0.5vh ;
		top: 0.5vh;
		width: 2.8vh;
		height: 2.8vh;
	}

	.fullScreenClickableContainer {
		width: 46.92vh;
		height: 46.92vh;
	}
	
	.projectTextTitle{
		font-size: 2.34vh;
		margin-top: -0.45vh;
		margin-bottom: 0.35vh;
	}
	
	#NavSectionContainerHome {
		top: -0.6669vh; /* fontSizeBig * 1.9 * -(0.15) */
	}
	
	#NavSectionContainerAboutUs {
		top: 3.7791vh; /* fontSizeBig * 1.9 * 0.85 */
	}
	
	#NavSectionContainerProjects {
		top: 8.2251vh; /* fontSizeBig * 1.9 * 1.85 */
	}
	
	#NavSectionContainerTeam {
		top: 12.6711vh; /* fontSizeBig * 1.9 * 2.85 */
	}
	
	#NavSectionContainerContact {
		top: 17.1171vh; /* fontSizeBig * 1.9 * 3.85 */
	}
	
	.blurred {
		filter: blur(0.5vh) opacity(0.3);
		-webkit-filter: blur(0.5vh) opacity(0.3); /* Safari */	
	}

}

@media (max-aspect-ratio: 3/2){
	
	body {
		font-size: calc(1.8vw * 2 / 3);
	}
	
	.logoContainer {
		height: calc(25vw * 2 / 3);
	}
	
	.footerContainer {
		height: calc(20vw * 2 / 3);
		top: calc(80vw * 2 / 3);
	}
	
	.navBar {
		top: calc(25vw * 2 / 3);
		height: calc(55vw * 2 / 3);
	}	
	
	.contentContainer {
		top: calc(25vw * 2 / 3);
		height: calc(55vw * 2 / 3);
	}
	
	.navSection {
		font-size: calc(2.34vw * 2 / 3);
	}
	
	.footer {
		top: calc(8.5vw * 2 / 3);
	}
	
	.logo {
		top: calc(10vw * 2 / 3);
		font-size: calc(3.24vw * 2 / 3);
	}
	
	#ContentScrollbarHorizontalTrack {
		top: calc(78vw * 2 / 3);
		height: calc(3vw * 2 / 3);
	}
	
	#ContentScrollbarHorizontalVisual {
		border-radius: calc(0.5vw * 2 / 3);
	}
	
	.projectContainer {
		width: calc(30vw * 2 / 3);
	}
	
	.projectPicSection {
		width: calc(30vw * 2 / 3);
	}
	
	.projectInfoContainer {
		top: calc(29vw * 2 / 3);
	}
	
	.projectInfo {
		height: calc(2.9vw * 2 / 3);
	}
	
	.projectPicSectionSelected {
		width: calc(51vw * 2 / 3);
	}
	
	.selectedProject {
		width: calc(93vw * 2 / 3) ;
	}
	
	.unselectedProjectRight {
		transform: translate(calc(66vw * 2 / 3), 0);
		-webkit-transform: translate(calc(66vw * 2 / 3), 0);
	}
	
	#ProjectsStartArea {
		width: calc(9vw * 2 / 3);
	}
	
	.projectStartAreaProjectSelected {
		width: calc(8.97vw * 2 / 3);
	}
	
	.projectTextContainer {
		left: calc(50vw * 2 / 3);
		width: calc(41vw * 2 / 3);
		height: calc(55vw * 2 / 3);
	}
	
	.projectPicsNavBar {
		bottom: calc(0.5vw * 2 / 3);
		height: calc(7.58vw * 2 / 3);
		width: calc(46.92vw * 2 / 3);
	}
	
	.projectPicContainerSmall {
		height: calc(6.2vw * 2 / 3);
		width: calc(6.2vw * 2 / 3);
	}
	
	.smallPic_1 {
		left: 0;
	}

	.smallPic_2 {
		left: calc(7.58vw * 1 * 2 / 3);
	}

	.smallPic_3 {
		left: calc(7.58vw * 2 * 2 / 3);
	}

	.smallPic_4 {
		left: calc(7.58vw * 3 * 2 / 3);
	}

	.smallPic_5 {
		left: calc(7.58vw * 4 * 2 / 3);
	}
	
	.projectPicsNavBarArrowContainer {
		height: calc(6.2vw * 2 / 3);
		width: calc(8.1vw * 2 / 3);
	}
	
	.projectPicsNavBarArrow {
		width: calc(4.1vw * 2 / 3);
		height: calc(6.2vw * 2 / 3);
	}
	
	.exitCrossContainer {
		height: calc(2.8vw * 2 / 3);
		width: calc(2.8vw * 2 / 3);
		top: calc(0.1vw * 2 / 3);
	}
	
	.fullScreenSymbolContainer {
		left: calc(0.5vw * 2 / 3);
		top: calc(0.5vw * 2 / 3);
		width: calc(2.8vw * 2 / 3);
		height: calc(2.8vw * 2 / 3);
	}
	
	.projectTextTitle{
		font-size: calc(2.34vw * 2 / 3);
		margin-top: calc(-0.45vw * 2 / 3);
		margin-bottom: calc(0.35vw * 2 / 3);
	}
	
	#NavSectionContainerHome {
		top: calc(-0.6669vw * 2 / 3); /* fontSizeBig * 1.9 * -(0.15) */
	}
	
	#NavSectionContainerAboutUs {
		top: calc(3.7791vw * 2 / 3); /* fontSizeBig * 1.9 * 0.85 */
	}
	
	#NavSectionContainerProjects {
		top: calc(8.2251vw * 2 / 3); /* fontSizeBig * 1.9 * 1.85 */
	}
	
	#NavSectionContainerTeam {
		top: calc(12.6711vw * 2 / 3); /* fontSizeBig * 1.9 * 2.85 */
	}
	
	#NavSectionContainerContact {
		top: calc(17.1171vw * 2 / 3); /* fontSizeBig * 1.9 * 3.85 */
	}
	
	.blurred {
		filter: blur(0.3333vw) opacity(0.3);
		-webkit-filter: blur(0.3333vw) opacity(0.3); /* Safari */		
	}
}