html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: neue-haas-grotesk-display, sans-serif;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  }

body{
  font-family: neue-haas-grotesk-display, sans-serif;
  line-height: 1.3333;
  background: #fdfbf8;
  color: #2b2c2e;
  margin: 0px;
  letter-spacing: 0.05rem;
}

*{
    letter-spacing: 0.05rem;
    font-weight: 400 !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body.white{
  color: #fffafa;
}

button:active, button:focus {
    outline: none;
    border: none;
}


/* ------------------------------- */
/* ----------- Pages ------------- */

#test.hidden, #intro.hidden, #info.hidden, #about.hidden, #result.hidden, #creative-types-overview.hidden, #legal.hidden {
  display: none;
}


#test {
  opacity: 1;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

#intro, #info, #about, #result {
  opacity: 1;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

#test.hide, #intro.hide, #info.hide, #about.hide, #result.hide, #creative-types-overview.hide, #legal.hide {
  opacity: 0;
}

/* ------------------------------- */
/* ----- Site furniture ---------- */


#test-furniture {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  pointer-events: none;
}

#test-furniture div {
  pointer-events: all;
}

#test-furniture a {
  color: inherit;
  text-decoration: none;
  pointer-events: all;
}

.home-link, .home-link-top{
  position: fixed;
  left: 10px;
  top: 10px;
  font-size: 14px;
  -webkit-transform: translateY(-100px);
      -ms-transform: translateY(-100px);
          transform: translateY(-100px);
}

@media only screen and (min-width: 600px) {
  .home-link, .home-link-top{
    left: 20px;
    top: 20px;
  }
}

.credit-link{
  position: fixed;
  right: 10px;
  bottom: 10px;
  font-size: 14px;
  -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
          transform: translateY(100px);
}

@media only screen and (min-width: 600px) {
  .credit-link{
    right: 20px;
    bottom: 20px;
  }
}

.info-page-links, .home-link-bottom{
  position: fixed;
  left: 10px;
  bottom: 10px;
  font-size: 14px;
  -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
          transform: translateY(100px);
}

@media only screen and (min-width: 600px) {
  .info-page-links, .home-link-bottom{
    left: 20px;
    bottom: 20px;
  }
}

.about-link{
  position: fixed;
  left: 10px;
  top: 10px;
  font-size: 14px;
  -webkit-transform: translateY(-100px);
      -ms-transform: translateY(-100px);
          transform: translateY(-100px);
}

@media only screen and (min-width: 600px) {
  .about-link{
    left: 20px;
    top: 20px;
  }
}

.test-pagination {
  position: fixed;
  left: 10px;
  bottom: 11px;
  font-size: 14px;
  -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
          transform: translateY(100px);
}

@media only screen and (min-width: 600px) {
  .test-pagination {
    left: 20px;
    bottom: 20px;
  }
}


.test-pagination .question-link{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  opacity: 1;
  border: 1px solid #ffffff;
  position: relative;
}

.test-pagination .question-link.prev{
  opacity: 1;
  background: white;
}

.test-pagination .question-link.active{
  opacity: 1;
}

.test-pagination .question-link.active::after {
  content: '';
  position: absolute;
  width: 6px;
  border-radius: 50%;
  height: 6px;
  top: 50%;
  left: 50%;
  background: white;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}


.share-links, .home-link-top-right {
  position: fixed;
  right: 10px;
  top: 10px;
  font-size: 14px;
  padding-left: 20px;
  -webkit-transform: translateY(-100px);
      -ms-transform: translateY(-100px);
          transform: translateY(-100px);
}

@media only screen and (min-width: 600px) {
  .share-links, .home-link-top-right {
    right: 20px;
    top: 20px;
  }
}

.share-links a {
  margin-left: 10px;
}

.share-links .share-hover {
  color: inherit;
  position: absolute;
  right: 0px;
  top: 2px;
  z-index: 1;
  line-height: 1;
  -webkit-transition: opacity 0.2s 0.8s;
  -o-transition: opacity 0.2s 0.8s;
  transition: opacity 0.2s 0.8s;
  cursor: pointer;
}

.share-links .share-hover:hover {
  border-bottom: 1px solid;
}

.facebook {
  -webkit-transition: opacity 0.2s 0.2s;
  -o-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
  opacity: 0;
}

.twitter {
  -webkit-transition: opacity 0.2s 0.4s;
  -o-transition: opacity 0.2s 0.4s;
  transition: opacity 0.2s 0.4s;
  opacity: 0;
}

.email{
  -webkit-transition: opacity 0.2s 0.6s;
  -o-transition: opacity 0.2s 0.6s;
  transition: opacity 0.2s 0.6s;
  opacity: 0;
}

.share-links.visible .facebook {
  position: relative;
  z-index: 2;
  -webkit-transition: opacity 0.2s 0.6s;
  -o-transition: opacity 0.2s 0.6s;
  transition: opacity 0.2s 0.6s;
  opacity: 0;
}

.share-links.visible .twitter {
  position: relative;
  z-index: 2;
  -webkit-transition: opacity 0.2s 0.4s;
  -o-transition: opacity 0.2s 0.4s;
  transition: opacity 0.2s 0.4s;
  opacity: 0;
}

.share-links.visible .email{
  position: relative;
  z-index: 2;
  -webkit-transition: opacity 0.2s 0.2s;
  -o-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
  opacity: 0;
}

.share-links.visible .share-hover {
  -webkit-transition: opacity 0.2s 0s;
  -o-transition: opacity 0.2s 0s;
  transition: opacity 0.2s 0s;
  opacity: 0;
  z-index: 1;
}

.share-links.visible .facebook, .share-links.visible .twitter, .share-links.visible .email {
  opacity: 1;
}

.share-links svg{
  width: 24px;
  height: 24px;
  fill: #2b2c2e;
  vertical-align: middle;
}

.video-controls{
  pointer-events: all;
  position: fixed;
  right: 10px;
  left: 10px;
  bottom: 10px;
  font-size: 14px;
  -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
          transform: translateY(100px);
}

@media only screen and (min-width: 600px) {
  .video-controls {
    right: 20px;
    left: 20px;
    bottom: 20px;
  }
}

.video-time {
  float: left;
}

.test-mute{
  text-decoration: line-through;
  float: right;
}


.un-muted .test-mute{
  text-decoration: none;
}

.test-skip{
  float: right;
}

.test-video-tool {
  cursor: pointer;
  display: inline-block;
  margin-left: 16px;
}

#test-furniture > div {
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
}

#test-furniture.show-about-link > .about-link,
#test-furniture.show-home-link > .home-link,
#test-furniture.show-credit-link > .credit-link,
#test-furniture.show-info-page-link > .info-page-links,
#test-furniture.show-share-link > .share-links,
#test-furniture.show-home-link-top > .home-link-top,
#test-furniture.show-home-link-bottom > .home-link-bottom,
#test-furniture.show-home-link-top-right >  .home-link-top-right {
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
}

#test-furniture.show-test-info > .test-pagination {
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
}

#test-furniture.show-video-controls > .video-controls {
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
}


.info-page-links a {
  margin-right: 10px;
}

