.chalice {
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 45px;
  height: 60px;
  border: solid 2px rgba(255, 255, 255, 0.2);
  border-top-width: 0px;
  border-radius: 20% 20% 50% 50% / 50% 50% 40% 40%;
}
.chalice:before {
  content: '';
  position: absolute;
  bottom: -43px;
  left: 6px;
  right: 0px;
  width: 2px;
  height: 43px;
  margin: auto;
  background-color: #dcdcdc;
}
.chalice:after {
  content: '';
  position: absolute;
  bottom: -46px;
  left: 7px;
  right: 0px;
  width: 30px;
  height: 3px;
  margin: auto;
  border-radius: 50% 50% 0% 0% / 50% 50% 50% 50%;
  background-color: #dcdcdc;
}

.liquid {
  position: sticky;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 45px;
  height: 60px;
  border-top-width: 0px;
  border-radius: 20% 20% 50% 50% / 50% 50% 40% 40%;
  background-color: #dcdcdc;
  box-sizing: border-box;
  overflow: hidden;
}
.liquid.red-wine:before {
  background-color: #3C191D;
}
.liquid.white-wine:before {
  background-color: #A1A265;
}
.liquid:before {
  content: '';
  width: 400%;
  margin: auto;
  position: absolute;
  bottom: -10px;
  left: -150%;
  right: 0;
  transform-origin: 50%;
  animation: fill 10s infinite ease-in-out;
}
.liquid:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 5px;
  left: -4px;
  margin: auto;
  width: 30px;
  height: 45px;
  border: solid 6px rgba(255, 255, 255, 0.3);
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-radius: 20% 20% 50% 50% / 50% 50% 40% 40%;
  box-sizing: border-box;
  transform: rotateZ(-3deg);
}

@keyframes fill {
  0% {
    transform: rotateZ(-25deg);
    height: 10px;
  }
  2% {
    transform: rotateZ(25deg);
  }
  4% {
    transform: rotateZ(-10deg);
  }
  6% {
    transform: rotateZ(10deg);
  }
  8% {
    transform: rotateZ(-8deg);
  }
  10% {
    transform: rotateZ(8deg);
  }
  12% {
    transform: rotateZ(-6deg);
  }
  14% {
    transform: rotateZ(6deg);
  }
  16% {
    transform: rotateZ(-4deg);
  }
  18% {
    transform: rotateZ(4deg);
  }
  20% {
    transform: rotateZ(-2deg);
  }
  22% {
    transform: rotateZ(2deg);
  }
  24% {
    transform: rotateZ(0deg);
    height: 55px;
  }
  40% {
    height: 55px;
  }
  90% {
    height: 10px;
  }
  100% {
    height: 10px;
  }
}

.Cheers {
  text-align: center;
  position: absolute;
  bottom: -85px;
  left: 20px;
  color: #e2e2e2;
  right: 0;
  margin: auto;
}











@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

.textH1 {
    text-align: center;
    color: #DDD;
    font-size: 3em;
    font-family: 'Open Sans Condensed', sans-serif;
}

#plate {
    position: relative;
    margin: 0 auto;
    height: 250px;
    width: 250px;
    border-bottom: solid 5px #B4B4B4;
    border-radius: 0 0 10px 10px / 5px;
}
#plate:after {
    position: absolute;
    bottom: -10px;
    content: " ";
    margin: 0 25px;
    width: 200px;
    height: 5px;
    background-color: #DDD;
    border-radius: 0 0 5px 5px;
}

