/*------------------------------------*\
	RESET
\*------------------------------------*/
html,body { width:100%;height:100%;} /* Deze regel is nodig om ook in hoogte te kunnen flexen */

a:link {color:#ffffffd5; background-color:#472594a8; padding:5px;}

a:visited {color:#ffffffd5;}

h1,h2,h3 {color:#ffffffd5;}

/*------------------------------------*\
	Custom
\*------------------------------------*/
html {
  box-sizing: border-box; /* padding, border en content instellingen worden binnen de hoogte en breedte ingesteld, m.a.w. box wordt niet groter. Dit geldt niet voort margin*/
}
*, *:before, *:after {	/* * selecteerd alle elementen */
  box-sizing: inherit; /*erft eigenschap van parent*/
}

body {
  margin: 0;
  padding: 0;
  font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  background-color:black;
}

.flex1 {flex-grow:1;}
.flex2 {flex-grow:2;}
.flex3 {flex-grow:3;}
.flex4 {flex-grow:4;}
.flex5 {flex-grow:5;}
.flex6 {flex-grow:6;}
.flex7 {flex-grow:7;}
.flex8 {flex-grow:8;}
.flex9 {flex-grow:9;}
.flex10 {flex-grow:10;}


.container {
	 display: flex;
	 flex-direction:column;
	 width:100%;
	 height:100vh;	/* Vult de volledige schermhoogte */
	 border:0px dashed green;
	 justify-content:center; /* horizontaal */
	 align-items:center; /* verticaal */
}

.headerContainer {
	  display: flex;
	  flex-flow:row nowrap;
	  width:100%;
	  border:0px dashed green;
	  justify-content:center; /* horizontaal */
	  align-items:center; /* verticaal */
}


header {
	background-color:#472594a8;
	padding: 2px;
	width:100%;
	text-align:center;
}

.headerItem {
	margin:10px 10px;
}

#headerMobile{
	border:0px solid blue;
 	background:url(../img/5.png) no-repeat center center;
	background-size:contain;
	background-color:none;
}

#headerMobileNr {
	position:absolute;
	color:#ffffffd5;
	width:200px;
	height:150px;
	top:20px;
	left:20px;
	border:0px solid white;
 	background:url(../img/5.png) no-repeat center center;
	background-size:contain;

}

#headerTekst{
	color:white;
	border:0px solid blue;
}

.tekstHeader{
	color:silver;
	font-size:72px;
}

.pirataOne {
	font-family: "Pirata One", system-ui;
	color:silver;
	margin:0px;
}

.socials {
	border:0px solid blue;
}


#headerInstagram{
	position:relative;
	display:inline-block;
	width:80px;
	height:80px;
	border:0px solid red;
	background-color:#a790eec7;
	border-radius:15px;
	padding:0px;
	
}


#headerFacebook{
	position:relative;
	display:inline-block;
	width:80px;
	height:80px;
	border:0px solid red;
	background-color:#a790eec7;
	border-radius:15px;
	padding:0px;
	

}

.backgroundImgcenter{
	width:60px;
	height:60px;
	padding:0px;
	border:0px solid white;
    background-image: linear-gradient(#381385, #7c63c8);
	margin:5px auto;
	border-radius:15px;
	}

.imgCenter{
	height:50px;
	margin:5px auto;
	border:0px dashed white;
}




main {
	width:100%;
	flex-grow:1;	/* Neemt alle beschikbare ruimte in , korte versie is: flex:1; */
	color:#ffffffd5;
	padding: 25px;
	font-size:24px;
	border:0px solid red;
 	background:url(../img/Impure_logo_long_wide.png) no-repeat center center;
	background-size:contain;
	background-attachment:fixed;
	background-color:black;
	overflow-y:scroll;


}

#content{
	position:relative;
	display:inline-block;
	width:100%;
	height:auto;
	border:0px dashed purple;
	background-color:none;
	text-align:center;
}


.filter{
	width:100%;
	height:100%;
	background-color:#00000085;
}



footer { 
	color:white;
	background-color:#472594a8;
	padding:0px;
	width:100%;
	text-align:center;

}

.footerContainer {
	display: flex;
	flex-flow:row nowrap;
	width:100%;
	border:0px dashed green;
	justify-content:center; /* horizontaal */
	align-items:center; /* verticaal */
	border-top-right-radius:50px;
	border-top-left-radius:50px;

}

.menuButton {
	border:0px solid blue;	
	margin:0 0 25px 0;
}

.divHole{
	position:relative;
	width:150px;
	height:75px; 
	border:0px dashed white;
	align-items:center;
	margin:auto;
	margin-bottom:15px;
	margin-top:0px;
	border-bottom-right-radius:100px;
	border-bottom-left-radius:100px;
	background-color:black;
	box-shadow: 0px 4px 2px white;	
}

.contentButton{
	position:;
	display:inline-block;
	width:100px;
	height:100px;
	border:0px dashed blue;
	background-color:#a790eec7;
	border-radius:50px;
	margin-top:-45px;
}