.home-link-top a, .home-link-bottom a, .home-link-top-right a{
  border-bottom: 1px solid;
}

.credit-link a:hover, .info-page-links a:hover, .share-links a:hover, .about-link a:hover {
  border-bottom: 1px solid;
}


.about-colab.first {
  margin-top: 80px !important;
}

@media only screen and (min-width: 600px) {
  .about-colab.first {
    margin-top: 120px !important;
  }

}


.about-colab .img-wrap {
  margin-bottom: 20px;
  display: block;
}

.about-colab .img-wrap img {
  width: 100%;
  height: auto;
}

.about-gradient.top {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 60px;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(248, 248, 248)), color-stop(70%, rgb(248, 248, 248)), to(rgba(248, 248, 248, 0)));
  background-image: -webkit-linear-gradient(rgb(248, 248, 248) 0%, rgb(248, 248, 248) 70%, rgba(248, 248, 248, 0) 100%);
  background-image: -o-linear-gradient(rgb(248, 248, 248) 0%, rgb(248, 248, 248) 70%, rgba(248, 248, 248, 0) 100%);
  background-image: linear-gradient(rgb(248, 248, 248) 0%, rgb(248, 248, 248) 70%, rgba(248, 248, 248, 0) 100%);
}

.about-gradient.bottom {
  position: fixed;
  bottom: 0px;
  left: 0px;
  height: 60px;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 0)), color-stop(70%, rgb(248, 248, 248)), to(rgb(248, 248, 248)));
  background-image: -webkit-linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(248, 248, 248) 70%, rgb(248, 248, 248) 100%);
  background-image: -o-linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(248, 248, 248) 70%, rgb(248, 248, 248) 100%);
  background-image: linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(248, 248, 248) 70%, rgb(248, 248, 248) 100%);
}

@media only screen and (min-width: 1100px) {
  .about-gradient.bottom, .about-gradient.top{
    display: none;
  }
}

@media only screen and (min-width: 600px) {
  .about-colab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 80px;
  }

  .about-colab .img-wrap {
    padding-right: 40px;
    max-width: 300px;
  }

  .about-colab:nth-child(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }

  .about-colab:nth-child(even) .img-wrap{
    padding-left: 40px;
    padding-right: 0px;
  }

}


.about-colab p {
  max-width: 500px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  font-size: 19px !important;
}

@media only screen and (min-width: 600px) {
  .test-pagination .question-link{
    width: 12px;
    height: 12px;
  }
}

/* ------------------------------- */
/* ----------- Intro ------------- */

#intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-align: center;
  background: #fdfbf8;
}

#intro-logo {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  /* height: 100%; */
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  z-index: 10;
  text-align: center;
}

#intro-logo.show {
  opacity: 1;
}

#intro-logo p{
  position: static;
  font-size: 16px !important;
  margin-top: 10px !important;
}

#intro a {
  color: inherit;
}

#intro-logo svg {
  fill: #2b2c2e;
  width: 150px;
  /* position: fixed; */
  top: 50%;
  left: 50%;
  /* -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%); */
}

#loader{
  display: block;
  margin-top: -20px !important;
}

#type-toy {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  /* height: 100%; */
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  z-index: 10;
  text-align: center;
}

#intro h1{
  font-size: 0vw;
  margin-bottom: 1vw;
  margin-top: 0px;
  /* position: fixed; */
  top: 50%;
  width: 100%;
  /* transform: translateY(-75%); */
}

#intro video{
  transition: opacity 1s;
  max-height: calc(100vh - 200px);
  max-width: 100vw;
  opacity: 0;
}

@media only screen and (min-width: 600px) {
  #intro video{
    max-width: 55vw;
  }
}

#intro p {
  font-size: 15px;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 0 20px;
  position: static;
  bottom: 50px;
}

#intro #loader {
  position: static;
  bottom: 40px;
  width: 100%;
}

#intro .space {
  /* opacity: 1;
  display: block;
  height: 1px;
  width: 100%;
  margin-top: -10px; */
}


#intro button {
  font-family: neue-haas-grotesk-display, sans-serif;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
  font-size: 18px;
  border-radius: 0px;
  -webkit-appearance: none;
  border: 1px solid black;
  padding: 10px 20px;
  cursor: pointer;
  background: none;
  color: black;
}

#intro p, #intro #loader, #intro button, #intro h1, #intro #loader {
  position: static;
}

@media only screen and (min-width: 600px) {

  #type-toy, #intro-logo {
    height: auto;
  }

  #intro h1 {
    font-size: 0vw;
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
  }
  #intro button, #intro p {
    font-size: 16px;
  }

  #intro button {
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
  }

  #intro-logo svg {
    position: static;
    -webkit-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }

  #intro-logo svg {
    width: 180px;
  }

  #intro .space {
    opacity: 1;
    display: inline-block;
    width: auto;
    height: auto;
    margin-top: 0px;
  }
}

@media (hover: hover) {
  #intro button:hover {
    background: #2b2c2e;
    color: #d8d8d7;
  }
}


#info {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  z-index: 10;
  text-align: center;
}

#info p{
  /* text-align: left; */
  font-size: 33px;
  max-width: 1100px;
  padding: 0 40px;
  margin: 0 auto;
  margin-bottom: 20px;
  line-height: 1.3333;
}


/* ------------------------------- */
/* ----------- About ------------- */


.text-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-align: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}



.text-section .left {
  width: 100%;
  padding: 20px;
  padding-top: 60px;
}

@media only screen and (min-width: 600px) {
  .text-section .left {
    -webkit-transition: padding 0.4s 0s;
    -o-transition: padding 0.4s 0s;
    transition: padding 0.4s 0s;
    width: 100%;
    padding: 20px 40px;
    padding-top: 100px;
  }
}

.text-section.hide .left {
  -webkit-transition: padding 0.4s 2s;
  -o-transition: padding 0.4s 2s;
  transition: padding 0.4s 2s;
  padding-top: 150px;
}

.text-section h1 {
  text-align: left;
  font-size: 46px;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 2rem;
}

.text-section p {
  text-align: left;
  font-size: 19px;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 2rem;
}

@media only screen and (min-width: 600px) {
  .text-section p {
    font-size: 24px;
  }
}

.text-section p span {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

.text-section p span b{
  font-weight: 600 !important;
}

.text-section p a{
  color: #2b2c2e;
}

#creative-types-overview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-align: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.creative-types {
  width: 100%;
}

.creative-types .inner{
  position: relative;
  display: -ms-grid;
  display: grid;
  margin: 0 auto;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  padding: 0px;
  margin-top: 0px;
  text-align: left;
  height: 100vh;
  padding: 0px 0px;
}

.creative-types .inner a {
  opacity: 0;
  -webkit-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
  overflow: hidden;
  display: block;
}

.creative-types .inner a:nth-child(1) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.creative-types .inner a:nth-child(2) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

.creative-types .inner a:nth-child(3) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

.creative-types .inner a:nth-child(4) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

.creative-types .inner a:nth-child(5) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 3;
}

.creative-types .inner a:nth-child(6) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
}

