:root {
	--primaryColor: #000000;
  	--accentBlue: #0069db;
  	--accentLightBlue: #4da3ff;
	--accent2: #eb17a1; /* Magenta */
	--accent3: #7cc400;
	--bgGray: #f2f2f2;
	}
	
	*{
	margin: 0;
	}
	
	html {
	  scroll-behavior: smooth;
	}

	body{
		font-size: 18px;
		line-height: 1.25em;
		background: var(--bgGray);
		margin-top: 0;
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed; 
	  	-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover;
	  	background-size: cover;
	}
	
	body, input, button, textarea{
	font-family: 'Catamaran', sans-serif;
	}

	#grayscaleFilter{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		mix-blend-mode: saturation;
	}

	p, h1, h2, h3, h4, h5{
		margin-bottom: 1em;
	}
	
	h1{
		font-size: 2.5em;
		line-height: 1em;
		color: var(--accent2);
	}

	.contentCategory{
		font-size: 1em;
		font-weight: normal;
	}

	.homepage h1{
		display: inline-block;
		line-height: 1;
	}
	
	h2{
		font-size: 1.625em;
		font-weight: 400;
		line-height: 1.25;
	}

	h3{
		font-size: 1.125em;
		font-weight: 700;
	}
	
	h4{
		font-size: 1.125em;
		font-weight: 400;
		color: #606060;
		transition: opacity 0.5s;
	}

	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2em;
		background: #ffffff;
	}
	
	nav a{
		text-decoration: none;
	}
	
	nav.desktop{
	  display: none;
	}


	nav.mobile a{
		font-size: 1.25em;
	}
	
	nav ul{
		padding: 0;
	}

	nav li{
		list-style-type: none;
		margin-top: 0;
	}
	
	nav li:nth-of-type(1), nav li:nth-of-type(2){
	  margin-bottom: 5px;
	}

	footer{
		background: var(--accent2);
		color: #ffffff;
		display: flex;
		justify-content: space-between;
	}

	input, form textarea{
		padding: 10px;
		width: calc(100% - 20px);
		font-size: 1rem;
		margin-top: 0;
		margin-bottom: 1em;
	}
	

	button[type="submit"]{
		padding:1rem 2rem;
		background-color: #000000;
		border:  none;
		color: #ffffff;
		display: inline-block;
		width: auto;
		cursor: pointer;
		transition: background-color .25s, color .25s;
		font-size: 1.25rem;
		font-weight: 400;
	}

	button[type="submit"]:hover{
		background-color: #4d4d4d;
		color: #ffffff;
	}

	form label{
		padding-bottom: 10px;
		display: block;
		font-size: 1.25rem;
		font-weight: 700;
	}

	.field-error{
		font-weight: bold;
		margin-bottom: 1em;
	}

	.red{
		color: red;
	}
	
	.white{
		color: #ffffff;
	}
	
	.blue{
		color: var(--accentBlue);
	}
	
	.magenta{
		color: var(--accent2);
	}
	
	.paddingSmall{
		padding: .5em;
	}
	
	.paddingMedium{
		padding: 1em;
	}
	
	.paddingLarge{
		padding: 1.5em;
	}

	.paddingXLarge{
		padding: 2em;
	}

	.letterSpacingNegativeSmall{
		letter-spacing: -3px;
	}

	.letterSpacingNegativeMedium{
		letter-spacing: -6px;
	}

	.letterSpacingNegativeLarge{
		letter-spacing: -12px;
	}

	.letterSpacingNegativeXLarge{
		letter-spacing: -24px;
	}

	.backgroundGray{
		background: var(--bgGray);
	}

	img{
		width: 100% !important;
		height: auto;
		margin-top: 0;
	}
	
	picture{
		margin-top: 0;
	}

	picture img{
		cursor: pointer;
	}

	a{
		color: var(--accent2);
	}

	#container{
		position: relative;
		margin: 0 auto;
		min-height: calc(100vh - 99px);
	}
	
	.hideForMobile{
		display: none;
	}

	.showForMobile{
		display: block;
	}

	.grid{
		display: grid;
	}

	.gridGapSmall{
		gap: 2em;
	}

	.gridGapMedium{
		gap: 3em;
	}

	.gridGapLarge{
		gap: 4em;
	}
	
	.homeGrid, .homeGrid *{
		margin-top: 0;
	}

	#homepageImage{
		height: calc(100vh - 140.14px);
	}

	#homepageImage.grid{
		display: grid;
	}

	#homepageImageOverlay{
		text-align: center;
		font-size: 12vw;
		font-weight: 700;
		color: var(--accent2);
		line-height: 1;
		margin-top: 10%;
		opacity: 0.9;
	}

	#homepageImageOverlay span{
		background: var(--accent2);
    	display: inline-block;
    	color: #fff;
    	padding: 0 10px;
	}
	
	#homepageImageOverlay span:first-of-type{
		padding-top: 10px;
	}
	
	#homepageImageOverlay span:last-of-type{
		padding-bottom: 6px;
	}

	.center{
		text-align: center;
	}
	
	.floatLeft{
		float: left;
	}

	.logo{
		display: inline;
	}

	.logo img{
		width: 35% !important;
		min-width: 128px;
		max-width: 150px;
	}
	
	.logo a{
		color: #ffffff;
		text-decoration: none;
		transition: all .3s ease-in-out;
	}

	.relative{
		position: relative;
	}

	.imageInfo{
		position: absolute;
		top: 50%;
  		transform: translate(0, -50%);
  		margin: 0 auto;
  		max-width: 50%;
	}

	.justifyContentCenter{
		justify-content: center;
	}

	.justifyItemsCenter{
		justify-items: center;
	}

	.alignItemsCenter{
		align-items: center;
	}
	
	.justifyContentEnd{
		justify-content: end;
	}
	
	.justifyContentStart{
		justify-content: start;
	}
	
	.required::after{
		content: ' *';
		color: red;
	}
	
	/* Font styles */
	.super-heavy {
  		font-weight: 900;
	}
	
	.super-wide {
  		font-stretch: 151%;
	}
	
	.navWrapper{
		position: absolute;
		top: calc(-100vh - 80px);
		left: 0;
		width: calc(100% - 80px);
		height: calc(100vh - 80px);
		margin-top: 0;
		background: rgba(0, 0, 0, 0.9);
		padding: 40px;
		transition: top .5s;
		z-index: 1;
	}
	
	.navWrapper.down{
		top: 0;
	}
	
	.portfolioNav{
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 1em;
		margin-top: 0;
	}
	
	.portfolioNav div{
		margin: 0;
		font-size: 2em;
		line-height: 140%;
	  }

	   .portfolioNav div a{
	  	text-decoration: none;
	  	color: #ffffff;
	  }
	  
	  .close{
		margin-left: auto;
		color: #ffffff;
	  }
	  
	  .hamburger{
		float: right;
	  }

	  .hamburger, .close{
	  	cursor: pointer;
		font-size: 1.5rem;
	  }
	  

	  #homepageHeadshot{
	  	background: url("https://michaelebner.com/images/uploads/interface-images/michaelEbner-headshot.webp") center top no-repeat;
	  	background-size: 150%;
	  	width: 50%;
	  	padding: 25% 0;
	  	border-radius: 50%;
	  	margin: 0 auto 40px auto;
	  }

	  /* CASE STUDIES */

	  #caseStudy p > strong{
	  	display: block;
	  	padding-top: 20px;
	  }

	  #caseStudy p:first-of-type > strong{
	  	padding-top: 0px;
	  }

	  #caseStudy blockquote{
	  	font-size: 1.75em;
	  	line-height: 1.125;
	  	color: var(--accent2);
	  	margin: 40px 0 20px 0;
	  }


	#caseStudy blockquote::before {
		    content: "“";
		    color: transparent;
		    font-size: 5em;
		    position: absolute;
		    margin: -35px 0 0 -60px;
		    -webkit-text-stroke-width: 2px;
		    -webkit-text-stroke-color: #c2c2c2;
		}

	  #caseStudy .quoteAuthor{
	  	font-size: 1.25em;
	  	line-height: 1.25;
	  	margin-bottom: 0;
	  }
	  
	  #caseStudy .quoteAuthorTitle{
		padding-bottom: 40px;
		/*border-bottom: 1px solid #c2c2c2;*/
		margin: 0;
	  }

	#caseStudy .credits{
		font-size: .85em;
		padding-bottom: 40px;
		border-bottom: 1px solid #c2c2c2;
	}

	#caseStudy .credits strong{
		display: inline;
	}

	  /* PORTFOLIO */
	
	.portfolioFeatureImage{
		position: relative;
		cursor: pointer;
		padding-bottom: 40px;
	}
	
	.portfolioFeatureImage img{
		margin-bottom: 15px;
	}
	
	
	.portfolioFeatureImage img.border, picture img.border{
		box-sizing: border-box;
		border: 1px solid lightgrey;
	}
	
	.portfolioFeatureTitle{
		font-size: 1.5rem;
		text-align: center;
		padding-bottom: 10px;
	}
	
	.portfolioFeatureTitle:first-of-type{
		padding-top: 0;
	}
	
	.portfolioFeatureTitle a{
		justify-content: center;
		align-content: center;
		display: grid;
		width: auto;
		height: auto;
		text-decoration: none;
		color: #000;
		line-height: 110%;
		background: rgba(255,255,255,0.9);
	}

	#portfolioImages img{
		display: block;
	}
	
	#portfolioImages .caption{
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 10px;
		font-size: .85em;
		margin-bottom: 0;
		opacity: 0.6;
		z-index: 1;
	}
	
	.previousNext{
		padding-top: 30px;
		font-size: 1em;
		text-align: right;
	}
	
	.previousNext .next span, .previousNext .previous span{
		font-size: .65em;
		color:var(--accent2);
		display: inline-block;
		padding: 5px 0;
	}
	
	.previousNext a{
		text-decoration: none;
		color: var(--accentBlue);
		padding-bottom: 5px;
		transition: all .3s ease;
	}
	
	.previousNext a:hover{
		color: var(--accent2);
		border-bottom-width: 100%;
	}
	
	.next a:hover span.bounce-right{
  		animation: bounceRight 1s infinite;
	}
	
	.previous a:hover span.bounce-left{
  		animation: bounceLeft 1s infinite;
	}
	
	@keyframes bounceLeft {
	  0%, 20%, 50%, 80%, 100% {
		transform: translateX(0);
	  }
	  40% {
		transform: translateX(-30px);
	  }
	  60% {
		transform: translateX(-15px);
	  }
	}
	
	@keyframes bounceRight {
	  0%, 20%, 50%, 80%, 100% {
		transform: translateX(0);
	  }
	  40% {
		transform: translateX(30px);
	  }
	  60% {
		transform: translateX(15px);
	  }
	}

	#caseStudy .previousNext{
		text-align: left;
	}
	
	.digitalMenu{
		margin-bottom: 20px;
	}
	
	.digitalMenu button{
		background-color: #ffffff;
		border: none;
		margin-right: 20px;
		font-size: 1.25em;
		cursor: pointer;
		padding: 0;
	}
	
	.digitalMenu button.active{
		border-bottom: 1px solid black;
	}
	
	/* Video --------------------*/
	  .wrapper{
	    display:table;
	    width:auto;
	    position:relative;
	    width:100%;
		}

	  .playpause {
	    background-image:url(https://michaelebner.com/images/uploads/interface-images/play.png);
	    background-repeat:no-repeat;
	    width:50%;
	    height:50%;
	    position:absolute;
	    left:0%;
	    right:0%;
	    top:0%;
	    bottom:20%;
	    margin:auto;
	    background-size:contain;
	    background-position: center;
	    cursor: pointer;
	    opacity: 0.85;
	    transition: opacity .35s;
		}

		.playpauseHide{
			opacity: 0;
		}

		/* End: Video -------------*/

		/* Begin: Portfolio -----------*/

		#portfolioImages.masonry div {
		  margin-bottom: 40px;
		}

		/* Begin:  Portfolio Modal -------------*/
		/* The Modal (background) */

		.portfolioModal {
		  display: none; /* Hidden by default */
		  position: fixed; /* Stay in place */
		  z-index: 1; /* Sit on top */
		  padding-top: 100px; /* Location of the box */
		  left: 0;
		  top: 0;
		  width: 100%; /* Full width */
		  height: 100%; /* Full height */
		  overflow: auto; /* Enable scroll if needed */
		  background-color: rgb(0,0,0); /* Fallback color */
		  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
		}

		/* Modal Content (Image) */
		.portfolio-modal-content {
		  margin: auto;
		  display: block;
		  width: 100%;
		}

		/* Caption of Modal Image (Image Text) - Same Width as the Image */
		#portfolio-modal-caption {
		  margin: auto;
		  display: block;
		  width: 80%;
		  max-width: 700px;
		  text-align: center;
		  color: #ccc;
		  padding: 10px 0;
		  height: 150px;
		}

		/* Add Animation - Zoom in the Modal */
		.portfolio-modal-content, #portfolio-modal-caption {
		  animation-name: zoom;
		  animation-duration: 0.6s;
		}

		@keyframes zoom {
		  from {transform:scale(0)}
		  to {transform:scale(1)}
		}

		/* The Close Button */
		.portfolio-modal-close {
		  position: absolute;
		  top: 15px;
		  right: 35px;
		  color: #f1f1f1;
		  font-size: 1.5rem;
		  font-weight: bold;
		  transition: 0.3s;
		}

		.portfolio-modal-close:hover,
		.portfolio-modal-close:focus {
		  color: #bbb;
		  text-decoration: none;
		  cursor: pointer;
		}

		#work, #caseStudies{
			background-color: var(--accentBlue);
		}

		.workImage{
			margin-bottom: 40px;
		}
		
		.workImage:not(:first-of-type) {
		  margin-top: 40px;
		}

		.workImage img{
			display: block;
		}

		.workImage figcaption{
			font-size: 1.5em;
			line-height: 1;
			color: #ffffff;
			padding-top: 15px;
			display: inline;
		}

		.workImage a{
			text-decoration: none;
			/*position: relative;*/
		}
		
		.workImage a:nth-of-type(2){
			position: absolute;
			margin-top: 15px;
		}
		
		.workImageOverlay{
			width: 100%;
			height: 100%;
			background: rgba(255,255,255,0.5);
		}
		
		.workImage a:first-of-type::after, .workImage a:first-of-type::before {
			content: "";
			position: absolute;
			display: block;
			border: 0px solid transparent;
			width: 0%;
			height: 0%;
			transition: all 0.3s ease;
			pointer-events: none;
		}
		
		.workImage a:first-of-type::before {
			width: 0%;
			height: 0%;
			right: 0;
			bottom: 0;
			border-bottom: 1px solid transparent;
			border-right: 1px solid transparent;
		}

		.workImage a:first-of-type::after {
			width: 0%;
			height: 0%;
			top: 0;
			left: 0;
			border-top: 1px solid transparent;
			border-left: 1px solid transparent;
		}
		
		.workImage a:first-of-type:hover::before, .workImage a:first-of-type:hover::after, .workImage a.expandFrame::before, .workImage a.expandFrame::after{
			width: calc(100% - 1px);
			height: calc(100% - 1px);
			border-color: #ffffff;
		}
		
		.bannerTag{
			position: absolute;
			color: #ffffff;
			padding: 5px 0 0 10px;
			font-size: .85em;
			border-bottom: 1px solid var(--accent2);
			transition: border-bottom 0.3s ease;
		}

		.workImage *:hover .bannerTag, .bannerTag.expandFrame{
			border-bottom: 1px solid #ffffff;
		}

	@media only screen and (min-width: 760px) {

		#cornerTriangle{
			position: absolute;
			background: black;
			height: 100px;
			width: 100%;
			transform: skew(0deg, -5deg);
			margin-top: -100px;
			color: white;
			z-index: 2;
		}

		.homepage #container{
			/*background:linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);*/
			background:rgba(255,255,255,0.8);
		}

		#homepageImageOverlay{
			font-size: 8vw;
			line-height: 1;
		}

	  #homepageHeadshot{
		  	background: url(https://michaelebner.com/images/uploads/interface-images/michaelEbner-headshot.webp) center top no-repeat;
		  	background-size: cover;
		  	width: 100%;
		  	padding: 0;
		  	border-radius: 0;
		  	margin: 0;
		  }

		#container{
			padding: 0px;
			min-height: calc(100vh - 130px);
		}

		header{
			padding: 2em 4em;
		}

		#paddingContainer{
			max-width: 1590px;
			margin: 0 auto;
		}

		.maxWidth1590{
			max-width: 1590px;
			margin: 0 auto;
		}
		
		.nonPortfolio #container{
			max-width: 1140px;
		}
		
		.grid{
			display: grid;
		}
		
		.flex{
			display: flex;
		}

		.spanAcrossColumns{
			grid-column: span 2;
		}

		.gridNoColumnGap{
			grid-column-gap: 0;
		}

		.oneColumn{
			grid-template-columns: 1fr;
		}
		
		.twoColumns{
			grid-template-columns: repeat(2, 1fr);
		}

		.threeColumns{
			grid-template-columns: repeat(3, 1fr);
		}

		
		.fourColumns{
			grid-template-columns: repeat(4, 1fr);
		}
		
		.sixColumns{
			grid-template-columns: repeat(6, 1fr);
		}
			
		
		.twoColumnsPortfolioContainer, .headerColumns{
			grid-template-columns: 2fr 5fr;
			grid-column-gap: 6em;
		}

		.colSpan2{
			grid-column: span 2
		}
		
		.colSpan3{
			grid-column: span 3
		}
		
		.colSpan4{
		grid-column: span 4;
		}

		.colSpan5{
		grid-column: span 5;
		}

		.colSpan6{
		grid-column: span 6;
		}

		.paddingSmall{
			padding: 1em;
		}
		
		.paddingMedium{
			padding: 2em;
		}
		
		.paddingLarge{
			padding: 3em;
		}

		.paddingXLarge{
			padding: 4em;
		}

		.hideForTablet{
			display: none;
		}

		.showForTablet{
			display: block;
		}

		nav.desktop{
		  display: block;
		  font-size: 1.5em;
		  float: right;
		}

		nav ul{
			display: flex;
			justify-content: flex-end;
			padding: 0;
		}
		
		.desktopMenu li{
			position: relative;
			padding: 7px;
		}
		
		.previousNext{
		  font-size: 1.25em;
		}
		
		.previousNext.grid.twoColumns{
		  grid-column: 2/4;
		}
		
		#previousNextGrid .previous{
			text-align: left;
		}
		
		#previousNextGrid .next{
			text-align: right;
		}
		
		/* Before hover: After element's top and left borders are set, same as before elements's */
		/* right and bottom borders, width and height of both elements are set to 0% */
		/* On Hover: the before and after elements's height and width increased from 0 to 100%  */
		.desktopMenu li:after,
		.desktopMenu li:before {
		  content: "";
		  position: absolute;
		  display: block;
		  border: 0px solid transparent;
		  width: 0%;
		  height: 0%;
		  transition: all 0.3s ease;
		  pointer-events: none;
		}

		.desktopMenu li:after {
		  width: 0%;
		  height: 0%;
		  top: 0;
		  left: 0;
		  border-top: 2px solid transparent;
		  border-left: 2px solid transparent;
		}

		.desktopMenu li:before {
		  width: 0%;
		  height: 0%;
		  right: 0;
		  bottom: 0;
		  border-bottom: 2px solid transparent;
		  border-right: 2px solid transparent;
		}

		.desktopMenu li:hover a{
			color: var(--accent2);
		}

		.desktopMenu li:hover::before,
		.desktopMenu li:hover::after {
		  width: calc(100% - 3px);
		  height: calc(100% - 3px);
		  border-color: var(--accent2);
		}

		nav.mobile{
			display: none;
		}

		nav li:nth-of-type(1), nav li:nth-of-type(2){
		  margin-bottom: 0;
		  margin-right: 1em;
		}

		.navWrapper{
			display: grid;
			align-items: center;
			position: relative;
			width: auto;
			height: auto;
			background: transparent;
			top: 0;
			padding: 0 0 0 0;
		}
		
		.portfolioNav{
		  display: inline-block;
	  }

	  .portfolioNav img{
	  		max-width: 100px;
	  }

	  .portfolioNav div{
	  	font-size: 1.5em;
		line-height: 140%;
	  }
	  
	  .portfolioNav div a{
	  	color: #006b99;
	  	text-decoration: none;
		opacity: 1;
		transition: opacity .25s;
	  }

	  .portfolioNav div a:hover{
		  opacity: .5;
	  }
	  
	  .hamburger, .close{
		  display: none;
	  }

	  #caseStudies .grid{
			grid-auto-columns: minmax(0, 1fr);
			grid-auto-flow: column;
			column-gap: 3%;
		}
		
	  #caseStudy blockquote{
	  	font-size: 2em;
	  }
	  
	  #work{
	  	border-bottom: 2.5em solid var(--accentBlue);
	  }

	  .workImage{
		margin-bottom: 0;
		margin-top: 0;
		position: relative;
	  }
		
		.workImage:not(:first-of-type){
			margin-top: 0;
		}
		
		footer{
		grid-template-columns: 2fr 1fr;
		grid-gap: 12em;
		}

	.portfolioFeatureImage{
		padding-bottom: 0;
	}
	
	.portfolioFeatureImage img{
		transition: opacity 0.5s;
	}
	
	.portfolioFeatureImage img:hover{
		opacity: 0.5;
	}
		
	.portfolioFeatureTitle{
		display: grid;
		font-size: 2.5rem;
		text-align: center;
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.7);
  		transition: transform 200ms ease-in;
        transform: scaleX(0);
		transform-origin: right;
		align-content: center;
		justify-content: center;
		padding: 0;
	}
	
	.portfolioFeatureImage:hover .portfolioFeatureTitle{
		transform: scaleX(1);
		transform-origin: left;
	}
	
	.portfolioFeatureTitle a{
		display: grid;
		justify-content: center;
		align-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
		color: #000;
		line-height: 110%;
	}

	/* Multi-Column Masonry */

	#portfolioImages.masonry{
		column-count: 3;
		column-gap: 60px;
	}

	#portfolioImages.masonry div {
	  margin: 0;
	  display: grid;
	  grid-template-rows: 1fr auto;
	  margin-bottom: 60px;
	  break-inside: avoid;
	}

	#portfolioImages.masonry div > img {
	  grid-row: 1 / -1;
	  grid-column: 1;
	}


	/* Portfolio Modal */
	.portfolio-modal-content {
		    width: 65% !important;
		  }
	
	.width85percent.portfolio-modal-content{
			width: 85% !important;
	}
}

@media only screen and (min-width: 940px) {
	.hideForDesktop{
			display: none;
		}

		.showForDesktop{
			display: block;
		}
		
		#homepageImageOverlay{
			font-size: 5vw;
			line-height: 1;
		}
}