/* 

	Theme Name: In Spe
	Theme URI: https://www.inspe-verloskunde.nl/
	Description: In Spe - praktijk voor verloskunde uit Rijssen 
	Version: 1.0  
	Author: Bloemendaal in Vorm
	Author URI: http://www.bloemendaalinvorm.nl
	
*/
/*-----------------------------------------------------------------------------------

	0.	Clearfix
	1.  Basics

-----------------------------------------------------------------------------------*/
/*---------------------------------------------- 
0. Clearfix
------------------------------------------------*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
}
.clearfix {
  *display: inline-block;
  height: 1%;
}
.clear {
  clear: both;
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  width: 100%;
}

.grecaptcha-badge {
	display: none;
}

/*---------------------------------------------- 
1. Basics
------------------------------------------------*/
body {
	font-family: 'Barlow', sans-serif;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: #3a4968;
	background: #fff;
}
body.mm-open {
	height: 100vh;
	overflow: hidden;
}

@media all and (min-width: 768px) {
	body {
		font-size: 15px;
	}
}	

@media all and (min-width: 1200px) {
	body {
		font-size: 16px;
	}
}	

@media (min-width: 1500px) {
  .container {
    max-width: 1320px;
  }
}

/* Links -------------------------------------- */
a {
	-webkit-transition: opacity 0.5s ease; 
  -o-transition: opacity 0.5s ease; 
  transition: opacity 0.5s ease;	 
  cursor: pointer;
	outline: none;
}

a:hover, a:focus, a:active {
	text-decoration: none;	
	outline: none;
	box-shadow: none;
}

/* Icons -------------------------------------- */
@font-face {
  font-family: 'inspe';
  src:  url('fonts/inspe.eot?wd1im0');
  src:  url('fonts/inspe.eot?wd1im0#iefix') format('embedded-opentype'),
    url('fonts/inspe.ttf?wd1im0') format('truetype'),
    url('fonts/inspe.woff?wd1im0') format('woff'),
    url('fonts/inspe.svg?wd1im0#inspe') format('svg');
  font-weight: normal;
  font-style: normal;
}

.insp {
  font-family: 'inspe' !important;
  speak: none;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.insp-anticonceptie:before {
  content: "\e900";
}
.insp-bevalling:before {
  content: "\e901";
}
.insp-folders:before {
  content: "\e902";
}
.insp-intake:before {
  content: "\e903";
}
.insp-kinderwens:before {
  content: "\e904";
}
.insp-kraamtijd:before {
  content: "\e905";
}
.insp-pretecho:before {
  content: "\e906";
}
.insp-team:before {
  content: "\e907";
}
.insp-uitgerekend:before {
  content: "\e908";
}
.insp-zwangerfit:before {
  content: "\e909";
}
.insp-zwangerschap:before {
  content: "\e90a";
}

/* Fonts -------------------------------------- */
.display-1, .display-2, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	display: block;
	font-family: 'Roboto Slab', serif;
	font-weight: 700;
}

.barlow { font-family: 'Barlow', serif; }
.roboto { font-family: 'Roboto Slab', serif; font-weight: 700; }

.text-400 { font-weight: 400; }
.text-500 { font-weight: 500; }
.text-700 { font-weight: 700; }

.text-italic { font-style: italic; } 

.h1, h1 { font-size: 2.125rem; }
.h2, h2 { font-size: 1.8rem; }
.h3, h3 { font-size: 1.6rem; }
.h4, h4 { font-size: 1.35rem; }
.h5, h5 { font-size: 1.125rem; }
.h6, h6 { font-size: 1rem; }

@media all and (min-width: 768px) {
	.h1, h1 { font-size: 2.5rem; }
	.h2, h2 { font-size: 2rem; }
	.h3, h3 { font-size: 1.75rem; }
	.h4, h4 { font-size: 1.5rem; }
	.h5, h5 { font-size: 1.25rem; }
	.h6, h6 { font-size: 1rem; }
}



