body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  font-family: "Josefin Sans";
}
body * {
  box-sizing: border-box;
}
body #wrap {
  position: absolute;
  width: 800px;
  height: 600px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background: #1161a4;
}
body #wrap input:hover {
  cursor: pointer;
}
body #wrap input[type=checkbox] {
  position: absolute;
  width: 150px;
  height: 70px;
  bottom: 0;
  z-index: 999;
  right: 0;
  opacity: 0;
}
body #wrap input[type=checkbox]:hover ~ .frame .more b:after {
  background: #fff;
}
body #wrap input[type=checkbox]:hover ~ .back b:after {
  transition-delay: 0;
  background: #10c8b3;
}
body #wrap input[type=checkbox]:checked {
  right: auto;
  left: 0;
}
body #wrap input[type=checkbox]:checked ~ .back b {
  transition-delay: 1.1s;
  transform: scale(1);
  color: #fff;
}
body #wrap input[type=checkbox]:checked ~ .back b:after {
  border-color: #fff;
}
body #wrap input[type=checkbox]:checked ~ .back b:before {
  transition-delay: 1.3s;
  border-color: #fff;
  transform: scale(1);
}
body #wrap input[type=checkbox]:checked ~ .frame {
  transform: translateX(-150%);
  transition-delay: 0.4s;
}
body #wrap input[type=checkbox]:checked ~ .frame .more {
  transform: scale(0);
}
body #wrap input[type=checkbox]:checked ~ .frame .images {
  transition: all 400ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 0.1s;
  transform: translateY(-100%);
}
body #wrap input[type=checkbox]:checked ~ .frame h1 {
  transition: 0.3s ease-in-out;
  transform: translateX(-100vw);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(1):checked ~ .box .internal .image {
  transition-delay: 0.25s;
  transform: scale(1.25);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(1):checked ~ .box .internal .image:before {
  transform: translateY(-50%);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(1):checked ~ .box .internal:nth-of-type(1) p {
  transition-delay: 1s;
  transform: translateX(0) skewX(0deg);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(1):checked ~ .box .internal:nth-of-type(1) p:before {
  transform: scale(1);
  opacity: 1;
  transition-delay: 1.6s;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(1):checked ~ .indicator {
  transition: 0.3s ease-in-out;
  height: 100%;
  transform: translateY(0);
  background: #1161a4;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) p {
  transition: padding-top 300ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 0s;
  padding-top: 300px;
}


body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(2):checked ~ .box .internal .image {
  transition-delay: 0.25s;
  transform: scale(1.25);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(2):checked ~ .box .internal .image:before {
  transform: translateY(-50%);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(2):checked ~ .box .internal:nth-of-type(2) p {
  transition-delay: 1s;
  transform: translateX(0) skewX(0deg);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(2):checked ~ .box .internal:nth-of-type(2) p:before {
  transform: scale(1);
  opacity: 1;
  transition-delay: 1.6s;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(2):checked ~ .indicator {
  transition: 0.3s ease-in-out;
  height: 100%;
  transform: translateY(0);
  background: #1161a4;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) p {
  transition: padding-top 300ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 0s;
  padding-top: 300px;
}


body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(3):checked ~ .box .internal .image {
  transition-delay: 0.25s;
  transform: scale(1.25);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(3):checked ~ .box .internal .image:before {
  transform: translateY(-50%);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(3):checked ~ .box .internal:nth-of-type(3) p {
  transition-delay: 1s;
  transform: translateX(0) skewX(0deg);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(3):checked ~ .box .internal:nth-of-type(3) p:before {
  transform: scale(1);
  opacity: 1;
  transition-delay: 1.6s;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(3):checked ~ .indicator {
  transition: 0.3s ease-in-out;
  height: 100%;
  transform: translateY(0);
  background: #1161a4;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) p {
  transition: padding-top 300ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 0s;
  padding-top: 300px;
}


body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(4):checked ~ .box .internal .image {
  transition-delay: 0.25s;
  transform: scale(1.25);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(4):checked ~ .box .internal .image:before {
  transform: translateY(-50%);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(4):checked ~ .box .internal:nth-of-type(4) p {
  transition-delay: 1s;
  transform: translateX(0) skewX(0deg);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(4):checked ~ .box .internal:nth-of-type(4) p:before {
  transform: scale(1);
  opacity: 1;
  transition-delay: 1.6s;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(4):checked ~ .indicator {
  transition: 0.3s ease-in-out;
  height: 100%;
  transform: translateY(0);
  background: #1161a4;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) p {
  transition: padding-top 300ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 0s;
  padding-top: 300px;
}


body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(5):checked ~ .box .internal .image {
  transition-delay: 0.25s;
  transform: scale(1.25);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(5):checked ~ .box .internal .image:before {
  transform: translateY(-50%);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(5):checked ~ .box .internal:nth-of-type(5) p {
  transition-delay: 1s;
  transform: translateX(0) skewX(0deg);
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(5):checked ~ .box .internal:nth-of-type(5) p:before {
  transform: scale(1);
  opacity: 1;
  transition-delay: 1.6s;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(5):checked ~ .indicator {
  transition: 0.3s ease-in-out;
  height: 100%;
  transform: translateY(0);
  background: #1161a4;
}
body #wrap input[type=checkbox]:checked ~ .frame input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) p {
  transition: padding-top 300ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 0s;
  padding-top: 300px;
}



body #wrap .frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: transform 400ms cubic-bezier(1, 0.385, 0.42, 1);
  background: linear-gradient(to right, #fff 10%, #ffca58 10%);
}
body #wrap .frame:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, #feb339 50%, #ff3432 50%);
  left: 100%;
  transition: transform 400ms cubic-bezier(1, 0.385, 0.42, 1);
}
body #wrap .frame .box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  left: 150%;
  color: #fff;
  overflow: hidden;
}
body #wrap .frame .box .internal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 5% 10%;
}
body #wrap .frame .box .internal .image {
  position: absolute;
  width: 100%;
  height: 50%;
  background-image: url("https://puu.sh/Ddl4B/c78b869b7a.jpg");
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: bottom;
  z-index: -1;
  transition: 4s ease-in-out;
}
body #wrap .frame .box .internal .image:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 200%;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, #1161a4 50%, rgba(255, 255, 255, 0.001) 150%);
  transition: 4s ease-in-out;
}
body #wrap .frame .box p {
  transform: translateX(900px) skewX(30deg);
  transition: transform 400ms cubic-bezier(1, 0.385, 0.82, 1);
  font-size: 15px;
  line-height: 1.25;
}
body #wrap .frame .box p:before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 10px 20px -5px #105a98;
  opacity: 0;
  transform: scale(1.5);
  transition: 0.75s ease-in-out;
}
body #wrap input {
  opacity: 0;
  z-index: 999;
}
body #wrap input:nth-of-type(1):hover ~ .nav:nth-of-type(1):before {
  color: #ff3432;
}
body #wrap input:nth-of-type(1):checked ~ .nav:nth-of-type(1):before {
  color: #fff;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1.2);
  transition-delay: 0.1s;
}
body #wrap input:nth-of-type(1):checked ~ .indicator {
  transform: translateY(0%);
}
body #wrap input:nth-of-type(1):checked ~ .inner input {
  pointer-events: all;
}
body #wrap input:nth-of-type(1):checked ~ .inner .more b:nth-of-type(1) {
  transition-delay: 2.2s;
  transform: scale(1);
}
body #wrap input:nth-of-type(1):checked ~ .inner .more b:nth-of-type(1):before {
  transition-delay: 2.4s;
  transform: scale(1);
}
body #wrap input:nth-of-type(1):checked ~ .inner .images div:not(.image):nth-of-type(1) {
  z-index: 1;
}
body #wrap input:nth-of-type(1):checked ~ .inner .images div:not(.image):nth-of-type(1):before {
  transition: transform 2000ms cubic-bezier(1, 0.885, 0.82, 0.5);
  transform: translateY(-200%);
  opacity: 1;
}
body #wrap input:nth-of-type(1):checked ~ .inner .images div:not(.image):nth-of-type(1) .image {
  opacity: 1;
  transform: scale(1);
}
body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) p {
  transition: transform 500ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 1.5s;
  transform: rotate(0deg) translateY(0);
}
body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 {
  opacity: 1;
}


body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(1) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(1) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(1) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(1) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(1) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(1) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(2) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(7) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(8) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(9) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1 .word:nth-of-type(3) span:nth-of-type(10) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }


