body {
	display:block;
	margin:0;
	padding:0;
	color:#ffffff;
/*	background-color: #fafafa;*/
	background: rgb(213,255,217);
	background: repeating-linear-gradient(14deg, rgba(213,255,217,1) 0vmin, rgba(253,220,255,1) 100vmin, rgba(255,251,198,1) 200vmin, rgba(172,216,255,1) 300vmin, rgba(213,255,217,1) 400vmin);
	overflow:hidden;
	overflow-y:scroll;
	font-family: Garamond, sans-serif;
	font-size:3vmin;
	min-height:4000vmin;
}
a {
	color:#ffffff;
}

.material-symbols-outlined {
	padding-right: 1vmin;
	font-size: 3vmin;
}	

.menu{
	position:fixed;
	right:2vmin;
	top:2vmin;
	z-index:100;
}

.menu .material-symbols-outlined{
	font-size:4vmin;
	color:#000000;
	text-align:right;
	position:fixed;
	top:4.3vmin;
	right:4vmin;
}

.menu_items {
	display:none;
	background-color: #fef2fd;
	width:45vmin;
}

.menu_items a {
	color: black;
	padding: 2vmin;
	text-decoration: none;
	text-align:center;
	display: block;
	font-size:4vmin;
}

.menu_items a:hover{
	color: #fef2fd;
	background-color: black;
}


.menu:hover .menu_items {
	display: block;
}

.content {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 6vmin;
	justify-content:center;
	padding: 12vmin;
}

.logo {
	position: relative;
	display:inline;
	grid-column: span 1;
	grid-row: span 2;
	overflow: hidden;
	align-self: start;
	justify-self:center;
}
.logo img{
	max-width:85vmin;
	position: relative;
}

.release {
	position: relative;
	display:inline;
	grid-column: span 1;
	grid-row: span 4;
	overflow: hidden;
	background-color: #000000;
	align-self: start;
}

.release img{
	width:100%;
	margin-bottom: -1vmin;
	position: relative;
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-ms-filter: blur(0px);
	-o-filter: blur(0px);
	filter: blur(0px);
	transform: scale(1);
	-webkit-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	opacity:1;
}

.release_title {
	font-size:7vmin;
	padding: 2vmin;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	overflow:hidden;
	-webkit-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.release:hover img {
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  /*transform: scale(3);*/
  opacity:0.4;
}

.release:hover .release_title {
  -webkit-opacity: 1;
  opacity: 1;
}

.small_release_no_image {
	align-self: start;
	grid-column: span 1;
	grid-row: span 2;
	overflow: hidden;
	position: relative;
	background-color: #ffffff;
}	
.small_release_title_no_image{
	font-size:3vmin;
	padding:2vmin;
	color:#000000;
}
.small_release_title_no_image a:hover {
	text-decoration:underline;
}

.small_release {
	align-self: start;
	grid-column: span 1;
	grid-row: span 2;
	overflow: hidden;
	position: relative;
	background-color: #000000;
}

.small_release img{
	width:100%;
	margin-bottom: -1vmin;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px);
  opacity:1;
  transform: scale(1);
	-webkit-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out; 
}

