/* Typography
--------------------------------------------- */
body,button,input,select,optgroup,textarea {color: #034843;}
h1,h2,h3,h4,h5,h6 {font-family: 'Barlow Semi Condensed', sans-serif; color: #10513b;}
h1 {font-size: 42px; color: #ffffff; font-weight: 400;}
h2 {font-size: 36px; margin-bottom: 0px; font-weight: 400;}
h3 {font-size: 28px; font-weight: 300; margin-bottom: 0px;}
p {font-family: 'Montserrat', sans-serif; font-weight: 400; line-height: 30px;}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff;
}

@media screen and (max-width: 48em) {
	h1 {font-size: 36px;}
	h2 {font-size: 32px;}
}

@media screen and (max-width: 24em) {
	h1 {font-size: 32px;}
	h2 {font-size: 30px;}
}

/* Elements
--------------------------------------------- */
body {}
hr {}
ul,ol {}
ul {}
ol {}

/* Links
--------------------------------------------- */
a {color: #7d09aa;}
a:visited {color: #7d09aa;}
a:hover, a:focus, a:active {}
a:focus {}
a:hover, a:active {}
.c2a_button, button, input[type="button"], input[type="reset"], input[type="submit"] {color: #7d09aa; position: relative; transition: all .35s; display: inline-block; padding: 15px 40px; cursor: pointer;	background-color: #f6fa68; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; text-decoration: none; font-size: 0.8rem; border: 0; line-height: inherit;	border-radius: 0; font-family: 'Montserrat', sans-serif;}
.c2a_button:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {color: #f6fa68; background-color: #7d09aa;}

/* Colors
--------------------------------------------- */
.pink .wrapper {background-color: #f2e2f1; color: #10513b;}
.green .wrapper {background-color: #007770; color: #ffffff;}
.green h2, .green h3, .green h4 {color: #ffffff;}

/* Forms
--------------------------------------------- */
button, input[type="button"], input[type="reset"], input[type="submit"] {}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {}
button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus {}
select {}
textarea {}

.wpcf7 {width: 50%;}
.wpcf7 label {color: #007770;}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"],
input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, 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 {color: #fff; border: 0px solid #7d09aa; border-radius: 0px; padding: 18px; letter-spacing: 1px; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 500; width: 100%; background-color: #007770;}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus, 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 {color: #fff;}
.wpcf7 br {display: none;}

@media screen and (max-width: 62em) {
.wpcf7 {width: 100%;}
}

@media screen and (max-width: 31em) {
.c2a_button, button, input[type="button"], input[type="reset"], input[type="submit"] {width: 100%; text-align: center;}
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

body {background-image: url(img/img-bg.jpg); background-attachment: fixed;}
main {margin-top: 84px; flex: 1;}
.site {display: flex; min-height: 100vh; flex-direction: column;} /* pushes footer to the bottom */

.flt-left {float: left;}
.flt-right {float: right;}
.flex {display: flex; flex-wrap: wrap;}
.xl-10{width:10%;}.xl-15{width:15%;}.xl-20{width:20%;}.xl-25{width:25%;}.xl-30{width:30%;}.xl-35{width:35%;}
.xl-40{width:40%;}.xl-45{width:45%;}.xl-50{width:50%;}.xl-55{width:55%;}.xl-60{width:60%;}.xl-65{width:65%;}
.xl-70{width:70%;}.xl-75{width:75%;}.xl-80{width:80%;}.xl-85{width:85%;}.xl-90{width:90%;}.xl-95{width:95%;}.xl-100{width:100%;}
.column {display: flex; flex-direction: column; justify-content: start; padding: 20px;}
.row {display: flex; flex-direction: row;}
.mob-show {display: none;}
.mw-900 {max-width: 900px; margin: 0 auto;}
.mw-1000 {max-width: 1000px; margin: 0 auto;}
.mw-1200 {max-width: 1200px; margin: 0 auto;}
.mw-1400 {max-width: 1400px; margin: 0 auto;}
.bg-img {background-repeat: no-repeat; background-size: contain; background-position: center;}

@media screen and (max-width: 62em) {
.md-10{width:10%;}.md-15{width:15%;}.md-20{width:20%;}.md-25{width:25%;}.md-30{width:30%;}.md-35{width:35%;}
.md-40{width:40%;}.md-45{width:45%;}.md-50{width:50%;}.md-55{width:55%;}.md-60{width:60%;}.md-65{width:65%;}
.md-70{width:70%;}.md-75{width:75%;}.md-80{width:80%;}.md-85{width:85%;}.md-90{width:90%;}.md-95{width:95%;}.md-100{width:100%;}
}


/*-- Header --------------------------------------------------*/
#masthead {display: flex; align-items: center; padding: 0 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 12; transition: all 300ms cubic-bezier(.25,.46,.45,.94); background-color: transparent;}
#masthead.is-sticky {background-color: white; box-shadow: 0 0 20px rgb(0 119 111 / 10%);}
#masthead.is-sticky .site-description {margin: 5px 20px 5px 5px;}
.site-branding {width: 50%; display: flex; align-items: center;}
.custom-logo-link img {vertical-align: middle;}
.site-description {margin: 21px; padding: 10px 7px 7px 24px; color: #00776f; letter-spacing: 1px; font-size: 13px; margin-left: 5px;
	transition: all 300ms cubic-bezier(.25,.46,.45,.94); position: relative; line-height: 20px;}
.site-description::before {content: ""; height: 6px; width: 6px; display: inline-block; margin-right: 20px; background-color: #c914d2; border-radius: 6px; vertical-align: middle;
    position: absolute; left: 0; top: 46%;}

@media screen and (max-width: 62em) {
	.site-branding {width: 100%;}
}

@media screen and (max-width: 48em) {
	.site-description {font-size: 11px;}
}

@media screen and (max-width: 24em) {
	.site-description {margin: 5px; padding: 10px 7px 7px 15px; font-size: 9px; line-height: 12px; font-weight: 600;}
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation  {display: flex; width: 50%; margin-left: auto; justify-content: flex-end;}
.main-navigation ul {line-height: 30px;}
.main-navigation ul ul {box-shadow: 0px;}
.main-navigation li {display: inline-flex;}
.main-navigation a {text-transform: uppercase; font-family: 'Montserrat'; letter-spacing: 2px; font-size: 0.7em; font-weight: 600; display: block;	text-decoration: none; padding: 20px;}
.main-navigation .sub-menu {margin: 0 0 10px -20px; background: linear-gradient(to bottom, rgba(250, 230, 215,1), rgba(250, 230, 215,1), 80%, rgba(250, 230, 215,0.6) 100%, rgba(250, 230, 215,0.6) 100%);
overflow: hidden; padding: 0; flex-direction: column; opacity: 0; display: flex; position: absolute; top: 94px;}
.main-navigation .sub-menu a {text-transform: lowercase; letter-spacing: 2px; line-height: 21px; padding: 10px 20px;}
.main-navigation li:hover > .sub-menu {visibility: visible; opacity: 1;}

/*-- Hamburger Main Menu  --------------------------------------------------------------*/

#nav-toggle-wrapper {position: relative; display: none;}
.nav-toggle { -webkit-user-select: none; -moz-user-select: none; position: relative; user-select: none; cursor: pointer; height: 1rem; width: 1.8rem; z-index: 2;}
.nav-toggle:hover {opacity: 0.8;}
.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background: #00776f; content: ''; height: 2px; width: 100%;}
.nav-toggle .nav-toggle-bar {margin-top: 0;}
.nav-toggle .nav-toggle-bar::after {margin-top: 0.5rem;}
.nav-toggle .nav-toggle-bar::before {margin-top: -0.5rem;}
.nav-toggle.expanded .nav-toggle-bar {background: transparent;}
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {background: #ffffff; margin-top: 0;}
.nav-toggle.expanded .nav-toggle-bar::after {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.nav-toggle.expanded .nav-toggle-bar::before  {-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

.main-navigation.expanded {-webkit-transition: right 0.5s ease; -moz-transition: right 0.5s ease; -ms-transition: right 0.5s ease; -o-transition: right 0.5s ease; transition: right 0.5s ease; background-color: #00776f; color: white; height: 100vh;
	right: -49vw; padding: 6rem 2rem 2rem 2rem; position: fixed; top: 0; width: 100%; z-index: 1;}
.main-navigation.expanded {right: 0;}
.main-navigation.expanded a {color: white; padding: 10px 20px;}
.main-navigation.expanded .menu {position: relative; list-style: none; margin: 0; padding: 0;}
.main-navigation.expanded ul {display: inherit;}
.main-navigation.expanded li {display: list-item;}
.main-navigation.expanded .sub-menu li {padding: 0;}
/* .main-navigation.expanded .sub-menu li::after {content: '|'; padding: 0 10px; margin-top: -4px;} */
.main-navigation.expanded .sub-menu a {width: auto; display: inline;}
.main-navigation.expanded .sub-menu {margin-left: 10px; float: none; left: 0; opacity: 1; position: relative; top: 0; background: transparent; box-shadow: none; flex-direction: row; flex-wrap: wrap;}

@media screen and (max-width: 75em) {
	.main-navigation a {padding: 20px 12px;}
}

@media screen and (max-width: 62em) {
	#nav-toggle-wrapper {display: block;}
	.main-navigation {display: none;}
	.site-branding {margin-right: auto;}
	.main-navigation.expanded {display: block; padding: 100px 10px;}
}

/* Posts and pages
--------------------------------------------- */
article.post, article.page {max-width: 1000px; margin: 0 auto;}
.post, .page {margin: 0 0 0;}

#home-header {width: 100%; align-items: center; background-color:#e7f2f2; background-size: 100%; background-repeat: no-repeat; justify-content: flex-end; padding: 100px 0 150px;}
#home-header p {color: #ffffff; }
#hh_tekst {padding: 50px; background-color: #10513b;}
#hh_tekst h2 {font-family: 'Montserrat', sans-serif; font-size: 42px; color: #ffffff; font-weight: 300;}
#hh_tekst h2 span {font-weight: 700;}
#review #hh_right {height: auto; padding-left: 100px; text-align: center;}
#review #hh_left {max-width: 400px; margin-left: auto; margin-right: 100px;}
#aanbod {max-width: 1100px; margin: -100px auto;}

.icon-blocks-list {display: flex; justify-content: space-evenly; max-width: 1200px; margin: 0 auto;}
.icon-block {width: 50%; text-align: center; padding: 0 10px; display: flex; flex-direction: column; align-items: center;}
.icon-block img {max-width: 100px;}
.icon-block h4 {margin-bottom: auto;}

.spin {border: 0; position: relative;}
.spin::before, .spin::after {box-sizing: inherit; content: ''; position: absolute; width: 100px; height: 100px;}
.spin {height: 100px; width: 100px;}
.spin::before, .spin::after {top: 0; left: 0;}
.spin::before {border: 2px solid transparent;}
.spin:hover::before {border-top-color: #0e5491; border-right-color: #0e5491; border-bottom-color: #0e5491; border-left-color: #0e5491; transition: border-top-color 0.3s linear, border-right-color 0.3s linear 0.15s, border-bottom-color 0.3s linear 0.3s, border-left-color 0.3s linear 0.45s;}
.spin::after {border: 0 solid transparent;}
.spin:hover::after {border-top: 2px solid #0e5491; border-left-width: 2px; border-right-width: 2px; transform: rotate(360deg); transition: transform 0.6s linear 0s, -webkit-transform 0.6s linear 0s;}
.circle {border-radius: 100%; box-shadow: none;}
.circle::before, .circle::after {border-radius: 100%;}

.turquoise::before {content: ""; width: 100%; background-image: url(img/turquoise-top.png); display: block; height: 150px;}
.turquoise::after {content: ""; width: 100%; background-image: url(img/turquoise-bottom.png); display: block; height: 150px;}
.contact.turquoise::after {background-color: #007770;}
.green::before {content: ""; width: 100%; background-image: url(img/green-top.png); display: block; height: 120px;}
.green::after {content: ""; width: 100%; background-image: url(img/green-bottom.png); display: block; height: 120px;}
section.aos-init {-webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); opacity: 0; -webkit-transition: all 0.85s ease; -moz-transition: all 0.85s ease; -ms-transition: all 0.85s ease; -o-transition: all 0.85s ease; transition: all 0.85s ease;}
section.aos-animate {-webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1;}

@media screen and (max-width: 75em) {
	#review #hh_right {padding-left: 50px;}
	#review #hh_left {margin-right: 50px;}
}

@media screen and (max-width: 62em) {
	#review #hh_right {padding-left: 20px;}
	#review #hh_left {margin-right: 20px; max-width: none; height: 400px;}
}

@media screen and (max-width: 48em) {
	#home-header {flex-direction: column-reverse;}
	#hh_left {padding: 0px 20px;}
	#hh_left h2 {font-size: 32px;}
	#hh_right {height: 200px;}
	#c2a_banner .bg-img {background-size: contain;}
}