@charset "UTF-8";

h1 {
	text-align: center;
}




/* ================================================== HEADER ================================================== */

	.headerLogo {
		max-width: 150px;
		height: auto;
	}

	.headerProfiel {
		max-width: 60px;
		height: auto;  
		margin-left: auto;
	}

	.menu-item {
		color: black;
	}

	header .menu a {
		text-decoration: underline;
	}

	header {
		display: grid;
		grid-template-columns: 190px 1fr 190px;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 10px;
		color: white;
	  }

	.header-logo-right {
		text-align: right;
		padding: 5px;
	}

	@media only screen and (max-width: 500px) {
		header {
			grid-template-columns: auto;
		}

		.header-logo, .header-logo-right {
			text-align: center;
		}
	}

/* ================================================== HOMEPAGE ================================================== */

/* ------------------------ ALGEMEEN ------------------------ */

	#ihomepage {
		text-align: center;
		font-size: 15px;
	}

	#titelhomepage {
		margin-top: 10em;
	}

	#titelhomepage p {
		text-align: center;
		font-size: 20px;
		color: gray;
	}
	
	.card {
		border: 2px solid #333; 
		border-radius: 10px;  
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.card-section {
		padding: 30px; 
	}


/* ------------------------ TAKENLIJST ------------------------ */


	#bekijkmeerknop {
		text-align: right;
	}

	#bekijkmeerknop a.button.secondary:hover {
	  background-color: #15519B; 
	}

	
	#bekijkmeerknop a.button {
		border-radius: 5em;
		background-color: #1F74DD;
	}


	#checkboxeshomepage a {
		text-decoration: underline;
	}

	#checkboxeshomepage {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	}

	#checkboxeshomepage li {
		margin-bottom: 10px;
	}

	#checkboxeshomepage input[type="checkbox"] {
		transform: scale(1.5);
		margin-right: 1em;
	}

	#checkboxeshomepage label {
		font-size: 16px;
	}

	#checkboxeshomepage {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#checkboxeshomepage input[type="checkbox"] {
		transform: scale(2);
	}

	#checkbox1 + label, #checkbox2 + label, #checkbox3 + label, #checkbox4 + label, #checkbox5 + label {
		background-color: #fff; 
		padding-right: 20px;
		padding-left: 20px;
		display: inline-block;
	}

	#checkbox1:checked + label {
		background-color: #2ecc71;
		color: #fff; 
	}

	#checkbox2:checked + label {
		background-color: #2ecc71;
		color: #fff; 
	}

	#checkbox3:checked + label {
		background-color: #2ecc71;
		color: #fff; 
	}

	#checkbox4:checked + label {
		background-color: #2ecc71;
		color: #fff; 
	}

	#checkbox5:checked + label {
		background-color: #2ecc71;
		color: #fff; 
	}

	#checkboxeshomepage li {
		margin-bottom: 10px;
	}


	#takenlijsthomepage {
		text-align: center;
	}

	#legendtakenlijst {
		text-align: center;
		margin-bottom: 2em;
	}

