#aside-navigation {
  position: fixed;
  display: block;
  z-index: 14;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
  -webkit-transition: .3s all ease-in-out;
  -khtml-transition: .3s all ease-in-out;
  -moz-transition: .3s all ease-in-out;
  -ms-transition: .3s all ease-in-out;
  -o-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out; }
  #aside-navigation nav {
    display: block;
    list-style-type: none;
    padding-left: 0;
    -webkit-font-smoothing: antialiased;
    position: fixed;
    top: 50%;
    right: 0;
    -webkit-transform: rotate(90deg) translate3d(0,-12rem,0);
    -khtml-transform: rotate(90deg) translate3d(0,-12rem,0);
    -moz-transform: rotate(90deg) translate3d(0,-12rem,0);
    -ms-transform: rotate(90deg) translate3d(0,-12rem,0);
    -o-transform: rotate(90deg) translate3d(0,-12rem,0);
    transform: rotate(90deg) translate3d(0,-12rem,0);
    -webkit-transform-origin: center center;
    -khtml-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    z-index: 200;
    -webkit-transform: rotate(90deg) translateY(-16.875em);
    -khtml-transform: rotate(90deg) translateY(-16.875em);
    -moz-transform: rotate(90deg) translateY(-16.875em);
    -ms-transform: rotate(90deg) translateY(-16.875em);
    -o-transform: rotate(90deg) translateY(-16.875em);
    transform: rotate(90deg) translateY(-16.875em); }
    #aside-navigation ul  {
        margin: auto !important;
        padding: 10px;
    }
 #aside-navigation ul {
    border-radius: 0px;
    background-color: rgba(0, 0, 0, 0.24);
}
  #aside-navigation ul li {
    display: inline-block;
    position: relative; }
    #aside-navigation ul li a {
      color: #ffffff;
      font-size: 0.825em;
      padding: 0 1em;
      -webkit-transition: .3s all ease-in-out;
      -khtml-transition: .3s all ease-in-out;
      -moz-transition: .3s all ease-in-out;
      -ms-transition: .3s all ease-in-out;
      -o-transition: .3s all ease-in-out;
      transition: .3s all ease-in-out;
      }
      #aside-navigation ul li a:hover {
        color: #000000; }



.nav-indicator {
  background: #000000;
  position: absolute;
  top: 2.5em;
  opacity: 0;
  left: 50%;
  height: 2.75em;
  width: .125em;
  margin-left: -1px;
  -webkit-transition: .3s all ease-in-out;
  -khtml-transition: .3s all ease-in-out;
  -moz-transition: .3s all ease-in-out;
  -ms-transition: .3s all ease-in-out;
  -o-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out; }

#aside-navigation ul li.active a {
  color: rgb(0, 0, 0);
  }
#aside-navigation ul li.active .nav-indicator {
  opacity: 1; }

#portfolio-prev-arrow, #portfolio-next-arrow {
  display: none; }

.tooltip {
  position: absolute;
  left: -4.3em;
  top: 6em;
  background-color: #000000;
  color: #fff;
  padding: 0.5em;
  line-height: 1em;
  border-radius: 5px;
  opacity: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 0.6em;
  -webkit-transform: rotate(-90deg);
  -khtml-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  min-width: 100px;
  text-align: center;
  -webkit-transition: .3s all ease-in-out;
  -khtml-transition: .3s all ease-in-out;
  -moz-transition: .3s all ease-in-out;
  -ms-transition: .3s all ease-in-out;
  -o-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out; }

@media only screen and (max-height: 50em) and (min-width: 48em) {
  .tooltip {
    opacity: 1; }

  #aside-navigation ul li {
    margin: 0 10px; }
    #aside-navigation ul li a {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #ffffff;
      display: block;
      padding: 0;
      margin: 0 0.5em;
      }
      #aside-navigation ul li a i {
        display: none; }
    #aside-navigation ul li.active a {
      background-color: rgb(0, 0, 0);
      }
  #aside-navigation nav {
    -webkit-transform: rotate(90deg) translateY(-5em);
    -khtml-transform: rotate(90deg) translateY(-5em);
    -moz-transform: rotate(90deg) translateY(-5em);
    -ms-transform: rotate(90deg) translateY(-5em);
    -o-transform: rotate(90deg) translateY(-5em);
    transform: rotate(90deg) translateY(-5.5em);
    }

  .nav-indicator {
    display: none; }

  .logo {
    right: 1.5em; } }
@media only screen and (max-width: 81.25em) and (min-height: 50em) and (min-width: 48em) {
  #aside-navigation nav {
    -webkit-transform: rotate(90deg) translateY(-17.5em)!important;
    -khtml-transform: rotate(90deg) translateY(-17.5em)!important;
    -moz-transform: rotate(90deg) translateY(-17.5em)!important;
    -ms-transform: rotate(90deg) translateY(-17.5em)!important;
    -o-transform: rotate(90deg) translateY(-17.5em)!important;
    transform: rotate(90deg) translateY(-17.5em)!important; } }
@keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
    -khtml-transform: translate3d(-1px, 0, 0);
    -moz-transform: translate3d(-1px, 0, 0);
    -ms-transform: translate3d(-1px, 0, 0);
    -o-transform: translate3d(-1px, 0, 0);
    transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    -webkit-transform: translate3d(1px, 0, 0);
    -khtml-transform: translate3d(1px, 0, 0);
    -moz-transform: translate3d(1px, 0, 0);
    -ms-transform: translate3d(1px, 0, 0);
    -o-transform: translate3d(1px, 0, 0);
    transform: translate3d(1px, 0, 0); }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-2px, 0, 0);
    -khtml-transform: translate3d(-2px, 0, 0);
    -moz-transform: translate3d(-2px, 0, 0);
    -ms-transform: translate3d(-2px, 0, 0);
    -o-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0); }
  40%, 60% {
    -webkit-transform: translate3d(2px, 0, 0);
    -khtml-transform: translate3d(2px, 0, 0);
    -moz-transform: translate3d(2px, 0, 0);
    -ms-transform: translate3d(2px, 0, 0);
    -o-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0); } }
@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1);
    -khtml-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1.2);
    -khtml-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0; } }
@keyframes bounce {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -khtml-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -khtml-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg); }
  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -khtml-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(0) rotate(-45deg);
    -khtml-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg); } }