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 class 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: #ffffff;
    
    /** 
     * 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);
	
	font-family: 'Lato', sans-serif;
	
}


/**
 * Click 
 */

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

/**
 * CTA 
 */

.btnCta {
    position: absolute;
	background-color: #2AABCE;
  	left: 25px;
  	bottom:90px;
  	width: 250px;
  	height: 40px;
    border-radius: 40px;
	
	-webkit-transition: background-color 0.6s; /* Safari */
    transition: background-color 0.6s;
}

.ctaText {
    position: absolute;
    color: #ffffff;
    width: 230px;
    height: 28px;
    top: 7px;
    left: 10px;
    font-size: 20px;
	line-height: 1.2em;
    text-align: center;
	font-family: 'Open Sans', sans-serif;
}

.container:hover .hoverKleur {
    background-color: #ffffff;
}

.hoverKleur {
    position: absolute;
    background-color: #2AABCE;
	width: 250px;
    height: 40px;
	left:0px;
	top:0px;
	border-radius: 25px;
	-webkit-transition: background-color 0.6s; /* Safari */
    transition: background-color 0.6s;

}
.container:hover .ctaText {
    color: #2AABCE;
}




/**
 * 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;
}
.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;
}



.text1 {
    position: absolute;
	color: #D40D47;
	width: 280px;
    height: 55px;
	top: 20px;
    left: 10px;
	font-size: 24px;
	line-height: 1.15;
    text-align: center;
	
}

.text2 {
    position: absolute;
	color: #ffffff;
 	width: 280px;
    height: 55px;
    top: 18px;
    left: 10px;
    font-size: 24px;
	line-height: 1.2;
    text-align: center;
}


.colorBackground {
	position: absolute;
	width: 100%;
	height: 100%;
	left:0px;
	top:0px;
    background-color:#555390;
	-ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
}



.fader {
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}


.logo {
    position: absolute;
    width: 160px;
    left: 70px;
    bottom: -20px;
}

.kredietWaarschuwing {
	position: absolute;
	bottom: -136px;
	width: 300px;
}
.circle {
    position: absolute;
    right: -590px;
    bottom: -757px;
    width: 750px;
	-ms-transform: rotate(-250deg); /* IE 9 */
    -webkit-transform: rotate(-250deg); /* Chrome, Safari, Opera */
	-ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 52% 50%; /* Chrome, Safari, Opera */
	
}