*,
*::before,
*::after {
  box-sizing: border-box;

  margin: 0;
  padding: 0;

  font-family: "sofia-pro-condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
  text-transform: capitalize;

  letter-spacing: .2rem;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

:root {
  --header-grid:  "h1  ."
                  "h2  ."
                  "w  wb"
                  "n   ."
                  "em  ."
                  "ad  ."
                  "sir .";

  --hh3-ga: ad;

  --color-green: #90ADA0;
  --color-lgrey: #AAAAAA;
  --color-dgrey: #707070;

  --ft-h1: 1.32rem;
  --ft-h2: 1.16rem;
  --ft-tiny: .62rem;
  --ft-wwm: 16pt;

  --gta:    ".. hd hd .."
            ".. f1 f1 .."
            ".. f2 f2 .."
            ".. .. .. ..";

  --fj1: flex-start;
  --fa1: center;
  --fj2: flex-end;
  --fa2: center;

  --one-w:42vmax;
  --one-h:64vmax;

  --tf-w:32vmax;
  --tf-h:32vmax;

  --five-w:36vmax;
  --five-h:26vmax;

  --six-w:26vmax;
  --six-h:40vmax;

  --seven-w:40vmax;
  --seven-h:56vmax;

  --eight-w:32vmax;
  --eight-h:24vmax;

  --nine-w:26vmax;
  --nine-h:40vmax;

  --ten-w:42vmax;
  --ten-h:64vmax;

  --eleven-w:38vmax;
  --eleven-h:28vmax;
}

@media (orientation: landscape) {
  :root {
    --gta:    ".. hd hd .."
              ".. f1 f2 .."
              ".. f1 f2 .."
              ".. .. .. ..";

    --header-grid:  "h1  ."
                    "h2  ."
                    "w  wb"
                    "n   sir"
                    ".  em";

    --header-trans: translateY(-8vh) rotate(-45deg);
    --hh3-ga: wb;

    --ft-h1: 2em;
    --ft-h2: 1.62rem;
    --ft-tiny: 10px;
    --ft-wwm: 32pt;

    --fj1: center;
    --fa1: flex-start;
    --fj2: center;
    --fa2: flex-end;

    --one-w:42vmin;
    --one-h:64vmin;

    --tf-w:48vmin;
    --tf-h:48vmin;

    --five-w:66vmin;
    --five-h:48vmin;

    --six-w:42vmin;
    --six-h:64vmin;

    --seven-w:59vmin;
    --seven-h:83vmin;

    --eight-w:66vmin;
    --eight-h:48vmin;

    --nine-w:42vmin;
    --nine-h:64vmin;

    --ten-w:54vmin;
    --ten-h:80vmin;

    --eleven-w: 107vmin;
    --eleven-h:75vmin;
  }
}

@media (orientation: landscape) and (min-height: 654px) and (max-height: 768px) {
  :root {
    --ft-h1: 1.64em;
    --ft-h2: 1.32em;
    --ft-tiny: 10px;
    --ft-wwm: 20pt;
  }
}


html,
body {
  height: 100%;
}

body {
  height: calc(10 * 100vw);
}

.wrapper {
  width: calc(10 * 100vw);
  height: 100vh;

  display: flex;
  flex-direction: row;

  position: fixed;
  left: 0;
  top: 0;
}

header,
footer,
section {
  width: 100vw;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  object-fit: contain;
  object-position: bottom;
}

header {
  display: grid;

  grid-template: var(--header-grid,
    "h1  ."
    "h2  ."
    "w  wb"
    "n   ."
    "em  ."
    "ad  ."
    "sir .");
  grid-auto-columns: max-content;
  grid-auto-rows: max-content;
  grid-row-gap: 8px;
  justify-content: center;
  align-content: center;

  justify-self: center;
  align-self: center;

  transform: var(--header-trans, translateY(0) rotate(0))
}

header > h1 {
  grid-area: h1;
  font-size: 1.32rem;
  font-size: var(--ft-h1, 1.32rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-dgrey, #707070);
}

header > h2 {
  grid-area: h2;
  font-size: 1.16rem;
  font-size: var(--ft-h2, 1.16rem);
  color: var(--color-lgrey, #AAAAAA);
}

header > h2,
header > h2 * {
  font-weight: 400;
}

header > h3 {
  grid-area: ad;
  grid-area: var(--hh3-ga, ad);
  font-size: .62rem;
  font-size: var(--ft-tiny, .62rem);
  color: var(--color-lgrey, #AAAAAA);
  text-align: right;
  align-self: center;

}

header > h4 {
  grid-area: sir;
  font-size: .62rem;
  font-size: var(--ft-tiny, .62rem);
  color: var(--color-lgrey, #AAAAAA);
  text-align: right;
  align-self: flex-end;

}

header > h5 {
  display: grid;
  margin: 16px 0;
}

header > h5:nth-of-type(1) {
  grid-area: w;
}

header > h5:nth-of-type(1) a {
  justify-self: flex-end;
  writing-mode: vertical-lr;
  font-family: sofia-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16pt;
  font-size: var(--ft-wwm, 16pt);
  color: var(--color-green, #90ADA0);
}

header > h5:nth-of-type(2) {
  grid-area: wb;
  align-self: flex-end;
  writing-mode: vertical-lr;
  font-size: .62rem;
  font-size: var(--ft-tiny, .62rem);
  color: var(--color-lgrey, #AAAAAA);
}

header > h6 {
  grid-area: em;
  font-size: 1em;
  text-align: right;
  align-self: flex-end;
}

header > h6 a {
  text-transform: lowercase;
}

header > nav {
  grid-area: n;
  align-self: flex-end;
}

header > nav h2 {
  font-size: 0;
}

/*

Section

*/

section {
  display: grid;
  grid-template-areas: var(--gta);
  grid-template-columns: minmax(8px,32px) 1fr 1fr minmax(8px,32px);
  grid-template-rows: auto 1fr 1fr auto;
  grid-gap: 2vmin;
}

section h2 {
  grid-area: hd;
  font-size: 0;
}

section.two h3 {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
  justify-self: flex-end;
  text-align: right;
  font-size: 1.64rem;
  font-family: sofia-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: rgba(255,255,255,.98);
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

section.two h4 {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
  align-self: flex-end;
  margin-bottom: 32px;
  color: rgba(255,255,255,.98);
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

figure:nth-of-type(1) {
  grid-area: f1;
  justify-self: var(--fj1, flex-start);
  align-self: var(--fa1, center);
}

figure:nth-of-type(2) {
  grid-area: f2;
  justify-self: var(--fj2, flex-end);
  align-self: var(--fa2, center);
}

figure.img-one,
figure.img-seven,
figure.img-ten,
figure.img-eleven {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
}

figure.img-one {
  justify-self: center;
  align-self: center;
}

figure.img-seven {
  justify-self: flex-end;
  align-self: center;
}

figure.img-ten {
  justify-self: flex-start;
  align-self: center;
}

figure.img-eleven {
  justify-self: flex-end;
  align-self: flex-end;

  margin-bottom: 64px;
}

figure {
  display: flex;
  align-items: flex-end;
}

figcaption {
  font-size: .62rem;
  letter-spacing: .1rem;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

figcaption em {
  color: #AAA;
  letter-spacing: normal;
  text-transform: uppercase;
}

/*

Footer

*/

footer {
  width: 100vw;
  justify-self: center;
  align-self: center;
  display: grid;
  grid-row-gap: 32px;
  padding: 16px;
  text-align: center;
  letter-spacing: .1rem
}

footer a {
  color: #90ADA0;
}

footer p:nth-last-child(1) {
  font-size: .64rem;
  color: rgba(255,255,255,.98);
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
  z-index: -9;
}

/*

Images Sizing

*/

section.one figure.img-one img {
  width: var(--one-w, 32vmin);
  height: var(--one-h, 32vmin);
}

section.three figure.img-three img,
section.three figure.img-four img {
  width: var(--tf-w, 32vmin);
  height: var(--tf-h, 32vmin);
}

section.four figure.img-five img {
  width: var(--five-w, 32vmin);
  height: var(--five-h, 32vmin);
}

section.four figure.img-six img {
  width: var(--six-w, 32vmin);
  height: var(--six-h, 32vmin);
}

section.five figure.img-seven img {
  width: var(--seven-w, 32vmin);
  height: var(--seven-h, 32vmin);
}

section.six figure.img-eight img {
  width: var(--eight-w, 32vmin);
  height: var(--eight-h, 32vmin);
}

section.six figure.img-nine img {
  width: var(--nine-w, 32vmin);
  height: var(--nine-h, 32vmin);
}

section.seven figure.img-ten img {
  width: var(--ten-w, 32vmin);
  height: var(--ten-h, 32vmin);
}

section.eight figure.img-eleven img {
  width: var(--eleven-w, 32vmin);
  height: var(--eleven-h, 32vmin);
}


/*

ANIMATION

*/

header h1 {
  opacity: 0;
  animation-name: transY;
  animation-duration: 2s;
  animation-delay: .3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
header h2 {
  opacity: 0;
  animation-name: transX-;
  animation-duration: 3s;
  animation-delay: .5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
header h3 {
  opacity: 0;
  animation-name: transX-;
  animation-duration: 1.5s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
header h4 {
  opacity: 0;
  animation-name: transX-;
  animation-duration: 1.5s;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
h6,
nav {
  opacity: 0;
  animation-name: op;
  animation-duration: 1.5s;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes transX- {
  from {
    opacity: 0;
    transform: translateX(256px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes transY {
  from {
    opacity: 0;
    transform: translateY(-256px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes op {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*

Mobile orientation

*/

@media screen and (orientation: landscape) and (max-width: 823px) {
    .orien {
      position: fixed;
      width: 100vw;
      height: 100vh;

      color: red;
      font-size: 2rem;
      z-index: 99;

      background-color: rgba(255, 255, 255, 0.96);
      background-image: url("../img/phoneOrientation.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 50vmin;
    }

}
#orien {
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
  color: red;
  font-size: 2rem;
  z-index: 99;
}

.orien h2 {
  font-size: 0 ;
}