a:link {
    color: #fff;
	text-decoration: none;
	}

	a:visited {
    color: #fff;
	text-decoration: none;
	}

	a:hover {
    color: #eee;
	text-decoration: none;
	}

	a:active {
    color: #fff;
	text-decoration: none;
	}
	
	@media screen and (max-width: 1200px) {
		#mapcontainer {
		transform: scale(0.6);
		}
	}
	
	@media screen and (max-width: 900px) {
		#mapcontainer {
		transform: scale(0.5);
		}
	}
	
	#loading {
		background-image: url("images/loading.png");
		background-position: center center;
		animation: spin 5s;
		animation-iteration-count:infinite;
		animation-timing-function: linear;
		position: absolute;
		width: 146px;
		height: 146px;
		opacity: 1;
		transition: opacity 0.5s ease-in-out;
		top: 50%;
		left: 50%;
		margin-left: -73px;
		margin-top: -73px;
		z-index: 500;
		pointer-events: none;
	}
	
	@keyframes spin {
		0% {transform: rotate(0deg); }
		100% {transform: rotate(360deg); }
	}
	
		#mapcontainer {
		position: absolute;
		width: 850px;
		height: 420px;
		overflow: hidden;
		left: 0px;
		bottom: 0px;
		transition: transform 2s, opacity 0.5s;
		transition-timing-function: ease-in-out;
		transform-origin: left bottom;
		pointer-events: none;
		opacity: 0;
		z-index: 100;
		
	}
	
	#map {
	background-image: url("images/map.jpg");
	background-size: cover;
	width: 600px;
	height: 400px;
	position: absolute;
	left: 10px;
	bottom: 10px;
	float: left;
	z-index: 70;
	box-shadow: 5px 5px 5px #000;
	border-radius: 10px;
	overflow: hidden;
	}
	
	#map_evo {
	background-image: url("images/map_evo.jpg");
	background-size: cover;
	width: 200px;
	height: 120px;
	position: absolute;
	right: 10px;
	top: 10px;
	float: left;
	z-index: 100;
	box-shadow: 5px 5px 5px #000;
	transition-timing-function: ease-in-out;
	transform-origin: left bottom;
	opacity: 1;
	border-radius: 10px;
	overflow: hidden;
	}
	
	.closer {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-weight: bolder;
	text-shadow: 1px 1px 3px #000;
	position: absolute;
	right: 3px;
	z-index: 101;
	top: 2px;
	}
	
	.mapdisclaimer {
	font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-size: 8pt;
    background-color: #000;
    position: absolute;
    bottom: 0px;
    float: right;
    text-align: center;
    width: 100%;
    border-radius: 3px;
    z-index: 400;
		
	}
	
	@media screen and (max-width: 900px) {
		#mapselector {
		transform: scale(0.7);
		}
	}
	
	#mapselector {
	position: absolute;
	left: 5px;
	bottom: 5px;
	float: left;
	opacity: 1;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	z-index: 5;
	opacity: 1;
	transition: opacity 1s ease-in-out;
	background-color: rgba(0,0,0,0.8);
    padding: 10px;
    border-radius: 10px;
	transform-origin: left;
	}
	
	@media screen and (max-width: 900px) {
		#infoselector {
		transform: scale(0.7);
		}
	}
	
	#infoselector {
	position: absolute;
	left: 5px;
	bottom: 50px;
	float: left;
	opacity: 1;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	z-index: 5;
	opacity: 1;
	transition: opacity 1s ease-in-out;
	transform-origin: left;
	background-color: rgba(0,0,0,0.8);
    padding: 10px;
    border-radius: 10px;
	}
	
	@media screen and (max-width: 900px) {
		#musicselector {
		transform: scale(0.7);
		}
	}
	
	#musicselector {
	transform-origin: right;
	position: absolute;
	right: 5px;
	bottom: 5px;
	float: left;
	opacity: 1;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	z-index: 5;
	opacity: 1;
	transition: opacity 1s ease-in-out;
	background-color: rgba(0,0,0,0.8);
    padding: 10px;
    border-radius: 10px;
	}
	

	
