/* == wrapper == */
.oxygen-content{
	width: 550px;
	position: relative;
}





/* ================ glass & small bubbles ================ */
/* == glass == */
#glass{
	width: 230px;
	height: 374px;
	background: url(../images/glass.svg) no-repeat 0 0;
	background-size: contain;
	position: relative;
}


/* == vertical bubbles == */
/* image */
.vertical-bubble{
  width: 18px;
  height: 16px;
  position: absolute;
  top: 290px;
  background: transparent url(../images/water-molecule.svg) no-repeat 0 0;
  background-size: contain;
  padding: 0;
  opacity: 0;
  -webkit-animation: move 6s linear infinite;
}

.kids-body #glass a{
  background: transparent url(../images/water-molecule.svg) no-repeat 0 0;
  background-size: contain;
}

.vertical-bubble:visited,
.kids-body #glass a:visited{
	background: transparent url(../images/water-molecule.svg) no-repeat 0 0;
	background-size: contain;
}

/* animation */
@-webkit-keyframes move {
  20% { opacity: 1; }
  80% { opacity: 1; }
  to { -webkit-transform: translate( 0, -190px ); }
}

/* bubble positions */
.v-bubble-1, .v-bubble-2, .v-bubble-3{ left: 40px; }
.v-bubble-4, .v-bubble-5, .v-bubble-6{ left: 60px; }
.v-bubble-7, .v-bubble-8, .v-bubble-9{ left: 80px; }
.v-bubble-10, .v-bubble-11, .v-bubble-12{ left: 100px; }
.v-bubble-13, .v-bubble-14, .v-bubble-15{ left: 120px; }
.v-bubble-16, .v-bubble-17, .v-bubble-18{ left: 140px; }
.v-bubble-19, .v-bubble-20, .v-bubble-21{ left: 160px; }

/* bubble delays */
.v-bubble-2{ -webkit-animation-delay: 2s; }
.v-bubble-3{ -webkit-animation-delay: 4s; }
.v-bubble-4{ -webkit-animation-delay: 1s; }
.v-bubble-5{ -webkit-animation-delay: 3s; }
.v-bubble-6{ -webkit-animation-delay: 5s; }
/* bubble 7 starts at 0 */
.v-bubble-8{ -webkit-animation-delay: 2s; }
.v-bubble-9{ -webkit-animation-delay: 4s; }
.v-bubble-10{ -webkit-animation-delay: 1s; }
.v-bubble-11{ -webkit-animation-delay: 3s; }
.v-bubble-12{ -webkit-animation-delay: 5s; }
/* bubble 13 starts at 0 */
.v-bubble-14{ -webkit-animation-delay: 2s; }
.v-bubble-15{ -webkit-animation-delay: 4s; }
.v-bubble-16{ -webkit-animation-delay: 1s; }
.v-bubble-17{ -webkit-animation-delay: 3s; }
.v-bubble-18{ -webkit-animation-delay: 5s; }
/* bubble 19 starts at 0 */
.v-bubble-20{ -webkit-animation-delay: 2s; }
.v-bubble-21{ -webkit-animation-delay: 4s; }





/* ================ medium bubbles ================ */
/* == wrapper == */
.rotating-bubble-wrapper{
	height: 330px;
	position: relative;
	background-size: contain;
}

/* == rotating bubbles == */
/* image */
.rotate-bubble{
  width: 35px;
  height: 35px;
  position: absolute;
  /*top: 150px;
  left: 200px;*/
  background: transparent url(../images/water-molecule.svg) no-repeat 0 0;
  background-size: contain;
  padding: 0;
  -webkit-animation: rotate 3s linear infinite;
}

.kids-body .rotate-bubble{
  background: transparent url(../images/water-molecule.svg) no-repeat 0 0;
  background-size: contain;
}

.oxygen-molecule{
  width: 50px;
  height: 45px;
  position: absolute;
  top: 170px;
  left: 370px;
  background: transparent url(../images/dissolved-oxygen.svg) no-repeat 0 0;
  background-size: contain;
  padding: 0;
  -webkit-animation: oxygen 4s infinite;
}

.kids-body .oxygen-molecule{
  background: transparent url(../images/dissolved-oxygen.svg) no-repeat 0 0;
  background-size: contain;
}

/* animation */
@-webkit-keyframes rotate {
  to { -webkit-transform: rotate( 360deg ); }
}

