body{
  margin:0;
  padding:0;
}



#container{
  position: absolute;
  top:0px;
  left:0px;
  width:300px;
  height: 250px;
  overflow: hidden;
}

.retina{
  position: absolute;
  top:0px;
  left:0px;
  width:300px;
  height: 250px;
}

#border {
  position: absolute;
  width:300px;
  height: 250px;
  top: 0px;
  left: 0px;
  border:1px solid #cccccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 9999999;
}

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

#background{
  top: 0;
  left: 0;
  position: absolute;
  width: 300px;
  height: 250px;
  background-color: #4631E1;
}

#oranje{
  width: 300px;
    height: 250px;
    position: absolute;
}

#wolk-roze{
  position: absolute;
  width: 150px;
  top: 40px;
  left: 35px;
}

#wolk-blauw{
  position: absolute;
  width: 110px;
  top: 90px;
  left: 164px;
}

#roze-pebble{
  position: absolute;
  top: 4px;
  left: 34px;
  width: 90px;
}

#layer11{
  position: absolute;
}

#layer22, #layer33, #layer44{
  position: absolute;
  visibility:hidden;
}


#blauwe-pebble{
  position: absolute;
  top: 62px;
  left: 9px;
  width: 97px;
}

#layer111{
  position: absolute;
}

#layer222, #layer333, #layer444{
  position: absolute;
  visibility:hidden;
}


#gb{
  position: absolute;
  width: 50px;
  top: 19px;
  left: 54px;
}

#pm{
  position: absolute;
  width: 43px;
  top: 70px;
  left: 18px;
}

#text-1{
  position: absolute;
  left: -18px;
  top: 85px;
  width: 261px;
  height: 150px;
  text-align: center;
}

#text-2{
  position: absolute;
  top: 41px;
  left: 8px;
  /* font-size: 40px; */
  width: 300px;
  height: 250px;
  text-align: center;
  font-size: 37px;

}

.generel-text-pos{
  position: absolute;
  font-size: 40px;
  font-size: 37px;
  padding: 0;
  margin: 0;
  line-height: 30px;
  left: 97px;
}

.shadow{
  /* font-family: 'Chiswick Grotesque Lebara'; */
/* text-transform: uppercase; */
/* color: #FF3182; */
/* letter-spacing: 1.9px; */
/* top: 24px; */
}

.front{
  font-family: 'Lebara';
  text-transform: uppercase;
  color:#fff;
  top: 30px;
  left: 115px;
}

.shadow2{
  font-family: 'Chiswick Grotesque Lebara';
text-transform: uppercase;
color: #FF3182;
/* letter-spacing: 1.3px; */
/* top: 29px; */
}

.front2{
  font-family: 'Lebara';
  text-transform: uppercase;
  color:#fff;
  /* top: 29px; */
}

#meer-01{
  font-family: 'Lebara';
  text-transform: uppercase;
  color:#fff;
}

#meer-02{
  font-family: 'Lebara';
  text-transform: uppercase;
  color:#fff;
  text-shadow: -1px -1px 0 #ca0067, 1px -1px 0 #ca0067, -1px 1px 0 #ca0067, 1px 1px 0 #ca0067;

}
#meer-2{
  font-family: 'Lebara';
  text-transform: uppercase;
  color:#fff;
  /* left: 97px; */
  text-shadow: -1px -1px 0 #ca0067, 1px -1px 0 #ca0067, -1px 1px 0 #ca0067, 1px 1px 0 #ca0067;

}

.line1{
  position: relative;
  left: 72px;
  width: 300px;
}
.line2{
  position: relative;
  top: 30px;
  left: 106px;
  width: 300px;
}
.line3{
  position: relative;
  top: 60px;
  left: 21px;
  width: 300px;
}

.line4{
  position: absolute;
  top: 35px;
  left: 35px;
  width: 253px;
  font-size: 37px;
  line-height: 33px;
}

.shadow3{
  font-family: 'Chiswick Grotesque Lebara';
text-transform: uppercase;
color: #ff0082;
/* letter-spacing: 1.4px; */
/* top: 29px; */
}

.front3{
  font-family: 'Lebara';
  text-transform: uppercase;
  color:#fff;
  /* top: 29px; */
}

#line4-pos-shadow{
  letter-spacing: 0.9px;
}


.line4-pos{
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 250px;
}

.line1-pos{
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

.line2-pos{
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

.line3-pos{
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 260px;
}

#line1{
  text-shadow: -1px -1px 0 #ca0067, 1px -1px 0 #ca0067, -1px 1px 0 #ca0067, 1px 1px 0 #ca0067;
}

#line2{
  text-shadow: -1px -1px 0 #ca0067, 1px -1px 0 #ca0067, -1px 1px 0 #ca0067, 1px 1px 0 #ca0067;
}


#line3{
  text-shadow: -1px -1px 0 #ca0067, 1px -1px 0 #ca0067, -1px 1px 0 #ca0067, 1px 1px 0 #ca0067;
}

