/******************************
.nav-el.active anim
******************************/
@keyframes fx-el_topleft-active {
  0% {
    transform: translate3d(0%, 0%, 0);
    color: black;
  }

  33% {
    transform: translate3d(3%, 3%, 0) scale(1);
    color: black;
  }

  40% {
    transform: translate3d(3%, 3%, 0) scale(1);
    color: black;
  }

  50% {
    color: transparent;
  }

  100% {
    transform: translate3d(3%, 3%, 0) scale(20);
    color: transparent;
  }
}

@keyframes fx-el_topmid-active {
  0% {
    transform: translate3d(0%, 0%, 0);
  }

  33% {
    transform: translate3d(0%, 3%, 0) scale(1);
    color: black;
  }

  40% {
    transform: translate3d(0%, 3%, 0) scale(1);
    color: black;
  }

  50% {
    color: transparent;
  }

  100% {
    transform: translate3d(0%, 3%, 0) scale(20);
    color: transparent;
  }
}

@keyframes fx-el_topright-active {
  0% {
    transform: translate3d(0%, 0%, 0);
  }

  33% {
    transform: translate3d(-3%, 3%, 0) scale(1);
    color: black;
  }

  40% {
    transform: translate3d(-3%, 3%, 0) scale(1);
    color: black;
  }

  50% {
    color: transparent;
  }

  100% {
    transform: translate3d(-3%, 3%, 0) scale(20);
    color: transparent;
  }
}

@keyframes fx-el_btmleft-active {
  0% {
    transform: translate3d(0%, 0%, 0);
  }

  33% {
    transform: translate3d(3%, -3%, 0) scale(1);
    color: black;
  }

  40% {
    transform: translate3d(3%, -3%, 0) scale(1);
    color: black;
  }

  50% {
    color: transparent;
  }

  100% {
    transform: translate3d(3%, -3%, 0) scale(20);
    color: transparent;
  }
}

@keyframes fx-el_btmmid-active {
  0% {
    transform: translate3d(0%, 0%, 0);
  }

  33% {
    transform: translate3d(0%, -3%, 0) scale(1);
    color: black;
  }

  40% {
    transform: translate3d(0%, -3%, 0) scale(1);
    color: black;
  }

  50% {
    color: transparent;
  }

  100% {
    transform: translate3d(0%, -3%, 0) scale(20);
    color: transparent;
  }
}

@keyframes fx-el_btmright-active {
  0% {
    transform: translate3d(0%, 0%, 0);
  }

  33% {
    transform: translate3d(-3%, -3%, 0) scale(1);
    color: black;
  }

  40% {
    transform: translate3d(-3%, -3%, 0) scale(1);
    color: black;
  }

  50% {
    color: transparent;
  }

  100% {
    transform: translate3d(-3%, -3%, 0) scale(20);
    color: transparent;
  }
}

#el-topleft.active {
  animation: fx-el_topleft-active 1.5s 1 ease-in-out forwards;
  -moz-animation: fx-el_topleft-active 1.5s 1 ease-in-out forwards;
  -webkit-animation: fx-el_topleft-active 1.5s 1 ease-in-out forwards;
}

#el-topmid.active {
  animation: fx-el_topmid-active 1.5s 1 ease-in-out forwards;
  -moz-animation: fx-el_topmid-active 1.5s 1 ease-in-out forwards;
  -webkit-animation: fx-el_topmid-active 1.5s 1 ease-in-out forwards;
}

#el-topright.active {
  animation: fx-el_topright-active 1s 1 ease-in-out forwards;
  -moz-animation: fx-el_topright-active 1s 1 ease-in-out forwards;
  -webkit-animation: fx-el_topright-active 1s 1 ease-in-out forwards;
}

#el-btmleft.active {
  animation: fx-el_btmleft-active 1s 1 ease-in-out forwards;
  -moz-animation: fx-el_btmleft-active 1s 1 ease-in-out forwards;
  -webkit-animation: fx-el_btmleft-active 1s 1 ease-in-out forwards;
}

