body
{
	background-color: #000000;
	background-image: url("indextaus.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

.kuplat{
	position: fixed;
	display: block;
	width: 100%;
	text-align: center;
	bottom: 20px;
}

.kuva{
	width: 250px;
	border: solid 2px #000000;
	margin: 10px;
	border-radius: 125px 125px 125px 125px;
	cursor: pointer;
	opacity: 0.7;
	z-index: 900;
}

.kuva:hover{
	border: solid 2px #FFFFFF;
	opacity: 1.0;
}

.menu{
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 3px;
	color: #FFFFFF;
	font-family: Helvetica, sans-serif;
	font-size: 22px;
	text-align: center;
	z-index: 950;
}

.menu span:hover{
	cursor: pointer;
	color: red;
}

.modal{
	position: relative;
	display: none;
	width: 50%;
	margin-top: 50px;
	padding: 10px;
	color: #000000;
	font-family: Helvetica, sans-serif;
	font-size: 18px;
	border: 1px solid;
	opacity: .9;
	background-color: #FFFFFF;
	text-align: center;
	box-align: center;
	z-index: 999;
	padding-bottom: 20px;
	float: left;
    left: 50%;
	top: 200px;
    transform: translate(-50%, -50%);
}

.modalClose{
	display: block;
	float: right;
	right: 5px;
	top:5px;
}

.modalClosePic{
	padding: 0;
}

.modalClosePic:hover{
	cursor: pointer;
	background-color: #EEEEEE;
}

.otsikko{
	display: block;
	width: 100%;
	margin-top: 50px;
	height: auto;
	text-align: center;
	color: #FFFFFF;
	font-family: Helvetica, sans-serif;
	font-size: 48px;
}


@media all and (max-width: 600px) {

	.menu{
		width: 100%;
	    text-shadow: 2px 2px 4px #000000;
	}

	.modal{
		width: 90%;
		font-size: 24px;
	}

	.kuva{
		width: 150px;
	}
	 
	.otsikko{
		font-size: 32px;
	    text-shadow: 2px 2px 4px #000000;
	}
}

@media all and (max-height: 500px) {

	.kuva{
		width: 150px;
	}
 
 	.otsikko{
		font-size: 32px;
	    text-shadow: 2px 2px 4px #000000;
	}
}