:root{
	--creme: rgba(245,245,240,1);
}

h2 {
	margin: 0;
	padding: 0.5em 0;
}

h3 {
	font-size: 1.5em;
}

.mainTopicHeader{
	text-align: left; 
	padding-left: 2em; 
	height: 76px; 
	line-height: 1em;
	width: 100%; 
	color:black;
	font-size: 100px; 
	line-height: 1.5em; 
	padding-right: 1.8em;
}

.projectsTargetMargin{
	margin-bottom:75px;
}

.mobileOnlyHeadline{
	display: none;
}

p {
	font-size: 1em;
	letter-spacing: 0.03em !important;
	text-shadow: 0px 0px 2px rgba(150, 150, 150, 0.49);
}

section {
	margin-bottom: 6em;
}

@media only screen and (max-width: 995px){
  .computerOnlyHeadline {
	  display: none;
  }
  
  .mobileOnlyHeadline {
	  display: block;
  }
  
  .headlineRowFoto{
	  margin-left: 3em;
	  margin-right: 0em;
  }
  
  .mainTopicHeader{
	  padding-left: 15px;
	  line-height: 1.2em;
	  font-size:75px;
  }
  
  section{
	   margin-top: 0px;
	   margin-bottom: 6em !important;
  }
  

}

.headlineRow{
	height: 62px; 
	margin: 0em; 
	padding: 0;
	background-color: black;
	color:white;
	margin-right: 40em;
	justify-content: center;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	/* width: 100%; */
	min-width: 320px;
	
}

.headlineRowRight{
	margin-right: 0em;
	margin-left: 70em;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.rightAlignedHeadh2{
	text-align: right; 
	font-size: 55px; 
	margin-right: 35px; 
	padding: 0;
	text-shadow: 0px 0px 2px silver;
	font-weight: 500;
	line-height: 1.1em;
}

.leftAlignedHeadh2{
	text-align: left; 
	font-size: 55px; 
	margin-left: 35px; 
	margin-top: 2em !important;
	padding: 0;
	text-shadow: 0px 0px 2px silver;
	font-weight: 500;
	line-height: 1.1em;
}

@media only screen and (max-width: 995px){

	.rightAlignedHeadh2{
	font-size: 37px;
	line-height: 1.2em;
	}
	.headlineRow{
	height: 48px;
	}
}


#keyvisuals {
	margin-bottom: 1em;
}

.target {
	height: 5em;
	margin-top: -5em;
}

#keyvisuals > div > div,
#projects div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}


@keyframes fullScale{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.05);
    }
}

/* ---------- */
/* NAVIGATION */

nav.ui.menu {
	background: none;
	box-shadow: none;
	border: none;
}

nav.ui.menu .item {
	font-size: 1.2em;
	color: white;
	transition: all ease-in-out 0.2s;
}

nav.ui.menu .item:hover {
	opacity: 1;
	color: white;
	scale: 1.1;
	/* font-size: 1.19em; */
	
}

nav.ui.menu.scrolling {
	/* background-image: url("./assets/img/opacity/black-50.png"); */
	background-color: black;
	opacity: 0.8;
	
}

nav.ui.menu.scrolling .item {
	font-size: 1.15em;
}

nav.sidebar.ui.menu > .item {
	padding-right: 0;
	padding-left: 0.6em;
}

nav.sidebar.ui.menu > .menu .item {
	font-size: 1.8em !important;
	padding-left: 0.7em;
}

nav.sidebar.ui.menu > .item {
	padding-right: 0;
	padding-left: 0.6em;
}

nav.sidebar.ui.menu > .menu .item {
	font-size: 1.8em !important;
	padding-left: 0.7em;
}


#keyvisuals > div > div {
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#keyvisuals h1,
#keyvisuals p {
	padding: 0 1em;
	color: white;
	text-shadow: 0.02em 0.02em 0.2em #333;
	position: absolute;
}

