html, body {
	position:relative;
	overflow-x:hidden;
	margin:0;
	background-color:#080807;
	height:100%;
}

h1 {
	font-weight: 600;
	font-family: 'Krona One', sans-serif;
	margin:0;
	font-size: 62px;
	text-align: bottom;
}

h2 {
	font-weight: 600;
	font-family: 'Krona One', sans-serif;
	margin:0;
}

h3 {
	font-weight: 600;
	font-family: 'Krona One', sans-serif;
	margin:0;
}

p {
	font-weight: 600;
	font-family: 'Krona One', sans-serif;
	margin:0;
	font-size: 20px;
	letter-spacing: 0.1em;
}

a {
	font-weight: 400;
	font-family: 'Krona One', sans-serif;
	margin:0;
	font-size: 20px;
	letter-spacing: 0.1em;
	color: #faecd4;
	text-decoration: none;
}



#wrapper {
	position: relative;
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
	width:100%;
	height:100%;
}

#linkBoxText {
	position:relative;
	width:50%;
	height:50%;
	background-color:#080807;
	box-sizing: border-box;
	border: 35px solid #080807;
	color: #faecd4;
	
}

#nameBoxText {
	position:relative;
	width:50%;
	height:50%;
	background-color:#080807;
	box-sizing: border-box;
	border: 35px solid #080807;
	color: #faecd4;
}

#nameBoxTextMobile {
	position:relative;
	width:100%;
	height:25%;
	background-color:#080807;
	box-sizing: border-box;
	border: 35px solid #080807;
	color: #faecd4;
	display:none;
}

#infoBoxText {
	position:relative;
	width:50%;
	height:50%;
	background-color:#080807;
	box-sizing: border-box;
	border: 35px solid #080807;
	color: #faecd4;
	display: flex;
	justify-content: space-between;
	flex-direction: column-reverse;
	cursor: pointer;
}

#infoBoxText:hover {
	background-color:#faecd4;
	box-sizing: border-box;
	border: 35px solid #faecd4;
	color: #080807;
}

#infoBoxText:hover a{
	color: #080807 !important;
}


#text {
	position: relative;
	bottom:-10;
}

#name {
	position: absolute;
	bottom:-10;
	width:70%;
}

#contactText {
	position: relative;
	bottom:-10;
	text-align: left;
}

#infoText {
	width:100%;
	height:100%;
	text-align: left;
	cursor:pointer;
	display:flex;
	flex-direction: column;
}

#imgText1 {
	background-color: #08080700;
	z-index: 5;
	opacity:0;
	width:100%;
	height:100%;
	color:#080807;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	border: 5px solid #08080700;
}

#imgText2 {
	background-color: #08080700;
	z-index: 5;
	opacity:0;
	width:100%;
	height:100%;
	color:#080807;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	border: 5px solid #08080700;
}

.linkBox {
	position:relative;
	width:50%;
	height:50%;
}

.linkBox:hover {
	cursor: pointer;
}

#imgText1:hover {
	background-color: #faecd490;
	opacity:1;
}

#imgText2:hover {
	background-color: #faecd490;
	opacity:1;
}

#linkBox1 {
	background: url(dt1.jpg) top center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#linkBox2 {
	background: url(8.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#linkBox3 {
	background: url(kaupunkilainen.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#linkBox4 {
	background: url(4.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#linkBox5 {
	background: url(olavi-1.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#linkBox6 {
	background: url(00.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#linkBox7 {
	background: url(noaa-1.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#linkBox8 {
	background: url(nellie13.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#linkBox9 {
	background: url(hp2.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#arrow {
	position: fixed;
	bottom:10px;
	z-index: 200;
	display: initial;
	animation: hideArrow;
	animation-duration: 5s;
	animation-fill-mode: forwards
}

@media only screen and (max-width: 975px) {
	#arrow {
		display:none;
	}

	.linkBox {
	position:relative;
	width:100%;
	height:50%;
	}

	#nameBoxText {
		display:none;
	}

	#nameBoxTextMobile {
		display:flex;
	}

	#linkBoxText {
		width:100%;
		height:300px;
	}

	#infoBoxText {
		width:100%;
		height:125px;
	}
}

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

#imgText1 {
	text-shadow: 1px 1px #080807;
	opacity:1;
	color:#faecd4;
}

#imgText2 {
	text-shadow: 1px 1px #080807;
	opacity:1;
	color:#faecd4;
}

#contactText {
	display:none;
}

}

@media only screen and (max-width: 500px) {
	#linkBoxText {
		width:100%;
		height:200px;
	}

	#infoBoxText {
		width:100%;
		height:115px;
	}

	h1 {
		font-size:32px;
	}

	p {
		font-size:12px;
	}

	a {font-size:12px;}
}

@keyframes hideArrow {
  0%   {opacity: 1;}
  90%  {opacity: 1;}
  100% {opacity: 0;}
}