#bottle {
    position: absolute;
    width: 50px;
    bottom: 0;
    left: 100px;
    z-index: 10;
}
#bottle .cork {
    position: relative;
    margin: 0 auto;
    background-color: #8E1B1C;
    width: 20px;
    height: 40px;
    border-radius: 2px 2px 0 0;
    border-bottom: solid 3px #FBC85F;
}
#bottle .cork:before {
    position: absolute;
    top: 5px;
    left: -2px;
    display: block;
    content: " ";
    background-color: #8E1B10;
    border-top: solid 1px #9A2A1F;
    border-bottom: solid 1px #9A2A1F;
    
    width: 24px;
    height: 10px;
    border-radius: 2px;
}
#bottle .neck {
    margin: 0 auto;
    background-color: #295169e6;
    width: 20px;
    height: 10px;
}
#bottle .body {
    position: relative;
    margin: 0 auto;
    padding-top: 30px;
    background-color: #295169e6;
    width: 50px;
    height: 110px;
    border-radius: 20px 20px 5px 5px;  
}
/*
  #bottle .body:before {
      position: absolute;
      display: block;
      content: " ";
      bottom: 0;
      width: 100%;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 0px 0px 5px 5px; 
  }
*/
#bottle .label {
    position: relative;
    background-color: #F2EAB9;
    height: 30px;
    border: solid 2px #CFC89B;
    z-index: 25;
    animation: spinning-label 3s linear infinite;
}
#bottle .label-shadow {
    position: absolute;
    height: 34px;
    background-color: rgba(0, 0, 0, 0.3);
    top: 30px;
    z-index: 20;
    animation: spinning-shadow 3s linear infinite;
}

@keyframes spinning-label {
    0% {
        margin-left: 0%;
        border-left-width: 0px;
        margin-right: 100%;
        border-right-width: 2px;
    }
    49% {
        border-left-width: 0px;
        border-right-width: 2px;
    }
    50% {            
        margin-left: 0%;
        border-left-width: 2px;
        margin-right: 0%;
        border-right-width: 0px;
    }
    98% {
        border-left-width: 2px;            
    }
    99% { 
        margin-left: 100%;
        border-left-width: 0px;
        margin-right: 0%;
        border-right-width: 0px;
    }
    100% {
        margin-left: 0%;
        border-left-width: 0px;
        margin-right: 100%;
        border-right-width: 0px;
    }
}

@keyframes spinning-shadow {
    0% {
        left: 0;
        width: 50px;
        margin-left: 0px;
    }
    50% {     
        left: 0;     
        width: 0px;
        margin-left: 0px;
    }
    51% {
    
        margin-left: 50px;
    }
    100% {
        width: 50px;
        margin-left: 0;
    }
}

#glass {
    position: absolute;
    width: 40px;
    bottom: 0;
    left: 100px;
    
    animation: spinning-glass 3s ease-in-out infinite;
}
@keyframes spinning-glass {
    0% { 
        left: 25px;
        z-index: 20;
    }
    50% {
        left: 185px;
        z-index: 20;
    } 
    51% {
        z-index: 0;                
    }
    100% {            
        left: 25px;
        z-index: 0;
    }
}
#glass .bowl {
    background-color: rgba(190, 190, 190, 0.5);
    padding-top: 10px;
    width: 40px;
    height: 30px;
    border-radius: 5px 5px 20px 20px / 20px;
}  

#glass .bowl .wine {
    background-color: #8E1B1C;
    margin: 0 auto;
    width: 30px;
    height: 25px;
    border-radius: 4px 4px 20px 20px / 20px;
}  
#glass .stem {
    margin: 0 auto;
    background-color: rgba(190, 190, 190, 0.5);
    width: 5px;
    height: 30px;        
}
#glass .foot {
    background-color: rgba(190, 190, 190, 0.5);
    width: 40px;
    height: 5px;
    border-radius: 20px 20px  0 0 / 5px;
}

#cork {
    position: absolute;
    height: 25px;
    width: 15px;
    bottom: 0;
    background-color: #F2EAB9;
    border-top: solid 2px #8E1B1C;
    
    animation: spinning-cork 3s ease-in-out infinite;
}
@keyframes spinning-cork {
  0% { 
      left: 150px;
      z-index: 0;
  }
  50% {
      left: 85px;
      z-index: 0;
  } 
  51% {
      z-index: 20;                
  }
  100% {            
      left: 150px;
      z-index: 20;
  }
}