/*
Inspired by "Full screen burger menu" by Paul Sullivan
https://codepen.io/pwsm50/pen/KHDEI
*/
@import url('https://fonts.googleapis.com/css?family=Mitr:200,300,400,500,600,700');
html,
body {
  height: 100%;

  font-family: 'Mitr', sans-serif;
  
}

.bar-a, .bar, .bar:before, .bar:after {
  transition: all .45;
  content: '';
  position: absolute;
  left: 0;
  height: 4px;
  width: 34px;
  border-radius: 17px;
  background-color: rgba(255, 255, 255, 0.95);
}

.menu-collapsed {
  transition: all .35s;
  position: fixed;
  top: 10px;
  left: 9px;
  
  width: 36px;
  height: 36px;
  z-index: 10;
  cursor: pointer;
}
.menu-collapsed .nav-menu {
  transition: all 0s;
  position: fixed;
  transform: translateX(-90000px);
  list-style: none;
}
.menu-collapsed:hover:not(.menu-expanded) .bar {
  transition: all .25s;
}
.menu-collapsed:hover:not(.menu-expanded) .bar:before {
  transform: translateY(-12px);
}
.menu-collapsed:hover:not(.menu-expanded) .bar:after {
  transform: translateY(12px);
}

.bar-a-expanded, .menu-collapsed:hover:not(.menu-expanded) .bar:before, .menu-collapsed:hover:not(.menu-expanded) .bar:after, .menu-expanded .bar:before, .menu-expanded .bar:after {
  transition: all .35s;
  top: 0;
}

.menu-expanded {
  transition: all .35s;
  /*position: absolute;*/
  height: 100vh;
  width: 100%;
  text-align: center;
  line-height: 10vh;
  top: 0;
  left: 0;
  background: rgba(0,73,111,1);
  z-index: 10;
  font-weight: 300;
  color: white;
}
.menu-expanded .nav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5vh;
  transition: all .45s;
  position: relative;
  transform: translateX(0);
  z-index: 2;
}
.menu-expanded .nav-menu li {
  animation: 1s fadeInLeft;
  animation-fill-mode: both;
  transform: translateX(-200px);
}
.menu-expanded .nav-menu li.d2 {
  animation-delay: .4s;
}


.menu-expanded a {
  transition: all .65s;
  text-decoration: none;
  font-size: 1.3em;
  color: white;
  padding: 10px;
}
.menu-expanded a:hover {
  letter-spacing: 2px;
  color: #8bb4d2;
}
.menu-expanded .bar {
  background-color: transparent;
  transition: all .25s;
}
.menu-expanded .bar:before {
  transform: rotate(45deg);
}
.menu-expanded .bar:after {
  transform: rotate(-45deg);
}

.bar {
  position: fixed;
  /*left: 12px;
  top: 26px;*/
  left: 17px;
  top: 32px;
}
.bar:before {
  top: -8px;
}
.bar:after {
  top: 8px;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 1px;
  height: 100%;
}
main div {
  width: 80vw;
  text-align: center;
}

@keyframes fadeInLeft {
  from {
    transform: translatX(-200px);
  }
  to {
    transform: translateX(0);
  }
}