/* Color */
.yellowish {
  background-color: #FFFC31;
}

.darkyellowish {
  background-color: #E0DD00;
}

.blackish {
  background-color: #150F15;
}

.lightgreyish {
  background-color: #b8b8b8;
}

.greyish {
  background-color: #474747;
}

.darkgreyish {
  background-color: #272727;
}

.redish {
  background-color: #F94654;
}

.darkredish {
  background-color: #A3363F;
}

.blueish {
  background-color: #386A8E;
}

.darkblueish {
  background-color: #3f4041;
}

.pinkish {
  background-color: #FF59D8;
  fill: #FF59D8;
}

.darkpinkish {
  background-color: #B53EA2;
}

.cyanish {
  background-color: #17C3B2;
}

.darkcyanish {
  background-color: #13A496;
}

/* Sign */
/* Screen */
/* Board */
/* Navigation */
/* Icons */
.fill--none {
  fill: none;
}

.fill--white {
  fill: white;
}

.fill--pinkish {
  fill: #FF59D8;
}

.fill--opacity {
  opacity: 0.2;
}

.stroke {
  stroke: #150F15;
  stroke-width: 2px;
}

.stroke--linecap {
  stroke-linecap: round;
}

.stroke--white {
  stroke: white;
}

h1 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  line-height: 0.95;
  color: #150F15;
  display: inline-block;
  margin: 10px auto auto 46px;
  text-align: right;
}

.sign__logo--text {
  font-size: 21px;
}

.photo--text {
  font-size: calc(20px + 3vw);
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .photo--text {
    font-size: calc(20px + 1.3vw);
  }
}

h2 {
  text-align: center;
  color: #F94654;
  font-family: 'Coming Soon', cursive;
  font-size: calc(1.2vh + 2.2vw);
  line-height: 1.25;
}

.h2--board {
  font-size: calc(1vh + 2.2vw);
}

h3 {
  text-align: center;
  color: #150F15;
  font-family: 'Coming Soon', cursive;
  font-size: calc(1vh + 1.2vw);
  line-height: 1;
  margin: 3vw 1vw 1vw 1vw;
  -webkit-transform: rotate(1deg);
  transform: rotate(1deg);
}

.logo {
  position: absolute;
  text-align: center;
  padding: 0;
  width: 100%;
  top: 3px;
  bottom: 0;
}

.logo--flip {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  display: inherit;
  margin: 0 0 0 0.3rem;
}

.logo--bold {
  font-weight: 800;
}

h4 {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #150F15;
}

.cv {
  position: relative;
  cursor: pointer;
}

.cv--text {
  position: absolute;
  color: white;
  font-size: calc(12px + 5vw);
  text-align: center;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  margin-top: 2%;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .cv--text {
    font-size: calc(12px + 1.4vw);
    margin-top: 3%;
  }
}

.cv--text--big {
  position: absolute;
  color: white;
  font-size: calc(22px + 25.2vw);
  text-align: center;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  top: 32%;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .cv--text--big {
    font-size: calc(22px + 7.2vw);
    top: 34%;
  }
}

h5 {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  color: #150F15;
}

p,
li {
  font-family: 'Quicksand', sans-serif;
  font-size: calc(1.25vh + 0.8vw);
  font-weight: 300;
  text-align: left;
  color: #150F15;
}

.clipboard--text {
  text-align: center;
  font-size: calc(2vw + 3.5vh);
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  margin-top: 10%;
  margin-left: -5%;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .clipboard--text {
    margin-top: 20%;
    font-size: calc(0.5vw + 2.6vw);
  }
}

html {
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

body {
  margin: 0;
  background-color: #F2E9E9;
  scroll-behavior: smooth;
  height: 100vh;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  max-height: 100vh;
  overflow: hidden;
}

.board {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: -3;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .board {
    width: 31vw;
  }
}

.board__white {
  width: 90vw;
  height: 60vh;
  margin-top: 20%;
  border: 1px solid #150F15;
  border-radius: 30px;
  background-color: white;
  margin-bottom: 90px;
  position: relative;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .board__white {
    border-radius: 30px;
    width: 90%;
    margin-top: 0;
  }
}

.board__white--text {
  margin: 10% 10%;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  padding: 1vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .board__white--text {
    margin: 10% auto;
  }
}

.board__white--shadow {
  position: absolute;
  top: 0;
  width: calc(100% - 1px);
  z-index: -1;
  margin-top: 3px;
  -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.2);
}

.board__corner {
  height: 5vh;
  width: 5vh;
  border: 1px solid #150F15;
  background-color: #f1f1f1;
}

.board__corner--top--left {
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 60% 0 100% 0;
}

.board__corner--top--right {
  position: absolute;
  top: -2px;
  right: -2px;
  border-radius: 0px 60px 0 100px;
}

.board__corner--bottom--left {
  position: absolute;
  bottom: -2px;
  left: -2px;
  border-radius: 0px 100px 0 60px;
}

.board__corner--bottom--left--shadow {
  left: -3px;
  height: calc(5vh + 1px);
  width: calc(5vh + 0px);
  background-color: #C2C2C2;
}

.board__corner--bottom--right {
  position: absolute;
  bottom: -2px;
  right: -2px;
  border-radius: 100px 0 60px 0;
}

.board__corner--bottom--right----shadow {
  right: -2px;
  height: calc(5vh + 1px);
  width: calc(5vh + 0px);
  background-color: #C2C2C2;
}

.frame {
  background-color: #F2E9E9;
  width: 100vw;
  height: auto;
  max-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: -2;
  margin: 100px 1vw 100px 1vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .frame {
    width: 27vw;
  }
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .frame--photo {
    width: 40vw;
  }
}

.frame__wood {
  position: relative;
  height: auto;
  width: auto;
  -webkit-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
  background-color: lightgrey;
  z-index: -2;
  overflow: hidden;
  border-radius: 1px 1px 1% 1%;
  border: 1px solid #150F15;
  -o-border-image: initial;
     border-image: initial;
  padding: 8px;
  margin: 14px 10px 22px 10px;
  max-height: 100%;
}

.frame__wood::after {
  position: absolute;
  background-color: white;
  height: calc(100% - 4px);
  width: 100%;
  top: -1px;
  left: -1px;
  border-radius: 1px;
  border: 1px solid black;
  padding: 0;
  content: "";
  z-index: -1;
  display: block;
}

.frame__wood__image {
  max-width: calc(100% - 1px);
  height: auto;
  overflow: hidden;
  background-position: center;
  z-index: 1;
  border: 1px solid #150F15;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  max-height: calc(100vh - 220px);
}