#el-btmmid.active {
  animation: fx-el_btmmid-active 1s 1 ease-in-out forwards;
  -moz-animation: fx-el_btmmid-active 1s 1 ease-in-out forwards;
  -webkit-animation: fx-el_btmmid-active 1s 1 ease-in-out forwards;
}

#el-btmright.active {
  animation: fx-el_btmright-active 1s 1 ease-in-out forwards;
  -moz-animation: fx-el_btmright-active 1s 1 ease-in-out forwards;
  -webkit-animation: fx-el_btmright-active 1s 1 ease-in-out forwards;
}

/******************************
.nav-el.inactive anim
******************************/
@keyframes fx-el_topleft-inactive {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    color: black;
  }

  25% {
    transform: translate3d(3%, 3%, 0);
    opacity: 1;
    color: black;
  }

  50% {
    opacity: 0;
    color: transparent;
  }

  100% {
    transform: translate3d(3%, 3%, 0) scale(1);
    opacity: 0;
    color: transparent;
  }
}

@keyframes fx-el_topmid-inactive {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  25% {
    transform: translate3d(0%, 3%, 0);
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translate3d(0%, 3%, 0) scale(1);
    opacity: 0;
  }
}

@keyframes fx-el_topright-inactive {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  25% {
    transform: translate3d(-3%, 3%, 0);
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translate3d(-3%, 3%, 0) scale(1);
    opacity: 0;
  }
}

@keyframes fx-el_btmleft-inactive {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  25% {
    transform: translate3d(3%, -3%, 0);
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translate3d(3%, -3%, 0) scale(1);
    opacity: 0;
  }
}

@keyframes fx-el_btmmid-inactive {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  25% {
    transform: translate3d(0%, -3%, 0);
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translate3d(0%, -3%, 0) scale(1);
    opacity: 0;
  }
}

@keyframes fx-el_btmright-inactive {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  25% {
    transform: translate3d(-3%, -3%, 0);
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translate3d(-3%, -3%, 0) scale(1);
    opacity: 0;
  }
}


#el-topleft.inactive {
  animation: fx-el_topleft-inactive 1.5s 1 ease-in-out forwards;
  -moz-animation: fx-el_topleft-inactive 1.5s 1 ease-in-out forwards;
  -webkit-animation: fx-el_topleft-inactive 1.5s 1 ease-in-out forwards;
}
#el-topmid.inactive {
  animation: fx-el_topmid-inactive 1.5s 1 ease-in-out forwards;
  -moz-animation: fx-el_topmid-inactive 1.5s 1 ease-in-out forwards;
  -webkit-animation: fx-el_topmid-inactive 1.5s 1 ease-in-out forwards;
}

#el-topright.inactive {
  animation: fx-el_topright-inactive 1.5s 1 ease-in-out forwards;
  -moz-animation: fx-el_topright-inactive 1.5s 1 ease-in-out forwards;
  -webkit-animation: fx-el_topright-inactive 1.5s 1 ease-in-out forwards;
}

#el-btmleft.inactive {
  animation: fx-el_btmleft-inactive 1.5s 1 ease-in-out forwards;
  -moz-animation: fx-el_btmleft-inactive 1.5s 1 ease-in-out forwards;
  -webkit-animation: fx-el_btmleft-inactive 1.5s 1 ease-in-out forwards;
}

#el-btmmid.inactive {
  animation: fx-el_btmmid-inactive 1.5s 1 ease-in-out forwards;
  -moz-animation: fx-el_btmmid-inactive 1.5s 1 ease-in-out forwards;
  -webkit-animation: fx-el_btmmid-inactive 1.5s 1 ease-in-out forwards;
}

#el-btmright.inactive {
  animation: fx-el_btmright-inactive 1.5s 1 ease-in-out forwards;
  -moz-animation: fx-el_btmright-inactive 1.5s 1 ease-in-out forwards;
  -webkit-animation: fx-el_btmright-inactive 1.5s 1 ease-in-out forwards;
}

