.effects {
  background: rgba(255, 255, 255, 0.2);
  padding: 1em;
  max-width: 12em;
  margin: 2em auto 0;
}

.effects ul {
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
}

.effects ul li {
  margin: 0 0 0.5em 0;
}

.effects ul li:last-of-type {
  margin-bottom: 0;
}

.effects ul li a {
  padding: 0.5em;
  display: block;
  border: 1px solid #eee;
}

.effects ul li a:hover {
  background: rgba(255, 255, 255, 0.5);
}

.effects ul li a.selected {
  color: #c94e50;
  background: rgba(255, 255, 255, 0.2);
  border-color: #c94e50;
}

.button-wrap {
  padding: 2.5em 0 0;
  font-size: 1.25em;
}

.dialog,
.dialog__overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.dialog {
  position: fixed;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: none;
}

.dialog__overlay {
  position: absolute;
  z-index: 99999;
  background: rgba(55, 58, 71, 0.7);
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -moz-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.dialog--open .dialog__overlay {
  opacity: 1;
  pointer-events: auto;
}

.dialog__content {
  width: 50%;
  max-width: 560px;
  min-width: 290px;
  background: #fff;
  padding: 4em;
  text-align: center;
  position: relative;
  z-index: 999999;
  opacity: 0;
}

.dialog--open .dialog__content {
  pointer-events: auto;
}

.dialog h2 {
  margin: 0;
  font-weight: 400;
  font-size: 2em;
  padding: 0 0 1em;
  margin: 0;
  font-family: 'PFDinTextCondPro';
}

.sandra .dialog.dialog--open .dialog__content,
.sandra .dialog.dialog--close .dialog__content {
  -moz-animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.39, .575, .565, 1);
}

.sandra .dialog.dialog--open .dialog__content {
  -moz-animation-name: sandra-open;
  -webkit-animation-name: sandra-open;
  animation-name: sandra-open;
}

.sandra .dialog.dialog--close .dialog__content {
  -moz-animation-name: sandra-close;
  -webkit-animation-name: sandra-close;
  animation-name: sandra-close;
}

@-moz-keyframes sandra-open {
  0% {
    opacity: 0;
    -moz-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
  }

  100% {
    opacity: 1;
    -moz-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes sandra-open {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes sandra-open {
  0% {
    opacity: 0;
    -moz-transform: scale3d(1.1, 1.1, 1);
    -ms-transform: scale3d(1.1, 1.1, 1);
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
  }

  100% {
    opacity: 1;
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-moz-keyframes sandra-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -moz-transform: scale3d(0.9, 0.9, 1);
    transform: scale3d(0.9, 0.9, 1);
  }
}

@-webkit-keyframes sandra-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.9, 0.9, 1);
    transform: scale3d(0.9, 0.9, 1);
  }
}

@keyframes sandra-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -moz-transform: scale3d(0.9, 0.9, 1);
    -ms-transform: scale3d(0.9, 0.9, 1);
    -webkit-transform: scale3d(0.9, 0.9, 1);
    transform: scale3d(0.9, 0.9, 1);
  }
}

.sally .dialog__overlay {
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.sally .dialog.dialog--open .dialog__content,
.sally .dialog.dialog--close .dialog__content {
  -moz-animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.sally .dialog.dialog--open .dialog__content {
  -moz-animation-name: sally-open;
  -webkit-animation-name: sally-open;
  animation-name: sally-open;
  -moz-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.sally .dialog.dialog--close .dialog__content {
  -moz-animation-name: sally-close;
  -webkit-animation-name: sally-close;
  animation-name: sally-close;
}

@-moz-keyframes sally-open {
  0% {
    opacity: 0;
    -moz-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
  }

  100% {
    opacity: 1;
    -moz-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes sally-open {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes sally-open {
  0% {
    opacity: 0;
    -moz-transform: scale3d(0, 0, 1);
    -ms-transform: scale3d(0, 0, 1);
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
  }

  100% {
    opacity: 1;
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-moz-keyframes sally-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -moz-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1);
  }
}

@-webkit-keyframes sally-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1);
  }
}

@keyframes sally-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -moz-transform: scale3d(0.5, 0.5, 1);
    -ms-transform: scale3d(0.5, 0.5, 1);
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1);
  }
}

.don .dialog.dialog--open .dialog__content,
.don .dialog.dialog--close .dialog__content {
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -moz-animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.don .dialog.dialog--open .dialog__content {
  -moz-animation-name: don-open !important;
  -webkit-animation-name: don-open !important;
  animation-name: don-open !important;
}

.don .dialog.dialog--close .dialog__content {
  -moz-animation-name: don-close;
  -webkit-animation-name: don-close;
  animation-name: don-close;
  -moz-animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -moz-animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-moz-keyframes don-open {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }

  50% {
    opacity: 0.5;
    transform: translateY(-5%);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes don-open {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }

  50% {
    opacity: 0.5;
    transform: translateY(-5%);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@-webkit-keyframes don-open {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }

  50% {
    opacity: 0.5;
    transform: translateY(-5%);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@-moz-keyframes don-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-10%);
  }
}

@-webkit-keyframes don-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-10%);
  }
}

@keyframes don-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-10%);
  }
}