@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: 500;
	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: 600;
	font-style: normal;
}

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

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

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

body {
	height: 100%;
	background-color: #ffff00;
	color: #000;
	font-family: 'Open Sans', 'Trebuchet MS', Arial, sans-serif;
	line-height: 1.5;
	letter-spacing: 0.1em;
	padding: 0;
	margin: 0;
}


/* header + päänavigointi */

header {
	width: 100%;
	background-color: #000;
	color: #b5b5b5;
	position: fixed;
	left: 0;
	top: 0;
	padding: 1.7em 2em 1.5em;
	z-index: 2;
}

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

nav {
	color: #ececec;
	position: absolute;
	right: 2em;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

nav a {
	font-size: 1.2em;
	font-weight: 500;
	text-transform: uppercase;
	margin-left: 1em;
}

nav a:hover:not(.valittu) {border-bottom: 3px solid #ffff00;}

nav .valittu {border-bottom: 3px solid #ffff00;}

#label_navi {
	display: none;
	color: #ffff00;
	position: absolute;
	right: 1em;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 2em;
	text-align: center;
	line-height: 0.7;
}

#label_navi:hover {color: #fff;}

#navi {display: none;}

#navi:checked ~ #navigointi {top: 8.5em;}


/* footer */

footer {
	background-color: #000;
	color: #b5b5b5;
	text-align: center;
	padding: 3em 2em;
}

.footer-logo {
	max-width: 100%;
	height: auto;
	position: relative;
	right: -23px;
	padding: 0 2em;
}


/* yleiset */

section {
	/*border: 1px solid plum;*/
	padding: 2rem 2rem 3rem;
}


/* otsikko */

.otsikko {
	text-align: center;
	margin-top: 6rem;
}

.otsikko img {
	max-width: 100%;
	height: auto;
}

.otsikko h1 {
	max-width: 40ch;
	font-size: 2em;
	margin: 1em auto 0.3em;
}

.otsikko.iso h1 {
	font-size: clamp(2.5em, 5vw, 4em);
	text-transform: uppercase;
}

.otsikko p {
	font-size: 1.6rem;
	margin: 0;
}

.otsikko_etusivu {
	background: #ffff00 url("kuvat/etusivu_tausta2.jpg") no-repeat center center;
	background-size: cover;
	text-align: center;
}

.otsikko_etusivu h1 {
	font-size: 3.5em;
	text-transform: uppercase;
	text-shadow: 0 0  5px #91c1e5, 0 0  10px #91c1e5;
	padding: 2.5em 1.5em 4em;
	margin: 0;
}


/* ota yhteyttä */

.ota_yhteyttä {
	text-align: center;
}

.ota_yhteyttä div {
	max-width: 40ch;
	background-color: #000;
	color: #fff;
	font-size: 1.2em;
	padding: 1.5em 2em;
	margin: 0 auto;
}

.ota_yhteyttä div p {margin-top: 2em;}

.ota_yhteyttä a {border-bottom: 2px solid #ffff00; padding: 0.2em;}


/* etusivu - info */

.info {text-align: center;}

.info_esittely img {max-width: 100%; height: auto;}

.info_esittely img:nth-of-type(2) {padding-top: 2em;}

.info_esittely p, .info_esittely ul {font-size: 1.4em;}

.info ul {
	display: inline-block;
	text-align: left;
	margin: 0.8em auto;
}

.info ul li {list-style-type: "\2212";}


/* etusivu - dieselkurssi */

.dieselkurssi {
    background: #fff;
	border-top: 7px solid #000;
	border-bottom: 7px solid #000;
    text-align: center;
}

.tulossa {
	display: inline-block;
	font-size: 4em;
	font-weight: 600;
	border: 6px solid #000;
	border-radius: 0.5em;
	padding: 0.3em 0.8em;
	transform: rotate(-10deg);
}

.dieselkurssi h2 {font-size: 3em; padding: 0; margin: 0;}

.seuraava_kurssi {font-size: 1.1em;}

.dieselkurssi img {
    max-width: 100%;
    height: auto;
}

.dieselkurssi div:not(.ilmoittaudu) {
    display: inline-block;
    width: calc(100% / 2 - 1em);
    vertical-align: top;
    padding: 0 2em;
    margin-bottom: 2em;
}

div .ilmoittaudu {
    display: inline-block;
	background-color: #000;
	color: #fff;
	font-size: 1.2em;
	padding: 1.5em 3em 2em;
	margin: 2em auto 0;
}


/* etusivu - nettiosoitteet */

.nettiosoitteet {
	background-color: #000;
	color: #fff;
	border-top: 4px solid #ffff00;
	border-bottom: 4px solid #ffff00;
	font-size: clamp(1.5em, 2.5vw, 2em);
	text-align: center;
	padding-top: 3rem;
}

.nettiosoitteet span {color: #ffff00; margin: 0 0.5em;}

.nettiosoitteet a:hover, .nettiosoitteet a:focus {border-bottom: 2px solid #ffff00;}


/* etusivu - merkit */

.merkit {
	background-color: #fff;
	border-top: 7px solid #000;
	text-align: center;
}

.merkit div {
	width: calc(100% / 4);
	display: inline-block;
	vertical-align: middle;
	padding: 1em;
}

.merkit div:first-of-type, .merkit div:nth-of-type(2) {width: 49%;}

.merkit img {max-width: 100%; height: auto;}

.merkit p {
	font-size: 2em;
	font-weight: 500;
	margin-bottom: 0;
}

/* palvelut */

.palvelut, .palvelut-muut_tiedot {
	text-align: center;
}

.palvelut img {
	max-width: 100%;
	height: auto;
	margin-top: 1em;
}

.palvelut div {
	max-width: 80ch;
	margin: 1em auto;
}

.palvelut div:not(:last-of-type) {margin-bottom: 4em;}

.palvelut div h2 {
	background-color: black;
	color: white;
	list-style: none;
	font-size: 1.3em;
	font-weight: 500;
	text-transform: uppercase;
	padding: 0.5em 2em;
}

.palvelut div .uutta {
	font-weight: bold;
	font-size: 1.8em
}

.palvelut h3 {
	text-transform: uppercase;
	margin: 2em auto 0.5em;
}

.palvelut ul {
	max-width: 20em;
	text-align: left;
	margin: 1em auto;
}


/* palvelut - hinnasto */

.hinnat h2 {
	text-transform: uppercase;
	text-align: center;
}

.hinnat table {
	border-collapse: collapse;
	text-align: center;
	margin: auto;
}

.hinnat th {
	background-color: black;
	color: #fff;
	font-weight: 500;
	text-transform: uppercase;
	padding: 0.5em 0;
}

.hinnat td {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	vertical-align: top;
	padding: 0.6em 1.5em;
}


.hinnat tr:nth-of-type(2) td:nth-of-type(2) {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

.hinnat tr:last-of-type > td {border: none;}


/* palvelut - galleria */

.galleria {
	background-color: #000;
	color: #fff;
	text-align: center;
	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: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
	padding: 0 0 3em;
	margin: 0;
}

.galleria_kuva {width: calc(100% / 3 - 0.6em); padding: 0; margin: 0.3em;}

.galleria_kuva img {width: 100%; height: auto; display: block; padding: 0; margin: 0;}


/* jaltest */

.jaltest_esittely {
	text-align: center;
	padding-bottom: 0;
}

.jaltest_esittely h2 {
	max-width: 60ch;
	text-transform: uppercase;
	margin: 3em auto 1em;
}

.jaltest_esittely p:not(div p):not(.myynti) {
	max-width: 80ch;
	margin: 1em auto;
}

.tuotekuva {
	border: 4px solid #000;
	margin: 1em;
}

.palvelu {
	width: calc(100% / 3);
	display: inline-block;
	vertical-align: top;
	padding: 0 3em;
}

.palvelu img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 2em;
}

.myynti {margin: 3em auto;}

.banneri {
	background-color: #fff;
	margin-top: 2em;
	box-shadow: 5em 0 0 #fff, -5em 0 0 #fff;
}

.banneri img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}


/* projektit */

.projektit {
	text-align: center;
}

.projektit div:not(:last-of-type) {margin-bottom: 4em;}

.projektit p {
	max-width: 70ch;
	font-size: 1.3em;
	margin: 1em auto;
}

.projektit img {
	max-width: 100%;
	height: auto;
	border: 4px solid #000;
	margin: 1em;
}

.projektit video {
	display: block;
	max-width: 100%;
	height: auto;
	border: 4px solid #000;
	object-fit: cover;
	margin: 1em auto;
}

/* @media */

@media screen and (max-width: 75em) /* 1200px */ {
	.otsikko_etusivu h1 {font-size: 2.7em; padding: 3em 1.5em 3em;}

	.palvelu {width: calc(100% / 2 - 1em);}

	.dieselkurssi div:not(.ilmoittaudu) {width: 100%;}

	.merkit div:nth-of-type(3),
	.merkit div:nth-of-type(8),
	.merkit div:nth-of-type(9),
	.merkit div:nth-of-type(10),
	.merkit div:nth-of-type(14) {width: calc(50% - 1em);}
}


@media screen and (max-width: 56.25em) /* 900px */ {

	nav {
		/*display: none;*/
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: -10em;
		right: 0;
		text-align: center;
		padding: 2em 2em 1em;
	}

	#label_navi {display: block;}

	.info_esittely {max-width: 100%;}

	.nettiosoitteet a {
		display: block;
		width: max-content;
		margin: 0.5em auto;
	}

	.nettiosoitteet span {display: none;}
}


@media screen and (max-width: 48em) /* 768px */ {
	html {font-size: 90%;}

	.otsikko_etusivu h1 {font-size: 2.5em; padding: 3em 1.5em;}

	.dieselkurssi h2 {font-size: 2.5em;}
}


@media screen and (max-width: 42.5em) /* 680px */ {

	.merkit div:first-of-type,
	.merkit div:nth-of-type(2),
	.merkit div:nth-of-type(14) {width: 100%;}

	.galleria_kuva {width: calc(100% / 2 - 0.6em);}

	.palvelu {width: 100%; padding: 0 2em;}

	.jaltest_esittely div:nth-of-type(1) {margin-bottom: 4em;}

	.referenssit img, .tuotekuva {
		max-width: 100%;
		height: auto;
		margin: 1em auto;
	}

	.projektit img {margin: 1em 0;}

}

@media screen and (max-width: 37.5em) /* 600px */ {

	#navi:checked ~ #navigointi {top: 12.5em;}

	nav a {line-height: 2em;}

	nav a:after{
		content: "\a";
		white-space: pre;

	}

	.otsikko_etusivu h1 {font-size: 2.2em; padding: 3.5em 1.5em;}

	.merkit div {width: calc(100% / 2 - 0.2em);}

	.merkit div:nth-of-type(3),
	.merkit div:nth-of-type(8),
	.merkit div:nth-of-type(9),
	.merkit div:nth-of-type(10) {width: 100%;}

	.merkit p {font-size: 1.5em;}
}

@media screen and (max-width: 30em) /* 480px */ {
	header img {width: 260px; height: auto;/*right: -39px;*/}

	#navi:checked ~ #navigointi {top: 12em;}

	.otsikko_etusivu h1 {font-size: 1.8em; padding: 4em 1.5em 2em;}

	section {padding: 1em 0.5em 2em;}

	.palvelu, .info_kartta, .info_esittely {padding: 0;}

	.tulossa {font-size: 3em;}

	div .ilmoittaudu {
	font-size: 1.1em;
	padding: 1.2em 1.5em 1.7em;
	}

	.hinnat td {padding: 0.6em 0.5em;}

	.palvelut div h2 {padding: 0.5em 1em;}

	.galleria_kuva {width: 100%;}
}

@media screen and (max-width: 23.75em) /* 380px */ {
	header img {right: -30px;}

	.otsikko_etusivu h1 {font-size: 1.5em;}

	.tulossa {font-size: 2em;}

	.ilmoittaudu {font-size: 1.2em; margin-top: 2em;}
}