/*
html, body {
  height: 100%;
}

body {
  perspective: 600px;
  background: #FFDBD8;
  font-family: -apple-system, BlinkMacSystemFont, "myriad-pro", sans-serif;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  body {
    perspective: 300px;
  }
}
*/

.full {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.6s linear;
  background: white;
}

.full-second {
    background-color: white;
}

.menu {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: all 0.2s linear;
  cursor: pointer;
}
.menu:active {
  background: #eee;
}
.menu::before, .menu::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 14px;
  height: 2px;
  width: 20px;
  background: black;
  pointer-events: none;
  transition: all 0.2s linear;
}
.menu::before {
  transform: translateY(-3px);
}
.menu::after {
  transform: translateY(3px);
}

.menu.crossed2 {
   margin-top: -600px;
   z-index: 999;
} 

.menu.crossed2::before {
  transform: rotate(45deg);
}
.menu.crossed2::after {
  transform: rotate(135deg);
}
.menu.crossed-fam {
   margin-top: -600px;
   z-index: 999;
} 

.menu.crossed-fam::before {
  transform: rotate(45deg);
}
.menu.crossed-fam::after {
  transform: rotate(135deg);
}
.menu.crossed3, .menu.crossed9 {
   margin-top: -600px;
} 

.menu.crossed3::before, .menu.crossed9::before {
  transform: rotate(45deg);
}
.menu.crossed3::after, .menu.crossed9::after {
  transform: rotate(135deg);
}
.menu.crossed4 {
    margin-top: -600px;
}

.menu.crossed4::before {
  transform: rotate(45deg);
}
.menu.crossed4::after {
  transform: rotate(135deg);
}

.menu.crossed5 {
    margin-top: -600px;
}

.menu.crossed5::before {
  transform: rotate(45deg);
}
.menu.crossed5::after {
  transform: rotate(135deg);
}

.menu.crossed6 {
    margin-top: -600px;
}

.menu.crossed6::before {
  transform: rotate(45deg);
}
.menu.crossed6::after {
  transform: rotate(135deg);
}

.menu.crossed7 {
    margin-top: -600px;
}

.menu.crossed7::before {
  transform: rotate(45deg);
}
.menu.crossed7::after {
  transform: rotate(135deg);
}


.menu.crossed8 {
    margin-top: -600px;
}

.menu.crossed8::before {
  transform: rotate(45deg);
}
.menu.crossed8::after {
  transform: rotate(135deg);
}


.menu.crossed {
    position: absolute;
    top: -100px;
    right: 100px;
    z-index: 6;
}

.menu.crossed::before {
  transform: rotate(45deg);
}
.menu.crossed::after {
  transform: rotate(135deg);
}

.page {
   
  background: #F7F7F7;
  transform-origin: right center;
  transform: translateX(0) rotateY(0);
  z-index: 1;
  opacity: 1;
}
.page.swipe-lft {
  
  opacity: 0.5;
  z-index: 0;
  transform: translateX(-100%) rotateY(-35deg);
}



.full2 {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.6s linear;
  background: white;
}

.page2 {
   
  background: #fff;
  transform-origin: right center;
  transform: translateX(0) rotateY(0);
  
  opacity: 1;
}
.page2.swipe-lft {
  
  opacity: 0.5;
  z-index: 0;
  transform: translateX(-120%) rotateY(-35deg);
}

.nav {
   
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0.5;
}
.nav.open {
   
  opacity: 1;
  z-index: 1;
  transform: translateX(0) rotateY(0deg);
    margin-top: -600px;    margin-bottom: 600px;
}

.nav2 {
/*    display: none;*/
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0.5;
}
.nav2.open {
/*           display: block;*/
  opacity: 1;
  z-index: 1;
  transform: translateX(0) rotateY(0deg);
    margin-top: -600px;
}
.nav-fam {
/*    display: none;*/
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0.5;
}
.nav-fam.open {
/*           display: block;*/
  opacity: 1;
  z-index: 1;
  transform: translateX(0) rotateY(0deg);
    margin-top: -600px;
}
.nav3 {
/*    display: none;*/
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0.5;
}
.nav3.open {
/*           display: block;*/
  opacity: 1;
  z-index: 1;
  transform: translateX(0) rotateY(0deg);
    margin-top: -600px;
}
.nav9 {
/*    display: none;*/
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0.5;
}
.nav9.open {
/*           display: block;*/
  opacity: 1;
  z-index: 1;
  transform: translateX(0) rotateY(0deg);
    margin-top: -600px;
}


.nav4 {
/*    display: none;*/
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0.5;
}
.nav4.open {
/*           display: block;*/
  opacity: 1;
  z-index: 1;
  transform: translateX(0) rotateY(0deg);
    margin-top: -600px;
}

.nav5 {
/*    display: none;*/
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0.5;
}
.nav5.open {
/*           display: block;*/
  opacity: 1;
  z-index: 1;
  transform: translateX(0) rotateY(0deg);
    margin-top: -600px;
}

.nav6 {
/*    display: none;*/
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0.5;
}
.nav6.open {
/*           display: block;*/
  opacity: 1;
  z-index: 1;
  transform: translateX(0) rotateY(0deg);
    margin-top: -600px;
}

.nav7 {
/*    display: none;*/
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0.5;
}
.nav7.open {
/*           display: block;*/
  opacity: 1;
  z-index: 1;
  transform: translateX(0) rotateY(0deg);
    margin-top: -600px;
}


.nav8 {
/*    display: none;*/
  transform-origin: left center;
  transform: translateX(100%) rotateY(35deg);
  z-index: 0;
  opacity: 0;

}
.nav8.open {
/*           display: block;*/
  opacity: 1;
  z-index: 999;
  transform: translateX(0) rotateY(0deg);
    
}



.cube {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
   margin-top: -300px;
    
/*
  font-size: 5vw;
  font-weight: 600;
  color: #C8CCD4;
*/
  pointer-events: none;
}

.cube img {
    width: 400px;
    float: left;
    
}

@media screen and (max-width: 768px) {
  .cube {
    font-size: 24px;
    white-space: nowrap;
  }
  .nav8.open {
    margin-bottom: 300px;
  }
}