/* Colors ------------------------------------- */
.text-white { color: #fff; }
.text-blue { color: #100249; }
.text-magenta { color: #d4145a; }
.text-cyaan, .link-cyaan, .link-cyaan:hover { color: #35a9ac; }


/* Backgrounds ------------------------------- */
.bg-white { background: #fff; }
.bg-light { background: #fff2eb; }
.bg-lightblue { background: #ceecec; }
.bg-cyaan { background: #35a9ac; }

.bg-cover { 
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat; 
}

.bg-gradient {
	background: rgb(244,134,183);
	background: -moz-linear-gradient(left,  rgba(244,134,183,1) 0%, rgba(248,188,156,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(244,134,183,1) 0%,rgba(248,188,156,1) 100%);
	background: linear-gradient(to right,  rgba(244,134,183,1) 0%,rgba(248,188,156,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f486b7', endColorstr='#f8bc9c',GradientType=1 );
}

.bg-shadow {
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
}

/* Borders ------------------------------------ */
.br-3 {
	border-radius: 3px;
}

/* Container-fluid inner 6 ---------------------- */
.no-gutters {
  margin-right: -15px;
  margin-left: -15px;
}

.cf-inner-6 {
	max-width: 540px;
	margin: 0 auto;
	padding: 30px 15px;
}

@media all and (min-width: 768px) {
	.cf-inner-6 {
		max-width: 330px;
		margin: 0 0 0 auto;
		padding: 30px 60px 30px 15px;
	}
	.cf-inner-6.right {
		margin: 0 auto 0 0;
		padding: 30px 15px 30px 60px;
	}
}

@media all and (min-width: 992px) {
	.cf-inner-6 {
		max-width: 450px;
	}
}	

@media all and (min-width: 1200px) {
	.cf-inner-6 {
		max-width: 540px;
	}
}	

/* Buttons ------------------------------------ */
.btn {
	font-size: 1.05rem;
	font-weight: 700;
	padding: .5rem 1.2rem;
	border-radius: 3px;
	box-shadow: none;
}

.btn-white, .btn-white:hover {
	background: #fff;
	color: #35a9ac;
}

.btn-magenta, .btn-magenta:hover {
	background: #d4145a;
	color: #fff;
}

/* Forms ------------------------------------- */
.form-control:focus {
	-webkit-box-shadow: none;
	        box-shadow: none;
}

.wpcf7 label {
	font-weight: 700;
}

.wpcf7 label .wpcf7-list-item-label {
	font-weight: 400;
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block !important;
}

.wpcf7 .wpcf7-not-valid-tip {
	padding-top: 5px;
	color: #dc3545;
	text-align: right;
	display: none;
}

.wpcf7 .wpcf7-not-valid {
	border-left: 4px solid #dc3545 !important;
}

.wpcf7 .wpcf7-response-output {
	padding: 15px;
	text-align: center;
	margin: 15px 0 0 0;
}

.wpcf7 .wpcf7-validation-errors {
	background: #fff;
	color: #ffc107;
	border: none;
	border-left: 4px solid #ffc107;
}

.wpcf7 .wpcf7-mail-sent-ok {
	display: none;
	background: #fff;
	color: #28a745;
	border: none;
	border-left: 4px solid #28a745;
}

.wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0;
}

/* Pagination ----------------------------------*/
.pagination {
	text-align: center;
	clear: both;
	padding-top: 15px; 
	margin-top: 30px;
	border-radius: 0;
}

.pagination ul.page-numbers {
	font-size: 1.125rem;
	list-style: none;
	margin: 0 auto;
	padding-left: 0 !important;
}

.pagination .page-numbers li {
	display: inline-block;
}

.pagination .page-numbers li .page-numbers {
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	border-left-width: 0;
	display: inline-block;	
	background-color: none;
	padding: 8px 16px 6px 16px;
	border-bottom: 2px solid #e5e5e5;
	color: #666;
}

.pagination .page-numbers li .page-numbers:hover {
	color: #D4145A;
	border-bottom: 2px solid #D4145A;
}

.pagination .page-numbers li .page-numbers.next,
.pagination .page-numbers li .page-numbers.prev {
	padding-left: 1em;
	padding-right: 1em;
}

.pagination .page-numbers .current {
	font-family: 'Roboto Slab', serif;
	font-weight: 700;	
	color: #D4145A !important;
	border-bottom: 2px solid #D4145A !important;
}

/*---------------------------------------------- 
x. Overlay menu
------------------------------------------------*/
#overlay-menu {
	position: absolute;
	min-height: 100vh;
	left: 0;
	right: 0;
	height: 100%;
	background: #d4145a;
	transform: translateY(-100%);
	transition: transform 1s;
	width: 100vw;	
	overflow-y: scroll;
	z-index: 9999;
}
body.mm-open #overlay-menu {
	transform: translateY(0);	
}

	#overlay-menu .menu-wrapper {
		padding: 4rem 0;
	}

		#overlay-menu .nav-btn {
			position: fixed;
			top: 30px;
			right: 15px;
			color: #fff;
		}

			#overlay-menu .nav .nav-item + .nav-item {
				margin-top: 1rem;
			}

			#overlay-menu .nav .nav-item .nav-link {
				font-family: 'Roboto Slab', serif; 
				font-weight: 700;
				font-size: 1.444rem;
				color: #fff;
				padding: 0;
			}

			#overlay-menu .nav .nav-item .dropdown-toggle::after {
				content: "\f078";
				font-family: "Font Awesome 5 Pro";
				font-weight: 900;
				font-size: 1rem;
				position: relative;
				top: 3px;
				display: inline-block;
				margin-left: .5rem; 
				border: none;
			}

			#overlay-menu .dropdown-menu {
				border-radius: 0;
				background: #aa1551;
				border: none;
				margin: 0 auto;
				right: 0;
				text-align: center;
			}

				#overlay-menu .dropdown-menu a {
					font-size: 1.1rem;
					background: none;
					color: rgba(255,255,255,.6);
				}

					#overlay-menu .dropdown-menu a:hover {
						background: none;
						color: rgba(255,255,255,1);
					}