.contentButtonItem{
	background-image:linear-gradient(#381385 , #7c63c8);
	margin:auto;
	margin-top:10px;
	width:80px;
	height:80px;
	border-radius:50px;
	cursor:pointer;
	border:0px solid white;		
}

.menuImage{
	width:75px;
	margin-top:2.5px;
	margin-left:2.5px;
}

.buttonTekst{
	position:relative;
	display:block;
	color:#ffffffd5;
	width:150px;
	margin-top:-165px;
	left:0px;
	text-align:center;
	border:0px dashed red;
}

 .buttonTekst p{
	display:inline-block;
	font-size:20px;
}

.aanwijzer1{font-size:20px;}
.aanwijzer2{font-size:20px;}
.aanwijzer3{font-size:20px;}
.aanwijzer4{font-size:20px;}
.aanwijzer5{font-size:20px;}

#copyrightDiv {
	position:absolute;
	display:inline-block;
	border:0px dashed white;
	width:100%;
	margin:auto;
	margin-bottom:-75px;
	text-align:center;
	align-items:center;
	
}

#footerTxtlogo {
	position:relative;
	border:0px dashed white;
	width:400px;
	height:30px;
	margin:auto;
	text-align:center;
	align-items:center;

}

#footerTxt{
	position:relative;
	display:inline-block;
	border:0px solid yellow;
	width:150px;
	height:25px;
}

#fTxt {
	position:absolute;
	display:inline-block;
	border:0px solid red;
	width:140px;
	left:0px;
	top:-12px;
}

#footerLogo{
	position:relative;
	display:inline-block;
	border:0px solid yellow;
	width:150px;
	height:25px;
}


#fLogo {
	position:absolute;
	border:0px solid red;
 	background:url(../img/logo.png) no-repeat center center;
	background-size:contain;
	height:60px;
	width:150px;
	margin:0px;
	top:-12px;
}


@media screen and (min-width: 20em) { /* 320px mobiel staand OK */

/*------------------------------------*\
	Opmaak	
\*------------------------------------*/


}


@media screen and (min-width: 40em) { /* 640px mobiel staand OK */

/*------------------------------------*\
	Opmaak	
\*------------------------------------*/

}

@media screen and (min-width: 48em) { /* 768px mobiel staand OK */

/*------------------------------------*\
	Opmaak	
\*------------------------------------*/

}

@media screen and (min-width: 64em) { /* 1024px mobiel staand OK */

/*------------------------------------*\
	Opmaak	is OK
\*------------------------------------*/

#headerMobile {
	flex:0.8;
}

#headerTekst {
	flex:2;
}


.socials {
	flex:1;
}

}

@media screen and (min-width: 90em) { /* 1440px mobiel staand OK */

/*------------------------------------*\
	Opmaak	
\*------------------------------------*/

.pirataOne {
	font-size:128px;
}

#headerMobileNr {
	width:300px;
	height:300px;
	top:40px;
	left:20px;
	border:0px solid white;
	font-size:24px;
}

#headerInstagram{
	width:140px;
	height:140px;
	border:0px solid red;
	padding:0px;	
	margin-right:25px;
}

#headerFacebook{
	width:140px;
	height:140px;
	border:0px solid red;
	padding:0px;
}

.backgroundImgcenter{
	width:120px;
	height:120px;
	border:0px solid white;
	}

.imgCenter{
	height:110px;
	border:0px dashed white;
}


main {
	font-size:48px;
}

/*-------------------------------Footer-------------------------------------*/


footer { 
	height:175px;

}

.divHole{
	width:230px;
	height:115px; 
	border:0px dashed white;
	margin-bottom:35px;
	border-bottom-right-radius:125px;
	border-bottom-left-radius:125px;
	box-shadow: 0px 8px 4px white;	
}

.contentButton{
	width:170px;
	height:170px;
	border:0px dashed blue;
	border-radius:100px;
	margin-top:-85px;
}


.contentButtonItem{
	width:140px;
	height:140px;
	margin-top:15px;
	border-radius:100px;
	border:0px solid white;		
}

.menuImage{
	width:130px;
	margin-top:5px;
	margin-left:5px;
}

.buttonTekst{
	width:275px;
	margin-top:-300px;
	left:-25px;
	border:0px dashed red;
}

 .buttonTekst p{
	font-size:40px;
}

.aanwijzer1{font-size:40px;}
.aanwijzer2{font-size:40px;}
.aanwijzer3{font-size:40px;}
.aanwijzer4{font-size:40px;}
.aanwijzer5{font-size:40px;}

#copyrightDiv {
	margin-bottom:-110px;
}

#footerTxtlogo {
	border:0px dashed white;
	width:650px;
	height:60px;
}

#footerTxt{
	width:300px;
	height:60px;
	font-size:28px;
}

#fTxt {
	border:0px solid red;
	width:280px;
	left:0px;
	top:-15px;
}

#footerLogo{
	border:0px solid yellow;
	width:300px;
	height:60px;
}

#fLogo {
	width:300px;
	height:60px;
	top:5px;
}




}


@media screen and (min-width: 195em) { /* 3120px mobiel staand OK */

/*------------------------------------*\
	Opmaak	
\*------------------------------------*/

#headerMobile {
	flex:0.9;
}


#headerMobileNr {
	left:150px;
}




}