/* MENU2 */
body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1:after, body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1:before {
  transition-delay: 1s;
  transform: scaleX(1);
}
body #wrap input:nth-of-type(1):checked ~ .inner .content:nth-of-type(1) h1:before {
  transition-delay: 1.3s;
}
body #wrap input:nth-of-type(2):hover ~ .nav:nth-of-type(2):before {
  color: #ff3432;
}
body #wrap input:nth-of-type(2):checked ~ .nav:nth-of-type(2):before {
  color: #fff;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1.2);
  transition-delay: 0.1s;
}
body #wrap input:nth-of-type(2):checked ~ .indicator {
  transform: translateY(100%);
}
body #wrap input:nth-of-type(2):checked ~ .inner input {
  pointer-events: all;
}
body #wrap input:nth-of-type(2):checked ~ .inner .more b:nth-of-type(2) {
  transition-delay: 2.2s;
  transform: scale(1);
}
body #wrap input:nth-of-type(2):checked ~ .inner .more b:nth-of-type(2):before {
  transition-delay: 2.4s;
  transform: scale(1);
}
body #wrap input:nth-of-type(2):checked ~ .inner .images div:not(.image):nth-of-type(2) {
  z-index: 1;
}
body #wrap input:nth-of-type(2):checked ~ .inner .images div:not(.image):nth-of-type(2):before {
  transition: transform 2000ms cubic-bezier(1, 0.885, 0.82, 0.5);
  transform: translateY(-200%);
  opacity: 1;
}
body #wrap input:nth-of-type(2):checked ~ .inner .images div:not(.image):nth-of-type(2) .image {
  opacity: 1;
  transform: scale(1);
}
body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) p {
  transition: transform 500ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 1.5s;
  transform: rotate(0deg) translateY(0);
}
body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 {
  opacity: 1;
}