.floatingHeadline{
	position: relative; 
	color: black; 
	height: 100%;
}

#keyvisuals h1 {
	font-size: 2.8em;
	border: 2px solid white;
	border-radius: 4px;
	color: white;
}

@media only screen and (max-width: 995px){
	#keyvisuals h1 {
		font-size: 1.8em;
		border: 1px solid white;
		border-radius: 3px;
		color: white;
		margin-top: 8.5em !important;
}
}

#keyvisuals p {
	text-align: center;
	font-size: 1.6em;
}

#keyvisuals .bildContainer{
	height: 87vh;
	position: relative;
	border-bottom: 5px solid black;
	border-top: 0px;
}

@media only screen and (max-width: 995px){
#keyvisuals .bildContainer{
	height: 72vh;
}
}

#keyvisuals .bild{
	background-image: url(./assets/img/Portfolio/Abstraktion/IMG_20170202_155654_Beb.jpg);
	height: 110%; 
	width:100%;
	position: absolute;
	background-position: center 0px;
	box-shadow: 
        inset 0px -11px 8px -12px rgba(0,0,0,0.7),
        inset 0px 11px 8px -4px rgba(0,0,0,0.7);
}



/*.aboutTarget{*/
	/* height: 10em;  */
	/* background: white;  */
	/* width: 100%;  */
	/* position: absolute;  */
	/* margin-top:-14px;  */
	/* border-top: 1px solid black; */
	/* box-shadow:  */
        /* inset 0px -11px 8px -10px rgba(0,0,0,0), */
        /* inset 0px 11px 5px -12px rgba(0,0,0,1); */
/*}*/

#about{
	margin-top: 8em;
}

#about p{
	letter-spacing: 0.05em;
}

#about #factsOverlay{
	width: 0%; 
	height: 100%;
	background-color: rgba(0,0,0, 0.2); 
	position: absolute; 
	right:0; 
	color: var(--creme);	
	border-left: 2px solid var(--creme);
	display: none;
	margin-top: -1px !important;
	margin-bottom: -2px !important;
	margin-right: 0px !important;
}

#factsOverlay h2{
	transform: rotate(270deg);
	margin-top: 1em !important; 
	/* margin-bottom:5.9em !important;  */
	text-align:left;
	font-size: 53px;
	position:relative;
	justify-content: left;
	display: flex;
	margin-left: -367px;
	opacity: 0;
	font-weight:500;
	letter-spacing:0.05em;
	/* text-shadow: 0px 0px 10px rgba(255,255,255, 0.2); */
}

#factsOverlay h3{
	margin-bottom: 0.2em;
	text-align:left;
	font-size: 20px;
	margin-left:3em !important;
	font-weight: 400;
	letter-spacing:0.05em;
	/* text-decoration: underline; */
}

#factsOverlay p{
	font-size: 0.85em;
	padding-left: 0em;
	text-align: left;
	margin-left:8em !important;
	/* text-shadow: 0px 0px 10px rgba(255,255,255, 0.2); */
}

#factsOverlay marginElement{
	margin-left: 8em !important;
}

#factsMobile h2,
#factsMobile h3,
#factsMobile p{
	width: 100%;
	margin-bottom:0;
}

#factsMobile h2{
	font-size: 40px;
	margin:0;
	font-weight: 400;
	line-height:0;
	margin-left: -367px;
}

#factsOverlay h3{
	margin-top: 0em !important; 
}

.overlayText{
	opacity: 0;
}

#hobbiesHeader{
	opacity: 0;
}

.skillsMobile {
	margin-bottom: 5em !important; 
}

.skillsAufzaehlungAbstand{
	margin-bottom: 1em;
}

#about .bildZwei{
	min-height: 526px;
	position:relative;
	background-image: url(./assets/img/Portfolio/IMG_0728_Be.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	border: 1px solid black;
	transition: transform 450ms ease-in-out;
	border-radius: 5px;
	margin-top: 5em;
}