#musiccloser {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-weight: bolder;
	text-shadow: 1px 1px 3px #000;
	position: absolute;
	right: 3px;
	top: 2px;
}
	
	#mapspot01 {
	left: 305px;
	top: 160px;
	z-index: 80;
	}
	
	#mapspot02 {
	left: 330px;
	top: 45px;
	}
	
	#mapspot03 {
	left: 110px;
	top: 345px;
	}
	
	#mapspot04 {
	left: 203px;
	top: 170px;
	}
	
	#mapspot05 {
	left: 95px;
	top: 155px;
	}
	
	#mapspot06 {
	left: 300px;
	top: 295px;
	}
	
	#mapspot07 {
	left: 560px;
	top: 295px;
	}
	
	#mapspot08 {
    left: 94px;
    top: 48px;
	}
	
	#mapspot09 {
	left: 200px;
    top: 205px;
	}
	
	
	.mapspot {
	position: absolute;
	display: block;
	float: left;
	width: 20px;
	height: 20px;
	z-index: 60;
	}
	
	.mapspot .pulse {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #fff;
		opacity: 0;
		transition: opacity 1s, transform 1s;
		transform: scale(0.1);
		top: -8px;
		position: absolute;
		left: -19px;
		z-index: -1;
		display: block;
		pointer-events: none;
	}
	
	@media screen and (max-width: 900px) {
		.mapspot .maptext {
		opacity: 1;
		}
	}
	
	.mapspot .view {
		width: 89px;
		height: 77px;
		position: absolute;
		left: -33px;
		top: -52px;
		z-index: -2;
		display: block;
		padding: 0;
		margin: 0;
		transform-origin: center bottom;
		transform: rotate(0deg);
		pointer-events: none;
		transition: opacity 2s;
	}
	
	.mapspot #aulankoview {
		opacity: 0.8;
	}
	
	.mapspot #linnaview {
		opacity: 0;
	}
	
	.mapspot #ahvenistoview {
		opacity: 0;
	}
	
	.mapspot #hattelmalaview {
		opacity: 0;
	}
	
	.mapspot #loimalahtiview {
		opacity: 0;
	}
	
	.mapspot #vuorentakaview {
		opacity: 0;
	}
	
	.mapspot #vanajanlinnaview {
		opacity: 0;
	}
	
	.mapspot #ahvenistonrantaview {
		opacity: 0;
	}
	
	
	.mapspot #evoview {
		opacity: 0;
	}
	
	.mapspot .maptext {
	opacity: 0;
	font-family: 'Open Sans', sans-serif;
    width: 160px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 9px;
	transition: opacity 0.5s ease-in-out;
	pointer-events: none;
	z-index: 200;
	

	

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -80px;
	}
	
	#vanajaspot {
	left: -500%;
	bottom: -80%;
	}
	
	
	#evospot {
	left: -10%;
	}
	
	#aulankospot {
	left: -500%;
	bottom: -80%;
	}
	
	.mapspot:hover .maptext {
	opacity: 0.7;
	}
	
	.mapspot:hover .pulse {
	opacity: 0.7;
	transform: scale(1);
	}
	
	
	
    #panorama {
        width: 100vw;
        height: 100vh;
		position: absolute;
		top: 0px;
		left: 0px;
    }
	
	.hide {visibility: hidden !important;}
	
	#blackfade {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 30;
		pointer-events: none;
		background-color: #000;
		opacity: 1;
		
		/*
		animation: blackaway 10s ease-in-out forwards;
		*/
	}
	
	@keyframes blackaway {
		0% {opacity: 1; }
		30% {opacity: 1; }
		99% {opacity: 0; }
		100% {opacity: 0; }
	}
	

	#splash {
		display:block;
		width: 40vw;
		color: #FFF;
		font-family: "Poppins", sans-serif;
		position: absolute;
		text-transform: uppercase;
		z-index: 50;
		font-weight: 600;
		bottom: 20vh;
		left: 15vw;
		margin: 0 auto;
		overflow: hidden;
		height: 50vh;
		line-height: 80%;
		font-size: 5vw;
		text-align: right;
		pointer-events: none;

		/*animation: away 15s ease-in-out forwards;*/
		opacity: 0;
	}
	
	#smallsplash {
		font-size: 2vw;
		position: relative;
		top: -1vh;
	}

	@keyframes away {
		0% {opacity: 0; }
		20% {opacity: 1; }
		60% {opacity: 1; }
		99% {opacity: 0; }
		100% {opacity: 0; }
	}
	
	#music {
		width: 300px;
		display: block;
		height: 170px;
		position: absolute;
		z-index: 50;
		right: 10px;
		bottom: 10px;
		transform-origin: right bottom;
		transform: scale(0.9, 0.9);
		opacity: 0;
		transition: transform 2s ease-in-out;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
		padding-top: 40px;
		border-radius: 10px;
		pointer-events: none;
		transition: opacity 0.5s;
		background: rgba(0,0,0,0.8);
	}
	
	@media screen and (max-width: 1200px) {
		#music {
		transform: scale(0.4);
		}
	}
	
	@keyframes player {
		0% {opacity: 0; }
		60% {opacity: 0; }
		99% {opacity: 1; }
		100% {opacity: 1; }
	}

	.custom-hotspot {
		display:block;
		background-image: url("hotspot.png");
		background-position: center;
		background-repeat: no-repeat;
        height: 50px;
        width: 50px;
		opacity: 1;
    }
	
    div.custom-tooltip span {
        visibility: visible;
        position: absolute;
        border-radius: 1px;
        background-color: #000;
        color: #fff;
        text-align: center;
        max-width: 200px;
        padding: 5px 10px;
        margin-left: -220px;
        cursor: default;
		font-family: 'Open Sans', sans-serif;
		filter: alpha(opacity=50);
		-moz-opacity: 0.5;
		-khtml-opacity: 0.5;
		opacity: 0;
		border-radius: 10px;
		top: 20px;
		
		transition: opacity 0.5s ease-in-out;
		
    }
	
    div.custom-tooltip:hover span{
        opacity: 0.7;
    }
	
    div.custom-tooltip:hover span:after {
		visibility: visible;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: #000 transparent transparent transparent;
        bottom: -20px;
        left: -10px;
        margin: 0 50%;
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
    }
	
	@media screen and (max-width: 900px) {
		#information {
		transform: scale(0.7);
		}
	}
	
