/* pimopheij.nl */

* {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: pim;
	src: url(font/OpenSans-Light.ttf) format("truetype");
}

html, body {
	height: 100%;
	overflow: hidden;
}

body {
	font-family: pim, sans-serif;
	background-color: #333;
}

header {
	position: absolute;
	top: 30%;
	width: 100%;
	z-index: 10;
}

h1 {
	text-align: center;
	text-transform: uppercase;
	font-size: 120px;
	color: white;
}

/* Instagram + LinkedIn */
.links {
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.links a {
	display: block;
	width: 100px;
	height: 100px;
	background-size: 100px;
	transition: background-image 0.4s ease-in-out;
}

.instagram { background-image: url(logo/instalogo.png); }
.instagram:hover { background-image: url(logo/instalogocolor.png); }

.linkedin { background-image: url(logo/linktlogo.png); }
.linkedin:hover { background-image: url(logo/linktlogocolor.png); }

@media only screen and (max-width: 600px) {
	h1 { font-size: 70px; }
}

/* Slideshow: 10 foto's, elk 6 seconden */
.slideshow,
.slideshow:after {
	position: fixed;
	inset: 0;
	list-style: none;
	z-index: 0;
}

.slideshow:after {
	content: '';
	background: url(logo/background.png) repeat top left;
}

.slideshow li span {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0;
	backface-visibility: hidden;
	animation: imageAnimation 60s linear infinite 0s;
}

.slideshow li:nth-child(1) span  { background-image: url(img/1.jpg); }
.slideshow li:nth-child(2) span  { background-image: url(img/2.jpg);  animation-delay: 6s; }
.slideshow li:nth-child(3) span  { background-image: url(img/3.jpg);  animation-delay: 12s; }
.slideshow li:nth-child(4) span  { background-image: url(img/4.jpg);  animation-delay: 18s; }
.slideshow li:nth-child(5) span  { background-image: url(img/5.jpg);  animation-delay: 24s; }
.slideshow li:nth-child(6) span  { background-image: url(img/6.jpg);  animation-delay: 30s; }
.slideshow li:nth-child(7) span  { background-image: url(img/7.jpg);  animation-delay: 36s; }
.slideshow li:nth-child(8) span  { background-image: url(img/8.jpg);  animation-delay: 42s; }
.slideshow li:nth-child(9) span  { background-image: url(img/9.jpg);  animation-delay: 48s; }
.slideshow li:nth-child(10) span { background-image: url(img/10.jpg); animation-delay: 54s; }

@keyframes imageAnimation {
	0%   { opacity: 0; animation-timing-function: ease-in; }
	8%   { opacity: 1; animation-timing-function: ease-out; }
	17%  { opacity: 1; }
	25%  { opacity: 0; }
	100% { opacity: 0; }
}