/*--------------------------------------------------
***********************NAV**************************
----------------------------------------------------*/
.mrow {
  padding: 1px 1px;
  background-color: rgba(58, 206, 194, .7);
  color: #ecf0f1;
  text-align: center;
  width: 50px;
  margin: 20px auto;
  border-radius: 5px;
  box-shadow: 2px 2px 8px #333;
}

.mrow:hover,
.mrow:active {
  background-color: rgba(0, 127, 128, .7);
}

.hamburger .line{
  width: 30px;
  height: 3px;
  background-color: #ecf0f1;
  display: block;
  margin: 8px auto;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}

/* ELEVEN */

#hamburger-m{
  transition: all 0.3s ease-in-out;
}

#hamburger-m.is-active{
  animation: smallbig 0.6s forwards;
}

@keyframes smallbig{
  0%, 100%{
    transform: scale(1);
  }

  50%{
    transform: scale(0);
  }
}

#hamburger-m.is-active .line:nth-child(1),
#hamburger-m.is-active .line:nth-child(2),
#hamburger-m.is-active .line:nth-child(3){
  transition-delay: 0.2s;
}

#hamburger-m.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-m.is-active .line:nth-child(1){
  transform: translateY(9px) rotate(45deg);
}

#hamburger-m.is-active .line:nth-child(3){
  transform: translateY(-13px) rotate(-45deg);
}