@import url("https://fonts.googleapis.com/css?family=Cabin");
body, html {
  font-family: 'Cabin', sans-serif;
 background-color: aqua;

 background-image: url(kert03.jpg);        
 margin: 0;
}

body a, html a {
  text-decoration: none;
}

aaudio { 
   display:none;
}
header {
  padding: 2em;
}

header .logo {
  color: black;
  font-weight: bold;
}

header .menu-btn {
  width: 48px;
  float: right;
  cursor: pointer;
}

section {
  padding: 4em;
}

section h1 {
  font-size: 4em;
  margin: 1em auto;
  width: 70%;
  text-transform: uppercase;
}

section h1::before {
  content: '';
  border-top: 6px solid black;
  display: block;
}

nav {
  position: absolute;
  background: black;
  padding: 2em;
  width: calc(100% - 4em);
  height: calc(100vh - 4em);
  display: none;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: right;
          transform-origin: right;
}

nav .close-button {
  width: 48px;
  float: right;
  cursor: pointer;
  opacity: 0;
}

nav ul {
  list-style-type: none;
  margin: 10% auto 0 auto;
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (auto)[4];
      grid-template-columns: repeat(4, auto);
  width: 80%;
}

nav ul a {
  color: white;
  font-weight: bold;
  font-size: 1.4em;
}

nav ul span {
  color: gray;
  display: block;
  font-size: .75em;
  margin-top: 20px;
}

nav ul li {
  opacity: 0;
}

.show-menu {
  display: block;
  -webkit-animation: slide-menu 1s ease-in forwards;
          animation: slide-menu 1s ease-in forwards;
}

.show-menu .close-button {
  -webkit-animation: show-x 1s 1s forwards;
          animation: show-x 1s 1s forwards;
}

.show-menu li:nth-of-type(1) {
  -webkit-animation: menu-item-anim .6s forwards 1s ease-in-out;
          animation: menu-item-anim .6s forwards 1s ease-in-out;
}

.show-menu li:nth-of-type(2) {
  -webkit-animation: menu-item-anim .6s forwards 1.2s ease-in-out;
          animation: menu-item-anim .6s forwards 1.2s ease-in-out;
}

.show-menu li:nth-of-type(3) {
  -webkit-animation: menu-item-anim .6s forwards 1.6s ease-in-out;
          animation: menu-item-anim .6s forwards 1.6s ease-in-out;
}

.show-menu li:nth-of-type(4) {
  -webkit-animation: menu-item-anim .6s forwards 1.8s ease-in-out;
          animation: menu-item-anim .6s forwards 1.8s ease-in-out;
}

@-webkit-keyframes slide-menu {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes slide-menu {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@-webkit-keyframes show-x {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes show-x {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes menu-item-anim {
  from {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes menu-item-anim {
  from {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
/*# sourceMappingURL=style.css.map */