/*-------------------------------- ALGEMEEN --------------------------------*/
@font-face {
  font-family: 'AugustWilliam';
  src: url('../fonts/AugustWilliam.eot'), /* IE9 Compat Modes */
  url('../fonts/AugustWilliam.otf'),
  url('../fonts/AugustWilliam.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/AugustWilliam.woff') format('woff'); /* Pretty Modern Browsers */
}

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding:0;
	box-sizing: border-box;
	/*scroll-behavior: smooth;*/

}

.logotype{
	font-family:"AugustWilliam",serif;
	letter-spacing: 0px;
	word-spacing: 0px;
}

.internal-link {
  display: block;
  position: relative;
  top: -175px; 
  visibility: hidden;
}

h1, h2, h3, p, li{
	font-weight: normal;
	font-family: 'Work Sans', sans-serif;
	font-weight:400;
	letter-spacing: -0.5px;
	word-spacing: 0px;
}
/*-------------------------------- EIND ALGEMEEN --------------------------------*/



/*--------------------------------BEGIN HEADER--------------------------------*/
.header{
	height: 120px;
	width: 100%;
	position: fixed;
	top:0;
	z-index: 100;
	background-color: white;
}
.inner-header-container{
	width: 90%;
	margin:0 auto;
	/*background-color: red;*/
	height: 120px;
	position:relative;
}
.inner-header-button-container{
	display: table-cell;
	vertical-align: middle;

	height: 120px;
	/*background-color: blue;*/
}
.header-logo{
  position: absolute;
  margin: auto;
  top:0;
  bottom:0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}


.header-logo:hover{
	animation-duration: 400ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-name: wiggle;
}
@keyframes wiggle {
  0% { transform: translate(0px, 0); }
  33% { transform: translate(-5px, 0); }
  66% { transform: translate(5px, 0); }
  100% { transform: translate(0, 0); }
}
.inner-header-nav-container{
	position: absolute;
	height: 120px;
	top:0;
	right: 0;
	width: 260px;
	text-align:center;
	list-style: none;
}
.inner-header-nav-container li{
  line-height: 120px;
  vertical-align: middle;
  display:inline;
}
.inner-header-nav-container li a{
display:inline-block;
text-decoration: none;
color: rgb(50,50,50);
font-family:Work Sans, sans-serif;
font-weight:400;
letter-spacing: -0.5px;
word-spacing: 0px;
width: 84px;
transition: all .2s ease-in-out;
}
.inner-header-nav-container li a:hover{
	transform: scale(1.1);
	color: rgb(0,0,0);
}

/*--------------------------------EIND HEADER--------------------------------*/



/*--------------------------------BEGIN SECTIONS ALGEMEEN--------------------------------*/

.main-content-container{
		width: 90%;
		height: 100%;
		margin:0 auto;
}

.section-wrapper{
	margin:0 auto;
	width: 100%;
	/*min-height: 1300px;*/
	background-color: grey;
	position: relative;

}
#section-wrapper-one{border-radius: 20px 20px 20px 0px; background-color:#DCE4FD;}
#section-wrapper-two{border-radius: 0px 20px 0px 20px; background-color:#ccf2df;}
#section-wrapper-three{border-radius: 20px 0px 20px 0px; background-color:#FDE2F3;}
#section-wrapper-four{border-radius: 0px 20px 20px 20px; background-color:#FFFBD0;}
#section-wrapper-five{border-radius: 20px 20px 20px 20px; background-color:#FFFBD0;}

.section-content-container{
	width: 80%;
	margin: 0 auto;
	max-width: 960px;
}

.section-title{
	font-size: 52px;
	font-family:Work Sans, sans-serif;
	font-weight:400;
	letter-spacing: -2.75px;
	word-spacing: -2px;
	width: 100%;
	text-align: center;
	padding-top:100px;
	padding-bottom:100px;
}


/*--------------------------------EIND SECTIONS ALGEMEEN--------------------------------*/

