/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/*BASE*/

@font-face {
  font-family: 'HelveticaNeue-BoldExt';
  src: url(../fonts/HelveticaNeue-BoldExt.otf);
}

@font-face {
  font-family: 'HelveticaNeue-Extended';
  src: url(../fonts/HelveticaNeue-Extended.otf);
}

html {
	font-family: 'helvetica', sans-serif;
	margin: 0;
	hyphens: auto;
	overflow-x: hidden;
}

body {
	font-family: 'helvetica', sans-serif;
	margin: 0;
	hyphens: auto;
	overflow-x: hidden;
}

h1, h2 {
    font-family: 'HelveticaNeue-BoldExt';
	font-size: 4.5em;
	margin-bottom: 0;
    margin-block-start: 0.83em;
    margin-inline-start: 0px;
    font-weight: bold;
}

h3 {
	font-size: 1.4em;
	font-style: italic;
	font-family: 'HelveticaNeue-Extended';
	margin-top: 35px;
}

p {
	font-weight: 300;
}

footer, footer a {
	background-color: black;
	color: white;
	text-decoration: none;
}

@media (max-width: 992px){
	h1, h2 {
		font-size: 3.4em;	
	}
}

@media (max-width: 768px){
	
	h1, h2 {
		font-size: 3.2em;	
	}
}

@media (max-width: 576px){
	h1, h2 {
		font-size: 2.7em;	
	}
}

@media (max-width: 430px){
	h1, h2 {
		font-size: 2.1em;	
	}
	
	footer div {
		flex-direction: column-reverse;
    	padding-top: 15px;
	}
}

/*HEADER*/

header .nav-container {
	z-index: 200;
	background-color: white;
}

section .nav-container {
	z-index: 200;
	background-color: black;
}

.nav-container {
	position: fixed;
	left: 0;
    top: 0;
    right: 0;
	padding: 15px;
	
}

.nav-container, .logo {
	font-family: 'HelveticaNeue-BoldExt';
	font-size: 1em;
}

.info-link {
	cursor: pointer;
}

header .nav-container a, .logo {
	color: black;
	text-decoration: none;
}

section .nav-container a {
	color: white;
	text-decoration: none;
}

.header-container {
	margin-top: 50px;
}

.header-container div:first-child {
    flex-grow: 1;
    flex-basis: 0;
}

.header-container div:last-child {
    flex-grow: 2;
    flex-basis: 0;
}

.separator {
	width: 100px;
	border-top: solid 2px black;
}

.header-zitat, .header-zitat-autor {
	font-family: 'HelveticaNeue-Extended';
	font-size: 1em;
}

.header-zitat {
	margin-bottom: 0;
	font-size: 1.4em;
}

@media (max-width: 992px){
	h3, .header-zitat {
	font-size: 1em;
}
}

@media (max-width: 768px){
	.header-container {
		flex-direction: column;
	}
	
	
}

@media (max-width: 520px){
	.nav-container div {
		width: 100%;
	}
	
	
}

/*INFO	+*/

.work-info-container {
	margin: 0 15px;
}


.container-info {
	background-color: black;
	overflow-y: scroll;
/*
	position: fixed;
	left: 0;
    top: 0;
    right: 0;
	bottom: 0;
	height: 100vh;
	min-width: 100vw;
*/
	color: white;
	z-index: 300;
}

.info-text {
	width: 50%;
}

.info-text p a {
	color: white;
	text-decoration: none;
}


.info-bild img {
    width: 50%;
}

#work-description {
	margin: 0;
}

@media (max-width: 1400px) {
  .info-text {
    width: 65%;
  }
}

@media (max-width: 992px) {
  .info-text {
    width: 85%;
  }
	
/*
	#work-nummer {
	padding-right: 15px;
}
*/
	.work-info-container p {
	width: inherit;
	}
	
	.work-info-container p:first-child {
		padding-right: 15px;
	}
}

@media (max-width: 576px){
	.info-text {
    width: 100%;
  }
	.info-bild {
		flex-direction: column;
	}
	.info-bild img {
		width: 100%;
	}
	
	.work-info-container {
		justify-content: flex-start!important;
	}
	
	#work-description {
	font-size: 0.9em;
}
}


/*WORK*/

.arrow-mobil {
	display: none;
	width: 25px;
	margin-left: -33px;
}

/*
.arrow-mobil:hover {
	display: none;
}
*/

.work img {
	cursor: url('../img/pfeile.svg'), pointer;
}

@media (max-width: 992px) {
	.work {
		flex-wrap: wrap;
	}
	
	.work div {
		flex-direction: row!important;
		width: 100%!important;
	}
	
	.work img {
	  cursor: auto;
	}
	
	.work-sumie, .work-flurgalerie, .work-westraum  {
		   flex-direction: column-reverse;
	}
	
	.work-info-container {
	margin: 0;
}
	.arrow-mobil {
		display: block;
	}
}