html,
body,
p {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

img {
    position: absolute;
    display: block; 
}

/* Apply this claas to bannerfull images */
.frameSize{
	width: 300px;
    height: 250px;
}

.container {  
    position: relative;
    width: 300px;
    height: 250px;
    
    
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
	        box-sizing: border-box;
    
    /** 
     * Change background color per project 
     */
    background: #fff;
    
    /** 
     * Zet deze op `visible` als
     * je de elementen buiten je 
     * container ook wil zien.
     */
    overflow: hidden;
    
    /** 
     * Onderstaande zorgt ervoor 
     * dat geen enkele tekst in 
     * de banner `selecteerbaar` is.
     */
    -webkit-touch-callout: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
           -o-user-select: none;
              user-select: none;
    
    /** 
     * Trigger hardware acceleration
     * by declaring a 3d operation,
     * fire up device's GPU
     */
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}


/**
 * Click 
 */

.clickLayer{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	
	z-index: 100;
}


/**
 * CTA 
 */

.btnStill, .btnOver {

}

.CTA {
    position: absolute;
    width:128px;
	height:46px;
	bottom: 34px;
    left: 22px;
    
	background: #2bb34b;
	border-radius: 5px;
   }

.CTA .btnStill {
    
    /* Ease gebruiken bij kleur of gradient verandering 
    ALS DE TEKST OP DEZELFDE POSITIE BLIJFT STAAN*/
    /*    
    -webkit-transition: all 200ms ease-in-out;
            transition: all 200ms ease-in-out;
    */
    
}

.CTA .btnOver {

}

.container:hover .CTA {
    background: #80de02;
}


/**
 * Preloader
 */

#preloader {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
    background: #fff;
    box-sizing: border-box;
}
#preloader img {
    position: absolute;
    display: block;
    width: 50px;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -35px;
}


/**
 * Frame
 */

.frame {
    position: absolute;
    z-index: 10001;
    background: #dbdbdb;
}
.frame-top {
    width: 100%;
    height: 1px;
    left: 0;
	top:0;
}
.frame-bottom {
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
}
.frame-left {
    width: 1px;
    height: 100%;
    top: 0;
    left: 0;
}
.frame-right {
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
}



.imageBg {
	position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
	background-repeat:no-repeat;
	background-color: white;
	background-image:url(/img/overlay.jpg);

}

.parallelogram {
	position: absolute;
	top: 0;
	left:150px;/*
	width: 300px;
    height: 250px;
*/
	-webkit-transform: skew(-18deg);
	   -moz-transform: skew(-18deg);
	     -o-transform: skew(-18deg);
	background: #80de02;
}

.can {
	position: absolute;
	width:104px;
	top:17px;
	right:30px;
}
.drop {
	position: absolute;
	width:10px;
	top:80px;
	left:230px;
}

.drop2 {
	position: absolute;
	width:10px;
	top:40px;
	left:200px;
}

.drop3 {
	position: absolute;
	width:10px;
	top:50px;
	left:260px;
}

.greenBannerBack {
	position: absolute;
	right:0px;
	top:0px;
	width:142px;
	height: 104px;	
	background-image: url(../img/greenBannerBack.png);	
}
.greenBannerFront {
	position: absolute;
	right:00px;
	top:0px;
	width:142px;
	height: 104px;	
	background-image: url(../img/greenBanner.png);	
}

.groenLabelAchter{
	width:142px;
	height: 104px;
	overflow:hidden;
}

.txtEindframe {
	position: absolute;
}

/*
	Bricks
*/

.bricks-B1 {
	right: 0px;
	bottom: 0px;
}

.bricks-F1 {
	left: 0px;
	bottom: 0px;
}
.bricks-F2 {
	left: 0px;
	bottom: 0px;
}

.scherf01 {
	top:76px;
	left:-40px;
}.scherf02 {
	top:-20px;
	left:-20px;
}.scherf03 {
	top:180px;
	left:110px;
}.scherf04 {
	top:65px;
	right:-30px;
}
.floating {  
    animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: 6;
    animation-timing-function: ease-in-out;
/*
    margin-left: 30px;
    margin-top: 5px;
*/
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 5px); }
    to   { transform: translate(0, -0px); }    
}


.contentBouncer{
	top:0px;
	left:0px;
	background-color: #000;
}



.txtIntroLine {
	top:0px;
	left:0px;
}

.greenBannerBackDiv, .greenBannerFrontDiv {
	position: absolute;
    width: 142px;
    height: 104px;
    overflow: hidden;
	top:0px;
	right:0px;
}

.bricks-F3 {
	left:-40px;
}