/*--------------------------------BEGIN SPACERS--------------------------------*/
.spacer{
	margin:0 auto;
	width: 100%;
	height: 150px;
}
.spacer-left-square{
	width: 150px;
	height: 150px;
	float: left;
}
.spacer-left-circle{
	width: 150px;
	height: 150px;
	border-radius:75px;
	margin-left:-75px;
	background-color: white;
	float: left;
}
.spacer-right-square{
	width: 150px;
	height: 150px;
	float: right;
}
.spacer-right-circle{
	width: 150px;
	height: 150px;
	background-color: white;
	float: right;
	margin-right:-75px;
	border-radius:75px;
}
#colorone{background: linear-gradient(#DCE4FD, #ccf2df);}
#colortwo{background: linear-gradient(#ccf2df, #FDE2F3);}
#colorthree{background: linear-gradient(#FDE2F3, #FFFBD0);}
/*-------------------------------- EIND SPACERS --------------------------------*/




/*--------------------------------BEGIN INTRODUCTIE --------------------------------*/

.introduction-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin:0 auto;
	margin-top: 120px;
	min-height: 70vh;
	/*background-color: red;*/

}

.intro{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left:0;
	right: 0;
	font-size: 52px;
	font-family:Work Sans, sans-serif;
	line-height: 55px;
	font-weight:400;
	letter-spacing: -1.5px;
	word-spacing: -2px;
	text-align: center;
	color:rgb(30,30,30);
	top: 45%;
	transform: translateY(-50%);
}


			#intro-one{
				animation:fade-one 7.5s;
				opacity: 0;
			}
			#intro-two{
				animation:fade-two 15s;
				opacity: 0;
			}
			#intro-three{
				animation:fade-three 22.5s;
				opacity: 0;
			}
			#intro-four{
				animation:fade-four 30s;
				opacity: 1;
			}

			@keyframes fade-one{

				0% {opacity: 0}
				10% {opacity: 0}
				50% {opacity: 1}
				90% {opacity: 1}
				100% {opacity: 0}

			}

			@keyframes fade-two{

				0% {opacity: 0}
				50% {opacity: 0}
				70% {opacity: 1}
				90% {opacity: 1}
				100% {opacity: 0}

			}

			@keyframes fade-three{

				0% {opacity: 0}
				66% {opacity: 0}
				80% {opacity: 1}
				90% {opacity: 1}
				100% {opacity: 0}

			}


			@keyframes fade-four{

				0% {opacity: 0}
				75% {opacity: 0}
				85% {opacity: 1}
				100% {opacity: 1}

			}
/*--------------------------------EIND INTRODUCTIE --------------------------------*/


/*--------------------------------BEGIN SECTION 1--------------------------------*/

#section-wrapper-one{
	padding: 20px;
}

.animation-identity{
	width: 100%;
	margin:0 auto;
	text-align: center;
}

.animation-explainer{
	width: 100%;
	margin:0 auto;
	text-align: center;
}

video{
width: 100%;
max-width: 1310px;
max-height: 80vh;
}



/*--------------------------------EIND SECTION 1--------------------------------*/


/*--------------------------------BEGIN SECTION 2--------------------------------*/

#section-wrapper-two{
	padding: 20px;
}

.animation-explainer{
	width: 100%;
	background-color:#ccf2df;
	margin:0 auto;


}



	/*-webkit-box-shadow: inset 0px 0px 40px 40px rgba(220,228,253,1);
-moz-box-shadow: inset 0px 0px 40px 40px rgba(220,228,253,1);
box-shadow: inset 0px 0px 40px 40px rgba(220,228,253,1);
z-index: 1;*/
/*--------------------------------EIND SECTION 2--------------------------------*/


/*--------------------------------BEGIN SECTION 3--------------------------------*/

.feature-container{
	width: 48%;
	min-height: 10px;
	margin-left: 2%;
	margin-bottom: 2%;
	background-color: white;
	border-radius: 20px;
	float:left;
	
}
.feature-icon{
	width: 35%;
	height: 145px;
	/*background-color: grey;*/
	float: left;
	position: relative;
	transition: all .2s ease-in-out;
}
.feature-icon img{
  position: absolute;
  margin: auto;
  top:0;
  bottom:0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}
