@font-face {
    font-family: "Cabin";
    src: url("/fonts/Exo_2/Exo2-VariableFont_wght.ttf");
    font-weight: normal;
    font-style: normal;
}
button, input, optgroup, select, textarea {
    font-family: Cabin;
}
* {
    position: relative;
    box-sizing: border-box;
}

.iframely-embed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: white;
}

#app {
  z-index: 100;
}
/*#app:hover {
  opacity: 0.5;
}*/

#app {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    padding-bottom: 4vmin;
    height: 90vh;
    width: 100%;
    background: #319cd8c9;
    color: #3a3535;
    font-family: Cabin;
}

body {
  display: grid;
  padding: 3vmin;
  background: #e6ded7;
}

#sptitlestaticie {
   text-align:center;
    /*font-family: "Prata", serif;*/
    font-size: 8vw;
    width: 100%;
    z-index: 2;
    color: #f2fbff;
}
#sptitlestatic {
    padding-left: 1em;
    grid-column: 1/-1;
    grid-row: 1;
    /*font-family: "Prata", serif;*/
    font-size: 8vw;
    width: 100%;
    z-index: 2;
    color: #f2fbff;
}
.title {
    padding-left: 1em;
    grid-column: 1/-1;
    grid-row: 1;
    /*font-family: "Prata", serif;*/
    font-size: 8vw;
    width: 100%;
    z-index: 2;
    color: #f2fbff;
}
.title > .title-inner {
  display: inline-block;
}

@-webkit-keyframes text-clip {
  from {
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes text-clip {
  from {
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@-webkit-keyframes outer-left {
  from {
    transform: translateX(50%);
  }
  to {
    transform: none;
  }
}
@keyframes outer-left {
  from {
    transform: translateX(50%);
  }
  to {
    transform: none;
  }
}
@-webkit-keyframes inner-left {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: none;
  }
}
@keyframes inner-left {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: none;
  }
}
.cafe,
.mozart {
  -webkit-animation: outer-left 0.5s 0.5s cubic-bezi.5, 0, 0.1, 1) both;
}

.title-inner {
    display: inline-block;
    -webkit-animation: inner-left 0.7s 0.7s ease both;
    animation: inner-left 0.7s 0.7s ease both;
}

.cafe-inner {
    display: inline-block;
    -webkit-animation: inner-left 0.7s 0.7s ease both, text-clip 0.5s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
    animation: inner-left 0.7s 0.7s ease both, text-clip 0.5s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.mozart-inner {
    -webkit-animation: text-clip 0.7s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
    animation: text-clip 0.7s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.title {
    -webkit-animation: outer-left 0.7s 0.7s ease both;
    animation: outer-left 0.7s 0.7s ease both;
}

.cafe > .cafe-inner {
  display: inline-block;
}

.mozart {
  display: inline-block;
}

.image {
    grid-row: 1;
    grid-column: 2;
    margin-left: -2rem;
    /*opacity: 0.7;*/
    -webkit-animation: image-in 1s cubic-bezier(0.5, 0, 0.1, 1) 1s backwards;
    animation: image-in 1s cubic-bezier(0.5, 0, 0.1, 1) 1s backwards;
}
@-webkit-keyframes image-in {
  from {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: 1, 1) 1s backwards;
}
@-webkit-keyframes image-in {
  from {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0;
}
@-webkit-keyframes image-in {
  from {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes image-in {
  from {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.image img {
    display: block;
    width: 125px;
    height: auto;
}

/*body:active * {
  -webkit-animation: none !important;
          animation: none !important;
}*/