body {
  position: relative; }

h1 {
  font-size: 50px; }

.main {
  width: 100%;
  height: 100vh;
  position: relative; }
  .main .nav-open-overlay {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 500ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
    position: sticky; }

.main .nav-open-overlay--open {
  opacity: 1;
  pointer-events: auto; }

.logo-link {
  transform: translateY(-10em); }

.nav {
  z-index: 1000;
  padding: 9em 1em 0;
  background-color: #01c0ef;
  height: 230em;
  width: 20em;
  position: fixed;
  top: -10em;
  transform: rotate(45deg);
  transform-origin: left top;
  transition: all 500ms cubic-bezier(0.95, 0.05, 0.795, 0.035); }
  .nav .logo-link {
    float: left;
    padding-left: 1em; }
    .nav .logo-link i {
      display: inline-block;
      color: rgba(255, 255, 255, 0.75);
      font-size: 1.5em;
      margin-left: 0.5em; }
  .nav .logo {
    padding: 3em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    font-size: 0.75em;
    box-sizing: border-box;
    border-radius: 50%; }
  .nav .nav-toggle {
    cursor: pointer;
    float: right;
    transform: rotate(-45deg);
    transition: all 500ms cubic-bezier(0.95, 0.05, 0.795, 0.035); }
  .nav .nav-items {
    color: white;
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 2em;
    display: flex;
    flex-wrap: wrap; }
    .nav .nav-items li.first-level-item {
      opacity: 0;
      transform: rotateY(-180deg);
      cursor: pointer;
      display: inline-block;
      padding: 1em;
      text-align: center;
      width: 33.3%;
      box-sizing: border-box; }
      .nav .nav-items li.first-level-item:hover > i {
        color: #1abc9c; }
      .nav .nav-items li.first-level-item > span {
        display: block;
        text-align: center;
        padding: 0.5em 0;
        font-family: 'Open Sans', sans-serif; }
      .nav .nav-items li.first-level-item > i {
        font-size: 3em;
        transition: all 0.15s ease-out; }

.sub-nav {
  transition: all 200ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
  width: 320px;
  height: 0;
  opacity: 0;
  pointer-events: none; }
  .sub-nav > li {
    text-align: left;
    display: block;
    transform: translateX(-15%);
    padding: 1em 0; }
    .sub-nav > li:hover > i {
      color: #1abc9c; }

.c-hamburger {
  z-index: 1000;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 96px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  border: none;
  cursor: pointer; }
  .c-hamburger:focus {
    outline: none; }
  .c-hamburger span {
    display: block;
    position: absolute;
    top: 44px;
    left: 18px;
    right: 18px;
    height: 8px; }
    .c-hamburger span:before {
      position: absolute;
      display: block;
      left: 0;
      width: 100%;
      height: 8px;
      background-color: #fff;
      content: "";
      top: -20px; }
    .c-hamburger span:after {
      position: absolute;
      display: block;
      left: 0;
      width: 100%;
      height: 8px;
      background-color: #fff;
      content: "";
      bottom: -20px; }

.c-hamburger--htx {
  background-color: transparent; }

.c-hamburger--htx span {
  transition: background 0s 0.3s;
  background-color: #ffffff; }

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s; }

.c-hamburger--htx span::before {
  transition-property: top, transform; }

.c-hamburger--htx span::after {
  transition-property: bottom, transform; }

.c-hamburger--htx.is-active span {
  background: none; }

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg); }

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg); }

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s; }

.nav--open {
  transform: rotate(0deg);
  top: -10em;
  padding-top: 11em; }
  .nav--open .nav-toggle {
    transform: rotate(0deg); }

.first-level-item--open > .sub-nav {
  height: 125px;
  pointer-events: initial;
  opacity: 1; }

.group:after {
  content: "";
  display: table;
  clear: both; }