/* serie aankondiging */
.hidden {
	display: none;
}

/* login body */
#login-body {
	background-image: url(../img/Under-construction-foto-homepage-2.jpg);
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
}

.form-color {
	width: 20%;	}

/* footer decoration start */
footer {
	background-color: grey;
	text-align: center;
	color: white;	}

footer a:first-of-type {
	color: white!important;
	text-decoration: underline;	}
/* footer decoration end */

/* index page start */
#body {
	background-color: white!important;	}

	.image-link {
		display: inline-block;
		overflow: hidden;	}
	
		.hover-enlarge {
			transition: transform 0.3s ease-in-out; 
			max-width: 60vh; 
			max-height: 100vh;		}
	
			.image-link:hover .hover-enlarge {
				transform: scale(1.1); 		}

				.center {
					position: relative;
					transform: translate(-50%, -50%);
					left: 50%;
					top: 50%;					}
/*  index page end */

/* font start */
@font-face {
	font-family: 'Futura Light';
	src: url('../fonts/futurali.ttf') format('truetype');	}
@font-face {
	font-family: 'Futura';
	src: url('../fonts/FUTURAL.ttf') format('truetype');	}
@font-face {
	font-family: 'Futura LT BT';
	src: url('../fonts/Futura\ Lt\ BT.ttf') format('truetype');	}
html {
	font-family: 'Futura Light', sans-serif !important;
	font-size: calc(12px + (18 - 12) * ((100vw - 200px) / (1200 - 200)));	}
#colorlib-div #colorlib-main-menu ul li a {
	color: #040404 !important;	}
#colorlib-div #colorlib-main-menu > ul > li.colorlib-active > a {
	color: #8a6a23 !important;	}
#colorlib-div #colorlib-main-menu ul li a:after {
	background-color: #8a6a23;	}
#colorlib-div #colorlib-main-menu ul li .sub-menu li.colorlib-active a {
	color: #8a6a23;	}
/* font end */

/*  home page start */
.home-text {
	text-align: center;	}
#homeBody {
	overflow: hidden;	}
/*  home page end */

/*  portfolio start */
	/*  slider start */
.slider {
	display: flex;
	overflow-x: scroll;
	/*Dit heb ik er even uitgehaald, Dit gaat namelijk niet goed samen met slepen. verdere wensen moeten 
	nog besproken worden */
	/*scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;*/
	height: 300px;
	border: 1px solid #ccc;		}
	.slider:hover {
		cursor: grab;
	}
		.slider::-webkit-scrollbar {
			height: 8px;		}
			.slider::-webkit-scrollbar-track {
				background-color: #fff;			}
			.slider::-webkit-scrollbar-thumb {
				background-color: #888;
				border-radius: 4px;			}
				/* Handle on hover */
				.slider::-webkit-scrollbar-thumb:hover {
					background-color: #444;				}

.slider img {
	width: auto; /* Adjust this value as needed */
	flex: none;
	/* Alsook dit. */
	/*scroll-snap-align: start;*/
	height: 100%;
	object-fit: cover;
	border: 1px solid black;	}

.portfolio {
	margin-left: 0.1%;
	margin-right: 0.1%;	}

	.carousel {
		margin: auto;
		width: 50rem;
		max-width: calc(100% - 6rem);
		position: relative;		}
	
	.carousel-inner img {
		object-fit: cover;
		filter: sepia(0.2) brightness(1.15) saturate(1.4);		}
	/*  slider end */

	/*  portfolio css start */
#page-header {
	text-decoration: underline;
	margin-top: 3%;	
	font-size: 1.4em;	}

h5 {
	text-align: center;
	font-size: 1.1em;	}
	/*  portfolio css end */
/*  portfolio page end */

/* NAVBAR START */
	/*  submenu nav start */
.sub-menu {
	display: none;
	list-style: none;
	margin-left: 20px;	}

.expand {
	display: inline-block;
	cursor: pointer;
	margin-left: 5px;	}

.indent{
	text-align: center;	}
/*  submenu nav End */
/*  nav img START */
.nav-img {
	transform: scale(1.2);}
/* nav img END */
/* NAVBAR END */

/*  picture overlay slider start */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;	}

.overlay img {
	max-width: 90%;
	max-height: 90%;	}

.overlay .close-btn {
	position: absolute;
	top: 25px;
	right: 50px;
	color: #fff;
	font-size: 50px;
	cursor: pointer;	}

.overlay .navigation {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	z-index: 999; 	}

.overlay .navigation .arrow {
	color: #fff;
	font-size: 50px;
	cursor: pointer;
	margin: 0 10px;		}

.slider img {
	width: auto;
	max-width: auto;
	height: auto;
	cursor: pointer;	}
	/*  picture overlay slider end */

/* picture overlay portraits start */
.overlay1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;	}

.overlay1 img {
	max-width: 90%;
	max-height: 90%;	}

.overlay1 .close-btn1 {
	position: absolute;
	top: 25px;
	right: 50px;
	color: #fff;
	font-size: 50px;
	cursor: pointer;	}

.overlay1 .navigation {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	z-index: 999; 	}

.overlay1 .navigation .arrow1 {
	color: #fff;
	font-size: 50px;
	cursor: pointer;
	margin: 0 10px;		}

.clickable-image {
	cursor: pointer;		}

/* picture overlay portraits end */


/*  Contact page START */
.scroll {
    height: 63vh; /* or any value */
    overflow-y: auto;
	width: 77vw;	
	border: black solid 1px;
	padding: 0.6em;	}

.vsmall{
	margin-left: 10vw;;
	font-size: x-small !important;		}

.copyright {
	padding-top: 1.8em;
	align-content: center;		}
/*  Contact page END */



/* 	media query klein scherm	*/
@media screen and (max-width: 768px) {
	.expand {
		display: inline-block;
	}
	#homeBody{
        overflow: visible !important;
    }
	.social-container {
		left: 25% !important; /* Adjust this value as needed */
	  }
}

@media screen and (max-height: 900px) {
	.home-main {
		transform: scale(0.9);
	}
}

/* 	media query groter scherm	*/
@media (min-width: 768px) {
	.social-container {
	  left: 5em !important; /* Adjust this value as needed */
	}
  }