@font-face {
	font-family: 'Open Sans';
	src: url('fontit/OpenSans-CondBold-webfont.woff') format('woff'),
	url('fontit/OOpenSans-CondBold-webfont.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('fontit/OpenSans-Regular-webfont.woff') format('woff'),
	url('fontit/OpenSans-Regular-webfont.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;	
}

@font-face {
	font-family: 'Open Sans';
	src: url('fontit/OpenSans-Semibold-webfont.woff') format('woff'),
	url('fontit/OpenSans-Semibold-webfont.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;	
}

@font-face {
	font-family: 'Open Sans';
	src: url('fontit/OpenSans-Bold-webfont.woff') format('woff'),
	url('fontit/OpenSans-Bold-webfont.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;	
}

*, *::before, *::after {box-sizing: border-box;}

a:link, a:visited, a:hover, a:active {text-decoration: none; color: inherit;}

h2 {font-size: 2em; text-transform: uppercase;}

h3 {font-size: 1.5em; font-weight: 600;}

html {height: 100%; font-size: 100%; padding: 0; margin: 0;}

body {
	height: 100%;
	background-color: #000;
	color: #f9f9f9;
	font-family: 'Open Sans', 'Trebuchet MS', sans-serif;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.02em;
	padding: 0;
	margin: 0;
}


/* header */

header {
	width: 100%;
	background-color: #000;
	border-bottom: 1px solid #333333;
	text-align: left;
	position: fixed;
	top: 0;
	z-index: 3;
	padding: 0.5em;
}

header img {
	max-width: 100%;
	height: auto;
	display: inline-block;
	padding: 2em;
}


/* navigointi */

nav {
	display: inline-block;
	vertical-align: top;
	color: #ececec;
	position: absolute;
	right: 0.5em;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

nav a {
	display: inline-block;
	border-left: 1px solid #333333;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	vertical-align: top;
	padding: 1.5em;
}

nav a:hover:not(.valittu) {color: #f9b117;}

nav .valittu {color: #f9b117;}

#navi {display: none;}

#label_navi {
	display: none;
	color: #f9b117;
	cursor: pointer;
	font-size: 2em;
	position: absolute;
	right: 0.5em;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 1em;
}

#navi:checked ~ #navigointi {display: block;}


/* otsikko */

.otsikko_etusivu {height: 80%; position: relative;}

.otsikko_etusivu h1 {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	color: #ececec;
	font-size: 3.5em;
	position: absolute;
	bottom: 0;
	padding: 0.5em 1em;
	margin: 0 auto;
}

.otsikko_etusivu {
	background: #000 url("kuvat/tausta-etusivu.jpg") no-repeat center top 3em;
	background-size: cover;
}

.otsikko_palvelut {height: 65%; position: relative;}

.otsikko_palvelut div {
	width: 100%;
	color: #ececec;
	position: absolute;
	bottom: 0;
	padding: 0.5em 1em;
	margin: 0 auto;
}

.otsikko_palvelut h1 {font-size: 3.5em; text-transform: uppercase; margin-bottom: 0;}

.otsikko_palvelut p {font-size: 1.3em; margin-top: 0;}

.otsikko_ulkomainonta {
	background: #000 url("kuvat/tausta-ulkomainonta.jpg") no-repeat center bottom 3em;
	background-size: cover;
}

.otsikko_bookkaus {
	background: #000 url("kuvat/tausta-bookkaus.jpg") no-repeat center bottom 3em;
	background-size: cover;
}

.otsikko_puutyöt {
	background: #000 url("kuvat/tausta-puutyöt.jpg") no-repeat center bottom 3em;
	background-size: cover;
}

/* palvelumme */

.palvelumme {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 4em 2em 6em;
}

.palvelumme h2 {width: 100%;}

.palvelu {
	width: calc(100% / 5 - 1em);
	background-color: #242424;
	position: relative;
	margin: 4em 3em;
}

.palvelu img {
	width: 100%;
	height: auto;
	-o-object-fit: cover;
	object-fit: cover;
}

.palvelu div {padding: 0 1em 6em;}

.nuoli-eteenpain {
	display: block;
	width: 100%;
	color: #f9b117;
	font-size: 2.8em;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.5em;
}


/* Ulkomainonta - Asiakaskartoitus & bookkaus */

.esittely, .hinnat, .galleria {padding: 2em; margin-bottom: 3em;}

.esittely h2 {max-width: 40ch; margin: 0 auto 2em;}

.esittely p, .hinnat p {max-width: 80ch; font-size: 1.2em; margin: 0 auto 3em;}

.ota_yhteytta {
	background-color: #f9b117;
	color: #000;
	padding: 4em 2em;
}

.ota_yhteytta h2 {max-width: 40ch; font-size: 1.8em; margin: 0 auto 1em;}

.yhteystieto {
	display: inline-block;
	vertical-align: top;
	font-size: 1.4em;
	padding: 1em;
}

.pilottipalvelut {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 4em 0 1em;
}

.pilotti {
	width: calc(100% / 5);
	background-color: #242424;
	border-radius: 1em;
	position: relative;
	padding: 0 0 18em;
	margin: 3em;
}

.pilotti h3 {
	background-color: #f9b117;
	color: #000;
	border-radius: 0.6em 0.6em 0 0;
	padding: 0.7em;
	margin: 0 0 2em;
}

.pilotti_kuvaus {font-size: 1.5em; font-weight: 600; padding: 0 1em;}

.pilotti ul {
	width: 100%;
	list-style: none;
	position: absolute;
	bottom: 7.5em;
	padding: 1em;
	margin: 0;
}

.pilotti h4 {margin: 0 0 0.5em;}

.hinta {
	width: 100%;
	color: #f9b117;
	border-top: 1px solid #333333;
	font-size: 2em;
	font-weight: 700;
	position: absolute;
	bottom: 0;
	padding: 0.8em 0.1em;
}

.galleria h2, .hinnat h2 {margin-bottom: 2em;}

.galleria-puutyöt img {
	width: calc(100% / 4 - 1em);
	height: auto;
	display: inline-block;
	padding: 1em;
}

.galleria-ulkomainonta img {
	width: calc(100% / 3 - 1em);
	height: auto;
	display: inline-block;
	padding: 1em;
}


/* footer */

footer {
	background: #f9b117 url("kuvat/koristeraita.png") repeat-x left bottom;
	background-size: 80px;
	color: #000;
    border-bottom: 2em solid #000;
	padding: 2em 2em 6em;
}



/* @media */

@media screen and (max-width: 100em) /* 1600px */ {
	.otsikko_etusivu {height: 70%;}
		
	.palvelu {width: calc(100% / 3 - 2em);}
	
	.pilotti {width: calc(100% / 4 - 2em);}

}

@media screen and (max-width: 75em) /* 1200px */ {
	html {font-size: 90%;}
	
	header img {width: 300px; height: auto;}
	
	#label_navi {display: block;}
	
	#navigointi {display: none;}
	
	nav {
		width: 100%;
		display: block;
		background-color: rgba(0, 0, 0, 0.8);
		border-bottom: 1px solid #1a1a1a;
		text-align: center;
		position: fixed;
		left: 0;
		top: 6.9em;
		transform: initial;
		padding: 0.5em;
	}
	
	nav a:first-of-type {border-left: none;}
	
	.palvelu {width: calc(100% / 2 - 4em); margin: 4em 2em;}
	
	.galleria img {width: calc(100% / 2 - 1em);}
	
	.pilotti {width: calc(100% / 3);}
}

@media screen and (max-width: 56.25em) /* 900px */ {
	.pilotti {width: calc(100% / 2 - 2em); margin: 3em 1em;}
}

@media screen and (max-width: 48em) /* 768px */ {
	.otsikko_etusivu h1 {font-size: 3em;}
	
	.palvelu {width: 100%;}
	
}

@media screen and (max-width: 42.5em) /* 680px */ {
	nav a {
	display: block;
	border-left: none;
	font-size: 1.2em;
	padding: 0 1.5em;
    margin: 0.5em auto;
    }
    
    nav br {display: none;}
    
    .poisto {display: none;}
}

@media screen and (max-width: 37.5em) /* 600px */ {
	h2 {font-size: 1.7em;}
	
	.galleria img {width: 100%;}
	
	.pilotti {width: 100%;}
}

@media screen and (max-width: 30em) /* 480px */ {
	html {font-size: 80%;}
	
	header img {width: 250px; height: auto;}
	
	nav {top: 6.7em;}
	
	/*nav a {padding: 1em;}*/
	
	.otsikko_etusivu {height: 60%;}
	
	.otsikko_etusivu h1 {font-size: 2.2em;}
	
	.palvelumme {margin: 4em 0.5em 6em;}
}

@media screen and (max-width: 20em) /* 320px */ {
	header img {width: 250px; height: auto;}
	
	nav {top: 6.7em;}
	
	.otsikko_etusivu {height: 50%;}
	
	.otsikko_etusivu h1 {font-size: 2em;}
}