/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

/* Circle Background */
.bt_burger {
  padding:        14px;
  border-radius:  50%;
  background:     var(--color5);
  /*background: rgba(255, 255, 255, 0.5);*/
}
  .bt_burger.grey {
     background:  var(--color5);   
  }
  .bt_burger.open {
    /*background: var(--color5);*/
    background:   rgba(255, 255, 255, 1.0);
  }
  .bt_burger.close {
    background:   var(--color5);
    /*background: rgba(255, 255, 255, 0.5);*/
  }

  .hamburger {
      /*position:   fixed;*/
      position:     relative;
    
      width:      36px;
      height:     37px;
      float:      right;
      display:    block;

      background: none;
      border:     none;
      cursor:     pointer;
                                    /*border:     solid 1px #0FF;*/
  }
  .hamburger:hover,
  .hamburger:focus,
  .hamburger:active {
    outline: none;
  }
  .hamburger.is-closed:before {
    content: '';
    display: block;
    width: 100px;
    font-size: 14px;
    color: #FFF;
    line-height: 32px;
    text-align: center;
    opacity: 0;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: all .35s ease-in-out;
  }
  .hamburger.is-closed:hover:before {
    opacity: 1;
    display: block;
    -webkit-transform: translate3d(-100px,0,0);
    -webkit-transition: all .35s ease-in-out;
  }
  .hamburger.is-closed .hamb-top,
  .hamburger.is-closed .hamb-middle,
  .hamburger.is-closed .hamb-bottom,
  .hamburger.is-open .hamb-top,
  .hamburger.is-open .hamb-middle,
  .hamburger.is-open .hamb-bottom {
    position: absolute;
    left:     0;
    height:   6px;
    /*width:    100%;*/

    width:    3px;  /* space between dot and line */
    display:  block;

    border-left:  7px solid var(--color1);  /* dot */
    border-right: 26px solid var(--color1); /* line */
      
  }
  .hamburger.is-closed .hamb-top,
  .hamburger.is-closed .hamb-middle,
  .hamburger.is-closed .hamb-bottom {
                                                        /*background: var(--color1);*/
  }
  .hamburger.is-closed .hamb-top { 
    top: 4px; 
    -webkit-transition: all .35s ease-in-out;
  }
  .hamburger.is-closed .hamb-middle {
    top: 50%;
    margin-top: -3px !important;
  }
  .hamburger.is-closed .hamb-bottom {
    bottom: 3px;  
    -webkit-transition: all .35s ease-in-out;
  }

  .hamburger.is-closed:hover .hamb-top {
    top: 1;
    -webkit-transition: all .35s ease-in-out;
  }
  .hamburger.is-closed:hover .hamb-bottom {
    bottom: 1;
    -webkit-transition: all .35s ease-in-out;
  }
  .hamburger.is-open .hamb-top,
  .hamburger.is-open .hamb-middle,
  .hamburger.is-open .hamb-bottom {
                                                      background-color: var(--color1);
  }
  .hamburger.is-open .hamb-top,
  .hamburger.is-open .hamb-bottom {
    top: 50%;
    margin-top: -3px;  
  }
  .hamburger.is-open .hamb-top { 
    -webkit-transform: rotate(45deg);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
  }
  .hamburger.is-open .hamb-middle { display: none; }
  .hamburger.is-open .hamb-bottom {
    -webkit-transform: rotate(-45deg);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
  }
  .hamburger.is-open:before {
    content:      '';
    display:      block;
    width:        100px;
    font-size:    14px;
    color:        var(--color1);
    line-height:  32px;
    text-align:   center;
    opacity:      0;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: all .35s ease-in-out;
  }
  .hamburger.is-open:hover:before {
    opacity: 1;
    display: block;
    -webkit-transform: translate3d(-100px,0,0);
    -webkit-transition: all .35s ease-in-out;
  }