.kristian {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 5px;
      grid-template-areas: "blend clipboard__one" "blend clipboard__one" "blend clipboard__one" "blend clipboard__one" "heart clipboard__one" "heart traffic" "heart traffic" "heart traffic";
  width: 98vw;
  max-height: 100vh;
  margin: 90px 1vw calc(90px + 1%) 1vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .kristian {
    width: 36vw;
    margin-right: 0;
  }
}

.heart {
  -ms-grid-row: 5;
  -ms-grid-row-span: 4;
  -ms-grid-column: 1;
  grid-area: heart;
  position: relative;
}

.heart--image {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  height: 100%;
  max-width: 100%;
}

.blend {
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  -ms-grid-column: 1;
  grid-area: blend;
  position: relative;
}

.blend--image {
  position: absolute;
  right: 0;
  bottom: 0;
  max-height: 100%;
  max-width: 100%;
}

.clipboard {
  border: 1px solid #150F15;
  background-color: white;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  padding: 10px;
  margin-top: 5vh;
}

@media only screen and (max-height: 569px) and (orientation: portrait) {
  .clipboard {
    margin-top: 5vh;
  }
}

@media only screen and (max-height: 812px) {
  .clipboard {
    margin-top: 15vh;
  }
}

.clipboard__one {
  -ms-grid-row: 1;
  -ms-grid-row-span: 5;
  -ms-grid-column: 2;
  grid-area: clipboard__one;
}

.clipboard__two {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: clipboard__two;
  margin: 0 0;
}

.clipboard__spring {
  border: 1px solid #150F15;
  background-color: #b8b8b8;
  height: 7%;
  width: 31.5%;
  position: absolute;
  top: 0.1vw;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  border-radius: 0 0 4px 4px;
  z-index: 1;
}

.clipboard__spring--inner {
  background-color: white;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 1px solid #150F15;
  border-radius: 0 0 2px 2px;
  margin: 2px;
}

.clipboard__spring--inner--line {
  position: absolute;
  left: 3px;
  height: 1px;
  width: calc(100% - 5px);
  background-color: #150F15;
  z-index: 3;
  -webkit-transform: rotate(0.5deg);
          transform: rotate(0.5deg);
}

.clipboard__spring--inner--line--one {
  top: 6px;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .clipboard__spring--inner--line--one {
    top: 10px;
  }
}

.clipboard__spring--inner--line--two {
  top: 4px;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .clipboard__spring--inner--line--two {
    top: 8px;
  }
}

.clipboard__block {
  background-color: #FFFC31;
  height: 3.5%;
  width: 31.5%;
  border: 1px solid #150F15;
  position: absolute;
  top: -1.75%;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  z-index: 2;
}

.clipboard__paper--outer {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
  background: #150F15;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-clip-path: polygon(0 0, 0 21%, 1% 57%, 1% 79%, 0 100%, 48% 98%, 80% 99%, 100% 100%, 99% 26%, 100% 1%, 76% 1%, 42% 1%);
          clip-path: polygon(0 0, 0 21%, 1% 57%, 1% 79%, 0 100%, 48% 98%, 80% 99%, 100% 100%, 99% 26%, 100% 1%, 76% 1%, 42% 1%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.clipboard__paper--inner {
  position: absolute;
  background: white;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  -webkit-clip-path: polygon(0 0, 0 21%, 1% 57%, 1% 79%, 0 100%, 48% 98%, 80% 99%, 100% 100%, 99% 26%, 100% 1%, 76% 1%, 42% 1%);
          clip-path: polygon(0 0, 0 21%, 1% 57%, 1% 79%, 0 100%, 48% 98%, 80% 99%, 100% 100%, 99% 26%, 100% 1%, 76% 1%, 42% 1%);
}

.traffic {
  -ms-grid-row: 6;
  -ms-grid-row-span: 3;
  -ms-grid-column: 2;
  grid-area: traffic;
  background-color: #386A8E;
  border-radius: 12px;
  position: relative;
  max-height: 80%;
  max-width: 100%;
}

@media only screen and (max-height: 812px) {
  .traffic {
    max-height: 60%;
  }
}

.traffic--border {
  border: 4px solid white;
  border-radius: 10px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.traffic--arrow {
  -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
          clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  background-color: white;
  position: absolute;
  top: calc(19%);
  left: calc(22%);
  width: 60%;
  height: 60%;
}

.plate {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 5px;
  z-index: -3;
      grid-template-areas: "clipboard__two clipboard__two cv cv" "clipboard__two clipboard__two cv cv" "banner banner banner banner" "plate__button--one plate__button--two plate__button--three plate__button--four";
  width: 98vw;
  max-height: 100vh;
  margin: 90px 1vw calc(90px + 1%) 1vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .plate {
    gap: 2vh 0.5vw;
    width: 36vw;
    margin-left: 0;
    margin: calc(90px + 3vh) 1vw calc(90px + 3%) 1vw;
  }
}

.plate__button {
  background-color: white;
  border: 1px solid #150F15;
  border-radius: 0 0 40px 40px;
  -webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2);
  margin: 0 0.6vw;
  position: relative;
  height: 145%;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .plate__button {
    max-height: 90%;
    margin: 1vh 1vw 3vh 1vw;
  }
}

.plate__button--one {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  grid-area: plate__button--one;
}

.plate__button--two {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
  grid-area: plate__button--two;
}

.plate__button--three {
  -ms-grid-row: 4;
  -ms-grid-column: 3;
  grid-area: plate__button--three;
}

.plate__button--four {
  -ms-grid-row: 4;
  -ms-grid-column: 4;
  grid-area: plate__button--four;
}

.cv {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-area: cv;
  border: 4px solid white;
  background-color: #150F15;
  margin: 0 0;
  padding: 6px;
  max-width: 100%;
}

.banner {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-area: banner;
  background-color: white;
  border: 1px solid #150F15;
  position: relative;
  padding-top: 2%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.banner__ring {
  background-color: #FFFC31;
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 100%;
  border: 1px solid #150F15;
  top: 4px;
  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}

.banner__ring--inner {
  background-color: #F2E9E9;
  border: 1px solid #150F15;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 100%;
  margin: 2px;
  position: relative;
}

.banner__ring--left {
  left: 4px;
}

.banner__ring--right {
  right: 4px;
}

.banner__ring--spike {
  background-color: #b8b8b8;
  border: 1px solid #150F15;
  width: 2px;
  height: 10px;
  border-radius: 0 0 4px 4px;
  margin: 2px;
  position: absolute;
  top: -9px;
  left: -1px;
  z-index: 3;
  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}

.banner__button {
  background-color: white;
  border: 1px solid #150F15;
  border-radius: 0 0 40px 40px;
  -webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2);
  margin: 0 0.6vw;
  position: relative;
  height: 145%;
}

@media only screen and (max-height: 812px) {
  .banner__button {
    margin: 2vh 1.6vw;
  }
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .banner__button {
    max-height: 90%;
    margin: 1vh 1vw 3vh 1vw;
  }
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .banner--instagram {
    margin: auto 1% auto 2%;
  }
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .banner--youtube {
    margin: auto 2% auto 1%;
  }
}

.banner--text {
  margin-top: 4px;
}

.social--facebook {
  fill: #386A8E;
}

.social--facebook--shadow {
  fill: #3f4041;
}

.social__facebook--me {
  position: absolute;
  top: 44px;
  left: calc(50% - 9px);
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .social__facebook--me {
    top: 54px;
  }
}

.social--instagram {
  fill: #FF59D8;
}

.social--instagram--shadow {
  fill: #B53EA2;
}

.social__instagram--me {
  position: absolute;
  display: inline-block;
  top: 44px;
  left: calc(50% - 20px);
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .social__instagram--me {
    top: 54px;
  }
}

.social--youtube {
  fill: #F94654;
}

.social--youtube--shadow {
  fill: #A3363F;
}

.social__youtube--me {
  position: absolute;
  display: inline-block;
  top: 44px;
  left: calc(50% - 28px);
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .social__youtube--me {
    top: 54px;
  }
}

.social__mail {
  height: 54x;
  width: 54px;
  stroke: #150F15;
  fill: #f1f1f1;
  stroke-width: 2.2;
  stroke-miterlimit: 10;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 3;
}

.social__mail:hover {
  top: 1px;
}

.social__mail:hover + .mail--shadow {
  -webkit-filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.2));
  -webkit-transition: 100ms;
  transition: 100ms;
}