body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(7) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(8) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(9) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(10) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(11) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(12) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(13) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(14) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(1) span:nth-of-type(15) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(2) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(7) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(8) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(9) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(10) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(11) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(12) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(13) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(14) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1 .word:nth-of-type(3) span:nth-of-type(15) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }

body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1:after, body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1:before {
  transition-delay: 1s;
  transform: scaleX(1);
}
body #wrap input:nth-of-type(2):checked ~ .inner .content:nth-of-type(2) h1:before {
  transition-delay: 1.3s;
}

/* MENU3 */
body #wrap input:nth-of-type(3):hover ~ .nav:nth-of-type(3):before {
  color: #ff3432;
}
body #wrap input:nth-of-type(3):checked ~ .nav:nth-of-type(3):before {
  color: #fff;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1.2);
  transition-delay: 0.1s;
}
body #wrap input:nth-of-type(3):checked ~ .indicator {
  transform: translateY(200%);
}
body #wrap input:nth-of-type(3):checked ~ .inner input {
  pointer-events: all;
}
body #wrap input:nth-of-type(3):checked ~ .inner .more b:nth-of-type(3) {
  transition-delay: 2.2s;
  transform: scale(1);
}
body #wrap input:nth-of-type(3):checked ~ .inner .more b:nth-of-type(3):before {
  transition-delay: 2.4s;
  transform: scale(1);
}
body #wrap input:nth-of-type(3):checked ~ .inner .images div:not(.image):nth-of-type(3) {
  z-index: 1;
}
body #wrap input:nth-of-type(3):checked ~ .inner .images div:not(.image):nth-of-type(3):before {
  transition: transform 2000ms cubic-bezier(1, 0.885, 0.82, 0.5);
  transform: translateY(-200%);
  opacity: 1;
}
body #wrap input:nth-of-type(3):checked ~ .inner .images div:not(.image):nth-of-type(3) .image {
  opacity: 1;
  transform: scale(1);
}
body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) p {
  transition: transform 500ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 1.5s;
  transform: rotate(0deg) translateY(0);
}
body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 {
  opacity: 1;
}

