@font-face
{
	font-family:"MabryPro";
	src: url("/fonts/mabry_pro_medium.ttf") format("truetype");
	font-weight: bold, normal;
}

@font-face
{
	font-family:"HelveticaNeue";
	src: url("/fonts/HelveticaNeue_Medium.ttf") format("truetype");
	font-weight: bold;
}

@font-face
{
	font-family:"HelveticaNeueThin";
	src: url("/fonts/HelveticaNeue_Thin.ttf") format("truetype");
	font-weight: bold;
} 


* { box-sizing: border-box; position: relative; }
html { scroll-behavior: smooth; }

header
{
	top: 32px;
	height: auto; 

	box-shadow: 0 0px 1px  rgba(0,0,0,0), 
		            0 0px 2px  rgba(0,0,0,0), 
		            0 0px 4px  rgba(0,0,0,0), 
		            0 0px 8px  rgba(0,0,0,0),
		            0 0px 16px rgba(0,0,0,0);

	transition: 0.5s;
}

body
{
	height: 100%;
	width: 100%;
	margin: 0px auto;
 	padding: 0px;
 	background-color: #ffffff;

 	letter-spacing: .05rem;
 	font-size: clamp(1rem,3vw,1.15rem);
 	font-family: "HelveticaNeueThin";
 	line-height: 150%;
	color: #1d1d1b;  
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  list-style: none;
  text-align: center;
}


strong { font-family: "HelveticaNeue"; } 

a
{
	font-family: "capitolium-2"; 
	color: #bf9a4d; 
	font-weight: 300;
	font-size:110%;
	text-decoration: none;
}

footer
{
	margin-top: 15px;
	width: 100%;
}

img 
{ 
	width: 100%;
	height: auto;
}

.blok{ padding: clamp(20px,6vw,80px); }
.blok > * { margin: 15px auto; max-width: 960px; padding: 10px;}
.content .blok > * { width: 100%; }

.splitText{display: flex; justify-content: space-between;}
.splitText p,.splitText h6 {margin: 4px 0px;}
.menu-open { overflow-y: hidden; }

.hamburger
{
	display: none;
	width: 48px;
	height: 48px;
	color: #1d1d1b;
	font-size: 24px;
	text-align: center;
	align-items: center;
}


.hamburgerIcon
{
	width: 24px;
	height: 24px;
}

footer .hamburger
{
	color: #ffffff;
}

.hamburger * { margin: auto; }

.container
{
	margin: auto;
	max-width: 1240px;
}

