.topburger {
position: fixed;
top: 23px;
right: 25px;
z-index: 3000;

  /* padding: 15px 15px; */
  padding: 0;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
    /* background-color: #000; */
  border: 0;
  margin: 0;
  overflow: visible; }
  /* .topburger:hover {
    opacity: 0.7;
  } */
  /* .topburger.is-active:hover {
    opacity: 0.7; } */
  .topburger.is-active .topburger-inner,
  .topburger.is-active .topburger-inner::before,
  .topburger.is-active .topburger-inner::after {
    background-color: #B00; }

    .topburger.is-active:hover .topburger-inner,
    .topburger.is-active:hover .topburger-inner::before,
    .topburger.is-active:hover .topburger-inner::after {
      background-color: #D00; }

.topburger-box {
  width: 34px;
  height: 34px;
  width: 42px;
  height: 42px;
  display: inline-block;
  position: relative;

  border: 1px solid #00a9d9;
  border-radius: 4px;
  background-color: #FFF;
 }

 .topburger-box:hover {border: 1px solid #333;}

 .topburger.is-active .topburger-box {
  border: 1px solid #B00;
 }

.topburger-inner {
  display: block;
  top: 50%;
  margin-top: -1px; }

  .topburger-inner {
    left: 4px;
  }
  .topburger-inner, .topburger-inner::before, .topburger-inner::after {
    /* left: 4px; */

    width: 24px;
        width: 31px;
    height: 3px;
  
    background-color: #00a9d9;
          background-color: #000;
    /* #FFF; */
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .topburger-inner::before, .topburger-inner::after {
    content: "";
    display: block; }
  .topburger-inner::before {
    top: -9px; }
  .topburger-inner::after {
    bottom: -9px; }


.topburger:hover .topburger-inner,
.topburger:hover .topburger-inner::before,
.topburger:hover .topburger-inner::after {
  background-color: #00BFFF; }


/* ////////// TOOLBAR - TOOLBURGER ////////// */

.toolburger {
position: relative;
width:100%;
/* top: 4px; */
/* right: 25px; */
z-index: 3000;
/* outline: 0; */

  /* padding: 15px 15px; */
  padding: 0;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  /* .toolburger:hover {
    opacity: 0.7;
  } */
  /* .toolburger.is-active:hover {
    opacity: 0.7; } */
  .toolburger.is-active .toolburger-inner,
  .toolburger.is-active .toolburger-inner::before,
  .toolburger.is-active .toolburger-inner::after {
    background-color: #080; }
    /* #B00 */

    .toolburger.is-active:hover .toolburger-inner,
    .toolburger.is-active:hover .toolburger-inner::before,
    .toolburger.is-active:hover .toolburger-inner::after {
      background-color: #090; }
      /* #D00 */

.toolburger-box {
  margin-top: 1px;
  width: 42px;
  height: 42px;
  display: inline-block;
  position: relative;

  border: 1px solid #111;
  border-radius: 4px;
  /* outline:0; */
 }

 .toolburger-box:hover {border: 1px solid #111;}

 .toolburger.is-active .toolburger-box {
  border: 1px solid #080;
  /* #B00; */
 }

.toolburger-inner {
  display: block;
  top: 50%;
  margin-top: -1px; }

  .toolburger-inner {
    left: 0px;
  }
  .toolburger-inner, .toolburger-inner::before, .toolburger-inner::after {
    /* left: 4px; */

    width: 42px;
    height: 3px;
    background-color: #FFF;
    /* 00a9d9; */
    /* #FFF; */
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .toolburger-inner::before, .toolburger-inner::after {
    content: "";
    display: block; }
  .toolburger-inner::before {
    top: -11px; }
  .toolburger-inner::after {
    bottom: -11px; }


.toolburger:hover .toolburger-inner,
.toolburger:hover .toolburger-inner::before,
.toolburger:hover .toolburger-inner::after {
  background-color: #FFF; }

/*
   * Spin
   */
.topburger--spin .topburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .topburger--spin .topburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .topburger--spin .topburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.topburger--spin.is-active .topburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .topburger--spin.is-active .topburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .topburger--spin.is-active .topburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

    /*
       * Spin
       */
    /* .hamburger--spin .hamburger-inner {
      transition-duration: 0.22s;
      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
      .hamburger--spin .hamburger-inner::before {
        transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
      .hamburger--spin .hamburger-inner::after {
        transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .hamburger--spin.is-active .hamburger-inner {
      transform: rotate(225deg);
      transition-delay: 0.12s;
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
      .hamburger--spin.is-active .hamburger-inner::before {
        top: 0;
        opacity: 0;
        transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
      .hamburger--spin.is-active .hamburger-inner::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } */

/*
   * Spin Reverse
   */
.toolburger--spin-r .toolburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .toolburger--spin-r .toolburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .toolburger--spin-r .toolburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.toolburger--spin-r.is-active .toolburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .toolburger--spin-r.is-active .toolburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .toolburger--spin-r.is-active .toolburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }