@import url("f/font_style.css");
@import url("stand.css");
html,
body {
  height: 100%;
}
body {
  color: #020206;
  font: normal 300 16px/1 'hhh', sans-serif;
  overflow: hidden;
}
section {
  overflow: hidden;
}
.content {
  margin: 0 auto;
  padding: 0 2%;
  width: 90%;
  max-width: 1200px;
  font-weight: bold;
}
header {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow-x: hidden;
  text-align: center;
}
header.active {
  display: block;
}
.intro {
  margin-right: -20px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro:before {
  content: '';
  width: 1px;
  height: 100vh;
}
.intro .title {
  font-size: 80px;
  height: 2.5em;
  position: fixed;
  z-index: -1;
}
@media (min-width: 80em) {
  .intro .title {
    font-size: 55px;
  }
}
.intro .title h1 {
  text-align: left;
  display: inline-block;
  position: relative;
  z-index: 1;
  letter-spacing: 0.15em;
}
.intro .title h1 span {
  margin-left: -0.2em;
}
.intro .diptics-content {
  width: 50%;
  height: 22vh;
  -webkit-overflow-scrolling: touch;
  margin-right: -20px;
  position: fixed;
  z-index: -2;
}
.intro span.diptics {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.2);
  position: absolute;
  transform-origin: 50% 50%;
  transition: transform 600ms ease-in;
  left: -20%;
  top: -80%;
  background-color: white;
  transform-style: preserve-3d;
  max-width: 80%;
}
.intro span.diptics + .diptics {
  top: -50%;
  right: -30%;
  left: initial;
  animation-delay: 0.3s;
}
@keyframes diptic {
  0% {
    transform: skewY(0) scaleX(1);
  }
  3% {
    transform: skewY(1.3deg) scaleX(1);
  }
  6.6% {
    transform: skewY(2deg) scaleX(1);
  }
  9% {
    transform: skewY(1.3deg) scaleX(1);
  }
  12.12% {
    transform: skewY(0deg) scaleX(1);
  }
  15.15% {
    transform: skewY(-1.3deg) scaleX(1);
  }
  18.18% {
    transform: skewY(-2deg) scaleX(1);
  }
  21.21% {
    transform: skewY(-1.3deg) scaleX(1);
  }
  27% {
    transform: skewY(0) scaleX(1);
  }
  30% {
    transform: skewY(1.3deg) scaleX(1);
  }
  33% {
    transform: skewY(1.5deg) scaleX(1);
  }
  36% {
    transform: skewY(1.3deg) scaleX(1);
  }
  39% {
    transform: skewY(0deg) scaleX(1);
  }
  42% {
    transform: skewY(-1.3deg) scaleX(1);
  }
  48% {
    transform: skewY(-1.5deg) scaleX(1);
  }
  51% {
    transform: skewY(-1.3deg) scaleX(1);
  }
  57% {
    transform: skewY(0) scaleX(1);
  }
  60% {
    transform: skewY(0.7deg) scaleX(1);
  }
  63% {
    transform: skewY(0deg) scaleX(1);
  }
  66% {
    transform: skewY(-0.7deg) scaleX(1);
  }
  72% {
    transform: skewY(0) scaleX(1);
  }
  73.5% {
    transform: skewY(0.3deg) scaleX(1);
  }
  75% {
    transform: skewY(0deg) scaleX(1);
  }
  76.5% {
    transform: skewY(-0.3deg) scaleX(1);
  }
  78% {
    transform: skewY(0) scaleX(1);
  }
  79.5% {
    transform: skewY(0.1deg) scaleX(1);
  }
  81% {
    transform: skewY(0deg) scaleX(1);
  }
  82.5% {
    transform: skewY(-0.1deg) scaleX(1);
  }
  84% {
    transform: skewY(0) scaleX(1);
  }
  85.5% {
    transform: skewY(0) scaleX(1);
  }
  87% {
    transform: skewY(0.3deg) scaleX(1);
  }
  88.5% {
    transform: skewY(0deg) scaleX(1);
  }
  90% {
    transform: skewY(-0.3deg) scaleX(1);
  }
  91.5% {
    transform: skewY(0) scaleX(1);
  }
  93% {
    transform: skewY(0.1deg) scaleX(1);
  }
  94.5% {
    transform: skewY(0deg) scaleX(1);
  }
  96% {
    transform: skewY(-0.1deg) scaleX(1);
  }
  99% {
    transform: skewY(0) scaleX(1);
  }
}
/*

sin partes divididas en tiempo a cambio de darle mas espacio

72%  { transform: skewY(0) scaleX(1);}
75%  { transform: skewY(.3deg) scaleX(1);}
78% { transform: skewY(0deg) scaleX(1);}
81% { transform: skewY(-.3deg) scaleX(1);}

87%  { transform: skewY(0) scaleX(1);}
90%  { transform: skewY(.1deg) scaleX(1);}
93% { transform: skewY(0deg) scaleX(1);}
96% { transform: skewY(-.1deg) scaleX(1);}
99% { transform: skewY(0) scaleX(1);}
*/
/*

0%  { transform: skewY(0) scaleX(1);}
3%  { transform: skewY(1.3deg) scaleX(1);}
6.6% { transform: skewY(2deg) scaleX(1);}
9% { transform: skewY(1.3deg) scaleX(1);}
12.12% { transform: skewY(0deg) scaleX(1);}
15.15% { transform: skewY(-1.3deg) scaleX(1);}
18.18% { transform: skewY(-2deg) scaleX(1);}
21.21% { transform: skewY(-1.3deg) scaleX(1);}

27%  { transform: skewY(0) scaleX(1);}
30%  { transform: skewY(1.3deg) scaleX(1);}
33% { transform: skewY(1.5deg) scaleX(1);}
36% { transform: skewY(1.3deg) scaleX(1);}
39% { transform: skewY(0deg) scaleX(1);}
42% { transform: skewY(-1.3deg) scaleX(1);}
48% { transform: skewY(-1.5deg) scaleX(1);}
51% { transform: skewY(-1.3deg) scaleX(1);}

57%  { transform: skewY(0) scaleX(1);}
60%  { transform: skewY(.7deg) scaleX(1);}
63% { transform: skewY(0deg) scaleX(1);}
66% { transform: skewY(-.7deg) scaleX(1);}

72%  { transform: skewY(0) scaleX(1);}
75%  { transform: skewY(.3deg) scaleX(1);}
78% { transform: skewY(0deg) scaleX(1);}
81% { transform: skewY(-.3deg) scaleX(1);}

87%  { transform: skewY(0) scaleX(1);}
90%  { transform: skewY(.1deg) scaleX(1);}
93% { transform: skewY(0deg) scaleX(1);}
96% { transform: skewY(-.1deg) scaleX(1);}
99% { transform: skewY(0) scaleX(1);}



0%  { transform: skewY(0) scaleX(1);}
20% { transform: skewY(.5deg) scaleX(1);}
10% { transform: skewY(1deg) scaleX(1);}
10% { transform: skewY(1.5deg) scaleX(1);}
10% { transform: skewY(2deg) scaleX(1);}
10% { transform: skewY(1.5deg) scaleX(1);}
10% { transform: skewY(1deg) scaleX(1);}


0%  { transform: skewY(0) scaleX(1);}
20% { transform: skewY(.4deg) scaleX(1);}
10% { transform: skewY(.8deg) scaleX(1);}
10% { transform: skewY(1.2deg) scaleX(1);}
10% { transform: skewY(1.6deg) scaleX(1);}
10% { transform: skewY(2deg) scaleX(1);}


0%, 100% { transform: skewY(0) scaleX(1); }
25% { transform: skewY(2deg) scaleX(.98); }
75% { transform: skewY(-2deg) scaleX(.98); }


25% { transform: skewY(3deg) skewX(2deg); }
85% { transform: skewY(-2deg) skewX(-2deg); }
*/
footer {
  position: fixed;
  bottom: 2vh;
  width: 100%;
}
nav {
  width: 100%;
  text-align: center;
  font-size: 14px;
}
nav ul.content {
  background: white;
  border: 1px solid;
  padding: 0;
  transition: opacity 1.2s linear, transform 2s linear;
}
nav ul.content li {
  display: inline-block;
  width: 33.333%;
  margin-right: -3px;
  cursor: pointer;
  padding: 0.2em 0.6em 0.25em;
}
nav ul.content li:first-child {
  text-align: left;
}
nav ul.content li:last-child {
  text-align: right;
}
nav ul.content li.hidden {
  display: none !important;
}
nav ul.content li.hidden + li {
  text-align: left;
}
nav .submenu {
  display: none;
}
nav li.on .submenu {
  display: inline-block;
}
nav li.on .submenu li {
  width: auto;
  margin: 0;
  padding: 0 0.6em;
}
nav li.on .submenu li.active:before {
  content: '>';
  display: inline-block;
  font-size: 0.8em;
  vertical-align: top;
  margin-right: 0.3em;
}
.part {
  display: none;
  height: 100vh;
}
.part#project {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.99) 33%, #ffffff 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.99) 33%, #ffffff 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.99) 33%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
  text-align: left;
}
.part.active {
  display: block;
}
.part.active#insView {
  display: block;
}
/*diptics*/
#diptics {
  overflow-y: hidden;
  height: 90%;
  height: calc(88vh + 20px);
  margin: 3vh 0 -20px;
}
#diptics .diptic {
  height: 100%;
  display: none;
  user-select: none;
  white-space: nowrap;
  margin: 0 5vh;
  flex-wrap: nowrap;
}
#diptics .diptic#one {
  display: flex;
}
#diptics .diptic .side {
  height: 100%;
  flex: 0 0 auto;
}
#diptics .diptic .side [class^="dip"] {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
#diptics .diptic .side .dip_img img {
  height: 100%;
}
#diptics .diptic .side .dip_txt {
  min-width: 100vw;
  padding: 30px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#direction {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: scroll;
}
#direction div {
  width: 35%;
  height: 120%;
  position: absolute;
  top: 0;
  cursor: w-resize;
}
#direction div.dright {
  right: 0;
  cursor: e-resize;
}
/*virtual diptic*/
#l0v3rs {
  align-items: center;
  justify-content: center;
}
#l0v3rs .scene {
  width: 1056px;
  height: 308px;
  perspective: 900px;
}
#l0v3rs .d1pt1c,
#l0v3rs .d2pt2c {
  display: block;
  width: 480px;
  height: 308px;
  float: left;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
  transform: translateZ(-150px) rotateY(220deg);
}
#l0v3rs .d1pt1c .face--front,
#l0v3rs .d2pt2c .face--front {
  background-image: url(img/installation-view_1-1.jpg);
}
#l0v3rs .d1pt1c .face--back,
#l0v3rs .d2pt2c .face--back {
  background-image: url(img/lovers-diptic-1.png);
}
#l0v3rs .d2pt2c .face--front {
  background-image: url(img/lovers-diptic-2.png);
}
#l0v3rs .d2pt2c .face--back {
  background-image: url(img/installation-view_2-1.jpg);
}
#l0v3rs [class^="face"] {
  position: absolute;
  border: 1px solid #dedede;
  background-color: #FFF;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain !important;
  text-align: center;
}
#l0v3rs .face--front,
#l0v3rs .face--back {
  width: 480px;
  height: 308px;
}
#l0v3rs .face--right,
#l0v3rs .face--left {
  width: 16px;
  height: 308px;
  background: #dedede;
}
#l0v3rs .face--top,
#l0v3rs .face--bottom {
  width: 480px;
  height: 16px;
  background: #dedede;
}
#l0v3rs .face--front {
  transform: rotateY(180deg) translateZ(8px);
}
#l0v3rs .face--back {
  transform: rotateY(0deg) translateZ(8px);
}
#l0v3rs .face--right {
  right: 0;
  transform: rotateY(90deg) translateZ(8px);
}
#l0v3rs .face--left {
  transform: rotateY(-90deg) translateZ(8px);
}
#l0v3rs .face--top {
  transform: rotateX(90deg) translateZ(8px);
}
#l0v3rs .face--bottom {
  bottom: 0;
  transform: rotateX(-90deg) translateZ(8px);
}
.notification {
  position: fixed;
  z-index: 10;
  top: 20%;
  width: 100%;
  text-align: center;
}
.notification span {
  display: none;
  white-space: normal;
  max-width: 70%;
  padding: 0.7em 1.7em;
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 149, 149, 0.6);
  letter-spacing: 0.1em;
}
.notification span.mobile {
  display: inline-block;
}
/*
@ancho: 300px;
@alto: 193px;
@largo: 10px;

.sscene--cube {
    width: @ancho *2;
    height: @alto;
    margin: 80px 0;
    perspective: 500px;
}
.ccube {
    width: @ancho;
    height: @alto;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    transform: translateZ(-100px) rotateY( 60deg);
}
[class^="ccube__face"] {
    position: absolute;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain !important;
    border: 1px solid #828282;
    text-align: center;
}
.ccube__face--front,
.ccube__face--back {
    width: @ancho;
    height: @alto;
}
.ccube__face--right,
.ccube__face--left {
    width: @largo * 2;
    height: @alto;
    border: 1px solid #828282;
}
.ccube__face--top,
.ccube__face--bottom {
    width: @ancho;
    height: @largo * 2;
    border: 1px solid #828282;
}
.ccube__face--front {
    transform: rotateY(0deg) translateZ(@largo);
}
.ccube__face--back {
    transform: rotateY(180deg) translateZ(@largo);
}
.ccube__face--right {
    right: 0;
    transform: rotateY( 90deg) translateZ(@largo);
}
.ccube__face--left {
    transform: rotateY(-90deg) translateZ(@largo);
}
.ccube__face--top {
    transform: rotateX( 90deg) translateZ(@largo);
}
.ccube__face--bottom {
    bottom: 0;
    transform: rotateX(-90deg) translateZ(@largo);
}

.ccube__face--front  { background: hsla(  0, 100%, 50%, 0.7); }
.ccube__face--right  { background: hsla( 60, 100%, 50%, 0.7); }
.ccube__face--back   { background: hsla(120, 100%, 50%, 0.7); }
.ccube__face--left   { background: hsla(180, 100%, 50%, 0.7); }
.ccube__face--top    { background: hsla(240, 100%, 50%, 0.7); }
.ccube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }
*/
/*installation view*/
#insView {
  width: 100%;
  text-align: center;
  overflow-x: hidden;
}
#insView li {
  margin-top: -3px;
}
/* Project */
#project {
  letter-spacing: 0.15em;
  line-height: 2;
}
/**/
/*480*/
@media screen and (min-width: 30em) {
  body {
    text-rendering: optimizeSpeed;
  }
}
/*768*/
/*1024*/
@media screen and (min-width: 68em) {
  .notification span {
    display: inline-block;
  }
  .notification span.mobile {
    display: none;
  }
}
/*1240*/
/*1440*/
/*1280*/
/*1216*/
/*960*/
@media screen and (max-width: 68em) {
  nav ul.content li {
    vertical-align: middle;
  }
  nav ul.content li:first-child {
    width: 12%;
  }
  nav ul.content li[data-d="diptics"] {
    width: 50%;
    line-height: 1.5;
  }
  #diptics {
    margin-top: 0;
  }
  #direction {
    display: none;
  }
  #l0v3rs .d1pt1c,
  #l0v3rs .d2pt2c {
    width: 440px;
  }
  #l0v3rs {
    align-items: flex-start;
    padding-top: 10vmin;
  }
  .part#project .content {
    padding-bottom: 20vh;
  }
}
/*640*/
@media screen and (max-width: 40em) {
  .intro .title {
    font-size: 50px;
  }
  .intro .title h1 {
    text-align: center;
  }
  .intro .diptics-content {
    top: 58%;
  }
}