html {height: 100%;width:100%;} 
body {
	height: 100%;
	width:100%;
	margin:0;
	padding:0;
    border:none;
	color:#000;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size:62.5%;
	background-color:#000;
}
td {vertical-align: top;}
img {border: 0;}
a {color:#978e7b}
hr {height:1px; border:0; background-color:#978e7b; margin:20px 0 20px 0;}
h1 {font-size:3.2rem; font-weight:normal; line-height:3.2rem}
h2 {font-size:2rem; font-weight:normal; line-height:2.2rem}
h3 {font-size:1.8rem; font-weight:normal; line-height:2.1rem}
.clear {clear:both}

/* * {transition: all .2s linear}*/
*:focus {outline: none}

.main {	
	position:relative;
	width:1200px;
	min-height:100%;
	margin:0 auto;
	background-color:#FFF;	
	font-size:1.05rem;
	line-height:150%;
}
.slide {
	position:relative;
	display:block;
	clear:both;
	border-bottom:1px solid #000;
	height:auto;
	min-height:100vh;
}
.logo {
	position:absolute;
	left:0; top:60px;
	width:550px;
	height:60px;
	background-image:url(../img/logo.png);
	background-size:360px;
	background-position:top center;
	background-repeat:no-repeat;
}
#p1 .logo {display:none}
#p1 .logo.nega {display:inline; background-image:url(../img/logo_nega.png)}
.content {
	display:inline-block;
	float:left;
	width:550px;
	padding: 8rem 3.6rem 5rem 3.6rem;
	box-sizing:border-box;
}
.content.full {width:100%}
.content .ingressi {font-size:1.3rem}
.pic {
	display:inline-block;
	float:right;
	width:645px;	
	height:100%;
	min-height:850px;
	background-color:#999;
	background-repeat: no-repeat;
	background-position:top center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.pic-text {
	float:right;
	width:645px;	
	font-size:.9rem;
	font-style:italic;
	line-height:1.1rem;
	padding-top:.4rem;
	opacity:.85;
}
.pic-text p:first-child {display:inline}
.luelisaa {
	display:inline-block;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	text-decoration:none;
	padding: .3rem 1rem .3rem 1rem;
	margin-top:1rem;
	color:#000;
}
.quot {
	font-family: 'Open Sans Condensed', sans-serif, Calibri, Arial, Helvetica;
	letter-spacing:.1rem
}
.quot p:first-child {display:inline}


/* Kuvitus & sivukohtaiset muotoilut*/
#p1 {
	background-image:url(../img/tausta_etusivu.jpg);
	background-repeat: no-repeat;
	background-position:top center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#p1 .quot {
	position:absolute;
	left:500px;
	font-size:2.3rem;
	line-height:2.5rem;
	color:#231f20;
}
@-moz-document url-prefix() { /* Toimii oikein vain FF:ssa */
	#p2 .content p:nth-child(2):first-letter  {
		font-size:6.8rem;
		float:left;
		margin-left:-.4rem;
		height:60rem;
		display:block;
	}
}
#p2 .content .quat {
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	padding:1rem;
	margin:2rem 0 1rem 0;
}
#p2 .content .quat div {
	font-size:.95rem;
	line-height:1.2rem;
	font-style:italic
}
#p2 .pic {background-color:#FFF}
#p2 .boksi {
	background-color:#dfe1e3;
	padding:1.5rem;
	margin:4rem;
}
#p2 .boksi .selite {
	display:block;
	width:10rem;
	float:left;
}
#p2 .boksi .selite.s2 {height:9rem}
#p2 .pic .quot {
	left:500px;
	font-size:2.6rem;
	color:#231f20;
	padding: 12rem 5.1rem 5rem 5.2rem;
	line-height:3rem;
}
#p2 .pic .quot:before, #p3b .quot:before {
    content: url(../img/quat.png);
	height:2rem;
	margin-top:-1rem;
	margin-left:-1.2rem;
	padding-right:.4rem;
	float:left;
}
#p3 .content {text-align:center; padding-top:15rem; line-height:2rem}
#p3 .pic {background-image:url(../img/carita1.jpg)}
#p3b .pic {background-image:url(../img/carita2.jpg)}
#p3b .quot {
	float:right;
	width:19rem;
	padding:8rem 10rem 0 0;
	font-size:2.6rem;
	color:#231f20;
	line-height:3rem;
	
}
#p4 .content {margin-top:3rem}
#p4 .pic {
	background-image:url(../img/kartta.jpg);
	-moz-background-size: 100%;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size: 100%;
	height:542px;
	min-height:542px;	
	cursor:pointer
}
#p4 {
	background-image:url(../img/tausta_bottom.png);
	background-repeat:no-repeat;
	background-position:bottom;
}



/* valikko */
.menu-wrapper {
	position:fixed;
	right:50px;	
	right:calc((100% - 1200px) / 2 + 50px);
	top:35px;
	z-index:1;
}
.menu {
	visibility: hidden;
    transition: all .5s;
	background-color:#f9f9f9;
	border:1px solid rgba(0,0,0,.08);
	padding:10px;
	margin-top:45px;
}
.menu.hidden {visibility: hidden}
.menu ul {
	padding:5px 10px 5px 10px;
	list-style-type: none;
	min-width:160px;
}
.menu li {padding: 0 0 0 0}
.menu a {text-decoration:none; color:#000; padding: 1rem 1.5rem 1rem 1.5rem; display:block}
.menu a:hover {text-decoration:underline}
.menu-button {float:right; height:30px}
.menu-button img {float:right; cursor:pointer}
.menu-button:focus .menu {visibility: visible; height:auto}

.anchor {height:0; display:block}