body{
  background-color: white;
  margin:0;
}

@font-face {
  font-family: 'GalanoGrotesqueAlt-Black';
  src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
  font-weight: normal;
  font-style: normal;
}

#container{
  position: absolute;
  width:300px;
  height:600px;
  overflow: hidden;
  border: 1px solid #c2c2c2;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: #f1df01;
}

.images{
  position: absolute;
  top:100px;
  left:0px;
  width:336px;
  height:280px;
}

.clickArea{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  cursor:pointer;
}


.eye{
  position: absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 21px -1px rgba(0,0,0,0.29);
  -moz-box-shadow: 0px 0px 21px -1px rgba(0,0,0,0.29);
  box-shadow: 0px 0px 21px -1px rgba(0,0,0,0.29);
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}


.eyeShadow{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border-radius:50%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,0+26,0.14+93,0.27+100 */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI2JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkzJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjE0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yNyIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.14) 93%, rgba(0,0,0,0.27) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0) 26%,rgba(0,0,0,0.14) 93%,rgba(0,0,0,0.27) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0) 26%,rgba(0,0,0,0.14) 93%,rgba(0,0,0,0.27) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#45000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */


}

.eyeIris{
  position: absolute;
  top:35px;
  left:35px;
  border-radius:50%;
  width:50px;
  height:50px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00aae0+0,008bd6+100 */
  background: rgb(0,170,224); /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGFhZTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA4YmQ2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,170,224,1) 0%, rgba(0,139,214,1) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,170,224,1) 0%,rgba(0,139,214,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center,  rgba(0,170,224,1) 0%,rgba(0,139,214,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aae0', endColorstr='#008bd6',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

}

.eyePupil{
  position: absolute;
  top:48px;
  left:48px;
  width:24px;
  height:24px;
  border-radius:50%;
  background-color: #000;
}

#eye1{
  top:180px;
  left:108px;
}


#eye2{
  top:180px;
  left:108px;
}

.spots{
  position: absolute;
  border-radius:50%;
  background-color: #5b7a2e
}

.spot1{
  top:60px;
  left:160px;
  width:40px;
  height: 25px;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari */
  transform: rotate(20deg);
}

.spot2{
  top:30px;
  left:160px;
  width:20px;
  height: 15px;
  -ms-transform: rotate(40deg); /* IE 9 */
  -webkit-transform: rotate(40deg); /* Safari */
  transform: rotate(40deg);
}

.spot3{
  top:460px;
  right:60px;
  width:40px;
  height: 25px;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari */
  transform: rotate(20deg);
}

.spot4{
  top:420px;
  right:60px;
  width:20px;
  height: 15px;
  -ms-transform: rotate(40deg); /* IE 9 */
  -webkit-transform: rotate(40deg); /* Safari */
  transform: rotate(40deg);
}

.spot5{
  top:560px;
  left:-10px;
  width:40px;
  height: 25px;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari */
  transform: rotate(20deg);
}

.spot6{
  top:530px;
  left:20px;
  width:20px;
  height: 15px;
  -ms-transform: rotate(10deg); /* IE 9 */
  -webkit-transform: rotate(10deg); /* Safari */
  transform: rotate(10deg);
}

.textWrapper{
  position: absolute;
  top:35px;
  left:35px;
  font-family: 'GalanoGrotesqueAlt-Black';
  color:#562777;
  font-size: 40px;
  line-height: 36px;
}

.textWrapper2{
  position: absolute;
  top:65px;
  left:65px;
  font-family: 'GalanoGrotesqueAlt-Black';
  color:#562777;
  font-size: 30px;
  line-height: 26px;
  text-align: center;
}

.text{

}

.tongGirlWrapper{
  position: absolute;
  top:140px;
  left:60px;
  width:272px;
  height: 137px;
}

.tong{
  position: absolute;
  top:100px;
  left:0px;
  width:272px;
  height: 137px;
}

.girl{
  position: absolute;
  top:100px;
  left:0px;
  width:272px;
  height: 137px;

}

.girlBody{
  position: absolute;
  top:0px;
  left:0px;
  width:272px;
  height: 137px;

}

.girlHead{
  position: absolute;
  top:0px;
  left:0px;
  width:272px;
  height: 137px;

}

.footLeft{
  position: absolute;
  top:0px;
  left:0px;
  width:272px;
  height: 137px;

}

.footRight{
  position: absolute;
  top:0px;
  left:0px;
  width:272px;
  height: 137px;

}

.mond{
  position: absolute;
  top:100px;
  left:0px;
  width:272px;
  height: 137px;

}

/*.tong img{
  position: absolute;
  left:0px;
}

.girl img{
  position: absolute;
  left:-122px;
  }*/

  .nose{
    position: absolute;
    top:100px;
    left:0px;
  }
  .branding{
    position: absolute;
    top: 504px;
    left: 0px;
  }

  #eindframe{
    top:140px;
  }