.creative-types .inner a:nth-child(7) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 4;
}

.creative-types .inner a:nth-child(8) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 2;
  -ms-grid-row: 4;
}


.creative-types .inner a img, .creative-types .inner a video {
  -webkit-transition: -webkit-transform 0.5s 0.5s;
  transition: -webkit-transform 0.5s 0.5s;
  -o-transition: transform 0.5s 0.5s;
  transition: transform 0.5s 0.5s;
  position: relative;
  z-index: 2;
  transition: transform 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.385, 0.005, 0.000, 1);
       -o-transition-timing-function: cubic-bezier(0.385, 0.005, 0.000, 1);
          transition-timing-function: cubic-bezier(0.385, 0.005, 0.000, 1);
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  object-fit: contain;
}

.backgound-video {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.creative-types .inner a:nth-child(1) img, .creative-types .inner a:nth-child(1) video {
  -webkit-transition: -webkit-transform 0.45s 0.3s;
  transition: -webkit-transform 0.45s 0.3s;
  -o-transition: transform 0.45s 0.3s;
  transition: transform 0.45s 0.3s;
  transition: transform 0.45s 0.3s, -webkit-transform 0.45s 0.3s;
}
.creative-types .inner a:nth-child(2) img, .creative-types .inner a:nth-child(2) video {
  -webkit-transition: -webkit-transform 0.45s 0.35s;
  transition: -webkit-transform 0.45s 0.35s;
  -o-transition: transform 0.45s 0.35s;
  transition: transform 0.45s 0.35s;
  transition: transform 0.45s 0.35s, -webkit-transform 0.45s 0.35s;
}
.creative-types .inner a:nth-child(3) img, .creative-types .inner a:nth-child(3) video {
  -webkit-transition: -webkit-transform 0.45s 0.4s;
  transition: -webkit-transform 0.45s 0.4s;
  -o-transition: transform 0.45s 0.4s;
  transition: transform 0.45s 0.4s;
  transition: transform 0.45s 0.4s, -webkit-transform 0.45s 0.4s;
}
.creative-types .inner a:nth-child(4) img, .creative-types .inner a:nth-child(4) video {
  -webkit-transition: -webkit-transform 0.45s 0.45s;
  transition: -webkit-transform 0.45s 0.45s;
  -o-transition: transform 0.45s 0.45s;
  transition: transform 0.45s 0.45s;
  transition: transform 0.45s 0.45s, -webkit-transform 0.45s 0.45s;
}
.creative-types .inner a:nth-child(5) img, .creative-types .inner a:nth-child(5) video {
  -webkit-transition: -webkit-transform 0.45s 0.5s;
  transition: -webkit-transform 0.45s 0.5s;
  -o-transition: transform 0.45s 0.5s;
  transition: transform 0.45s 0.5s;
  transition: transform 0.45s 0.5s, -webkit-transform 0.45s 0.5s;
}
.creative-types .inner a:nth-child(6) img, .creative-types .inner a:nth-child(6) video {
  -webkit-transition: -webkit-transform 0.45s 0.55s;
  transition: -webkit-transform 0.45s 0.55s;
  -o-transition: transform 0.45s 0.55s;
  transition: transform 0.45s 0.55s;
  transition: transform 0.45s 0.55s, -webkit-transform 0.45s 0.55s;
}
.creative-types .inner a:nth-child(7) img, .creative-types .inner a:nth-child(7) video {
  -webkit-transition: -webkit-transform 0.45s 0.6s;
  transition: -webkit-transform 0.45s 0.6s;
  -o-transition: transform 0.45s 0.6s;
  transition: transform 0.45s 0.6s;
  transition: transform 0.45s 0.6s, -webkit-transform 0.45s 0.6s;
}
.creative-types .inner a:nth-child(8) img, .creative-types .inner a:nth-child(8) video {
  -webkit-transition: -webkit-transform 0.45s 0.65s;
  transition: -webkit-transform 0.45s 0.65s;
  -o-transition: transform 0.45s 0.65s;
  transition: transform 0.45s 0.65s;
  transition: transform 0.45s 0.65s, -webkit-transform 0.45s 0.65s;
}

#creative-types-overview.ready img, #creative-types-overview.ready video {
  -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
          transform: translateY(0%);
}

#creative-types-overview.ready .inner a {
  opacity: 1;
}

@media only screen and (min-width: 600px) {
  .creative-types .inner{
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}


.creative-types .inner a:nth-child(1) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.creative-types .inner a:nth-child(2) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

.creative-types .inner a:nth-child(3) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}

.creative-types .inner a:nth-child(4) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 4;
  -ms-grid-row: 1;
}

.creative-types .inner a:nth-child(5) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

.creative-types .inner a:nth-child(6) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

.creative-types .inner a:nth-child(7) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 3;
  -ms-grid-row: 2;
}

.creative-types .inner a:nth-child(8) {
  -ms-grid-columns-span: 1;
  -ms-grid-column: 4;
  -ms-grid-row: 2;
}

.creative-types .inner img, .creative-types .inner video{
  vertical-align: middle;
  width: 100%;
  height: 100%;
  -o-object-position: 50% 100%;
     object-position: 50% 100%;
  /* -o-object-fit: contain;
     object-fit: contain; */
  opacity: 1;
}

@supports (-ms-ime-align: auto) {

}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .creative-types .inner img, .creative-types .inner video{
    width: auto;
    /* height: auto; */
  }
}