.feature-text{
	padding: 20px;
	padding-left: 0px;
	width: 65%;
	float: left;
	font-size: 18px;
	font-family: 'Work Sans', sans-serif;
	font-weight:400;
	letter-spacing: -0.5px;
	word-spacing: 0px;
	position: relative;
	display: inline-block;
}
.feature-text h3{
font-weight: 600;

}
.feature-container:hover .feature-icon{
	transform: scale(1.1);
}

/*--------------------------------EIND SECTION 3--------------------------------*/

/*--------------------------------BEGIN SECTION 4--------------------------------*/
.subscriptiontype{
	margin-left: 2%;
	width: 32%;
	min-width: 220px;
	margin-bottom: 20px;
	float: left;
	transition: all .2s ease-in-out;
}

#subscriptiontype-basic{
	margin-left: 0px;
}

.subscriptiontype:hover{
	transform: scale(1.02);
	
}
.subscriptiontype-top{
	border-radius: 15px 15px 15px 0px;
	padding:10px;
	height: 200px;
	width: 100%;
	background-color: #F98BCE;
}
.subscriptiontype-top h1{
	font-weight: normal;
	font-family: 'Work Sans', sans-serif;
	font-weight:400;
	font-size: 36px;
	letter-spacing: -0.5px;
	word-spacing: 0px;
	margin-top: 0px;
}

.subscriptiontype-top p{
	margin-top: 20px;
	font-size: 18px;
}
.subscriptiontype-bottom{
	border-radius: 0px 15px 15px 15px;
	padding:15px;
	font-size: 18px;
	width: 100%;
	min-height: 876px;
	background-color: #F98BCE;
}

.subscriptiontype-bottom ul{
	margin-top: 25px;
}

.subscriptiontype-bottom li{
    background:url(../svg/checked.svg) no-repeat left center; 
    padding-left: 30px;
    list-style-type: none;
	border-bottom: 1px solid black;
	padding-top: 10px;
	padding-bottom: 10px;
}
.subscriptiontype-bottom .feature-unchecked{
    background:url(../svg/unchecked.svg) no-repeat left center; 
    opacity: 0.5;

}

.subscriptiontype-bottom h1{
	text-align: right;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 36px;
	letter-spacing: -2.0px;
}
.subscriptiontype-spacer{
height: 15px;
width: 100%;

	}
.subscriptiontype-spacer-square{
	width: 15px;
	height: 15px;
	float: left;
	background-color: #F98BCE;
}
.subscriptiontype-spacer-circle{
	width: 15px;
	height: 15px;
	border-radius: 15px;
	margin-left: -7.5px;
	float: left;
	background-color:#FFFBD0;
}

#subscriptiontype-basic .subscriptiontype-top, #subscriptiontype-basic .subscriptiontype-bottom, #subscriptiontype-basic .subscriptiontype-spacer-square{
	background-color: #F98BCE;
}

#subscriptiontype-professional .subscriptiontype-top, #subscriptiontype-professional .subscriptiontype-bottom, #subscriptiontype-professional .subscriptiontype-spacer-square{
	background-color: #1FBB7D;
}

#subscriptiontype-premium .subscriptiontype-top, #subscriptiontype-premium .subscriptiontype-bottom, #subscriptiontype-premium .subscriptiontype-spacer-square{
	background-color: #7493F7;
}


/*--------------------------------EIND SECTION 4--------------------------------*/



/*--------------------------------BEGIN SECTION 5 (ander pagina) --------------------------------*/


#section-wrapper-five{
margin-top: 200px;
margin-bottom: 200px;
}