/* ------------------------ GEVOEL VAN VANDAAG ------------------------ */


	.pokemon1 input[type="radio"] {
	  -webkit-appearance: none;
	  appearance: none;
	  background-color: #F58080;    /* binnen kleur */
	  color:  #EE2424;    /* grote rand eromheen */
	  width: 1em;
	  height: 1em;
	  border: 0.001em #EE2424; /* kleine rand eromheen */
	  border-radius: 50%;
	}	

	.pokemon2 input[type="radio"] {
	  -webkit-appearance: none;
	  appearance: none;
	  background-color: #F2A960;    /* binnen kleur */
	  color: #EE8822;    /* grote rand eromheen */
	  width: 1em;
	  height: 1em;
	  border: 0.01em #EE8822; /* kleine rand eromheen */
	  border-radius: 50%;
	}	

	.pokemon3 input[type="radio"] {
	  -webkit-appearance: none;
	  appearance: none;
	  background-color: #F5D252;    /* binnen kleur */
	  color: #F3C41B;    /* grote rand eromheen */
	  width: 1em;
	  height: 1em;
	  border: 0.01em red; /* kleine rand eromheen */
	  border-radius: 50%;
	}	

	.pokemon4 input[type="radio"] {
	  -webkit-appearance: none;
	  appearance: none;
	  background-color: #6BC572;    /* binnen kleur */
	  color: #40A548;    /* grote rand eromheen */
	  width: 1em;
	  height: 1em;
	  border: 0.01em red; /* kleine rand eromheen */
	  border-radius: 50%;
	}	

	.pokemon5 input[type="radio"] {
	  -webkit-appearance: none;
	  appearance: none;
	  background-color: #307B36;    /* binnen kleur */
	  color: #235B28;    /* grote rand eromheen */
	  width: 1em;
	  height: 1em;
	  border: 0.01em red; /* kleine rand eromheen */
	  border-radius: 50%;
	}	

	input[type="radio"]::before {
	  content: "";
	  width: 0.2em;
	  height: 0.2em;
	  border-radius: 50%;
	  transform: scale(0);
	  transition: 120ms transform ease-in-out;
	}

	input[type="radio"]:focus {
	  outline: max(1px, 0.15em) solid currentColor;
	  outline-offset: max(2px, 0.15em);
	}


	#gevoelvanvandaaghomepage {
		text-align: center;
	}

	#legendgevoelvanvandaag {
		text-align: center;
		margin-bottom: 2.1em;
}

	.invulgevoel {
		margin-top: 2em;
	}

	#pokemonnietgoed, #pokemonmindergoed, #pokemongoed, #pokemonheelgoed, #pokemonsupergoed  {
		transform: scale(4);
		margin-bottom: 2em;
		margin-top: 0.5em;
	}


	.pokemons label,
	.pokemons input {
		display: block;
		margin: 0 auto;
		text-align: center;
	}

.pokemons label {
	margin-top: 3em;
}


	.pokemons {
		text-align: center;
	}

	.pokemon1, .pokemon2, .pokemon3, .pokemon4, .pokemon5 {
		display: inline-block;
		margin: 1.1em;
	}





	#verstuurknop a.button {
		border-radius: 5em;
		text-decoration: underline;
		background-color: #1F74DD;
	}


	#submitknop {
		text-align: right;
		margin-bottom: 1em;
	}

	input[type="text"] {
		width: 100%;
		padding: 8px;
		box-sizing: border-box;
	}

	input[type="submit"] {
		background-color: #1F74DD;
		color: white; 
		padding: 10px 15px;
		border: none;
		border-radius: 5em;
		font-size: 14px;
		text-decoration: underline;
		text-align: right;
	}

	input[type="submit"]:hover {
		background-color: #15519B; 
	}
	

/* ------------------------ DOELENOVERZICHT ------------------------ */


	#doelenoverzichtknop {
		text-align: right;
		margin-top: 3em;
	}

	#doelenoverzichtknop a.button {
		border-radius: 5em;
		text-decoration: underline;
		background-color: #1F74DD;
	}

	.doelenoverzichtcards{
	  display: flex;
	  flex-direction: row;
	}

	@media (max-width: 800px) {
	  .doelenoverzichtcards {
		flex-direction: column;
	  }
	}


/* ================================================== GROEIPAD ================================================== */


	#igroeipad {
		text-align: center;
		font-size: 15px;
	}

	#icon1leefveldgp, #icon2leefveldgp, #icon3leefveldgp, #icon4leefveldgp, #icon5leefveldgp, #icon6leefveldgp, #icon7leefveldgp, #icon8leefveldgp {
		width: 80px;
	}

	#iconsgp {
		display: flex;
		justify-content: center;
		margin-top: 2em;
	}

	@media only screen and (max-width: 63.9365em) {
		#icon1leefveldgp, #icon2leefveldgp, #icon3leefveldgp, #icon4leefveldgp, #icon5leefveldgp, #icon6leefveldgp, #icon7leefveldgp, #icon8leefveldgp {
			width: 40px;
		}
	}