@-webkit-keyframes oxygen {
  
  50% {
  	-webkit-transform: rotate( 360deg );
  	-webkit-transform: scale( 1.4 );
  }
}

/* position */
.r-bubble-1{ left: 60px; top: 30px; }
.r-bubble-2{ left: 35px; top: 60px; }
.r-bubble-3{ left: 85px; top: 70px; }
.r-bubble-4{ left: 5px; top: 105px; }
.r-bubble-5{ left: 65px; top: 110px; }
.r-bubble-6{ left: 20px; top: 150px; }
.r-bubble-7{ left: 75px; top: 155px; }
.r-bubble-8{ left: 10px; top: 195px; }
.r-bubble-9{ left: 50px; top: 225px; }
.r-bubble-10{ left: 80px; top: 195px; }
.r-bubble-11{ left: 5px; top: 250px; }
.r-bubble-12{ left: 80px; top: 255px; }
.r-bubble-13{ left: 130px; top: 75px; }
.r-bubble-14{ left: 110px; top: 110px; }
.r-bubble-15{ left: 120px; top: 165px; }
.r-bubble-16{ left: 125px; top: 220px; }
.r-bubble-17{ left: 115px; top: 265px; }
.r-bubble-18{ left: 145px; top: 35px; }
.r-bubble-19{ left: 185px; top: 45px; }
.r-bubble-20{ left: 170px; top: 80px; }
.r-bubble-21{ left: 150px; top: 125px; }
.r-bubble-22{ left: 185px; top: 150px; }
.r-bubble-23{ left: 165px; top: 175px; }
.r-bubble-24{ left: 200px; top: 205px; }
.r-bubble-25{ left: 160px; top: 240px; }
.r-bubble-26{ left: 195px; top: 245px; }
.r-bubble-27{ left: 220px; top: 15px; }
.r-bubble-28{ left: 230px; top: 60px; }
.r-bubble-29{ left: 215px; top: 110px; }
.r-bubble-30{ left: 235px; top: 140px; }
.r-bubble-31{ left: 260px; top: 5px; }
.r-bubble-32{ left: 275px; top: 65px; }
.r-bubble-33{ left: 270px; top: 115px; }
.r-bubble-34{ left: 260px; top: 180px; }
.r-bubble-35{ left: 250px; top: 240px; }
.r-bubble-36{ left: 310px; top: 15px; }
.r-bubble-37{ left: 320px; top: 55px; }
.r-bubble-38{ left: 310px; top: 110px; }
.r-bubble-39{ left: 290px; top: 150px; }
.r-bubble-40{ left: 335px; top: 155px; }
.r-bubble-41{ left: 305px; top: 200px; }
.r-bubble-42{ left: 315px; top: 245px; }
.r-bubble-43{ left: 360px; top: 20px; }
.r-bubble-44{ left: 375px; top: 70px; }
.r-bubble-45{ left: 355px; top: 110px; }
.r-bubble-46{ left: 350px; top: 210px; }
.r-bubble-47{ left: 400px; top: 40px; }
.r-bubble-48{ left: 420px; top: 0px; }
.r-bubble-49{ left: 410px; top: 100px; }
.r-bubble-50{ left: 400px; top: 140px; }
.r-bubble-51{ left: 385px; top: 240px; }
.r-bubble-52{ left: 445px; top: 40px; }
.r-bubble-53{ left: 420px; top: 175px; }
.r-bubble-54{ left: 440px; top: 215px; }
.r-bubble-55{ left: 465px; top: 80px; }
.r-bubble-56{ left: 470px; top: 150px; }
.r-bubble-57{ left: 475px; top: 180px; }
.r-bubble-58{ left: 480px; top: 240px; }
.r-bubble-59{ left: 495px; top: 10px; }
.r-bubble-60{ left: 500px; top: 50px; }
.r-bubble-61{ left: 505px; top: 105px; }
.r-bubble-62{ left: 510px; top: 165px; }





/* ================ large bubbles ================ */
.water-molecule{
	width: 80%;
	height: 100px;
	background: url(../images/water-molecule.svg) no-repeat 50% 0;
	background-size: contain;
	margin: 0 auto 20px;
}

.dissolved-water-molecule{
	width: 80%;
	height: 100px;
	background: url(../images/dissolved-oxygen.svg) no-repeat 50% 0;
	background-size: contain;
	margin: 0 auto 20px;
}