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

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

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

#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: 120px;
  height: 600px;
}

#text1WrapperA{
  position: absolute;
  width: 87px;
  height: 21px;
    top: 27px;
    left: 17px;
  overflow: hidden;
}

#text1WrapperB{
  position: absolute;
  width: 103px;
  height: 21px;
top: 51px;
    left: 8px;
  overflow: hidden;
}

#text1a{
  position: absolute;
  width: 87px;
  height: 21px;
  top: 0px;
  left: 0px;
}

#text1b{
  position: absolute;
  width: 103px;
  height: 21px;
  top: 0px;
  left: 0px;
}

#text2WrapperA{
  position: absolute;
  width: 96px;
  height: 13px;
    top: 78px;
    left: 12px;
  overflow: hidden;
}

#text2WrapperB{
  position: absolute;
  width: 96px;
  height: 10px;
top: 95px;
    left: 12px;
  overflow: hidden;
}

#text2WrapperC{
  position: absolute;
  width: 63px;
  height: 10px;
    top: 109px;
    left: 27px;
  overflow: hidden;
}

#text2a{
  position: absolute;
  width: 96px;
  height: 13px;
  top: 0px;
  left: 0px;
}

#text2b{
  position: absolute;
  width: 96px;
  height: 10px;
  top: 0px;
  left: 0px;
}


#text2c{
  position: absolute;
  width: 63px;
  height: 10px;
  top: 0px;
  left: 0px;
}


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

#btnText{
    position: absolute;
    top: 9px;
    left: 10px;
    width: 61px;
    height: 11px;
}

#coolblue {
    position: absolute;
    width: 33px;
    height: 33px;
    top: -2px;
    left: 77px;
}

#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: 130px;
    left: -14px;
}

#packshot{
    position: absolute;
    top: -31px;
    left: -02px;
}

#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;
}