// ==========================================================================
// Animations – Selective animations from Animate.css - http://daneden.me/animate
// ==========================================================================

// Fade In
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-in { animation-name: fadeIn; }

// Fade In Down
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fade-in-down { animation-name: fadeInDown; }

// Fade In Down Big
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fade-in-down-big { animation-name: fadeInDownBig; }

// Fade In Left
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fade-in-left { animation-name: fadeInLeft; }

// Fade In Left Big
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fade-in-left-big { animation-name: fadeInLeftBig; }

// Fade In Right
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fade-in-right { animation-name: fadeInRight; }

// Fade In Right Big
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fade-in-right-big { animation-name: fadeInRightBig; }

// Fade In Up
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fade-in-up { animation-name: fadeInUp; }

// Fade In Up Big
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fade-in-up-big { animation-name: fadeInUpBig; }


// Header

  body {
    position: relative;
    overflow-x: hidden;
  }

  .overlay {
    position: absolute;
    top: 0;
    right: 0;
    //width: 0;
    //height: 0;
    background: rgba(000,000,000,0.5);
    //height: 0;
    //width: 0;
    transition: opacity 0.5s, width 0.1s, height 0.1s;
    //z-index: 0;
    //opacity: 0;
  }

  .overlay.open {
    position: absolute;
    top: -30px;
    right: 0;
    background: rgba(000,000,000,0.5);
    height: 100%;
    width: 100%;
    transition: opacity 0.5s, width 0.1s, height 0.1s;
    z-index: 5;
    opacity: 1;
  }
  //Default mobile  settings
  .nav-off-canvas {
    position: fixed;
    top: 0;
    z-index: 100;
    visibility: hidden;
    width: 200px;
    height: 100%;
    transition: all 0.5s;
    transform: translate3d(-100%, 0, 0);
    left: 0;


    & ~ .move,
    & ~ .wrap.container,
    & ~ footer,
    & ~ header {
      transform: translate3d(0, 0, 0);
      transition: all 0.5s;
      //the overlay
    }
    //When the menu displays
    &.open {
      visibility: visible;
      transform: translate3d(0, 0, 0);

      & ~ .move,
      & ~ .wrap.container,
      & ~ footer,
      & ~ header {
        //animated overlay
        &:after {
          width: 100%;
          height: 100%;
          opacity: 1;
          transition: opacity 0.5s;
        }
      }
    }
  }

  .nav-off-canvas-above-right {
    @extend .nav-off-canvas;
    right: 0;
    left: auto;
    transform: translate3d(200%, 0, 0);
  }

  .nav-off-canvas-above-left {
    @extend .nav-off-canvas;
    transform: translate3d(-100%, 0, 0);
    right: auto;
    left: 0;
  }

  .nav-off-canvas-right {
    @extend .nav-off-canvas;
    right: 0;
    left: auto;
    transform: translate3d(200px, 0, 0);
    @include breakpoint(m) {
      transform: translate3d(300px, 0, 0);
    }

    &.open {
      & ~ .move,
      & ~ .wrap.container,
      & ~ footer,
      & ~ header {
        transform: translate3d(-200px, 0, 0);
        transition: all 0.5s;
        @include breakpoint(m) {
          transform: translate3d(-300px, 0, 0);
        }
      }
    }
  }

  .nav-off-canvas-left {
    @extend .nav-off-canvas;
    left: 0;
    right: auto;
    transform: translate3d(-300px, 0, 0);

    &.open {
      & ~ .wrap.container,
      & ~ footer,
      & ~ header {
        transform: translate3d(300px, 0, 0);
        transition: all 0.5s;
      }
    }
  }

  .nav-off-canvas-top {
    @extend .nav-off-canvas;
    right: 0;
    left: auto;
    transform: translate3d(500px, -100%, 0);

    &.open {
      & ~ .wrap.container,
      & ~ footer,
      & ~ header {
        transform: translate3d(-300px, 0, 0);
        transition: all 0.5s;
      }
    }
  }

//menu hamburger animation
$hamburgerHeight: 25px;
$hamburgerWidth: 25px;
$hamburgerSpacing: 9px;
.hamburger span {
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.hamburger.open span {
  background-color: rgba(255,255,255,0.0);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.hamburger span:before {
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0.2s, 0s;
  transition-delay: 0.2s, 0s;
}

.hamburger.open span:before {
  margin-top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition-delay: 0s, 0.2s;
  transition-delay: 0s, 0.2s;
}

.hamburger span:after {
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0.2s, 0s;
  transition-delay: 0.2s, 0s;
}

.hamburger.open span:after {
  margin-top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition-delay: 0s, 0.2s;
  transition-delay: 0s, 0.2s;
}
/* hamburger menu icon */
.hamburger {
  position: relative;
  width: $hamburgerWidth;
  height: $hamburgerHeight;
  cursor: pointer;
}

.hamburger span {
  margin: 0 auto;
  position: relative;
  top: $hamburgerSpacing;
}

.hamburger span:after,
.hamburger span:before {
  position: absolute;
  content: '';
}

.hamburger span,
.hamburger span:after,
.hamburger span:before {
  width: $hamburgerWidth;
  height: 3px;
  background-color: #fff;
  display: block;
}

.hamburger span:before {
  margin-top: -$hamburgerSpacing;
}

.hamburger span:after {
  margin-top: $hamburgerSpacing;
}

.mobile-menu {
  background: black;
  padding-top: 40px;
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    list-style-type: none;
    a {
      display: block;
      color: white;
      line-height: 52px;
      padding-left: 15px;
      text-decoration: none;
      border-bottom: solid 1px lighten(black, 10%);
      &:hover {
        background: darken(black, 10%);
      }
    }
    &.current-menu-item {
      background: red;
    }
    ul {
      display: none;
    }
  }
}
