:root {
  --coal: #3a3a3a;
  --snow: #eceff1;
  --apple: #ff4d3a;
}

.menu-main,
.menu-main::before,
.menu-main::after {
  box-sizing: border-box;
  font: 400 12pt Roboto;
  color: #7a7a7a;
  transition: 0.3s all;
  cursor: default;
}

nav {
  height: 60px;
  background: var(--coal);
}

#menu-ctn {
  position: relative;
  top: 10px;
  margin: 0 16px;
  height: 40px;
  background: var(--apple);
  width: 44px;
  display: inline-block;
}

.menu-item > a {
  cursor: pointer;
}

.menu-wrapper {
    position: absolute;
    top: 70px;
    right: 40px;
    width: 300px;
    z-index: 99;
}

#menu-container {
  opacity: 0;
  transform: translate(16px, -10px) scale(0.7);
  background: #fff;
  border: 1px solid;
  padding: 20px;
  box-shadow: 1px 3px 3px var(--coal);
  visibility: none;
  display: inline-block;
}

.menu-bars {
  height: 4px;
  width: 30px;
  list-style: none;
  background: white; /* var(--snow); */
  margin: 0 7px;
  position: relative;
  top: 18px;
  transition: 0.4s all ease-in;
}

.menu-item-header {
    padding: 5px 0px;
    list-style: none;
    text-decoration: none;
    z-index: 1;
    background: lightblue;
    width: 100%;
    display: inline-block;
}
  
.menu-item, a.item-link {
  padding: 5px 0px;
  list-style: none;
  text-decoration: none;
  z-index: 1;
  background: transparent;
  width: 100%;
  display: inline-block;
  color: rgb(88, 88, 245);
}

.menu-item-has-sublink {
    padding: 5px 20px;
    color: rgb(88, 88, 245);
}
  
.menu-item, a.sub-link {
  padding: 5px 15px;
  display: inline-block;
  width: 100%;
  text-decoration: none;
  color: rgb(88, 88, 245);
}

.menu-item, a.sub-link:nth-of-type(1) {
  margin-top: 5px;
}

hr {
  border: 1px solid var(--coal);
  height: 2px;
}

.crossed {
  background: var(--apple);
}

.dropped {
  opacity: 1 !important;
  transform: translate(16px, -10px) !important;
  visibility: visible !important;
}

.menu-bars::before, .menu-bars::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 30px;
  list-style: none;
  background: white; /*var(--snow);*/
}

.menu-bars::before {
  transform: translateY(-10px);
}

.menu-bars::after {
  transform: translateY(10px);
}

.crossed::before {
  animation: rotate-top-bar 0.4s forwards;
}

.crossed::after {
  animation: rotate-bottom-bar 0.4s forwards;
}

.hamburger::before {
  animation: rotate-top-bar-2 0.4s reverse;
}

.hamburger::after {
  animation: rotate-bottom-bar-2 0.4s reverse;
}

/* EVENT HANDLERS */

.menu-item:hover {
    color: var(--coal);
    text-decoration: none;
}
.menu-item a.item-link:hover {
  color: var(--coal);
  background: var(--snow);
  box-shadow: -4px 0 0 var(--apple);
  text-decoration: none;
}

.menu-item a.sub-link:hover {
  background: var(--snow);
  box-shadow: -4px 0 0 var(--apple);
  text-decoration: none;
}

/* ANIMATION KEYFRAMES */
@keyframes rotate-top-bar {
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}
@keyframes rotate-bottom-bar {
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
@keyframes rotate-top-bar-2 {
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}
@keyframes rotate-bottom-bar-2 {
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}