/* - - - MUG: */
#mug {
   width: 90px;
   height: 120px;
   bottom: 50px;
   left: 20%;
   z-index: 4000;

   transform-style: preserve-3d;
   transform: rotateX(-35deg);
}

#mug:hover {
   cursor: pointer;
}

/* - - - MUG Cylinder : */
#frames {
   width: 30px;
   transform-style: preserve-3d;
   transform: rotateX(25deg) rotateY(30deg) rotateZ(0deg) translate3d(0px, -140px, 0px);
}

.strip {
   transform-style: preserve-3d;
}

.strip div {
   position: absolute;
   z-index: 50001;
   border: none;
   height: 90px;
   width: 10px;
   opacity: 1;
   background-color: yellow;
   border-top: 2px solid rgba(0, 0, 0, 0.09);
}

.mugBG01 {
   background: url('images/mug_image.jpg');
}

.mugBG02 {
   background: url('images/mug_image_02.jpg');
}

.mugBG03 {
   background: url('images/mug_image_03.jpg');
}

.strip div:after {
   content: '';
   position: absolute;
   width: 10px;
   bottom: -5px;
   box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}

#tea {
   width: 50px;
   height: 50px;
   border-radius: 25px;
   background-color: rgb(111, 78, 55);
   top: -19px;
   left: -21px;
   transform: rotateX(85deg) rotateY(0deg) rotateZ(0deg);
}

.teaAnimation {
   animation: teaMUG 20s infinite linear;
   animation-play-state: paused;
}

.mugAnimation {
   animation: spinMUG 20s infinite linear;
   animation-play-state: paused;
}

@keyframes teaMUG {
   0% {
      left: -21px;
   }

   10% {
      left: -18px;
   }

   40% {
      left: 0px;
   }

   75% {
      left: 0px;
   }

   100% {
      left: -21px;
   }
}

@-webkit-keyframes teaMUG {
   0% {
      left: -21px;
   }

   10% {
      left: -18px;
   }

   40% {
      left: 0px;
   }

   75% {
      left: 0px;
   }

   100% {
      left: -21px;
   }
}

.strip .mg01 {
   background-position: 250px;
   transform: rotateY(0deg) translateZ(36px);
}

.strip .mg02 {
   background-position: 240px;
   transform: rotateY(15deg) translateZ(36px);
}

.strip .mg03 {
   background-position: 230px;
   transform: rotateY(30deg) translateZ(36px);
}

.strip .mg04 {
   background-position: 220px;
   transform: rotateY(45deg) translateZ(36px);
}

.strip .mg05 {
   background-position: 210px;
   transform: rotateY(60deg) translateZ(36px);
}

.strip .mg06 {
   background-position: 200px;
   transform: rotateY(75deg) translateZ(36px);
}

.strip .mg07 {
   background-position: 190px;
   transform: rotateY(90deg) translateZ(36px);
}

.strip .mg08 {
   background-position: 180px;
   transform: rotateY(105deg) translateZ(36px);
}

.strip .mg09 {
   background-position: 170px;
   transform: rotateY(120deg) translateZ(36px);
}

.strip .mg10 {
   background-position: 160px;
   transform: rotateY(135deg) translateZ(36px);
}

.strip .mg11 {
   background-position: 150px;
   transform: rotateY(150deg) translateZ(36px);
}

.strip .mg12 {
   background-position: 140px;
   transform: rotateY(165deg) translateZ(36px);
}

.strip .mg13 {
   background-position: 130px;
   transform: rotateY(180deg) translateZ(36px);
}

.strip .mg14 {
   background-position: 120px;
   transform: rotateY(195deg) translateZ(36px);
}

.strip .mg15 {
   background-position: 110px;
   transform: rotateY(210deg) translateZ(36px);
}

.strip .mg16 {
   background-position: 100px;
   transform: rotateY(225deg) translateZ(36px);
}

.strip .mg17 {
   background-position: 90px;
   transform: rotateY(240deg) translateZ(36px);
}

.strip .mg18 {
   background-position: 80px;
   transform: rotateY(255deg) translateZ(36px);
}

.strip .mg19 {
   background-position: 70px;
   transform: rotateY(270deg) translateZ(36px);
}

.strip .mg20 {
   background-position: 60px;
   transform: rotateY(285deg) translateZ(36px);
}

.strip .mg21 {
   background-position: 50px;
   transform: rotateY(300deg) translateZ(36px);
}

.strip .mg22 {
   background-position: 40px;
   transform: rotateY(315deg) translateZ(36px);
}

.strip .mg23 {
   background-position: 30px;
   transform: rotateY(330deg) translateZ(36px);
}

.strip .mg24 {
   background-position: 20px;
   transform: rotateY(345deg) translateZ(36px);
}

.strip .mg25 {
   background-position: 10px;
   transform: rotateY(360deg) translateZ(36px);
}

@keyframes spinMUG {
   from {
      transform: rotateY(0deg);
   }
   to {
      transform: rotateY(-360deg);
   }
}

/* - - - Vapour Animation: */
.vapour {
   position: relative;
   display: flex;
   z-index: 1;
   padding: 0 20px;
   justify-content: center;
}

.vapour span {
   position: relative;
   bottom: 50px;
   left: -50px;
   display: block;
   margin: 0 2px 50px;
   min-width: 5px;
   height: 120px;
   background: #fff;
   border-radius: 50%;
   animation: animateVapor 5s linear infinite;
   opacity: 0.02;
   filter: blur(10px);
   animation-delay: calc(var(--v) * -0.5s);
}

@keyframes animateVapor {
   0% {
      transform: translateY(0) scaleX(1);
      opacity: 0.1;
   }
   15% {
      opacity: 1;
   }
   50% {
      transform: translateY(-150px) scaleX(5);
   }
   95% {
      opacity: 0.1;
   }
   100% {
      transform: translateY(-300px) scaleX(10);
   }
}

@-webkit-keyframes animateVapor {
   0% {
      transform: translateY(0) scaleX(1);
      opacity: 0.1;
   }
   15% {
      opacity: 1;
   }
   50% {
      transform: translateY(-150px) scaleX(5);
   }
   95% {
      opacity: 0.1;
   }
   100% {
      transform: translateY(-300px) scaleX(10);
   }
}

/* - - - Umbrella Animation: */

#umbrella img {
   position: relative;
   width: 100%;
   margin: 0 auto;
   z-index: inherit;
}

#umbrella {
   left: -90px;
   top: -800px;
   z-index: 7000;
   width: 100px;
   transform: translateZ(50px);
   -webkit-transition: all 1.4s cubic-bezier(0.39, 0.575, 0.565, 1);
   transition: all 1.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}