html,
body {
	background: url('/images/polygon_backgrounds/polygon_background_1.svg');
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	padding: 0;
	margin: 0;
	font-size: small;
	font-family: "Avenir", Arial, Helvetica, sans-serif;
}

/* Basic text */
p, h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	color: hsl(0, 0%, 20%);
	cursor: default;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 13px;
}

h6 {
	font-size: 10px;
}

a:hover,
a:active {
	cursor: pointer;
	text-decoration: underline;
}

/* Basic input */
textarea,
input,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
	-webkit-appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 30px hsl(0, 0%, 93%);
}

button {
	background-color: hsl(22, 90%, 55%);
	padding: 0;
	color: white;
	font-size: 15px;
	cursor: pointer;
	outline: none;
}

/* Keyframes */
@-webkit-keyframes typing {

	from {

		width: 0px;
	}

}

@-webkit-keyframes blink-caret {

	50% {

		border-color: transparent;
	}

}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}

	60% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}

/*-*-*-*- Main-intro -*-*-*-*/
#main-intro {
	position: relative;
	width: 100vw;
	height: 100vh;

	background: url('/images/polygon_backgrounds/polygon_background_1.svg');
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	background-color: hsl(225, 55%, 25%);
}

#main-intro ul {
	position: absolute;
	top: 45%;
	left: 50%;
	width: 90vw;
	padding: 0;
	margin: 0;
	color: white;
	text-align: center;
	list-style: none;
	transform: translate(-50%, -50%);
}

#main-intro p {
	margin: 15px;
	color: white;
	font-size: 20px;
}

#main-intro input {
	width: 30vw;
	min-width: 200px;
	max-width: 400px;
	height: 40px;

	border: none;
	border-radius: 5px 0px 0px 5px;

	padding: 0;
	font-size: 15px;
	line-height: 40px;
	outline: none;
	text-indent: 10px;
}

#main-intro input.validator {
	display: none;
} 

#main-intro .button {
	display: inline-block;
	width: 10vw;
	min-width: 100px;
	max-width: 200px;
	height: 40px;

	background-color: hsl(22, 90%, 55%);
	border: none;
	border-radius: 0px 5px 5px 0px;

	padding: 0;
	color: white;
	font-size: 15px;
	cursor: pointer;
	outline: none;
	line-height: 40px;
	transition: .3s ease-in-out;
}

#main-intro .button:hover {
	box-shadow: inset 0 0 0 1px #cc4b00,
					  0 0 0 4px rgba(255,126,51,.6),
					  0 2px 3px -1px rgba(153,56,0,.6);
	
}

/* Main-intro-title */
#main-intro-title {
	margin-bottom: 5vw;
	color: white;
	font-size: 5vw;
	font-weight: lighter;
	cursor: default;
}

#main-intro-title:after {
	content:'_';
}

/* Main-intro-mail */
#main-intro-mail {
	display: none;
	position: absolute;
	left: 50%;

	min-width: 300px;

	border-radius: 5px;

	margin: 25px auto;
	text-align: center;
	transform: translate(-50%);
}

/* pijltje op div */
#main-intro-mail:after {
	content: ' ';
	position: absolute;

	bottom: 99%;
	left: 50%;

	height: 0;
	width: 0;

	border: 10px solid transparent;
	border-bottom-color: white;

	margin-left: -10px;
	pointer-events: none;
}

#main-intro-mail p {
	width: 100%;
	height: 40px;

	background-color: hsl(0, 0%, 98%);
	border-radius: 5px 5px 0px 0px;

	margin: auto;
	color: hsl(0, 0%, 20%);
	font-size: 15px;
	line-height: 40px;
}

#main-intro-mail a {
	display: block;
	padding: 5px;
	color: white;
	text-decoration: none;
}

#main-intro-mail input {
	border-radius: 0px 0px 0px 5px;

	padding: 0;
	text-indent: 10px;
	outline: none;
}

#main-intro-mail button {
	border-radius: 0px 0px 5px 0px;
}

#main-intro-message {
	width: fit-content;
	width: -moz-fit-content;

	background-color: rgba(255, 255, 255, .1);
	border: 1px solid white;
	border-radius: 10px;

	padding: 20px;
	margin: auto;
	text-align: center;
	z-index: 1;
}

#main-intro-message h1 {
	color: white;
	font-size: 35px;
}

#main-intro-message p {
	color: white;
	font-size: 20px;
	padding-top: 10px;
}

#main-intro-message img {
	width: 35px;
	height: 35px;

	padding: 0 10px;
	filter: invert(1);
	vertical-align: -10%;
}

#main-intro-mail-done {
	width: fit-content;

	background-color: rgba(255, 255, 255, .1);
	border: 1px solid white;
	border-radius: 10px;

	padding: 15px 15px 5px 15px;
	margin: 25px auto;
}

#main-intro-mail-done h1 {
	color: white;
	font-size: 40px;
}

#main-intro-mail-done img {
	width: 35px;
	height: 35px;

	filter: invert(1);
}

/*-*-*-*- Algemene-voorwaarden / #link-kapot -*-*-*-*/
#algemene-voorwaarden {
	display: none;
}

