.controller {
  position: relative;
}


/*
 * Page
 */

.controller > .page {
  margin-left: 7rem;
  width: calc(100% - 7rem);
  opacity: 1;
}

@media (max-width: 768px) {
  .controller > .page {
    margin-left: 2.667rem;
    width: calc(100% - 2.667rem);
  }
}

.controller.opening > .page {
}

.controller.open > .page {
  position: fixed;
  overflow: hidden;
}

.controller.closing > .page {
  top: 0;
  left: 0;
  height: 150%;
  overflow: hidden;
}


/*
 * Hamburger
 */

.controller .nav_box {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 5;
  overflow: hidden;
  width: 7rem;
  height: 4.5rem;
  box-sizing: border-box;
  cursor: pointer;
  padding-top: 1.6rem;
}

@media (max-width: 768px) {
  .controller .nav_box {
    width: 2.667rem;
  }
}

body.ack_active .controller .nav_box {
  transition: height 1500ms 400ms cubic-bezier(0.76, 0, 0.24, 1);
  height: 0;
}

body.ack_animating .controller .nav_box {
  height: 4.5rem;
}

.controller .nav_box .nav_icon_cont {
  transform-origin: center;
}

@media (max-width: 1260px) {
  .controller .nav_box .nav_icon_cont {
    transform: scale(0.7);
  }
}

@media (max-width: 768px) {
  .controller .nav_box .nav_icon_cont {
    transform: scale(0.5);
  }
}

.controller .nav_box .nav_icon {
  width: 43px;
  height: 28.5px;
  transition: .25s ease-in-out;
  position: relative;
  margin: auto;
}


.controller .nav_box .nav_icon span {
  display: block;
  position: absolute;
  height: 2.5px;
  width: 100%;
  background: #000;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: transform .25s;
  transform-origin: center left;
}

.controller .nav_box:hover .nav_icon {
  opacity: 0.655;
}

.controller .nav_box .nav_icon span:nth-child(1) { top: 0px; }
.controller .nav_box .nav_icon span:nth-child(2) { top: 13px; }
.controller .nav_box .nav_icon span:nth-child(3) { top: 26px; }


.controller.opening .nav_box .nav_icon span,
.controller.open .nav_box .nav_icon span {
  background: #000;
}

/*
 * push by half new space created
 * 0.5*(1-0.707)*43
 * new height is 0.707 * 43 = 30.401
 * higher by 30.401 - 28.5 = 1.901
 */
.controller.opening .nav_box .nav_icon span:nth-child(1),
.controller.open .nav_box .nav_icon span:nth-child(1) { transform: translate(6.2995px, -1.901px) rotate(45deg); }
.controller.opening .nav_box .nav_icon span:nth-child(2),
.controller.open .nav_box .nav_icon span:nth-child(2) { opacity: 0; }
.controller.opening .nav_box .nav_icon span:nth-child(3),
.controller.open .nav_box .nav_icon span:nth-child(3) { transform: translate(6.2995px, 1.901px) rotate(-45deg); }




/*
 * Menu
 */

.controller > .menu_cont {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  margin-left: 7rem;
  width: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
  transition: width 750ms cubic-bezier(0.76, 0, 0.24, 1);
}

.controller.opening > .menu_cont,
.controller.open > .menu_cont {
  width: calc(100% - 7rem);
}

.controller.open > .menu_cont {
  position: static;
}

.controller.closed > .menu_cont {
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px) {
  .controller > .menu_cont {
    margin-left: 2.667rem;
  }
  .controller.opening > .menu_cont,
  .controller.open > .menu_cont {
    width: calc(100% - 2.667rem);
  }
}



/*
 * sidebar_logo
 */

.sidebar_logo {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 7rem;
  background: #fff;
  display: block;
  cursor: pointer;
  user-select: none;
}

@media (max-width: 1024px) {
  .sidebar_logo {
    height: calc(var(--1svh, 1vh) * 100);
    height: 100svh;
  }
}

@media (max-width: 768px) {
  .sidebar_logo {
    width: 2.667rem;
  }
}


.sidebar_logo:after {
  content: " ";
  height: 100vh;
  background: #fff;
  display: block;
  user-select: none;
  width: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
}

.sidebar_logo .letters {
  margin-top: 1rem;
  height: calc(100% - 6rem);
  /*overflow: hidden; why? removing since breaks intro anim*/
  position: relative;
  display: block;
}

.sidebar_logo .letter {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  will-change: transform;
}