body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(7) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(8) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(9) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(10) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(11) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(12) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(13) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(14) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(1) span:nth-of-type(15) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(2) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(7) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(8) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(9) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(10) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(11) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(12) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(13) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(14) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1 .word:nth-of-type(3) span:nth-of-type(15) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }

body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1:after, body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1:before {
  transition-delay: 1s;
  transform: scaleX(1);
}
body #wrap input:nth-of-type(3):checked ~ .inner .content:nth-of-type(3) h1:before {
  transition-delay: 1.3s;
}


/* MENU4 */
body #wrap input:nth-of-type(4):hover ~ .nav:nth-of-type(4):before {
  color: #ff3432;
}
body #wrap input:nth-of-type(4):checked ~ .nav:nth-of-type(4):before {
  color: #fff;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1.2);
  transition-delay: 0.1s;
}
body #wrap input:nth-of-type(4):checked ~ .indicator {
  transform: translateY(300%);
}
body #wrap input:nth-of-type(4):checked ~ .inner input {
  pointer-events: all;
}
body #wrap input:nth-of-type(4):checked ~ .inner .more b:nth-of-type(4) {
  transition-delay: 2.2s;
  transform: scale(1);
}
body #wrap input:nth-of-type(4):checked ~ .inner .more b:nth-of-type(4):before {
  transition-delay: 2.4s;
  transform: scale(1);
}
body #wrap input:nth-of-type(4):checked ~ .inner .images div:not(.image):nth-of-type(4) {
  z-index: 1;
}
body #wrap input:nth-of-type(4):checked ~ .inner .images div:not(.image):nth-of-type(4):before {
  transition: transform 2000ms cubic-bezier(1, 0.885, 0.82, 0.5);
  transform: translateY(-200%);
  opacity: 1;
}
body #wrap input:nth-of-type(4):checked ~ .inner .images div:not(.image):nth-of-type(4) .image {
  opacity: 1;
  transform: scale(1);
}
body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) p {
  transition: transform 500ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 1.5s;
  transform: rotate(0deg) translateY(0);
}
body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 {
  opacity: 1;
}

body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(7) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(8) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(9) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(10) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(11) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(12) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(13) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(14) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(1) span:nth-of-type(15) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(2) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(7) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(8) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(9) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(10) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(11) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(12) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(13) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(14) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1 .word:nth-of-type(3) span:nth-of-type(15) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }

body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1:after, body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1:before {
  transition-delay: 1s;
  transform: scaleX(1);
}
body #wrap input:nth-of-type(4):checked ~ .inner .content:nth-of-type(4) h1:before {
  transition-delay: 1.3s;
}


/* MENU5 */
body #wrap input:nth-of-type(5):hover ~ .nav:nth-of-type(5):before {
  color: #ff3432;
}
body #wrap input:nth-of-type(5):checked ~ .nav:nth-of-type(5):before {
  color: #fff;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1.2);
  transition-delay: 0.1s;
}
body #wrap input:nth-of-type(5):checked ~ .indicator {
  transform: translateY(400%);
}
body #wrap input:nth-of-type(5):checked ~ .inner input {
  pointer-events: all;
}
body #wrap input:nth-of-type(5):checked ~ .inner .more b:nth-of-type(5) {
  transition-delay: 2.2s;
  transform: scale(1);
}
body #wrap input:nth-of-type(5):checked ~ .inner .more b:nth-of-type(5):before {
  transition-delay: 2.4s;
  transform: scale(1);
}
body #wrap input:nth-of-type(5):checked ~ .inner .images div:not(.image):nth-of-type(5) {
  z-index: 1;
}
body #wrap input:nth-of-type(5):checked ~ .inner .images div:not(.image):nth-of-type(5):before {
  transition: transform 2000ms cubic-bezier(1, 0.885, 0.82, 0.5);
  transform: translateY(-200%);
  opacity: 1;
}
body #wrap input:nth-of-type(5):checked ~ .inner .images div:not(.image):nth-of-type(5) .image {
  opacity: 1;
  transform: scale(1);
}
body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) p {
  transition: transform 500ms cubic-bezier(1, 0.885, 0.72, 1);
  transition-delay: 1.5s;
  transform: rotate(0deg) translateY(0);
}
body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 {
  opacity: 1;
}

