/* FRAME */

/*
.frame-fadeinout {
    transition: opacity 500ms ease;
    -ms-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    -webkit-transition: opacity 500ms ease;
}

.frame-fadeinout.show { opacity: 1; -webkit-animation: fadein 0.5s ease; animation: fadein 0.5s ease; }
.frame-fadeinout.hide { opacity: 0; -webkit-animation: fadeout 0.5s ease; animation: fadeout 0.5s ease; }
*/

/* FADEIN */

@-webkit-keyframes fadein {
  0% { opacity: 0;  }
  100% { opacity: 1; }
}

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.frame-fadeinout.show { -webkit-animation: fadein 0.5s ease; -webkit-animation-fill-mode: forwards; animation: fadein 0.5s ease; animation-fill-mode: forwards;}

/* FADEOUT */

@-webkit-keyframes fadeout {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeout {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.frame-fadeinout.hide { -webkit-animation: fadeout 0.5s ease; -webkit-animation-fill-mode: forwards; animation: fadeout 0.5s ease; animation-fill-mode: forwards;}