.social__mail:active {
  top: 4px;
}

.social__mail:active + .mail--shadow {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.2));
  -webkit-transition: 100ms;
  transition: 100ms;
}

.social__mail--me {
  position: absolute;
  display: inline-block;
  top: 44px;
  left: calc(50% - 26px);
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .social__mail--me {
    top: 54px;
  }
}

.social__mail--shadow {
  fill: #b8b8b8;
  position: absolute;
  z-index: 2;
  margin-top: 4px;
  -webkit-filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.2));
}

.posters {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: -3;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .posters {
    width: 27vw;
    margin-top: -1.7%;
  }
}

.posters--position {
  margin-top: -10vh;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .posters--position {
    margin-top: -7vh;
  }
}

.posters__momhumor {
  max-width: 40vw;
  max-height: 40vh;
  margin: 0.5vw;
  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .posters__momhumor {
    max-width: 12vw;
    max-height: 30vh;
  }
}

.posters--coming {
  position: absolute;
}

.screen {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen {
    width: 42vw;
  }
}

.screen__monitor {
  height: auto;
  -webkit-box-shadow: 0px 4px 0px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 0px 3px rgba(0, 0, 0, 0.2);
  background-color: lightgrey;
  z-index: -2;
  border: 1px solid #150F15;
  -o-border-image: initial;
     border-image: initial;
  padding: 12px 14px 18px 12px;
}

.screen__monitor::after {
  background-color: white;
  height: calc(100% - 4px);
  width: 100%;
  border-radius: 1px;
  border: 1px solid black;
  padding: 0;
  content: "";
  z-index: -1;
  display: block;
}

.screen__monitor--front {
  position: relative;
  margin: -20px 5px 2px 5px;
  width: 96vw;
  border-radius: 1px 1px 2% 2%;
}

.screen__monitor--front::after {
  position: absolute;
  top: -3px;
  left: -1px;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__monitor--front {
    width: 90%;
  }
}

.screen__monitor__image {
  width: 100%;
  padding-top: 56.15%;
  height: 0px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 1px solid #150F15;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__monitor__image {
    max-width: 38vw;
    max-height: 42vh;
  }
}

.screen__monitor__image--video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border: 0;
}

.screen__clerk {
  width: calc(100% - 1px);
  height: auto;
  overflow: hidden;
  background-position: center;
  z-index: 1;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  border: 1px solid #150F15;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.screen__clerk:hover {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__clerk {
    max-width: 38vw;
    max-height: 42vh;
  }
}

.screen__dot {
  position: absolute;
  padding: 2px;
  background-color: #F94654;
  border: 1px solid #150F15;
  border-radius: 100%;
}

.screen__dot--bottom {
  right: 3px;
  bottom: 9px;
}

.screen__dot--middle {
  margin-top: -1px;
  right: 3px;
}

.screen__dot--line {
  border-radius: 0;
  background-color: #150F15;
  position: absolute;
  height: 2px;
  width: 12px;
}

.screen__dot--line--bottom {
  right: 11px;
  bottom: 11px;
}

.screen__dot--line--middle {
  margin-top: 1px;
  right: 11px;
}

.screen__ipad {
  width: 21vh;
  height: 15vh;
  border: 1px solid #150F15;
  border-bottom: 2px solid #150F15;
  border-radius: 8px;
  background-color: #f1f1f1;
  position: absolute;
  left: 2%;
  bottom: 0;
  margin-bottom: 90px;
  -webkit-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
  display: block;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__ipad {
    width: 26%;
    height: 13%;
    left: 10%;
  }
}

.screen__ipad__inner {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border: 1px solid #150F15;
  border-radius: 6px;
  background-color: white;
  margin: 3px;
  position: relative;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__ipad__inner {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin: 4px;
  }
}

.screen__ipad__inner--hand--left, .screen__ipad__inner--hand--right {
  width: 15%;
  position: absolute;
  top: 43%;
  margin: auto;
  -webkit-animation-duration: 12s;
  animation-duration: 12s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__ipad__inner--hand--left, .screen__ipad__inner--hand--right {
    width: 13%;
  }
}

.screen__ipad__inner--hand--left {
  left: 10%;
  -webkit-animation-name: handLeft;
  animation-name: handLeft;
}

.screen__ipad__inner--hand--right {
  right: 10%;
  -webkit-animation-name: handRight;
  animation-name: handRight;
}

.screen__ipad__inner--hand--color {
  fill: #FF59D8;
  stroke: #000000;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

.screen__ipad__inner--hand--text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: auto;
  text-align: center;
}

.screen__ipad__wire {
  border: 1px solid #150F15;
  border-radius: 100px;
  background-color: #386A8E;
  padding: 2px;
  height: 15vh;
  width: 40.5vw;
  position: absolute;
  z-index: -4;
  top: 50%;
  left: 50%;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__ipad__wire {
    height: 110%;
    width: 120%;
  }
}