.small_release_title {
	font-size:3vmin;
	padding: 2vmin;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	overflow:hidden;
	-webkit-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.small_release:hover img {
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  /*transform: scale(3);*/
  opacity:0.4;
}

.small_release:hover .small_release_title {
  -webkit-opacity: 1;
  opacity: 1;
}

.info {
	align-self: start;
	display:inline-block;
	position:relative;
	grid-column: span 1;
	grid-row: span 1 !important;
	overflow: hidden;
	background-color: #ffeaea;
	color:#000000;
	padding:2vmin;
}
.info_no_image {
	align-self: start;
	display:inline-block;
	position:relative;
	grid-column: span 1;
	grid-row: span 1;
	overflow: hidden;
	background-color: #ffeaea;
	color:#000000;
	padding:2vmin;
}
.info_no_image a {
	color:#000000;
}
.info_no_image a:hover{
	text-decoration:underline;
}

.info img{
	width:calc(100% + 4vmin);
	margin:-2vmin;
	margin-bottom:-3vmin;
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-ms-filter: blur(0px);
	-o-filter: blur(0px);
	filter: blur(0px);
	opacity:1;
	transform: scale(1);
	-webkit-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out; 
}
.info_text_no_image{
	font-size:3vmin;
	color:#000000;
}
.info_text {
	position:absolute;
	top:2vmin;
	opacity:0;
	font-size:3vmin;
}
.info:hover img {
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  /*transform: scale(3);*/
  opacity:0.4;
}

.info:hover .info_text {
  -webkit-opacity: 1;
  opacity: 1;
}

.date_no_image {
	align-self: start;
	display:inline-block;
	position:relative;
	grid-column: span 1;
	grid-row: span 1;
	overflow: hidden;
	background-color: #f9fef9;
	padding:2vmin;
}
.date_text_no_image a {
	color:#000000;
}
.date_text_no_image {
	color:#000000;
}
.date_text_no_image a:hover{
	text-decoration:underline;
}

.date {
	align-self: start;
	display:inline-block;
	position:relative;
	grid-column: span 1;
	grid-row: span 1;
	overflow: hidden;
	background-color: #000000;
	padding:2vmin;
}
.date img{
	width:calc(100% + 4vmin);
	margin:-2vmin;
	margin-bottom:-3vmin;
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-ms-filter: blur(0px);
	-o-filter: blur(0px);
	filter: blur(0px);
	opacity:1;
	transform: scale(1);
	-webkit-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out; 
}

.date_text {
	position:absolute;
	top:2vmin;
	opacity:0;
	font-size:3vmin;
}
.date:hover img {
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  /*transform: scale(3);*/
  opacity:0.4;
}

.date:hover .date_text {
  -webkit-opacity: 1;
  opacity: 1;
}


.mix {
	align-self: start;
	grid-column: span 1;
	grid-row: span 1;
	overflow: hidden;
	color:#000000;
	background-color: #fcedff;
	padding:2vmin;
	font-size:3vmin;
}

.mix a{
	color:#000000;
	text-decoration:none;
}
.mix a:hover{
	text-decoration:underline;
}

.mix img{
	width:calc(100% + 4vmin);
	margin:-2vmin;
	margin-top:2vmin;
}

.live {
	align-self: start;
	grid-column: span 1;
	grid-row: span 1;
	overflow: hidden;
	padding:2vmin;
	color:#000000;
	background-color: #eafffa;
	font-size:3vmin;
}
.live a{
	color:#000000;
	text-decoration:none;
}
.live a:hover{
	text-decoration:underline;
}

.live iframe{
	width:calc(100% + 4vmin);
	margin:-2vmin;
	margin-bottom:-3vmin;
}

.project {
	align-self: start;
	grid-column: span 1;
	grid-row: span 1;
	overflow: hidden;
	padding:2vmin;
	color:#000000;
	background-color: #f9f9ec;
	font-size:3vmin;
	position:relative;
}
.project a{
	color:#000000;
	text-decoration:none;
}
.project a:hover{
	text-decoration:underline;
}

.project img{
	width:calc(100% + 4vmin);
	margin:-2vmin;
	margin-bottom:-3vmin;
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-ms-filter: blur(0px);
	-o-filter: blur(0px);
	filter: blur(0px);
	opacity:1;
	transform: scale(1);
	-webkit-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out; 
}
.project_text{
	position:absolute;
	top:2vmin;
	opacity:0;
	font-size:3vmin;
	text-decoration:none !important;
}
.project:hover .project_text{
	-webkit-opacity: 1;
 	opacity:1;
}
.project:hover img {
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  /*transform: scale(3);*/
  opacity:0.4;
}

.project iframe{
	width:calc(100% + 4vmin);
	margin:-2vmin;
	margin-bottom:-3vmin;
}



.post {
	align-self: start;
	grid-column: span 1;
	grid-row: span 1;
	overflow: hidden;
	padding:2vmin;
	color:#000000;
	background-color: #ffffff;
	font-size:2vmin;
}
.post_title{
	font-size:7vmin;
	font-style:normal;
	padding-bottom:2vmin;
}
.post a{
	color:#000000;
	text-decoration:none;
	font-style:normal;
}
.post a:hover{
	text-decoration:underline;
}

.post img{
	width:calc(50% - 1vmin);
	margin:0vmin;
	margin-bottom:0vmin;
	float:right;
	padding-left:2vmin;
	padding-bottom:2vmin;
}
.post iframe{
	float:right;
	width:calc(50% - 1vmin) !important;
	margin:0vmin;
	margin-bottom:0vmin;
	padding-bottom:2vmin;
}
.quote {
	font-style:italic;
	padding-bottom:2vmin;
}	

.tall {
	grid-row: span 3;
}

.wide {
	grid-column: span 1;
}

.cancelled {
	text-decoration:line-through;
}

.historic {
	opacity:0.5;
}
/* media queries for smaller screens */

@media only screen and (min-width: 48em) {
  .content{ 
    grid-template-columns: 1fr 1fr;
  }
  .date, .mix{
	grid-column:span 1;
  }
  .release, .logo, .wide, .post{
    grid-column:span 2;
  }
  .logo img{
	  width:96vmin;
  }
}

@media only screen and (min-width: 64em) {
  .content{ 
    grid-template-columns: 1fr 1fr 1fr; /*repeat(auto-fill, minmax(10em, 45vmin));*/
  }
  .date, .mix {
	grid-column:span 1;
  }
  .release, .wide{
    grid-column:span 2;
  }
  .logo,.post{
	grid-column:span 3;
  }
}

@media only screen and (min-width: 80em) {
  .content{ 
    grid-template-columns: repeat(auto-fill, minmax(10em, 45vmin));
  }
  .date, .mix {
	grid-column:span 1;
  }
  .release, .wide{
    grid-column:span 2;
  }
  .logo,.post{
	grid-column: 1/-1;
  }
}