/* Eileen Southern css
---------------------------------------------------------------------------------------------- */

/* Omeka Admin Bar Fixes */
#admin-bar {
	position:fixed;
	z-index: 10000;
}
#navbar.nav-container.omeka_authenticated{
	top: 40px;
}


/* UNIVERSAL STYLES -------------------------------------------------------------------------- */
* {
	box-sizing: border-box;
	font-family: 'DM Sans', sans-serif;
	padding:0;
	margin:0;
}

a {
	text-decoration: none;
	cursor: pointer;
}

a:hover, .gallery-img-container:hover {
	opacity: 0.5;
	-webkit-animation: fadeOut 0.4s ease-out;
    -moz-animation: fadeOut 0.4s ease-out;
    -o-animation: fadeOut 0.4s ease-out;
    animation: fadeOut 0.4s ease-out;
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0.5;}
}


ul, li {
	list-style-type: none;
}

body {
	font-feature-settings: "liga", "kern";
}

@font-face {
  font-family: 'Prophet';
  src: url('ABCProphet-Light-Trial.woff') format('woff'),
       url('ABCProphet-Light-Trial.woff2') format('woff2');
  font-style:   normal;
  font-stretch: normal;
}

img {
	width: 100%;
}





/* Main Type Styles -------------------------------------------------------------------------- */
h1, h1 a {
	font-family: 'Prophet',sans-serif;
	font-weight: 200;
	letter-spacing: -0.02em;
	font-size: 118px;
	line-height: 0.9em;
}


h2, h2 a {
	padding-top:1em;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	font-size: 36px;
	line-height: 1.2em;
	color:var(--dark-red);
	text-transform: uppercase;
	padding-bottom: 1.1em;
}

h3, h3 a {
	padding-top:0.5em;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	font-size: 25px;
	line-height: 1.15em;
	color:var(--dark-teal);
	text-transform: uppercase;
	padding-bottom: 1em;
}

h4, h4 a {
	font-family: 'Prophet',sans-serif;
	font-weight: 200;
	letter-spacing: -0.03em;
	font-size: 35px;
	line-height: 1.1em;
	padding-bottom: 0.3em;
	color:black;
	margin-left:-3px;
}

h5, h5 a {
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding-bottom: 0.75em;
	padding: 0.5em 0;
	color:black;
}

h6, h6 a {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	font-size: 15px;
	color:var(--dark-red);
	text-transform: uppercase;
}

p {
	font-size: 1.1em;
	line-height: 1.6em;
	padding-bottom: 1em;
}

p a{
	font-weight: 700;
	color:var(--dark-teal);
}

.para-intro {
	color:var(--dark-teal);
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.8em;
	letter-spacing: 0.08em;
}

.large-quote{
	font-family: 'Prophet',sans-serif;
	font-weight: 200;
	letter-spacing: -0em;
	/* font-size: 50px;
	line-height: 1.1em; */
	font-size: 43px;
	line-height: 1.5em;
	color:white;
}

blockquote {
	margin-left: 40px;
}

/* Title ------------------------------------------------------------------------------------ */

header {
	width: 100%;
	background-color: black;
	height:500px;
	position: fixed;
	/* top:0; /* For some reason this is hiding the title only on the homepage */
	z-index: -1;

}

h1.page-title {
	padding: 1.3em 0 0 0;
	color:white;
}

h1.index-title {
	/* padding: 2.3em 0 0 0;
	font-size: 80px; */
	font-size: 55px;
	padding: 2.6em 0 0 0;
	line-height: 1em;
}


/* Navigation -------------------------------------------------------------------------------- */

.menu-btn {
	display: none;
}

.logo h2{
	color:var(--light-red);
	margin-top:0em;
	padding: 0.1em 0 0 1.5em;
	position: absolute;
}

.logo h2 a{
	font-size: 0.8em;
}

.logo h3 {
	font-size: 14px;
	line-height: 15px;
	position: absolute;
	top:5px;
	left:340px;
}

.nav-container{
	background-color: black;
	text-align: right;
	height: 62px;
	z-index: 100;
	width: 100%;
	filter: drop-shadow( 0px 8px 4px rgba(0, 0, 0, 0.6));
}

#navbar{
	position: fixed;
  	top: 0px;
}

nav {
	padding-right: 2em;
}

