.pink { background-color: rgb(212,84,134); }
.gul { background-color: rgb(250,222,110); }
.orange { background-color: rgb(233,136,64); }

#frontpage_elements .wh250 {width: 250px; height: 250px;}
#frontpage_elements .w500h250 {width: 500px; height: 250px;}
#frontpage_elements .wh500 {width: 500px; height: 500px;}
@media only screen and (max-width: 999px) {
  #frontpage_elements .wh250 {width: 25vw; height: 25vw;}
  #frontpage_elements .w500h250 {width: 50vw; height: 25vw;}
  #frontpage_elements .wh500 {width: 50vw; height: 50vw;}
}

.fl {float: left;}
.cl {clear: left;}
.cr {clear: right;}

#frontpage_elements .w500h250 #frontpage_book_comedian,
#frontpage_500x250_image {
  filter: grayscale(100%) sepia(1) hue-rotate(5deg) contrast(1.1) saturate(1.75);
  transition: filter .4s;
}
#frontpage_elements .w500h250:hover #frontpage_book_comedian,
#frontpage_500x250_image:hover {
  filter: grayscale(0) sepia(0) hue-rotate(0deg) contrast(1) saturate(1);
}

#frontpage_next_show .show-image { 
  height: 0;
  filter: grayscale(100%) sepia(1) hue-rotate(5deg) contrast(1.1) saturate(1.75);
  opacity: 0.25; transition: all 0.4s;
}
#frontpage_next_show:hover .show-image {
  opacity: 1.0;
  filter: grayscale(0) sepia(0) hue-rotate(0deg) contrast(1) saturate(1)
}
#frontpage_next_show .show-text {
    padding: calc(250px - 97px) 10px 0;
    color: white;
    text-shadow: 1px 2px 3px black;
    text-align: center;
	opacity: 1.0;
  	transition: opacity .4s;
  	filter: saturate(1);
}
#frontpage_next_show:hover .show-text {
	opacity: 0.0;
}
#frontpage_next_show h2 {
  color: white;
  text-align: center;
}
#frontpage_elements .wh250.pink h2 {
  margin-top: 1.2em;
}
#frontpage_elements .wh250.pink h2,
#frontpage_elements .w500h250.orange h2 {
  color: white;
  text-align: center;
  font-size: 3em;
  margin-bottom: 0;
}
#frontpage_elements .w500h250.orange,
#frontpage_elements .w500h250.gul {
  text-align: center;
  color: white;
  padding-top: 5em;
}
#frontpage_elements .w500h250.gul {
  padding-top: 6em;
  text-shadow: 1px 1px 2px black;
}
@media only screen and (max-width: 999px) {
  #frontpage_next_show .show-text {
    padding: calc(25vw - 9.7vw) 1vw 0;
    text-shadow: 0.1vw 0.2vw 0.3vw black;
  }
  #frontpage_elements .w500h250.gul {
    text-shadow: 0.1vw 0.1vw 0.2vw black;
  }
}