/* ------------------------ PERCENTAGE TRACKERS ------------------------ */

	#underline {
		text-decoration: underline;
	}

	#progressbargezond, #progressbar1, #progressbar2, #progressbar3, #progressbar4, #progressbar5, #progressbar6, #progressbar7, #progressbar8 {
		height: 50px;
	}

	.primary.progress {
		height: 100%;
		border-top-right-radius: 5em;
		border-bottom-right-radius: 5em;
	}

	.progress-meter {
		height: 100%;
	}

	#progressbar1 {
		text-align: right;
		margin-top: 1em;
	}


	#progressbar2, #progressbar3, #progressbar4, #progressbar5, #progressbar6, #progressbar7, #progressbar8 {
		text-align: right;
		margin-top: 6em;
	}

	@media only screen and (min-width: 63.9365em) {
		#progressbar1 {
			text-align: right;
			margin-top: 6em;
		}
	}

	@media only screen and (max-width: 63.9365em) {
		#progressbardoel1, #progressbargezond, #progressbar1, #progressbar2, #progressbar3, #progressbar4, #progressbar5, #progressbar6, #progressbar7, #progressbar8 {
			height: 30px;
		}
	}


	#progressbars {
		margin: 3em;
	}

	.progress-meter {
		border-top-right-radius: 5em;
		border-bottom-right-radius: 5em;
	}


	#progressbars #progressbar1 .progress-meter {
		background-color: #EE2424;
	}

	#progressbars #progressbar2 .progress-meter {
		background-color: #EE8822;
	}

	#progressbars #progressbar3 .progress-meter {
		background-color: #F3C41B;
	}

	#progressbars #progressbar4 .progress-meter {
		background-color: #40A548;
	}

	#progressbars #progressbar5 .progress-meter {
		background-color: #0581C1
	}

	#progressbars #progressbar6 .progress-meter {
		background-color: #29439B;
	}

	#progressbars #progressbar7 .progress-meter {
		background-color: #854E9F;
	}

	#progressbars #progressbar8 .progress-meter {
		background-color: #E287B8;	
	}

	#progressbars #progressbar8 {
		margin-bottom: 7em;
	}

	/* ---------------------------- HOVERS tracker 1 ---------------------------- */
		#progressbars #progressbar1 .progress-meter::before {
			border: solid #EE2424;
			border-width: thick;
		}


		#progressbars #progressbar1 .progress-meter::before {
			content: '';
			position: absolute;
			top: 0;
			left: -2px;
			width: 0%; 
			height: 100%;
			background-color: none;
			transition: width 1s ease-out;
			transition-delay: 0.3s;
			border-top-right-radius: 5em;
			border-bottom-right-radius: 5em;
		}

		#progressbars #progressbar1 .progress-meter:hover::before {
			width: calc(0% + 400%); 
		}


		#progressbar1:hover .primary.progress {
			transform: scale(1.05);			
		}


	/* ---------------------------- HOVERS tracker 2 ---------------------------- */

		#progressbars #progressbar2 .progress-meter::before {
			border: solid #EE8822;
			border-width: thick;
		}


		#progressbars #progressbar2 .progress-meter::before {
			content: '';
			position: absolute;
			top: 0;
			left: -2px;
			width: 0%; 
			height: 100%;
			background-color: none;
			transition: width 1s ease-out;
			transition-delay: 0.3s;
			border-top-right-radius: 5em;
			border-bottom-right-radius: 5em;
		}

		#progressbars #progressbar2 .progress-meter:hover::before {
			width: calc(0% + 105.3%); 
		}


		#progressbar2:hover .primary.progress {
			transform: scale(1.05);			
		}


	/* ---------------------------- HOVERS tracker 3 ---------------------------- */

		#progressbars #progressbar3 .progress-meter::before {
			border: solid #F3C41B;
			border-width: thick;
		}


		#progressbars #progressbar3 .progress-meter::before {
			content: '';
			position: absolute;
			top: 0;
			left: -2px;
			width: 0%; 
			height: 100%;
			background-color: none;
			transition: width 1s ease-out;
			transition-delay: 0.3s;
			border-top-right-radius: 5em;
			border-bottom-right-radius: 5em;
		}

		#progressbars #progressbar3 .progress-meter:hover::before {
			width: calc(0% + 167%); 
		}


		#progressbar3:hover .primary.progress {
			transform: scale(1.05);			
		}

	/* ---------------------------- HOVERS tracker 4 ---------------------------- */

		#progressbars #progressbar4 .progress-meter::before {
			border: solid #40A548;
			border-width: thick;
		}


		#progressbars #progressbar4 .progress-meter::before {
			content: '';
			position: absolute;
			top: 0;
			left: -2px;
			width: 0%; 
			height: 100%;
			background-color: none;
			transition: width 1s ease-out;
			transition-delay: 0.3s;
			border-top-right-radius: 5em;
			border-bottom-right-radius: 5em;
		}

		#progressbars #progressbar4 .progress-meter:hover::before {
			width: calc(0% + 200%); 
		}


		#progressbar4:hover .primary.progress {
			transform: scale(1.05);			
		}

	/* ---------------------------- HOVERS tracker 5 ---------------------------- */

		#progressbars #progressbar5 .progress-meter::before {
			border: solid #0581C1;
			border-width: thick;
		}


		#progressbars #progressbar5 .progress-meter::before {
			content: '';
			position: absolute;
			top: 0;
			left: -2px;
			width: 0%; 
			height: 100%;
			background-color: none;
			transition: width 1s ease-out;
			transition-delay: 0.3s;
			border-top-right-radius: 5em;
			border-bottom-right-radius: 5em;
		}

		#progressbars #progressbar5 .progress-meter:hover::before {
			width: calc(0% + 400%); 
		}


		#progressbar5:hover .primary.progress {
			transform: scale(1.05);			
		}

	/* ---------------------------- HOVERS tracker 6 ---------------------------- */

		#progressbars #progressbar6 .progress-meter::before {
			border: solid #29439B;
			border-width: thick;
		}


		#progressbars #progressbar6 .progress-meter::before {
			content: '';
			position: absolute;
			top: 0;
			left: -2px;
			width: 0%; 
			height: 100%;
			background-color: none;
			transition: width 1s ease-out;
			transition-delay: 0.3s;
			border-top-right-radius: 5em;
			border-bottom-right-radius: 5em;
		}

		#progressbars #progressbar6 .progress-meter:hover::before {
			width: calc(0% + 222%); 
		}


		#progressbar6:hover .primary.progress {
			transform: scale(1.05);			
		}

	/* ---------------------------- HOVERS tracker 7 ---------------------------- */

		#progressbars #progressbar7 .progress-meter::before {
			border: solid #854E9F;
			border-width: thick;
		}


		#progressbars #progressbar7 .progress-meter::before {
			content: '';
			position: absolute;
			top: 0;
			left: -2px;
			width: 0%; 
			height: 100%;
			background-color: none;
			transition: width 1s ease-out;
			transition-delay: 0.3s;
			border-top-right-radius: 5em;
			border-bottom-right-radius: 5em;
		}

		#progressbars #progressbar7 .progress-meter:hover::before {
			width: calc(0% + 1000%); 
		}


		#progressbar7:hover .primary.progress {
			transform: scale(1.05);			
		}


	/* ---------------------------- HOVERS tracker 8 ---------------------------- */

		#progressbars #progressbar8 .progress-meter::before {
			border: solid #E287B8;
			border-width: thick;
		}


		#progressbars #progressbar8 .progress-meter::before {
			content: '';
			position: absolute;
			top: 0;
			left: -2px;
			width: 0%; 
			height: 100%;
			background-color: none;
			transition: width 1s ease-out;
			transition-delay: 0.3s;
			border-top-right-radius: 5em;
			border-bottom-right-radius: 5em;
		}

		#progressbars #progressbar8 .progress-meter:hover::before {
			width: calc(0% + 400%); 
		}


		#progressbar8:hover .primary.progress {
			transform: scale(1.05);			
		}



