.modal__wrapper--example-theme { background: rgba(0, 0, 0, 0.8); }

.modal__wrapper--example-theme.is-invisible {
  -webkit-animation: example__hide-bg .5s;
  animation: example__hide-bg .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.modal__wrapper--example-theme.is-invisible .modal__content {
  -webkit-animation: example__hide .5s;
  animation: example__hide .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.modal__wrapper--example-theme.is-visible .modal__content {
  -webkit-animation: example__show .3s;
  animation: example__show .3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.modal__wrapper--example-theme .modal__content {
   -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

/*
 * Custom animations
 */
@-webkit-keyframes 
example__hide {  0% {
}
 50% {
}
 100% {
 -webkit-transform: translate3d(0, -50%, 0);
 transform: translate3d(0, -50%, 0);
 opacity: 0;
 z-index: -1;
}
}
@keyframes 
example__hide {  0% {
}
 50% {
}
 100% {
 -webkit-transform: translate3d(0, -50%, 0);
 transform: translate3d(0, -50%, 0);
 opacity: 0;
 z-index: -1;
}
}
 @-webkit-keyframes 
example__hide-bg {  0% {
}
 50% {
}
 100% {
 background: none;
 z-index: -1;
}
}
 @keyframes 
example__hide-bg {  0% {
}
 50% {
}
 100% {
 background: none;
 z-index: -1;
}
}
 @-webkit-keyframes 
example__show {  0% {
 -webkit-transform: translate3d(0, 50%, 0);
 transform: translate3d(0, 50%, 0);
}
 50% {
}
 100% {
 opacity: 1;
 z-index: 99999;
}
}
 @keyframes 
example__show {  0% {
 -webkit-transform: translate3d(0, 50%, 0);
 transform: translate3d(0, 50%, 0);
}
 50% {
}
 100% {
 opacity: 1;
 z-index: 99999;
}
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body { font-family:'Open Sans'}
.example__wrapper {
  width: 960px;
  margin: 0 auto;
}

.example__item {
  overflow: auto;
  border-top: 1px solid #eee;
  padding: 20px 0;
}

.example__trigger {
  width: 50%;
  float: left;
}

.example__code {
  width: 50%;
  float: right;
}

.example__code textarea {
  width: 100%;
  min-height: 150px;
}