.screen__ipad__wire__inner {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid #150F15;
  border-radius: 200px;
  background-color: #F2E9E9;
}

.screen__ipad__blok {
  border: 1px solid #150F15;
  border-radius: 1px;
  background-color: #386A8E;
  height: 8px;
  width: 12px;
  position: absolute;
  bottom: calc(50% - 7px);
  left: 100%;
}

.screen__wire {
  top: 55%;
  width: 6px;
  height: 60%;
  border: 1px solid #150F15;
  border-radius: 6px;
  background-color: #F94654;
  position: absolute;
  z-index: -3;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__wire {
    margin-right: 9.5%;
  }
}

#text1,
#text2,
#text3,
#text4 {
  color: rgba(0, 0, 0, 0);
  -webkit-animation-name: text1;
  animation-name: text1;
  -webkit-animation-duration: 12s;
  animation-duration: 12s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  fill: rgba(0, 0, 0, 0);
}

#text2 {
  margin-top: 1%;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  #text2 {
    margin-top: 0%;
  }
}

#text3 {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

#text4 {
  margin-top: 1%;
  -webkit-animation-delay: 9s;
  animation-delay: 9s;
}

@-webkit-keyframes text1 {
  0% {
    color: rgba(0, 0, 0, 0);
  }
  1% {
    color: black;
  }
  23% {
    color: black;
  }
  25% {
    color: rgba(0, 0, 0, 0);
  }
  100% {
    color: rgba(0, 0, 0, 0);
  }
}

@keyframes text1 {
  0% {
    color: rgba(0, 0, 0, 0);
  }
  1% {
    color: black;
  }
  23% {
    color: black;
  }
  25% {
    color: rgba(0, 0, 0, 0);
  }
  100% {
    color: rgba(0, 0, 0, 0);
  }
}

@-webkit-keyframes text1-desk {
  0% {
    fill: rgba(39, 39, 39, 0);
  }
  1% {
    fill: #272727;
  }
  23% {
    fill: #272727;
  }
  25% {
    fill: rgba(39, 39, 39, 0);
  }
  100% {
    fill: rgba(39, 39, 39, 0);
  }
}

@keyframes text1-desk {
  0% {
    fill: rgba(39, 39, 39, 0);
  }
  1% {
    fill: #272727;
  }
  23% {
    fill: #272727;
  }
  25% {
    fill: rgba(39, 39, 39, 0);
  }
  100% {
    fill: rgba(39, 39, 39, 0);
  }
}

@-webkit-keyframes handLeft {
  0% {
    left: 10%;
  }
  6% {
    left: 3%;
  }
  12% {
    left: 10%;
  }
  18% {
    left: 3%;
  }
  24% {
    left: 10%;
  }
  100% {
    left: 10%;
  }
}

@keyframes handLeft {
  0% {
    left: 10%;
  }
  6% {
    left: 3%;
  }
  12% {
    left: 10%;
  }
  18% {
    left: 3%;
  }
  24% {
    left: 10%;
  }
  100% {
    left: 10%;
  }
}

@-webkit-keyframes handRight {
  0% {
    right: 10%;
  }
  50% {
    right: 10%;
  }
  56% {
    right: 3%;
  }
  62% {
    right: 10%;
  }
  68% {
    right: 3%;
  }
  74% {
    right: 10%;
  }
  100% {
    right: 10%;
  }
}

@keyframes handRight {
  0% {
    right: 10%;
  }
  50% {
    right: 10%;
  }
  56% {
    right: 3%;
  }
  62% {
    right: 10%;
  }
  68% {
    right: 3%;
  }
  74% {
    right: 10%;
  }
  100% {
    right: 10%;
  }
}

.section__one {
  width: 100vh;
  max-width: 100vh;
  height: 100vw;
  max-height: 100vw;
  -webkit-transform: rotate(-90deg) translateX(-100vh);
          transform: rotate(-90deg) translateX(-100vh);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  overflow-y: auto;
  overflow-x: auto;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wall {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transform: rotate(90deg) translateY(-100vh);
          transform: rotate(90deg) translateY(-100vh);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

.wall__front {
  width: 500vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .wall__front {
    width: 158vw;
  }
}

.wall__clerk {
  width: 1100vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .wall__clerk {
    width: 366.66vw;
  }
}

.wall__photo {
  width: 1100vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .wall__photo {
    width: 440vw;
  }
}

.wall__me {
  width: 300vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .wall__me {
    width: 100vw;
    padding: 120px auto 90px auto;
  }
}

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

.shelf {
  width: 100vw;
  height: 100vh;
  display: block;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: -3;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .shelf {
    width: 31vw;
  }
}

.shelf--one, .shelf--two, .shelf--three {
  margin: auto 5vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .shelf--one, .shelf--two, .shelf--three {
    margin: auto 1vw;
  }
}

.shelf--top {
  fill: #f1f1f1;
  stroke: #150F15;
  stroke-miterlimit: 10;
}

.shelf--bottom {
  fill: #C2C2C2;
  stroke: #150F15;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.shelf--shadow {
  opacity: 0.2;
}

.dageMedKultur,
.clerk--logo,
.sterling {
  height: 10vh;
  cursor: pointer;
}

.dageMedKultur {
  display: block;
  margin: 6vh auto 2vh auto;
  text-align: center;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .dageMedKultur:hover {
    cursor: pointer;
  }
}

.clerk--logo {
  display: block;
  margin: 18vh auto 2vh auto;
  text-align: center;
}

.sterling {
  height: 5.2vh;
  display: block;
  margin: 10vh auto 2vh auto;
  text-align: center;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .sterling:hover {
    cursor: pointer;
  }
}

.clerk {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: -3;
}

.clerk--paper {
  -webkit-filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.2));
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .clerk--paper {
    width: 36vw;
  }
}

.clerk--screen {
  margin-top: -0.7%;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .clerk--screen {
    width: 32vw;
  }
}

.clerk--poster {
  z-index: 1;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .clerk--poster {
    width: 33.33vw;
  }
}

.clerk--poster--big {
  width: 90vw;
  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .clerk--poster--big {
    width: 30vw;
  }
}

.clerk--poster--medium {
  width: 80vw;
  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
  margin: auto 10vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .clerk--poster--medium {
    width: 25.5vw;
  }
}

.clerk--poster--small {
  display: block;
}

.screen__monitor {
  z-index: 1;
}

.screen__monitor__inner {
  margin: 8px -12px 12px -12px;
  border-bottom: 1px solid #150F15;
}

.screen__monitor--clerk {
  position: relative;
  margin: 14px 10px -17px 10px;
  width: 50vw;
  border-radius: 1px 1px 1% 1%;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__monitor--clerk {
    margin-top: 10%;
    width: 56%;
  }
}