.creative-types .inner .type-image{
  height: 25vh;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.creative-types a{
  color: #ffffff;
  text-decoration: none;
  height: 100%;
  position: relative;
}

@media only screen and (min-width: 600px) {
  .creative-types .inner{
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .creative-types a{
    height: 100%;
  }

  .creative-types .inner .type-image{
    height: 50vh;
  }
}

.type-image.video-on img{
  display: none;
}

.creative-types a span{
  display: inline-block;
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
}

.creative-types a span.name {
  font-size: 3vw;
  width: 100%;
  text-align: center;
  z-index: 2;
  opacity: 0;
}

.creative-types a:hover span.name {
  opacity: 1;
}

.creative-types a:hover img, .creative-types a:hover video {
  opacity: 0 !important;
}


.creative-types a span.tagline {
  font-size: 16px;
  display: none;
}

/* ------------------------------- */
/* --------- Questions ----------- */

.question{
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.active-section{
  opacity: 1;
}

.question-position{
  position: fixed;
  left: 0%;
  width: 100%;
  z-index: 4;
  text-align: center;
  top: 40px;
  height: calc(100% - 80px);
}

.stop-interaction {
  pointer-events: none;
}

.question-center{
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
}

.question-wrap {
  margin: 0 auto;
  height: 100%;
  width: 100%;
}

.question-text, .answer {
  /* border: 1px solid #fff; */
  text-align: center;
  font-size: 7vw;
  letter-spacing: 0.05rem;
  color: #fff;
  height: calc(50% - 28.2vw);
  overflow: hidden;
  line-height: 1.2;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}



.answer {
  position: absolute;
  bottom: 0px;
  width: 50%;
}

.answer.active-button{
  background: rgba(255,255,255,0.95);
}

.answer.active-button .knockout, .answer.active-button .knockout__text {
  color: inherit !important;
}

#answer-0{
  left: 0px;
}

#answer-1{
  right: 0px;
}

.question-text span{
  display: inline-block;
  overflow: hidden;
}

.word{
  display: inline-block;
  line-height: 1.1;
}

@media only screen and (min-width: 600px) {

  .question-center{
    position: relative;
    width: auto;
    display: inline-block;
  }

  .question-wrap {
    height: auto;
    width: auto;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .question-position{
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    height: auto;
    top: 50%;
    left: 0%;
  }

  .question-text, .answer {
    height: 100px;
    line-height: 90px;
    width: auto;
    margin-bottom:0px;
    font-size: 3vw;
  }

  .answer, .question-text{
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  /* IE 11 Fix */

  .question-text{
    -ms-grid-column-span: 6;
    -ms-grid-row: 1;
  }

  #answer-0{
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
  }

  #answer-1{
    -ms-grid-column-span: 3;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
  }

  .question-text div{
    white-space: nowrap;
  }

  .question-text span{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    line-height: 90px;
  }

  .answer.active-button{
    background: transparent;
  }

  .answer.active-button .knockout, .answer.active-button .knockout__text {
    color: white !important;
  }

}

.question-text {
  -ms-grid-column: span 6;
  grid-column-start: span 6;
  line-height: 90px;
  padding: 0 20px;
}


.answer {
  cursor: pointer;
  margin-top: -1px;
  -ms-grid-column: span 3;
  grid-column-start: span 3;
}

.knockout, .knockout__text {
  line-height: 1.2;
  overflow: hidden;
  text-align: center;
  position: relative;
  color: transparent;
  background: transparent;
  width: 100%;
  text-align: center;
  white-space: normal;
}


.knockout__text{
  color: white;
  -webkit-transition: color 0.1s;
  -o-transition: color 0.1s;
  transition: color 0.1s;
}

.knockout__svg {
  display: none;
  pointer-events: none;
  -webkit-transition: fill 0.1s;
  -o-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: rgba(255,255,255,0);
  position: absolute;
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

@media only screen and (min-width: 600px) {
  .knockout__text, .question-text {
    padding: 0px 40px;
  }

  .knockout__svg {
    display: block;
  }

  .knockout, .knockout__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    line-height: 1;
    overflow: hidden;
    text-align: left;
    position: relative;
    color: #fff;
    height: 100px;
    width: 100%;
    text-align: center;
    white-space: normal;
  }
}

@media (hover: hover) {
  .answer:hover .knockout__svg{
    fill: rgba(255,255,255,1);
  }

  @media only screen and (max-width: 600px) {
    .answer:hover {
      background: rgba(255,255,255,0.3);
    }
  }

  .stop-interaction .answer:hover .knockout__svg{
    fill: rgba(255,255,255,0);
  }

  @media only screen and (min-width: 600px) {
    .answer:hover .knockout__text{
      color: transparent;
    }
  }

  .stop-interaction .answer:hover .knockout__text {
    color: white;
  }


  .answer.ie-baseline-falback:hover * {
      color: inherit;
  }

  .answer.ie-baseline-falback:hover  .knockout{
      background: #fff;
  }

  .answer.ie-baseline-falback:hover .knockout__svg{
    fill: rgba(255,255,255,0);
  }

  .stop-interaction .answer.ie-baseline-falback:hover .knockout{
    background: none;
  }

}


.answer::before, .answer::after, .question-text::before, .question-text::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.question-text span, .knockout__text{
  /* clip-path: inset(0 100% 0 0); */
}

.question-text span {
  will-change: clip-path;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
  /* clip-path: inset(0 100% 0 0); */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}


.letter-typeout{
  opacity: 0;
}

.show-letter{
  opacity: 1;
}

.answer, .question-text {
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


.center-line {
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
          transform-origin: center left;
  -webkit-transition: transform 0.6s 0.15s;
  -o-transition: transform 0.6s 0.15s;
  transition: transform 0.6s 0.15s;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(-50%) scale(0);
      -ms-transform: translateY(-50%) scale(0);
          transform: translateY(-50%) scale(0);
  height: 2px;
  background: white;
  top: calc(50% - 28.2vw);
  left: 0;
}

.center-vertical-line {
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
          transform-origin: top center;
  -webkit-transition: transform 0.3s 0.3s;
  -o-transition: transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
  position: absolute;
  width: 2px;
  left: 50%;
  bottom: 0px;
  -webkit-transform: translateX(-50%) scale(0);
      -ms-transform: translateX(-50%) scale(0);
          transform: translateX(-50%) scale(0);
  height: calc(50% - 28.2vw);
  background: white;
}


.left-line {
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
          transform-origin: center left;
  -webkit-transition: transform 0.6s 0.15s;
  -o-transition: transform 0.6s 0.15s;
  transition: transform 0.6s 0.15s;
  position: absolute;
  width: 100%;
  height: 2px;
  background: white;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  bottom: calc(50% - 28.2vw);
  left: 0;
}




@media only screen and (min-width: 600px) {

  .left-line {
    -webkit-transition-timing-function: linear;
         -o-transition-timing-function: linear;
            transition-timing-function: linear;
    -webkit-transform-origin: center top;
        -ms-transform-origin: center top;
            transform-origin: center top;
    -webkit-transition: transform 0.3s 0.3s;
    -o-transition: transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s;
    position: absolute;
    width: 2px;
    left: 0;
    top:0;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    height: 100%;
    background: white;
  }

  .center-line {
    width: 100%;
    top:50%;
    -webkit-transform: translateY(-50%) scale(0);
        -ms-transform: translateY(-50%) scale(0);
            transform: translateY(-50%) scale(0);
    height: 2px;
    background: white;
  }

  .center-vertical-line {
    height: 50%;
    top:50%;
    bottom: unset;
  }

}


.show-border .center-line {
  -webkit-transition: transform 0.6s 0.45s;
  -o-transition: transform 0.6s 0.45s;
  transition: transform 0.6s 0.45s;
  -webkit-transform: translateY(-50%) scale(1);
      -ms-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);
}

.show-border .center-vertical-line {
  -webkit-transition: transform 0.3s 0.75s;
  -o-transition: transform 0.3s 0.75s;
  transition: transform 0.3s 0.75s;
  -webkit-transform: translateX(-50%) scale(1);
      -ms-transform: translateX(-50%) scale(1);
          transform: translateX(-50%) scale(1);
}

.left-bottom-line {
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
          transform-origin: center left;
  -webkit-transition: transform 0.6s 0s;
  -o-transition: transform 0.6s 0s;
  transition: transform 0.6s 0s;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  height: 2px;
  background: white;
}

.show-border .left-bottom-line {
  -webkit-transition: transform 0.6s 0.6s;
  -o-transition: transform 0.6s 0.6s;
  transition: transform 0.6s 0.6s;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.left-top-line {
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
          transform-origin: center left;
  -webkit-transition: transform 0.6s 0.3s;
  -o-transition: transform 0.6s 0.3s;
  transition: transform 0.6s 0.3s;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  height: 2px;
  background: white;
}

.show-border .left-top-line {
  -webkit-transition: transform 0.6s 0.3s;
  -o-transition: transform 0.6s 0.3s;
  transition: transform 0.6s 0.3s;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}


.show-border .left-line {
  -webkit-transition: transform 0.3s 0.3s;
  -o-transition: transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.right-line {
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transform-origin: center top;
      -ms-transform-origin: center top;
          transform-origin: center top;
  -webkit-transition: transform 0.3s 0s;
  -o-transition: transform 0.3s 0s;
  transition: transform 0.3s 0s;
  position: absolute;
  width: 2px;
  right: 0;
  top:0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  height: 100%;
  background: white;
  display: none;
}

@media only screen and (min-width: 600px) {
  .right-line {
    display: block;
  }
}

.show-border .right-line {
  -webkit-transition: all 0.3s 0.9s;
  -o-transition: all 0.3s 0.9s;
  transition: all 0.3s 0.9s;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.colour-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  mix-blend-mode: overlay;
  z-index: 2;
}

.blur-layer {
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
  height: 100%;
  width: 100%;
  /* filter: blur(0px); */

}

.cover-image{
  /* filter: contrast(1); */
  height: 100%;
  width: 100%;
}

.cover-image img, .cover-image video {
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* -webkit-filter: blur(0px);
          filter: blur(0px); */
}



.image-wrap{
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
}

.effect-layer {
  z-index: 2;
  opacity: 1;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-animation: rotate-back 100s;
          animation: rotate-back 100s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count:infinite;
          animation-iteration-count:infinite;
  will-change: transform;
}

.effect-layer-backgound {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 1;
  will-change: transform;
  -webkit-filter: blur(40px);
          filter: blur(40px);
}

.effect-layer-backgound img{
  -webkit-transition: opacity 2s;
  -o-transition: opacity 2s;
  transition: opacity 2s;
  position: absolute;
  width: 60%;
  height: auto;
  opacity: 0;
  will-change: transform;
  mix-blend-mode: luminosity;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

}

/* random animation for the images */

.bounce-1{
  animation: moveX 34s linear 0s infinite alternate, moveY 15s linear 0s infinite alternate-reverse;
}
.bounce-2{
  -webkit-animation: moveXTwo 16s linear 0s infinite alternate, moveYTwo 32s linear 0s infinite alternate;
          animation: moveXTwo 16s linear 0s infinite alternate, moveYTwo 32s linear 0s infinite alternate;
}
.bounce-3{
  animation: moveX 38s linear 0s infinite alternate-reverse, moveY 24s linear 0s infinite alternate-reverse;
}
.bounce-4{
  -webkit-animation: moveXTwo 37s linear 0s infinite alternate-reverse, moveYTwo 21s linear 0s infinite alternate;
          animation: moveXTwo 37s linear 0s infinite alternate-reverse, moveYTwo 21s linear 0s infinite alternate;
}
.bounce-5{
  animation: moveX 17s linear 0s infinite alternate, moveY 29s linear 0s infinite alternate-reverse;
}
.bounce-6{
  -webkit-animation: moveXTwo 31s linear 0s infinite alternate, moveYTwo 31s linear 0s infinite alternate;
          animation: moveXTwo 31s linear 0s infinite alternate, moveYTwo 31s linear 0s infinite alternate;
}
.bounce-7{
  animation: moveX 40s linear 0s infinite alternate-reverse, moveY 22s linear 0s infinite alternate-reverse;
}
.bounce-8{
  -webkit-animation: moveXTwo 24s linear 0s infinite alternate-reverse, moveYTwo 40s linear 0s infinite alternate;
          animation: moveXTwo 24s linear 0s infinite alternate-reverse, moveYTwo 40s linear 0s infinite alternate;
}
.bounce-9{
  animation: moveX 17s linear 0s infinite alternate, moveY 29s linear 0s infinite alternate-reverse;
}
.bounce-10, .bounce-0{
  -webkit-animation: moveXTwo 34s linear 0s infinite alternate, moveYTwo 38s linear 0s infinite alternate;
          animation: moveXTwo 34s linear 0s infinite alternate, moveYTwo 38s linear 0s infinite alternate;
}

.bounce-0.paused, .bounce-1.paused,.bounce-2.paused,.bounce-3.paused,.bounce-4.paused,.bounce-5.paused,.bounce-6.paused,.bounce-7.paused,.bounce-8.paused,.bounce-9.paused,.bounce-10.paused{
  -webkit-animation-play-state: paused;
        animation-play-state: paused;
}

.touchevents .bounce-0, .touchevents .bounce-1, .touchevents .bounce-2, .touchevents .bounce-3, .touchevents .bounce-4, .touchevents .bounce-5, .touchevents .bounce-6, .touchevents .bounce-7, .touchevents .bounce-8, .touchevents .bounce-9, .touchevents .bounce-10 {
  -webkit-animation-play-state: paused;
        animation-play-state: paused;
}

/* end */

.image-wrap.show-image{
  -webkit-transform: translate(0%);
      -ms-transform: translate(0%);
          transform: translate(0%);
}

.video-playing .blur-layer {
  /* -webkit-filter: blur(0px);
          filter: blur(0px); */
}

.video-playing svg{
  opacity: 0;
}

.video-playing .cover-image {
  /* -webkit-filter: contrast(1);
          filter: contrast(1); */
}

.video-playing .cover-image img {
  /* -webkit-filter: saturate(-1);
          filter: saturate(-1); */
}


.video-playing .effect-layer {
  -webkit-animation: none;
          animation: none;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}

.video-playing {
  cursor: none;
}

.video-ended .video-wrap video {
  /* -webkit-filter: blur(100px);
          filter: blur(100px); */
}

.video-wrap{
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;

  /* opacity: 0; */
}

.video-wrap.show{
  opacity: 1;
}

.video-wrap video, .video-wrap img{
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}


.video-wrap.object-fit-fix video, .video-wrap.object-fit-fix img{
  object-fit: none !important;

  position: absolute;

  top: 50%;
  left: 50%;

  width: auto;
  height: auto;

  max-height: 100%;
  max-width: 100%;

  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);

}

.video-wrap video{
  position: relative;
  z-index: 3;
}
.video-wrap img{
  position: absolute;
  z-index: 1;
}

@media screen and (orientation : portrait){
  .video-wrap video {
    -o-object-fit: contain;
       object-fit: contain;
  }

  .video-wrap img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}

/* ----------------------- */
/* personality */

#personality-content {
  position: fixed;
  width: 100%;
  right: 0px;
  pointer-events: none;
  height: 100%;
  bottom: 0;
  text-align: center;
  z-index: 2;
}

#video-wrap {
  display: inline-block;
  width: 74.2296919vh;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

#video-wrap.video-on img{
  display: none;
}