#line4{
  text-shadow: -1px -1px 0 #ca0067, 1px -1px 0 #ca0067, -1px 1px 0 #ca0067, 1px 1px 0 #ca0067;
}


#text-3{
  position: absolute;
  top: 34px;
  left: 26px;
  font-size: 37px;
  padding: 0;
  margin: 0;
  line-height: 33px;
  width:300px;
}
.mind2 {
  position: absolute;
  font-family: 'Chiswick Grotesque Lebara';
text-transform: uppercase;
color: #3c2da0;
letter-spacing: 2px;

}

.mind {
  position: absolute;
  font-family: 'Lebara';
  text-transform: uppercase;
  color: #fff;
}

/* #btn, #btn-roze{
  top: -5px;
} */

.button{
  position: absolute;
  width: 123px;
  left: 169px;
  top: 192px;
}



#mind{
  position: absolute;
  font-family: 'Lebara';
  text-transform: uppercase;
  color: #fff; 
  top: 37px;
  left: 0px;
}
#mind12{
  position: absolute;
  font-family: 'Lebara';
  text-transform: uppercase;
  color: #fff; 
  top: 37px;
  left: 1px;
}

#shape{
  position: absolute;
  width: 170px;
  top:5px;
}


/********** END LOGO BALK **********/

#oranje-balk{
  position: absolute;
  bottom: 0;
  /* width: 300px; */
  z-index: 10;
  height: 20px;
}

#blauw-loper{
  position: absolute;
  bottom: 0;
  left: -3px;
  z-index: 1;
  height: 20px;
}

#blauw-left{
  position: absolute;
  bottom: 0;
  width: 133px;
  height: 20px;
  left: 67px;
  overflow: hidden;
}

#blauw-right{
  position: absolute;
  bottom: 0;
  width: 32px;
  height: 20px;
  left: 267px;
  overflow: hidden;
}

#roze-balk{
  position: absolute;
  bottom: 0;
  /* width: 300px; */
  z-index: 10;
  height: 20px;

}

#roze-loper{
  position: absolute;
  bottom: 0;
  left: -3px;
  z-index: 1;

}

.roze-left{
  position: absolute;
  bottom: 0;
  width: 133px;
  height: 20px;
  left: 67px;
  overflow: hidden;
}

.roze-right{
  position: absolute;
  bottom: 0;
  width: 32px;
  height: 20px;
  left: 267px;
  overflow: hidden;
}

.roze-left-schuin{
  position: absolute;
    bottom: 0;
    width: 100px;
    height: 15px;
    left: 50px;

}

.roze-right-schuin{
  position: absolute;
    bottom: 0;
    width: 100px;
    height: 15px;
    left: 200px;

}

#roze-schuin-2{
  position: absolute;
  bottom:15px;
}

#roze-schuin-2{
  position: absolute;
  bottom:15px;
}

#roze-schuin-2{
  position: absolute;
  bottom:15px;
}

#trede2{
  position: absolute;
  bottom: 21px;
  left: 10px;
}

#trede3{
  position: absolute;
  bottom: 42px;
  left: 20px;
}
#trede4{
  position: absolute;
  bottom: 61px;
  left: 30px;

}
#trede5{
  position: absolute;
  bottom: 82px;
  left: 40px;
}
#trede6{
  position: absolute;
  bottom: 103px;
  left: 50px;
}
#trede7{
  position: absolute;
  bottom: 124px;
  left: 60px;
}
#trede8{
  position: absolute;
  bottom: 145px;
  left: 70px;
}
#trede9{
  position: absolute;
  bottom: 166px;
  left: 80px;
}
#trede10{
  position: absolute;
  bottom: 187px;
  left: 90px;
}
#trede11{
  position: absolute;
  bottom: 208px;
  left: 100px;
}
#trede12{
  position: absolute;
  bottom: 229px;
  left: 110px;
}

#trede-container{
  position: absolute;
  height: 20px;
  bottom: 0;
  width: 300px;
  overflow: hidden;
}

#trede-container2{
  position: absolute;
  height: 15px;
  bottom: 0;
  width: 300px;
  overflow: hidden;
  left: -150px;

}


.text-shadow2 {
  color: #fff;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
}

.text-shadow2 span {
  display: block;
  /* background: #f8695f; */
  padding:  0;
  border-radius: 5px;
  font-family: 'Lebara';
  text-transform: uppercase;
  color:#fff;
  position: absolute;
  /* top: 36px; */
  left: -1px;
}







.text-shadow {
  color: #fff;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
}

.text-shadow span {
  display: block;
  /* background: #f8695f; */
  padding:  0;
  border-radius: 5px;
  font-family: 'Lebara';
  text-transform: uppercase;
  color:#fff;
  position: absolute;
  top: 36px;
}

.fa-check-circle {
  color: #03a9f4;
  font-size: 40px;
  margin-left: 10px;
  vertical-align: top
}

.external {
  font-size: 30px;
  text-align: center;
  margin: 10px;
  padding: 10px;
  font-family: Inconsolata;
}

.external a {
  text-decoration: none;
  color: #888
}

.external a:hover {
  color: #f8695f
}