/* NAVIGATION */
nav {

  position: fixed;

  transition         : bottom .5s cubic-bezier(.49, .79, .65, 1), opacity 1s 1.5s ease;
  
  opacity: 1;

  &.invis {
    opacity: 0;
    transition: opacity 0s ease;
  }

  // collapsed menu
  &.collapsed {

    bottom: 0;
    margin-bottom: 0;

    // share icons
    .navbar_share-icons {
      position : fixed;
      top      : 100%;
      right    : 0;
      height   : auto;
      width    : 100%;

      transform: translateY(150%);

      transition         : transform .5s cubic-bezier(.41, .8, .43, 1);

      > p {
        width         : 100%;
        text-align    : center;
        right         : auto;
        bottom        : 0;
        padding-right : 0;
      }
      > span {
        width         : 100%;
        text-align    : center;
        right         : auto;
        bottom        : 0;
        padding-right : 0;
      }

      .navbar_icons {
        display: block;
        position: relative;
        top: 0;
        width: 100%;
        text-align: center;
        right : 0;
        height: auto;
        white-space: normal;

        > ul {
          position: relative;
          right   : 0;

          transform: translateX(0);

          opacity: 1;
          display : table;
          margin  : 0 auto;

          width: 100%;
          height: auto;

          li {
            float   : none;
            display : inline-block;

            a {
              padding: 10px 10px;
            }
          }
        }

      }
    }

    #navbar {

      max-height : 62px;

      .center-menu {

        opacity     : 0;

        perspective : 1000px;

        position    : fixed;
        top         : 150%;
        left        : 50%;

        transform: translate(-50%, 100%);

        transition: top 1s cubic-bezier(.49, .79, .65, 1);

      }

    }

    &.open {

      bottom        : 100%;
      margin-bottom : -62px;

      .navbar_share-icons {

        transform: translateY(-100%);

        transition         : transform .5s .5s ease;

        .navbar_icons {

          > ul {

            transform: translateX(0);

          }

        }

        .navbar_show-icons {
          display : none;
          height  : auto;
        }

      }

      #navbar {

        .center-menu {
          position: fixed;
          top: 50%;
          opacity : 1;

          transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%);

          li {

            float      : none;
            text-align : center;

            &.show {

            }

          }

        }

        &.small {

          #all-pages {

            text-align : center;

            > ul {

              max-height : 40vh;
              overflow   : auto;

              > li {

                display : inline-block;

                > a {
                  padding-top    : 31px;
                  padding-bottom : 31px;
                }

              }

            }

          }

        }

      }

      // navbar-toogle when collapsed menu is opened
      .navbar-toggle {

        .icon-bar {

          opacity: 0;

          &:first-child {
            top: 9px;
            opacity: 1;

            transform         : rotate(45deg);
          }

          &:last-child {
            top: -11px;
            opacity: 1;

            transform         : rotate(-45deg);
          }

        }

      }

    }

  }

}

main {
  width    : 100%;
  height   : 100%;
  padding-bottom: 80px;
  overflow-x: hidden;

  transform: translateY(0);

  transition         : transform .8s cubic-bezier(.35, .74, .41, .98);

  &.collapsedOpen {

    transform: translateY(-100%);

    transition         : transform .8s cubic-bezier(0, .47, 0, .98);

  }
}

.center-menu {
  position: relative;
  left: 0;
  margin  : 0 auto;
  display : table;
  opacity: 1;

  transform: translate(0, 0);

  transition         : transform .2s cubic-bezier(.41, .8, .43, 1), opacity .2s cubic-bezier(.41, .8, .43, 1);

  z-index: 2;

  &.iconOpen {

    transform: translate(-100%, 0);
    opacity: 0;

  }

}

.nav {

  > li {

    &:before {
      content: none;
    }

    &.active {
      > a {
        color : #fff;
      }
    }
  }
}

.navbar-header {
  position      : absolute;
  left          : 0;
  top           : 0;
  border-bottom : 2px solid rgba(255, 255, 255, 0.2);
}

.navbar_share-icons {
  position : absolute;
  display  : inline-block;
  height   : 100%;
  top      : 0;
  right    : 0;

  > p {
    display        : block \9;
    position       : absolute;
    top            : 0;
    right          : 64px;
    padding-top    : 31px;
    padding-bottom : 31px;
    padding-right  : 15px;
    line-height    : 0;
    font-size      : 12px;
    font-weight    : 100;
    letter-spacing : 0;
    //opacity        : 0.2;
    margin: 0;

    transform: rotateX(0deg);

    transition         : transform .2s .2s ease;

    &.open {
      display : none \9;

      transform: rotateX(90deg);

      transition         : transform .2s ease;

    }
  }

  > span {
    display        : inline-block;
    padding-top    : 31px;
    padding-bottom : 31px;
    padding-right  : 15px;
    line-height    : 0;
    font-size      : 12px;
    font-weight    : 100;
    letter-spacing : 0;
    margin: 0;
    float: left;

    transform: rotateX(0deg);

    transition         : transform .2s .2s ease;

    &.open {
      display : none \9;

      transform: rotateX(90deg);

      transition         : transform .2s ease;

    }

  }

  a {

    &:after {
      content: none;
    }
  }
}

.navbar_icons {
  height: 62px;
  position: absolute;
  /* float: left; */
  white-space: nowrap;
  //width: 100%;
  top: 0;
  right: 68px;
  overflow: hidden;

  > ul {
    margin: 0;
    padding    : 0;
    list-style : none;
    height     : 62px;

    transform: translateX(100%);

    transition         : transform .2s linear, opacity .2s ease;

    opacity: 0;

    position   : relative;
    top : 0;
    //right      : -100%;

    &.open {
      display : block \9;
      display: table;

      opacity: 1;

      transform: translateX(0);

      transition         : transform .2s cubic-bezier(.13,.67,.16,.96), opacity .2s ease;

    }

    > li {
      display: table-cell;
      vertical-align : middle;
      padding: 0;
      margin: 0;
      line-height: 0;

      &:before {
        content: none;
      }

      > a {
        line-height : 0;
        display     : inline-block;
        padding     : 31px 11px;
        font-size: 17px;
        .fa {
          line-height: 0;
        }
      }
    }
  }
}

.navbar_show-icons {
  display          : inline-block;
  height           : 100%;
  width            : 50px;
  margin           : 0 16px 0 0px;

  transition         : color .5s ease, opacity .5s ease;

  font-size: 21px;

  background: url("../img/share.svg") 50% 50% no-repeat;
  background-size: 20px;
  opacity: .5;

  &:hover {
    color: #fff;
    opacity: 1;
  }

  &:focus {
    outline: none;
  }

  &.active {
    color: #fff;
    opacity: 1;

    outline: none;

    transition         : none;

  }

  .fa {
    position: absolute;
    top: 51%;
    left: 18px;
  }
}


//************************************ END MAIN MENU ***************************************//