/******************************
.nav-el.active reverse
******************************/
@keyframes fx-el_topleft-active_reverse {
  0% {
    transform: translate3d(3%, 3%, 0) scale(20);
    color: transparent;
  }

  50% {
    color: transparent;
  }

  60% {
    transform: translate3d(3%, 3%, 0) scale(1);
    color: black;
  }

  67% {
    transform: translate3d(3%, 3%, 0) scale(1);
    color: black;
  }

  100% {
    transform: translate3d(0%, 0%, 0);
    color: black;
  }
}

@keyframes fx-el_topmid-active_reverse {
  0% {
    transform: translate3d(0%, 3%, 0) scale(20);
    color: transparent;
  }

  50% {
    color: transparent;
  }

  60% {
    transform: translate3d(0%, 3%, 0) scale(1);
   color: black;
  }

  67% {
    transform: translate3d(0%, 3%, 0) scale(1);
    color: black;
  }

  100% {
    transform: translate3d(0%, 0%, 0);
    color: black;
  }
}

@keyframes fx-el_topright-active_reverse {
  0% {
    transform: translate3d(-3%, 3%, 0) scale(20);
    color: transparent;
  }

  50% {
    color: transparent;
  }

  60% {
    transform: translate3d(-3%, 3%, 0) scale(1);
    color: black;
  }

  67% {
    transform: translate3d(-3%, 3%, 0) scale(1);
    color: black;
  }

  100% {
    transform: translate3d(0%, 0%, 0);
    color: black;
  }
}

@keyframes fx-el_btmleft-active_reverse {
  0% {
    transform: translate3d(3%, -3%, 0) scale(20);
    color: transparent;
  }

  50% {
    color: transparent;
  }

  60% {
    transform: translate3d(3%, -3%, 0) scale(1);
    color: black;
  }

  67% {
    transform: translate3d(3%, -3%, 0) scale(1);
    color: black;
  }

  100% {
    transform: translate3d(0%, 0%, 0);
    color: black;
  }
}

@keyframes fx-el_btmmid-active_reverse {
  0% {
    transform: translate3d(0%, -3%, 0) scale(20);
    color: transparent;
  }

  50% {
    color: transparent;
  }

  60% {
    transform: translate3d(0%, -3%, 0) scale(1);
    color: black;
  }

  67% {
    transform: translate3d(0%, -3%, 0) scale(1);
    color: black;
  }

  100% {
    transform: translate3d(0%, 0%, 0);
    color: black;
  }
}


@keyframes fx-el_btmright-active_reverse {
    0% {
    transform: translate3d(-3%, -3%, 0) scale(20);
    color: transparent;
  }

  50% {
    color: transparent;
  }

  60% {
    transform: translate3d(-3%, -3%, 0) scale(1);
    color: black;
  }

  67% {
    transform: translate3d(-3%, -3%, 0) scale(1);
    color: black;
  }

  100% {
    transform: translate3d(0%, 0%, 0);
    color: black;
  }
}


#el-topleft.active_reverse {
  animation: fx-el_topleft-active_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_topleft-active_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_topleft-active_reverse 1.5s 1 ease-in-out;
}

#el-topright.active_reverse {
  animation: fx-el_topright-active_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_topright-active_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_topright-active_reverse 1.5s 1 ease-in-out;
}

#el-topmid.active_reverse {
  animation: fx-el_topmid-active_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_topmid-active_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_topmid-active_reverse 1.5s 1 ease-in-out;
}

#el-btmmid.active_reverse {
  animation: fx-el_btmmid-active_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_btmmid-active_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_btmmid-active_reverse 1.5s 1 ease-in-out;
}

#el-btmleft.active_reverse {
  animation: fx-el_btmleft-active_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_btmleft-active_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_btmleft-active_reverse 1.5s 1 ease-in-out;
}

