@charset "UTF-8";
/* CSS Document */

/* Nav */

nav {
	background-color: #B80E0E;
	max-width: 100%; /* <-- Nav width */
}

.menu li {
	padding: 0 20px; /* Distance of menu items */
}

.menu li a {
	padding: 25px; /* General alignment */
	font-size: 18px;
	color: #fff;
}

.menu li a:hover {
	color: #a5a5a5;
}

a.active {
	color: #ccc !important; /* active link */
}

/* For responsive design, here just an example */

/*
@media only screen and (max-width: 960px) {
	.menu li a {
		font-size: 20px;
		padding: 20px 35px;
	}
}
*/

@media only screen and (max-width: 720px) {

/* Color of hamburger menu (Should always be the same) */
.line {
	border-top-color: #fff;
	border-bottom-color: #fff;
}

/* Font size of menu items in hamburger mode */
.menu li a {
	font-size: 18px;
}

.menu {
	background-color: #6F9DD3;
}

.slide-down {
	height: 360px; /* Edit this in dependence of amount of menu items etc. */
}

}

/* General */

a {
	text-decoration: none;
	color: #F9D5D4;
	transition: color 0.35s ease-in-out;
}

/* Pre Html */

.preBackgroundImage {
	position: absolute;
	background: url(../../images/preBackgroundImage.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	height: 100vh;
	overflow-y: scroll;
}

.preBackgroundImage h2 {
	text-align: center;
	color: #fff;
}

.preLogoContainer {
	max-width: 350px;
	margin: 0 auto;
	padding: 54px 20px 30px 20px;
}

.preLogoContainer img {
	animation: spinIt 1s ease-out;
}

@keyframes spinIt {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media only screen and (max-width: 480px) {

	.preBackgroundImage h2 {
		font-size: 20px;
	}

	.preLogoContainer {
		max-width: 280px;
	}
}

.preContentContainer {
	max-width: 960px;
	margin: 0 auto 30px auto;
	padding: 20px;
	background: rgba(124, 192, 235, 0.6);
	box-sizing: border-box;
	overflow: scroll;
}

.preFooter {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 20px 0;
	background: rgba(124, 192, 235, 0.6);
	z-index: 99999;
}

.preFooter-2 {
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 20px 0;
	background: rgba(124, 192, 235, 0.6);
	z-index: 99999;
}

.preFooter a {
	text-decoration: none;
	color: #000;
	transition: color 0.35s ease-in-out;
}

.preFooter-2 a {
	text-decoration: none;
	color: #000;
	transition: color 0.35s ease-in-out;
}

.preFooterItem {
	font-weight: 600;
	font-size: 18px;
	display: inline-block;
	list-style: none;
	padding: 5px 10px;
	border-left: 1px solid #fff;
}

.preFooterItem:first-child {
	border: none;
}

@media only screen and (max-width: 520px) {
	.preFooterItem {
		display: block;
		border: none;
	}
}