/*-------------------------------- BEGIN CALL TO ACTION KNOP --------------------------------*/
.invite-container{
	text-align:center;
	margin:0 auto;
	font-size: 18px;
	font-family: 'Work Sans', sans-serif;
	font-weight:400;
	letter-spacing: -0.5px;
	word-spacing: 0px;
	position: relative;
	clear: both;
	padding-top: 100px;
	padding-bottom: 50px;

}
.invite-text .logotype{
	font-size:20px;
	letter-spacing: 0px;
	word-spacing: 0px;
}
.invite-button{
	width: 245px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgb(60,60,60);
	border-radius: 30px;
	margin:0 auto;
	margin-top: 20px;
	transition: all .2s ease-in-out;
	cursor: pointer;
}
.invite-button:hover{
	transform: scale(1.1);
	background-color:rgb(0,0,0);
}
.invite-button a{
	text-decoration: none;
	color: white;
}
.invite-button-header{
	width: 320px;
	text-align:center;
	font-size: 18px;
	font-family: 'Work Sans', sans-serif;
	font-weight:400;
	letter-spacing: -0.5px;
	word-spacing: 0px;
	width: 140px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgb(60,60,60);
	border-radius: 30px;
	display: inline-block;
	transition: all .2s ease-in-out;
	cursor: pointer;
}
.invite-button-header:hover{
	transform: scale(1.1);
	background-color:rgb(0,0,0);
}
.invite-button-header a{
	text-decoration: none;
	color: white;
}
/*-------------------------------- EIND CALL TO ACTION KNOP --------------------------------*/



/*-------------------------------- BEGIN FOOTER --------------------------------*/

.footer{
	width: 100%;
	margin:0 auto;
	margin-top:300px;
	padding-bottom: 50px;
	text-align: center;
	background-color: #FDE3C7;
	border-radius: 20px 20px 0px 0px;

}
.inner-footer-container-top{
width: 80%;
margin: 0 auto;
margin-bottom: 50px;
border-bottom: 1px solid black;
}

.inner-footer-container-bottom a{
text-decoration: underline;
}

.inner-footer-container-top h3{
	margin-top: -55px;
	margin-bottom: 50px;
	font-size: 24px;

}
.boldspan{
	font-weight: 600;
}

.footer a{
	color:black;
}
/*-------------------------------- EIND FOOTER --------------------------------*/

/*-------------------------------- BEGIN MAILCHIMP --------------------------------*/

#mailchimp{
	width:80%;
	margin: 0 auto;
	font-family: Work Sans, sans-serif;
	font-size: 20px;
	padding-bottom: 200px;
	
}

.mc-field-group{
	margin-top: 40px;
}

#mc-field-group-one{
	margin-top:20px;
}

#mailchimp label, #mailchimp input{
	display: block;
	width: 100%;
	font-family: Work Sans, sans-serif;
	font-weight: 400;
	border:none;
}

#mailchimp label{
	font-size: 18px;
	height: 30px;
}

#mailchimp input{
	font-size: 22px;
	height: 50px;
	padding: 15px;
	border-radius: 5px;
	box-shadow: none;
}

.mc-field-group input:valid{
	background-color:#1FBB7D;
}
.mc-field-group input:focus{
	outline:none;
	background-color:white !important;
}
.mc-field-group input:invalid{
	background-color:white;
}

.subscribe-button{
	width: 245px !important;
	font-family: Work Sans, sans-serif;
	font-weight: 400;
	color:white;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgb(60,60,60);
	border-radius: 30px !important;
	margin:0 auto;
	margin-top: 20px;
	transition: all .2s ease-in-out;
	cursor: pointer;
	font-size: 18px;
	font-family: 'Work Sans', sans-serif;
	font-weight:400;
	letter-spacing: -0.5px;
	word-spacing: 0px;
	border:none;
	margin-top: 75px;
}
.subscribe-button:hover{
	transform: scale(1.1);
	background-color:rgb(0,0,0);
}

.subscribe-button:focus{
		outline:none;
	}

/*-------------------------------- EIND MAILCHIMP --------------------------------*/

/*-------------------------------- BEGIN MAILCHIMP EIGEN STIJL --------------------------------*/


/*#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {border: 1px solid #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#mc_embed_signup .button:hover {background-color:#777;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}*/

#mc_embed_signup .mc-field-group {clear:left; position:relative; width:96%; padding-bottom:3%; min-height:50px;}
#mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}
* html #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */}
#mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;}
#mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;}
#mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;}

