@import url("./reset.css");
@import url("./root.css");
@import url("./general.css");

/* kruisje */
.gallery-nav {
	position: absolute;
	top: 1rem;
	right: 1rem;
	height: 1.5rem;
	width: 1.5rem;
	cursor: pointer;
	z-index: 100;
}
.gallery-nav figure {
	/* position: absolute; */
	top: 1rem;
	right: 1rem;
	height: 1.5rem;
	width: 1.5rem;
}
.gallery-nav img {
	width: 100%;
}

.gallery-container {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 100%;
}
.slider-container,
.slider-wrapper {
	display: inline-flex;
	height: 100%;
	width: auto;
}
.slider-container {
	transform: translateX(0);
	will-change: transform;
}
.slider-container figure {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	height: 100%;
}
.slider-container img {
	max-height: 100vh;
	max-width: 100vw;
}

figcaption {
	text-align: center;
	padding: 0.5rem;
	height: 2rem;
}

@media (min-width: 1024px) {
	.ar-container {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 10vw;
		background-color: #f9f1f2;
		z-index: 10;
	}
	.ar-container.left {
		left: 0;
	}
	.ar-container.right {
		left: 90vw;
	}
	.ar-container img {
		display: inline-block;
		width: 50px;
	}

	.slider-container {
		transition: transform 0.5s;
	}
	.slider-wrapper {
		position: absolute;
		left: 10vw;
	}
	.slider-container figure {
		width: 80vw;
	}

	.slider-container figure img {
		display: block;
		max-width: 100%;
		max-height: calc(100% - 2rem);
	}

	.ar-button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px;
		border: none;
		border-radius: 50%;
		background-color: transparent;
	}
	.ar-button:hover {
		background-color: white;
		outline: 1px solid #aaa;
		cursor: pointer;
	}
}

@media (max-width: 1023px) {
	html,
	body {
		overflow-x: hidden;
	}

	main {
		padding-top: 0;
		min-height: 100vh;
		overflow: hidden;
	}

	.social,
	.ar-container {
		display: none;
	}

	.gallery-container {
		display: flex;
		flex-direction: row;
		/*position: relative;*/
		/* height: calc(100vh - 126px - 1rem - 1rem); */
		 /* 100vh - header - padding-bottom en -top */
		 height: 100vh;
	}
	
	.slider-container {
		align-items: center;
		height: 100%;
/*		display: inline-flex;*/
		overflow: hidden;
/*		transition: transform 0.3s ease-out;*/
	}

	.gallery-pic {
		max-height: 80vh;
		width:100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		margin-top: -3em;
	}

	.gallery-pic img {
		max-width: 75%;
		max-height: 75%;
	}

}