/*
Template: De Web Developer Bootstrap
Author: Bouke Lourens
Discription: Bootstrap template voor Funderingsherstel Constructeur
Version: 1.0
Year: 2023
Last modified: 25-06-2023
Type: Bootstrap framework
Type email submission: PHP mail
Application: JavaScript, jQuery, Google reCAPTCHA, PHP
*/

/*{;} IMPORT ++ */
@font-face { font-family: "NAP";
   src: url("/assets/fonts/NAP.woff") format("woff");
}

/*{;} GENRAL -- */

.container { max-width: 1170px; }
body, h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat',Arial,sans-serif; }
p, a, li { font-size: 17px; font-weight: 300; color: #111; line-height: 1.4; font-family: 'Montserrat',Arial,sans-serif; }
strong { font-weight: 600 !important; }
.content-blok.main { max-width: 650px; margin: 0 auto; padding: 90px 15px 5px 15px; }
.pg-dwd-id-001 .footer-succes.footer-404 { display: none; }
.pg-dwd-id-002 .footer-start, .pg-dwd-id-003 .footer-start { display: none; }

/*{;} HEADINGS  -- */

#banner-content h1 { color: #FFF; font-size: 59px; font-weight: 300; margin: 0 0 8px; font-family: 'Montserrat',Arial,sans-serif;
text-shadow: 0px 0px 0px #FFF; }
#slogan h2 { font-family: "NAP"; text-transform: uppercase; color: #FFF; }

.h1, h1 {
	font-weight: 300;
	color: #34343c;
	line-height: 1.4;
}


/*{;} BUTTONS -- */
.btn {
  border-color: #0c8990 !important;
  background: transparent !important;
  line-height: 1.4 !important;
  color: #0c8990 !important;
  display: inline-block !important;
  border-width: 1px !important;
  font-weight: bold !important;
  padding: 12px 25px !important;
  margin: 35px 0 !important;
}
.btn:hover {
	border-color: #0C8990 !important;
	background: #085B60 !important;
	color: #FFF !important;
	transition: .4s;
}



button { border-color: #0c8990; background: transparent; line-height: 1.4; color: #0c8990; display: inline-block; border-width: 1px;
font-weight: bold; padding: 12px 25px; font-family: 'Montserrat',Arial,sans-serif; }
.button:hover { background: rgb(12, 137, 144, 0.15); color: #FFF; border-color: #FFF; transition: .4s; }
p a { color: #0C8990; }

/*{;} NAVIGATIE -- */
.nav-item a {
	font-size: 12px;
	font-weight: 400;
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 15px;
	transition-duration: 400ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.7,1,.7,1);
}
.nav-link.active { background: #0c8990; border-radius: 3px; }
.nav-link.active a { color: #FFF; }
.nav-item .nav-link.active { color: #FFF !important; }
.nav-item { margin: 0 10px; }
.nav-link:hover { background: #0c8990; border-radius: 3px; }
.nav-item:hover a { color: #FFF; }
.nav-link.dropdown-toggle img { width: 20px; }
.dropdown-item img { width: 20px; }
.dropdown-menu.show { background: transparent; border: 0; }
.dropdown-item:hover { background: transparent !important; }
.nav-item.dropdown .nav-link.dropdown-toggle:hover { background: transparent !important; }
.dropdown-item:focus, .dropdown-item:hover { background: transparent !important; color: #FFF !important; }
#container-wrapper.active .dropdown-item { background: #0C8990; color: #FFF !important; box-shadow: none !important; border: 0 !important; border-radius: 4px; }
#container-wrapper.active { background: RGBA(255, 255, 255, 0.85); z-index: 999; transition: .2s; animation: slideDown .7s linear; }
#container-wrapper .nav-item.dropdown .nav-link:focus { background: transparent !important; }

/*FOLLOWUP PAGES NAVIGATIE*/
.followup .navbar-brand.donker { display: none; }
.navbar-brand.huisstyle { display: block; margin: 0 auto; }
#container-wrapper.active .navbar-brand.huisstyle { display: none; }

.followup .nav-item a { color: #000; }
.followup .navbar-brand.wit { display: none; }
.followup .navbar-brand.donker { display: none; }

.pg-dwd-id-001-01 #dwd-id-001 { background: #0C8990; color: #FFF; border-radius: 3px; }
.pg-dwd-id-001-01.followup.followup001-01 #dwd-id-001 { color: #FFF; }/*FEEDBACK HOME*/

.pg-dwd-id-004 #dwd-id-004 { background: #0C8990; color: #FFF; border-radius: 3px; }/*PROJECTEN*/
.pg-dwd-id-004.followup.followup004 #container-wrapper.active #dwd-id-004 { color: #FFF; }/*PROJECTEN ACTIVE*/

.pg-dwd-id-005 #dwd-id-005 { background: #0C8990; color: #FFF; border-radius: 3px; }/*FAQ*/
.pg-dwd-id-005.followup.followup005 #container-wrapper.active #dwd-id-005 { color: #FFF; }/*FAQ ACTIVE*/

/*JQUERY NAV*/
#container-wrapper { position: fixed; left: 0; right: 0; width: 100%; top: 0; transition: .5s; padding: 0 50px; z-index: 999; }
#container-wrapper.active { background: RGBA(255, 255, 255, 0.85); z-index: 999; transition: .2s; }
#container-wrapper.active .navbar-brand.wit { display: none; }
#container-wrapper.active .navbar-brand.donker { display: block; }
#container-wrapper.active .navbar-brand.donker img { max-width: 180px; padding: 0; }
#container-wrapper.active .nav-item a { color: #000; }


/*{;} HEADER -- */
header {
	padding: 50px;
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/assets/images/header-afbeelding.jpg");
	background-size: cover;
	min-height: 100vh;
	background-position: bottom;
	padding-top: 21px;
}
header .container { z-index: 9; position: relative; }
.landingspage-brand-img { float: left; max-width: 307px; padding: 8px 0; transition: .3s; animation: slideDown .7s linear; }
.landingspage-brand { margin: 0 auto; max-width: 253px; }
#banner-content p { font-size: 21px; color: #FFF; line-height: 1.4; font-weight: 300; font-family: 'Montserrat',Arial,sans-serif; }
#banner-content strong { font-weight: 600; }
#banner-content .container { min-width: 100%; }
#banner-content .col-sm-6:nth-child(2) { max-width: 760px; }
.go-down-down-down .bi.bi-chevron-double-down { color: #FFF; font-size: 1.5rem; }
.go-down-down-down {
	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	animation-name: bounce;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	animation-direction: alternate;
  position: absolute;
  bottom: 34px;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  max-width: 27px;
}
#banner-content .row { padding: 140px 0 0 0; }
.pg-dwd-id-001 #banner-content .button { color: #3DD2CC; border-color: #3DD2CC; }

/*{;} OPMAAK / ELEMENTEN -- */
.dropcap-dark { width: 40px; height: 40px; float: left; clear: left; font-size: 36px; font-weight: 600; line-height: 1.1; text-align: center;
text-transform: uppercase; padding: 1px; margin: 5px 10px 0 0; }
#top-button { position: fixed; right: 10px; bottom: 10px; display: inline-block; font-size: 22px; color: #fff; line-height: .5; background: #0C8990;
border-radius: 3px; padding: 7px; z-index: 999; animation: slideUp 1s backwards; }
#top-button.headerup { display: none; }
#status { font-size: 1.6rem !important; overflow: hidden; text-align: center; }
#status strong { color: #0C8990; }
#status .bi.bi-rocket-takeoff { color: #0C8990;  font-size: 2rem; }
.spinner-border.ml-auto { color: #0C8990; }
/*FAQ*/
.faq.applicatie .panel { display: none; overflow: hidden; padding: 40px; padding-left: 0 !important; padding: 0; padding-bottom: 30px; }
.faq.applicatie .panel p, .faq.applicatie .panel ol li, .faq.applicatie .panel ul li { font-size: .94rem; }
.faqapp { width: 100%; border: 0; border-top: 1px solid #dadce0; position: relative; text-align: left; padding-left: 0; transition: .3s; }
.faqapp .bi.bi-chevron-down { position: absolute; right: 10px; transition: .4s; }
.faqapp.active .bi.bi-chevron-down { transform: rotate(-180deg); transition: .4s; }
.faqapp-heading { font-size: 21px; font-weight: 500; }
.faqapp-heading .bi.bi-three-dots-vertical { color: #4d5156; }
.faqapp.active { padding: 15px; padding-left: 0; transition: .3s; }
.caps-vig { background-color: RGB(12, 137, 144, 0.15); color: #040c28; font-weight: 500; }
.faq.applicatie { padding: 70px 0 50px 0; }

/*{;} CONTACTFORM -- */
.section.call2action h2:nth-child(1) { padding: 30px 10px; color: #0C8990; font-weight: 600; }
#validatie .form-control { background-color: RGBA(12, 137, 144, 0.1); border-radius: 0; border: 0; padding: 15px; }
/*.alert.alert-success { position: fixed; bottom: 30px; right: 30px; text-align: left; border: 0; padding: 15px 21px; border-radius:
0; background: #ED1B24; z-index: 9; max-width: 400px; }*/
.alert.alert-success .container { font-weight: 600; margin-bottom: 0; padding: 0; color: #FFF; }
.alert.alert-success .container a { color: #FFF; text-decoration: none; font-weight: 500; border: 0.5px solid #fff; padding: 7px;
margin-left: 5px; font-size: .8rem; display: inline-block; margin-top: 15px; }
.statusMsg.errordiv .bi.bi-x-circle-fill { font-size: 1.6rem; position: absolute; right: 15px; top: 8px; }
.menu-inner { color: #0C8990; font-size: 1rem; font-weight: 700; /* padding: 28px; */ border: 0; padding: 25px;
transition: .1s ease-in-out; border-bottom: 2px dashed RGB(12, 137, 144, 0.2); }
.menu-inner.active { padding: 35px 35px 35px 0; transition: .3s ease-in-out; font-size: 1.55rem; color: RGBA(12, 137, 144, 0.7);
border-bottom: 0; }
.menu-inner:hover { color: RGBA(12, 137, 144, 0.7); transition: .3s; padding: 25px 40px; }
.menu-inner.active:hover { padding: 35px; }
.form-control.anders { max-height: 0; max-width: 400px; margin-left: 15px; margin-top: -9px; }
.menu-inner.active .bi-plus-lg::before { content: "\f64d"; transform: rotate(407deg); transition: .5s; }
.namen-layer { width: 50%; margin: 0 12px; margin-left: 0; }
.form-group.aanhef .namen-layer { display: inline; padding: 8px 0; max-width: 55px; }
.form-group.aanhef, .form-group.namen, .form-group.adres, .form-group.postcode, .form-group.email { display: flex; padding: 3px 0; }
.section.call2action .col-sm-6 { background: RGBA(12, 137, 144, 0.05); margin-top: 100px; }
.form-control:focus { border-color: #0C8990 !important; box-shadow: 0 0 0 .25rem RGB(12, 137, 144, .25) !important; }
.section.call2action #form h2 { padding: 10px; margin-top: 15px; }
.form-group.adres .namen-layer:nth-child(1) { width: 65%; }
.form-group.adres .namen-layer:nth-child(2) { width: 35%; }
.form-group.postcode .namen-layer:nth-child(1) { width: 35%; }
.form-group.postcode .namen-layer:nth-child(2) { width: 65%; }
.form-group.attachment .form-control { margin: 20px 0; padding: 32px !important; margin-top: 0; }

/* START CONTACT STYLE INPUT / DATA 1 */
.namen-layer.motivatie label, .namen-layer.uitvoering label, .namen-layer.bouwkundigbureau label, .namen-layer.funderingsherstel label,
.namen-layer.typegebouw label, .namen-layer.bijzonderheden label, .namen-layer.avg label {  display: inline; font-size: .9rem; }

/* CONTACT STYLE INPUT / DATA 2 */
.form-group.motivatie .namen-layer.motivatie, .form-group.uitvoering .namen-layer.uitvoering, .form-group.bouwkundigbureau
.namen-layer.bouwkundigbureau, .form-group.funderingsherstel .namen-layer.funderingsherstel, .form-group.typegebouw
.namen-layer.typegebouw, .form-group.bijzonderheden .namen-layer.bijzonderheden { width: 100%; padding: 12px 0; }

/* CONTACT STYLE INPUT / DATA 3 */
#motivatie1, #motivatie2, #motivatie3, #motivatie4, #motivatie5, #uitvoering1, #uitvoering2, #uitvoering3, #bouwkundigbureau1, #bouwkundigbureau2,
#funderingsherstel1, #funderingsherstel2, #funderingsherstel3, #funderingsherstel4, #funderingsherstel5, #typegebouw1,
#typegebouw2, #typegebouw3, #typegebouw4, #bijzonderheden { margin-right: 15px; }

/* CONTACT STYLE INPUT / DATA 4 */
.namen-layer.motivatie, .namen-layer.uitvoering, .namen-layer.bouwkundigbureau, .namen-layer.funderingsherstel, .namen-layer.typegebouw,
.namen-layer.bijzonderheden { display: flex; }

/* NOTIFICATIES & TWEAKS CONTACTFORM */
.uitklap-menu h3 { font-size: 1.15rem !important; font-weight: 600; }
.uitklap-menu { padding: 40px 0 60px 0; }
.panel { padding: 30px; }
.namen-layer.bijzonderheden { width: 100%; }
.namen-layer.bijzonderheden textarea { padding: 25px !important; margin-bottom: 20px; height: 200px; }
.form-control.attachment { background: RGB(12, 137, 144, 0.02) !important; border: 1px dashed #0C8990 !important;
margin-top: 5px !important; }
.upload-point .bi.bi-x-circle { font-size: 1.3rem; }
.upload-point { border: 0 !important; position: absolute; right: 3px; top: -15px; }
.namen-layer.caps input { text-transform: uppercase; }
#close-btn { border: 0; position: absolute; right: 10px; top: 7px; color: #FFF; font-size: 1.5rem; padding: 0; }
#close-btn .bi.bi-x-circle:hover::before { transform: rotate(451deg); transition: .5s; }
.alert.alert-success { background: transparent; border: 0; padding: 0; }
.statusMsg.errordiv { font-weight: 600; color: #ED1B24; }
#notification-x { position: fixed; bottom: 30px; right: 30px; text-align: left; border: 0; padding: 40px 40px; border-radius: 0; background: #ED1B24;
z-index: 9999; max-width: 400px; min-width: 400px; animation: .85s slideUp ease-in-out; }
#notification-x a { border: 0; padding: 0; margin: 0; }
.form-group.avg label { color: var(--bs-body-color); line-height: 1.4; font-family: var(--bs-body-font-family); padding-left: 5px; }
#validation a { text-decoration: none; }
.form-group.avg { padding: 20px 0; }
.form-group.avg label::before { position: absolute; content: ""; left: -40px; width: 50px; height: 50px; z-index: -1; }

/*{;} SUCCES PAGINA -- */
.sucesspagina { background: transparent; min-height: calc(100vh - 189px); }
#banner-content.succes h1 { padding: 0 0 5px 0; color: #0C8990; font-weight: 600; font-size: 2rem; }
#banner-content.succes h2 { font-size: 1.15rem !important; font-weight: 600; margin-bottom: 25px; }
#banner-content.succes p { font-size: 17px; font-weight: 300; color: #111; line-height: 1.4; }
#slogan.succes h2 { color: #000; }
#banner-content.succes .col-sm-6 { text-align: center; background: RGBA(12, 137, 144, 0.05); }
#banner-content.succes .col-sm-6:nth-child(2), .followup #banner-content.succes .col-sm-6:nth-child(2) { padding: 77px; margin-top: 40px; max-width: 100%;
text-align: center; }
#banner-content.succes .col-sm-6:nth-child(2) button { margin-top: 15px; float: ; }
#verzonden-notificatie { background: #00B724; position: fixed; bottom: 30px; right: 30px; text-align: left;
border: 0; padding: 40px 40px; border-radius: 0; z-index: 9; max-width: 400px; min-width: 400px;
animation: .85s slideUp ease-in-out; z-index: 99; }
.sucesspagina #banner-content .row { padding: 0; }

/*{;} 404 PAGINA */
.pg-dwd-id-003 #scrollspy { background: #FFF !important; }


/*{;} SECTION MAIN -- */
.content-blok.main h1 { text-align: center; margin: 100px 0 5px 0; font-weight: 400; color: #34343c; }
.content-blok.main h2 { font-size: 15px; text-align: center; font-weight: 600; color: #0C8990;
margin-bottom: 50px; }

/*{;} FOLLOWUP PAGES -- */
.errorpagina { background: transparent; min-height: calc(100vh - 189px); }
.followup #banner-content.succes .col-sm-6:nth-child(2) { margin-top: 180px; }/* page*/
.pg-dwd-id-002 #dwd-id-006 { background: #0c8990; border-radius: 3px; color: #FFF; }
.followup #banner-content .row { padding: 0; }
/*HOME FEEDBACK*/
.pg-dwd-id-001-01 #feedback-id .btn { position: relative; left: 0; }
.pg-dwd-id-001-01 .feedback-module { padding: 0; }
.pg-dwd-id-001 .feedback-module a button { font-size: 12px; font-family: var(--bs-body-font-family); line-height: var(--bs-body-line-height); }
.section.main.followup .namen-layer { width: 100%; }
.pg-dwd-id-001-01 .uitklap-menu h3 { margin-bottom: 15px; }
.pg-dwd-id-001-01 .namen-layer { padding: 10px 0; }


/*FAQ*/
.pg-dwd-id-005 .followup-pagina { padding-bottom: 0; min-height: calc(100vh - 384px); }


/* BLAUWDRUK FOLLOWUP */
.followup-pagina { background: transparent; }
#banner-content.followup_main { background: RGB(12, 137, 144, 0.15); margin-top: 95px; }
.followup-pagina .nav-item a:focus { color: #fff !important; background: #0C8990 !important; border-radius: 3px !important; }
#header-followup .col-sm-12 { margin-top: 180px; text-align: center; }
#header-followup h1 { padding: 0 0 40px 0; color: #000; font-weight: 600; font-size: 2rem; padding: 0 0 5px 0; }
#header-followup h2 { font-size: 1.15rem !important; font-weight: 600; margin-bottom: 25px; color: #0C8990; }
#header-followup .col-sm-12 { margin-top: 180px; text-align: center; background: RGBA(12, 137, 144, 0.05); padding: 60px 200px; }
.followup-pagina { background: transparent; min-height: calc(100vh - 297px); }

/*{;} PROJECTEN */
.pg-dwd-id-004 .followup-pagina { min-height: 531px; }
.projecten-item img { margin: 0 auto; max-width: 100%; }
.projecten-item { overflow: hidden; margin-bottom: 80px !important; box-shadow: 0 2px 5px 3px #eff1f8; margin: 0 30px; }
.projecten-item h2 { padding: 15px 0 0px 0; font-size: 18px; text-align: center; font-weight: 400; background: #FFF; overflow: hidden; z-index: 9; position: relative; }
.projecten-item p { text-align: center; font-size: 12px; padding-bottom: 5px; }


/*{;} FOOTER -- */
.landingspage.footer { padding: 30px 0; background: #0C8990; color: #FFF; font-size: 14px; font-weight: 400;
margin-top: 70px; }
.landingspage.footer .container .row div:nth-child(1) { text-align: left; }
.landingspage.footer .container .row div:nth-child(2) { text-align: right; }
.landingspage.footer a { color: RGBA(255, 255, 255, 0.7); font-family: inherit; font-size: inherit; text-decoration: none;
font-weight: inherit; }
.landingspage.footer img { margin-bottom: 3px; }



/*{;} ANIMATIONS ------------------------------------------------------------------------------------ */
/* BOUNCE */

.bounce{
	animation-name: bounce;
	-webkit-animation-name: bounce;

	animation-duration: 1.6s;
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
	0% {
		transform: translateY(0%) scaleY(0.6);
	}
	60%{
		transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		transform: translateY(0%) scaleY(1.05) scaleX(1);
	}
	90%{
		transform: translateY(0%) scaleY(0.95) scaleX(1);
	}
	100%{
		transform: translateY(0%) scaleY(1) scaleX(1);
	}
}

@-webkit-keyframes bounce {
	0% {
		-webkit-transform: translateY(0%) scaleY(0.6);
	}
	60%{
		-webkit-transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
	}
	90%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
	}
	100%{
		-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
	}
}

/*{;} ANIMATIONS ------------------------------------------------------------------------------------ */
/* PULLUP */

.pullUp{
	animation-name: pullUp;
	-webkit-animation-name: pullUp;

	animation-duration: 1.1s;
	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
}

@keyframes pullUp {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}
}

@-webkit-keyframes pullUp {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}
}

/*{;} ANIMATIONS ------------------------------------------------------------------------------------ */
/* SLIDEUP */


.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;

	animation-duration: 1s;
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;

	visibility: visible !important;
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}
	100% {
		transform: translateY(0%);
	}
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}
	100% {
		-webkit-transform: translateY(0%);
	}
}

/*{;} ANIMATIONS ------------------------------------------------------------------------------------ */
/* SLIDEDOWN */


.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;

	animation-duration: 1s;
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;

	visibility: visible !important;
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}
	100% {
		transform: translateY(0%);
	}
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}
	100% {
		-webkit-transform: translateY(0%);
	}
}


/*{;} ANIMATIONS ------------------------------------------------------------------------------------ */
/* SLIDE RIGHT  */

.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;

	animation-duration: 1s;
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;

	visibility: visible !important;
}

@keyframes slideRight {
	0% {
		transform: translateX(-150%);
	}
	50%{
		transform: translateX(8%);
	}
	65%{
		transform: translateX(-4%);
	}
	80%{
		transform: translateX(4%);
	}
	95%{
		transform: translateX(-2%);
	}
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideRight {
	0% {

		-webkit-transform: translateX(-150%);
	}
	50%{
		-webkit-transform: translateX(8%);
	}
	65%{
		-webkit-transform: translateX(-4%);
	}
	80%{
		-webkit-transform: translateX(4%);
	}
	95%{
		-webkit-transform: translateX(-2%);
	}
	100% {
		-webkit-transform: translateX(0%);
	}
}

/*{;} ANIMATIONS ------------------------------------------------------------------------------------ */
/* FLOATING  */

.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(8%);
	}
	100% {
		transform: translateY(0%);
	}
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);
	}
	50% {
		-webkit-transform: translateY(8%);
	}
	100% {
		-webkit-transform: translateY(0%);
	}
}

/*{;} ANIMATIONS ------------------------------------------------------------------------------------ */
/* PULSE  */

.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;

	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.9);
		opacity: 0.7;
	}
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;
	}
}



/*{;} MEDIA QUERIES -- */
/* BREAKPOINTS > DESKTOP > TABLET > MOBILE */
@media (min-width: 1590px) {
  #banner-content .row { padding: 260px 0 0 0; }


}

@media (min-width: 1400px) {

}

@media (min-width: 1200px) and (max-width: 1590px){
  #banner-content h1 { font-size: 50px; }

}

@media (min-width: 1200px) {
  .h1, h1 { font-size: 36px; }

}

@media (max-width: 1199px) {
  #banner-content h1 { font-size: 50px; margin-bottom: 20px; }
}

@media (min-width: 993px) {
  .landingspage-brand-img { float: left; width: 350px; animation: pullUp .9s backwards; padding: 15px; }

}

@media (min-width: 992px) {
  .navbar-nav { position: absolute; right: 40px; }
  .navbar.navbar-expand-lg.bg-body-tertiary { background: transparent !important; }
  .navbar-brand.donker { display: none; }
  .dropdown-item { padding-right: var(--bs-navbar-nav-link-padding-x) !important; padding-left: var(--bs-navbar-nav-link-padding-x) !important; }
  .dropdown-menu.show li { background: #0C8990 !important; margin: 8px 0; transition: .9s; border-radius: 4px; }
  .dropdown-menu.show::before {
  	content: "";
  	border-top: 10px solid transparent;
  	border-bottom: 10px solid #0C8990;
  	border-left: 10px solid transparent;
  	border-radius: ;
  	border-right: 10px solid transparent;
  	bottom: 91px;
  	position: absolute;
  	left: 8px;
  	animation: pulse .5s infinite;
  }
  .dropdown-menu.show li { animation: slideDown 1s; }
  .nav-item:hover a { color: #FFF !important; }
  .nav-link:focus, .nav-link:hover { color: #FFF !important; }
  #container-wrapper.active .nav-link:focus { color: #fff !important; background: #0C8990 !important; border-radius: 3px !important; }
  .navbar-nav li:nth-child(1) .nav-link.active::before { box-shadow: 1px 1px 26px #0c8990; content: ""; animation: pulse 1s infinite; position: absolute; width: 57px; height: 22px; left: 0; right: 0; bottom: 2px; z-index: -1; }
  .navbar-nav li:nth-child(1) .nav-link.active { position: relative; }
  .followup .dropdown-item.taalswitcher { color: #FFF; }
  .dropdown-menu.show li:hover { background: #085B60 !important; transition: .8s ease-in-out; }

}

@media (max-width: 991px) {
  #container-wrapper { position: fixed; left: 0; right: 0; top: 0; }
  .navbar-brand.wit { display: block; margin: 0 auto; }
  .navbar-brand.donker { margin: 0 auto; }
  .navbar-toggler { position: absolute; left: 10px; top: 17px; border: 0 !important; }
  .navbar-toggler:focus { box-shadow: none !important; }
  .navbar.navbar-expand-lg.bg-body-tertiary { padding: 2px 0 !important; background: transparent !important; }
  #container-wrapper .container { margin: 0; width: 100% !important; min-width: 100%; left: 0; position: absolute; right: 0; padding: 0; }
  .nav-item a { font-size: 12px; font-weight: 400; color: #000; background: transparent; letter-spacing: 1px; text-transform: uppercase; padding: 5px 15px; transition-duration: 400ms; transition-property: all; transition-timing-function: cubic-bezier(.7,1,.7,1); }
  #container-wrapper.active .navbar.navbar-expand-lg.bg-body-tertiary { background: #FFF !important; }
  .nav-item { border-top: 1px solid #ebeef6; }
  .pg-dwd-id-001 .nav-item { border-top: 1px dashed RGB(61, 210, 204, 0.3); }
  .navbar-brand.donker { display: none; }
  .nav-item a { padding: 12px 15px; }
  .nav-link:hover { border-radius: 0; }
  .nav-link.active { border-radius: 0; }
  .navbar-nav { margin-top: 25px; margin-bottom: 25px !important; }
  .dropdown-menu.show li { animation: slideDown 1s; }
  #container-wrapper.active .navbar-toggler { top: 18px; }
  .dropdown-item:focus, .dropdown-item:hover { color: #000 !important; }
  #container-wrapper.active .dropdown-item { background: transparent; color: #000 !important; }
  .followup #banner-content.succes .col-sm-6:nth-child(2) { margin-top: 50px; padding-top: 85px; }
  #header-followup .col-sm-12 { margin-top: 50px; padding-top: 85px !important; padding: 77px; }
  .navbar-collapse::before { content: ""; position: absolute; left: 0; right: 0; background: rgb(0, 0, 0, 0.66); width: 100%; height: 100vh; z-index: -1; transition: .5s; }
  .followup .nav-item a:hover { color: #FFF !important; }
  .sucesspagina { padding: 20px; }
  .errorpagina { padding-left: 20px; padding-right: 20px; }
  .navbar-toggler { top: 48px; }
  .followup-pagina { padding: 20px; }
  .feedback-module { padding: 20px !important; }
  .followup-pagina { min-height: unset !important; }
  #header-followup .col-sm-12 { margin-bottom: 40px; }
  .feedback-module { top: 50px; }
  .feedback-module.breed #feedback-btn { position: absolute !important; top: -21px; }
  .section.main.followup #feedback-btn { position: absolute; top: -21px; }
  .followup-pagina .navbar.navbar-expand-lg.bg-body-tertiary, .sucesspagina .navbar.navbar-expand-lg.bg-body-tertiary { background: #FFF !important; }
  .followup-pagina #container-wrapper #navbarNavDropdown .nav-link, .succespagina #container-wrapper #navbarNavDropdown .nav-link  {  }
  .pg-dwd-id-001 .nav-item a { color: #FFF; }
  .pg-dwd-id-001 .nav-item a:hover { color: #FFF !important; padding-left: 18px !important; }

/* HAMBURGER MENU STYLING HOMEPAGE */
  .custom-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(61, 210, 204)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
  .custom-toggler.navbar-toggler { border-color: rgb(61, 210, 204); }

  #container-wrapper.active   .custom-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
  #container-wrapper.active   .custom-toggler.navbar-toggler { border-color: rgb(0, 0, 0); }

/* HAMBURGER MENU STYTLING FOLLOWUP & ANDERE */
  .followup-pagina .custom-toggler .navbar-toggler-icon, .pg-dwd-id-003 .custom-toggler .navbar-toggler-icon, .pg-dwd-id-002 .custom-toggler .navbar-toggler-icon  { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(12, 137, 144)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
  .followup-pagina .custom-toggler.navbar-toggler, .pg-dwd-id-003 .custom-toggler.navbar-toggler,  .pg-dwd-id-002 .custom-toggler.navbar-toggler { border-color: rgb(12, 137, 144); }
  .followup-pagina #container-wrapper.active   .custom-toggler .navbar-toggler-icon, .pg-dwd-id-003 #container-wrapper.active   .custom-toggler .navbar-toggler-icon, .pg-dwd-id-002 #container-wrapper.active   .custom-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
  .followup-pagina #container-wrapper.active   .custom-toggler.navbar-toggler, .pg-dwd-id-003 #container-wrapper.active   .custom-toggler.navbar-toggler, .pg-dwd-id-002 #container-wrapper.active   .custom-toggler.navbar-toggler { border-color: rgb(0, 0, 0); }


  /*Custom active menu aanmaken home */
  .navbar-collapse::before { background: rgba(0, 0, 0, 0.93); top: 0; }

  #container-wrapper.active .nav-item { border-top: 1px solid #ebeef6; }
  #container-wrapper.active #navbarNavDropdown .nav-link { }

}

@media (min-width: 993px) and (max-width: 1198px) {

}

@media (min-width: 768px) and (max-width: 992px) {
  #banner-content .col-sm-6 { width: 100%; }
  .section.call2action .col-sm-6 { width: 100%; }
  .section.main.followup .col-sm-6 { min-width: 100%; padding: 0; }

}

@media (min-width: 576px) and (max-width: 767px) {
  .section.call2action .col-sm-6 { width: 100%; }
  .projecten-item { margin: 0 5px; margin-bottom: 35px !important; }

}

@media (min-width: 576px) and (max-width: 991px) {
  #projecten-group .col-sm-4 { width: 50%; }

}

@media (min-width: 481px) and (max-width: 767px) {
  .section.main.followup .col-sm-6 { min-width: 100%; padding: 0; }

}

@media (min-width: 481px) and (max-width: 575px) {
  #banner-content h1 { font-size: 41px; margin-bottom: 20px; }
  .followup #banner-content.succes .col-sm-6:nth-child(2) { padding-left: 40px; padding-right: 40px; }
  #header-followup .col-sm-12 { padding-left: 40px; padding-right: 40px; }
  #banner-content p { font-size: 19px; padding-bottom: 10px; }
  .faq.applicatie { padding: 20px; }
  .content-blok.main { padding: 90px 10px 5px 10px; }

}

@media (min-width: 320px) and (max-width: 480px) {
  #banner-content .row { padding: 150px 0 0 0; }
  .landingspage-brand-img { max-width: 100%; width: 267px; transition: .4s; }
  .form-control.anders { margin-top: 13px; }
  .menu-inner:hover { padding: 25px 10px; }
  #notification-x, #verzonden-notificatie { max-width: 360px !important; min-width: 360px; }
  #verzonden-notificatie { padding: 25px; }
  #banner-content.succes .col-sm-6:nth-child(2) { padding: 25px; }
  .sucesspagina { padding: 20px !important; padding-top: 21px !important; }
  #banner-content h1 { font-size: 34px; margin-bottom: 20px; }
  .menu-inner.active { font-size: 1.3rem; }
  .followup #banner-content.succes .col-sm-6:nth-child(2) { padding-left: 20px; padding-right: 20px; text-align: left; }
  .navbar-toggler { top: 39px; }
  #header-followup .col-sm-12 { padding: 60px 20px; text-align: left; }
  .followup-pagina { padding-left: 20px; padding-right: 20px; }
  .feedback-module { padding: 15px !important; }
  #banner-content p { font-size: 19px; padding-bottom: 15px; }
  .faq.applicatie { padding: 20px; }
  .section.main.followup #feedback-btn { position: absolute; top: -16px; }
  .feedback-module.breed #feedback-btn { top: -16px; }

}

@media screen and (max-width: 767px) {
  #banner-content .col-sm-6 { width: 100%; }
  .landingspage.footer .container .row div:nth-child(1) { text-align: center; }
  .landingspage.footer .container .row div:nth-child(2) { text-align: center; margin-top: 16px; font-size: 11px; }

}

@media screen and (max-width: 400px) {
  header { padding: 10px; }
  #banner-content h1 { font-size: 40px; }
  .landingspage-brand-img { max-width: 230px; }
  .navbar-toggler { top: 25px; }

}

@media (min-width: 320px) and (max-width: 399px) {
  #banner-content p { font-size: 17px; }
  #banner-content h1 { font-size: 32px; }
  #banner-content .row { padding: 120px 0 0 0; }
  p, a, li { font-size: 15px; }
  .menu-inner { font-size: .85rem; padding-left: 0; padding-right: 0; }
  .button { font-size: 15px; }
}

@media screen and (max-width: 319px) {
  #banner-content .row { padding: 60px 0 0 0; }
  .form-control.anders { margin-top: 13px; }
  .menu-inner { padding: 25px 0; }
  .menu-inner:hover { padding: 25px 10px; }
  #notification-x, #verzonden-notificatie { max-width: 360px !important; min-width: 360px; }
  #verzonden-notificatie { padding: 25px; }
  .sucesspagina { padding: 20px !important; padding-top: 21px !important; }
  #banner-content h1 { font-size: 43px; }
  .menu-inner.active { font-size: 1.3rem; }
  .button { font-size: 15px; }
  #banner-content p { font-size: 17px; }
  #banner-content h1 { font-size: 32px; }
  #banner-content .row { padding: 120px 0 0 0; }
  p, a, li { font-size: 15px; }
  .faq.applicatie { padding: 20px; }
}

/*
Einde van dit CSS bestand. Merk je enige bugs op? Meldt het ons dan via workaround@dewebdeveloper.nl!
© 2020 - 2023 - De Web Developer Amsterdam - V1.0
*/