@media only screen and (min-width: 600px) {
  #personality-content {
    position: absolute;
  }
}

#personality-content img, #personality-content video {
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  position: absolute;
  bottom: 0px;
  right: -1px;
  height: auto;
  width: 100%;
  -webkit-transition-timing-function: cubic-bezier(0.385, 0.005, 0.000, 1);
       -o-transition-timing-function: cubic-bezier(0.385, 0.005, 0.000, 1);
          transition-timing-function: cubic-bezier(0.385, 0.005, 0.000, 1);
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}

.scroll-arrow{
  position: fixed;
  width: 55%;
  height: 50px;
  bottom: 50px;
  text-align: center;
  padding-left: 0px;
  left: 0;
  display: none;
}

.scroll-arrow::after {
  content: '';
  width: 30px;
  height: 30px;
  display: inline-block;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 1px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: center center;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: bounce-arrow;
          animation-name: bounce-arrow;
  -webkit-animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
          animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

@media only screen and (min-width: 600px) {
  #personality-content img, #personality-content video {
    width: 100%;
    /* padding-left: 20px; */
  }
  #personality-content {
    position: fixed;
    top: 0;
    width: 40%;
    height: 100%;
  }


}

#result.load-in .devider{
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

#result.show-img #personality-content img, #result.show-img #personality-content video{
   -webkit-transform: translateY(0%);
       -ms-transform: translateY(0%);
           transform: translateY(0%);
}