/*---------------------------------------------- 
x. Header
------------------------------------------------*/
#header {}

	#header--navigation {
		padding: 1.5rem 0;
	}
	
		#header--navigation .nav-btn {
			display: block;
			position: relative;
			top: 6px;
			color: #100249;
		}

		#header--navigation #hoofdmenu li + li {
			margin-left: 1.5rem;
		}

			#header--navigation #hoofdmenu li a {
				font-family: 'Roboto Slab', serif; 
				font-weight: 700;
				font-size: 1.2rem;
				color: #100249;
				padding: 0;
			}

				#header--navigation #hoofdmenu li a:hover,
				#header--navigation #hoofdmenu li.active a {
					color: #d4145a;
				}

				#header--navigation #hoofdmenu li .dropdown-menu {
					background: #d4145a;
					border: none;
					padding: 1rem 1.5rem;
					border-radius: 3px;
				}

					#header--navigation #hoofdmenu li .dropdown-menu a {
						font-size: 1rem;
						color: rgba(255,255,255,.6);
						background: none;
					}

					#header--navigation #hoofdmenu li .dropdown-menu a:hover,
					#header--navigation #hoofdmenu li .dropdown-menu .active a {
						color: rgba(255,255,255,1);
					}

						#header--navigation #hoofdmenu li .dropdown-menu a + a {
							margin-top: .5rem;
						}


	#header--masthead {
		height: 440px;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat; 
		position: relative;
	}

#header--masthead:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.25);
	z-index: 1;
}

#header--masthead .container {
	position: relative;
	z-index: 3;
}

	#header--masthead.sub {
		height: 320px;
	}

	.home #header--masthead {
		height: 550px;
		position: relative;
	}

	.home #header--masthead .h1 {
		color: #fff;
	}

	.home #header--masthead .h5 {
		color: rgb(255,255,255,.8);
	}

	.home #header--masthead .owl-masthead {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 550px;
		z-index: -1;
	}

		.home #header--masthead .owl-masthead .item {
			width: 100%;
			height: 550px;
		}

@media all and (min-width: 576px) {
	#header--masthead.sub {
		height: 440px;
	}
}

@media all and (min-width: 992px) {
	#header--masthead {
		height: 520px;
	}
	
	.home #header--masthead,
	.home #header--masthead .owl-masthead,
	.home #header--masthead .owl-masthead .item {
		height: 700px;
	}	
}

