/**
 * Add custom colours and their respective classes, ie:
 *
 * asu-red: #5c0d26; 
 * gold: #e0ac19;
 * %red,
 * .red {
 *     color: $colour-red;
 * }
 *
 */
/**
 * Base styles ~ Easings
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary,
canvas {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/**
 * Base ~ Type
 */
@font-face {
  font-family: 'apercu-light';
url("../fonts/apercu-light.woff") format("woff"), url("../fonts/apercu-light.html") format("woff2"), url("../fonts/apercu-light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gt-sectra';
  src: url("../fonts/GT-Sectra-Medium-Italic.eot");
  src: url("../fonts/GT-Sectra-Medium-Italicd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/GT-Sectra-Medium-Italic.woff") format("woff"), url("../fonts/GT-Sectra-Medium-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/**
 * Type variables
 */
/**
 * Type styles
 */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 14px 0;
  font-family: "gt-sectra", serif;
  /*  font-family: 'Yatra One', cursive;*/
  font-weight: normal;
  font-style: normal;
  color: #000;
  text-rendering: optimizeLegibility;
}

h1,
.h1 {
  font-size: 4.375rem;
  line-height: 70px;
}

h2,
.h2 {
  font-size: 2.8125rem;
  line-height: 60px;
}

h3,
.h3 {
  font-size: 1.6875rem;
  line-height: 29.7px;
}

h4,
.h4 {
  font-size: 1.4375rem;
  line-height: 25.3px;
}

h5,
.h5 {
  font-size: 1.0625rem;
  line-height: 18.7px;
}

h6,
.h6 {
  font-size: 0.875rem;
  line-height: 15.8px;
}

a {
  color: #000;
  text-decoration: none;
  position: relative;
}

a.underline:before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #1b0009;
  opacity: 0.2;
}

a.underline:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #1b0009;
  opacity: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale3d(0, 1, 1);
  -moz-transform: scale3d(0, 1, 1);
  -ms-transform: scale3d(0, 1, 1);
  -o-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

a.underline:hover:after {
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.dark h1,
.dark .h1,
.dark h2,
.dark .h2,
.dark h3,
.dark .h3,
.dark h4,
.dark .h4,
.dark h5,
.dark .h5,
.dark h6,
.dark .h6 {
  color: #ffffff;
}

.dark a {
  color: #ffffff;
}

.dark a.underline:before {
  background-color: #ffffff;
}

.dark a.underline:after {
  background-color: #ffffff;
}

.blue h1,
.blue .h1,
.blue h2,
.blue .h2,
.blue h3,
.blue .h3,
.blue h4,
.blue .h4,
.blue h5,
.blue .h5,
.blue h6,
.blue .h6,
.colourful h1,
.colourful .h1,
.colourful h2,
.colourful .h2,
.colourful h3,
.colourful .h3,
.colourful h4,
.colourful .h4,
.colourful h5,
.colourful .h5,
.colourful h6,
.colourful .h6 {
  color: #ffffff;
}

.blue a,
.colourful a {
  color: #00ffa5;
}

.blue a.underline:before,
.colourful a.underline:before {
  background-color: #00ffa5;
}

.blue a.underline:after,
.colourful a.underline:after {
  background-color: #00ffa5;
}

.gold a,
.colourful a {
  color: #e0ac19;
}

.gold a.underline:before,
.colourful a.underline:before {
  background-color: #e0ac19;
}

.gold a.underline:after,
.colourful a.underline:after {
  background-color: #e0ac19;
}

p {
  margin-bottom: 40px;
  font-family: inherit;
  font-weight: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.85;
}

hr {
  margin: 22px 0 21px;
  height: 0;
  border: solid #dddddd;
  border-width: 1px 0 0;
  clear: both;
}

em,
i {
  font-style: italic;
  line-height: inherit;
}

strong,
b {
  font-weight: bold;
  line-height: inherit;
}

small {
  font-size: 60%;
  line-height: inherit;
}

/**
 * Base styles ~ Grid
 */
/**
 * Base styles ~ Forms
 */
html input[disabled] {
  cursor: not-allowed;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/**
 * Base styles
 */
* {
  box-sizing: border-box;
}

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

html {
  font-family: "apercu-light", sans-serif;
  font-size: 100%;
}

body {
  position: relative;
  background-color: #ffffff;
  color: #000;
  width: 100vw;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body.dark {
  background-color: #000;
  color: #ffffff;
}

body.dark a {
  color: #ffffff;
}

body.blue {
  background-color: #0000d9;
  color: #ffffff;
  background-image: -webkit-linear-gradient(top left, #040082 0%, #0000FF 100%);
  background-image: -o-linear-gradient(top left, #040082 0%, #0000FF 100%);
  background-image: linear-gradient(to bottom right, #040082 0%, #0000FF 100%);
}

body.blue a {
  color: #00ffa5;
}

body.gold {
  background-color: #5c0d26;
  color: #ffffff;
  background-image: -webkit-linear-gradient(top left, #5c0d26 0%, #4e1a2c 100%);
  background-image: -o-linear-gradient(top left, #5c0d26 0%, #4e1a2c 100%);
  background-image: linear-gradient(to bottom right, #5c0d26 0%, #4e1a2c 100%);
}

body.gold a {
  color: #e0ac19;
}

body.colourful {
  background-color: #5c0d26;
  color: #ffffff;
  background-image: -webkit-linear-gradient(top left, #040082 0%, #0000FF 100%);
  background-image: -o-linear-gradient(top left, #040082 0%, #0000FF 100%);
  background-image: linear-gradient(to bottom right, #040082 0%, #0000FF 100%);
  animation: hue-rotate 2s linear infinite;
}

body.colourful a {
  color: #e0ac19;
}

body.project-page {
  background-color: black;
}

body.project-page .main-container {
  background-color: white;
}

::-moz-selection {
  background: #5c0d26;
  text-shadow: none;
  color: #FFF;
}

::selection {
  background: #5c0d26;
  text-shadow: none;
  color: #FFF;
}

.no-list-style,
ul.no-list-style {
  list-style: none;
}

/* Misc ---------------------- */
.hide {
  display: none;
}

.fill-remainder {
  float: none;
  overflow: hidden;
}

@-webkit-keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }

  to {
    -webkit-filter: hue-rotate(1turn);
    -moz-filter: hue-rotate(1turn);
    -ms-filter: hue-rotate(1turn);
    filter: hue-rotate(1turn);
  }
}

@keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }

  to {
    -webkit-filter: hue-rotate(1turn);
    -moz-filter: hue-rotate(1turn);
    -ms-filter: hue-rotate(1turn);
    filter: hue-rotate(1turn);
  }
}

/**
 * Reusable Component styles (header/footer/dropdowns etc)
 * Put them inside "common" folder
 */
.main-container {
  position: relative;
  width: 100%;
  padding: 0 4vw;
  -webkit-transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.main-container.perspective {
  perspective: 1000px;
}

.main-container .grid {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
  -moz-transform: translate3d(0, 0, 0) rotateY(0deg);
  -ms-transform: translate3d(0, 0, 0) rotateY(0deg);
  -o-transform: translate3d(0, 0, 0) rotateY(0deg);
  transform: translate3d(0, 0, 0) rotateY(0deg);
  -webkit-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 5s cubic-bezier(0.19, 1, 0.22, 1);
}

.main-container .grid.active {
  -webkit-transform: translate3d(0, 0, 0) rotateY(-5deg);
  -moz-transform: translate3d(0, 0, 0) rotateY(-5deg);
  -ms-transform: translate3d(0, 0, 0) rotateY(-5deg);
  -o-transform: translate3d(0, 0, 0) rotateY(-5deg);
  transform: translate3d(0, 0, 0) rotateY(-5deg);
}

.main-container .line {
  width: 100%;
  height: 1px;
  margin-top: 38px;
  background-color: white;
  opacity: 0.1;
}

@media screen and (max-width: 766px) {
  .main-container {
    padding: 0 20px;
  }
}

.main-container.invisible {
  opacity: 0;
}

.overflow-wrapper {
  overflow: hidden;
}

.blackbox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 100%;
  left: 0;
  background-color: #000;
  opacity: 0;
  z-index: 99999;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: -moz-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.blackbox.active {
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}

.introbox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #000;
}

.home-introbox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #000;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*  padding: 4vw;*/
  padding: 1vw;
  z-index: 5;
  opacity: 0;
  -webkit-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

header.hidden {
  opacity: 0 !important;
}

@media screen and (max-width: 766px) {
  header {
    padding: 40px 20px;
  }
}

header .logo {
  background-color: #000;
}

header.dark a {
  color: #ffffff;
}

header.dark .logo {
  background-color: #ffffff;
}

header.dark .page-title {
  color: #ffffff;
}


.page-title {

  max-width: 65px;
  display: inline-block;
  color: #5c0d26;
  font-family: "gt-sectra", serif;
  font-size: 1.2em;
  font-weight: bold;
  position: absolute;
}

@media screen and (max-width: 766px) {
  .page-title span {
    display: none;
  }
}

@media screen and (min-width: 766px) {
  .page-title {
    left: 20px;
    top: 20px;
  }
}

.navigation {
  display: inline-block;
  position: absolute;
  right: 4vw;
  top: 60px;
}

@media screen and (max-width: 766px) {
  .navigation {
    right: 20px;
/*    top: 35px;*/
  }
}

.navigation__ul {
  list-style: none;
  margin: 0;
}

.navigation__li {
  display: inline-block;
  margin-left: 35px;
}

.navigation__li:first-child {
  margin-left: 0;
}

.navigation__button {
  font-weight: 300;
  line-height: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.navigation__button:hover {
  opacity: 0.8;
}

footer.dark-footer {
  background-color: black;
}

footer.dark-footer a {
  color: white;
}

footer.dark-footer a.underline:before {
  background-color: #ffffff;
}

footer.dark-footer a.underline:after {
  background-color: #ffffff;
}

footer a {
  display: inline-block;
  margin: 0 1vw;
}

@media screen and (max-width: 766px) {
  footer a {
    margin: 0 3vw 30px;
  }
}

.contact-page footer {
  position: fixed;
  left: 0;
  bottom: 0;
}

/**
 * Module styles (individual page styles)
 * Put them inside "modules" folder
 */
.hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
  z-index: 999;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  background-color: #fff;
  opacity: 1;
}

.js .hero__text--home {
  opacity: 1;
}

.hero__text--black h1 {
  color: #fff;
}

.hero__text--black .count {
  /*  color: #fff; */
  color: transparent;
}

.hero__text--home {
  position: absolute;
  top: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.hero__text {
  height: 100vh;
  width: 100%;
  text-align: left;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.hero__text--white h1 {
  color: #000;
}

.hero__text--white .hero__text__copy .count {
  /*  color: #302e34; }*/
  color: transparent;
}

.hero__text--black .hero__text__copy .count {
  /*  color: #302e34; }*/
  color: transparent;
}

.hero__text--white .count {
  /*  color: #fff; */
  color: transparent;
}

.hero__text__copy__wrapper {
  height: 100vh;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__text__copy {
  /*  opacity: 0;*/
  opacity: 1;
}

.hero__title {
  font-family: "apercu-light", sans-serif;
  font-size: 40px;
  color: #e0ac19;
}

@media screen and (max-width: 766px) {
  .hero__title {
    font-size: 2.8125rem;
  }
}

.count {
  position: absolute;
  bottom: 80px;
  line-height: 1;
  color: #000;
  font-size: 40px;
  width: 100%;
  text-align: center;
  left: 0;
}

@media screen and (max-width: 766px) {
  .count {
    bottom: 100px;
    font-size: 2.1875rem;
  }
}

.landing__about {
  position: relative;
  width: 100%;
  height: calc(100vh - 4vw);
  perspective: 1000px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

@media screen and (max-width: 1200px) {
  .landing__about {
    display: block;
  }
}

.landing__about.active .case__description--text {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
  -moz-transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
  -ms-transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
  -o-transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
  transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
}

.landing__title {
  font-size: 8vw;
  /*font-family: "gt-sectra", serif;*/
  font-family: 'Roboto', sans-serif;
  margin: 4vh auto 0;
  line-height: 48px;
  text-align: center;
  width: 100%;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-filter: blur(0);
  -webkit-transform: translateZ(0);
}

@media screen and (max-width: 1200px) {
  .landing__title {
    font-size: 33vw;
  }
}

.scale-wrap {
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  .scale-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 276vw;
    -webkit-transform: translateY(-50%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
    -moz-transform: translateY(-50%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
    -ms-transform: translateY(-50%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
    -o-transform: translateY(-50%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
    transform: translateY(-50%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
    transform-origin: left center;
  }
}

@media screen and (max-width: 766px) {
  .scale-wrap {
    -webkit-transform: translateY(-100%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
    -moz-transform: translateY(-100%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
    -ms-transform: translateY(-100%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
    -o-transform: translateY(-100%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
    transform: translateY(-100%) translateX(-16.666667%) scale3d(0.33333, 0.33333, 1);
  }
}

.spin-title {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}

.spin-description {
  display: block;
}

.landing__description {
  margin: 0;
  line-height: 1.5;
  font-size: 16px;
}

@media screen and (max-width: 1200px) {
  .landing__description {
    font-size: 48px;
  }
}

.landing__description--light {
  color: #A0A5AE;
}

.scale-wrap__description {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  .scale-wrap__description {
    width: 300%;
    transform: scale3d(0.3333, 0.3333, 1);
    transform-origin: left center;
  }
}

@media screen and (max-width: 766px) {
  .scale-wrap__description {
    bottom: 5%;
  }
}

.landing__work {
  position: relative;
  padding-top: 4vw;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: top;
}

.work__item {
  padding-bottom: 12vw;
  background-color: #fff;
}

.work__item--feature {
  width: 44vw;
  overflow: hidden;
}

.work__item--feature .work__description {
  max-width: 432px;
}

@media screen and (max-width: 766px) {
  .work__item--feature {
    width: 100vw;
    padding-bottom: 18vw;
  }
}

.work__image-wrap {
  position: relative;
  display: block;
}

.work__image-wrap:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.work__image-wrap:hover:after {
  opacity: 0;
}

.work__image {
  display: block;
  width: 100%;
}

.work__image--mobile {
  display: none;
}

@media screen and (max-width: 766px) {
  .work__image--mobile {
    display: block;
  }
}

.work__video {
  display: block;
  width: 100%;
}

@media screen and (max-width: 766px) {
  .work__video {
    display: none;
  }
}

.work__title {
  font-family: "apercu-light", sans-serif;
  display: inline-block;
  font-size: 16px;
  line-height: 25px;
  margin: 36px 0 0 0;
  color: #000;
}

.work__title--dark {
  color: white;
}

@media screen and (max-width: 766px) {
  .work__title {
    margin: 26px 0 0 0;
  }
}

.work__title .new {
  font-size: 12px;
  color: #FF1B0B;
  -webkit-transform: translate3d(-2px, -8px, 0);
  -moz-transform: translate3d(-2px, -8px, 0);
  -ms-transform: translate3d(-2px, -8px, 0);
  -o-transform: translate3d(-2px, -8px, 0);
  transform: translate3d(-2px, -8px, 0);
  display: inline-block;
}

.work__description {
  font-family: "apercu-light", sans-serif;
  font-size: 16px;
  line-height: 25px;
  margin: 18px 0 0 0;
  color: #4E4F52;
}

.work__description--dark {
  color: #A9AAAA;
}

@media screen and (max-width: 766px) {
  .work__description {
    margin: 12px 0 0 0;
  }
}

.work__tag {
  font-family: "apercu-light", sans-serif;
  font-size: 14px;
  line-height: 17px;
  margin: 18px 0 0 0;
  color: #909398;
}

.work__title-break {
  padding: 12vw 0;
  text-align: center;
  width: 44vw;
}

.work__title-break h3 {
  font-size: 3.2vw;
  line-height: 1.3;
}

@media screen and (max-width: 766px) {
  .work__title-break {
    display: none;
  }
}

.wiggle-container {
  width: 102%;
  position: relative;
}

@media screen and (max-width: 766px) {
  .wiggle-container {
    display: none;
  }
}

.currently {
  background-color: #fff;
  position: relative;
  padding: 30vh 0;
}

.current-position {
  text-align: center;
  width: 100%;
  font-size: 4vw;
  margin: 0;
}



.pre-footer {
  width: 100%;
  text-align: center;
  padding: 12vw 20px;
}

@media screen and (max-width: 766px) {
  .pre-footer {
    padding: 0;
    /*      padding: 3vw;*/
    width: 300%;
    transform: scale3d(0.3333, 0.3333, 1);
    transform-origin: left center;
    margin: -50% 0 -30%;
    /*      margin: -80% 0 -60%; */
  }
}

.pre-footer {
  width: 100%;
  text-align: center;
  padding: 0vw 20px 3vw 20px;
}

@media screen and (max-width: 766px) {
  .pre-footer {
    padding: 0;
    width: 300%;
    font-size: 80%;
    transform: scale3d(0.3333, 0.3333, 1);
    transform-origin: left center;
    margin: -40% 0 -20%;
  }
}

.sales-pitch {
  display: inline-block;
  text-align: center;
  max-width: 65vw;
  font-size: 4vw;
  line-height: 1.4;
}

@media screen and (max-width: 766px) {
  .sales-pitch {
    max-width: 300%;
    font-size: 30vw;
  }
}

.sales-pitch a:after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  opacity: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale3d(0, 1, 1);
  -moz-transform: scale3d(0, 1, 1);
  -ms-transform: scale3d(0, 1, 1);
  -o-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

@media screen and (max-width: 766px) {
  .sales-pitch a:after {
    opacity: 0;
  }
}

.sales-pitch a:before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  opacity: 0.1;
}

.sales-pitch a:hover {
  opacity: 1;
  cursor: pointer;
}

@media screen and (max-width: 766px) {
  .sales-pitch a:hover {
    cursor: text;
  }
}

.sales-pitch a:hover:after {
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}



.description {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  padding: 200px 0 100px;
}

@media screen and (max-width: 1200px) {
  .description {
    padding: 200px 0 0px;
  }
}

@media screen and (max-width: 800px) {
  .description {
    width: 300%;
    transform: scale3d(0.3333, 0.3333, 1);
    transform-origin: left center;
    margin: -60% 0 -70%;
  }
}

@media screen and (max-width: 500px) {
  .description {
    width: 300%;
    transform: scale3d(0.3333, 0.3333, 1);
    transform-origin: left center;
    margin: -130% 0 -120%;
  }
}

.description .description__text {
  font-size: 72px;
  font-size: 7.85vw;
  line-height: 90px;
  line-height: 9.6vw;
  padding-right: 2vw;
  z-index: 2;
  opacity: 0;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}

@media screen and (max-width: 800px) {
  .description .description__text {
    font-size: 25vw;
    line-height: 29vw;
    padding-right: 3vw;
  }
}

@media screen and (max-width: 500px) {
  .description .description__text {
    font-size: 30vw;
    line-height: 38vw;
    padding-right: 3vw;
  }
}

.description .description__text .fade-me {
  opacity: 1;
  -webkit-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.description .description__text .fade-me.active {
  opacity: 0.1;
}

.right-round {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}

.chris {
  pointer-events: none;
  display: block;
  position: fixed;
  right: 56px;
  top: 60px;
  height: calc(100vh - 120px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: -moz-transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translate3d(0, 200px, 0) rotateY(5deg) rotateZ(-5deg);
  -moz-transform: translate3d(0, 200px, 0) rotateY(5deg) rotateZ(-5deg);
  -ms-transform: translate3d(0, 200px, 0) rotateY(5deg) rotateZ(-5deg);
  -o-transform: translate3d(0, 200px, 0) rotateY(5deg) rotateZ(-5deg);
  transform: translate3d(0, 200px, 0) rotateY(5deg) rotateZ(-5deg);
}

.chris.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
  -moz-transform: translate3d(0, 0, 0) rotateY(0deg);
  -ms-transform: translate3d(0, 0, 0) rotateY(0deg);
  -o-transform: translate3d(0, 0, 0) rotateY(0deg);
  transform: translate3d(0, 0, 0) rotateY(0deg);
}

@media screen and (max-width: 766px) {
  .chris {
    display: none;
  }
}

.its-me {
  position: relative;
  -webkit-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: white;
}

@media screen and (max-width: 766px) {
  .its-me {
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: transparent;
    color: white;
  }
}

.its-me:after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  opacity: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale3d(0, 1, 1);
  -moz-transform: scale3d(0, 1, 1);
  -ms-transform: scale3d(0, 1, 1);
  -o-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

@media screen and (max-width: 766px) {
  .its-me:after {
    opacity: 0;
  }
}

.its-me:hover {
  opacity: 1;
  cursor: pointer;
}

@media screen and (max-width: 766px) {
  .its-me:hover {
    cursor: text;
  }
}

.its-me:hover:after {
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.profile {
  width: 100%;
  padding-left: 51.954%;
  padding-bottom: 100px;
}

@media screen and (max-width: 1200px) {
  .profile {
    padding-left: 40%;
  }
}

@media screen and (max-width: 500px) {
  .profile {
    padding-left: 15%;
  }
}

.profile .holding {
  font-size: 12px;
}

.profile p {
  max-width: 636px;
}

.animate-me {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translate3d(0, 50px, 0) rotateY(-5deg) rotateZ(5deg);
  -moz-transform: translate3d(0, 50px, 0) rotateY(-5deg) rotateZ(5deg);
  -ms-transform: translate3d(0, 50px, 0) rotateY(-5deg) rotateZ(5deg);
  -o-transform: translate3d(0, 50px, 0) rotateY(-5deg) rotateZ(5deg);
  transform: translate3d(0, 50px, 0) rotateY(-5deg) rotateZ(5deg);
  opacity: 0;
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.animate-me.in-view {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
  -moz-transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
  -ms-transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
  -o-transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
  transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
}

.animate {
  -webkit-transform: translate3d(0, 50px, 0);
  -moz-transform: translate3d(0, 50px, 0);
  -ms-transform: translate3d(0, 50px, 0);
  -o-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.animate.in-view {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.links ul {
  list-style: none;
}

.links li {
  margin-bottom: 20px;
}

.links a {
  display: inline-block;
  position: relative;
  font-family: "gt-sectra", serif;
  font-size: 80px;
  line-height: 90px;
  font-weight: 600;
  font-style: italic;
}

.links a:before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #ffffff;
  opacity: 0.2;
}

.links a:after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #ffffff;
  opacity: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale3d(0, 1, 1);
  -moz-transform: scale3d(0, 1, 1);
  -ms-transform: scale3d(0, 1, 1);
  -o-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.links a:hover {
  cursor: pointer;
}

.links a:hover:after {
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.contact {
  position: relative;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.email-link {
  display: block;
  position: relative;
  padding: 10vh 0;
  -webkit-transform: rotate3d(0, 0, 1, -10deg);
  -moz-transform: rotate3d(0, 0, 1, -10deg);
  -ms-transform: rotate3d(0, 0, 1, -10deg);
  -o-transform: rotate3d(0, 0, 1, -10deg);
  transform: rotate3d(0, 0, 1, -10deg);
  -webkit-filter: blur(0);
}

.email-link:hover .email-spin {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: #e0ac19;
}

.email-link:hover .email-spin--404 {
  -webkit-text-fill-color: #e0ac19;
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: transparent;
}

.email-spin1 {
  display: block;
  text-align: center;
  font-size: 22px;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-name: spin-me;
  -webkit-animation-duration: 6s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: spin-me;
  -moz-animation-duration: 6s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: spin-me;
  -o-animation-duration: 6s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: spin-me;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.email-spin {
  display: block;
  font-size: 8vw;
  font-family: "gt-sectra", serif;
  -webkit-animation-name: spin-me;
  -webkit-animation-duration: 6s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: spin-me;
  -moz-animation-duration: 6s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: spin-me;
  -o-animation-duration: 6s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: spin-me;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.email-spin--404 {
  font-size: 70vw;
}

@media screen and (max-width: 1200px) {
  .email-spin {
    font-size: 11vw;
  }
}

@media screen and (max-width: 766px) {
  .email-spin {
    font-size: 16vw;
  }
}

.email-spin {
  display: block;
  font-size: 8vw;
  font-family: "gt-sectra", serif;
  -webkit-animation-name: spin-me;
  -webkit-animation-duration: 6s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: spin-me;
  -moz-animation-duration: 6s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: spin-me;
  -o-animation-duration: 6s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: spin-me;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.email-spin--404 {
  font-size: 70vw;
}

@media screen and (max-width: 1200px) {
  .email-spin--404 {
    font-size: 70vw;
  }
}

@media screen and (max-width: 766px) {
  .email-spin--404 {
    font-size: 70vw;
  }
}

@media screen and (max-width: 1200px) {
  .email-spin {
    font-size: 11vw;
  }
}

@media screen and (max-width: 766px) {
  .email-spin {
    font-size: 16vw;
  }
}

@-webkit-keyframes spin-me {
  0% {
    -webkit-transform: rotate3d(0, 1, 0.4, -180deg);
    -moz-transform: rotate3d(0, 1, 0.4, -180deg);
    -ms-transform: rotate3d(0, 1, 0.4, -180deg);
    -o-transform: rotate3d(0, 1, 0.4, -180deg);
    transform: rotate3d(0, 1, 0.4, -180deg);
  }

  50% {
    -webkit-transform: rotate3d(0, 1, 0.4, 0deg);
    -moz-transform: rotate3d(0, 1, 0.4, 0deg);
    -ms-transform: rotate3d(0, 1, 0.4, 0deg);
    -o-transform: rotate3d(0, 1, 0.4, 0deg);
    transform: rotate3d(0, 1, 0.4, 0deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 1, 0.4, 180deg);
    -moz-transform: rotate3d(0, 1, 0.4, 180deg);
    -ms-transform: rotate3d(0, 1, 0.4, 180deg);
    -o-transform: rotate3d(0, 1, 0.4, 180deg);
    transform: rotate3d(0, 1, 0.4, 180deg);
  }
}

@-moz-keyframes spin-me {
  0% {
    -webkit-transform: rotate3d(0, 1, 0.4, -180deg);
    -moz-transform: rotate3d(0, 1, 0.4, -180deg);
    -ms-transform: rotate3d(0, 1, 0.4, -180deg);
    -o-transform: rotate3d(0, 1, 0.4, -180deg);
    transform: rotate3d(0, 1, 0.4, -180deg);
  }

  50% {
    -webkit-transform: rotate3d(0, 1, 0.4, 0deg);
    -moz-transform: rotate3d(0, 1, 0.4, 0deg);
    -ms-transform: rotate3d(0, 1, 0.4, 0deg);
    -o-transform: rotate3d(0, 1, 0.4, 0deg);
    transform: rotate3d(0, 1, 0.4, 0deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 1, 0.4, 180deg);
    -moz-transform: rotate3d(0, 1, 0.4, 180deg);
    -ms-transform: rotate3d(0, 1, 0.4, 180deg);
    -o-transform: rotate3d(0, 1, 0.4, 180deg);
    transform: rotate3d(0, 1, 0.4, 180deg);
  }
}

@-o-keyframes spin-me {
  0% {
    -webkit-transform: rotate3d(0, 1, 0.4, -180deg);
    -moz-transform: rotate3d(0, 1, 0.4, -180deg);
    -ms-transform: rotate3d(0, 1, 0.4, -180deg);
    -o-transform: rotate3d(0, 1, 0.4, -180deg);
    transform: rotate3d(0, 1, 0.4, -180deg);
  }

  50% {
    -webkit-transform: rotate3d(0, 1, 0.4, 0deg);
    -moz-transform: rotate3d(0, 1, 0.4, 0deg);
    -ms-transform: rotate3d(0, 1, 0.4, 0deg);
    -o-transform: rotate3d(0, 1, 0.4, 0deg);
    transform: rotate3d(0, 1, 0.4, 0deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 1, 0.4, 180deg);
    -moz-transform: rotate3d(0, 1, 0.4, 180deg);
    -ms-transform: rotate3d(0, 1, 0.4, 180deg);
    -o-transform: rotate3d(0, 1, 0.4, 180deg);
    transform: rotate3d(0, 1, 0.4, 180deg);
  }
}

@keyframes spin-me {
  0% {
    -webkit-transform: rotate3d(0, 1, 0.4, -180deg);
    -moz-transform: rotate3d(0, 1, 0.4, -180deg);
    -ms-transform: rotate3d(0, 1, 0.4, -180deg);
    -o-transform: rotate3d(0, 1, 0.4, -180deg);
    transform: rotate3d(0, 1, 0.4, -180deg);
  }

  50% {
    -webkit-transform: rotate3d(0, 1, 0.4, 0deg);
    -moz-transform: rotate3d(0, 1, 0.4, 0deg);
    -ms-transform: rotate3d(0, 1, 0.4, 0deg);
    -o-transform: rotate3d(0, 1, 0.4, 0deg);
    transform: rotate3d(0, 1, 0.4, 0deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 1, 0.4, 180deg);
    -moz-transform: rotate3d(0, 1, 0.4, 180deg);
    -ms-transform: rotate3d(0, 1, 0.4, 180deg);
    -o-transform: rotate3d(0, 1, 0.4, 180deg);
    transform: rotate3d(0, 1, 0.4, 180deg);
  }
}

.case__description {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  perspective: 1000px;
}

.case__title {
  font-family: "gt-sectra", serif;
  font-size: 8vw;
  width: 100%;
  text-align: center;
  margin: auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 766px) {
  .case__title {
    font-size: 2.8125rem;
  }
}

.case__description--text {
  margin: 0 auto;
  max-width: 640px;
}

.case__content {
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.case__image img {
  display: block;
  width: 100%;
}

.case__image--wide {
  width: 100vw;
  -webkit-transform: translate3d(-4vw, 0, 0);
  -moz-transform: translate3d(-4vw, 0, 0);
  -ms-transform: translate3d(-4vw, 0, 0);
  -o-transform: translate3d(-4vw, 0, 0);
  transform: translate3d(-4vw, 0, 0);
}

.case__image--wide img {
  -webkit-transform: scale3d(1.001, 1.001, 1.001);
  -moz-transform: scale3d(1.001, 1.001, 1.001);
  -ms-transform: scale3d(1.001, 1.001, 1.001);
  -o-transform: scale3d(1.001, 1.001, 1.001);
  transform: scale3d(1.001, 1.001, 1.001);
}

.case__image--double {
  margin-top: 250px;
}

.case__video video {
  display: block;
  width: 80%;
  margin: 0 auto;
  box-shadow: 0 5px 20px 0 rgba(10, 16, 36, 0.13);
  border-radius: 4px;
}

.case__video--bulb {
  width: 100vw;
  padding: 100px 0;
  background-color: #FFDAEF;
  -webkit-transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
  -moz-transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
  -ms-transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
  -o-transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
  transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
}

.case__video--bulb video {
  width: 60%;
}

.case__text {
  display: block;
  margin: 250px auto;
  max-width: 640px;
}

@media screen and (max-width: 766px) {
  .case__text {
    margin: 100px auto;
    font-size: 18px;
  }
}

.case__text--feature {
  max-width: 1080px;
  text-align: center;
}

@media screen and (max-width: 766px) {
  .case__text--feature {
    font-size: 2.1875rem;
    line-height: 1.3;
  }
}

@media screen and (max-width: 500px) {
  .case__text--feature {
    font-size: 1.6875rem;
    line-height: 1.3;
    text-align: left;
  }
}

.case__text--quote {
  max-width: 1080px;
}

@media screen and (max-width: 766px) {
  .case__text--quote {
    font-size: 2.1875rem;
    line-height: 1.3;
  }
}

@media screen and (max-width: 500px) {
  .case__text--quote {
    font-size: 1.6875rem;
    line-height: 1.3;
  }
}

.case__text--negative {
  margin: 250px auto -150px;
}

@media screen and (max-width: 766px) {
  .case__text--negative {
    margin: 100px auto -50px;
  }
}

.case__text--quote-owner {
  margin: -210px auto 250px;
  max-width: 1080px;
  font-family: "apercu-light", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1.4;
}

@media screen and (max-width: 766px) {
  .case__text--quote-owner {
    margin: -80px auto 200px;
    font-size: 15px;
  }
}

.case__text--quote-owner span {
  color: #ACAFB6;
}

.credits__circle {
  display: inline-block;
  width: 100px;
  padding-top: 40px;
  height: 100px;
  background-color: #000;
  border-radius: 50%;
  color: white;
}

.tickercontainer {
  width: 100vw;
  padding: 200px 0;
}

.ticker__item {
  font-size: 70px;
  color: #ffffff;
}

.mask {
  height: 100px;
  width: 100vw;
  display: block;
  position: relative;
}

.case__animate {
  -webkit-transform: translate3d(0, 50px, 0);
  -moz-transform: translate3d(0, 50px, 0);
  -ms-transform: translate3d(0, 50px, 0);
  -o-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: -moz-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

@media screen and (max-width: 766px) {
  .case__animate {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.case__animate.in-view {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.case__animate.case__image--wide {
  -webkit-transform: translate3d(-4vw, 50px, 0);
  -moz-transform: translate3d(-4vw, 50px, 0);
  -ms-transform: translate3d(-4vw, 50px, 0);
  -o-transform: translate3d(-4vw, 50px, 0);
  transform: translate3d(-4vw, 50px, 0);
}

@media screen and (max-width: 766px) {
  .case__animate.case__image--wide {
    -webkit-transform: translate3d(-20px, 0, 0);
    -moz-transform: translate3d(-20px, 0, 0);
    -ms-transform: translate3d(-20px, 0, 0);
    -o-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
}

.case__animate.case__image--wide.in-view {
  -webkit-transform: translate3d(-4vw, 0, 0);
  -moz-transform: translate3d(-4vw, 0, 0);
  -ms-transform: translate3d(-4vw, 0, 0);
  -o-transform: translate3d(-4vw, 0, 0);
  transform: translate3d(-4vw, 0, 0);
}

@media screen and (max-width: 766px) {
  .case__animate.case__image--wide.in-view {
    -webkit-transform: translate3d(-20px, 0, 0);
    -moz-transform: translate3d(-20px, 0, 0);
    -ms-transform: translate3d(-20px, 0, 0);
    -o-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
}

.case__animate.case__video--bulb {
  -webkit-transform: translate3d(-4vw, 50px, 0) scale3d(1.001, 1.001, 1.001);
  -moz-transform: translate3d(-4vw, 50px, 0) scale3d(1.001, 1.001, 1.001);
  -ms-transform: translate3d(-4vw, 50px, 0) scale3d(1.001, 1.001, 1.001);
  -o-transform: translate3d(-4vw, 50px, 0) scale3d(1.001, 1.001, 1.001);
  transform: translate3d(-4vw, 50px, 0) scale3d(1.001, 1.001, 1.001);
}

@media screen and (max-width: 766px) {
  .case__animate.case__video--bulb {
    -webkit-transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
    -moz-transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
    -ms-transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
    -o-transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
    transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
  }
}

.case__animate.case__video--bulb.in-view {
  -webkit-transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
  -moz-transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
  -ms-transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
  -o-transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
  transform: translate3d(-4vw, 0, 0) scale3d(1.001, 1.001, 1.001);
}

@media screen and (max-width: 766px) {
  .case__animate.case__video--bulb.in-view {
    -webkit-transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
    -moz-transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
    -ms-transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
    -o-transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
    transform: translate3d(-20px, 0, 0) scale3d(1.001, 1.001, 1.001);
  }
}

.project-info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  perspective: 1000px;
}

.project__title {
  font-family: "gt-sectra", serif;
  font-size: 8vw;
  width: 100%;
  text-align: center;
  margin: auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 766px) {
  .project__title {
    font-size: 2.8125rem;
  }
}

.project__description {
  margin: 0 auto;
  max-width: 640px;
}

@media screen and (max-width: 766px) {
  .project__description {
    font-size: 18px;
  }
}

.project-content {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -100px;
}

.project__image {
  position: relative;
  display: block;
  margin: 2vw 0;
}

.project__image--100 {
  width: 100%;
}

.project__image--50 {
  width: calc(50% - 2vw);
}

@media screen and (max-width: 766px) {
  .project__image--50 {
    width: 100%;
  }
}

.project__image img {
  width: 100%;
}

.project__image img.mobile-image {
  display: none;
}

@media screen and (max-width: 766px) {
  .project__image img.mobile-image {
    display: block;
  }
}

.project__image video {
  width: 100%;
}

@media screen and (max-width: 766px) {
  .project__image video {
    display: none;
  }
}

.project__text {
  width: calc(50% - 2vw);
  padding: 0 7vw;
  text-align: center;
}

.project__text--wide {
  padding: 0 6vw;
}

.project__text h3 {
  font-size: 3.2vw;
  line-height: 1.3;
}

@media screen and (max-width: 766px) {
  .project__text h3 {
    font-size: 6.4vw;
  }
}

@media screen and (max-width: 766px) {
  .project__text {
    width: 100%;
    padding: 10vh 8vw;
  }
}

.project__quote {
  width: 100%;
  padding: 8vw 0;
}

.project__quote h3 {
  font-size: 3.2vw;
  line-height: 1.3;
}

@media screen and (max-width: 766px) {
  .project__quote h3 {
    font-size: 6.4vw;
  }
}

.project__quote h6 {
  font-family: "apercu-light", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  line-height: 1.4;
}

.project__quote h6 span {
  color: #ACAFB6;
}

@media screen and (max-width: 766px) {
  .project__quote .responsive-line-break {
    display: none;
  }
}

.next-project {
  position: relative;
  display: block;
  width: 100%;
  padding: 18vh 0 10vh;
  text-align: center;
  background-color: transparent;
}

@media screen and (max-width: 1200px) {
  .next-project {
    padding: 36vh 0 22vh;
  }
}

.next-project .next-link {
  font-family: "gt-sectra", serif;
  font-size: 8vw;
  color: white;
  display: inline-block;
}

.credits {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8vw 0;
  border-top: solid 1px #eee;
  flex-wrap: wrap;
}

@media screen and (max-width: 766px) {
  .credits {
    width: 100%;
  }
}

.credits__lists {
  width: 80%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

@media screen and (max-width: 766px) {
  .credits__lists {
    width: 100%;
    flex-wrap: wrap;
  }
}

.credits__links {
  width: 16%;
}

@media screen and (max-width: 1800px) {
  .credits__links {
    width: 20%;
  }
}

@media screen and (max-width: 766px) {
  .credits__links {
    width: 100%;
  }
}

.credits__list {
  display: block;
  width: 20%;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

@media screen and (max-width: 1800px) {
  .credits__list {
    width: 20%;
  }
}

@media screen and (max-width: 1200px) {
  .credits__list {
    width: 33%;
  }
}

@media screen and (max-width: 766px) {
  .credits__list {
    width: 100%;
    margin-bottom: 30px;
  }
}

.credits__list--end {
  width: 100%;
}

.credits__title {
  font-size: 16px;
  margin-bottom: 24px;
}

.credits__credit {
  font-size: 16px;
  margin-bottom: 12px;
  color: #ACAFB6;
}

.credits__link {
  font-size: 16px;
  margin-bottom: 12px;
  color: #ACAFB6;
}

.credits__arrow {
  margin-left: 4px;
}

.hero1 {
  /* Sizing */
  padding: 0;
  width: 100vw;
  height: 100vh;
  /* Flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Text styles */
  text-align: center;
  color: white;
  /* Background styles */
  background-image: url(/assets/images/bg/hero-top-bw.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media only screen and (max-device-width: 1024px) {
  .hero1 {
    background-attachment: scroll;
  }
}

.hero1 h1 {
  font-size: 4em;
  color: rgba(124, 18, 51, 1.0);
  margin-top: 5em;
  margin-bottom: 0.3em;
}

.hero1 h2 {
  color: rgba(32, 8, 16, 0.8);
}

.main-container {
  padding: 0;
}

t-bold {
  font-weight: bold;
}

/*   Contact Page  */

input {
  outline: none;
  border: none;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: none;
  -webkit-appearance: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus,
input:focus {
  border-color: transparent !important;
}

input::-webkit-input-placeholder {
  color: #adacac;
}

input:-moz-placeholder {
  color: #adacac;
}

input::-moz-placeholder {
  color: #adacac;
}

input:-ms-input-placeholder {
  color: #adacac;
}

textarea::-webkit-input-placeholder {
  color: #adacac;
}

textarea:-moz-placeholder {
  color: #adacac;
}

textarea::-moz-placeholder {
  color: #adacac;
}

textarea:-ms-input-placeholder {
  color: #adacac;
}

/*---------------------------------------------*/
button {
  outline: none !important;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

iframe {
  border: none !important;
}

/*---------------------------------------------*/
.container-contact {
  width: 100%;
}

/*[ Contact ]*/

.container-contact100 {
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  /*  position: relative;*/
  position: absolute;
  background-color: #ececec;
  width: 100%;
  -webkit-transform: translate3d(0, 0, 0);
}

.wrap-contact100 {
  width: 550px;
  background: transparent;
  padding: 50px 0 60px 0;
}

/*==================================================================
[ Form ]*/

.contact100-form {
  width: 100%;
}

.work__description {
  font-family: "apercu-light", sans-serif;
  font-size: 16px;
  line-height: 25px;
  margin: 18px 0 0 0;
  color: #4E4F52;
}

.work__description--dark {
  color: #A9AAAA;
}

@media screen and (max-width: 766px) {
  .work__description {
    margin: 12px 0 0 0;
  }
}

.contact100-form-title {
  display: block;
  font-family: "apercu-light", sans-serif;
  font-size: 30px;
  color: #7c1233;
  line-height: 1.5;
  text-align: center;
  padding-bottom: 45px;
}

/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
  width: 100%;
  background-color: #fff;
  border-radius: 31px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.input100 {
  position: relative;
  display: block;
  width: 100%;
  background: #fff;
  border-radius: 31px;
  font-family: "apercu-light", sans-serif;
  font-size: 18px;
  color: #8f8fa1;
  line-height: 1.2;
}


/*---------------------------------------------*/
input.input100 {
  height: 62px;
  padding: 0 35px 0 35px;
}


textarea.input100 {
  min-height: 169px;
  padding: 19px 35px 0 35px;
}

/*------------------------------------------------------------------
[ Focus Input ]*/

.focus-input100 {
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 31px;
  background-color: #fff;
  pointer-events: none;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input100:focus + .focus-input100 {
  width: calc(100% + 20px);
}

/*------------------------------------------------------------------
[ Button ]*/
.container-contact100-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 10px;
}

.contact100-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 150px;
  height: 62px;
  background-color: transparent;
  border-radius: 31px;

  font-family: "apercu-light", sans-serif;
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  position: relative;
  z-index: 1;
}

.contact100-form-btn::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 31px;
  background-color: #7c1233;
  pointer-events: none;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.contact100-form-btn:hover:before {
  background-color: #e0ac19;
  width: calc(100% + 20px);
}

/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  z-index: 1000;
  max-width: 70%;
  background-color: #fff;
  border: 1px solid #c80000;
  border-radius: 14px;
  padding: 4px 25px 4px 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
  pointer-events: none;

  font-family: Ubuntu-Bold;
  color: #c80000;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;

  visibility: hidden;
  opacity: 0;

  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f06a";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  z-index: 1100;
  color: #c80000;
  font-size: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 16px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}

.thank-you {
  /* Sizing */
  padding: 0;
  width: 100vw;
  height: 100vh;
  /* Flexbox stuff */
  display: flex;
  justify-content: center;
  /* Text styles */
  color: white;
  /* Background styles */
  background-image: url(/assets/images/bg/thank-you.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.thank-you h1 {
  font-size: 3.5em;
  font-family: "gt-sectra", serif;
  color: whitesmoke;
  margin-top: 0.8em;
  margin-bottom: 0.3em;
}

.thank-you-text {
  text-align: center;
  padding-top: 2.6em;
}

.left {
  color: white;
  align-self: flex-start;
}

.typewrite {
  color: white;
}

.gray {
  color: #1b0009;
  font-family: "gt-sectra", serif;
  font-size: 1.3rem;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

@media only screen and(max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
  }
}
@media only screen and(max-device-width: 420px) and (-webkit-min-device-pixel-ratio: 2) {
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
  }
}
@media only screen and(max-device-width: 520px) and (-webkit-min-device-pixel-ratio: 2) {
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 520px;
  }
}
.simpledzn {
  position: relative;
  width: 100%;
  display: flex;
  font-size: 12px;
  justify-content: left;
  padding: 30px 5px;
  height: 50px;
  color: #9c9fa4;
}