/**
 * Crossmediahouse - Wordpress theme
 *
 * @authors   Tom Morskieft <crossmediahouse.nl>
 * @version   1.0
 * @generated 2020-24-07
 * @copyright (c) 2020 Crossmediahouse
 * @license   All Rights Reserved
 */

 /* Fonts
   ========================================================================== */

@font-face {
  font-family: 'AvenirBook';
  src: url('../fonts/Avenir-Book.ttf');
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'AvenirBlack';
  src: url('../fonts/Avenir-Black.ttf');
  font-style: bold;
  font-weight: 700;
}

@font-face {
  font-family: 'AvenirHeavy';
  src: url('../fonts/avenirheavy.ttf');
  font-style: bold;
  font-weight: 700;
}

/* Globals
   ========================================================================== */

* {
	padding: 0;
	margin: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}

html, body {
	line-height: 30px;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'AvenirBook';
	font-size: 18px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

iframe {
	max-width: 100%;
	border: 0;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a, a:before, a:after, button, input[type="submit"] {
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

input[type="submit"], button {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Container
   ========================================================================== */

.container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1170px;
	margin: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* Row
   ========================================================================== */

.row {
	display: flex;
	justify-content: space-between;
}

/* Alignments
   ========================================================================== */

.alignright {
	float: right;
}

.alignleft {
	float: left;
}

.aligncenter {
	display: block;
	margin: auto;
	text-align: center;
	clear: both;
}

.text-center {
	text-align: center;
}

/* Spacers padding
   ========================================================================== */

.pt-10 {
	padding-top: 10px;
}

.pt-20 {
	padding-top: 20px;
}

.pt-30 {
	padding-top: 30px;
}

.pt-40 {
	padding-top: 40px;
}

.pt-50 {
	padding-top: 50px;
}

.pt-60 {
	padding-top: 60px;
}

.pt-70 {
	padding-top: 70px;
}

.pt-100 {
	padding-top: 100px;
}

.pt-150 {
	padding-top: 150px;
}

.pt-200 {
	padding-top: 200px;
}

.pb-5 {
	padding-bottom: 5px;
}

.pb-10 {
	padding-bottom: 10px;
}

.pb-20 {
	padding-bottom: 20px;
}

.pb-30 {
	padding-bottom: 30px;
}

.pb-40 {
	padding-bottom: 40px;
}

.pb-50 {
	padding-bottom: 50px;
}

.pb-60 {
	padding-bottom: 60px;
}

.pb-70 {
	padding-bottom: 70px;
}

.pb-100 {
	padding-bottom: 100px;
}

.pb-150 {
	padding-bottom: 150px;
}	

.pb-200 {
	padding-bottom: 200px;
}

/* Spacers margin
   ========================================================================== */

.mt-10 {
	margin-top: 10px;
}

.mt-20 {
	margin-top: 20px;
}

.mt-30 {
	margin-top: 30px;
}

.mt-40 {
	margin-top: 40px;
}

.mt-50 {
	margin-top: 50px;
}

.mt-75 {
	margin-top: 75px;
}

.mt-80 {
	margin-top: 80px;
}

.mt-100 {
	margin-top: 100px;
}

.mt-150 {
	margin-top: 150px;
}

.mt-200 {
	margin-top: 200px;
}

.mb-10 {
	margin-bottom: 10px;
}

.mb-20 {
	margin-bottom: 20px;
}

.mb-30 {
	margin-bottom: 30px;
}

.mb-40 {
	margin-bottom: 40px;
}

.mb-50 {
	margin-bottom: 50px;
}

.mb-75 {
	margin-bottom: 75px;
}

.mb-100 {
	margin-bottom: 100px;
}

.mb-150 {
	margin-bottom: 150px;
}	

.mb-200 {
	margin-bottom: 200px;
}

/* Typography
   ========================================================================== */

.text-light {
	font-weight: 300;
}

.text-normal {
	font-weight: 500;
}

.text-bold {
	font-family: "AvenirBlack";
}

.text-big {
	font-size: 1.25rem;
}

.text-white {
	color: #fff;
}

.text-black {
	color: #000;
}

.text-blue {
	color: #065395;
}

.text-ligth-blue {
	color: #1993D6;
}

.no-underline {
	text-decoration: none;
}

.regular-content p {
	margin-bottom: 30px;
}

.regular-content p:last-child {
	margin-bottom: 0;
}

.regular-content a {
	text-decoration: underline;
	color: #000;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.regular-content a:hover:not(.btn) {
	color: #1993D6;
}

.regular-content ul {
	padding-left: 20px;
}

/* Headings
   ========================================================================== */

.heading-0 {
	font-size: 40px;
	position: relative;
	margin: 0 !important;
}  

.heading-1 {
	font-size: 36px;
	position: relative;
	margin: 0 !important;
}

.heading-2 {
	font-size: 24px;
	position: relative;
	margin: 0 !important;
}

.heading-3 {
	font-size: 14px;
	position: relative;
	margin: 0 !important;
}

.heading-sub {
	font-size: 26px;
	position: relative;
	margin: 0 !important;
}

.heading-darkblue {
	color: #065395;
} 

.heading-blue {
	color: #1993D6;
}

/* Heading lines
   ========================================================================== */

.heading-line:after {
	content: '';
	width: 100%;
	max-width: 200px;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.line--blue:after {
	background: #1993D6;
}

.line--black:after {
	background: #000;
}

.line--full-width:after {
	max-width: 100%;
}

/* Buttons
   ========================================================================== */

a.btn {
	color: #fff;
	text-decoration: none;
}

.btn {
	font-size: 1rem;
	padding: 13px 25px 13px 41px;
	position: relative;
	display: inline-block;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.btn::before, .placeholder-button::before {
	content: '';
	background: url(../images/plus.svg);
	background-repeat: no-repeat;
	width: 13px;
	height: 13px;
	position: absolute;
	left: 22px;
	top: 21px;
	z-index: 2;
}

.btn--blue {
	background: #1993D6;
}

.btn--darkblue {
	background: #065395;
}

.button-link {
	font-size: 1rem;
	color: #000;
	text-decoration: none;
	position: relative;
	font-weight: 900;
}

.button-link svg {
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	margin-left: 20px;
}

.btn:hover {
	opacity: 0.7;
}

.button-link:hover svg {
	transform: translateX(5px);
}

/* Sections
   ========================================================================== */

.section-white {
	background-color: #FFF;
	height: auto;
}

.section-grey {
	background-color: #F5F5F3;
	height: auto;
	padding: 100px 0 0 0;
}

#main {
	background-color: #F5F5F3;
}

/* Default content
   ========================================================================== */

/* Header */

header {
	width: 100%;
	padding: 90px 0;
}

.header-inner {
	padding: 60px 0;
	background-color: #fff;
	width: 100%;
	font-size: 1rem;
	position: fixed;
	top: 0;
	z-index: 999;
	transition: all .3s ease-in-out;
}

header .btn {
	height: 100%;
}

.header-scroll .header-inner {
	padding: 20px 0;
	transition: all .3s ease-in-out;
	box-shadow: 0 0 50px rgba(0,35,43,.08);
	-webkit-transition: all .3s ease-in-out;
}

.header-menu {
	padding-top: 10px;
}

.hamburger-menu {
	display: none;
}

.header-mobile-menu .menu li span {
	display: none;
}

.menu {
	display: flex;
	justify-content: space-between;
}

.menu li {
	list-style-type: none;
	padding-right: 50px;
	position: relative;
}

.menu li a {
	text-decoration: none;
	color: #000;
	position: relative;
	font-family: 'AvenirHeavy';
}

#menu-item-131 a {
	color: #1993D6;
}

.show-menu .header-mobile-menu {
	display: block;
}

.header-mobile-menu {
	display: none;
}

.header-menu ul li a::after {
	content: '';
	width: 0;
	height: 2px;
	background-color: #1993D6;
	position: absolute;
	bottom: -2px;
	left: 0;
}

.header-menu ul li.current-menu-item a::after {
	width: 100%;
}

.header-menu ul li a:hover::after {
	width: 100%;
}

.header-menu .sub-menu li a:hover, .sub-menu li.current-menu-item a {
	border-bottom: 1px solid #1993D6;
}

.cycle-next svg, .cycle-prev svg, .flickity-next svg, .flickity-prev svg {
	transition: all .3s ease-in-out;
}

.cycle-prev:hover svg, .flickity-prev:hover svg {
	transform: translatex(-5px);
}

.cycle-next:hover svg, .flickity-next:hover svg {
	transform: translatex(5px);
}

.scroll-cta:hover {
	padding: 13px 13px 30px;
}

.menu-item-has-children:hover .sub-menu, .sub-menu:hover {
	display: block;
}

.menu-item-has-children a::before {
	content: '';
	background: url('../images/down.svg');
	position: absolute;
	width: 15px;
	height: 15px;
	top: 10px;
	right: -20px;
	background-repeat: no-repeat;
}

.header-menu .sub-menu {
	position: absolute;
	width: 250px;
	padding: 20px;
	left: 0;
	top: 30px;
	background: #FFF;
	display: none;
	box-shadow: 0 0 50px rgba(0,35,43,.08);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	font-size: 15px;
}

.header-menu .sub-menu li {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #F5F5F3;
}

.header-menu .sub-menu li:last-child {
	border: none;
}

.sub-menu a::after, .sub-menu a::before {
	display: none;
}

/* Breadcrumbs */

#breadcrumbs, #breadcrumbs a {
	text-decoration: none;
	color: #065395 !important;
	font-size: 0.875rem;
}

/* Intro content */

.home .intro-content {
	background-color: #fff;
	position: relative;
}

.home .intro-content:after {
	content: '';
	width: 20%;
	height: 10%;
	position: absolute;
	bottom: 0;
	right: 0;
	background: #F5F5F3;
}

body.page .intro-content h1, body.single .intro-content h1 {
	padding: 0;
	font-family: "AvenirBlack";
}

body.page .intro-content h1.heading-line::after, body.single .intro-content h1.heading-line::after {
	display: none;
}

body.home .intro-content h1 {
	padding-bottom: 50px;
	font-family: "AvenirBook";
}

body.home .intro-content h1.heading-line::after {
	display: block;
}

.intro-content h1 {
	line-height: 50px;
}

.intro-content .content-text {
	line-height: 27px;
}

.content-text, .content-afbeelding {
	width: 50%;
}

.single-diensten .content-afbeelding {
	width: 48%;
}

.content-text {
	padding: 50px 60px 70px 0;
}

.content-text h1 strong {
	color: #065395;
	font-weight: 900;
	font-family: "AvenirBlack";
}

.content-afbeelding {
	position: relative;
	background: #F5F5F3;
}

.content-afbeelding img {
	width: 100%;
	height: 90%;
	object-fit: cover;
}

.projects-slideshow {
	width: 70%;
	max-height: 250px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 1rem;
}

.projects-slideshow a {
	color: #fff;
	text-decoration: none;
}

.slide {
	position: relative;
	width: 100%;
}

.slide-item {
	width: 100%;
	min-height: 100%;
}

.projects-slideshow .slide-text {
	background-color: #065395;
	padding: 20px 0 0 20px;
}

.projects-slideshow .slide-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cycle-prev, .cycle-next {
	position: absolute;
	left: 20%;
	bottom: 10px;
	cursor: pointer;
	font-size: 0.625rem;
	display: none;
}

.cycle-next {
	left: auto;
	right: 20%;
}

.displayNav {
	display: block;
}

.projects-slideshow .flickity-viewport {
	overflow: hidden;
}

/* Projecten grid */

.diensten {
	width: 100%;
}

.diensten-section .content-box {
	line-height: 20px;
	max-width: 80%;
	margin: 0 auto;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}

.diensten-item {
	width: 100%;
	height: 100%;
	max-height: 340px;
	background-color: #fff;
	margin-bottom: 30px;
}

.diensten-item-inner {
	width: 50%;
	max-height: 340px;
	position: relative;
}

.diensten.grid .diensten-item {
	max-height: 200px;
	margin-bottom: 0;
}

.diensten.grid .diensten-item-inner {
	max-height: 200px;
}

.diensten-item-inner:nth-child(2) {
	padding: 40px 30px 30px;
}

.diensten-item-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.diensten-item-inner.item-text a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.diensten.grid .excerpt {
	display: none;
}

.diensten-intro.no-grid {
	text-align: left;
}

.diensten-intro.no-grid .content-box {
	margin: 0 auto 0 0;
}

.diensten.grid {
	width: 100%;
}

.excerpt.no-grid {
	padding-top: 10px;
}

/* Projecten */

.projecten-inner {
	width: 48%;
	background-color: #fff;
	height: 100%;
}

.projecten-inner .content {
	padding: 60px 40px;
}

.projecten-inner .content:nth-child(2) {
	padding: 40px;
}

.projecten-inner:nth-child(1) .content p:first-child {
	font-size: 1.25rem;
}

.projecten-inner img {
	max-height: 360px;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Projecten carousel */

.carousel-section {
	overflow-x: hidden;
}

.carousel h3 {
	margin-left: 40px;
	margin-bottom: 30px;
}

.carousel .projecten-inner {
	width: 100%;
}

.carousel .item {
	width: 30%;
	margin-right: 20px;
}

.carousel .projecten-inner img {
	height: 220px;
}

.carousel .projecten-inner .content p:not(.text-light) {
	font-size: 0.875rem;
}

.flickity-buttons {
	font-size: 0.625rem;
	width: 180px;
	margin: 0 0 0 auto;
}

.flickity-prev, .flickity-next {
	cursor: pointer;
}

.flickity-next svg, .flickity-prev svg, .cycle-next svg, .cycle-prev svg {
	position: relative;
	top: 2px;
}

/* Content volledige breedte */

.section-white {
	position: relative;
}

.section-white .content {
	width: 50%;
	margin: 0 0 0 auto;
}

.content-image {
	width: 45%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}

.content-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-white .content .content-box p:first-child {
	font-size: 1.25rem;
}

/* Content */

.content-item .content-box p:first-child {
	font-size: 1.25rem;	
}

/* Cta block */

.cta-content {
	width: 100%;
	padding: 80px 160px;
	border-bottom: 1px solid #065395;
	background-color: #fff;
	text-align: center;
}

.cta-content h3 {
	display: inline-block;
}

.cta-content .btn {
	background-color: #065395;
}

.cta-content .heading-sub span {
	color: #065395;
}

/* Cta scroll */

.scroll-cta {
	background-color: #065395;
	padding: 13px;
	font-size: 1rem;
	position: fixed;
	top: 50%;
	right: -60px;
	transform: translateY(-50%) rotateZ(-90deg);
	z-index: 999;
	cursor: pointer;
}

/* Content naast elkaar */

.text-box {
	padding: 40px;
	background: #fff;
	width: 48%;
}

.text-box:nth-child(2) {
	padding: 170px 40px 40px
}

/* Afbeelding volledige breedte */

.image-box {
	width: 100%;
	max-height: 550px;
}

.image-box img {
	width: 100%;
	height: 100%;
	max-height: 550px;
	object-fit: cover;
}

/* Contact fields */

input, textarea {
	border: 1px solid #D9D9D9;
	padding: 10px 5px;
	font-size: 1.125rem;
	font-family: "AvenirBook";
	width: 100%;
}

input[type="submit"] {
	width: auto;
	color: #fff;
	border: none;
}

.placeholder-button {
	position: relative;
}

/* Footer */

#footer {
	line-height: 27px;
}

#footer .footer-block:not(:first-child) p {
	padding: 25px 0;
	border-bottom: 1px solid rgba(112, 112, 112, .25);
}

#footer .footer-block:not(:first-child) p a {
	color: #000;
}

#footer .footer-block p:last-child {
	border-bottom: none;
}

