/* filter css for images from https://www.cssfilters.co/*/

.filter-bw {
  position: relative;
  -webkit-filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%);
  filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%);
}
.filter-bw::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
}

.filter-1977 {
  position: relative;
  -webkit-filter: contrast(110%) brightness(110%) saturate(130%);
  filter: contrast(110%) brightness(110%) saturate(130%);
}
.filter-1977::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  background: rgba(243, 106, 188, 0.3);
}

.filter-aden {
  position: relative;
  -webkit-filter: contrast(90%) brightness(120%) saturate(85%) hue-rotate(20deg);
  filter: contrast(90%) brightness(120%) saturate(85%) hue-rotate(20deg);
}
.filter-aden::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: darken;
  background: -webkit-linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(66, 10, 14, 0));
  background: linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(66, 10, 14, 0));
}


.filter-brannan {
  position: relative;
  -webkit-filter: contrast(140%) sepia(50%);
  filter: contrast(140%) sepia(50%);
}
.filter-brannan::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: lighten;
  background: rgba(161, 44, 199, 0.31);
}

.filter-brooklin {
  position: relative;
  -webkit-filter: contrast(90%) brightness(110%);
  filter: contrast(90%) brightness(110%);
}
.filter-brooklin::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(168, 223, 193, 0.4) 1, rgba(183, 196, 200, 0.2));
  background: radial-gradient(50% 50%, circle closest-corner, rgba(168, 223, 193, 0.4) 1, rgba(183, 196, 200, 0.2));
}


.filter-clarendon {
  position: relative;
  -webkit-filter: contrast(120%) saturate(125%);
  filter: contrast(120%) saturate(125%);
}
.filter-clarendon::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: rgba(127, 187, 227, 0.2);
}


.filter-earlybird {
  position: relative;
  -webkit-filter: contrast(90%) sepia(20%);
  filter: contrast(90%) sepia(20%);
}
.filter-earlybird::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(208, 186, 142, 1) 20, rgba(29, 2, 16, 0.2));
  background: radial-gradient(50% 50%, circle closest-corner, rgba(208, 186, 142, 1) 20, rgba(29, 2, 16, 0.2));
}

.filter-lofi {
  position: relative;
  -webkit-filter: contrast(150%) saturate(110%);
  filter: contrast(150%) saturate(110%);
}
.filter-lofi::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
  background: radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
}


.filter-reyes {
  position: relative;
  -webkit-filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);
  filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);
}
.filter-reyes::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  background: rgba(173, 205, 239, 1);
}

.filter-toaster {
  position: relative;
  -webkit-filter: contrast(150%) brightness(90%);
  filter: contrast(150%) brightness(90%);
}
.filter-toaster::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
  background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(15, 78, 128, 1) 1, rgba(59, 0, 59, 1));
  background: radial-gradient(50% 50%, circle closest-corner, rgba(15, 78, 128, 1) 1, rgba(59, 0, 59, 1));
}


.filter-valencia {
  position: relative;
  -webkit-filter: contrast(108%) brightness(108%) sepia(8%);
  filter: contrast(108%) brightness(108%) sepia(8%);
}
.filter-valencia::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: exclusion;
  opacity: 0.5;
  background: rgba(58, 3, 57, 1);
}