* {
	margin: 0;
	padding: 0;
}

#no-results-notice {
	text-align: center;
	border: 2px dashed var(--text-color);
	padding: 10vw;
	font-size: 20px;
	opacity: .3;
	margin-left: var(--grid-side-spacing);
	margin-bottom: -180px;
}
	#no-results-notice h3 {
		font-weight: 500;
	}

.shake-it {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

body {
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
	overflow-x: hidden;
	overflow-y: scroll;
	height: 100vh;

	color: var(--text-color);
	background: var(--bg-color);
	
	position: relative;
	
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	
	text-rendering: optimizelegibility;
	font-smooth: always;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
body.overlay-popup {
	overflow: hidden;
}
	body.blur > *:not(.exploded-item):not(#project-overlay) {
		filter: blur(3px);
	}

#header-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -2;
	
	transition: filter .5s, opacity 3s;
}	
body.scrolled #header-background {
	opacity: .08;
	filter: blur(3px);
}
	#header-background:before {
		background-image: radial-gradient( rgba(0,0,0,.0), var(--gradient-overlay));
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
	}
	#header-background:after {
		background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, var(--gradient-overlay) 100%);
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80vh;
		z-index: -1;
	}

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


body > a.exploded-item {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100vh;
	background: var(--bg-color);
	z-index: 1000;
}
	body > a.exploded-item img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%,-50%,0);
		max-width: 95vw;
		max-height: 95vh;
		object-fit: contain;
	}
	
	/*CLOSE POST*/
	#close-project-image {
		display: block;
		position: fixed;
		top: 20px;
		right: 20px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 30px;
		border-radius: 50px;
		background: rgba(0,0,0,.15);
		border: 2px solid rgba(255,255,255,.5);
		z-index: 10;
		cursor: pointer;
		transition: background .3s, color .3s, border .3s;
	}

	#close-project-image:hover {
		background: #fff;
		color: #000;	
		border-color: rgba(255,255,255,1);
	}
	
	#close-project-image::before,
	#close-project-image::after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%,-50%,0) rotate(45deg);
		width: 65%;
		height: 2px;
		background: #fff;
		border-radius: 25px;
		transition: background .3s, transform .3s;
	}
	#close-project-image::after {
		transform: translate3d(-50%,-50%,0) rotate(-45deg);
	}
		#close-project-image:hover:before,
		#close-project-image:hover:after {
			background: #000;
		}