@media all and (min-width: 1920px) {
	#header--masthead.sub {
		height: 600px;
	}
}

/*---------------------------------------------- 
x. Frontpage
------------------------------------------------*/
#frontpage--introductie {
	position: relative;
	padding: 0 0 8rem 0;
	background: #ceecec;
	z-index: 3;
}

	#frontpage--introductie .row-diensten {
		position: relative;
		top: -80px;
	}

		#frontpage--introductie #diensten-list {
			margin: 0;
		}

			#frontpage--introductie #diensten-list .list-inline-item {
				float: left;
				width: 50%;
				margin: 0;
				padding: 0;
				border-bottom: 2px solid #ceecec;
			}

			#frontpage--introductie #diensten-list .list-inline-item + .list-inline-item {
				border-left: 2px solid #ceecec;
			}	

			#frontpage--introductie #diensten-list .list-inline-item a {
				text-align: center;
				display: block;	
				background: #fff;
				padding: 1.75rem .5rem;
			}

			#frontpage--introductie #diensten-list .list-inline-item a:hover {
				background: #F2F9F9;
			}			

				#frontpage--introductie #diensten-list .list-inline-item a i {
					color: #d4145a;
				}

				#frontpage--introductie #diensten-list .list-inline-item a h6 {
					color: #2badad;
					margin: 0;
				}

#frontpage--pretecho {
	background: #fff;
}

#frontpage--zwangerfit {
	background: #d4145a;
	color: #fff;
}

	#frontpage--zwangerfit .h4 {
		color: rgba(255,255,255,.6);
	}

	#frontpage--zwangerfit .btn-white {
		color: #d4145a;
	}

#frontpage--news {
	padding: 6rem 0;
	background: #ceecec;
}

	#frontpage--news h3 {
		color: #100249;
	}

	#frontpage--news article {
		padding: 2.5rem 1.5rem;
	}

		.news-article a.h5 {
			color: #D4145A;
		}

		.news-article .read-more {
			font-weight: 700;
			color: #35a9ac;
		}

		.news-article .like-post {
			font-weight: 700;
			color: #d4145a;
		}

	#frontpage--news .calculator-wrapper p {
		color: #fff;
		line-height: 1.4;
	}

		#frontpage--news .calculator-wrapper p i {
			float: left;
			margin: 0 1rem 1.5rem 0;
		}

	#frontpage--news .calculator-wrapper form label {
		font-weight: 500;
		color: #100249;
	}

	#frontpage--news .calculator-wrapper form input {
		background: none;
		border-color: #ceecec;
		box-shadow: none;
		color: #fff;
	}

	#frontpage--news .calculator-wrapper form strong {
		font-weight: 700;
		color: #100249;
	}

@media all and (min-width: 992px) {
	#frontpage--introductie #diensten-list .list-inline-item {
		width: 33.333%;
	}
	#frontpage--introductie #diensten-list .list-inline-item a {
		padding: 2rem 1rem;
	}
}	

@media all and (min-width: 1200px) {
	#frontpage--introductie #diensten-list .list-inline-item {
		width: 20%;
		border-bottom: 0;
	}
}	


/*---------------------------------------------- 
x. Page
------------------------------------------------*/
#introduction {
	padding: 3rem 0;
	background: #ceecec;
}
			
#page,
#brochures {
	padding: 3rem 0;
}

	#brochures .brochure {
		display: block; 
		background: #fff;
		-webkit-box-shadow: 5px 5px 5px 0px rgba(77,119,118,0.1);
		-moz-box-shadow: 5px 5px 5px 0px rgba(77,119,118,0.1);
		box-shadow: 5px 5px 5px 0px rgba(77,119,118,0.1);
		padding: 2rem 1rem;
		margin-bottom: 30px;
	}

		#brochures .brochure h5 {
			color: #100249;
		}

		#brochures .brochure p {
			color: #3a4968;
		}

