body, body * {
  vertical-align: baseline;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 9pt;
/*  color: #333;*/
}

#scene {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 150px; /* the lower this is, the fancier it gets */
}

#emitter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 20%;
}

#flare1 {
  position: absolute;
  width: 25px;
  height: 22px;
left: 200px;
    top: 139px;
}

#flare2 {
position: absolute;
    width: 21px;
    height: 20px;
left: 103px;
    top: 147px;
}

#packshot {
  position: absolute;
  left: -20px;
}

#main-container{
  position: absolute;
  width: 336px;
  height: 280px;
  overflow: hidden;
  border: 1px solid black;
  box-sizing: border-box;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  cursor: pointer;
}

.background_1 {
/* IE10+ */ 
background-image: -ms-radial-gradient(center bottom, ellipse farthest-side, #F07E26 0%, #230200 140%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center bottom, ellipse farthest-side, #F07E26 0%, #230200 140%);

/* Opera */ 
background-image: -o-radial-gradient(center bottom, ellipse farthest-side, #F07E26 0%, #230200 140%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 258, color-stop(0, #F07E26), color-stop(140, #230200));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center bottom, ellipse farthest-side, #F07E26 0%, #230200 140%);

/* W3C Markup */ 
background-image: radial-gradient(ellipse farthest-side at center bottom, #F07E26 0%, #230200 140%);  
}

.background_2 {
/* IE10+ */ 
background-image: -ms-radial-gradient(center bottom, ellipse farthest-side, #E87DAF 0%, #ae0f65 140%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center bottom, ellipse farthest-side, #E87DAF 0%, #ae0f65 140%);

/* Opera */ 
background-image: -o-radial-gradient(center bottom, ellipse farthest-side, #E87DAF 0%, #ae0f65 140%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 258, color-stop(0, #E87DAF), color-stop(140, #ae0f65));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center bottom, ellipse farthest-side, #E87DAF 0%, #ae0f65 140%);

/* W3C Markup */ 
background-image: radial-gradient(ellipse farthest-side at center bottom, #E87DAF 0%, #ae0f65 140%);
}

.background_3 {
/* IE10+ */ 
background-image: -ms-radial-gradient(center bottom, ellipse farthest-side, #ffe56b 0%, #F7A600 140%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center bottom, ellipse farthest-side, #ffe56b 0%, #F7A600 140%);

/* Opera */ 
background-image: -o-radial-gradient(center bottom, ellipse farthest-side, #ffe56b 0%, #F7A600 140%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 258, color-stop(0, #ffe56b), color-stop(140, #F7A600));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center bottom, ellipse farthest-side, #ffe56b 0%, #F7A600 140%);

/* W3C Markup */ 
background-image: radial-gradient(ellipse farthest-side at center bottom, #ffe56b 0%, #F7A600 140%);
}

.background_4 {
/* IE10+ */ 
background-image: -ms-radial-gradient(center bottom, ellipse farthest-side, #cdc700 0%, #cdc700 140%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center bottom, ellipse farthest-side, #cdc700 0%, #cdc700 140%);

/* Opera */ 
background-image: -o-radial-gradient(center bottom, ellipse farthest-side, #cdc700 0%, #cdc700 140%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 258, color-stop(0, #cdc700), color-stop(140, #cdc700));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center bottom, ellipse farthest-side, #cdc700 0%, #cdc700 140%);

/* W3C Markup */ 
background-image: radial-gradient(ellipse farthest-side at center bottom, #cdc700 0%, #cdc700 140%);
}

#exit {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 10;
  cursor: pointer;
}

:focus {
  outline:none;
}
::-moz-focus-inner {
  border:0;
}

#overlay{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.images{
  position: absolute;
  width: 336px;
  height:280px;
}


/*text frame1*/


#text1WrapperA{
  position: absolute;
  width: 215px;
  height: 14px;
  top: 28px;
  left: 61px;
  overflow: hidden;
}

#text1a{
  position: absolute;
  width: 215px;
  height: 14px;
  top: 0px;
  left: 0px;
}

#text1WrapperB{
  position: absolute;
  width: 184px;
  height: 14px;
  top: 51px;
  left: 75px;
  overflow: hidden;
}

#text1b{
  position: absolute;
  width: 184px;
  height: 14px;
  top: 0px;
  left: 0px;
}

/*text frame1 END*/


/*text frame2 */

#text2WrapperA{
  position: absolute;
  width: 294px;
  height: 14px;
  top: 29px;
  left: 22px;
  overflow: hidden;
}

#text2a{
  position: absolute;
  width: 294px;
  height: 14px;
  top: 0px;
  left: 0px;
}

#text2WrapperB{
  position: absolute;
  width: 237px;
  height: 14px;
  top: 52px;
  left: 49px;
  overflow: hidden;
}

#text2b{
  position: absolute;
  width: 237px;
  height: 14px;
  top: 0px;
  left: 0px;
}

/*text frame2 END*/


/*text frame3 */

#text3WrapperA{
  position: absolute;
  width: 185px;
  height: 14px;
  top: 28px;
  left: 75px;
  overflow: hidden;
}

#text3a{
  position: absolute;
  width: 185px;
  height: 14px;
  top: 0px;
  left: 0px;
}

