* {box-sizing: border-box;}
body {
	max-width: 100vw; 
	width:1600px;
	margin: 0 auto; 
	position: relative;
	min-height: 100vh;
	}
.border{border-radius:25px;}
#header, #footer{padding:0 1em;}
#header, #footer, section.module{
	max-width: 1600px; 
}

body, td, input[type=text], textarea {
	font-family: var(--font-family);
	font-size: 105%; 
	line-height: 1.8em;
	color: #444; 
}
body, td {background-color: var(--background);}
a{line-height:0;}
a{text-decoration:none;color:navy;transition:color .5s; }
a:visited{}
a:hover{
	color:black;
}
.txt_right{text-align:right;}
.noselect{user-select:none;}
h1,h2,h3,h4,h5{margin:0.25em 0;}

/* ---------- MAIN AREAS ------------ */

#header, #content, #footer{
	padding:0 2em;
}
#header{
	position:sticky;
	background-color:var(--header_bg_color);
	display:flex;
	z-index:10;
	align-items:center;
	min-height:6em;
}
#header nav{
	display:flex;
	font-weight:bold;
	z-index:10;
	flex-direction:row-reverse;
	position:fixed;
	top:0;
	right:0;
	background:none;
	z-index:13;
	text-transform:uppercase;
	color:#000;
}
#header nav:hover{width:15.5em; /* to improve UX */}
nav .icon{
    background:url('../graphics/muze_menu_default.png');
    background-size:contain;
	width:4em;
	height:4em;
	position: absolute;
	top: 1em;
	right: 2em;
}
nav:hover .icon{
	background:url('../graphics/muze_menu_hover.png');
	background-size:contain;
	-webkit-animation:blink .8s infinite step-start;
	-moz-animation:blink .8s infinite step-start;
	animation:blink .8s infinite step-start;
	outline:none;
  }
nav:hover~div,nav:hover~.customizations{
    opacity:.5;
    transition:opacity .5s ease-out; 
    -webkit-filter: blur(1px); /* Safari */
    filter:blur(1px);
    transition:blur(1px) 1s filter linear;
    -webkit-transition:blur(1px) 1s -webkit-filter linear;
    -moz-transition:blur(1px) 1s -moz-filter linear;
    -ms-transition:blur(1px) 1s -ms-filter linear;
    -o-transition:blur(1px) 1s -o-filter linear;
}
#menublock{
	position:absolute;	
	background-color:var(--background);
	transition: right .7s ease-out;
	right:-20em;
	top:5em;
	width:fit-content;
	padding: 1em;
}
nav:hover #menublock{
	display:table;
	position:absolute;
	border-radius: 25px;
	right:1em;
}
#menublock li{height: 2em;}
#menublock li a{}
#menublock li a:after{
	content: "";
	display: block;
	height: 2px;
	background:#000;
	width: 0;
	left: 50%;
	transition: width 0.3s ease-in 0s, left 0.3s ease 0s;
}
#menublock li a:hover:after{
	width:100%;
	left: 0; 
}
#header nav ul{
	list-style-type: none;
	display: flex;
	font-size: 1.5em;
	flex-direction: column;
}
#header nav ul li{
	margin:0.25em;
	display:block;
}
#header nav ul li a{}
#header nav ul li a:hover{}
#header nav ul li.current{color:#7e5050;}
.header_left{
	display:flex;
	align-items: center;
	justify-content: space-between;
	font-size: calc(.7vw + .7vh);
}
.logo{
	width:8em;
	margin: 0 auto;
	display:flex;
}
.welcome{
	text-align:right;
	font-size:1.5em;
	text-transform:uppercase;
	font-weight:bolder;
}
.logo a div{
	width:8em;
	height:8em;
	background:url('../graphics/muze_logo.png');
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center; 
	}
.logo a:hover div{
	background:url('../graphics/muze_logo_hover.png');
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center; 
}
.web_title{
	width:100%;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
}
#content{
	display:flex;
	flex-flow:column wrap;
	padding:0 2em;
	min-height:calc(100vh - 8em); /* minus header */
}
section.module{
	padding: 0 1em 2em 1em;
	border-bottom:2px solid var(--accent);
	/* height:calc(100vh - 8em); /*entire screen minus header and footer */
	/* max-height:calc(100vh - 8em); */
	height:100vh;
	height: fit-content;
}
section.module-text{
	flex-wrap: wrap;
	/* display:flex; */	/* isn't each section display:flex ? */ 
}
.module-feed{
	width:100%;
	flex-basis:100%;
}
.flex-width{
	width:100%;
	flex-basis:100%;
}
body>#footer{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#footer ul{
	display:flex;
	display: flex;
	width: 100%;
	justify-content: space-between;
	max-width: 50em;
	}
#footer>ul+div ul{flex-direction: column;}
#footer ul div{padding: 0 .3em;border-right:1px solid lightgrey}
#footer ul li{list-style-type:none;}
#footer ul li.current{color:grey;cursor:default;}
#footer ul li.page{text-transform:uppercase;}
#footer>div{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;width:100%;}
#footer div:last-child div:last-child{font-size:.75em;}

