body{

  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale;  /* Firefox on macOS */
  text-rendering: optimizeLegibility;  /* Better kerning & ligatures */
  margin:0;
/*  padding: 1em;*/
  top: 0px;
  left: 0px;
  position: fixed;
}

body{
/*	background-image: url("typo-sketches-1.jpg");*/
	background-size: 100% auto;
	font-size: 13.5px;
}

@font-face {
  font-family: "bau-pro";
  src: url("fonts/BauPro.otf") format("OpenType");
}


@font-face {
  font-family: "monor";
  src: url("fonts/Monor_Regular.otf") format("OpenType");
}

.embed iframe {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

.embed {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.projectMedia figure{
	margin: 0;
	width: 100%;
  aspect-ratio: 16 / 9;
}

.projectMedia figure iframe{
	border: 0;
	width: 100%;
	height: 100%;
}

*{
/*	color: red;*/
	letter-spacing: -0.02em;
	font-family: monor;
/*	font-size: 1.1em;*/
	box-sizing: border-box;
	scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
/*  font-size: 13.5px;*/
  text-shadow: 0px 0px 3px rgba(52,23,14,0.35);
}

strong{
/*	font-family: "bau-pro";*/
	font-weight: normal;
	text-transform: uppercase;
	font-size: inherit;
/*	color: white;*/

}


*::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}


a{ 
	color: black;
	text-decoration: none;
	display: inline-block;
	text-underline-position: under;
	overflow-wrap: anywhere;

}

a:hover{
	color: rgba(0, 0, 0, 0.5);
/*	font-family: "bau-pro";
	text-decoration: none;
	color: rgba(0, 0, 0, 0.5);*/
}

.mainMenu p, .content p{
	margin-top: 0.5em;
  margin-bottom: 1.05em;
}

.mProject a, .mCategory a{
	text-transform: uppercase;
}

.menuItem{

}

.workList{
	margin-left: 1.25em;
}

.mProject{
	margin-left: 1.25em;
	line-height: 1.14em;
}

.mSubProject{
	margin-left: 2em;
}

.show-hide{
	max-width: 100%;
}

.show-hide .projectMedia img{
	max-width: 100%;
	width: 100%;
	height: auto;
	object-fit: contain;

/*	background-color: pink;*/
}

.invisible, .invisible p{
	opacity: 0;
	-webkit-opacity: 0;
	pointer-events: none;
}

#work-header{
	margin-bottom: 0;
}

.credits p{

}

.datesWrap a, .datesWrap u{
	text-decoration: none;
	color: rgba(0, 0, 0, 0.5);
}

.datesWrap u:hover{
	color: rgba(0, 0, 0, 1);
}