/* ================================================== DOELENOVERZICHT GEZONDHEID ================================================== */

	#idoelen {
		text-align: center;
		font-size: 15px;
	}

	#progressbargezond {
		margin-top: 1em;
		margin: 0 auto;
	}


	#terugknopdoel {
		margin-left: 1em;
		margin-top: 1em; 
	}

	#terugknopdoel a.button {
		border-radius: 5em;
		background-color: #1F74DD;
		text-decoration: underline;
	}

	#terugknopdoel a.button:hover {
		background-color: #15519B;
	}

	#progressbargezondperc {
		text-align: right;
		margin-top: .5em;
	}

	#progressbardoel #progressbargezond .progress-meter {
	  background-color: #EE2424;
	}

	#progressbardoel {
		margin-left: 3em;
		margin-right: 3em;
	}

	#checkboxesdoelen input[type="checkbox"] {
		transform: scale(1.5); 
		margin-right: 5px;
		background-color: black;
	}

	@media only screen and (min-width: 63.9365em) {
		#progressbargezond {
			width: 65%;
			margin-top: 0;
		}
	}
	

	#doelen {
		margin-top: 5em;
	}

	#doelencard1, #doelencard2, #doelencard3, #doelencard4 {
	  border: none; 
	}

	#doel1card, #doel2card, #doel3card, #doel4card {
		border: none;
		border: 5px solid #1F74DD;
		border-radius: 0.5em;
	}

	#doel1card a, #doel2card a, #doel3card a, #doel4card a {
		color: black;
		font-size: 30px;
		text-decoration: underline;
	}

	#doel1card p {
		color: black;
	}

	#doelencard1:hover, #doelencard2:hover, #doelencard3:hover {
		transform: scale(1.05);
		background-color: #C5DBF6;
	}

	#doelencard4 {
		background-color: #C5DBF6;
	}


	#doeloverzichticon {
		width: 80px;
	}

	@media only screen and (max-width: 63.9365em) {
		#progressbargezond {
			height: 30px;
			width: 80%;
		}
	}
	@media only screen and (min-width: 63.9365em) {
		#prodoelenoverzicht h2 {
			margin-top: 0.1em;
		}
	}


	#iconpercentagedoelenoverzicht {
		display: flex;
		justify-content: center;
	}

	#iconoverzicht {
		width: 100px;
		margin-bottom: 1em;
	}

	#prodoelenoverzicht {
		margin-top: 2em;
	}