#text3WrapperB{
  position: absolute;
  width: 194px;
  height: 14px;
  top: 51px;
  left: 71px;
  overflow: hidden;
}

#text3b{
  position: absolute;
  width: 194px;
  height: 14px;
  top: 0px;
  left: 0px;
}

/*text frame3 END*/

/*text frame3 */

#text4WrapperA{
  position: absolute;
  width: 256px;
  height: 28px;
  top: 24px;
  left: 40px;
  overflow: hidden;
}

#text4a{
  position: absolute;
  width: 256px;
  height: 28px;
  top: 0px;
  left: 0px;
}

#text4WrapperB{
  position: absolute;
  width: 253px;
  height: 12px;
  top: 55px;
  left: 41px;
  overflow: hidden;
}

#text4b{
  position: absolute;
  width: 253px;
  height: 12px;
  top: 0px;
  left: 0px;
}

/*text frame3 END*/


#btnWrapper{
  position: absolute;
  width: 133px;
  height: 30px;
  background-color: #009fe3;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px;
    left: 22px;
    top: 220px;
}

#btnText{
  position: absolute;
    top: 9px;
    left: 16px;
  width: 93px;
  height: 12px;
}

#coolblue {
    position: absolute;
    width: 44px;
    height: 44px;
    top: -8px;
    left: 115px;
}

#voordeel{
  position: absolute;
  left: 18px;
  top: 35px;
  width: 110px;
  height: auto;
}

#parentdiv{
  position: absolute;
  width: 150px;
  height: 150px;
/*  background-color: #FFF;*/
  border-radius: 150px;
    top: 58px;
    left: 83px;
}

#innerDiv1{
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 150px;
  top: 0px;
  left: 0px;  
}

#groteCircle{
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: #FFF;
  border-radius: 150px;

}

.div2{
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ac5;
  border-radius: 100px;
}

.div3{
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ddd;
  border-radius: 100px;
} 

.div4{
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ddd;
  border-radius: 100px;
}

.circle1{
  background-color: #009FE3;
}

.circle2{
  background-color: #8C8C88;
}

.circle3{
  background-color: #1D1D1B;
}

.circle4{
  background-color: #4B3F3C;
}

.circle5{
  background-color: #B70065;
}

.circle6{
  background-color: #853204;
}

.circle7{
  background-color: #F3953F;
}

.circle8{
  background-color: #D0490F;
}

.circle9{
  background-color: #FFD500;
}

.circle10{
  background-color: #AD1225;
}

.circle11{
  background-color: #6C2B14;
}

.circle12{
  background-color: #BC0845;
}

.circle13{
  background-color: #FFD500;
}

.circle14{
  background-color: #B07B4E;
}

.circle15{
  background-color: #DFB28A;
}

.circle16{
  background-color: #BCBC00;
}

.circle17{
  background-color: #EF7D00;
}

.circle18{
  background-color: #F7A600;
} 

.circle19{
  background-color: #742E1C;
} 

.circle20{
  background-color: #FFED00;
} 

.circle21{
  background-color: #009870;
} 

.circle22{
  background-color: #A7358B;
} 

.circle23{
  background-color: #F7AA4E;
} 

.circle24{
  background-color: #0077B3;
} 

.circle25{
  background-color: #00B5E5;
} 

.circle26{
  background-color: #E42313;
} 

.circle27{
  background-color: #00375B;
} 

.circle28{
  background-color: #AD1225;
} 

.circle29{
  background-color: #B70065;
} 

.circle30{
  background-color: #EB5B25;
} 

.circle31{
  background-color: #F3953F;
} 

.circle32{
  background-color: #D0490F;
} 

.circle33{
  background-color: #C08938;
} 

.circle34{
  background-color: #1D1D1B;
} 

.circle35{
  background-color: #BE9F56;
} 

.circle36{
  background-color: #FFDD94;
} 

.circle37{
  background-color: #FFD500;
} 

.circle38{
  display: none;
} 

.circle39{
  background-color: #DFB28A;
} 

.circle40{
  background-color: #BCBC00;
} 

.circle41{
  background-color: #FFCF53;
} 

.circle42{
  background-color: #F7A600;
} 

.circle43{
  background-color: #5C2483;
} 

.circle44{
  background-color: #E30613;
} 

.circle45{
  background-color: #80A51B;
} 

.circle46{
  background-color: #DD0065;
} 

.circle47{
  background-color: #FFE500;
} 

.circle48{
  display: none;
} 

.circle49, .circle50, .circle51, .circle52, .circle54, .circle55, .circle56, .circle57, .circle58, .circle59, .circle60, .circle61, .circle62, .circle63
, .circle64, .circle65, .circle67, .circle69, .circle70, .circle71, .circle72{
  display: none;
} 

.circle53{
  background-color: #B70065;
}

.circle66{
  background-color: #F7A600;
}

.circle68{
  background-color: #3AAA35;
}