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

#app {
  // opacity: 0 !important;
  // visibility: hidden;
  z-index: 100;

  &:hover {
    #opacity: 0.5;
  }
}

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

 @media screen and (max-width: 600px) {
      .title {
        left: 10px;
        top: 100px;
        max-width: 90%;
        #padding: 10px 15px;
      }
 }
 
 @media screen and (min-width: 1024px) {
        .title {
        left: 10px;
        top: 100px;
        max-width: 90%;
        }
 }

#app1 {
  // opacity: 0 !important;
  // visibility: hidden;
  z-index: 100;

  &:hover {
    #opacity: 0.5;
  }
}

#app1 {
	
  display: grid;
  #grid-template-columns: 1fr 2fr;
  align-items: center;
  #padding-bottom: 4vmin;
  #height: 90vh;
  width: 100%;
  #background: #ede8e2;
  #color: #3a3535;
  color: white;
}

.title {	
  padding-left: 2em;
  grid-column: 1 / -1;
  grid-row: 1;

  #font-family: "Prata", serif;
  text-transform: uppercase;
  font-size: 2.1vw;
  width: 100%;
  z-index: 2;
  #top: 160px;

  // start

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


.title1 {	
  #padding-left: 2em;
  #grid-column: 1 / -1;
  #grid-row: 1;

  #font-family: "Prata", serif;
  #text-transform: uppercase;
  #font-size: 2.1vw;
  #width: 100%;
  #z-index: 2;
  #top: 160px;
  #display: block;
  
  right: 26px;
  position: absolute;
  bottom: 40px;
  width: 70%;
  
  // start

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

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

@keyframes outer-left {
  from {
    transform: translateX(50%);
  }
  to {
    transform: none;
  }
}

@keyframes inner-left {
  from {
    transform: translateX(20%);
  }
  to {
    transform: none;
  }
}

.cafe,
.mozart {
  #animation: outer-left 1s 1s cubic-bezier(0.5, 0, 0.1, 1) both;
  #// outline: 1px solid red;
}

// [class*='inner'] {
#//   outline: 1px solid blue;
// }

.title-inner {
  display: inline-block;
 #animation: inner-left 1s 0s ease both;
  #background-color: rgba(55, 81, 126, .8);
}

.title-inner1 {
  display: inline-block;
 #animation: inner-left 1s 0s ease both;
  #background-color: rgba(55, 81, 126, .8);
}

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

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

.title {
  #animation: outer-left 1s 1s ease both;
  position: absolute;
}

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

.mozart {
  display: inline-block;
}

.image {
  grid-row: 1;
  grid-column: 2;
  #margin-left: -2rem;
  #opacity: 0.7;
  filter: brightness(82%);

  animation: image-in 1s cubic-bezier(0.5, 0, 0.1, 1) 0s backwards;

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

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

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

    .background-container {
      #position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1;
    }

    .background-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .animated-text {
	  font-family: "Jost", sans-serif;
      position: absolute;
      bottom: 20px;
      right: 20px;
      background-color: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 15px 25px;
      border-radius: 10px;
      #font-size: clamp(1rem, 2vw, 1.5rem);
	  font-size: clamp(0.6rem, 2vw, 1.5rem);
      #animation: fadeInUp 2s ease-out;
	  max-width: 80%;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 600px) {
      .animated-text {
        right: 10px;
        bottom: 10px;
        padding: 10px 15px;
      }
    }