/* ================================================== DOEL 1 ================================================== */

	#doel1cardd1 p {
		color: black;
	}

	#doelencard1d1 {
	  border: none; 
	}

	#doel1cardd1 {
		border: none;
		border: 5px solid #1F74DD;
		border-radius: 0.5em;
		text-align: center;
	}

	#doel1cardd1 a {
		color: black;
		font-size: 30px;
		text-decoration: underline;
	}


	#progressbardoel1 .progress-meter {
			background-color: #EE2424;
		}


	#checklistsub1 {
		background-color: grey;
	}


	#checkboxessubdoelen1, #checkboxessubdoelen2, #checkboxessubdoelen3 {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#checkboxessubdoelen1 li, #checkboxessubdoelen2 li, #checkboxessubdoelen3 li {
		margin-bottom: 10px;
	}

	#checkboxessubdoelen1 input[type="checkbox"], #checkboxessubdoelen2 input[type="checkbox"], #checkboxessubdoelen3 input[type="checkbox"] {
		transform: scale(1.5);
		margin-right: 1em;
	}

	#checkboxessubdoelen1 label, #checkboxessubdoelen2 label, #checkboxessubdoelen1 label {
		font-size: 16px;
	}

	#checkboxessubdoelen1, #checkboxessubdoelen2, #checkboxessubdoelen3  {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#checkboxessubdoelen1 input[type="checkbox"], #checkboxessubdoelen2 input[type="checkbox"], #checkboxessubdoelen3 input[type="checkbox"] {
		transform: scale(2);
	}

	#checkbox5 + label, #checkbox6 + label, #checkbox7 + label, #checkbox8 + label, #checkbox9 + label {
		background-color: #fff; 
		padding-right: 20px;
		padding-left: 20px;
		display: inline-block;
	}

	#checkbox6:checked + label, #checkbox7:checked + label, #checkbox8:checked + label, #checkbox9:checked + label  {
		background-color: #2ecc71;
		color: #fff; 
	}

	#checkboxeshomepage li {
		margin-bottom: 10px;
	}


	.checklistsub1, .checklistsub2, .checklistsub3 {
		margin-top: 3em;
	}

