@charset "UTF-8";
/* CSS Document */

/*******************************************************************************************
Algemeen
*******************************************************************************************/
body {
	width: 1020px;
	margin: auto;
	font-family: 'Ubuntu', 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 0;
	-webkit-box-shadow: 5px 5px 15px #A59FA0;
	box-shadow: 5px 5px 15px #A59FA0;
	background-size: 13% auto;
	background-repeat: repeat;
	background-image: url(../images/bg-site-turquoise.svg);
	background-attachment: fixed;
}

h1 {
	font-family: 'Amatic SC', cursive;
	font-size: 40px;
	font-weight: 500;
}

a {
	text-decoration: none;
}

p {
	font-size: 14px;
}

/*******************************************************************************************
Algemeen - Hoofdmenu
*******************************************************************************************/
header {
	clear: both;
	overflow: hidden;
	position: fixed;
	top: 0;
	background-color: #FFFFFF;
	width: 1020px;
	z-index: 1000;
	-webkit-box-shadow: 5px 0px 15px #A59FA0;
	box-shadow: 5px 0px 15px #A59FA0;
}

.logo {
	float: left;
	margin: 30px 0 30px 40px;
}

.hoofdmenu {
	float: right;
}

.hoofdmenu a {
	display: block;
	background-color: #683B10;
	padding: 20px 1em;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	margin: 105px 0 0 10px;
	border-bottom: 10px solid #38b5aa;
	text-decoration: none;
	color: #FFFFFF;
	letter-spacing: 0.05em;
}

.hoofdmenu li {
	float: left;
}

.hoofdmenu a:hover, .hoofdmenu a:active {
	background-color: #33a298;
}

/*******************************************************************************************
Home - Hero Image
*******************************************************************************************/
.heroimage {
	margin-top: 169px;
}

/*******************************************************************************************
Home - Welkom
*******************************************************************************************/
.welkom {
	background: #FFF;
}

.welkom img {
	margin: 40px 80px 40px 40px;
}

.welkomtekst {
	width: 63%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 30px;
}

.welkomtekst a {
	text-decoration: none;
	color:#38B5AA;
}

.welkom h1 {
	color: #683b10;
	margin: 40px 0px 10px 0px;
}

.welkom p {
	line-height: 24px;
	margin-top: 15px;
}

/*******************************************************************************************
Home - Overzicht recepten / overzicht tips
*******************************************************************************************/
.navrecepten-overzicht {
	padding: 0 20px 30px 20px;
	text-align: center;
	background-repeat: repeat;
	background-image: url(../images/bg-strepen-turquoise-48.png);
}

.navrecepten-overzicht h1 {
	display: none;
}

.navrecepten-overzicht div {
	display: inline-block;
	margin-left: 11px;
	margin-right: 11px;
	background-color: #FFFFFF;
	background-image: url(../images/bg-strepen-turquoise.png);
}

.navrecepten-overzicht div a:hover img {
	opacity: 0.8;
}

.navreceptentekst {
	background-color: #683b10;
	width: 268px;
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 40px;
	text-align: center;
	padding-left: 10px;
	padding-right: 20px;
	background-image: url(../images/pijl-wit.svg);
	background-repeat: no-repeat;
	background-position: 98% center;
	background-size: auto 70%;
}

.navreceptentekst:hover {
	background: #382105;
	background-image: url(../images/pijl-wit.svg);
	background-repeat: no-repeat;
	background-position: 98% center;
	background-size: auto 70%;
}

.card {
	margin: 30px 0 0 0;
}

.wrapper-tips-overzicht h1 {
	display: none;
}

/*******************************************************************************************
Home - Balk onder het recepten overzicht
*******************************************************************************************/
.balk-overzicht-recepten {
	font-family: 'Amatic SC', cursive;
	font-size: 40px;
	font-weight: 500;
	text-align: center;
	background-color: #33a298;
	padding: 10px 0;
}

.balk-overzicht-recepten a {
	text-decoration: none;
	color:#FFFFFF;
}

.balk-overzicht-recepten:hover {
	background-color: #288078;
}

/*******************************************************************************************
Algemeen - Stuur eigen recept in
*******************************************************************************************/
.wrapper-insturen {
	padding-top: 169px;
	color: #FFFFFF;
}

.insturen {
	background-color: #e73085;
	padding: 10px 0;
	margin: 5px 0;
}

