/* #f4b7b7 
#e28282*/

/* --main-steunkleur:#7f2a2a;
--main-steunkleur2:#efa6a6;
--main-achtergrondkleur:#f4f1d2; 
	--main-steunkleur:#5e6a8a;
	--main-steunkleur2:#b1d39b;
	--main-achtergrondkleur:#fffeee;

	--main-steunkleur:#5e6a8a;
	--main-steunkleur2:#b1d39b;
	--main-achtergrondkleur:#fffeee;
	
	--main-steunkleur:#ff0000;
	--main-steunkleur2:#ffb2b2;
	--main-achtergrondkleur:#ffffff;

*/


html {
	background-color: var(--main-achtergrondkleur);;
}

body, p, h1, h2, h3, i{
	font-family: 'Arial', sans-serif;
	font-weight: 400;
}

.bioblok {
	background-color: var(--main-achtergrondkleur);
	padding: 0 1% 0 1% !important;
	border-width: 0px 2px 0px 2px;
	border-style: solid;
	margin: 0 25% 0 25%;	
	text-align: left;
	min-height: 100vh;
}

.erik {
	/* font-family: 'Caudex', serif;
	-webkit-text-stroke: 5px var(--main-steunkleur); */
	color: var(--main-steunkleur);
	paint-order: stroke fill;
	text-transform: lowercase;
	font-variant: small-caps;
	letter-spacing: 1px;
	font-weight: 600;
	margin: 0;
}

.eriksbaan {	
	text-transform: lowercase;
	font-variant: small-caps;
	color: var(--main-steunkleur2);
	font-weight: 600;
	margin:0;
}

.overerik {
	font-family: 'Caudex', serif;
	color: var(--main-steunkleur);
	font-weight: 800;
}

a {
	color: var(--main-steunkleur2);
}

body {
}

body, html, .menu, .content, .patronen, .wrapper, .patroon_element, .shirt_element{
	padding: 0px !important;
	margin:0px !important ;
}

.wrapper {
	top: 0px;
	left: 0px;
	overflow-x: hidden;
	height: 100vh;
	width: 100vw;
}

.scrollablebox {
	margin: 0px;
    width: 100vw;
	scrollbar-width: none;
}

.header {
	margin: 0px;
	padding: var(--main-topdistance) 0 0px 0;
}
/* –––––––––––––––––––––––––––——–––––––– Talenmenu */
/* 
.bar {
	height: 30px;
	padding:0 var(--main-leftpadding) 0 var(--main-leftpadding);
}

.topBar {
	background-color: var(--main-steunkleur);
}

.kopBar {
	color:var(--main-achtergrondkleur);
	font-size: 12px;
	float:left;
	font-weight:400;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.topBar>p {
	color:white;
	vertical-align: middle;
	font-size: 12px;
	float:right;
	margin-right: 6px;
	font-weight:400;
	display: block;
}

.topBarIcon {
	height: 60%;
	display: block;
	float: right;
	margin: 6px 6px 0 24px;
	line-height: normal;
}

.vlag {
	height: 18px;
} */

/* –––––––––––––––––––––––––––——–––––––– header */

.menu {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	background-color: var(--main-steunkleur2);
	/* background-image: url("img/pixels4x4.jpg");
	background-repeat: background-repeat;
	background-size:2px, 2px; */
}

.menuitem {
	color:var(--main-achtergrondkleur);
	text-align: left;
	vertical-align: middle;
	border-style: solid;
	border-width: 0px 1px 1px 0px;
	border-color: var(--main-steunkleur);
	padding-left: 30px !important;

}

.linkitem>a, .linkitem>a:visited {
	color: var(--main-achtergrondkleur) !important;
	text-decoration: none;
}

.menutext:hover {
	color: var(--main-steunkleur) !important;
	cursor: pointer;
}

.menutextselect{
  color: var(--main-steunkleur);
}

.tabselect {
	opacity: 0;
	padding-top: var(--main-shadowheight);
}

#shoptab {
	background-color: var(--main-achtergrondkleur);
}

#shoptab h2 {
	color:var(--main-steunkleur);
	animation: shopanimate 2s ease-in-out infinite;
}

@keyframes shopanimate {
  0%, 100% {
	letter-spacing: 1px;
	opacity: 1;
  }
  50% {
	letter-spacing: 3px;
	opacity: 0.8;
  }
}

/* –––––––––––––––––––––––––––——–––––––– patroononzin */


.bigtext {
	font-size: 24pt;
	color:  var(--main-textkleur);
}

/* –––––––––––––––––––––––––––——–––––––– patroononzin */

