@font-face {
	font-family: 'work sans';
	font-style: normal;
	font-weight: 100;
	src: url('../fonts/WorkSans-Light.ttf');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 100;
	src: url('../fonts/PlayfairDisplay-Regular.ttf');
}

@font-face {
	font-family: 'work sans light';
	src: url('../fonts/WorkSans-ExtraLight.ttf');
}


body {
	font-family: 'work sans', sans-serif;
	font-size: 1rem;
	font-weight: 300;
	color: #323232;
	-webkit-font-smoothing: subpixel-antialiased;

}

p {
	font-size: 1.2em;
}

li {
	font-size: 1.2em;
}

h2 {
	font-size: 3.5em;
	margin-bottom: 0.5em;
} 

.footer-copyright {
	color: white;
	font-size: 1.2em;
}

.footer-copyright p {
	margin-bottom: 0px;
}

/* Container-helper div for text overlay*/
.container-image {
	position: relative;	
	margin-bottom: 6em;
}

.breadcrumb-active {
	font-weight: bold;
}

/*#region NavBar*/
.nav-active {
	font-weight: bold;
}
.navbar-nav li a{
	color: #323232 !important;
	font-size: 1.5em;
}

#logo {
	max-width: 250px;
	width: 100%;
}

h2 {
	font-family: 'Playfair display', sans-serif;
	position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: left;
} 

h2:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 20%;
    height: 1px;
    content: '\a0';
    background-color: #323232;
}

.line-left {
	text-align: right;
}

.line-left:before {
	position: absolute;
	margin-left: -20%; /*margin-left makes place for the line to exists*/
	top: 51%;
	overflow: hidden;
	width: 18%;
	height: 1px;
	content: '\a0';
	background-color: #323232;
}

h4 {	
	font-weight: bold;
	text-decoration: underline;	
}

.container {
	width: 100%;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 7em;
}
.mb-10 {
	margin-bottom: 7em;
}

/*Image Bottom left text */
.bottom-left {
	position: absolute;
	bottom: 0.2em;
	left: 1em;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color: white;
}

.bottom-center {
	position: absolute;
	bottom: 5%;
  	left: 5%;
	right: 5%;
	padding: 1em;	
	color: #323232;
	background-color: #fff;
}

.bg-image {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	height: 85vh;
}

#banner-job {
	font-size: 2em;
	margin-bottom: 0;
}

#banner-name-firstname {
	font-size: 3.9em;
	font-family: 'work sans light', 'sans-serif';
	letter-spacing: 0.22em;
}

#banner-name-lastname {
	font-size: 3.9em;
	font-family: 'work sans', 'sans-serif';
	font-weight: 400;
	letter-spacing: -0.1em;
}
.parent-helper{
	position: relative;
}

.vertical {
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg); /* Safari/Chrome */
	-moz-transform: rotate(-90deg); /* Firefox */
	-o-transform: rotate(-90deg); /* Opera */
}

.vertical-title {
	overflow: visible;
	white-space: nowrap;	
	position: absolute;
	left: -10vw;
}

.vertical-title-product {
	overflow: visible;
	white-space: nowrap;
	position: absolute;
	left: -213px;
}

.vertical-title-contact {
	overflow: visible;
	white-space: nowrap;
	position: absolute;
	left: -265px;
}

#long-title {
	font-size: 70%;
}

/*card*/
.card{
	border: none;
}
.card-body {
	padding: 0px;
	padding-top: 0.2em;
}

.card-text {
	margin-bottom: 0em;
}

.card-title {
	font-weight: bold;
}

.breadcrumb-item a {
	color: #323232;
}

.form-control {
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-color: #323232;
	background-color: #FBFBFB;
	border-radius: 0;
}

.line-left {
	text-align: right;
}

.line-left:before {
	position: absolute;
	margin-left: -20%; /*margin-left makes place for the line to exists*/
	top: 51%;
	overflow: hidden;
	width: 18%;
	height: 1px;
	content: '\a0';
	background-color: #323232;
}

.object-fit {
	object-fit: contain;
	object-position:top;
}

.carousel-inner {
	width: 70%;
	margin: auto;
	text-align: center;
}

.subtitle_text {
	margin-bottom: 0px;
	font-weight: normal;
	text-decoration: none;
}

#background-header-maatwerk {
	background-image: url('../img/BM_web_img_maatwerk_header.jpg');
}

/*code for UHD here*/
@media (min-width: 2200px) {
	
	.vertical-title {
		overflow: visible;
		white-space: nowrap;	
		position: absolute;
		left: -3vw;
	}

	#banner-name-firstname {
		font-size: 5em;
	}
	
	#banner-name-lastname {
		font-size: 5em;
	}
}


/*code for index page background*/
@media (min-width: 960px) and (max-width: 1600px){
	#background-header-maatwerk {
		background-image: url('../img/BM_web_img_maatwerk_header_tablet.jpg');
	}
}


/*code for desktop here*/
@media (min-width: 960px){		
	.long-title {
		font-size: 2.4em;
	}

	.inner-bottom {
		position: absolute;
		bottom: 0;
	}

	h4 {
		font-size: 1.5em;
		margin-bottom: 2em;
	}

	.test-right {
		margin-right: 0px;
	}


	/*Image top left text */
	.top-left {
		position: absolute;
		top: 0.2em;
		left: 1em;
		color: #323232;
	}

	/*force navbar right*/
	.navbar-collapse { 
		flex-grow: 0;
	}

	.navbar-toggler {
		font-size: 1.75em;
	}	
}

/*code for tablets here*/
@media (min-width: 576px) and (max-width: 960px){	
	h2 {
		font-size: 2.5em;
	} 

	.long-title {
		font-size: 1.9em;
	}

	#banner-name-firstname {
		font-size: 3.25em;
	}
	
	#banner-name-lastname {
		font-size: 3.25em;
	}

	#background-header-maatwerk {
		background-image: url('../img/BM_web_img_maatwerk_header_mobile.jpg');
	}	

	.index-text {
		margin-bottom: 2em;
	}
}

/*code for mobile here*/
@media (max-width: 576px) {	
	p {
		font-size: 1em;
	}
	
	h2 {
		font-size: 1.5em;
		margin-top: 0.5em;
		margin-bottom: 0.75em;
	} 	

	h4 {
		font-size: 1em;
		margin-bottom: 1.2em;
	}

	.container {
		margin-bottom: 4em;
	}
	.mb-10 {
		margin-bottom: 4em;
	}

	#logo {
		max-width: 200px;
		width: 100%;
	}

	.container-image {
		margin-bottom: 1.75em;
	}

	.bg-image {
		height: 40vh;
	}

	.bg-image div {
		width: 100%;
	}

	#bg-image-overlay {
		width: 100%;
	}

	#banner-job {
		font-size: 1em;
		margin-bottom: 0;
	}
	
	#banner-name {
		font-size: 2em;
	}

	#banner-name-firstname {
		font-size: 2.75em;
	}
	
	#banner-name-lastname {
		font-size: 2.75em;
	}

	#background-header-maatwerk {
		background-image: url('../img/BM_web_img_maatwerk_header_mobile.jpg');
	}	

	.index-text {
		margin-bottom: 5em;
		line-height: 1.2;

	}
}




/* bootstrap overrides */
@media only screen and (min-width: 576px){
	.container {
		max-width: 1330px;
	}
}


/*
Ter info, body font is Work Sans
https://fonts.google.com/specimen/Work+Sans
voor de H's mag je Playfair Display gebruiken
https://fonts.google.com/specimen/Playfair+Display

"zwart": #323232
beige: #EAE7E2
*/