/** HTML TAG OVERRIDES **/

	@font-face {
		font-family: Poppins;
		src: url('../fonts/Poppins-Regular.ttf');
	}

	@font-face {
		font-family: Poppins;
		font-style: italic;
		src: url('../fonts/Poppins-Italic.ttf');
	}

	@font-face {
		font-family: Poppins;
		font-weight: bold;
		src: url('../fonts/Poppins-Bold.ttf');
	}

	@font-face {
		font-family: Poppins;
		font-style: italic;
		font-weight: bold;
		src: url('../fonts/Poppins-BoldItalic.ttf');
	}

	html {
		font-family: "Poppins", sans-serif;
		font-size: 1em;
		height: 100%;
	}

	body {
		margin-left: 40px;
		margin-right: 40px;
		color: #444;
		background-color: #ffffff;
	}

	a:link,
	a:visited,
	a:active {
		color: black;
		text-decoration: none;
	}

	a:link .artTitle,
	a:visited .artTitle,
	a:active .artTitle {
		color: black;
		text-decoration: underline;
	}

	#homepage {
		background: #e8e5dd;
	}


	/** HEADER AND MAIN MENU **/
	#header {
		position: fixed;
		display: inline-block;
		top: 0;
		left: 20px;
		right: 50px;
		z-index: 10;
		height: 50px;
		padding-top: 0.3em;
		padding-bottom: 0.8em;
		font-size: 1.2em;
		font-weight: bold;
		font-family: "Poppins", sans-serif;
		font-weight: 300;
		font-style: normal;
	}

	#homepage #header {
		background: #e8e5dd;
	}

	#header ul {
		padding: 0;
	}

	#header li {
		display: inline-block;
		list-style: none;
		padding: 0 0 0 20px;
	}

	#header li a:link,
	#header li a:visited {
		text-decoration: none;
		color: black;
	}

	#header li a:hover {
		color: #0083c5;
	}

	#headerLeft {
		float: left;
	}

	#headerLeft li:nth-child(1) a {
		/* color: #0083c5; */
		color: black;
		font-weight: bold;
	}

	#headerLeft #header li:nth-child(1) a:link,
	#headerLeft li:nth-child(1) a:visited {
		/* color: #0083c5; */
		color: black;
		font-weight: bold;
	}

	#headerRight {
		float: right;
	}

	/** ---- LEFT SIDE MENU ---- **/

	#leftContainer {
		position: fixed;
		display: block;
		top: 80px;
		left: 20px;
		right: 0px;
		bottom: 40px;
		border-right: 1px solid black;
		width: 280px;
	}

	.dropdownmenuicon {
		display: none;
		visibility: hidden;
	}

	.dropdownmenu {
		position: fixed;
		display: block;
		list-style-type: none;
		z-index: 2;
		margin: 0;
		padding: 0px;
		cursor: pointer;
		font-size: 0.9em;
	}

	.dropdownmenu li {
		list-style-type: none;
		display: block;
		padding: 0px 0px 10px 0px;
	}

	.dropdownmenu li a:link {
		text-decoration: none;
		margin: 0;
		color: #444;
	}

	.dropdownmenu li a:visited {
		text-decoration: none;
		margin: 0;
	}

	.dropdownmenu li a:hover {
		color: red;
	}

	.dropdownmenuheader {
		font-weight: bold;
	}

	.dropdownmenuitem {
		margin-left: 20px;
	}

	/* --- INDEX PAGE STYLES --- */

	.artIntroduction {
		display: block;
		padding-top: 20px;
		padding-bottom: 20px;
		width: 75%;
		font-size: 1.3em;
		line-height: 1.8em;
	}

	.artDescription {
		display: block;
		font-size: .9em;
		line-height: 1.8em;
	}

	.artWork {
		position: relative;
		display: inline-block;
		width: 350px;
		max-width: 512px;
		vertical-align: top;
		margin: 5px;
	}

	.artWork img {
		width: 350px;
		max-width: 512px;
		height: auto;
	}

	.artTitle,
	.artTitle:link,
	.artTitle:active,
	.artTitle:hover,
	.artTitle:visited {
		display: block;
		font-size: 0.9em;
		font-weight: bold;
		margin-top: 0.5em;
		color: black;
	}

	.artDetails {
		display: block;
		font-size: 0.85em;
		max-width: 512px;
	}

	.artType {
		display: block;
		font-size: 0.8em;
	}

	.artSize {
		display: block;
		font-size: 0.8em;
	}

	.artYear {
		display: block;
		font-size: 0.8em;
	}

	/* --- SUB PAGE STYLES FOR FINE ART SECTIONS PRIMARILY --- */



	.artWrapper {
		display: block;
	}

	:root {
		--opacity: 0.5;
	}

	.artWrapper:after {
		content: "";
		display: block;
		position: absolute;
		top: 15px;
		left: calc(50% - 35px);
		height: 10px;
		width: 50px;
		background-image: url("/images/watermark.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		opacity: 0.2;
	}

	#projectPage .artPageTitle {
		font-size: 1.3em;
		font-weight: bold;
		color: #6699CC;
	}

	#projectPage .artIntroduction {
		font-size: 1.1em;
	}

	#projectPage .artWork {
		display: inline-block;
		width: 90%;
	}

	#projectPage img {
		border: 2px solid black;
		max-width: 768px;
		cursor: hand;
		cursor: zoom-in;
		width: 85%;
	}

	#projectPage .artDescription {
		display: block;
		font-size: 0.9em;
		line-height: 1.5em;
		width: 85%;
	}

	#projectPage .artTitle,
	#projectPage .artTitle:link,
	#projectPage .artTitle:active,
	#projectPage .artTitle:hover,
	#projectPage .artTitle:visited {
		display: block;
		font-size: 0.9em;
		font-weight: bold;
		margin-top: -8px;
		max-width: 85%;
		color: black;
	}

	#projectPage .artDetails {
		display: inline-block;
		vertical-align: top;
		margin-top: 0px;
		margin-bottom: 0px;
		font-size: 0.8em;
	}

	#projectPage .artMedia {
		display: inline-block;
		font-size: 0.8em;
		width: 100%;
		max-width: 512px;
		margin-top: 0px;
		margin-bottom: 15px;
	}

	/* ------------------------------------------------------------------------------- */

	.hoverCaption {
		position: relative;
		top: -500px;
		height: 500px;
		width: 500px;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		visibility: none;
		opacity: 0;
		transition: opacity 0.3s;
		cursor: pointer;
		text-align: center;
		vertical-align: top;
	}

	.hoverCaption:hover {
		visibility: visible;
		opacity: 1;
	}

	.hoverTitle {
		padding: .8em .8em 0em .8em;
		font-weight: bold;
		font-size: .7em;
	}

	.hoverMedia {
		padding: .8em .8em 0em .8em;
		font-size: .5em;
	}

	.hoverIcon {
		padding: .8em .8em 0em .8em;
		font-size: .8em;
	}

	/* MAIN and LEFT and RIGHT CONTAINERS */

	#main {
		position: relative;
		top: 120px;
		bottom: 60px;
		overflow-y: auto;
		overflow-x: hidden;
		text-align: center;
		font-size: 0.9em;
	}

	.rightContainer {
		position: fixed;
		top: 80px;
		left: 315px;
		right: 0px;
		bottom: 80px;
		overflow-y: auto;
	}

	.rightContainer img {
		vertical-align: top;
		margin-right: 15px;
		margin-bottom: 15px;
		border: 1px solid black;
		/* max-width: 600px; */
	}

	.rightContainer .full {
		width: 80%;
	}

	.rightContainer video {
		border: 1px solid black;
		vertical-align: top;
		margin-right: 15px;
		margin-bottom: 15px;
	}

	.rightContainer h1 {
		font-size: 1.2em;
		color: #0083c5;
		padding: 0.0em 0em 0em 0em;
		margin: 0;
		padding-top: 0;
	}

	.rightContainer h2 {
		font-size: 1.1em;
		color: #0083c5;
		padding: 0.0em 0em 0em 0em;
		margin: 0;
		padding-top: 0;
	}

	.rightContainer h3 {
		font-size: 1em;
		color: #0083c5;
		padding: 0;
		padding-top: 15px;
		padding-bottom: 7px;
		margin: 0;
	}

	.rightContainer p {
		font-size: 0.95em;
		margin-top: 5px;
		margin-bottom: 15px;
		max-width: 768px;
		line-height: 1.9em;
	}

	.rightContainer li {
		font-size: 0.9em;
		list-style: square;
		line-height: 1.9em;
	}

	/* TALK PAGE SPECIFICS */

	.rightContainer .talkName {
		padding: 0;
		margin: 0;
		margin-top: 1.0em;
		font-size: 0.9em;
		color: #0083c5;
		font-weight: bold;
	}

	.rightContainer .confName {
		padding: 0;
		margin: 0;
		font-size: 0.9em;
		font-weight: bold;
	}

	.rightContainer .confDate {
		padding: 0;
		margin: 0;
		font-size: 0.8em;
	}

	.rightContainer .confLoca {
		padding: 0;
		margin: 0;
		font-size: 0.8em;
	}

	.rightContainer .confLink {
		padding: 0;
		margin: 0;
		font-size: 0.8em;
	}

	.rightContainer .mItem {
		display: inline-block;
		position: relative;
		box-shadow: 3px 3px 5px #888888;
		width: 200px;
		height: 200px;
		margin: 15px;
		padding: 0px;
		border-radius: 15px;
		-webkit-border-radius: 15px;
	}

	span.mText {
		background: rgba(0, 0, 0, 0.75);
		color: white;
		cursor: pointer;
		display: table;
		position: absolute;
		top: 1px;
		right: -1px;
		opacity: 0;
		height: 100%;
		width: 100%;
		-webkit-transition: opacity 500ms;
		-moz-transition: opacity 500ms;
		-o-transition: opacity 500ms;
		transition: opacity 500ms;
		border-radius: 10px;
	}

	.rightContainer a:hover span.mText {
		opacity: 1;
	}

	span.mText span {
		display: table-cell;
		text-align: center;
		padding: 7px;
		vertical-align: middle;
	}

	.rightContainer .mImage {
		width: 100%;
		height: 100%;
		box-shadow: 3px 3px 5px #666;
		border-radius: 10px;
		-webkit-border-radius: 10px;
	}

	.dialog {
		position: absolute;
		background: white;
		text-align: center;
		/* top: 100px;
		left: 0px;
		right: 0px;
		bottom: 40px; */
		z-index: 1000;
		cursor: zoom-out;
		cursor: hand;
		animation: fadeInAnimation ease 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	@keyframes fadeInAnimation {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}


	.dialogImage {
		position: absolute;
		top: 60%;
		left: 50%;
		width: 100%;
		height: 100%;
		max-height: 1024px;
		max-width: 1024px;
		transform: translate(-50%, -50%);
		cursor: pointer;
	}

	.closeImage {
		position: absolute;
		top: 50%;
		left: 50%;
		max-height: 24px;
		max-width: 24px;
		transform: translate(-50%, 0%);
		cursor: pointer;
	}

	/* MODAL DIALOG*/

	.modal {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: none;
		justify-content: center;
		border: 1px solid black;
		background-color: rgba(255, 255, 255, 0.85);
		padding: 10em;
		z-index: 100;
		cursor: pointer;

	}

	.modal-image {
		opacity: 1.0;
		width: 100%;
		height: auto;
		cursor: pointer;
	}

	.modal-caption {
		cursor: pointer;
		color: white;
		margin-left: 10px;
		padding-left: 10px;
		padding-top: 10px;
		width: 150px;
		background-color: rgba(255, 255, 255, 0.85);
	}

	/** PAGE FOOTER **/
	#footer {
		z-index: 3;
		background-color: #ffffff;
		left: 20px;
		right: 30px;
		bottom: 0;
		height: 50px;
		position: fixed;
	}

	.footerLeft {
		float: left;
		font-size: 12px;
		vertical-align: bottom;
		padding-top: 19px;
		padding-right: 15px;
	}

	.footerLeft a {
		text-decoration: none;
	}

	.footerRight {
		border: none;
		float: right;
		text-align: right;
		width: 300px;
		padding-top: 15px;
		padding-right: 15px;
	}

	.footerRight img {
		border: none;
	}

	.footerImage {
		padding-top: 3px;
		padding-right: 5px;
		cursor: pointer;
	}

	#homepage #footer {
		background: #e8e5dd;
	}