.bildZwei:hover{
    /* animation: fullScale 0.5s; */
	transform: scale(1.02);
}


@media only screen and (max-width: 995px) {
  #about {
  margin-top: 0em !important;
  }
  
  #about .bildZwei {
    min-height: 231px;
	/* margin-bottom: 180px; */
	margin-top: 2em;
	border: 0;
  }
  
  .bildZwei:hover{
	  animation: 0;
	  transform: scale(1)
  }
}

#soundsection p,
#fotografieSection p,
#videoSection p{
	letter-spacing: 0.05em;
}

.soundSectionContainer{
	margin-top: 2em !important;
}

@media  only screen and (max-width: 995px){
.soundSectionContainer{
	margin-top: 1em !important;
}
	
}

.soundElementContainer{
	margin: 1.5em !important; 
	min-height: 200px !important;
}

.soundElementTextContainerLeftAligned{
	text-align: left !important; 
	margin-top: 2em !important;
}

.soundElementTextContainerRightAligned{
	text-align: right !important;
	margin-top: 1.5em !important;
}

.audioControl{
	width: 100%; 
	border-radius: 3px;
	/* background-color: rgba(48, 11, 57, 1); */
}

.soundCover{
	background-size: 100%; 
	border: 1px solid black; 
	border-radius: 4px;
	min-height: 221px;
	background-repeat: no-repeat;
	transition: transform 250ms ease-in-out;
}

.soundCover:hover{
	transform: scale(1.02);
}

@media only screen and (max-width: 995px){
	
	.soundCover{
		border: 0;
	}
	.soundCover:hover{
		transform: scale(1);
	}
	.soundElementContainer{
		margin-top: -2em !important;
		margin-bottom: -2em !important;
	}
	
} 


.dystopiaCover{
	background-image: url('./assets/img/Portfolio/Dystopia.jpg'); 
	/* filter: hue-rotate(-0.25turn); */
	filter: grayscale(0.5);
	transition: 0.25s all ease-in-out;
}

.dystopiaCover:hover{
	filter: grayscale(0);
	/* filter: hue-rotate(0); */
}

.soundCollageCover{
	background-image: url('./assets/img/Portfolio/Natur/IMG_20160813_181653.jpg');
	margin-top: 1em;
	filter: hue-rotate(-0.1turn);
	transition: 0.25s all ease-in-out;
}

.soundCollageCover:hover{
	filter: hue-rotate(0);
}

.wartungsarbeitenCover{
	background-image: url('./assets/img/Portfolio/Wartungsarbeiten.jpg'); 
	/* filter: hue-rotate(-0.25turn); */
	filter: grayscale(0.5);
	transition: 0.25s all ease-in-out;
}

.wartungsarbeitenCover:hover{
	filter: grayscale(0);
	/* filter: hue-rotate(0); */
}

#soundsection h3{
	text-align: right; 
	font-size: 35px; 
	margin-right: 25px; 
	padding: 0;
	text-shadow: 0px 0px 2px rgba(150, 150, 150, 0.49);
}

#fotografieSectionHeadlineCatch{
	display: none;
}
@media only screen and (max-width: 1519px){
#fotografieSectionHeadlineCatch{
	display: block;
	margin-left: 58em;
}
#fotografieSectionHeadline{
	display: none;
}
}

#fotografieSection i{
	font-size: 120px;
	text-shadow: 0px 0px 4px rgba(20, 20, 20, 0.7); 
}
/* 
#fotografieSection p{
	text-shadow: 0px 0px 2px rgba(20, 20, 20, 0.4); 
	font-size: 25px;
} */

#fotografieSection p{
	/* text-shadow: 0px 0px 10px rgba(20, 20, 20, 0.7); */
}