#link-kapot,
#algemene-voorwaarden {
	background-color: hsl(0, 0%, 98%);
	color: hsl(0, 0%, 20%);
}

#link-kapot h1,
#algemene-voorwaarden h1 {
	text-align: center;
}

#link-kapot ul,
#algemene-voorwaarden ul,
#link-kapot .content {
	max-width: 800px;
}

#algemene-voorwaarden button {
	display: flex;
	margin: auto;

	background-color: hsl(0, 0%, 98%);
	border: 1px solid rgba(254, 62, 75, 1);
	border-radius: 5px;

	padding: 10px;

	color: rgba(254, 62, 75, 1);
	font-size: 0.7em;
	letter-spacing: 2px;
	text-transform: uppercase;

	cursor: pointer;
	transition: 0.4s ease-out;
	outline: none;
}

#algemene-voorwaarden button:hover {
	border-color: rgba(0, 0, 0, 0.5);
	color: hsl(0, 0%, 20%);
}

/*-*-*-*- Scroll-down-arrow -*-*-*-*/
.scroll-down-arrow {
	position: absolute;
	top: 80vh;
	left: 50vw;
	padding: 0;
	margin: 0;
	animation: bounce 2.5s infinite;
}

.scroll-down-arrow img {
	width: 40px;
	height: 40px;
	transform: rotate(270deg);
	filter: invert(1);
}

/*-*-*-*- Parallax -*-*-*-*/
.parallax {
	position: relative;
	height: 15vw; 
	min-height: 100px;
	max-height: 300px; /* mozilla */
}

#banner-1 {
	background: url('/images/polygon_backgrounds/polygon_background_2.svg');
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#banner-2 {
	background: url('/images/polygon_backgrounds/polygon_background_3.svg');
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.polygon-banner {
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100vw;
}

.polygon-banner-rotate {
	position: relative;
	top: -5px;
	left: 0;
	width: 100vw;
	transform: rotate(180deg);
}

/*-*-*-*- Section -*-*-*-*/
section {
	display: flex;

	background-color: hsl(0, 0%, 98%);

	padding: 0 20px;
	margin: 0 auto;

	font-size: 16px;
	line-height: 1.4;
}

section p {
	text-align: justify;
}

.content {
	padding: 40px 5vw;
	margin: auto;
}

#uitleg h1,
#voorbeelden h1 {
	text-align: center;
}

#watiseknip p {
	max-width: 800px;
	line-height: 28px;
}

#voorbeelden {
	height: 100%;
	max-height: 1000px;
}

/*-*-*-*- Stappenplan -*-*-*-*/
#stappenplan {
	margin-top: 60px;
}

#stappenplan h1,
#stappenplan h5 {
	text-align: center;
}

.stappenplan {
	display: flex;
	background: linear-gradient(to right, rgba(255, 177, 0, .9) 0%,rgba(232, 35, 200, .9) 50%, rgba(56, 131, 235, .9) 100%);
	border-radius: 5px;
	padding: 0;
}

.stappenplan p {
	color: white;
	text-align: center;
}

.stappenplan li {
	position: relative;

	width: 100%;
	min-width: 100px;

	height: auto;
	min-height: 100px;
	max-height: 250px;

	padding: 5px 25px;
	text-align: center;
	list-style: none;
}

.stappenplan li:after {
	content: " ";
	position: absolute;

	top: 50%;
	left: 100%;

	border: solid transparent;
	border-left-color: white;
	border-width: 10px;

	margin-top: -10px;
	pointer-events: none;
	z-index: 1;
}

.stappenplan li:first-child {
	border-right: 1px solid white;
}

.stappenplan li:last-child {
	border-left: 1px solid white;
}

.stappenplan li img {
	width: 40px;
	height: 40px;
	margin-top: 10px;
	filter: invert(1);
}

/*-*-*-*- Abonnementen -*-*-*-*/
.abonnementen-title {
	color: hsl(0, 0%, 20%);
	font-size: 35px;
	text-align: center;
}

.abonnementen {
	display: flex;
	padding: 0;
	text-align: center;
	cursor: pointer;
}

/* Voor pointer effect bij hover */
.abonnementen p,
.abonnementen h2,
.abonnementen h3,
.abonnementen h4,
.abonnementen h6 {
	cursor: pointer;
	color: white;
}

.abonnementen hr {
	width: 2px;
	background-color: rgba(221, 221, 221, 1);
	border: none;
	margin: 10px;
}

.abonnementen li {
	max-width: 280px;
	margin: auto;
	list-style: none;
	transition: all .4s;
}

.abonnementen p {
	padding: 5px;
	font-size: 18px;
	text-align: center;
}

.abonnementen-btw {
	text-align: center;
	margin-bottom: 30px;
	cursor: pointer;
}

/* Package */
.package-title {
	display: flex;
	position: relative;
	min-height: 75px;

	border-radius: 5px 5px 0px 0px;

	padding: 0px 18%;
	margin: auto;
	align-items: center; /* vertical alignment */
}

