body {
  background-color: #FFECDB;
  font-family: 'Open Sans Condensed', sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.title {
  text-align: center;
  font-size: 3em;
  line-height: 3em;
  position: absolute;
  top: -2.2em;
  width: 100%;
  letter-spacing: 1px;
}
.title span {
  margin-top: -1px;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.eye-line {
  border: 8px solid #000;
  width: 130px;
  height: 130px;
  border-radius: 50% 10px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #e0f3fa;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFE0F3FA', endColorstr='#FFB6DFFD');
  background-image: -webkit-linear-gradient(left top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
  background-image: -webkit-gradient(linear, left top, right bottom, from(#e0f3fa), color-stop(50%, #d8f0fc), color-stop(51%, #b8e2f6), to(#b6dffd));
  background-image: linear-gradient(to right bottom, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
}

.cc {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #4c4c4c;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF4C4C4C', endColorstr='#FF131313');
  background-image: -webkit-radial-gradient(center, ellipse cover, #4c4c4c 0%, #595959 10%, #666666 25%, #474747 34%, #2c2c2c 38%, #2c2c2c 38%, #000000 44%, #000000 44%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
  background-image: radial-gradient(center, ellipse cover, #4c4c4c 0%, #595959 10%, #666666 25%, #474747 34%, #2c2c2c 38%, #2c2c2c 38%, #000000 44%, #000000 44%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}

.c {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: 0.8;
  position: absolute;
  -webkit-transition: all 1s;
  transition: all 1s;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #3b679e;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF3B679E', endColorstr='#FF7DB9E8');
  background-image: -webkit-radial-gradient(center, ellipse cover, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
  background-image: radial-gradient(center, ellipse cover, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
}

.eye:hover .cc {
  width: 100px;
  height: 100px;
}
.eye:hover .c {
  width: 70px;
  height: 70px;
  opacity: 1;
  background-color: #b7deed;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFB7DEED', endColorstr='#FFB7DEED');
  background-image: -webkit-radial-gradient(center, ellipse cover, #b7deed 0%, #21b4e2 38%, #71ceef 80%, #71ceef 80%, #b7deed 100%);
  background-image: radial-gradient(center, ellipse cover, #b7deed 0%, #21b4e2 38%, #71ceef 80%, #71ceef 80%, #b7deed 100%);
}