#content>h2{
	z-index: 9;
	margin:auto;
	font-size: calc(2vw + 2vh);
}

#landing{
	display:flex;
	flex-direction:column;
	max-height:calc(100vh - 8em);
}
#landing h1,#landing h2{
	text-align:center;
}
#content #landing .landing_images{
	width:100%;
	overflow: hidden;
	display:flex;
	flex-flow:column;
	justify-content:space-between;
	flex-grow:4;
	height: 100vh;
	gap:10px 10px;
}
#landing .landing_images a{
	flex-basis: 50%;
	line-height:0;
	overflow:hidden;
	padding:0;
	margin:0;
	height:50%;
}
#landing img{
	display:block;
	object-fit:cover;
	overflow:hidden;
	-webkit-transition: transform .5s, .5s filter cubic-bezier(.65,.05,.36,1), .5s -webkit-filter cubic-bezier(.65,.05,.36,1);
	-moz-transition: transform .5s, .5s filter cubic-bezier(.65,.05,.36,1), .5s -webkit-filter cubic-bezier(.65,.05,.36,1);
	-moz-transition: transform .5s, .5s filter cubic-bezier(.65,.05,.36,1), .5s -webkit-filter cubic-bezier(.65,.05,.36,1);
	-ms-transition: transform .5s, .5s filter cubic-bezier(.65,.05,.36,1), .5s -webkit-filter cubic-bezier(.65,.05,.36,1);
	-o-transition: transform .5s, .5s filter cubic-bezier(.65,.05,.36,1), .5s -webkit-filter cubic-bezier(.65,.05,.36,1);
	transition: transform .5s, .5s filter cubic-bezier(.65,.05,.36,1), .5s -webkit-filter cubic-bezier(.65,.05,.36,1);
	width:100%;
	height:100%;
	transform-origin: 50% 50%;
	filter:opacity(1.0) blur(.01em);
}
#landing .landing_images a h3{
	display:table;
	z-index: 8;
	user-select: none;
	top: 40%;
	margin:auto;
	position:relative;
	text-transform:uppercase;
	font-size:2em;
	text-shadow: 0px 0px 8px white;
	transition:top .5s ease-in-out;
}
#landing .landing_images a:hover h3{
	top:50%;
}
#landing .landing_images a:hover img{
	filter:opacity(0.5) blur(0.05em);
	transform: scale(1.05);
}
#biographies .bio{
	display:flex;
	flex-direction:column;
	padding:1em 0;
}
#biographies .bio div+div{display:flex;flex-direction:row;}
#biographies .bio img{
	width:12em;
	margin-right: 1em;
	border: 4px solid #ffe5d9;
}
#biographies .bio>div:first-child{
	border-bottom:4px solid #ff521b;
	margin-bottom: 1em;
}
.publications_wrapper{
	width:100%;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}
.publication_wrapper{
	width:25%;
	max-width:250px;
	height:fit-content;
	border:1px solid #ffe5d9;
	border-radius:25px;
	margin:.2em;
}
.publication_wrapper{}
.publication_wrapper a{
	line-height:inherit;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: anchor-center;
	width: 100%;
}
.publication_wrapper>div:first-child{}
.publication_wrapper img{width:100%;height:10em;object-fit:contain;overflow:hidden;}
.publication_wrapper>div:nth-child(2){text-align:center;}
form#contact>div{margin-bottom:1em;}

@media only screen and (max-width: 1250px){}
@media only screen and (min-width: 1600px){}
@media only screen and (min-width: 600px) and (min-aspect-ratio: 4/3){
	#content #landing .landing_images{
		flex-flow:row wrap;
	}
	#landing .landing_images a{
		flex-basis: 32%;
		height:auto;
	}
	#landing img{
		height:100%;
	}
	nav .icon{
		display:none;
	}
	#menublock span{display:none;}
	#menublock ul{margin:0;}
	#menublock ul:nth-child(3){font-size:105%;}
	#menublock li{height:auto;}
	#header{
		justify-content: space-between;
	}
	#header #menublock{
		position:relative;
		padding:0;
		right:0;
		background-color:transparent;
		top:0;
		width:100%;
	}
	#header nav{
		position:relative;
		width:fit-content;
		background-color: #fff;
		border-radius: 2px;
		padding: .2em .5em 0 .5em;
	}
	#header nav:hover{
		width:auto;
	}
	#header nav ul{
		flex-direction:row;
		padding:0;
		justify-content:end;
	}
	#header nav:hover #menublock{
		right:0;
	}
}
#about{
	display:flex;
	justify-content:center;
	align-items:center;
	margin:auto;
}
#about>div{
	text-align:center;
}
section.module-feed iframe{
	height:height:calc(100vh - 8em) !important;
	position:absolute;top:0px;
	width:100%;
	border:0;
	position:relative;
	border:none;
}

#instagram{
	overflow:hidden;
}
#instagram .igwrapper iframe{
	border:0 !important;
}