.category-name, .page-link  {
	width: 120px;
	text-align: center;
}

.category-name {
	padding: 20px 0;
	line-height:1.2em;
	position:relative;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
}

nav li ul {
	padding-top: 1em;
    position:absolute;
    left:0px;
    top:45px;
    z-index:1;
}

.page-link {
	font-size: 0.9em;
    line-height:2.2em;
    text-transform: capitalize;
    letter-spacing: 0em;
    min-width: 200px;
    margin-left: -40px;
    font-weight: 400;
}

.page-link a{
    color:black;
}

nav li ul li {
    overflow:hidden;
    height:0;
    -webkit-transition:height 200ms ease-in;
    -moz-transition:height 200ms ease-in;
    -o-transition:height 200ms ease-in;
    transition:height 200ms ease-in;
}
nav ul > li:hover ul li {
    height:38px;
}

/** nav fixes for overlap would add these
.txt-center {
	margin-right: -40px;
}
.flex-column {
	margin: 0 -50px
}
.pub-column {
	padding: 0 40px;
}
**/

/* Footer ------------------------------------------------------------------------------------ */

footer {
	margin-bottom: 300px;
	background-color:var(--dark-yellow);
	filter: drop-shadow( 0px 8px 4px rgba(0, 0, 0, 0.6));
}

.bottom-nav {
	text-align: center;
	padding: 1.5em;
}

