/* ---------- Base elements ---------- */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html, body
{
	margin: 0;
	padding: 0;

	max-width: 100%;

	font-family: "Open Sans";
}
h1 {
	margin: 0; padding: 0;
	font-size: 6em;
	color: #ffffff;
}
h2 {
	font-size: 1.8em;
}
h3 {
	font-size: 1.6em;
}
a
{
	text-decoration: none;
}

/* ---------- Content wrapper ---------- */
.wrapper
{
	min-width: 60%;
	max-width: 80%;
	margin: 0 auto;
}

/* ---------- Overall ---------- */
#header, .category {
	background-color: #ffffff;
}

/* ---------- Header ---------- */

#logocontainer {
	height: 120px; /* Fill parent height */

	padding: 1% 0; /* Leave space for logo */
}

#menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.menuentry {
	flex-grow: 1; /* Fill horizontal space */
}
.logo {
	width: 100%;
	height: 100%;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.menuentry {
	display: inline-flex;
	justify-content: center; /* Horizontal centering */
	align-items: center; /* Vertical centering */

	margin: 0;
	padding: 3%;
}

/* ---------- Correct links ---------- */
.menuentry {
	position: relative;
}
.menuentry a
{
	position: absolute;
	inset: 0;
	z-index: 999;
}
.menuentry:hover h2 {
	padding-bottom: 0px;
	color: #ffffff;
}

#header, #header a
{
	-webkit-transition: height 0.5s ease-in-out, margin 0.5s ease-in-out;
	   -moz-transition: height 0.5s ease-in-out, margin 0.5s ease-in-out;
	    -ms-transition: height 0.5s ease-in-out, margin 0.5s ease-in-out;
	     -o-transition: height 0.5s ease-in-out, margin 0.5s ease-in-out;
	        transition: height 0.5s ease-in-out, margin 0.5s ease-in-out;
}

/* ---------- Content ---------- */
.category-image {
	height: 600px;

	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	box-shadow: inset 0 3em 3em -1em rgba(0, 0, 0, 0.5),
				inset 0 -3em 3em -1em rgba(0, 0, 0, 0.5);
}
.category-image h1 {
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;

	/* Kuvien tummennus */
	background-color: rgba(0, 0, 0, 0.35);

	text-shadow: 2px 2px 12px black;
}
.category-text {
	margin: 7.5% 5%;
	font-size: 1.6em;
}

/* ---------- Footer ---------- */
#footer {
	color: #ffffff;
	padding: 2% 0;
	font-size: 1.4em;

	box-shadow: inset 0 4px 4px rgba(0,0,0,0.15),
				inset 0 8px 8px rgba(0,0,0,0.15),
				inset 0 16px 16px rgba(0,0,0,0.15),
				inset 0 32px 32px rgba(0,0,0,0.15);
}

.half {
	display: flex;
}

.vasen, .oikea {
	width: 50%;
	padding: 0 1%;
}

#footer .logot 
{
	height: 35%;
	display: flex;
}

/* ---------- Värit ---------- */

.menuentry:hover {
	background-color: #c81313;
}
#footer {
	background-color: #5b0101;
}