html {
	font-size: 16px;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 600;
	color: #fff;
	line-height: 1;
}

header {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 999;
}

h1 {
	font-size: 2.5rem;
	font-style: italic;
	text-transform: uppercase;
	margin-bottom: 40px;
}

.one {
	font-weight: 200;
}

h2 {
	font-size: 2.5rem;
	text-transform: uppercase;
	margin-bottom: 20px;
}

header p {
	font-size: 2.5rem;
	text-transform: uppercase;
}

footer {
	position: fixed;
	left: 20px;
	bottom: 25px;
	z-index: 999;
}

footer p {
	font-size: 1.5rem;
	margin-bottom: 5px;
	font-style: italic;
	display: inline-block;
	margin-right: 10px;
}

footer a {
	font-size: 1.5rem;
	color: #fff;

	text-decoration: none;
	font-style: normal;
}

footer a:hover {
	text-decoration: underline;
}

/* GALLERY */

/* SLIDESHOW */

.slideshow
/* .slideshow:after  */ {
	top: 0px;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	z-index: 0;
}

.slideshow div {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0;
	z-index: 0;
}

.slideshow div:nth-child(1) {
	/* animation: xfade 48s 42s infinite;
	animation-timing-function: linear; */
	animation-name: xfade1;
	animation-duration: 35s;
	animation-iteration-count: infinite;
	position: absolute;
}

.slideshow div:nth-child(2) {
	/* animation: xfade 48s 36s infinite;
	animation-timing-function: linear; */
	animation-name: xfade2;
	animation-duration: 35s;
	animation-iteration-count: infinite;
	position: absolute;
}

.slideshow div:nth-child(3) {
	/* animation: xfade 48s 30s infinite;
	animation-timing-function: linear; */
	animation-name: xfade3;
	animation-duration: 35s;
	animation-iteration-count: infinite;
	position: absolute;
}

.slideshow div:nth-child(4) {
	/* animation: xfade 48s 24s infinite;
	animation-timing-function: linear; */
	animation-name: xfade4;
	animation-duration: 35s;
	animation-iteration-count: infinite;
	position: absolute;
}

.slideshow div:nth-child(5) {
	/* animation: xfade 48s 18s infinite;
	animation-timing-function: linear; */
	animation-name: xfade5;
	animation-duration: 35s;
	animation-iteration-count: infinite;
	position: absolute;
}

.slideshow div:nth-child(6) {
	/* animation: xfade 48s 12s infinite;
	animation-timing-function: linear; */
	animation-name: xfade6;
	animation-duration: 35s;
	animation-iteration-count: infinite;
	position: absolute;
}

.slideshow div:nth-child(7) {
	animation-name: xfade7;
	animation-duration: 35s;
	animation-iteration-count: infinite;
	position: absolute;
}

@keyframes xfade1 {
	0% {
		opacity: 1;
	}
	5% {
		opacity: 1;
	}
	10% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes xfade2 {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	25% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes xfade3 {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	35% {
		opacity: 1;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes xfade4 {
	0% {
		opacity: 0;
	}
	35% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	55% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes xfade5 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	55% {
		opacity: 1;
	}
	65% {
		opacity: 1;
	}
	70% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes xfade6 {
	0% {
		opacity: 0;
	}
	65% {
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	85% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes xfade7 {
	0% {
		opacity: 0;
	}
	80% {
		opacity: 0;
	}
	85% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* media query */

@media (max-width: 800px) {
	html {
		font-size: 14px;
	}

	header {
		top: 12px;
		left: 10px;
	}

	footer {
		bottom: 15px;
		left: 10px;
	}
}

@media (max-width: 568px) {
	html {
		font-size: 10px;
	}
}

@media (max-width: 390px) {
	html {
		font-size: 8px;
	}
}