html {
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1.5;
  scroll-behavior: smooth;
}
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  background: url("/img/grunge-weiss.jpg");
  background-size: cover;
  background-attachment: fixed;
  hyphens: auto;
}
body::before,
body::after {
  content: " ";
  display: block;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-size: cover;
}
body::before {
  mix-blend-mode: screen;
  opacity: 0.3;
  background-image: url(img/grunge-black.jpg);
}
body::after {
  mix-blend-mode: multiply;
  opacity: 0.3;
  background-image: url(img/grunge-weiss.jpg);
}
html,
body,
main {
  margin: 0;
  padding: 0;
  background-color: white;
}
h1 {
  font-size: 4em;
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
#hauptnav {
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.1;
}
h1,
h2 {
  text-align: center;
}
#hauptnav {
  position: fixed;
  padding-left: 1.5em;
  color: white;
  mix-blend-mode: difference;
  z-index: 99999;
}
#hauptnav ul {
  list-style: none;
  padding: 0;
}
#hauptnav ul a {
  display: block;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.95, 0, 0.05, 1);
}
#hauptnav ul a:hover {
  transition: all 0.25s;
  padding-left: 1em;
}
a {
  padding: 0.25em;
  padding-left: 0;
  color: inherit;
}
section {
  text-align: center;
  padding: 2.5em 10vw 2.5em;
}
section#home {
  min-height: 35vh;
  padding: 0 15em 0 15em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: black;
  animation: pan 30s infinite alternate ease-in-out;
  background-size: 100%;
  color: white;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
}
section#home + section {
  margin-top: -30vh;
}
section > h2 {
  font-size: 3em;
}
section.neg {
  background-color: black;
  padding-top: 6em;
  padding-bottom: 6em;
  color: white;
  transform: skewY(-3deg);
}
section.neg > * {
  transform: skewY(3deg);
}
@keyframes pan {
  to {
    background-position: bottom right;
  }
}
.logo {
  font-size: 1.7em;
  margin-bottom: 1rem;
  line-height: 0.975;
  text-transform: lowercase;
  transition: all 0.2s cubic-bezier(0.95, 0, 0.05, 1);
}
.logo div {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0.5em;
}
.logo img {
  width: 1.5em;
}
.logo span,
.logo:hover span {
  max-width: 100%;
  overflow: hidden;
  display: inline-block;
  transition: max-width 0.5s cubic-bezier(0.95, 0, 0.05, 1);
}
.logo span.vokal:nth-of-type(3),
.logo:hover span.vokal:nth-of-type(3) {
  transition-delay: 0.2s;
}
.logo span.vokal:nth-of-type(4),
.logo:hover span.vokal:nth-of-type(4) {
  transition-delay: 0.4s;
}
.logo span.vokal:nth-of-type(7),
.logo:hover span.vokal:nth-of-type(7) {
  transition-delay: 0.1s;
}
.logo span.vokal:nth-of-type(10),
.logo:hover span.vokal:nth-of-type(10) {
  transition-delay: 0s;
}
.logo span.vokal:nth-of-type(14),
.logo:hover span.vokal:nth-of-type(14) {
  transition-delay: 0.5s;
}
.scrolled .logo {
  font-size: 1.25em;
}
.scrolled .logo span.vokal {
  max-width: 0.0001em;
  overflow: hidden;
  display: inline-block;
}
.deckelnav {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.deckelnav li {
  width: 1em;
  height: 1em;
  margin: 1em;
  display: grid;
  place-items: center;
  position: relative;
}
.deckelnav li a {
  color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.deckelnav li a:hover::before {
  transform: scale(1.2, 1.2);
}
.deckelnav li a::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: " ";
  background-color: red;
  -webkit-clip-path: circle(40% at 50% 50%);
  clip-path: circle(40% at 50% 50%);
}
.deckelnav li a[href="#hovestetin"]::before {
  background-color: #541113;
}
.deckelnav li a[href="#himbeer"]::before {
  background-color: #ff69b6;
}
.deckelnav li a[href="#stout"]::before {
  background-color: #222;
}
.deckelnav li a[href="#paleale"]::before {
  background-color: #9d884c;
}
.deckelnav li a[href="#saison"]::before {
  background-color: #1ca9d2;
}
.deckelnav li a[href="#redale"]::before {
  background-color: #c73133;
}
.deckelnav li a[href="#ipa"]::before {
  background-color: #5b9b3a;
}
.deckelnav li a[href="#hovestetin"]::before {
  background-color: #541113;
}
ul.slider {
  margin: 3em max(10vw, 1em);
  padding: 0;
  padding-bottom: 5em;
  min-height: 40em;
  display: block;
  margin: 10vh auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  list-style: none;
}
ul.slider .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
ul.slider .content h2 {
  font-size: 3em;
  padding: 0 0 0.1em;
  text-align: left;
  max-width: 25rem;
  border-bottom: 0.3em solid;
  margin-bottom: 0;
  letter-spacing: -0.025em;
}
ul.slider .slide-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider input {
  position: relative;
  z-index: 9999;
  margin: 2em;
  height: 1em;
  display: inline-block;
  transform: scale(1.5, 1.5);
  transform-origin: center center;
  cursor: pointer;
}
.slider input::before,
.slider input::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.95, 0, 0.05, 1);
}
.slider input:hover::before,
.slider input:hover::after {
  transform: scale(1.5, 1.5);
}
.slider input:checked::before,
.slider input:checked::after {
  transform: scale(2, 2);
}
.slider input::before {
  pointer-events: none;
  transform: scale(1.2, 1.2) rotate(90deg);
  cursor: pointer;
  -webkit-clip-path: polygon(
    49.8% 0%,
    58.8% 5.6%,
    69.1% 3.7%,
    75.1% 12.6%,
    85.4% 14.6%,
    87.4% 24.9%,
    96% 30.9%,
    94.4% 41.2%,
    100% 49.8%,
    94.4% 58.8%,
    96% 69.1%,
    87.4% 75.1%,
    85.4% 85.4%,
    75.1% 87.4%,
    69.1% 96%,
    58.8% 94.4%,
    49.8% 100%,
    41.2% 94.4%,
    30.9% 96%,
    24.9% 87.4%,
    14.6% 85.4%,
    12.6% 75.1%,
    3.7% 69.1%,
    5.6% 58.8%,
    0% 49.8%,
    5.6% 41.2%,
    3.7% 30.9%,
    12.6% 24.9%,
    14.6% 14.6%,
    24.9% 12.6%,
    30.9% 3.7%,
    41.2% 5.6%
  );
  clip-path: polygon(
    49.8% 0%,
    58.8% 5.6%,
    69.1% 3.7%,
    75.1% 12.6%,
    85.4% 14.6%,
    87.4% 24.9%,
    96% 30.9%,
    94.4% 41.2%,
    100% 49.8%,
    94.4% 58.8%,
    96% 69.1%,
    87.4% 75.1%,
    85.4% 85.4%,
    75.1% 87.4%,
    69.1% 96%,
    58.8% 94.4%,
    49.8% 100%,
    41.2% 94.4%,
    30.9% 96%,
    24.9% 87.4%,
    14.6% 85.4%,
    12.6% 75.1%,
    3.7% 69.1%,
    5.6% 58.8%,
    0% 49.8%,
    5.6% 41.2%,
    3.7% 30.9%,
    12.6% 24.9%,
    14.6% 14.6%,
    24.9% 12.6%,
    30.9% 3.7%,
    41.2% 5.6%
  );
  background-color: inherit;
  z-index: 9;
}
.slider input::after {
  z-index: 10;
  opacity: 0.3;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04MC41LDUyLjJDNzYsNTEuNyw3OS4yLDQ2LDY2LjksMzMuN3MtMTkuMy05LjEtMTguNS0xMy42czE2LjctNS40LDI3LjEsNVM4NSw1Mi43LDgwLjUsNTIuMnoiLz4KPC9zdmc+Cg==);
}
.slider * {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.slider .slide.beer {
  display: flex;
  transform: translateX(-100%);
  transition: all 0.7s cubic-bezier(0.95, 0, 0.05, 1);
}
.slider .slide.beer > * {
  flex-grow: 1;
}
.slider .slide.beer figure.beer {
  position: relative;
  max-height: 60vh;
  margin: 0;
  width: 50%;
}
.slider .slide.beer figure.beer img {
  pointer-events: none;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.slider .slide.beer figure.beer img.bottle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .slide.beer {
    display: block !important;
    height: 100%;
  }
  .slide.beer figure.beer {
    width: 100% !important;
    height: 20em;
  }
  .slide.beer .content {
    margin-top: 3em;
  }
  ul.slider {
    min-height: 24em;
    margin-bottom: 20em;
  }
}
.slider label {
  max-width: 1.5em;
  height: 100%;
  place-items: center;
  position: absolute;
  top: 0;
  z-index: 11;
  cursor: pointer;
  display: none;
  color: transparent;
}
.slider label img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}
.slider label::after {
  width: 1.5em;
  height: 3em;
}
.slider label.prev {
  left: 0;
}
.slider label.prev::after {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNC4yIDI4LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0LjIgMjguNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBwb2ludHM9IjE0LjIsMjguNCAxNC4yLDAgMCwxNC4yICIvPgo8L3N2Zz4K);
}
.slider label.next {
  right: 0;
}
.slider label.next::after {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNC4yIDI4LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0LjIgMjguNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBwb2ludHM9IjAsMCAwLDI4LjQgMTQuMiwxNC4yICIvPgo8L3N2Zz4K);
}
.slider .next {
  right: 0;
}
.slider .slide-container .slide {
  transform: translateX(-150%);
}
.slider .slide-container .slide .beer img {
  transition: all 1s cubic-bezier(0.95, 0, 0.05, 1);
  transition-delay: 0.125s;
}
.slider .slide-container .slide .beer img:nth-of-type(1) {
  transition-delay: 0.25s;
  transform: translateX(-500%) scale(1.2, 1.2);
}
.slider .slide-container .slide .beer img:nth-of-type(2) {
  transform: translateX(-500%) scale(1.2, 1.2);
}
.slider input:checked ~ .slide-container .slide {
  transform: translateX(150%);
}
.slider input:checked ~ .slide-container .slide .beer img:nth-of-type(1) {
  transform: translateX(500%) scale(1.2, 1.2);
}
.slider input:checked ~ .slide-container .slide .beer img:nth-of-type(2) {
  transform: translateX(500%) scale(1.2, 1.2);
}
.slider input:checked + .slide-container .slide {
  transform: translateX(0%);
}
.slider input:checked + .slide-container .slide .beer img:nth-of-type(1) {
  transition-delay: 0.1s;
  transform: translateX(0%) scale(1.2, 1.2);
}
.slider input:checked + .slide-container .slide .beer img:nth-of-type(2) {
  transition-delay: 0.05s;
  transform: translateX(0%) scale(1.2, 1.2);
}
.slider input:checked + .slide-container label {
  display: grid;
}
.slider dl {
  font-size: 0.65em;
  letter-spacing: 0.1em;
  margin-top: 1em;
  margin-bottom: 2em;
  clear: both;
  text-align: left;
}
.slider dt {
  height: 1.5em;
  padding: 0.5em 0 0.5em;
}
.slider dd {
  border-bottom: 1px solid;
  max-width: 17rem;
  top: -2.5em;
  margin: 0 0 -2.5em;
  padding: 0.5em 0 0.5em 8rem;
  position: relative;
}
.order-beer {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: space-around;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
  max-width: 30em;
  font-size: 1em;
  padding: 0.5em;
  border-radius: 0;
  outline: none;
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5em;
  background-color: black;
  color: white;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  border: none;
}
input[type="number"] {
  width: 1.5em;
  height: 1.5em;
  margin-right: 1em;
}
input[type="submit"],
input[type="button"] button {
  font-size: 1em;
  padding: 0.5em;
  border-radius: 0;
  outline: none;
  display: inline-block;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  border: 1px solid black;
}
blockquote {
  font-size: 2em;
}
@media (max-width: 600px) {
  blockquote {
    font-size: 1.5em;
  }
}
blockquote em {
  --color1: #ff6e5b;
  --color2: #ffa094;
  --bg-height: 40%;
  all: unset;
  background-image: linear-gradient(
    to bottom right,
    var(--color1),
    var(--color2)
  );
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}
figure.picture {
  max-width: 75vmin;
  height: 75vmin;
  display: grid;
  place-items: center;
  margin: 0 auto;
  position: relative;
}
figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
figure.picture img {
  -webkit-clip-path: polygon(0 2%, 97% 0%, 90% 98%, 10% 95%);
  clip-path: polygon(0 2%, 97% 0%, 90% 98%, 10% 95%);
}
section > p {
  margin: 2em auto;
  max-width: 60em;
  line-height: 1.85 !important;
}
footer {
  background: black;
  color: white;
  padding: 5em;
  -webkit-clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 100%);
}
address,
em {
  font-style: normal;
}
form label.radio {
  display: flex;
  align-items: center;
  text-align: left;
  max-width: 50em;
  margin: 1em auto;
}
form label.radio h1,
form label.radio h2,
form label.radio h3,
form label.radio p {
  margin: 0 0 0 0.5rem;
}
form textarea {
  min-height: 10em;
}
form input[type="radio"] {
  min-width: 1.5em;
}
.css-slider {
  list-style: none;
  padding: 0;
  width: 100%;
  height: 100%;
}
.css-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 1s cubic-bezier(0.83, 0, 0.17, 1);
}
.css-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.css-slider input {
  display: none;
}
.css-slider * {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.css-slider label {
  max-width: 3em;
  place-items: center;
  position: absolute;
  top: 50%;
  z-index: 11;
  cursor: pointer;
  display: none;
  color: transparent;
}
.css-slider label:hover::after {
  transform: scale(1.2, 1.2);
}
.css-slider label:active::after {
  animation: click 0.25s;
}
.css-slider label img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}
.css-slider label::after {
  width: 100%;
  height: 3em;
  transition: all 0.5s;
}
.css-slider label.prev {
  left: 0;
}
.css-slider label.prev::after {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNC4yIDI4LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0LjIgMjguNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBwb2ludHM9IjE0LjIsMjguNCAxNC4yLDAgMCwxNC4yICIvPgo8L3N2Zz4K);
}
.css-slider label.next {
  right: 0;
}
.css-slider label.next::after {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNC4yIDI4LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0LjIgMjguNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBwb2ludHM9IjAsMCAwLDI4LjQgMTQuMiwxNC4yICIvPgo8L3N2Zz4K);
}
.css-slider .slide-container .slide {
  transform: translate(-140%, -40%) rotate(-70deg);
  filter: drop-shadow(-20em 20em 5em transparent);
}
.css-slider input:checked ~ .slide-container .slide {
  transform: translate(140%, 40%) rotate(70deg);
}
.css-slider input:checked + .slide-container .slide {
  transform: translate(0%, 0%) rotate(0deg);
  filter: drop-shadow(-0.1em 0.1em 0.125em rgba(0, 0, 0, 0.25));
}
.css-slider input:checked + .slide-container label {
  display: grid;
}
@keyframes click {
  50% {
    transform: scale(2, 2);
  }
}
ul.teambubbles {
  display: flex;
  padding: 0;
  margin: 0;
  hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  justify-content:center;
}
ul.teambubbles li {
  list-style: none;
  flex-basis: 0;
  flex-grow: 1;
  min-width: 5em;
  max-width: calc(100% / 7);
}
ul.teambubbles li figure {
  margin: 0;
}
ul.teambubbles li figure img {
  background-color: #eee;
  width: 5em;
  height: 5em;
  border-radius: 50%;
}
ul.teambubbles li figure figcaption {
  -moz-hyphens: auto;
  hyphens: auto;
  font-size: 0.8em;
}
ul.teambubbles li figure figcaption h4 {
  margin: 0.25em 0 0.5em 0;
}
ul.teambubbles li figure figcaption p {
  font-size: 0.8em;
  margin: 0;
}
@media (max-width: 850px) {
  ul.teambubbles {
    flex-wrap: wrap;
  }
  ul.teambubbles li {
    width: 25%;
    min-width: 25%;
    max-width: none;
  }
}
@media (max-width: 600px) {
  main section#home {
    min-height: 50vh;
  }
  ul.teambubbles li {
    width: 33%;
    min-width: 33%;
  }
  ul.teambubbles li:nth-of-type(1),
  ul.teambubbles li:nth-of-type(2) {
    width: 50%;
    min-width: 50%;
  }
}
@media (max-width: 700px) {
  blockquote {
    margin: 0;
  }
  #biere .slider input[type="radio"] {
    margin: 1em;
    width: 1em;
  }
}


section article {
  background: white;
  padding:4em 10vw;
  color:black;

  max-width: 35em;
  margin: 1em auto;
  margin-bottom:2.5em;

  transform: skewY(0deg) !important;

}
section article > * {

  transform: skewY(3deg);
}
section article p {  text-align:left;
}


.button {
  background: black;
  color: white;
  padding: .75em 1.75em;
  display:inline-block;
  width:auto;
  margin: 0 auto;
  text-decoration:none;
}