#personality-description {
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  color: white;
  z-index: 3;
}

#personality-description .inner-wrap{
  -webkit-transition: padding-top 0.5s;
  -o-transition: padding-top 0.5s;
  transition: padding-top 0.5s;
  width: 100%;
  padding-top: calc(100vh + 20px);
}

.ready #personality-description .inner-wrap{
  -webkit-transition: padding-top 0.5s 0s;
  -o-transition: padding-top 0.5s 0s;
  transition: padding-top 0.5s 0s;
  width: 100%;
  padding-top: 100vh;
}

@media only screen and (min-width: 600px) {
  .ready #personality-description .inner-wrap{
    padding-top: calc(100vh - 150px);
  }
}

#personality-description h1 {
  margin-top: 0px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  font-size: 5.4vw;
  color: inherit;
  padding: 20px 10px;
  line-height: 1.2;
  letter-spacing: 0.05rem;
  position: fixed;
  top: 20px;
  width: 100%;
  z-index: 3;
  pointer-events: none;
}


#personality-header{
  font-size: 18px;
  font-weight: 300 !important;
  line-height: 1;
  display: block;
}

#personality-tagline{
  font-size: 24px;
  font-weight: 500 !important;
  line-height: 1;
  display: block;
}

#personality-name{
  font-size: 50px;
  line-height: 1;
}

#personality-name span{
  opacity: 0;
  position: relative;
  display: inline-block;
}

#personality-name span.show-letter{
  opacity: 1;
}

#personality-description #personality-name{
  padding: 5px;
  display: inline-block;
  padding: 10px 0px;
}

#personality-description #personality-definition {
  -webkit-transition: padding-top 0.5s 0.3s;
  -o-transition: padding-top 0.5s 0.3s;
  transition: padding-top 0.5s 0.3s;
  margin-top: -1px;
  color: white;
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
  padding: 0 10px 0 10px;
  opacity: 0;
  padding-bottom: 100px;
}

#personality-definition {
  position: relative;
  z-index: 2;
  max-width: 700px;
  /* margin: 0 auto; */
}

#personality-definition-text{
  opacity: 0;
  border: 2px solid #fff;
}

.ready #personality-definition-text{
  opacity: 1;
}

.ready #personality-description #personality-definition {
  opacity: 1;
}

#personality-description #personality-definition ul {
  margin: 0;
  padding: 0;
  width: 100%;
  margin-bottom: 2rem;
  font-size: 18px;
}

#personality-description #personality-definition li {
  list-style: none;
  font-size: 18px;
  border-bottom: 2px solid #fff;
  padding: 55px 20px 20px 20px;
  position: relative;
}

#personality-description #personality-definition li span {
  font-size: 16px;
  display: inline-block;
  background: white;
  padding: 10px 20px;
  position: absolute;
  top: 0;
  font-weight: 500 !important;
  left: 0;
}

#personality-description #personality-definition p {
  font-size: 18px;
  /* max-width: 650px; */
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 2rem;
}

#personality-description #personality-definition b {
  font-weight: 600 !important;
  font-style: normal;
}


#personality-description #personality-definition p.pull-quote {
  font-size: 40px;
  text-align: center;
  padding: 0 80px 0 40px;
}

#personality-description #personality-definition p a {
  color: white;
}

#personality-description #personality-definition p i {
  font-size: 14px;
}

.personality-footer{
  text-align: left;
  margin-bottom: 1rem;
  max-width: 680px;
  margin: 0 auto;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.footer-links{
  padding: 20px;
  background: #fff;
  overflow: hidden;
}

.share, .download {
  display: block;
  vertical-align: middle;
  text-align: center;
  font-size: 20px;
  fill: inherit;
  pointer-events: all;
}

.download {
  margin-bottom: 20px;
}

.download a {
  position: relative;
  z-index: 4;
  display: inline-block;
  line-height: 1.2;
  pointer-events: all;
}

.share b {
  margin-right: 5px;
}

.download a{
  text-decoration: none;
  border-bottom: 1px solid;
  color: inherit;
  font-weight: 600 !important;
}

.share svg, .download svg {
  width: 30px;
  height: 30px;
  fill: inherit;
  vertical-align: middle;
  margin-left: 3px;
  margin: 20px 2px 10px 2px;
}

#personality-description .logo{
  width: 100px;
  display: inline-block;

}

#personality-description .logo svg{
  width: 130px;
  fill: white;
  height: auto;
}

#personality-description .types-gradient{
    width: 100%;
    height: 50px;
    position: fixed;
    top:0;
    z-index: 3;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), color-stop(60%, #ccc), to(transparent));
    background-image: -webkit-linear-gradient(top, #ccc 0%, #ccc 60%, transparent 100%);
    background-image: -o-linear-gradient(top, #ccc 0%, #ccc 60%, transparent 100%);
    background-image: linear-gradient(to bottom, #ccc 0%, #ccc 60%, transparent 100%);
}

@media only screen and (min-width: 600px) {
  #personality-description .types-gradient{
    width: 60%;
  }
}

#personality-description .types-gradient.bottom{
  top: unset;
  bottom: 0px;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}


@media only screen and (min-width: 1200px) {
  .types-gradient {
    display: none;
  }
}


@media only screen and (min-width: 600px) {

  /* #result.ready #personality-description .inner-wrap  {
    padding-top: 80vh;
  } */

  #personality-description .types-gradient{
    height: 80px;
  }



  @media only screen and (min-width: 600px) {
    #personality-description .inner-wrap{
      max-width: 60%;
    }
  }

  #personality-description h1 {
    padding: 20px;
    width: 60%;
    top: 50%;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }

  #personality-description #personality-header, #personality-description #personality-name {
    max-width: 700px;
    padding-left: 0px;
    display: block;
  }

  #personality-description #personality-tagline {
    max-width: 700px;
    display: block;
  }

  #personality-header {
    font-size: 24px;
  }

  #personality-tagline{
    font-size: 30px;
    padding-left: 7px;
  }

  #personality-name{
    font-size: 65px;
  }

  #personality-description #personality-definition {
    padding: 0 20px 0 10px;
    padding-bottom: 100px;
  }

  #personality-description #personality-definition li {
    font-size: 20px;
  }


  #personality-description #personality-definition p {
    font-size: 20px;
  }

  #personality-description #personality-definition p.large {
    font-size: 36px;
  }

  #personality-description #personality-definition ul {
    font-size: 34px;
  }


}