.screen__monitor--clerk::after {
  position: absolute;
  top: -3px;
  left: -1px;
}

.screen__monitor__video {
  width: calc(100% - 1px);
  height: auto;
  overflow: hidden;
  background-position: center;
  z-index: 1;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  border: 1px solid #150F15;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .screen__monitor__video {
    max-width: 38vw;
    max-height: 42vh;
  }
}

.clerk__wire {
  position: absolute;
  border: 1px solid #150F15;
  z-index: -3;
}

.clerk__wire--outer {
  background-color: #F94654;
  width: 9px;
  height: 9px;
  padding: 4px;
  border-radius: 100%;
  top: calc(50% - 12px);
  -webkit-box-shadow: 0px 2px 0px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 0px 1px rgba(0, 0, 0, 0.2);
}

.clerk__wire--outer--left {
  left: -10px;
}

.clerk__wire--outer--right {
  right: -10px;
}

.clerk__wire--outer--square {
  background-color: #F94654;
  border-radius: 0;
  width: calc(140px + 12vw);
  height: 4px;
  padding: 0;
  z-index: -3;
  right: calc(-140px - 12vw);
  top: calc(50% - 12px);
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
}

.clerk__wire--outer--square--bottom {
  top: calc(50% + 1px);
}

.clerk__wire--outer--inner {
  background-color: #C1BABA;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 100%;
}

@-webkit-keyframes sign-wiggle {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    top: 2%;
    left: calc(50% - 77px);
    right: calc(50% - 77px);
  }
  10% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
    top: 1%;
    left: calc(50% - 70px);
    right: calc(50% - 84px);
  }
  25% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
    top: 1.5%;
    left: calc(50% - 83px);
    right: calc(50% - 71px);
  }
  40% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
    top: 1.7%;
    left: calc(50% - 73px);
    right: calc(50% - 81px);
  }
  57% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
    top: 1.8%;
    left: calc(50% - 79px);
    right: calc(50% - 75px);
  }
  75% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
    top: 1.9%;
    left: calc(50% - 76px);
    right: calc(50% - 78px);
  }
  95% {
    -webkit-transform: rotate(0.5deg);
            transform: rotate(0.5deg);
    top: 2%;
    left: calc(50% - 77px);
    right: calc(50% - 77px);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes sign-wiggle {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    top: 2%;
    left: calc(50% - 77px);
    right: calc(50% - 77px);
  }
  10% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
    top: 1%;
    left: calc(50% - 70px);
    right: calc(50% - 84px);
  }
  25% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
    top: 1.5%;
    left: calc(50% - 83px);
    right: calc(50% - 71px);
  }
  40% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
    top: 1.7%;
    left: calc(50% - 73px);
    right: calc(50% - 81px);
  }
  57% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
    top: 1.8%;
    left: calc(50% - 79px);
    right: calc(50% - 75px);
  }
  75% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
    top: 1.9%;
    left: calc(50% - 76px);
    right: calc(50% - 78px);
  }
  95% {
    -webkit-transform: rotate(0.5deg);
            transform: rotate(0.5deg);
    top: 2%;
    left: calc(50% - 77px);
    right: calc(50% - 77px);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes sign-wiggle-shadow {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    top: calc(2% + 2px);
    left: calc(50% - 77px);
    right: calc(50% - 77px);
  }
  10% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
    top: calc(1% + 1px);
    left: calc(50% - 68px);
    right: calc(50% - 86px);
  }
  25% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
    top: calc(1.5% + 2px);
    left: calc(50% - 85px);
    right: calc(50% - 69px);
  }
  40% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
    top: calc(1.7% + 2px);
    left: calc(50% - 71px);
    right: calc(50% - 83px);
  }
  57% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
    top: calc(1.8% + 2px);
    left: calc(50% - 81px);
    right: calc(50% - 73px);
  }
  75% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
    top: calc(1.9% + 2px);
    left: calc(50% - 75px);
    right: calc(50% - 79px);
  }
  95% {
    -webkit-transform: rotate(0.5deg);
            transform: rotate(0.5deg);
    top: calc(2% + 2px);
    left: calc(50% - 77px);
    right: calc(50% - 77px);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes sign-wiggle-shadow {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    top: calc(2% + 2px);
    left: calc(50% - 77px);
    right: calc(50% - 77px);
  }
  10% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
    top: calc(1% + 1px);
    left: calc(50% - 68px);
    right: calc(50% - 86px);
  }
  25% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
    top: calc(1.5% + 2px);
    left: calc(50% - 85px);
    right: calc(50% - 69px);
  }
  40% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
    top: calc(1.7% + 2px);
    left: calc(50% - 71px);
    right: calc(50% - 83px);
  }
  57% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
    top: calc(1.8% + 2px);
    left: calc(50% - 81px);
    right: calc(50% - 73px);
  }
  75% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
    top: calc(1.9% + 2px);
    left: calc(50% - 75px);
    right: calc(50% - 79px);
  }
  95% {
    -webkit-transform: rotate(0.5deg);
            transform: rotate(0.5deg);
    top: calc(2% + 2px);
    left: calc(50% - 77px);
    right: calc(50% - 77px);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

.sign {
  border: 1px solid #150F15;
  border-radius: 8px;
  background-color: #FF59D8;
  height: 58px;
  width: 154px;
  padding: 3px;
  position: fixed;
  top: 2%;
  left: calc(50% - 77px);
  right: calc(50% - 77px);
  cursor: pointer;
  z-index: 97;
}

.sign.wiggle {
  -webkit-animation: sign-wiggle 1.3s ease-out;
          animation: sign-wiggle 1.3s ease-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

.sign.wiggle + .sign__shadow {
  -webkit-animation: sign-wiggle-shadow 1.3s ease-out;
          animation: sign-wiggle-shadow 1.3s ease-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

.sign--logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 88%;
  padding: 4% 6%;
}

.sign__wire {
  background-color: #b8b8b8;
  border: 1px solid #150F15;
  width: 4px;
  height: 100px;
  position: absolute;
  top: -100px;
  z-index: 95;
}

.sign__wire--left {
  left: 6px;
  -webkit-box-shadow: 0px 3px 0px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 0px 1px rgba(0, 0, 0, 0.2);
}

.sign__wire--right {
  right: 6px;
  -webkit-box-shadow: 0px 3px 0px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 0px 1px rgba(0, 0, 0, 0.2);
}

.sign__inner {
  border: 1px solid #150F15;
  border-radius: 6px;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  background-color: white;
  position: relative;
}

.sign__shadow {
  border: 1px solid #150F15;
  border-radius: 8px;
  background-color: #B53EA2;
  height: 58px;
  width: 154px;
  padding: 3px;
  position: fixed;
  top: calc(2% + 2px);
  left: calc(50% - 77px);
  right: calc(50% - 77px);
  z-index: 96;
  -webkit-box-shadow: 0px 1px 0px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 0px 3px rgba(0, 0, 0, 0.2);
}

.sign__icon {
  width: 36px;
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 8px;
}

.textB {
  font-weight: 800;
}

.flip {
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  display: inherit;
  margin: 0 0 0 0.3rem;
}

.nav {
  display: block;
  text-align: center;
  overflow: hidden;
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100vw;
  z-index: 99;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "nav__btn";
  height: 90px;
  border-top: 1px solid #150F15;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .nav {
    -ms-grid-columns: 1fr 5fr 1fr;
        grid-template-columns: 1fr 5fr 1fr;
        grid-template-areas: "social__btn nav__btn contact__btn";
  }
}

.nav__btn {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: nav__btn;
  display: inline-block;
  margin: 0.3rem 0.15rem 0rem 0.15rem;
  position: relative;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .nav__btn {
    margin: 0.3rem 0.5rem 0.1rem 0.5rem;
  }
}

.social {
  display: none;
  grid-area: social__btn;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .social {
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 32px;
  }
}

.social__facebook {
  fill: #386A8E;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .social__facebook {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 2.5vw;
  }
}

