@charset "utf-8";
/* CSS Document */



/*########*/
/* IF .mobileNav */
header.mobileNav nav {
  opacity: 1;
  width: 0;

  -webkit-transition: opacity 0.3s ease 0.3s;
  -moz-transition: opacity 0.3s ease 0.3s;
  -ms-transition: opacity 0.3s ease 0.3s;
  -o-transition: opacity 0.3s ease 0.3s;
	transition: opacity 0.3s ease 0.3s;
}

header.mobileNav nav ul {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  text-transform: uppercase;
  list-style: none;
  font-size: 24px;
}

header.mobileNav .header_logo {
  width: 125px;
}
header.mobileNav div.menu {
    top: 60px;
    right: 50px;
}

/*########*/
/*############*/
/*topheader*/
header.mobileNavOpen #header_logo_w { opacity: 0;}
header.mobileNavOpen #header_logo_s { opacity: 1;}
header.mobileNavOpen div.menu #burger::before, header.mobileNavOpen div.menu #burger::after { background-color: #1c1c1c; width: 120%}
header.mobileNavOpen div.menu #burger { background-color: transparent;}
header.mobileNavOpen div.menu #burger::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
header.mobileNavOpen div.menu #burger::after {
  -webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

header.mobileNavOpen nav {
  width: 100%;
  height: 100%;

  background-color: rgba(247, 247, 247, 0.8);
  opacity: 1;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
header.mobileNavOpen nav ul {
  position: absolute;
  top: 50%;
  right: 50%;

  text-align: center;;

  margin: 0;
  padding: 0;
  transform: translate(50%, -50%);
}
header.mobileNavOpen nav ul li {
  opacity: 1; top: 0;
}
header.mobileNavOpen nav ul li {
  position: relative;
  display: block;
	margin: 0;
	padding: 0;

	opacity: 1;

  -webkit-transition: opacity 0.3s ease 0.3s, color 0.15s ease;
  -moz-transition: opacity 0.3s ease 0.3s, color 0.15s ease;
  -ms-transition: opacity 0.3s ease 0.3s, color 0.15s ease;
  -o-transition: opacity 0.3s ease 0.3s, color 0.15s ease;
	transition: opacity 0.3s ease 0.3s, color 0.15s ease;
}
header.mobileNavOpen nav ul li:nth-child(2) {
  -webkit-transition: top 0.3s ease 0.25s, opacity 0.3s ease 0.3s;
  -moz-transition: top 0.3s ease 0.25s, opacity 0.3s ease 0.3s;
  -ms-transition: top 0.3s ease 0.25s, opacity 0.3s ease 0.3s;
  -o-transition: top 0.3s ease 0.25s, opacity 0.3s ease 0.3s;
  transition: top 0.3s ease 0.25s, opacity 0.3s ease 0.3s;
}
header.mobileNavOpen nav ul li:nth-child(3) {
  -webkit-transition: top 0.3s ease 0.35s, opacity 0.3s ease 0.4s;
  -moz-transition: top 0.3s ease 0.35s, opacity 0.3s ease 0.4s;
  -ms-transition: top 0.3s ease 0.35s, opacity 0.3s ease 0.4s;
  -o-transition: top 0.3s ease 0.35s, opacity 0.3s ease 0.4s;
  transition: top 0.3s ease 0.35s, opacity 0.3s ease 0.4s;
}
header.mobileNavOpen nav ul li:nth-child(4) {
  -webkit-transition: top 0.3s ease 0.45s, opacity 0.3s ease 0.6s;
  -moz-transition: top 0.3s ease 0.45s, opacity 0.3s ease 0.6s;
  -ms-transition: top 0.3s ease 0.45s, opacity 0.3s ease 0.6s;
  -o-transition: top 0.3s ease 0.45s, opacity 0.3s ease 0.6s;
  transition: top 0.3s ease 0.45s, opacity 0.3s ease 0.6s;
}
header.mobileNavOpen nav ul li:nth-child(5) {
  -webkit-transition: top 0.3s ease 0.55s, opacity 0.3s ease 0.6s;
  -moz-transition: top 0.3s ease 0.55s, opacity 0.3s ease 0.6s;
  -ms-transition: top 0.3s ease 0.55s, opacity 0.3s ease 0.6s;
  -o-transition: top 0.3s ease 0.55s, opacity 0.3s ease 0.6s;
  transition: top 0.3s ease 0.55s, opacity 0.3s ease 0.6s;
}
header.mobileNavOpen nav ul li a {
  text-decoration: none;
  color: #1c1c1c;

  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
  -ms-transition: opacity 0.25s ease;
  -o-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
header.mobileNavOpen nav ul li a:not(.active) {
  font-family: 'IBM Plex Sans', sans-serif;
  opacity: 0.6;
}
header.mobileNavOpen nav ul li a:hover {
  opacity: 1;
}