@media only screen and (min-width: 1200px) {
  #personality-definition, #personality-name, #personality-tagline {
    margin-left: 100px;
    margin-right: unset;
  }

  #personality-definition, #personality-name, #personality-tagline {
    margin-left: 100px;
    margin-right: unset;
  }

  /* #personality-description #personality-name {
    padding-left: 40px;
  }

  #personality-description #personality-tagline {
    padding-left: 40px;
  } */

  #personality-description #personality-definition ul {
    margin: 0 auto;
    margin-bottom: 2rem;
  }

  #personality-description #personality-definition p {
    margin: 0 auto;
    margin-bottom: 2rem;
  }

  #personality-description #personality-header, #personality-description #personality-name{
    max-width: 700px;
    /* margin: 0 auto; */
    display: block;
  }

  /* #personality-description #personality-tagline{
    max-width: 700px;
    margin: 0 auto;
    display: block;
  } */

}



/* ----------------------- */
/* Animations */

@-webkit-keyframes blur-hide {
  /* from { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); }
  to { opacity: 0; -webkit-filter: blur(20px); filter: blur(20px); } */
}

@keyframes blur-hide {
  /* from { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); }
  to { opacity: 0; -webkit-filter: blur(20px); filter: blur(20px); } */
}

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); }
  to { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); }
}

@keyframes rotate {
  from { -webkit-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); }
  to { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); }
}

@-webkit-keyframes rotate-back {
  from { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); }
  to { -webkit-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); }
}

@keyframes rotate-back {
  from { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); }
  to { -webkit-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); }
}

@-webkit-keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes typing {
  from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  to { -webkit-clip-path: inset(0 0% 0 0); clip-path: inset(0 0% 0 0); }
}

@keyframes typing {
  from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  to { -webkit-clip-path: inset(0 0% 0 0); clip-path: inset(0 0% 0 0); }
}


#info-start{
  opacity: 0;
  -webkit-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
  transition: opacity 0.8s;
}

#type-toy span{
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
  display: inline-block;
  font-weight: 300 !important;
  margin-right: calc(7vw / 12);
}

#type-toy.letters-2 span{
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
  display: inline-block;
  font-weight: 300 !important;
  margin-right: calc(7vw / 30);
}

#type-toy span img.cap-c{
  width: 7vw;
}

#type-toy span img.r{
  width: calc(7vw * .529680365);
  margin-right: calc(7vw / 12 * -1);
}

#type-toy span img.e{
  width: calc(7vw * .771689498);
}

#type-toy span img.a{
  width: calc(7vw * .698630137);
  margin-right: calc(7vw / 30 * -1);
}

#type-toy span img.t{
  width: calc(7vw * .566210046);
}

#type-toy span img.i{
  width: calc(7vw * .269406393);
}

#type-toy span img.v{
  width: calc(7vw * .776255708);
  margin-right: calc(7vw / 12 * -1);
}

#type-toy span img.cap-t{
  width: calc(7vw * .835616438);
  margin-right: calc(7vw / 6 * -1);
}

#type-toy span img.y{
  width: calc(7vw * .744292237);
}

#type-toy span img.p{
  width: calc(7vw * .835616438);
  margin-right: calc(7vw / 30 * -1);
}

#type-toy span img.s{
  width: calc(7vw * .657534247);
}