@media screen and (orientation: landscape){
	.mainCont{
		display: grid;
		grid-template-columns: 1fr 3fr;
	}

	.content{
		margin-top: -0.2em;
		height: 100vh;
		overflow-y: scroll;
	}



	.show-hide{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-items: start;
		display: none;
   	column-gap: 1em;
    padding-left: 0.7em;
	}

	.show-hide .projectAbout{
		grid-column-start: 1;
		grid-column-end: 3;
		height: fit-content;
/*		columns: 2;*/
		
	}

	.show-hide .projectAbout p{
/*		width: 90%;*/
		font-size: 0.94em;
		hyphens: auto;
	}

	.show-hide .credits p{
/*		width: 90%;*/
/*		font-size: 0.87em !important;*/
	}

	.show-hide .projectAbout a,	.show-hide .projectAbout u, .show-hide u{
/*		font-family: "bau-pro" !important;*/
		text-decoration: none;
		color: rgba(0, 0, 0, 0.5);
/*		color: black;*/
		hyphens: auto;
		font-size: inherit;

/*		text-underline-position: under;*/

	}

	.show-hide .projectAbout a:hover,	.show-hide .projectAbout u:hover, .show-hide u:hover{
		color: rgba(0, 0, 0, 1);
	}

	.show-hide.is-visible {
	  display: grid;
	}

	.show-hide#about p{
		grid-column-start: 3;
		grid-column-end: 3;
	}

	.mainMenu{
		height: 100vh;
    overflow-y: scroll;
    overflow-x: visible;
    padding-left: 0.85em;
    margin-top: -0.2em;
	}

	.projectGallery.is-visible{
		display: flex;
    position: fixed;
    top: 0;
    left: 0;
    padding: 3em;
    width: 100%;
    height: 100vh;
    overflow-x: scroll;
    justify-content: center;
	}

	.projectGallery{
		display: none;
	}

	.projectMedia img{
		max-width: 50%;
	}
	.projectMedia{
		display: flex;
		flex-direction: column;
		align-items: right;
		position: sticky;
		top: 0;
/*		background: lightgrey;*/
	}

	.projectGallery .img-cont, .projectGallery .img-cont img{
		max-width: 100%;
    max-height: 100%;
	}

	.projectGallery .img-cont img, .projectMedia img{
		transition: 0.3s filter;
		filter: blur(0px);
	}

	.projectGallery .img-cont img.unloaded, .projectMedia img.unloaded{
		filter: blur(2px);
	}

	.galleryImageCont{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.projectGallery .img-cont img{

    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
	}

	.img-cont{
		position: relative;
	}

	.img-cont .prev{
/*		background: red;*/
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    cursor: w-resize;
    z-index: 1;
	}

	.img-cont .next{
/*		background: blue;*/
    position: absolute;
    width: 50%;
    height: 100%;
    left: 50%;
    cursor: e-resize;
    z-index: 1;
	}

	.projectGallery .gallery-button.close{
		position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    cursor: crosshair;
	}

	.mainAbout, .credits, .mainMenu{
		padding-right: 1em;
	}

	.credits{
		position: sticky;
		top: 0;
		height: fit-content;
/*		padding-top: 20vh;*/
/*		background: lightcyan;*/
	}

	.projectAbout{
		position: relative;
/*		background: lightblue;*/
	}

	.mainAbout{
/*		background: pink;*/
		height: fit-content;
	}
	.aboutCreditsCont{
		height: fit-content;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1em;
/*		background: lightgrey;*/
	}


/*	.show-hide .projectMedia{
		grid-row-start: 1;
	}	*/

/*	.mainCont .mainMenu{
		border: 1px solid red;
	}

	.mainCont .content{
		border: 1px solid green;
	}*/

	.datesWrap{
		grid-column-start: 3;
    grid-column-end: 4;
	}
	.topHeader svg{
		display: none;
	}

	.mainMenu .topHeader{
		margin-top: 0.5em;
	  margin-bottom: 1.05em;
	}


}

@media screen and (orientation: portrait){
	body{
		font-size: 15px;
	}
	.content{
		display: none;
	}
	.mainMenu{
		padding: 1em;
	}
	.mainMenu p:first-of-type{
		margin-top: 0;
	}

	.prHeader{
		padding: 1em;
		display: grid;
		row-gap: 0.5em;
	}

	.aboutContent, .datesContent{
		padding: 0.5em 1em;
	}

	.prTitle{
		margin-top: 0.5em;
    margin-bottom: 1.05em;
	}

	.contentScroll{
		width: 100%;
		height: 100%;
		overflow-y: scroll;

	}

	.datesContent a, .datesContent u, .aboutContent a, .aboutContent u{
		text-decoration: none;
		color: rgba(0, 0, 0, 0.5);
	}

	.sliderMenu{
		position: absolute;
/*		background-color: white;*/
		transition: 0.5s margin-top;
		margin-top: 0px;
		height: 100vh;
		max-height: 100vh;
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
		z-index: 2;
/*		justify-content: end;*/
	}

	.sliderMenu .mainMenu{
		background-color: white;
	}

	.sliderMenu.closed{
		margin-top: -100vh;
	}

	.sliderMenu .closeMenu{
		height: 100%;
	}
	.topHeader{
		display: flex;
    justify-content: space-between;
    margin-bottom: 1.05em;
	}

	.topHeader .menuButton{
		height: fit-content;
    width: fit-content;
    position: relative;
	}

	.topHeader svg{
		width: 7vw	;
	}

	.mainMenu .topHeader svg{
		width: 5vw;
	}
	.cross:not(.sliderMenu .cross){
		display: none;
	}

	.projectMedia img{
		max-width: 100%;
    max-height: 100%;
	}

	.projectMedia img{
		transition: 0.3s filter;
		filter: blur(0px);
	}

	.projectMedia img.unloaded{
		filter: blur(2px);
	}

}