.bottom-nav li{
	display: inline-block;
	padding: 0.25em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bottom-nav a{
	color:black;
}

.footer-image {
	height: 300px;
	width: 100%;
	background-image: url("../images/footer.jpg"); /* The image used */
	background-color: black; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	position: fixed;
	bottom: 0;
	z-index: -1;

}

/* Site Width  ------------------------------------------------------------------------------ */
main {
	margin-top:300px;
	background-color: black;
}

.container-narrow {
	max-width: 1100px;
	padding: 1em 12em 2em;
	margin: 0 auto;
	background-color: white;
	min-height: calc(100vh - 939px);
}

.container-wide {
	max-width: 1100px;
	padding: 1em 2em 3em;
	margin: 0 auto;
	background-color: white;
	min-height: calc(125vh - 939px);
}

.container-full {
	width: 100%;
	padding: 1em;
}

.flex-column {
	display: flex;
	flex-wrap: wrap;
	max-width: 1100px;
	margin:0 auto;
	padding: 0 3em 2.5em;
	justify-content: center;
}

.half-column {
	width: 50%;
	padding: 3em 2em 0em;
}

.tri-column, .pub-column {
	width: 33%;
	padding: 0em 0.5em 0em;
}

.quad-column {
	width: 25%;
	padding: 0em 0.5em 0em;
}



/* images  -------------------------------------------------------------------------------------- */

.banners {
	max-width: 1100px;
	margin: 0 auto;
	padding-bottom:2em;
	background-color: white;
}

.no-image-above{
	padding-top:2em;

}

.caption {
	font-size: 0.6em;
	float: right;
	padding: 0.25em 2em; 
}

.thumbnail {
	margin-top:1.25em;
}

.photo-bg {
	background-image: url("../images/background-01.jpg"); /* The image used */
  	background-color: black; /* Used if the image is unavailable */
  	background-position: top; /* Center the image */
  	background-repeat: no-repeat; /* Do not repeat the image */
  	background-size: cover; /* Resize the background image to cover the entire container */
}

.photo-bg-2 {
	background-image: url("../images/background-02.jpg"); /* The image used */
  	background-color: black; /* Used if the image is unavailable */
  	background-position: top; /* Center the image */
  	background-repeat: no-repeat; /* Do not repeat the image */
  	background-size: cover; /* Resize the background image to cover the entire container */
}

/* timeline  ------------------------------------------------------------------------------------- */

.timeline-item{
	display: flex;
	flex-wrap: nowrap;
}

.timeline-image-container{
	width: 50%;
	border-right:solid 2.5px black;
	padding: 3.5em 5em 0;
}

.timeline-image-container img{
	max-height:300px;
    width:auto;
    max-width: 100%;
	float:right;
	box-shadow: -9px 10px 0px var(--dark-teal);
}

.timeline-data-container{
	width: 50%;
	padding: 1em 3em 5em ;
}

.timeline-description{
	padding-top:1em;
}

.timeline-item h2 {
	padding-bottom: 0.75em;
}

.timeline-image-container:before {
    content: url('../images/bullet.svg');
    display: block;
  	width: 22px;
  	float:right;
  	margin-right: -5.8em;
}

.context .timeline-event-date {
    color: var(--dark-teal);
}

/* gallery  -------------------------------------------------------------------------------------- */

.gallery-column {
	border-left: 1px solid black;
	margin-bottom: 3em;
	text-align: center;
}

.gallery-container .gallery-column:nth-child(3n+3), .gallery-container .gallery-column:last-child{
	border-right: 1px solid black;
}

.gallery-img-container{
	width: 90%;
	height: 30vw;
	max-height: 270px;
	box-shadow: 7px 7px 0px var(--dark-teal);
	margin:0 0 30px 4%;
	background-position: center;
	background-size: cover;
}

.gallery-title{
	padding: 0.5em 0 ;
}

.gallery-title a{
	font-size: 24px;
	font-family: 'Prophet',sans-serif;
	font-weight: 200;
	letter-spacing: -0.03em;
	color:black;
}




/* gallery single -------------------------------------------------------------------------------- */

.gallery-image-single, .gallery-description-single{
	width: 50%;
	margin: 1.5em 0 0 0;
	padding: 2em 2em 1em 1em;
}

/* small image lightbox */
.all-item-images {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.all-item-images .item-file {
	margin-left: auto;
	margin-right: auto;
}
.all-item-images img.thumb {
	max-width: 120px;
}

.gallery-description-single{
	padding-right: 0em;
}

.sub-nav {
	padding-top: 3em;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
}

.sub-nav img{
	width: 30px;
}

.gallery-description-single h6{
	padding:0 0 1.5em 0;
}

.gallery-description-single .gallery-category{
	padding:0 0 2.5em 0;
}

.gallery-description p a {
	font-weight: 700;
	color:var(--dark-teal);
}

.gallery-data-container {
	font-size: 0.85em;
	padding: 1em 0;
}

.data-title, .data-info{
	padding: 0;
	line-height: 1.4em;

}

.data-title{
	padding: 0 0 0.3em 0;
	font-weight: 700;
}

.data-info{
	padding: 0 0 0.75em 0;
}


/* interviews / index ---------------------------------------------------------------------------- */

.video-container {
	margin: 2em 0 0 0;
}

.vid-info-container{
	padding: 1em 0 3em 0;
}

.vid-title{
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	letter-spacing: 0em;
	font-size: 25px;
	padding: 0 0 0.2em 0;
	color: black;
}

.vid-caption{
	font-size: 1em;
	line-height: 1.5em;
}

.exhibit-items.video-container {
	padding: 56.25% 0 0 0;
    position: relative;
}

.exhibit-items.video-container iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.layout-file .video-container {
	float: none;
    margin-right: 0;
    margin-left: 0;
    text-align: none;
}

/** hide the Omeka item link under YouTube iFrames **/
.exhibit-items.video-container .exhibit-item-caption {
    display: none;
}

/* glossary -------------------------------------------------------------------------------------- */

.glossary-container{
	margin: 2em 0 ;
}

.term-container{
	padding:1em 0;
}

.term{
	font-size: 3em;
	margin: 0.5em 0 0em 0;
	padding: 0.3em 0 0.1em;
	border-top: 1px solid black;
}

.pronunciation, .part-of-speech{
	font-size: 0.85em;
	padding: 0.2em 0 0 0;
}

.pronunciation{
	color:grey;
}

.part-of-speech{
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.definition{
	padding:0.25em 0 .5em;
}



/* team -------------------------------------------------------------------------------------- */

hr {
	border: 1px solid transparent;
	border-top: solid 1px black;
	border-bottom: solid 1px white;
	margin: 2.4em 0 ;
}

h4.team-subhead{
	padding-bottom: 1em;
	font-size: 1.6em;
	line-height: 1.3em;
}


/* publications/scholarship ---------------------------------------------------------------------------------- */

.publications-container{
	text-align: center;
	padding-left: 0.25em;
}

.publications-container img {
	box-shadow: 9px 9px 0px black;
	max-height: 24em;
	width:auto; 
	margin-bottom:0.5em;
}

.pub-column img {
	box-shadow: 6px 6px 0px black;
	max-height: 16em;
	width:auto; 
	margin-bottom:0.5em;
}

.single-pub-page{
	padding:2em 0;
}

.single-pub-page .vid-caption, .exhibit-item-caption > p{
	font-size: 0.9em;
	color:grey;
	padding-top:1em;
	
}

.publications-container h3 a{
	font-size: 0.8em;
	padding:0.5em ;
}

.view-more {
	padding: 3em 0;
}

/** exhibit block fix - was messing up nav as it had height:0px despite containing a file **/
#exhibit-blocks .exhibit-block.layout-file, #exhibit-blocks .exhibit-block.layout-file-text {
	overflow: hidden
}

/* alignments ------------------------------------------------------------------------------------ */

.txt-center {
	text-align: center;
}

.xtra-pad {
	padding: 5em 8em 6em;
}

.lengthen-page{
	padding-bottom:20em;
}

.right-rule {
	border-right: 1px solid black;
}

.title-case{
	text-transform: capitalize;
	letter-spacing: 0;
}

/* Color Variables-------------------------------------------------------------------------------- */
:root {
  --dark-red: #F94B43;
  --light-red: #FA665F;
  --dark-yellow: #FFC248;
  --light-yellow: #FFD16F;
  --orange: #F69B5B;
  --dark-teal:#129696;
  --light-teal: #89BCC3;
}

.dark-yellow {
	color:var(--dark-yellow);
}

.light-red {
	color:var(--light-red);
}

.dark-red {
	color:var(--dark-red);
}

.light-teal {
	color:var(--light-teal);
}

.dark-teal {
	color:var(--dark-teal);
}

.orange {
	color:var(--orange);
}

.dark-yellow-bg {
	background-color:var(--dark-yellow);
}

.light-teal-bg {
	background-color:var(--light-teal);
}

.orange-bg {
	background-color:var(--orange);
}

.black-bg {
	background-color: black;
}

.white-bg {
	background-color: white;
}

.clear-bg {
	background-color: transparent;
}

.white {
	color: white;
}



/* MEDIA QUERIES------------------------------------------------------------------------------ */
@media only screen and (max-width: 900px){	
	
.container-narrow {
	padding: 1em 3em 3em;
}

.flex-column {
	padding: 0 1em 1em;
}

/* gallery single -------------------------------------------------------------------------------- */

.gallery-image-single, .gallery-description-single{
	width: 100%;
	margin: 2em 0 0 0;	
}

.gallery-description-single{
	padding: 3em;
}

.gallery-image-single {
	width: 100%;
	padding: 3em 3em 0 ;
}

/* publications -------------------------------------------------------------------------------- */

.publications-container img {
	height: 25em;
}

}


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

	a:hover {
		opacity: 1;
		-webkit-animation: none;
		-moz-animation: none;
		-o-animation: none;
		animation: none;
	}

	.logo h2{
		/* padding: 0.26em 0 0 1em; */
		padding: 0.35em 0 0 1em;
		text-align: left;
		width: 100%;
		font-size: 1.9em;
	}

	.logo h3 {
		top: 10px;
		left: 270px;
		font-size: 12.5px;
		line-height: 13px;
	}

	/* .logo h2 a{
		font-size:0.8em;
	}		 */

	/* .logo h3 a{
		top:17px;
		left:265px;
	} */

	nav {
		width: 100%;
		padding-right: 0em;
	}


	/* menu button ----------------------------------------------------------------------------- */

	/* menu icon */

	nav .menu-icon {
		cursor: pointer;
		display: inline-block;
		float: right;
		padding: 28px 20px;
		position: relative;
		user-select: none;
	}

	nav .menu-icon .navicon {
		background: #fff;
		display: block;
		height: 2px;
		position: relative;
		transition: background .2s ease-out;
		width: 18px;
	}

	nav .menu-icon .navicon:before,
	nav .menu-icon .navicon:after {
		background: #fff;
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		transition: all .2s ease-out;
		width: 100%;
	}

	nav .menu-icon .navicon:before {
		top: 5px;
	}

	nav .menu-icon .navicon:after {
		top: -5px;
	}

	/* menu btn */

	nav .menu-btn {
		display: none;
	}

	nav .menu-btn:checked ~ .menu-icon .navicon {
		background: transparent;
	}

	nav .menu-btn:checked ~ .menu-icon .navicon:before {
		transform: rotate(-45deg);
	}

	nav .menu-btn:checked ~ .menu-icon .navicon:after {
		transform: rotate(45deg);
	}

	nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
	nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
		top: 0;
	}


	/* menu ----------------------------------------------------------------------------- */

	nav .menu-btn:checked ~ .menu {
		height: 100vh;
	}

	nav .menu {
		clear: both;
		height: 0;
		transition: height .3s ease-out;
	}

	nav .menu {
		margin: 0;
		padding: 0;
		list-style: none;
		overflow: scroll;
		background-color: black;
			background-image: url("../images/background-03.jpg"); /* The image used */
			background-color: black; /* Used if the image is unavailable */
			background-position: top; /* Center the image */
			background-repeat: no-repeat; /* Do not repeat the image */
			background-size: cover; /* Resize the background image to cover the entire container */
	}

	.category-name, .page-link  {
		width: 100%;
	}

	.category-name {
		font-family: 'Prophet',sans-serif;
		font-weight: 200;
		color:white;
		display:block;
		font-size: 3em;
		letter-spacing: 0em;
		text-transform: capitalize;
		padding: 0.5em 0 0.4em;
	}

	nav li ul {
		padding-top: 0.3em;
		position:static;
	}

	.page-link {
		font-size: 0.4em;
		line-height: 1.2em;
		min-width: auto;
		margin-left:0;
		padding: 0.5em; 
	}

	.page-link a{
		color:black;
	}

	nav li ul li {
		overflow: scroll;
		height:auto;
	}
	nav ul > li:hover ul li {
		height:auto;
	}

	nav .dark-yellow-bg, nav .light-teal-bg, nav .orange-bg{
		background-color: transparent;
	}

	nav .dark-yellow-bg a {
		color:var(--dark-yellow);
	}

	nav .light-teal-bg a {
		color:var(--light-teal);
	}

	nav .orange-bg a {
		color:var(--orange);
	}

	/* footer ----------------------------------------------------------------------------- */

	footer {
		margin-bottom: 200px;
	}
	.footer-image {
		height: 200px;
	}


	/* styles ----------------------------------------------------------------------------- */

	h1, h1 a {
		font-size: 65px;
	}	

	h1.page-title {
		padding: 2.5em 0 0 0;
	}

	h1.index-title {
		padding: 5em 0 0 0;
		font-size: 28px;
		line-height: 1.2em;
	}

	.large-quote{
		padding-top: 0.7em ;
		font-size: 25px;
		line-height: 1.4em;
		padding-right:1em; 
		padding-left:1em;
	}

	main {
		margin-top:240px;
		background-color: black;
	}
		
	.container-narrow {
		padding: 1em 2em 3em;
	}

	.container-wide {
		padding: 1em 1em 3em;
	}

	.tri-column {
		width: 50%;
	}

	.half-column, .pub-column {
		width: 100%;
		padding: 3em 0em 0em;
	}

	.pub-column img {
		box-shadow: 9px 9px 0px black;
		max-height: 24em;
		width:auto; 
		margin-bottom:0.5em;
	}

	.gallery-image-single, .gallery-description-single{
		padding: 2em 0em 0 0em;
	}

	.gallery-image-single{
		padding-top: 0;
	}


	.timeline-image-container img{
		max-height:300px;
		width:auto;
		max-width: 100%;
		float:none;
	}

	.timeline-image-container:before {
		float:left;
		margin-left: -3em;
	}

	.timeline-item{
		flex-wrap: wrap;
	}

	.timeline-image-container{
		width: 100%;
		border-right:none;
		padding: 1em 2.2em 0;
	}

	.timeline-data-container{
		width: 100%;
		padding: 1em 2em 7em ;
	}

	.timeline-item {
		border-left:solid 2.5px black;
		margin: 0 1em;
	}


	.gallery-container .gallery-column:nth-child(3n+3), .gallery-container .gallery-column:last-child{
		border-right: none;
	}

	.gallery-container .gallery-column:nth-child(2n+2), .gallery-container .gallery-column:last-child{
		border-right: 1px solid black;
	}


	.right-rule {
		border-right: none;
	}

}