.effects {
  background: rgba(255, 255, 255, .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 .5em 0
}

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

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

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

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

.button-wrap {
  padding: 2.5em 0 0;
  font-size: 1.25em
}
/* 
button.trigger {
  background: #c94e50;
  color: #fff;
  border: none
} */

.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, .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
}

.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(.9, .9, 1);
    transform: scale3d(.9, .9, 1)
  }
}

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

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

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

  100% {
    opacity: 0;
    -moz-transform: scale3d(.9, .9, 1);
    -ms-transform: scale3d(.9, .9, 1);
    -webkit-transform: scale3d(.9, .9, 1);
    transform: scale3d(.9, .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(.6, 0, .4, 1);
  -webkit-animation-timing-function: cubic-bezier(.6, 0, .4, 1);
  animation-timing-function: cubic-bezier(.6, 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(.5, .5, 1);
    transform: scale3d(.5, .5, 1)
  }
}

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

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

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

  100% {
    opacity: 0;
    -moz-transform: scale3d(.5, .5, 1);
    -ms-transform: scale3d(.5, .5, 1);
    -webkit-transform: scale3d(.5, .5, 1);
    transform: scale3d(.5, .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%);
  }
}