/* ================================================== FOOTER ================================================== */

	
	#informatiefolderfooter {
		text-decoration: underline;
	}
 
	#sitefooter {
		margin-top: 5em;
	}

	.marketing-site-footer {
		background: #d8d8d8;
		color: #8aa0ae;
		padding: 2rem 0 0;
		}

	.grid-container .cell h4, p {
		color: black;
	}

	.marketing-site-footer .marketing-site-footer-menu-social a {
		color: #fefefe;
	}

	.marketing-site-footer .column-block {
		margin-bottom: 30px;
	}

	.marketing-site-footer > .row {
		margin-bottom: 1rem;
	}

	@media screen and (max-width: 39.9375em) {
		.marketing-site-footer .columns {
			margin-bottom: 2rem;
		}
	}

	#footersocials {
		padding-top: 20px;
	}

	.marketing-site-footer-name {
		color: black;
		margin-bottom: 1rem;
		font-size: 2rem;
	}

	.marketing-site-footer-title {
		color: black;
		margin-bottom: 1rem;
		font-size: 1.25rem;
	}

	.marketing-site-footer-block {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		margin-bottom: 1rem;
	}

	.marketing-site-footer-block .fa {
		font-size: 2rem;
		color: #020304;
	}

	.marketing-site-footer-block p {
		margin-left: 1rem;
		line-height: 1.125rem;
	}

	.marketing-site-footer-bottom {
		background: #707070;
		padding: 1rem 0;
		margin-top: 20px;
	}

	.marketing-site-footer-bottom p,
	.marketing-site-footer-bottom .menu {
		margin-bottom: 0;
			color: white;
	}

	.marketing-site-footer-bottom .marketing-site-footer-bottom-links {
		-webkit-justify-content: flex-end;
			-ms-flex-pack: end;
				justify-content: flex-end;
	}

	.marketing-site-footer-bottom .marketing-site-footer-bottom-links a {
		color: white;
		text-decoration: underline;
	}

	@media screen and (max-width: 63.9375em) {
	.marketing-site-footer-bottom .marketing-site-footer-bottom-links {
		-webkit-justify-content: center;
			-ms-flex-pack: center;
				justify-content: center;
		}
	}

	@media screen and (max-width: 63.9375em) {
	.marketing-site-footer-bottom {
		text-align: center;
		}
	}

	.marketing-site-footer figure {
		display: flex;
	}

	#footerlogo {
		max-width: 50%;
		margin-bottom: 50px;
	}

	.socialsicon, .contacticon {
		color: black;
	}

	@media screen and (max-width: 63.9375em) {
		#sitefooter  {
			text-align: center;
		}
	}

	@media screen and (min-width: 63.9375em) {
		#footerlogo  {
			float: right;
		}
		#sitefooter h1 {
			text-align: left;
		}
	}

	@media screen and (max-width: 63.9375em) {
		.footersocials #footersocials1 .menu.marketing-site-footer-menu-social.simple {
			text-align: center;
		}
	}

	@media screen and (max-width: 63.9365em) {
		.footersocials1 ul.menu {
			justify-content: center;
			margin-bottom: 3em;
		}
	}

	@media only screen and (max-width: 63.9365em) {
		#adres1footer, #adres2footer, #adres3footer {
			display: flex;
			justify-content: center;
		}
	}

	@media only screen and (max-width: 63.9365em) {
		#adres3footer {
			margin-bottom: 3em;
		}
	}

	@media only screen and (max-width: 63.9365em) {
		footer {
			font-size: 14px;
		}
		#footerlogo {
			width: 200px;
		}
    }