#el-btmright.active_reverse {
  animation: fx-el_btmright-active_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_btmright-active_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_btmright-active_reverse 1.5s 1 ease-in-out;
}

/*********************************************************
.nav-el.inactive reverse
**********************************************************
Top prevent a bug on IE10 (the button jumps during anim),
use translate instead of translate3d for the first move.
*********************************************************/
@keyframes fx-el_topleft-inactive_reverse {
  0% {
    transform: translate3d(3%, 3%, 0) scale(1);
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    transform: translate3d(1%, 1%, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fx-el_topright-inactive_reverse {
  0% {
    transform: translate3d(-3%, 3%, 0) scale(1);
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    transform: translate3d(-1%, 1%, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fx-el_topmid-inactive_reverse {
  0% {
    transform: translate3d(0%, 3%, 0) scale(1);
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    transform: translate3d(0%, 1%, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fx-el_btmmid-inactive_reverse {
  0% {
    transform: translate3d(0%, -3%, 0) scale(1);
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    transform: translate3d(0%, -1%, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fx-el_btmleft-inactive_reverse {
  0% {
    transform: translate3d(3%, -3%, 0) scale(1);
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    transform: translate3d(1%, -1%, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fx-el_btmright-inactive_reverse {
  0% {
    transform: translate3d(-3%, -3%, 0) scale(1);
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    transform: translate3d(-1%, -1%, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

#el-topleft.inactive_reverse {
  animation: fx-el_topleft-inactive_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_topleft-inactive_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_topleft-inactive_reverse 1.5s 1 ease-in-out;
}

#el-topright.inactive_reverse {
  animation: fx-el_topright-inactive_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_topright-inactive_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_topright-inactive_reverse 1.5s 1 ease-in-out;
}
#el-topmid.inactive_reverse {
  animation: fx-el_topmid-inactive_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_topmid-inactive_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_topmid-inactive_reverse 1.5s 1 ease-in-out;
}

#el-btmmid.inactive_reverse {
  animation: fx-el_btmmid-inactive_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_btmmid-inactive_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_btmmid-inactive_reverse 1.5s 1 ease-in-out;
}
#el-btmleft.inactive_reverse {
  animation: fx-el_btmleft-inactive_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_btmleft-inactive_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_btmleft-inactive_reverse 1.5s 1 ease-in-out;
}

#el-btmright.inactive_reverse {
  animation: fx-el_btmright-inactive_reverse 1.5s 1 ease-in-out;
  -moz-animation: fx-el_btmright-inactive_reverse 1.5s 1 ease-in-out;
  -webkit-animation: fx-el_btmright-inactive_reverse 1.5s 1 ease-in-out;
}

/******************************
.overlay anim
******************************/
@keyframes fx-overlay {
  0% {
    visibility: visible;
    color: transparent;
  }

  20% {
    background-color:rgba(255, 255, 255);
  }

  100% {
    visibility: visible;
    background-color: rgba(255, 255, 255);
    color: rgba(255, 255, 255);
  }
}

@keyframes fx-overlay-reverse {
  0% {
    visibility: visible;
    background-color: rgba(255, 255, 255);
    color: rgba(255, 255, 255);
  }

  40% {
    background-color: rgba(255, 255, 255);
    color: transparent;
  }

  83% {
    background-color: transparent;
  }

  100% {
    visibility: invisible;
    color: transparent;
    background-color: transparent;
  }
}


.overlay.active {
  animation: fx-overlay  1s 1s ease-in-out forwards;
  -webkit-animation: fx-overlay  1s 1s ease-in-out forwards;
  -moz-animation: fx-overlay 1s 1s ease-in-out forwards;
}

.overlay.active_reverse {
  animation: fx-overlay-reverse  0.8s 1 ease-in backwards;
  -webkit-animation: fx-overlay-reverse  0.8s 1 ease-in backwards;
  -moz-animation: fx-overlay-reverse  0.8s 1 ease-in backwards;
}