/* Media queries */


@media screen and (max-width: 1000px) {
	h1 {font-size: 2.4em;}

/* header */
	header.keune {height: 300px; background-image: url(../images/banners/1000/bannerkeune_1000.jpg); repeat: no-repeat; border: 0px solid white; z-index: 0;}
	header.wimpers {height: 300px; background-image: url(../images/banners/1000/bannerwimpers_1000.jpg); repeat: no-repeat; border: 0px solid white; z-index: 0;}
	header.overmij {height: 300px; background: url(../images/banners/1000/bannerEsther_1000.jpg); repeat: no-repeat; border: 0px solid white; z-index: 0;}
	header.keuneyou {height: 300px; background-image: url(../images/banners/1000/bannerkeuneyou_1000.jpg); repeat: no-repeat; border: 0px solid white; z-index: 0;}
	header.kapsalon {height: 300px; background: url(../images/banners/1000/bannerkapsalon_1000.jpg); repeat: no-repeat; border: 0px solid white; z-index: 0;}
	header.kapsels {height: 300px; background-image: url(../images/banners/1000/bannerkapsels_1000.jpg); repeat: no-repeat; border: 0px solid white; z-index: 0;}
	header.contact {height: 300px; background: url(../images/banners/1000/bannercontact_1000.jpg); repeat: no-repeat; border: 0px solid white; z-index: 0;}

/* Navigation */
	.topnav {display: none;}

	nav {background-color: #330066; height: 50px; width: 100%; z-index: 20; padding-top: 0px; margin-bottom: 5px;}	
	nav > ul {padding-left: 50px; }
	
/* handtekening */
	#handtekening {margin-top: 40px;}





/* === 825 === */

@media screen and (max-width: 825px) {
	h1 {font-size: 2.2em;}
	
	/* header */
	header.keune {height: 300px; background-image: url(../images/banners/825/bannerkeune_825.jpg); repeat: no-repeat; border: 0px solid red; z-index: 0;}
	header.wimpers {height: 275px; background-image: url(../images/banners/825/bannerwimpers_825.jpg); repeat: no-repeat; border: 0px solid red; z-index: 0;}
	header.overmij {height: 275px; background: url(../images/banners/825/bannerEsther_825.jpg); repeat: no-repeat; border: 0px solid red; z-index: 0;}
	header.keuneyou {height: 275px; background-image: url(../images/banners/825/bannerkeuneyou_825.jpg); repeat: no-repeat; border: 0px solid red; z-index: 0;}
	header.kapsalon {height: 275px; background: url(../images/banners/825/bannerkapsalon_825.jpg); repeat: no-repeat; border: 0px solid red; z-index: 0;}
	header.kapsels {height: 275px; background-image: url(../images/banners/825/bannerkapsels_825.jpg); repeat: no-repeat; border: 0px solid red; z-index: 0;}
	header.contact {height: 275px; background: url(../images/banners/825/bannercontact_825.jpg); repeat: no-repeat; border: 0px solid red; z-index: 0;}

	
/* section - main */
	section.main {
		padding-top: 20px;}

	/* Navigation */
	.topnav {display: none;}
	
	nav {padding-top: 0px; padding-bottom: 5px;}
	nav > ul {padding-left: 10px; }
}



/* === 760 === */

@media screen and (max-width: 760px) {
	h1 {font-size: 1.8em;}
	h2 {font-size: 1.4em;}
	h3 {font-size: 1.1em;}
	a.btn {font-size: 1em;}

/* header */
	header.keune {height: 270px; background-image: url(../images/banners/760/bannerkeune_760.jpg); repeat: no-repeat; border: 0px solid yellow; z-index: 0;}
	
	header.contact {height: 270px; background: url(../images/banners/760/bannercontact_760.jpg); border: 0px solid yellow; z-index: 0;}
	
	header.keuneyou {height: 270px; background-image: url(../images/banners/760/bannerkeuneyou_760.jpg); border: 0px solid yellow; border: 1px solid yellow; z-index: 0;}
	
	header.kapsalon {position: relative; top: 15px; height: 225px; background: url(../images/banners/760/bannerkapsalon_760.jpg); border: 0px solid yellow; z-index: 0;}
	
	header.kapsels {height: 270px; background-image: url(../images/banners/760/bannerkapsels_760.jpg); border: 0px solid yellow; z-index: 0;}
	
	header.overmij {height: 270px; background: url(../images/banners/760/bannerEsther_760.jpg); border: 0px solid yellow; z-index: 0;}
	
	header.wimpers {height: 270px; background-image: url(../images/banners/760/bannerwimpers_760.jpg); border: 0px solid yellow; z-index: 0;}
	
/* Section - main */
	section.main {margin-top: 10px; margin-bottom: 10px;}
	section.main aside div.content {background-size: 55px 55px; padding-top: 0px;}

/* Section - images */
	section.images {margin-top: 10px; margin-bottom: 10px;}
	section.images aside div.content {background-size: 55px 55px; padding-top: 60px;}
	
/* handtekening */
	#handtekening {margin-top: 40px;}
			
/* Navigation */
	.topnav {display: none;}
	
	nav {padding-top: 0px;}
	nav > ul {padding-left: 0px; }
}



/* ==== 625 ==== */

@media screen and (max-width: 625px) {
	h1 {font-size: 2em;}
	h3 {margin-bottom: 5px;}
	a.btn {font-size: .9em;}	

/* header */

	header.keune {height: 190px; background-image: url(../images/banners/625/bannerkeune_625.jpg); repeat: no-repeat; border: 0px solid green; z-index: 0; margin-top: -15px;}
	
	header.overmij {height: 172px; background: url(../images/banners/625/bannerEsther_625.jpg); repeat: no-repeat; border: 0px solid red; z-index: 0; margin-top: 0px;}
	
	header.kapsels {height: 172px; background-image: url(../images/banners/625/bannerkapsels_625.jpg); repeat: no-repeat; border: 0px solid green; z-index: 0; margin-top:-15px;}
	
	header.wimpers {height: 172px; background-image: url(../images/banners/625/bannerwimpers_625.jpg); repeat: no-repeat; border: 0px solid green; z-index: 0; margin-top: -15px;}
	
	header.keuneyou {height: 172px; background-image: url(../images/banners/625/bannerkeuneyou_625.jpg); repeat: no-repeat; border: 0px solid green; z-index: 0; margin-top: -15px;}
	
	header.kapsalon {border: 0px solid red; height: 172px; background: url(../images/banners/625/bannerkapsalon_625.jpg); repeat: no-repeat; border: 0px solid green; z-index: 0; margin-top: -15px;}

	header.contact {height: 172px; background: url(../images/banners/625/bannercontact_625.jpg); repeat: no-repeat; border: 0px solid green; z-index: 0; margin-top: 0px;}
	

/* section - Main */
	section.main aside {
		width: 100%;
		float: none;
		text-align: left;
	}
	
	section.main aside div.content {
		margin: 8px 20px 8px 0; 
		padding: 5px 0px 10px 15px; /* evt ruimte voor icons links */
		background-size: 50px 50px;
		background-position: 20px 5px;
	}
	
	section.main aside div.content {
		margin: 8px 20px 8px 0;
		padding: 5px 0px 10px 15px; /* evt ruimte voor icons links */
		background-size: 50px 50px;
		background-position: 20px 5px;
	}	

	#handtekening {position: relative; top: -10px; float:right;}

/* section - images */
	section.images aside {
		width: 100%;
		float: none;
		text-align: left;
	}
	
	section.images aside div.content {
		margin: 8px 20px 8px 0; 
		padding: 5px 0px 10px 15px; /* evt ruimte voor icons links */
		background-size: 50px 50px;
		background-position: 20px 5px;
	}
	
	section.images aside div.content {
		margin: 8px 20px 8px 0;
		padding: 5px 0px 10px 15px; /* evt ruimte voor icons links */
		background-size: 50px 50px;
		background-position: 20px 5px;
	}

/* section - main */
	section.main aside div.content {
		margin: 0px 20px 0px 0; 
		padding: 5px 0px 10px 15px; /* evt ruimte voor icons links */
		background-size: 50px 50px;
		background-position: 20px 5px;
	}

/* Navigation */
	.topnav {display: block; z-index: 20; position: fixed;}
	nav {display: none;}
	nav > ul {padding-left: 50px; }	
	
/*Footer */
	footer div.content {display: block; margin-top: 15px;}
	footer div.content a {margin: 0 20px 0 0;}



img.center {width: 100%;}



/* ==== 425 ==== iPhone11 Max staand & i*/

@media screen and (max-width: 425px) {
	

/* Header */
	header.keune {height: 110px; background-image: url(../images/banners/425/bannerkeune_425.jpg); repeat: no-repeat; border: 0px solid blue; z-index: 0;}
	
	header.overmij {height: 110px; background: url(../images/banners/425/bannerEsther_425.jpg); repeat: no-repeat; border: 0px solid blue; z-index: 0; margin-top: 0px;}
	
	header.kapsalon {height: 110px; background: url(../images/banners/425/bannerkapsalon_425.jpg); repeat: no-repeat; border: 0px solid blue; z-index: 0; margin-top: -15px;}
	
	header.wimpers {height: 110px; background-image: url(../images/banners/425/bannerwimpers_425.jpg); repeat: no-repeat; margin-top: 0px; border: 0px solid blue; z-index: 0;}
	
	header.keuneyou {height: 110px; background-image: url(../images/banners/425/bannerkeuneyou_425.jpg); repeat: no-repeat; margin-top: 0px; border: 0px solid blue; z-index: 0;}
	
	header.contact {height: 110px; background: url(../images/banners/425/bannercontact_425.jpg); repeat: no-repeat; border: 0px solid blue; z-index: 0;}		
		
	header.kapsels {height: 110px; background-image: url(../images/banners/425/bannerkapsels_425.jpg); repeat: no-repeat; margin-top: 0px; border: 0px solid blue; z-index: 0;}


/* Navigation */
	
	.topnav {display: block; position: fixed;}

	nav {display: none;}
	
	nav {display: none;}
	nav ul,
	nav ul ul,
	nav ul ul ul {display: none;}
	
	nav ul li a {display: none;}
	
	nav a {display: none;}


h1.roze {
	color: #ce6d8e;	
	text-align: center;}

img.center {width: 100%;}


/* Footer */
	footer::after{
		content:'';
		display: block;
		clear: both;}
	
	footer div.content a {
		display: inline-block;
		margin: 0 0 10px 0;
		float: left;
		clear: both;}
}




/* ==== 360 ==== */

@media screen and (max-width: 360px) {
	
/* Header */
	header {height: 125px; margin-top: -10px}
	header.home {height: 125px; background-image: url(../images/banners/425/bannerkeune_360.jpg); no-repeat;}	
	header div.vv {background-image: url(../images/banners/vvbanner_360.jpg);}
	header.wimpers {height: 125px; background-image: url(../images/banners/360/bannerwimpers_360.jpg);}
	header.overmij {height: 125px; background: url(../images/banners/360/bannerEsther_360.jpg); margin-top: -50px}
	header.keuneyou {height: 125px; background-image: url(../images/banners/360/bannerkeuneyou_360.jpg);}
	header.kapsalon {height: 125px; background: url(../images/banners/360/bannerkapsalon_360.jpg);}
	header.kapsels {height: 125px; background-image: url(../images/banners/360/bannerkapsels_360.jpg);}
	header.contact {height: 125px; background: url(../images/banners/360/bannercontact_360.jpg);}	

/* Navigation */
	.topnav {position: fixed;}
	nav {display: none;}