.package-title:after {
	content: " ";
	position: absolute;

	top: 100%;
	left: 50%;

	width: 0;
	height: 0;

	border: solid transparent;
	border-width: 10px;

	margin-left: -10px;
	pointer-events: none;
}

.package-title img {
	float: left;
	width: 45px;
	filter: invert(1);
}

.package-title h6 {
	float: right;
	line-height: 70px;
}

.package-box {
	padding: 20px 10px;
	margin: 0 auto;
}

.package-footer {
	display: flex;
	position: relative;
	min-height: 75px;

	border-radius: 0px 0px 5px 5px;

	padding: 0;
	margin: auto;
}

.package-footer:after {
	content: " ";
	position: absolute;

	bottom: 76%;
	left: 50%;

	height: 0;
	width: 0;

	border: solid transparent;
	border-width: 10px;
	border-top-color: white;

	margin-left: -10px;
	pointer-events: none;
}

.package-footer h3 {
	font-size: 10px;
}

.package-footer h4 {
	padding: 0 3px;
}

.package-footer h3 span {
	padding: 0 3px;
	font-size: 20px;
}

/* Package:hover */
#small:hover,
#medium:hover,
#large:hover {
	transform: scale(1.1);
}

/* Klein abonnement */
#small p {
	color: rgba(55, 143, 234, 1);
}

#small .package-title,
#small .package-footer {
	background-color: rgba(55, 143, 234, 1);
}

#small .package-title:after {
	border-top-color: rgba(55, 143, 234, 1);
}

/* Middel abonnement */
#medium p {
	color: rgba(16, 185, 99, 1);
}

#medium .package-title,
#medium .package-footer {
	background-color: rgba(16, 185, 99, 1);
}

#medium .package-title:after {
	border-top-color: rgba(16, 185, 99, 1);
}

/* Groot abonnement */
#large p {
	color: rgba(254, 62, 75, 1);
}

#large .package-title,
#large .package-footer {
	background-color: rgba(254, 62, 75, 1);
}

#large .package-title:after {
	border-top-color: rgba(254, 62, 75, 1);
}

/*-*-*-*- Voorwaarden & Tarieven -*-*-*-*/
#voorwaarden-tarieven {
	max-width: 800px;
	margin-top: 50px;
}

#voorwaarden-tarieven p {
	display: none;
	max-width: 730px;
	line-height: 28px;
}

#voorwaarden-tarieven a {
	cursor: pointer;
}

#voorwaarden-tarieven hr {
	height: 1px;
	background-color: rgba(200, 200, 200, 1);
	border: none;
}

.voorwaarden-tarieven-title {
	color: hsl(0, 0%, 20%);
	text-align: center;
}

/*-*-*-*- Help -*-*-*-*/
#help {
	display: none;
}

#help_body {
	margin: auto;
}

#help_body h1 {
	text-align: center;
}

#help_field {
	max-width: 1000px;
	margin-bottom: 10px;
	padding: 25px;
	border-radius: 10px;
	color: rgba(113, 113, 113, 1);
	text-align: justify;
	line-height: 25px;
}

#help_field hr {
	border: .5px solid rgba(0, 0, 0, 0.1);
	margin: 20px auto;
}

#help_field h2,
#help_field h4,
#help_field p {
	color: rgba(113, 113, 113, 1);
}

#help_field h3,
#help_field strong {
	color: rgba(28, 103, 236, 1);
}

/*-*-*-*- Alleen touchscreen -*-*-*-*/
@media (pointer: coarse) {

	#main-intro,
	#banner-1,
	#banner-2 {
		background-attachment: local;
	}

}

#copyright {
	display: none;
}

#copyright h1 {
	text-align: center;
}

#copyright p {
	max-width: 800px;
	line-height: 28px;
}

/*-*-*-*- Schermen met een maximum van 600px breed -*-*-*-*/
@media screen and (max-width: 600px) {

	#main-intro-title {
		font-size: 8vw;
	}

	#main-intro p {
		font-size: 15px;
	}

	section {
		display: block;
	}

	.content,
	.sidebar {
		display: block;
		width: auto;
		max-width: 100%;
	}

	/* Stappenplan */
	.stappenplan {
		display: block;
		background: linear-gradient(to bottom, rgba(255, 177, 0, .9) 0%, rgba(232, 35, 200, .9) 50%, rgba(56, 131, 235, .9) 100%);
	}

	#stappenplan h1 {
		font-size: 28px;
	}

	.stappenplan li {
		width: auto;
	}

	.stappenplan li:after,
	.stappenplan li:before {
		top: 100%;
		left: 50%;
	}

	.stappenplan li:after {
		top: 100%;
		left: 50%;

		border-left-color: transparent;
		border-top-color: white;
		border-width: 10px;

		margin-top: 0;
		margin-left: -10px;
	}

	.stappenplan li:first-child {
		border-bottom: 1px solid white;
	}

	.stappenplan li:last-child {
		border-top: 1px solid white;
	}

	/* Abonnementen */
	.abonnementen {
		display: block;
	}

	.abonnementen hr {
		width: 100%;
		height: 1px;
		margin: 15px 0px;
	}

}