.animate-up {
  -webkit-transform-origin: center center;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: once;
          animation-iteration-count: once;
  -webkit-animation-name: bounce-7;
          animation-name: bounce-7;
  -webkit-animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
          animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

.animate-down {
  -webkit-transform-origin: center center;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: once;
          animation-iteration-count: once;
  -webkit-animation-name: bounce-8;
          animation-name: bounce-8;
  -webkit-animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
          animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

.animate-spin-x {
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: once;
          animation-iteration-count: once;
  -webkit-animation-name: bounce-6;
          animation-name: bounce-6;
  -webkit-animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
          animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

.animate-spin-y {
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: once;
          animation-iteration-count: once;
  -webkit-animation-name: bounce-5;
          animation-name: bounce-5;
  -webkit-animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
          animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

.animate-scale {
  -webkit-transform-origin: center center;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: once;
          animation-iteration-count: once;
  -webkit-animation-name: bounce-9;
          animation-name: bounce-9;
  -webkit-animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
          animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}


@-webkit-keyframes bounce-5 {
  0%   { -webkit-transform: scale(1,1)    rotateY(0); transform: scale(1,1)    rotateY(0); }
  10%  { -webkit-transform: scale(1.05,.8) rotateY(0); transform: scale(1.05,.8) rotateY(0); }
  30%  { -webkit-transform: scale(.95,1.05) rotateY(180deg); transform: scale(.95,1.05) rotateY(180deg); }
  50%  { -webkit-transform: scale(1,1)    rotateY(-30deg); transform: scale(1,1)    rotateY(-30deg); }
  100% { -webkit-transform: scale(1,1)    rotateY(0); transform: scale(1,1)    rotateY(0); }
}


@keyframes bounce-5 {
  0%   { -webkit-transform: scale(1,1)    rotateY(0); transform: scale(1,1)    rotateY(0); }
  10%  { -webkit-transform: scale(1.05,.8) rotateY(0); transform: scale(1.05,.8) rotateY(0); }
  30%  { -webkit-transform: scale(.95,1.05) rotateY(180deg); transform: scale(.95,1.05) rotateY(180deg); }
  50%  { -webkit-transform: scale(1,1)    rotateY(-30deg); transform: scale(1,1)    rotateY(-30deg); }
  100% { -webkit-transform: scale(1,1)    rotateY(0); transform: scale(1,1)    rotateY(0); }
}

@-webkit-keyframes bounce-6 {
  0%   { -webkit-transform: scale(1,1)    rotateX(0); transform: scale(1,1)    rotateX(0); }
  10%  { -webkit-transform: scale(1.05,.8) rotateX(0); transform: scale(1.05,.8) rotateX(0); }
  30%  { -webkit-transform: scale(.95,1.05) rotateX(180deg); transform: scale(.95,1.05) rotateX(180deg); }
  50%  { -webkit-transform: scale(1,1)    rotateX(-30deg); transform: scale(1,1)    rotateX(-30deg); }
  100% { -webkit-transform: scale(1,1)    rotateX(0deg); transform: scale(1,1)    rotateX(0deg); }
}

@keyframes bounce-6 {
  0%   { -webkit-transform: scale(1,1)    rotateX(0); transform: scale(1,1)    rotateX(0); }
  10%  { -webkit-transform: scale(1.05,.8) rotateX(0); transform: scale(1.05,.8) rotateX(0); }
  30%  { -webkit-transform: scale(.95,1.05) rotateX(180deg); transform: scale(.95,1.05) rotateX(180deg); }
  50%  { -webkit-transform: scale(1,1)    rotateX(-30deg); transform: scale(1,1)    rotateX(-30deg); }
  100% { -webkit-transform: scale(1,1)    rotateX(0deg); transform: scale(1,1)    rotateX(0deg); }
}

@-webkit-keyframes bounce-7 {
  0%   { -webkit-transform: scale(1,1)    translateY(0); transform: scale(1,1)    translateY(0); }
  10%  { -webkit-transform: scale(1.1,.9) translateY(0); transform: scale(1.1,.9) translateY(0); }
  30%  { -webkit-transform: scale(.9,1.1) translateY(-30%); transform: scale(.9,1.1) translateY(-30%); }
  50%  { -webkit-transform: scale(1,1)    translateY(4%); transform: scale(1,1)    translateY(4%); }
  100% { -webkit-transform: scale(1,1)    translateY(0); transform: scale(1,1)    translateY(0); }
}

@keyframes bounce-7 {
  0%   { -webkit-transform: scale(1,1)    translateY(0); transform: scale(1,1)    translateY(0); }
  10%  { -webkit-transform: scale(1.1,.9) translateY(0); transform: scale(1.1,.9) translateY(0); }
  30%  { -webkit-transform: scale(.9,1.1) translateY(-30%); transform: scale(.9,1.1) translateY(-30%); }
  50%  { -webkit-transform: scale(1,1)    translateY(4%); transform: scale(1,1)    translateY(4%); }
  100% { -webkit-transform: scale(1,1)    translateY(0); transform: scale(1,1)    translateY(0); }
}


@-webkit-keyframes bounce-arrow {
  0%  { -webkit-transform: scale(1.02,.995) translateY(-10%) rotate(45deg); transform: scale(1.02,.995) translateY(-10%) rotate(45deg); }
  50%  { -webkit-transform: scale(.995,1.05) translateY(10%) rotate(45deg); transform: scale(.995,1.05) translateY(10%) rotate(45deg); }
  100%  { -webkit-transform: scale(1,1)    translateY(-10%) rotate(45deg); transform: scale(1,1)    translateY(-10%) rotate(45deg); }
}


@keyframes bounce-arrow {
  0%  { -webkit-transform: scale(1.02,.995) translateY(-10%) rotate(45deg); transform: scale(1.02,.995) translateY(-10%) rotate(45deg); }
  50%  { -webkit-transform: scale(.995,1.05) translateY(10%) rotate(45deg); transform: scale(.995,1.05) translateY(10%) rotate(45deg); }
  100%  { -webkit-transform: scale(1,1)    translateY(-10%) rotate(45deg); transform: scale(1,1)    translateY(-10%) rotate(45deg); }
}

@-webkit-keyframes bounce-9 {
  0%   { -webkit-transform: scale(1,1); transform: scale(1,1); }
  10%  { -webkit-transform: scale(1.1,.9); transform: scale(1.1,.9); }
  30%  { -webkit-transform: scale(.9,1.1); transform: scale(.9,1.1); }
  50%  { -webkit-transform: scale(1,1); transform: scale(1,1); }
  100% { -webkit-transform: scale(1,1); transform: scale(1,1); }
}

@keyframes bounce-9 {
  0%   { -webkit-transform: scale(1,1); transform: scale(1,1); }
  10%  { -webkit-transform: scale(1.1,.9); transform: scale(1.1,.9); }
  30%  { -webkit-transform: scale(.9,1.1); transform: scale(.9,1.1); }
  50%  { -webkit-transform: scale(1,1); transform: scale(1,1); }
  100% { -webkit-transform: scale(1,1); transform: scale(1,1); }
}


@-webkit-keyframes bounce-8 {
  0%   { -webkit-transform: scale(1,1)    translateY(0); transform: scale(1,1)    translateY(0); }
  10%  { -webkit-transform: scale(1.1,.9) translateY(0); transform: scale(1.1,.9) translateY(0); }
  30%  { -webkit-transform: scale(.9,1.1) translateY(10%); transform: scale(.9,1.1) translateY(10%); }
  50%  { -webkit-transform: scale(1,1)    translateY(-3%); transform: scale(1,1)    translateY(-3%); }
  100% { -webkit-transform: scale(1,1)    translateY(0); transform: scale(1,1)    translateY(0); }
}


@keyframes bounce-8 {
  0%   { -webkit-transform: scale(1,1)    translateY(0); transform: scale(1,1)    translateY(0); }
  10%  { -webkit-transform: scale(1.1,.9) translateY(0); transform: scale(1.1,.9) translateY(0); }
  30%  { -webkit-transform: scale(.9,1.1) translateY(10%); transform: scale(.9,1.1) translateY(10%); }
  50%  { -webkit-transform: scale(1,1)    translateY(-3%); transform: scale(1,1)    translateY(-3%); }
  100% { -webkit-transform: scale(1,1)    translateY(0); transform: scale(1,1)    translateY(0); }
}


@-webkit-keyframes moveX {
  from { left: 10%; } to { left: 90%; }
}


@keyframes moveX {
  from { left: 10%; } to { left: 90%; }
}

@-webkit-keyframes moveXTwo {
  from { left: 30%; } to { left: 80%; }
}

@keyframes moveXTwo {
  from { left: 30%; } to { left: 80%; }
}

@-webkit-keyframes moveY {
  from { top: 10%; } to { top: 90%; }
}

@keyframes moveY {
  from { top: 10%; } to { top: 90%; }
}

@-webkit-keyframes moveYTwo {
  from { top: 20%; } to { top: 80%; }
}

@keyframes moveYTwo {
  from { top: 20%; } to { top: 80%; }
}

.video-backgound {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-backgound video{
  -o-object-fit: cover;
     object-fit: cover;
  width: 120%;
  height: 120%;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /* -webkit-filter: blur(0px);
          filter: blur(0px); */
  -webkit-transition: -webkit-filter 0.5s;
  transition: -webkit-filter 0.5s;
  -o-transition: filter 0.5s;
  transition: filter 0.5s;
  transition: filter 0.5s, -webkit-filter 0.5s;
}


#video-background-wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.backgound-video-thumb {
  position: absolute !important;
  top: 0!important;
  left: 0!important;
  transform: scale(100) !important;
  width: auto!important;
  height: auto!important;
  transform-origin: 0 0!important;
  z-index: 1 !important;
}

.backgound-video-types {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transform: scale(100);
  transform-origin: 0 0;
}


.video-loader{
  z-index: 2;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.background-video-helper{
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: none;
  z-index: 1;
  width: auto;
  height: auto;
  transform: scale(1000);
  transform-origin: 0 0;
}

.touchevents .download{
  display: none !important;
}

.credit-link {
  vertical-align: middle;
}

.credit-link a{
  vertical-align: middle;
}

.adobe-logo{
  width: 16px;
  vertical-align: middle;
  margin-right: 6px;
}


.white .adobe-logo, .white .adobe-logo polygon{
  fill: #fff !important;
}

.adobe-logo-link{
  border-bottom: 0px !important
}