.insturen h2 {
	font-family: 'Courgette', cursive;
	font-size: 30px;
	font-weight: 600;
	color: #FFFFFF;
	padding: 5px 0;
	text-align: center;
	text-shadow: 2px 2px 7px #000000;
}

.insturen:hover {
	background-color:#c52c72;
}

/*******************************************************************************************
Home - Kinder stukje
*******************************************************************************************/
.kind {
	background: #FFF;
}

.kind img {
	margin: 40px 80px 40px 40px;
}

.kindtekst {
	width: 63%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 30px;
}

.kind h1 {
	color: #683b10;
	margin: 40px 0px 10px 0px;
}

.kind p {
	line-height: 24px;
	margin-top: 15px;
}

.kind a {
	text-decoration: none;
	font-weight: 600;
	color: #38b5aa;
}

/*******************************************************************************************
Home - Overzicht tips
*******************************************************************************************/
.navtips-overzicht {
	padding: 0 20px 30px 20px;
	text-align: center;
	background-repeat: repeat;
	background-image: url(../images/bg-strepen-bruin-48.png);
}

.navtips-overzicht h1 {
	display: none;
}

.navtips-overzicht div {
	display: inline-block;
	margin-left: 11px;
	margin-right: 11px;
	background-color: #FFFFFF;
	background-image: url(../images/bg-strepen-turquoise.png);
}

.navtips-overzicht div a:hover img {
	opacity: 0.8;
}

.navtipstekst {
	background-color: #38b5aa;
	width: 268px;
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 40px;
	text-align: center;
	padding-left: 10px;
	padding-right: 20px;
	background-image: url(../images/pijl-wit.svg);
	background-repeat: no-repeat;
	background-position: 98% center;
	background-size: auto 70%;
}

.navtipstekst:hover {
	background: #2f958c;
	background-image: url(../images/pijl-wit.svg);
	background-repeat: no-repeat;
	background-position: 98% center;
	background-size: auto 70%;
}

/*******************************************************************************************
Home - Balk onder het recepten overzicht
*******************************************************************************************/
.balk-overzicht-tips {
	font-family: 'Amatic SC', cursive;
	color: #FFFFFF;
	font-size: 40px;
	font-weight: 500;
	text-align: center;
	background: #522f07;
	padding: 10px 0;
}

.balk-overzicht-tips a {
	text-decoration: none;
	color:#FFFFFF;
}

.balk-overzicht-tips:hover {
	background-color: #382105;
}

/*******************************************************************************************
Overzichts pagina - Recepten, tips, kinderen
*******************************************************************************************/
.cards-overzicht {
	clear: both;
	text-align: center;
	margin-top: 169px;
}

/*******************************************************************************************
Recept pagina
*******************************************************************************************/
.balk-recept-titel {
	font-family: 'Amatic SC', cursive;
	color: #FFFFFF;
	font-size: 40px;
	font-weight: 500;
	text-align: center;
	background: #522f07;
	padding: 10px 0;
}

/*Vormgeving van de drie blokken: ingrediënten, allergenen en bereidingswijze*/
.wrapper-recept {
	font-size: 14px;
	background-color: #FFFFFF;
	overflow: hidden;
	clear: both;
	display: flex;
	padding-bottom: 30px;
}

.wrapper-recept h2 {
	font-family: 'Amatic SC', cursive;
	color: #000;
	font-size: 32px;
	font-weight: 600;
}

aside {
	width: 285px;
	background-color: #FFFFFF;
	float: left;
	overflow: hidden;
	clear: both;
}

aside .tussenkop {
	font-weight: 900;
}

.ingredienten {
	padding: 30px;
}

.ingredienten div {
	padding-top: 15px;
}

.ingredienten li {
	border-left: thin solid #38B5AA;
}

.ingredienten li a {
	font-weight: 700;
	color:#38B5AA;
}

.ingredienten li:before {
	content: "-";
	display: inline-block;
	margin-right: 0.7em;
	margin-left: 1em;
	line-height: 1.5em;
}