.split
{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.third, .third2
{
	display: grid;
	grid-template-columns: 2fr 1fr;
}

.pointer { cursor: pointer; }

.Aubergine { background-color: #526e74; }
.LichtRoze { background-color: #f4efe1; }
.Roze { background-color: #c7d4cc; }
.Wit { background-color: #ffffff; }
.Zwart { background-color: #1d1d1b; }

.LichtRoze a{color: #bf9a4d; }
.topBar
{
	width: 100%;
	height: clamp(16px,4vw,32px);
}

.content li {	list-style: circle; }

.content .contactgegevens li { list-style: none; }

nav a {	color: #1d1d1b; text-transform: uppercase;}

.chosen
{
	color: #bf9a4d; 
}

footer ul {min-height: 128px;}
footer li {color: #ffffff;}
footer a {color: #ffffff; 	text-transform: uppercase;}
footer .chosen {color: #ffffff;}

h1,h2,h6
{ 
	line-height: normal;
	font-weight: normal;
	font-family:"Marydale"; 
	text-transform: none; 
	font-size:180%; 
	color: #bf9a4d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2
{
	font-family: "Marydale";
	text-transform: none;
}

h6
{ 
	display: inline-block;
		text-align: left;
	font-size:100%; 
		margin: 0;
		min-width: 70px;
}


.Roze h2{color: #000000;}
.Roze p{color: #000000;}
.Roze a{color: #000000;}

.WerkwijzeImg
{
	background-image: url('http://corinpedicure.nl/images/werkwijze.jpg');
	background-position: center;
	background-size: cover;
	min-height: 192px;
}

.Logo
{
	text-align: center;
	margin: 32px 0px;
	font-family:"Marydale";  
	text-transform: none;
	font-size:clamp(.75rem,5vw,3rem); 
	font-weight: normal;
	color: #1d1d1b; 
	letter-spacing: .2rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.geel{
	color: #bf9a4d;
}
footer .Logo { color: #ffffff; }

.Logo img
{
	width: auto;
	height: clamp(4.5rem, 7vw, 50.5rem);
}

.nav
{
	padding: 10px clamp(10px,2vw,60px);;
	display: flex;
	justify-content: space-around;
	list-style: none;
}

.content
{
	margin: 15px 0;
	text-align: left;
	min-height: calc(100vh - 214px);
}

.separator{ margin: 15px 0; }

footer .blok
{
	padding: 10px;
}


a:after
{    
  background: none repeat scroll 0 0 transparent;
  bottom: -4px;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #bf9a4d;
  transition: width 0.6s ease 0s, left 0.6s ease 0s;
  width: 0%;  
}

a:hover:after
{ 
  width: 100%; 
  left: 0%;
}

.chosen:after
{
	width: 100%;
	left: 0%;
}

.l a:hover:after
{
	width: 0%;
}

footer a:after
{
	background: #ffffff;

}


.openingstijden, .contactgegevens
{
	margin: 0px 20px;
	text-align: left;

	font-family: ff-tisa-sans-web-pro, sans-serif;
	font-weight: 400;
	font-style: thin;
	background-color: #f4efe1;
}
.openingstijden ul, .contactgegevens ul
{
	padding: 0px 16px;
}
.prijslijst ul {padding-left: 20px;}
.openingstijden > p, .contactgegevens > p 
{
	padding: 0px 16px;
}
.openingstijden table, .contactgegevens table
{
	padding: 0px 16px;
}
footer .openingstijden, footer .contactgegevens
{
	text-align: right;
}

#map { min-height: 384px; height: 100%;}

#cntFrm
{
	display: flex;
	flex-direction: column;
}

#cntFrm > *
{
	width: 100%; 
	padding: 10px;
	margin: 10px 0px;
}

#cntFrm > textarea
{
	min-height: 256px;
	resize: vertical;
}

table { width: 100%; }
tr { margin: 16px 0; border-spacing: 5em; }
td:last-child{ text-align: right; }
strong{ font-weight: bold; }

button
{
  background-color: transparent; /* Green */
  border:2px solid #bf9a4d;
  padding: 10px;
  color: #bf9a4d;

  background-image: 
  linear-gradient(to right, white 50%, #bf9a4d 50%),
  linear-gradient(to right, #bf9a4d 50%, transparent 50%);

  -webkit-background-clip: text,padding-box;
  background-clip: text,padding-box;
  -webkit-text-fill-color: transparent;
  color: transparent;  
  background-size: 200% 100%;
  background-position: right;
  transition: background-position 0.5s ease-in-out;

  width: 192px;
}

button:hover { background-position: left; }


#popupback
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-color: rgba(0, 0, 0, 0.75);
}

#overlay
{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

	z-index: 999999;
	background-color: white;
	padding: 40px;

	box-shadow: 0 0px 1px  rgba(0,0,0,0.12), 
	            0 0px 2px  rgba(0,0,0,0.12), 
	            0 0px 4px  rgba(0,0,0,0.12), 
	            0 0px 8px  rgba(0,0,0,0.12),
	            0 0px 16px rgba(0,0,0,0.12);
}

.dismiss {	text-align: right; }



.mobilemenu
{
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	z-index: 9999999;

	transform-origin: top;
	transform: scaleY(0.0);
	transition: 0.25s;
	transition-delay: 0.5s;
}


.exit
{
	padding: 20px;
	padding-right: 32.5px;
	text-align: right;
	font-size: 24px;

	opacity: 0;
	transition-duration: 0.25s;
	transition-delay: 0.25s;
}

.scrollview
{
	height: calc(100vh - 64px);

	opacity: 0;
	transition-duration: 0.25s;
	transition-delay: 0s;
}

.mobilenav
{
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: auto;
  white-space: nowrap;
  
}

.mobilenav *
{
	display: block;
	padding-top: 16px;
	padding-bottom: 16px;
	color: #ffffff;
}

.mobilenav > li a
{
	font-size:clamp(.75rem,6vw,2rem);
}
.mobilenav li a:after
{
	left: 0%;
	background: #ffffff; 
}

.mobilenav li .chosen:after
{
	width: 50%;
}

.mobilenav li a:hover:after
{ 
  width: 50%; 
  left: 0%;
}

.menu-open .mobilemenu
{
	transform-origin: top;
	transform: scaleY(1.0);
	transition: 0.125s;
}

.menu-open .scrollview
{
	opacity: 1;
	transition-duration: 0.25s;
	transition-delay: 0.25s;
}

.menu-open .exit
{
	opacity: 1;
	transition-duration: 0.125s;
	transition-delay: 0.125s;
}

.fa-times
{
	color: #ffffff;
}


/* Style the header */
.header 
{
	z-index: 999;
  background: #ffffff;
  position: fixed;
  width: 100%;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky 
{
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 0px 1px  rgba(0,0,0,0.03), 
	            0 0px 2px  rgba(0,0,0,0.03), 
	            0 0px 4px  rgba(0,0,0,0.03), 
	            0 0px 8px  rgba(0,0,0,0.03),
	            0 0px 16px rgba(0,0,0,0.03);
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
@media screen and (max-width: 1000px) 
{
	header{top: 0px;height: 92px;}
	.header
	{
		  position: relative;
  	width: 100%;
	}
	
	.scroll .header
	{
		position: fixed;
	}
	.scroll main
	{
		padding-top: 92px;
	}

	.sticky  
	{
	  padding-top: 92px;
	}
	.scroll .sticky
	{
		padding-top: 0px;
	}

	.sticky
	{
		transition: 0.5s;
		height: 92px;
	}

	.container
	{
		height: calc(100% - 16px);
	}

	.container .l
	{
		height: 100%;
	}
}
@media screen and (min-width: 1000px)
{

}

.scrollbottom header
{
	top: -214px;
	/*transform: scaleY(0);*/
	transition: 0.25s;
}

.scrollbottom	.sticky
{
  padding-top: 0px;
  transition: 0.5s;
}