@media screen and (max-width: 500px){
.progress {
    width: 200px;
    height: 30px;
    margin: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}
}
.progress {
    display: block;
    width: 200px;
    height: 30px;
    margin: auto;
    margin-top: 35px;
    margin-bottom: 35px;
    border-radius: 20px;
    background: #ffd197;
    z-index: 10;
    box-shadow: 5px 5px 5px #5e67e3, 5px -5px 5px #5e67e3, -5px 0px 5px #5e67e3;
}

.bubbles {
    transition-duration: 2s;
    background-color: #beffc2;
    background-image: url(data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23e6afff' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E);
}
.shadow {
    box-shadow: 0px 45px 50px rgb(0 0 0 / 25%);
}
.bar {
    border-radius: 20px;
    width: 1%;
    height: 100%;
    transition: width;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.36,.55,.63,.48);
}


.rotation {text-align: center;}
.rotation .play-spin {
	width: 100%;
	position: relative;
	margin: 0 auto;
}
.rotation .play-spin .ani-zoom {
	position: absolute;
	display: block;
	width: 110px;
	z-index: 5;
	top: calc(50% - 70px);
	left: calc(50% - 55px);
}  
@media only screen and (max-width: 400px) {
	.rotation .play-spin .ani-zoom img {
	width: 50%!important;
	padding-top:60%
}
}

@media only screen and (max-width: 800px) {
	.rotation .play-spin .ani-zoom img {
	width: 50%!important;
	padding-top:60%
}
}
.rotation .play-spin .ani-zoom img {
	width: 100%;
}
.rotation .num-play span {
	font-size: 26px;
	font-family: RobotoBold;
	color: #ffc800;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  min-width: 30%;
  max-width: 350px;
  margin: 30px auto;
  position: relative;
  background-color: #fefefe;
  padding: 0;
  border: 1px solid #888;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  background: #f7644d;
  padding: 5px 10px 5px 10px;
  border-radius: 11px;
  color: white;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 9px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 7px 16px;
  background-color: #5cb85c;
  color: white;
}