#mc_embed_signup .datefield, #mc_embed_signup .phonefield-us{padding:5px 0;}
#mc_embed_signup .datefield input, #mc_embed_signup .phonefield-us input{display:inline; width:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;}
#mc_embed_signup .phonefield-us .phonearea input, #mc_embed_signup .phonefield-us .phonedetail1 input{width:40px;}
#mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{width:30px;}
#mc_embed_signup .datefield label, #mc_embed_signup .phonefield-us label{display:none;}

#mc_embed_signup .indicates-required {text-align:right; font-size:11px; margin-right:4%;}
#mc_embed_signup .asterisk {color:#e85c41; font-size:150%; font-weight:normal; position:relative; top:5px;}     
#mc_embed_signup .clear {clear:both;}

#mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;}
#mc_embed_signup .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;}
#mc_embed_signup .mc-field-group.input-group label {display:inline;}
#mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;}

#mce-responses {position:relative; width: 100% !important; clear:both; color:#1FBB7D;}
/*#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#1FBB7D; display:none; text-align: center; width: 100%:;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}*/

/*#mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}*/
#mc_embed_signup #num-subscribers {font-size:1.1em;}
#mc_embed_signup #num-subscribers span {padding:.5em; border:1px solid #ccc; margin-right:.5em; font-weight:bold;}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {display:inline-block; padding:5px 10px 0px 0px; margin:0; background-color:#FFFBD0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:14px; font-weight:normal; z-index:1; color:#7493F7;}
#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {border:2px solid #7493F7;}

/*-------------------------------- EIND MAILCHIMP EIGEN STIJL --------------------------------*/


/*-------------------------------- BEGIN BREAKPOINTS --------------------------------*/



@media screen and (max-width: 1100px) {
.subscriptiontype, #subscriptiontype-basic{
	clear: both;
	width: 50%;
	margin-left:25%;
}
.feature-container{
	margin-bottom: 20px;
	width:70%;
	margin-left: 15%;
}
}


@media screen and (max-width: 920px) {



.inner-header-nav-container{
	display: none;
}

.subscriptiontype, #subscriptiontype-basic{
	clear: both;
	width: 60%;
	margin-left:20%;
	margin-top: 10px;
}


}


/*-------------------------------- BEGIN MOBIEL --------------------------------*/

@media screen and (max-width: 600px) {

.section-content-container{
width: 90%;
	}

	.spacer{
	margin:0 auto;
	width: 100%;
	height: 50px;
}
.spacer-left-square{
	width: 50px;
	height: 50px;
	float: left;
}
.spacer-left-circle{
	width: 50px;
	height: 50px;
	border-radius:25px;
	margin-left:-25px;
	background-color: white;
	float: left;
}
.spacer-right-square{
	width: 50px;
	height: 50px;
	float: right;
}
.spacer-right-circle{
	width: 50px;
	height: 50px;
	background-color: white;
	float: right;
	margin-right:-25px;
	border-radius:25px;
}

.header{
	height: 100px;
}

.header-logo{
  position: absolute;
  margin: auto;
  top:-50px;
  bottom:0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}

.inner-header-nav-container{
	display: none;
}

.inner-header-button-container{
position: absolute;
  top:60px;
  bottom:0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}

.invite-button-header{
font-size: 16px;
width: 100px;
padding-top: 5px;
padding-bottom: 5px;
}
.header-logo{
	width: 50%;
}

.intro{
	font-size: 24px;
	line-height: 30px;
}


.section-title{
	font-size: 40px;
}

.subscriptiontype{
	clear: both;
	width: 100%;
	margin:0 auto;
	margin-bottom: 20px;
}
#subscriptiontype-basic{
	clear: both;
	width: 100%;
	margin:0 auto;
	margin-bottom: 20px;
}
.feature-container{
	clear: both;
	width: 100%;
	margin:0 auto;
	margin-bottom: 20px;
}
.feature-container:last-child{
margin-bottom: 0px;
}

/*-------------------------------- EIND MOBIEL --------------------------------*/