@media only screen and (max-width: 995px){
	#fotografieSection i{
		font-size: 120px;
		text-shadow: 0px 0px 4px rgba(20, 20, 20, 0.7); 
		padding-top: 80px !important;
	}
	
	#fotografieSection p{
		text-shadow: 0px 0px 2px rgba(20, 20, 20, 0.7); 
		font-size: 20px;
		padding-top: 80px !important;
		width:100%;
	}	
}
.headlineRowFoto{

}

.fotoSectionTempContainer{
	margin: 0px; 
}

.fotoSectionContentTempContainer{
	justify-content: center !important; 
	align-content: center !important;  
	display:flex;
	min-height: 250px;
	/* text-shadow: 0px 0px 2px rgba(20, 20, 20, 0.4); */
}


.fotoSectionKodomContainerTemp{
	min-height: 585px; 
	margin:0; 
	margin-top: -35px;
}

#fotografieSection .kodomaBackgroundStyle{ 
	position: absolute;
	background-image: url('./assets/img/Portfolio/tempTestZwei.jpg'); 
	width: 100%;
	height: 100%;
	background-size: 80%;
	background-repeat: no-repeat;
	margin: 10px;
	background-position:center;
}

#fotografieSection .kodomaStyle{
	background-image: url('./assets/img/Portfolio/tempTestEins.png'); 
	background-repeat: no-repeat;
	height: 100%; 
	width: 100%; 
	background-size: 80%; 
	position:relative;
	background-position:center;
}

.pdfTopBar{
	padding-top: 6em !important;
	margin: 0px !important;
	padding-left: 1.7em;
	padding-bottom: 0.3em !important;
	min-height: 834px;
}

.pdfBTN{
	color: black;
	background-color: #F5F5F0;
	margin: 0px !important;
	border: 1px solid black;
	border-radius: 0px;
}

.pdfTopBarSeitenzahl{
	text-align: center;
	border: 1px solid black;
  	border-top-width: 1px;
  	border-right-width: 1px;
  	border-bottom-width: 1px;
  	border-left-width: 1px;
	border-width: 1px 0px 1px 0px;
	margin-right: -1.8em !important;
	margin-left: -1.8em !important;
}


/* ------ */
/* VIDEO */

.ui.modal {
	width: 896px;
	height: 504px;

}

video {
	border: 0;
	margin: 0 !important;
	outline: 0 !important;

}

/* ---- */
/* TEAM */

#team img {
	width: 100%;
	border-radius: 50%;
}

/* ------- */
/* CONTACT */

#contact {
	padding-top: 1em;
	background: #eee;
}

/* ------ */
/* FOOTER */

footer {
	padding: 1em 0;
	color: var(--creme);
	/* transition: 0.2s all ease-in-out; */
}
footer:hover{
	/* color: rgba(255,255,255,0.8); */
}

/* footer h2{ */
/* transform:rotate(270deg) !important;  */
/* position:absolute !important;  */
/* margin-top: 2em !important;  */
/* font-size: 96px !important;  */
/* line-height:0em !important; */
/* margin-left: -166px !important;  */
/* border-bottom: 5px solid white !important; */
/* /* transition: 0.4s all ease-in-out; */ */
/* } */

footer p{
	/* transition: 0.4s all ease-in-out; */
	/* transform: rotate(180deg); */
}

.animateRotate{
	/* transform: rotate(360deg); */
}

footer i{
	font-size: 40px !important; 
	line-height:1.3em;
	transition: 0.05s all ease-in-out;
	margin-right: 52px!important;
}
footer i:hover{
	/* font-size: 45px; */
	transform: scale(1.02);
}

.footerImpressum{
	margin-left:133px !important; 
	margin-bottom:15px; 
	position: absolute; 
	bottom: 0 ; 
	border-left:1px solid var(--creme); 
	border-top: 1px solid var(--creme);
	/* display: none; */
}

#verantwortlichPID{
	/* opacity: 0; */
}

@media only screen and (max-width: 760px)
{
	.footerImpressum{
		border-top: 0;
		margin-left: 120px !important;
	}
}