body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(7) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(8) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(9) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(10) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(11) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(12) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(13) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(14) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(1) span:nth-of-type(15) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(2) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(1) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(2) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(3) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(4) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(5) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(6) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(7) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(8) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(9) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(10) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(11) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(12) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(13) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(14) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1 .word:nth-of-type(3) span:nth-of-type(15) { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.57s; transform: scale(1) rotate(0deg); }

body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1:after, body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1:before {
  transition-delay: 1s;
  transform: scaleX(1);
}
body #wrap input:nth-of-type(5):checked ~ .inner .content:nth-of-type(5) h1:before {
  transition-delay: 1.3s;
}


/*  */
body #wrap input[type=radio],
body #wrap .nav,
body #wrap .indicator {
  height: 20%;
  position: absolute;
  width: 10%;
  left: 0;
  box-shadow: inset 0 0 0 2px #1161a4;
}
body #wrap input[type=radio]:nth-of-type(1),
body #wrap .nav:nth-of-type(1),
body #wrap .indicator:nth-of-type(1) {
  top: 0%;
}
body #wrap input[type=radio]:nth-of-type(2),
body #wrap .nav:nth-of-type(2),
body #wrap .indicator:nth-of-type(2) {
  top: 20%;
}
body #wrap input[type=radio]:nth-of-type(3),
body #wrap .nav:nth-of-type(3),
body #wrap .indicator:nth-of-type(3) {
  top: 40%;
}
body #wrap input[type=radio]:nth-of-type(4),
body #wrap .nav:nth-of-type(4),
body #wrap .indicator:nth-of-type(4) {
  top: 60%;
}
body #wrap input[type=radio]:nth-of-type(5),
body #wrap .nav:nth-of-type(5),
body #wrap .indicator:nth-of-type(5) {
  top: 80%;
}
body #wrap .nav {
  z-index: 2;
}
body #wrap .nav:nth-of-type(2) {
  box-shadow: inset -2px 0 0 #1161a4, inset 2px 0 0 #1161a4;
}
body #wrap .nav:nth-of-type(2):before {
  content: "LAYANAN";
}
body #wrap .nav:nth-of-type(3):before {
  content: "KLIEN";
}
body #wrap .nav:nth-of-type(4) {
  box-shadow: inset -2px 0 0 #1161a4, inset 2px 0 0 #1161a4;
}
body #wrap .nav:nth-of-type(4):before {
  content: "GALLERY";
}
body #wrap .nav:nth-of-type(5):before {
  content: "KONTAK";
}
body #wrap .nav:before {
  content: "BERANDA";
  position: absolute;
  display: inline-block;
  color: #1161a4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: all 200ms cubic-bezier(1, 0.885, 0.32, 1);
}
body #wrap .indicator {
  background: #10c8b3;
  transition: all 200ms cubic-bezier(1, 0.885, 0.32, 1);
  z-index: 0;
  box-shadow: none;
}
body #wrap .inner {
  position: absolute;
  width: 90%;
  left: 10%;
  top: 0;
  overflow: hidden;
  height: 100%;
}
body #wrap .inner .images {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 50%;
  overflow: hidden;
  transition: all 300ms cubic-bezier(1, 0.885, 0.72, 1);
}
body #wrap .inner .images div:not(.image) {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
body #wrap .inner .images div:not(.image):before {
  content: "";
  position: absolute;
  width: 100%;
  height: 200%;
  left: 0;
  top: 100%;
  background: #feb339;
  transform: translateY(100%);
  z-index: 2;
  opacity: 0;
}
body #wrap .inner .images div:not(.image):nth-of-type(2) .image {
  background-image: url("https://puu.sh/DdcJi/a10cb7ffc1.jpg");
}
body #wrap .inner .images div:not(.image):nth-of-type(3) .image {
  background-image: url("https://puu.sh/DdcOe/281086cd16.jpg");
}
body #wrap .inner .images div:not(.image):nth-of-type(4) .image {
  background-image: url("https://puu.sh/DdcOe/281086cd16.jpg");
}
body #wrap .inner .images div:not(.image):nth-of-type(5) .image {
  background-image: url("https://puu.sh/DdcOe/281086cd16.jpg");
}
body #wrap .inner .images div:not(.image) .image {
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: url("https://puu.sh/DdbZq/8577c8d00c.jpg");
  opacity: 0;
  transform: scale(1.5) rotate(-15deg);
  transition: opacity 1s ease-in-out, transform 2s ease-in-out;
  transition-delay: 1s, 1s;
  background-size: cover;
  background-position: center;
}
body #wrap .inner .content {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  top: 50%;
  overflow: hidden;
  z-index: 2;
  transition: all 300ms cubic-bezier(1, 0.885, 0.72, 1);
}
body #wrap .inner h1 {
  display: inline-block;
  position: relative;
  width: auto;
  color: #fff;
  z-index: 1;
  width: 100%;
  opacity: 1;
  margin: 0;
  padding: 5%;
  overflow: hidden;
  font-family: "Lora";
  font-weight: 100;
}
body #wrap .inner h1:after {
  content: "";
  position: absolute;
  box-shadow: inset 0 -2px #ff3432, inset 0 2px #ff3432;
  width: 140%;
  height: 100%;
  left: -20%;
  top: 0%;
  z-index: -1;
  transition: all 500ms cubic-bezier(1, 0.885, 0.32, 1);
  transform: scaleX(0);
  transform-origin: right;
}
body #wrap .inner h1:before {
  content: "";
  position: absolute;
  width: 140%;
  height: 100%;
  left: -20%;
  top: 0%;
  background: #ff3432;
  z-index: -1;
  transition: all 300ms cubic-bezier(1, 0.885, 0.32, 1);
  transform: scaleX(0);
  transform-origin: left;
}
body #wrap .inner h1 span {
  display: inline-block;
  position: relative;
}
body #wrap .inner h1 span.char {
  transform: scale(0) rotate(-30deg);
}
body #wrap .inner h1 span.whitespace {
  width: 10px;
}
body #wrap .inner .content p {
  transform: rotate(20deg) translateY(300px);
  transition: transform 200ms cubic-bezier(1, 0.885, 0.72, 1);
  transform-origin: left;
  display: inline-block;
  max-width: 90%;
  margin: 2.5% 5%;
  line-height: 1.5;
  color: #333;
  font-size: 18px;
}
body .more,
body .back {
  position: absolute;
  z-index: 5;
  bottom: 10px;
  right: 10px;
  height: 50px;
  width: 50px;
  display: inline-block;
}
body .more b,
body .back b {
  position: absolute;
  font-family: "Lora";
  font-size: 30px;
  color: #ff3432;
  left: 0;
  top: 0;
  transform: scale(0);
  transition: transform 100ms cubic-bezier(1, 0.885, 0.72, 1.25);
}
body .more b:before, body .more b:after,
body .back b:before,
body .back b:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  border: 2px solid #ff3432;
  border-radius: 100%;
  z-index: -1;
  left: calc(50% - 19px);
  top: calc(50% - 19px);
  transition: 0.2s ease-in-out;
  transform: scale(1.2);
}
body .back {
  right: auto;
  left: 5%;
}
body .back:before, body .back:after {
  border-color: #fff;
}