@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Glass+Antiqua&display=swap');


/* ============= BASIS ====================== */
:root {
  --bruin  : #736357;
  --bruin_l: #d7c4b7;
  --rood   : #e15340;
  --rood_d : #793026;
  --rood_l : #ffc5bd;
  --groen  : #8cc63f;	
  --groen_d: #6e9539;	
  --snow   : #f7f7f7;	
  --gray_d : #313130;	
  --gray_m : #5f5f5f;	
  --gray_l : #cecece;	
	--blauw  : #3e82ba;
}

.bruin {background: var(--bruin); }
.rood  {background: var(--rood); }
.groen {background: var(--groen); }
.blauw {background: var(--blauw); }
.grijs {background: var(--grijs_m); }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
} 

html { width: 100%; height: 100%; }

body {
	height: 100%; /*stick bottom footer*/
  font: normal 400 14px 'Quicksand', sans-serif;
	line-height: 1.3rem;
  color: var(--gray_d); 
  height: 100%;
  background: var(--snow);	
	display: flex;
	flex-direction: column; /*stick bottom footer*/
}

h1 { font: normal 300 16px 'Glass Antiqua', sans-serif; color: var(--rood); padding: 0.5rem 0; }
h2, h3, h4, h5, small { font: normal 300 16px 'Work sans', sans-serif; }

h2    { font-size: 0.95rem; text-transform: uppercase; }
h3    { font-size: 1rem; font-weight: 400; }
h4    { font-size: 0.95rem; font-weight: 200; }
h5    { font-size: 1rem; text-transform: uppercase; }
p     { font-size: 0.8rem; padding-top: 0.5rem; }

.fa, .fab, .fad, .fal, .far, .fas {	font-family: "Font Awesome 5 Free";	display: block; }

a { color: var(--gray_l); }

/* ============= ============= ============= */
hr {
	width: 25%;
	height: 0.05rem;
	border: 0;
	background: rgba(0,0,0);
	border-radius: 5px;
	margin: 0.1rem 0 0.3rem 0; }

img { max-width: 100%; display: block; }

section, footer, .base { position: relative; }

.content { 
	margin: 5rem 0 0 0; 
	display: flex;
	flex-direction: column; /* voor stretch section.kennis */
	flex: 1 0 auto; /*stick bottom footer*/
} 

section { 
	min-height: 20rem;
	padding: 2rem 3rem 3rem 3rem; 
	box-shadow: 0px 23px 13px -26px rgba(108, 108, 108, 0.52);
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: #5f5f5f;
	display: flex; /* voor uitlijning .btn onderop sections */
	flex-flow: column nowrap;
}

/* vult ruimte */
.contact, .portfolio { flex: 1 1 auto; min-height: 31rem; }