.social__facebook--shadow {
  fill: #3f4041;
}

.social__instagram {
  fill: #FF59D8;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .social__instagram {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 7vw;
  }
}

.social__instagram--shadow {
  fill: #B53EA2;
}

.social__instagram--photo {
  position: relative;
  display: block;
  left: calc(50% - 20px);
}

.social__youtube {
  fill: #F94654;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .social__youtube {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 13vw;
  }
}

.social__youtube--shadow {
  fill: #A3363F;
}

.social__icon {
  stroke: #150F15;
  stroke-width: 2.2;
  stroke-miterlimit: 10;
  height: 40px;
  display: table;
  z-index: 3;
  top: 1px;
  margin: 0;
  cursor: pointer;
  position: relative;
}

.social__icon:hover {
  top: 2px;
  -webkit-transition: 100ms;
  transition: 100ms;
}

.social__icon:hover + .social--shadow {
  -webkit-filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.2));
  -webkit-transition: 100ms;
  transition: 100ms;
}

.social__icon:active {
  top: 4px;
  -webkit-transition: 100ms;
  transition: 100ms;
}

.social__icon:active + .social--shadow {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.2));
  -webkit-transition: 100ms;
  transition: 100ms;
}

.social--shadow {
  stroke: #150F15;
  stroke-width: 2.2;
  stroke-miterlimit: 10;
  -webkit-filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.2));
  height: 40px;
  position: absolute;
  display: table;
  z-index: 2;
  left: 0;
  top: 4px;
}

/* Navigation Buttons */
.btn__border, .btn__center {
  border: 1px solid #150F15;
  padding: 2px;
}

.btn__border {
  border-radius: 13px;
  top: 0;
  left: 0;
  width: 54px;
  height: 54px;
  outline: none;
  display: table;
  cursor: pointer;
  position: relative;
}

.btn__border:hover {
  top: 2px;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

.btn__border:hover + .btn__shadow {
  -webkit-box-shadow: 0px 3px 0px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 0px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: 80ms;
  transition: 80ms;
}

.btn__border:active {
  top: 6px;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

.btn__border:active + .btn__shadow {
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
  -webkit-transition: 80ms;
  transition: 80ms;
}

.btn__center {
  background-color: white;
  border-radius: 10px;
  width: 42px;
  height: 42px;
  position: relative;
}

.btn__shadow {
  border: 1px solid #150F15;
  border-radius: 13px;
  position: absolute;
  top: 6px;
  width: 54px;
  height: 54px;
  z-index: -1;
  outline: none;
  display: table;
  -webkit-box-shadow: 0px 4px 0px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 0px 2px rgba(0, 0, 0, 0.2);
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .btn__shadow {
    top: 6px;
  }
}

.dot {
  border: 1px solid #150F15;
  display: inline-block;
  border-radius: 100%;
  background-color: #b8b8b8;
  padding: 1px;
  position: absolute;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
}

.top {
  top: 3px;
}

.bottom {
  bottom: 3px;
}

.left {
  left: 3px;
}

.right {
  right: 3px;
}

.middle {
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}

.story {
  display: block;
  margin: 5px 6px 6px 5px;
  fill: #FFFC31;
  stroke: #150F15;
  stroke-width: 4px;
}

.story--circle {
  fill: #f1f1f1;
}

.photo {
  display: block;
  margin: 4px 4px 6px 4px;
  fill: #272727;
  stroke: #150F15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.photo--circle, .photo--line {
  fill: #f1f1f1;
}

.photo--button {
  fill: #474747;
  stroke-width: 4px;
}

.video {
  display: block;
  margin: 4px 5px 6px 5px;
  fill: #F94654;
  stroke: #150F15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.video--top {
  fill: none;
}

.video--play {
  fill: #FFFFFF;
}

.video--line {
  stroke: #150F15;
}

.design {
  display: block;
  margin: 4px 5px 5px 5px;
  stroke: #150F15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.design--ruler {
  fill: #F94654;
}

.design--line {
  fill: none;
}

.design--brush {
  fill: #FF59D8;
}

.design--brush--pen {
  fill: #272727;
}

.design--crayon {
  fill: #FFFC31;
}

.design--crayon--bottom {
  fill: #E0DD00;
}

.design--cup {
  fill: #386A8E;
}

.design--cup--line {
  fill: none;
}

.me {
  display: block;
  margin: 2px 3px 3px 6px;
  width: 30px;
}

h5 {
  margin: 0.7rem 0 0 -1px;
  display: block;
}

.contact__btn {
  display: none;
  grid-area: contact__btn;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .contact__btn {
    display: inline-block;
    position: absolute;
    top: 23px;
    right: calc(54px + 2%);
  }
}

.mail {
  height: 54x;
  width: 54px;
  stroke: #150F15;
  fill: #f1f1f1;
  stroke-width: 2.2;
  stroke-miterlimit: 10;
  cursor: pointer;
  position: absolute;
  top: 0;
}

.mail:hover {
  top: 1px;
}

.mail:hover + .mail--shadow {
  -webkit-filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.2));
  -webkit-transition: 100ms;
  transition: 100ms;
}

.mail:active {
  top: 4px;
}

.mail:active + .mail--shadow {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.2));
  -webkit-transition: 100ms;
  transition: 100ms;
}