.block-title {
	font-size: 1.25rem;
	font-weight: 300;
	padding-bottom: 20px;
}

#footer .footer-block {
	width: 23%;
}

.socials {
	background-color: #065395;
	width: 100%;
	padding: 25px 0;
}

.socials a {
	color: #fff !important;
}

.socials a:hover {
	color: #1993D6 !important;
}

.inner-socials {
	width: 200px;
	height: 30px;
}

.inner-socials svg {
	width: 30px;
	height: 30px;
}

#footer .menu .sub-menu {
	display: none;
}

#footer .menu .menu-item-has-children a::before {
	display: none;
}

#footer a {
	color: #1993D6;
	text-decoration: none;
}

#footer .menu a {
	color: #000;
	font-family: 'AvenirBook';
}

/* Responsive
   ========================================================================== */

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

	.container {
		max-width: 95%;
	}

}

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

	.logo {
		width: 150px;
		padding: 8px 0px;
	}

	.menu li {
		padding: 0 20px;
	}

	.header-menu .menu li a {
		font-size: 1rem
	}

}

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

	.row.responsive-row {
		display: block;
	}

	.content-text, .projecten-inner, .content-image, .content {
		width: 100% !important;
	}

	.content-text {
		padding: 50px 0;
	}

	.section-white .content {
		margin: 0 !important;
	}

	.content-image {
		position: static;
		width: 100%;
		max-height: 250px;
	}

	.content-image img {
		max-height: 250px;
	}

	.heading-0 {
		font-size: 2rem;
	}

	.heading-1 {
		font-size: 1.5rem;
	}

	.heading-2 {
		font-size: 1.3rem;
	}

	.heading-sub {
		font-size: 1.2rem;
	}

	.intro-content .content-afbeelding {
		display: none;
	}

	.projecten-inner:nth-child(1) {
		margin-bottom: 40px;
	}

	.carousel-section .projecten-inner:nth-child(1) {
		margin-bottom: 0;
	}

	.footer-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	#footer .footer-block {
		width: 95%;
		margin-top: 20px;
	}

	header a {
		font-size: 0.925rem !important;
	}

	header .btn {
		display: none;
	}

	.text-box {
		width: 100%;
		padding: 40px 20px;
	}

	.diensten {
		width: 100%;
	}

}

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

	.grid {
		display: block;
	}

	.footer-row {
		display: grid;
		grid-template-columns: 1fr;
	}

	#footer .footer-block {
		width: 100%;
		margin-top: 50px;
	}

	.diensten.grid .diensten-item {
		margin-bottom: 30px;
	}

	.projecten-inner img {
		max-height: 250px;
	}

	.carousel .item {
		width: 100%;
		margin-right: 50px;
	}

	.flickity-buttons {
		position: absolute;
		top: 40%;
		left: 0;
		width: 100%;
	}

	.flickity-prev, .flickity-next {
		background: #fff;
		width: 40px;
		height: 40px;
		padding: 0 11px;
		font-size: 0;
		margin: 0 20px;
	}

	.flickity-next svg, .flickity-prev svg {
		top: 11px;
	}

	.scroll-cta {
		display: none;
	}

	.cta-content, .projecten-inner .content:nth-child(2), .projecten-inner .content {
		padding: 40px 20px;
	}

	.diensten-item-inner:nth-child(1) {
		display: none;
	}

	.diensten-item-inner {
		width: 100%;
		max-height: 370px;
	}

	.diensten-item {
		max-height: 360px;
	}

	.excerpt {
		padding: 10px 0 40px;
	}

	.text-box:nth-child(2) {
	    padding: 0 20px 40px;
	}

	.header-mobile-menu {
		background: #fff;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 120px;
		left: 0;
		z-index: 999;
	}

	.show-menu .header-mobile-menu {
		top: 84px;
	}

	 .header-menu {
	 	display: none;
	 }

	 .hamburger-menu {
	 	display: block;
	 	width: 24px;
	 	height: 100%;
	 	padding: 12px 0;
	 	-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	 }

	 .hamburger-menu span {
	 	position: relative;
		display: block;
		width: 100%;
		height: 3px;
		border-radius: 10px;
		margin-bottom: 5px;
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	 	background: #065395;
	 	position: relative;
	 }

	 .header-inner {
	 	padding: 30px 0;
	 }

	 header {
	 	padding: 60px 0;
	 }

	 .logo {
	 	padding: 0;
	 	width: auto;
	 }

	 .header-scroll .header-inner {
	 	padding: 10px 0;
	 }

	 .header-scroll .hamburger-menu {
	 	padding: 20px 0;
	 }

	 .header-mobile-menu .menu {
	 	display: block;
	 	width: 100%;
	 	height: 100%;
	 }

	 .sub-menu {
	 	display: none;
	 }

	 .header-mobile-menu .menu li {
	 	border-bottom: 1px solid #EEE;
	 	padding: 12px 25px;
	 }

	 .header-mobile-menu .menu li a {
	 	width: 100%;
		display: block;
	 }

	 .menu-item-has-children a::before {
	 	display: none;
	 }

	 .header-mobile-menu .menu li span {
	 	position: absolute;
	 	right: 13px;
		top: 16px;
	 	display: block;
	 	cursor: pointer;
	 	z-index: 999;
	 	width: 40px;
	 	text-align: center;
	 }

	 .header-mobile-menu .menu li span svg {
	 	width: 20px;
	 	height: 20px;
	 }

	 .header-mobile-menu .menu li.open ul {
	 	display: block;
	 }

	 .header-mobile-menu .menu .sub-menu li:last-child {
	 	border-bottom: none;
	 }

	 .show-menu .hamburger-menu span:nth-child(1) {
	 	transform: rotate(45deg);
	 	top: 4px;
	 }

	 .show-menu .hamburger-menu span:nth-child(2) {
	 	transform: rotate(-45deg);	
	 	bottom: 4px;
	 }

	 .show-menu .hamburger-menu span:nth-child(3) {
	 	opacity: 0;
	 }

}