article {
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

article > h2 { 
	font-size: 2.1rem;
	font-weight: 500;
	text-align: center;
	width: 100%;
	font-family: 'Glass Antiqua', cursive;
	text-transform: inherit; 
	padding: 1rem 0 1.5rem 0; }

section.profiel.home { min-height: 40rem; justify-content: center; }
	
/* donkere achtergrond */
/* .profiel, .skills, .contact.full */
.profiel, .skills, .opleiding.home, .contact.full {
	color: var(--gray_l); 
	background-color: rgba(23, 23, 23);
}

.gradient1 {
	background-image: linear-gradient	(90deg,
	  rgb(227, 227, 227) 0%, 
  	rgba(255,255,255,0.6) 40%,
		rgb(230, 230, 230) 100%);
}
.profiel.home .base       { justify-content: center; }

.profiel.pagina-intro   {  padding: 2rem 3rem 4rem 3rem; }
.profiel.pagina-intro p {
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.03rem;
	color: var(--gray_l);
}
.profiel-foto img          { width: 15rem; margin: 0 auto; }

.profiel-foto + .base > h1 { 
	font-size: 1.5rem;
	padding: 0 0 0.5rem 0; }

section.profiel h2, .contact h2 {
	font-family: 'Glass Antiqua', cursive;
	font-size: 1.8rem;
	line-height: 1;
	text-transform: inherit; }

.profiel button {
	font-family: 'Quicksand', sans-serif;
	line-height: 1.7;
	outline: none; 
	background: none; }

.base, .periode {
	width: 100%;
	display: flex;
	flex-flow: column;
	flex-basis: 100%;
	padding: 1rem 0; }

.kennis figure img { width: 30%; 	margin: 0 auto; }

.opleiding h3 { padding: 0 0 0.3rem 0;	text-transform: uppercase;}
.opleiding h5 { padding: 0 0 0.3rem 0; text-transform: initial;}

.opleiding .base {
	align-items: center;
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: var(--gray_l); }

/*.opleiding .noborder       { border: none; } */
.opleiding .base:hover img { filter: grayscale(0); }

.opleiding img { 
	width: initial;
	/*filter: grayscale(1); */
	transform: scale(0.5); }

	.opleiding.full img { 
		filter: grayscale(1); }

section.contact.full { justify-content: flex-start; }

/* ============= CONTACT ============= */ 
.contact h2 {
	font-family: 'Glass Antiqua', cursive;
	font-size: 2rem;
	text-transform: initial;
	text-align: center;
	padding: 0 0 1rem 0; }

a .mail { font-size: 0; }

.mail {
	background-image: url(../img/mailbox-down.svg);
	background-repeat: no-repeat;
	background-position-x: center;
	height: 10rem;
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: var(--groen_d); }

.mail:hover { background-image: url(../img/mailbox-smile-up-rood.svg); }

fieldset { 
	width: 100%;
	display: flex;
	flex-flow: column wrap;
}

input, textarea {
	font: normal 400 0.8rem 'Quicksand', sans-serif;
	background: #171717;
	border-bottom: 1px solid #5f5f5f;
	border-width: 0 0 1px 0;
	color: var(--snow);
	padding: 1.5rem 0 0.1rem 0;
	box-shadow: none;
}

input:-moz-placeholder,
input:focus {
  box-shadow:none !important;
}

textarea {
	border-width: 1px;
	border-style: solid;
	border-color: #5f5f5f;
	margin-top: 1.5rem;
	padding: 0.5rem;
}

input:required { box-shadow: none; }

input:invalid {
  box-shadow: none;
	outline: none;
}

label[for="bericht"] { color: gray; }
fieldset.bericht {
	font-size: 0.8rem;
	margin: 1.5rem 0 0 0;
}

.verzendBtn {
	border-radius: 3px;
	border: thin solid var(--groen);
	margin-top: 1rem;
	padding: 0.3rem 1rem;
}

/* ============= FANCYBOX ============= */ 
.fancybox-content {
	border-radius: 10px;
	border: 6px solid var(--bruin); }

.fancybox-button.fancybox-close-small {
	background: transparent;
	color:var(--gray_d); 
	opacity: 1; }

.fancybox-image { border-radius: 5px; }
.fancybox-button { width: 60px; height: 60px; }

button.fancybox-button > svg {
	background: var(--groen);
	border-radius: 50%;
	width: 2.3rem;
	height: 2.3rem; }

/* ============= FOOTER ============= */ 
footer {
	background: var(--gray_d);
	padding: 2rem; 
	flex-shrink: 0;  /*stick bottom footer*/ }

footer .base { padding: 0 0 0 1rem; }

footer img   { width: 60%; }

.footer-nav {
	width: 14rem;
	padding: 1rem 0 0 0.3rem; }

.footer-nav li a {
	letter-spacing: 0.02rem;
	color: var(--bruin_l);
	width: 100%;
	display: block;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); }

.footer-nav li a.selected { color: var(--groen); padding: 0; }
.footer-nav li a:hover    { color: var(--rood); }

footer small, footer small a {
	width: 100%;
	font-size: 0.8rem;
	color: var(--bruin);
	letter-spacing: 0.02rem;
	padding: 1.5rem 0 0 0.2rem; }

	footer small a:hover { color: var(--rood); }

/* ============= BTN ============= */
.btn {
	width: 10rem;
	border: 1px solid #5f5f5f;
	border-radius: 50px 50px 0 0;
/*	font-size: 0.75rem; */
	color: var(--gray_l);
	text-align: center;
	display: block;
	margin: 0 auto;
	position: absolute;
	bottom: -0.05rem;
  transition: all 200ms ease-in; 
	cursor: pointer; 
	align-self: center; }

.btn a { 
	font-size: 0.75rem; 
	color: var(--gray_l); 
	display: block;
	letter-spacing: 0.05rem; }

.btn a.dark { color: var(--gray_d); }
	/*.opleiding .btn a, .portfolio .btn a, .kennis .btn a { 
		color: var(--gray_d); */

.btn:hover { 
  padding: 0.1rem 0 0.3rem 0; 
	transition: all 150ms ease-out; }

#text { display: none; } /* lees verder text*/


/* =============TO TOP BUTTON ============= */ 
#button {
  display: inline-block;
  background-color: var(--rood);
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 1rem 0 0 1rem;
  position: fixed;
  bottom: 2rem;
  right: 0;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
	background-image: url(../img/sprite.svg);
	background-position: 8px -17px;
	background-repeat: no-repeat;
	background-size: 9rem;
	transition: all 400ms ease-in;
}

#button:hover {
	cursor: pointer;
  background-color: var(--bruin);
	background-position: 8px 8px; 
}

#button:active { background-color: #555; }
#button.show   { opacity: 1; visibility: visible; }