.mail--shadow {
  fill: #b8b8b8;
  position: absolute;
  z-index: -1;
  margin-top: 4px;
  -webkit-filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.2));
}

.paper--outer {
  width: 90vw;
  height: 64vh;
  display: inline-block;
  position: relative;
  background: #150F15;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-clip-path: polygon(0 0, 0 21%, 1% 57%, 1% 79%, 0 100%, 48% 98%, 80% 99%, 100% 100%, 99% 26%, 100% 1%, 76% 1%, 42% 1%);
          clip-path: polygon(0 0, 0 21%, 1% 57%, 1% 79%, 0 100%, 48% 98%, 80% 99%, 100% 100%, 99% 26%, 100% 1%, 76% 1%, 42% 1%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .paper--outer {
    width: 90%;
    height: 72vh;
  }
}

.paper--inner {
  position: absolute;
  background: white;
  top: 1px;
  left: 1px;
  width: calc(90vw - 2px);
  height: calc(64vh - 2px);
  -webkit-clip-path: polygon(0 0, 0 21%, 1% 57%, 1% 79%, 0 100%, 48% 98%, 80% 99%, 100% 100%, 99% 26%, 100% 1%, 76% 1%, 42% 1%);
          clip-path: polygon(0 0, 0 21%, 1% 57%, 1% 79%, 0 100%, 48% 98%, 80% 99%, 100% 100%, 99% 26%, 100% 1%, 76% 1%, 42% 1%);
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .paper--inner {
    width: calc(100% - 2px);
    height: calc(72vh - 2px);
  }
}

.paper--text {
  margin: 0 5%;
  padding: 1vw;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .paper--text {
    margin: 2% 5%;
  }
}

.paper--arrow {
  fill: none;
  stroke: #F94654;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 5px;
}

.paper--arrow--size {
  width: calc(20px + 8vw);
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: 1vh;
}

.paper--arrow--size--flip {
  -webkit-transform: scale(-1);
          transform: scale(-1);
  left: 25%;
}

@media only screen and (max-height: 1056px) and (orientation: landscape) {
  .paper--arrow--size {
    width: calc(30px + 8vw);
  }
}

.curtains__back {
  height: calc(100vh + 2px);
  width: calc(50vw - 1px);
  position: fixed;
  top: -1px;
  z-index: 92;
}

.curtains__back--left {
  left: 0;
  -webkit-animation: moveleft 1.8s infinite 1s ease-in-out;
          animation: moveleft 1.8s infinite 1s ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.curtains__back--right {
  right: 0;
  -webkit-animation: moveright 1.8s infinite 1s ease-in-out;
          animation: moveright 1.8s infinite 1s ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.curtains__left, .curtains__right {
  background-color: #F94654;
  height: calc(100vh + 2px);
  width: 17vw;
  position: absolute;
  top: -20px;
  z-index: 93;
}

.curtains__left--one, .curtains__right--one {
  left: -1%;
  border-right: 1px solid #150F15;
  -webkit-box-shadow: 4px 0px 0px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 0px 0px 0px rgba(0, 0, 0, 0.2);
}

.curtains__left--two, .curtains__right--two {
  left: 33%;
  border-right: 1px solid #150F15;
  -webkit-animation: curtains__lefttwo 1.5s infinite 1s ease-in-out;
          animation: curtains__lefttwo 1.5s infinite 1s ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-box-shadow: 4px 0px 0px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 0px 0px 0px rgba(0, 0, 0, 0.2);
}

.curtains__left--three, .curtains__right--three {
  left: 66%;
  border-right: 1px solid #150F15;
  -webkit-animation: curtains__leftone 1.5s infinite 1s ease-in-out;
          animation: curtains__leftone 1.5s infinite 1s ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-box-shadow: 4px 0px 0px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 0px 0px 0px rgba(0, 0, 0, 0.2);
}

.curtains__left--four, .curtains__right--four {
  right: -1%;
  border-left: 1px solid #150F15;
  -webkit-box-shadow: -4px 0px 0px 0px rgba(0, 0, 0, 0.2);
          box-shadow: -4px 0px 0px 0px rgba(0, 0, 0, 0.2);
}

.curtains__left--five, .curtains__right--five {
  right: 33%;
  border-left: 1px solid #150F15;
  -webkit-box-shadow: -4px 0px 0px 0px rgba(0, 0, 0, 0.2);
          box-shadow: -4px 0px 0px 0px rgba(0, 0, 0, 0.2);
  -webkit-animation: curtains__righttwo 1.5s infinite 1s ease-in-out;
          animation: curtains__righttwo 1.5s infinite 1s ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.curtains__left--six, .curtains__right--six {
  right: 66%;
  border-left: 1px solid #150F15;
  -webkit-box-shadow: -4px 0px 0px 0px rgba(0, 0, 0, 0.2);
          box-shadow: -4px 0px 0px 0px rgba(0, 0, 0, 0.2);
  -webkit-animation: curtains__rightone 1.5s infinite 1s ease-in-out;
          animation: curtains__rightone 1.5s infinite 1s ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.curtains__shadow {
  background-color: #A3363F;
  height: calc(100vh + 2px);
  position: absolute;
  display: inline-block;
  top: -1px;
  z-index: 94;
}

.curtains__shadow--left--one {
  width: 2vw;
  left: -3px;
}

.curtains__shadow--left--two {
  width: 2.8vw;
  left: 30%;
}

.curtains__shadow--left--three {
  width: 2.2vw;
  right: 0%;
}

.curtains__shadow--left--four {
  width: 3vw;
  left: 24%;
}

.curtains__shadow--left--five {
  width: 2.4vw;
  left: 62%;
}

.curtains__shadow--left--six {
  width: 1.8vw;
  right: 2%;
}

.curtains__shadow--left--seven {
  width: 2vw;
  left: 30%;
}

.curtains__shadow--left--eight {
  width: 3vw;
  right: 20%;
}

.curtains__shadow--right--one {
  width: 2vw;
  right: -3px;
}

.curtains__shadow--right--two {
  width: 2.8vw;
  right: 29%;
}

.curtains__shadow--right--three {
  width: 2.2vw;
  left: 1%;
}

.curtains__shadow--right--four {
  width: 3vw;
  right: 23%;
}

.curtains__shadow--right--five {
  width: 2.4vw;
  right: 63%;
}

.curtains__shadow--right--six {
  width: 1.8vw;
  right: 2.5%;
}

.curtains__shadow--right--seven {
  width: 2vw;
  right: 31%;
}

.curtains__shadow--right--eight {
  width: 3vw;
  left: 19%;
}

.curtains__line {
  background-color: #150F15;
  width: 1px;
  position: absolute;
  z-index: 94;
}

.curtains__line--left--one {
  height: 62vh;
  top: 3%;
  left: 34%;
}

.curtains__line--left--two {
  height: 14vh;
  top: 78%;
  left: 34%;
}

.curtains__line--left--three {
  height: 26vh;
  top: 8%;
  left: 58%;
}

.curtains__line--left--four {
  height: 17vh;
  top: 63%;
  left: 58%;
}

.curtains__line--left--five {
  height: 8vh;
  top: 87%;
  left: 58%;
}

.curtains__line--left--six {
  height: 40vh;
  top: 4%;
  right: 6%;
}

.curtains__line--left--seven {
  height: 30vh;
  top: 54%;
  right: 6%;
}

.curtains__line--left--eight {
  height: 87vh;
  top: 0%;
  left: 14%;
}

.curtains__line--left--nine {
  height: 16vh;
  top: 6%;
  left: 34%;
}

.curtains__line--left--ten {
  height: 19vh;
  top: 48%;
  left: 34%;
}

.curtains__line--left--elleven {
  height: 10vh;
  top: 84%;
  left: 34%;
}

.curtains__line--left--twelve {
  height: 38vh;
  top: 3%;
  left: 65%;
}

.curtains__line--left--thirteen {
  height: 26vh;
  top: 58%;
  left: 65%;
}

.curtains__line--left--fourteen {
  height: 86vh;
  top: 8%;
  left: 8%;
}

.curtains__line--left--fifthteen {
  height: 32vh;
  top: 3%;
  left: 32%;
}

.curtains__line--left--sixteen {
  height: 10vh;
  top: 68%;
  left: 32%;
}

.curtains__line--left--seventeen {
  height: 24vh;
  top: 40%;
  left: 68%;
}

.curtains__line--left--eightteen {
  height: 26vh;
  top: 0%;
  left: 88%;
}

.curtains__line--left--nineteen {
  height: 20vh;
  top: 82%;
  left: 88%;
}

.curtains__line--right--one {
  height: 60vh;
  top: 2%;
  right: 4%;
}

.curtains__line--right--two {
  height: 10vh;
  top: 80%;
  right: 4%;
}

.curtains__line--right--three {
  height: 27vh;
  top: 8%;
  right: 38%;
}

.curtains__line--right--four {
  height: 16vh;
  top: 64%;
  right: 38%;
}

.curtains__line--right--five {
  height: 8vh;
  top: 84%;
  right: 58%;
}

.curtains__line--right--six {
  height: 40vh;
  top: 4%;
  left: 10%;
}

.curtains__line--right--seven {
  height: 32vh;
  top: 54%;
  left: 10%;
}

.curtains__line--right--eight {
  height: 87vh;
  top: 8%;
  right: 18%;
}

.curtains__line--right--nine {
  height: 16vh;
  top: 0%;
  right: 50%;
}

.curtains__line--right--ten {
  height: 19vh;
  top: 48%;
  right: 34%;
}

.curtains__line--right--elleven {
  height: 10vh;
  top: 80%;
  right: 50%;
}

.curtains__line--right--twelve {
  height: 39vh;
  top: 3%;
  right: 80%;
}

.curtains__line--right--thirteen {
  height: 23vh;
  top: 60%;
  right: 80%;
}

.curtains__line--right--fourteen {
  height: 86vh;
  top: 0%;
  right: 10%;
}

.curtains__line--right--fifthteen {
  height: 32vh;
  top: 3%;
  right: 36%;
}

.curtains__line--right--sixteen {
  height: 10vh;
  top: 68%;
  right: 36%;
}

.curtains__line--right--seventeen {
  height: 24vh;
  top: 50%;
  right: 68%;
}

.curtains__line--right--eightteen {
  height: 26vh;
  top: 12%;
  right: 83%;
}

.curtains__line--right--nineteen {
  height: 20vh;
  top: 86%;
  right: 68%;
}

@-webkit-keyframes moveleft {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
}

@keyframes moveleft {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
}

@-webkit-keyframes moveright {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(110%);
            transform: translateX(110%);
  }
}

@keyframes moveright {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(110%);
            transform: translateX(110%);
  }
}

@-webkit-keyframes curtains__leftone {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-0.5deg);
            transform: rotate(-0.5deg);
  }
  30% {
    left: 71%;
  }
  70% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
    left: 75%;
  }
  100% {
    -webkit-transform: rotate(-0.5deg);
            transform: rotate(-0.5deg);
    left: 70%;
  }
}