#page--content {}

	#page--content ul:not(.list-unstyled):not(.list-inline),
	#page--content ol:not(.list-unstyled):not(.list-inline) {
		padding: 0 0 0 1rem;
		line-height: 1.8;
	}
	
	#page--content ul:not(.list-unstyled):not(.list-inline):not(.page-numbers) li a,
	#page--content ol:not(.list-unstyled):not(.list-inline) li a,
	#page--content p a {
		color: #D4145A;
	}

	#page--content h1, 
	#page--content h2, 
	#page--content h3, 
	#page--content h4, 
	#page--content h5, 
	#page--content h6 {
		color: #100249;
	}

	#page--content h1 {
		margin-bottom: 30px;
	}

	#page--content .call-to-action {
		margin-top: 3rem;
		background: #CEECEC;
		-webkit-box-shadow: 5px 5px 5px 0px rgba(77,119,118,0.1);
		-moz-box-shadow: 5px 5px 5px 0px rgba(77,119,118,0.1);
		box-shadow: 5px 5px 5px 0px rgba(77,119,118,0.1);
		padding: 2rem 1.5rem;
	}

	#page--content .team-overzicht .teamlid + .teamlid {
		margin-top: 6rem;
	}

	#page--content .nieuws-overzicht {
		
	}

		#page--content .nieuws-overzicht .card {
			border: none;
		}

			#page--content .nieuws-overzicht .card .news-article {
				padding: 2.5rem 1.5rem;
			}

#page--sidebar {}
	
	#page--sidebar .widget {
		background: #fff;
		-webkit-box-shadow: 5px 5px 5px 0px rgba(77,119,118,0.1);
		-moz-box-shadow: 5px 5px 5px 0px rgba(77,119,118,0.1);
		box-shadow: 5px 5px 5px 0px rgba(77,119,118,0.1);
		padding: 2rem 1rem;
	}

	#page--sidebar .widget + .widget {
		margin-top: 30px;;
	}

		#page--sidebar .widget h5 {
			color: #100249;
		}

		#page--sidebar .widget-menu .nav {
			margin: 0;
		}

			#page--sidebar .widget-menu .nav li + li {
				margin-top: .5rem;
			}

				#page--sidebar .widget-menu .nav li a {
					position: relative;
					padding: 0;
					color: #3A4968;
				}

				#page--sidebar .widget-menu .nav li a:hover {
					color: #100249;
				}

				#page--sidebar .widget-menu .nav li a::before {
					content: "\f105";
					font-family: "Font Awesome 5 Pro";
					font-weight: 300;
					font-size: 1em;
					display: inline-block;
					margin-right: .3rem; 
					border: none;
				}

				#page--sidebar .widget-menu .nav li a.active,
				#page--sidebar .widget-menu .nav li.active a,
				#page--sidebar .widget-menu .nav li.current_page_item a {
					font-weight: 700;
					color: #D4145A;
				}

		#page--sidebar .widget-contact address a {		
			color: #3A4968;
		}

@media all and (min-width: 576px) {
	#introduction, #page, #brochures {
		padding: 4rem 0;
	}	
}

@media all and (min-width: 768px) {
	#introduction, #page, #brochures {
		padding: 5rem 0;
	}	
}

@media all and (min-width: 992px) {
	#introduction, #page, #brochures {
		padding: 6rem 0;
	}	
}

/*---------------------------------------------- 
x. Footer
------------------------------------------------*/
#footer {}

	#footer--cta {
		background: #35a9ac;
		background-image: url('../images/pattern.svg');
		background-repeat: repeat;
		padding: 4rem 0;
	}

		#footer--cta h3 {
			color: #fff;
		}

		#footer--cta .h5 {
			color: rgba(255,255,255,.6);
			margin: 0;
		}

	#footer--upper {
		padding: 6rem 0;
		background: #fff;
	}

		#footer--upper h4 {
			margin-bottom: 2rem;
			color: #100249;
		}

		#footer--upper .list-unstyled {
			margin: 0;
		}

			#footer--upper .list-unstyled li + li {
				margin-top: .5rem;
			}

			#footer--upper .list-unstyled li a {
				font-size: 1.125rem;
				color: #3a4968;
			}

		#footer--upper address a {
			color: #3a4968;
		}

	#footer--base {
		padding: 1rem 0;
		background: #d4145a;
	}

		#footer--base span {
			color: #fff;
		}

		#footer--base .list-inline {
			margin: 0;
		}

			#footer--base .list-inline li a {
				color: #fff;
			}