.controller.closing .sidebar_logo .letter,
.controller.open .sidebar_logo .letter {
  transition: transform 1500ms cubic-bezier(0.76, 0, 0.24, 1);
}

body.ack_active .sidebar_logo .letter {
  opacity: 0;
}

.sidebar_logo .m {
  top: 0;
}

.sidebar_logo .c {
  transform: translateY(calc(50*var(--1svh, 1vh) - 3rem - 0.5em));
}

.sidebar_logo .a {
  transform: translateY(calc(100*var(--1svh, 1vh) - 6rem - 1em));
}

body.ack_active .sidebar_logo .letter {
  opacity: 0;
}


@keyframes letter_fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

body.ack_animating .sidebar_logo .m {
  animation: 500ms ease-out 0ms forwards letter_fadein;
}

body.ack_animating .sidebar_logo .c {
  animation: 500ms ease-out 200ms forwards letter_fadein;
}

body.ack_animating .sidebar_logo .a {
  animation: 500ms ease-out 400ms forwards letter_fadein;
}



/*
 * menu
 */

.menu {
  background: #fff;
  position: relative;
  padding-top: 0.1px;
  box-sizing: border-box;
  width: calc(100vw - 7rem);
  min-height: 100vh;
  min-height: calc(var(--1svh, 1vh) * 100);
  min-height: 100svh;
}

@media (max-width: 1023px) {
  .menu {
    width: calc(100vw - 8rem);
  }
}

@media (max-width: 768px) {
  .menu {
    width: calc(100vw - 3.5rem);
  }
}

.controller.closed .menu {
  display: none;
}

.menu a {
  text-decoration: none;
}

.menu a:hover {
  opacity: 0.655;
}


.menu .secondary_links {
  position: absolute;
  top: 0;
  margin-top: 1.5rem;
  right: 2rem;
  width: 20em;
  max-width: calc(100% - 45rem);
}

@media (max-width: 1260px) {
  .menu .secondary_links {
    width: 15em;
    max-width: calc(100% - 32rem);
  }
}

@media (max-width: 1023px) {
  .menu .secondary_links {
    position: static;
    width: auto;
    max-width: none;
    margin-left: 1rem;
    margin-top: 3rem;
    padding-bottom: 2rem;
  }
}

.menu .secondary_link {
  margin-top: 0.5rem;
}

.menu .search_link {
  margin-top: 4rem;
}

@media (max-width: 1023px) {
  .menu .search_link {
    margin-top: 1.5rem;
  }
}

.menu .search_link a:after {
  content: " ";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  background: url(./images/search.svg) center/contain no-repeat;
  margin-left: 0.5rem;
  vertical-align: baseline;
}

.menu .search_link a:hover:after {
  opacity: 0.655;
}


/*
 * menu open: primary links
 */

.menu .primary_links {
  margin-top: 1rem;
  height: calc(100vh - 6rem);
  position: relative;
}

@media (max-width: 1024px) {
  .menu .primary_links {
    height: calc(var(--1svh, 1vh) * 50 - 3rem + 0.5em);
    height: calc(50svh - 3rem + 0.5em);
  }
}

.menu .primary_links .lines_cont {
}

.menu .primary_links .line {
  position: absolute;
  left: 2rem;
}



@media (max-width: 1023px) {
  .menu .primary_links .line {
    left: 1rem;
  }
}





/*
   top
0: 0
1: 
2:
3:
4: 100% - line

height: 5*line;
space: 100% - 5 * line;

linearly interpolate 0 to 100% - line for 1, 2, 3:

100 / 4 = 25

0: 0%
1: 25% - 0.25*line
2: 50% - 0.50*line
3: 75% - 0.75*line
4: 100% - 1.00*line


*/

.menu .primary_links .line_0 {
  top: 0;
}

.menu .primary_links .line_1 {
  top: calc(25% - 0.25em);
}

.menu .primary_links .line_2 {
  top: calc(50% - 0.50em);
}

.menu .primary_links .line_3 {
  top: calc(75% - 0.75em);
}

.menu .primary_links .line_4 {
  top: calc(100% - 1em);
}



/*
 * logo
 */

.menu .logo {
  margin: 2rem 0 2rem 2rem;
}

@media (max-width: 1023px) {
  .menu .logo {
    margin: 0 0 1.25rem 1rem;
  }
}

@media (max-width: 768px) {
  .menu .logo {
    margin: 0 0.5rem 1.4rem 1rem;
  }
}