@keyframes curtains__leftone {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-0.5deg);
            transform: rotate(-0.5deg);
  }
  30% {
    left: 71%;
  }
  70% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
    left: 75%;
  }
  100% {
    -webkit-transform: rotate(-0.5deg);
            transform: rotate(-0.5deg);
    left: 70%;
  }
}

@-webkit-keyframes curtains__lefttwo {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-0.2deg);
            transform: rotate(-0.2deg);
  }
  30% {
    left: 35%;
  }
  100% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
    left: 36%;
  }
}

@keyframes curtains__lefttwo {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-0.2deg);
            transform: rotate(-0.2deg);
  }
  30% {
    left: 35%;
  }
  100% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
    left: 36%;
  }
}

@-webkit-keyframes curtains__rightone {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(0.5deg);
            transform: rotate(0.5deg);
  }
  30% {
    right: 71%;
  }
  70% {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
    right: 75%;
  }
  100% {
    -webkit-transform: rotate(0.5deg);
            transform: rotate(0.5deg);
    right: 70%;
  }
}

@keyframes curtains__rightone {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(0.5deg);
            transform: rotate(0.5deg);
  }
  30% {
    right: 71%;
  }
  70% {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
    right: 75%;
  }
  100% {
    -webkit-transform: rotate(0.5deg);
            transform: rotate(0.5deg);
    right: 70%;
  }
}

@-webkit-keyframes curtains__righttwo {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(0.2deg);
            transform: rotate(0.2deg);
  }
  30% {
    right: 35%;
  }
  100% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
    right: 36%;
  }
}

@keyframes curtains__righttwo {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(0.2deg);
            transform: rotate(0.2deg);
  }
  30% {
    right: 35%;
  }
  100% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
    right: 36%;
  }
}

@-webkit-keyframes moveinleft {
  0% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes moveinleft {
  0% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@-webkit-keyframes moveinright {
  0% {
    -webkit-transform: translateX(110%);
            transform: translateX(110%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes moveinright {
  0% {
    -webkit-transform: translateX(110%);
            transform: translateX(110%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

a:hover + .curtains__back--left {
  -webkit-animation: moveinleft infinite 1s ease-in-out;
          animation: moveinleft infinite 1s ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
/*# sourceMappingURL=app.css.map */