.patronen, .shirts, .tapijten {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.stretcher {
	width: 100%;
	background-size: cover;
	display: block;
}

.borderstyle {
	border-style: solid;
	border-width: 1px;
	border-color: var(--main-steunkleur);
}
.tekstbox {
	background: var(--main-steunkleur);
	color: var(--main-achtergrondkleur);
	padding: 5px;
	max-height: 32pt;
	overflow: clip;
}

h2 {
	font-weight: 700;
	letter-spacing: 0.05em;
}

h3 {
	pointer-events: auto;
	display: inline;
	line-height: 32pt;
	font-weight: 300;
	letter-spacing: 0.07em;
	
}

.patterndescript {
	display: inline;
	text-transform: lowercase;
	font-variant: small-caps;
}

.patterndescript, .patterndescript>a, .patterndescript>a:visited{
	color:var(--main-steunkleur2);
}

.end {
	clear: both;
}

.drama, .drama:visited{
	color: var(--main-steunkleur);
	text-transform: uppercase;
	text-decoration-thickness: 1pt;
	text-underline-offset: 2.5pt;
	text-decoration-color: var(--main-steunkleur);
	letter-spacing: 0.5px;
}

a:hover {
	cursor: pointer;
	opacity: 75%;
}

u {
	text-decoration-thickness: 1pt;
	text-underline-offset: 2pt;
}

.shirt_element {
	position: relative;
}

.shirt {
}

.shirt_element:hover {
	opacity: 75%;
}

.shirtinfo {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 2;
	background-color: rgba(255 ,255 ,255 ,0.5 );
}

.shirtinfo>p {
	font-size: 120%;
	margin: var(--main-leftpadding);
	color: var(--main-steunkleur);
	font-weight: 500;
	line-height: 1.5;
}

.shirtinfo>p>a, .shirtinfo>a:visited {
	color: var(--main-steunkleur);
}

b {
	font-family: 'Caudex', serif;
	color: var(--main-steunkleur);
	font-weight: 900;
	line-height: 1.5;
	font-size: 16pt;
}

.werk {
	width: 100%;
}

/*–––––––––––GLIDER_________*/
.glider-prev,
.glider-next {
  position: absolute;
  top: 50%;                  /* 50% van de hoogte van de container */
  transform: translateY(-50%); /* center verticaal precies op de slider */
  background: var(--main-steunkleur);
  color: var(--main-achtergrondkleur);
  border: none;
  padding: 0.2rem 1rem 0.6rem 1rem;
  cursor: pointer;
  z-index: 2;
}

.glider-prev { left: -20px; }   /* links buiten de container */
.glider-next { right: -20px; }  /* rechts buiten de container */

.glider-contain h2 {
	color:var(--main-achtergrondkleur);
	background-color: var(--main-steunkleur);
	padding: 0.5rem;
}

.glider-contain p {
	font-weight: lighter;
}

/* .glider {
  display: flex;
}

.glider-slide {
  width: auto !important;
} */

/*Mediaqueries*/

@media (min-width: 0px) {
	.menuitem {
			flex:27%;
	}

	.patroon_element, .shirt_element {
		flex: 99.8%;
		max-width: 99.8%;
	}

	h2 {
		font-size: 10pt;
	}

	h3 {
		font-size: 10pt;
	}

	.patterndescript {
		font-size: 8pt;
	}

		.erik {
			font-size: 28pt;
		}

		.eriksbaan {
			font-size: 20pt;
		}

		.overerik {
			font-size: 12pt;
		}

	.glider-contain {
		width: 80%;          /* halve breedte */
		margin: 0 auto;      /* horizontaal centreren */
		position: relative;  /* nodig als je straks absolute knoppen erin wilt */
	}
}

@media (min-width: 768px) {
	.menuitem {
		flex:27%;
	}

	.patroon_element, .shirt_element {
		flex: 49.7%;
		max-width: 49.7%;
	}

	h2 {
		font-size: 10pt;
	}

	h3 {
		font-size: 10pt;
	}

	.patterndescript {
		font-size: 6pt;
	}

		.erik {
			font-size: 24pt;
		}

		.eriksbaan {
			font-size: 16pt;
		}

		.overerik {
			font-size: 12pt;
		}

	.glider-contain {
		width: 70%;          /* halve breedte */
		margin: 0 auto;      /* horizontaal centreren */
		position: relative;  /* nodig als je straks absolute knoppen erin wilt */
	}
}

@media (min-width: 992px) {
	.menuitem {
		flex:13%;
	}

	.patroon_element, .shirt_element {
		flex: 49.7%;
		max-width: 49.7%;
	}

	h2 {
		font-size: 13pt;
	}

	h3 {
		font-size: 10pt;

	}

	.patterndescript {
		font-size: 8pt;
	}

		.erik {
			font-size: 24pt;
		}

		.eriksbaan {
			font-size: 16pt;
		}

		.overerik {
			font-size: 12pt;
		}

	.glider-contain {
		width: 65%;          /* halve breedte */
		margin: 0 auto;      /* horizontaal centreren */
		position: relative;  /* nodig als je straks absolute knoppen erin wilt */
	}
}



@media (min-width: 1200px) {
	.menuitem {
		flex:13%;
	}

	.patroon_element, .shirt_element {
		flex: 33.1%;
		max-width: 33.1%;
	}

	h2 {
		font-size: 16pt;	
	}

	h3 {
		font-size: 12pt;

	}

	.patterndescript {
		font-size: 8pt;
	}

		.erik {
			font-size: 32pt;
		}

		.eriksbaan {
			font-size: 24pt;
		}

		.overerik {
			font-size: 16pt;
		}

	.glider-contain {
		width: 55%;          /* halve breedte */
		margin: 0 auto;      /* horizontaal centreren */
		position: relative;  /* nodig als je straks absolute knoppen erin wilt */
	}
}

@media (min-width: 1400px) {
	.menuitem {
		flex:13%;
	}

	.patroon_element, .shirt_element {
		flex: 33.1%;
		max-width: 33.1%;
	}

	h2 {
		font-size: 15pt;
	}

	h3 {
		font-size: 14pt;
	}

	.patterndescript {
		font-size: 10pt;
	}

		.erik {
			font-size: 32pt;
		}

		.eriksbaan {
			font-size: 24pt;
		}

		.overerik {
			font-size: 16pt;
		}


	.glider-contain {
		width: 45%;          /* halve breedte */	
		margin: 0 auto;      /* horizontaal centreren */
		position: relative;  /* nodig als je straks absolute knoppen erin wilt */
	}
}