#infocloser {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-weight: bolder;
	text-shadow: 1px 1px 3px #000;
	position: absolute;
	right: 3px;
	top: 2px;
}
	
#information {
	position: relative;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    margin: 0 auto;
    border-radius: 10px;
    width: 90vw;
    height: 80vh;
    padding: 20px;
    display: block;
    opacity: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    max-height: 95vh;
    max-width: 95vw;
    overflow-y: auto;
    box-sizing: border-box;
    margin: 0 auto;
    z-index: 600;
	pointer-events: none;
	transition: opacity 0.5s, transform 1s;
	
}
	
#infofin {
	width: 45%;
	display: block;
	float: left;
}

#infoen {
	width: 45%;
	display: block;
	float: right;
}


.intro_container {
	background-image: url(images/intro_bg.jpg);
    background-size: cover;
    height: 100%;
    min-height: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    color: #fff;
    display: table;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0;
}

.intro_title {
    display: block;
    width: auto;
    color: #FFF;
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    top: 10vh;
    margin: 0 auto;
    overflow: hidden;
    height: auto;
    line-height: 80%;
    font-family: 'Poppins', sans-serif;
    font-size: 4vw;
    text-align: right;
    pointer-events: none;
    text-shadow: 3px 3px 7px #000;
}
	
.intro_smalltitle {
	font-size: 2vw;
	position: relative;
	top: -1vh;
}

.intro_text {
	position: relative;
	background-color: rgba(0,0,0,0.8);
	margin: 0 auto;
	border-radius: 10px;
	width: 80vw;
	padding: 20px;
	display: table;
}

.intro_startbutton {
	font-size: 20pt;
    font-family: "Poppins", sans-serif;
    background-color: rgba(0,0,0,0.8);
    margin: 0 auto;
    border-radius: 10px;
    width: 30vw;
    height: auto;
    margin-top: 3vh;
    position: relative;
	padding: 20px;
	display: table;
}

.intro_startbutton:hover {
	background-color: rgba(0,0,0,0.7);
}

.intro_requirements {
	font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
	width: 55%;
	display: block;
	float: left;
}

.intro_requirements2 {
	font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
	width: 30%;
	display: block;
	float: right;
	text-align: left;
}

.intro_startlink { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}   

.intro_startlinktext {
	font-family: "Poppins", sans-serif;
	font-size: 20pt;
	color: #fff;
	margin: 0 auto;
	width: 100%;
	margin-top: 5px;
	font-weight: 600;
}

#intro_thumbnails {
	min-width: 500px;
	max-width: 1660px;
	width: 100%;
	height: auto;
}