/* Dialog Animation */

.dialog .ui {
  visibility: hidden;
  opacity: 0;
  
  transform: translateY(100%);
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -o-transform: translateY(100%);
  -ms-transform: translateY(100%);
  
  transition: visibility 0s ease .4s, transform .4s ease, opacity .4s ease;
  -moz-transition: visibility 0s ease .4s, -moz-transform .4s ease, opacity .4s ease;
  -webkit-transition: visibility 0s ease .4s, -webkit-transform .4s ease, opacity .4s ease;
  -o-transition: visibility 0s ease .4s, -o-transform .4s ease, opacity .4s ease;
  -ms-transition: visibility 0s ease .4s, -ms-transform .4s ease, opacity .4s ease;
}

.dialog:target .ui {
  visibility: visible;
  opacity: 1;
  
  transform: none;
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  
  transition: visibility 0s ease, transform .4s ease, opacity .4s ease;
  -moz-transition: visibility 0s ease, -moz-transform .4s ease, opacity .4s ease;
  -webkit-transition: visibility 0s ease, -webkit-transform .4s ease, opacity .4s ease;
  -o-transition: visibility 0s ease, -o-transform .4s ease, opacity .4s ease;
  -ms-transition: visibility 0s ease, -ms-transform .4s ease, opacity .4s ease;
}

@keyframes bounce {
  25% { top: 12%; bottom: 12%; left: 12%; right: 12%; width: 76%; height: 76%; }
  50% { top: 15%; bottom: 15%; left: 15%; right: 15%; width: 70%; height: 70%; }
  75% { top: 12%; bottom: 12%; left: 12%; right: 12%; width: 76%; height: 76%; }
  100% { top: 15%; bottom: 15%; left: 15%; right: 15%; width: 70%; height: 70%; }
}

@-moz-keyframes bounce {
  25% { top: 12%; bottom: 12%; left: 12%; right: 12%; width: 76%; height: 76%; }
  50% { top: 15%; bottom: 15%; left: 15%; right: 15%; width: 70%; height: 70%; }
  75% { top: 12%; bottom: 12%; left: 12%; right: 12%; width: 76%; height: 76%; }
  100% { top: 15%; bottom: 15%; left: 15%; right: 15%; width: 70%; height: 70%; }
}

@-webkit-keyframes bounce {
  25% { top: 12%; bottom: 12%; left: 12%; right: 12%; width: 76%; height: 76%; }
  50% { top: 15%; bottom: 15%; left: 15%; right: 15%; width: 70%; height: 70%; }
  75% { top: 12%; bottom: 12%; left: 12%; right: 12%; width: 76%; height: 76%; }
  100% { top: 15%; bottom: 15%; left: 15%; right: 15%; width: 70%; height: 70%; }
}

@-o-keyframes bounce {
  25% { top: 12%; bottom: 12%; left: 12%; right: 12%; width: 76%; height: 76%; }
  50% { top: 15%; bottom: 15%; left: 15%; right: 15%; width: 70%; height: 70%; }
  75% { top: 12%; bottom: 12%; left: 12%; right: 12%; width: 76%; height: 76%; }
  100% { top: 15%; bottom: 15%; left: 15%; right: 15%; width: 70%; height: 70%; }
}