.allergenen {
	background:#CDECEA;
	padding: 30px;
	margin-top: 40px;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

.allergeen-item {
	margin-top: 20px;
}

.allergenen-text {
	display: inline-block;
	width: 130px;
	margin-left: 10px;
	vertical-align: top;
	line-height: 1.3em;
}

.allergenen p {
	font-size: 12px;
}

.allergenen a {
	text-decoration: none;
	font-weight: 700;
	color:#38B5AA;
}

article .recept {
	max-width: 600px;
	float: left;
	overflow: hidden;
	clear: both;
}

.bereiding {
	padding: 30px 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


article .tussenkop {
	font-weight: 600;
	padding-top: 20px;
}

article li {
	line-height: 1.5em;
}

article li:before {
	content: "-";
	display: inline-block;
	margin-right: 0.7em;
	line-height: 1.5em;
}

.bereiding p {
	margin-top: 15px;
	line-height: 1.5em;
}

.bereiding a {
	font-weight: 600;
	color: #522f07;
}

/*Mijn ervaring*/
.mijn-ervaring {
	background-image: url(../images/bg-strepen-turquoise-licht-48.png);
	padding: 30px 300px 30px 30px;
	clear: both;
	overflow: hidden;
}

.mijn-ervaring h3 {
	font-family: 'Amatic SC', cursive;
	color: #000;
	font-size: 32px;
	font-weight: 600;
}

.mijn-ervaring p {
	margin-top: 15px;
	line-height: 1.5em;
}

.mijn-ervaring a {
	font-weight: 600;
	color: #522f07;
}

.p-top {
	padding-top: 20px;
}

/*******************************************************************************************
Formulieren: Contact en Stuur recept in 
*******************************************************************************************/
.contactgegevens {
	font-size: 14px;
	line-height: 1.5em;
	padding: 50px;
	margin-top: 169px;
	background: #FFFFFF;
	border-bottom: 1px solid #CDECEA;
}

.contactgegevens h2 {
	font-weight: 700;
	color: #38B5AA;
}

form {
	font-size: 14px;
	padding-top: 50px;
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 50px;
	background: #FFFFFF;
}

form h2 {
	font-weight: 700;
	color: #38B5AA;
}

label {
	display: inline-block;
	width: 100px;
	vertical-align: top;
	padding-right: 90px;
}

form div {
		margin-top: 30px;
	margin-bottom: 30px;
}

form [type=text] {
	height: 20px;
	width: 200px;
}

form .let-op {
	font-size: 12px;
	font-weight: 900;
	font-style: italic;
	padding-left: 194px;
}

form [type=submit] {
	background-color: #38B5AA;
	border: none;
	padding: 10px 20px;
	font-weight: 800;
	font-size: 16px;
	margin-left: 194px;
	color: #FFFFFF;
	border-radius: 9px;
}

form [type=submit]:hover {
	background-color: #522F07;
	cursor: pointer;
}

.bedankt h1 {
	padding-left: 100px;
}

/*******************************************************************************************
Over
*******************************************************************************************/
.over {
	background: #FFF;
	padding-top: 189px;
}

.over img {
	margin: 40px 80px 40px 40px;
}

.overtekst {
	width: 63%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 30px;
	padding-right: 59px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.over h1 {
	color: #683b10;
	margin: 40px 0px 10px 0px;
}

.over p {
	line-height: 24px;
	margin-top: 15px;
}

.over a {
	font-weight: 600;
	color: #38B5AA;
}

/*******************************************************************************************
Bedankt
*******************************************************************************************/
.bedankt {
	background: #FFF;
	padding-top: 189px;
}

.bedankt h1 {
	color: #683b10;
	margin: 40px 0px 10px 0px;
}

.bedankt p {
	line-height: 24px;
	margin: 20px 0px 10px 100px;
}

/*******************************************************************************************
Algemeen - Footer
*******************************************************************************************/
footer {
	clear: both;
	overflow: hidden;
	font-size: 12px;
	background: #FFF;
}

.footerdisclaimer {
	float: left;
	width: 350px;
	margin: 30px 30px 30px 30px;
	line-height: 20px;

}

.footerdisclaimer h3 {
	font-weight: 600;
	color: #38b5aa;

}

.footermenu {
	float: left;
	width:  150px;
	margin: 30px 0 30px 30px;
	font-size: 12px;
	color: #000000;
}

.footermenu a:link, .footermenu a:visited {
	text-decoration: none;
	line-height: 20px;
	font-weight: 600;
	color: #000000;
}

.footermenu a:hover, .footermenu a:active {
	color: #38b5aa;
}

.footer-lijn-boven {
	border-top: thin solid #CDECEA;
}

.footericons {
	float: left;
	margin: 60px 0 30px 166px;
}

.footericons h3 {
	font-weight: 600;
	color: #38b5aa;
	margin-bottom: 15px;
	text-align: right;

}

.footericons nav {
	margin-top: 30px;
}

.footericons li {
	display: inline;
	margin-left: 30px;

}