@font-face {
	font-family: 'Open Sans';
	src: url('fontit/OpenSans-Light-webfont.woff') format('woff'),
	url('fontit/OpenSans-Light-webfont.tff') format('truetype');
	font-weight: 300;
	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;
}

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

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

body {
	background-color: #f1faff;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 100%;
	line-height: 1.5;
	text-align: center;
	padding: 0;
	margin: 0;
}


/* header + navigointi */

header {
	width: 100%;
	background: #f1faff;
	background: -moz-linear-gradient(left, rgba(209,236,246,1) 0%, rgba(241,250,255,1) 17%, rgba(241,250,255,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(209,236,246,1)), color-stop(17%, rgba(241,250,255,1)), color-stop(100%, rgba(241,250,255,1)));
	background: -webkit-linear-gradient(left, rgba(209,236,246,1) 0%, rgba(241,250,255,1) 17%, rgba(241,250,255,1) 100%);
	background: -o-linear-gradient(left, rgba(209,236,246,1) 0%, rgba(241,250,255,1) 17%, rgba(241,250,255,1) 100%);
	background: -ms-linear-gradient(left, rgba(209,236,246,1) 0%, rgba(241,250,255,1) 17%, rgba(241,250,255,1) 100%);
	background: linear-gradient(to right, rgba(209,236,246,1) 0%, rgba(241,250,255,1) 17%, rgba(241,250,255,1) 100%);
	border-bottom: 1px solid #d1ecf6;
	position: sticky;
	top: 0;
	z-index: 3;
	text-align: left;
	padding: 1em 2em;
	margin: 0;
}

nav {
	position: absolute;
	top: 1.6em;
	right: 2em;
	text-transform: uppercase;
}

nav a {
	border-bottom: 3px solid transparent;
	margin-left: 2em;
}

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

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

nav img {position: relative; top: 8px;}

#navi:checked ~ .linkit {display: block;}

.navi-kuvake {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	cursor: pointer;
	background-color: #0055d4;
	color: #fff;
	user-select: none;
	padding: 0.3em 1em;
	z-index: 2;
}

.navi-kuvake span::before {
	content: "\2630";
	color: #fff;
	font-size: 1.8em;
	vertical-align: middle;
	position: relative;
	top: -3px;
	padding-right: 0.3em;
}

#navi:checked ~ .navi-kuvake span::before {
	content: "\2715";
}

#navi, .navi-kuvake {display: none;}


/* footer */

footer {
	background-color: #f6f1ee;
	border-top: 5px solid #0055d4;
	padding: 3em 1em 2em;
}


/* sisältö */

main {padding: 0 0 4em;}

h1, h2, h3 {color: #0055d4; text-transform: uppercase;}


/* etusivu */

.otsikko_etusivu {
	height: 30em;
	background: #d1ecf6 url("kuvat/tausta_otsikko.jpg") no-repeat center bottom;
	background-size: cover;
}

.otsikko_etusivu h1 {
	font-size: 4.5em;
	font-weight: 400;
	padding-top: 0.7em;
	margin: 0;
}

.yritysesittely {
	font-size: clamp(1.3rem, 4.5vw, 2rem);
	font-weight: 300;
	padding: 1.5em 2em;
}


/* etusivu - Jonna */

.esittely {background-color: #fff; padding: 4em 2em;}

.esittely_kehikko {
	max-width: 85ch;
	text-align: left;
	margin: 0 auto;
}

.esittely img {
	max-width: 100%;
	height: auto;
	border: 3px solid #0055d4;
	float: left;
	margin: 0 1.5em 1em 0;
}

.esittely p {font-size: 1.1em;}

.esittely h2 {font-weight: 400; text-align: center; margin-top: 3em;}


/* etusivu - ajanvaraus */

.ajanvaraus {font-weight: 300; padding: 1.5em 2em;}

.ajanvaraus h2 {font-size: 2.7em; font-weight: 400;}

.ajanvaraus h3 {font-size: 1.8em; font-weight: 300;  margin: 2em 0 0.5em;}

.ajanvaraus li, .yhteystiedot {font-size: 1.5em;}

.ajanvaraus ul {
	max-width: 20em;
	text-align: left;
	list-style: none;
	padding-left: 2.8em;
	margin: 0 auto;
}

.ajanvaraus ul li::before {
	content: "•";
	color: #0055d4;
	font-weight: 400;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

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

.ajanvaraus .vaana {
	font-size: 3rem;
	font-weight: 400;
	color: #ff5300;
	margin: 0;
}

.ajanvaraus p {
	font-size: 1.2rem;
	margin: 2em 0 0;
}

.ajanvaraus .linkki {
	font-size: 1.5rem;
	margin: 0;
}

/* hinnasto */

.otsikko-hinnasto {
	height: 30em;
	background: #d1ecf6 url("kuvat/hinnasto/hinnasto-taustakuva.jpg") no-repeat center top;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

.otsikko-hinnasto h1 {
	font-size: 4.5em;
	font-weight: 400;
	margin: 0;
}


/* hinnasto - palvelut */

.palvelut, .tuotteet {
	font-weight: 300;
	margin-top: 3em;
}

.palvelut h2, .tuotteet h2 {
	color: #0055d4;
	font-weight: 300;
	padding: 0;
	margin: 0;
}

.palvelut .otsikko_palvelut, .tuotteet .otsikko_tuotteet {
	background-color: #0055d4;
	color: #fff;
	font-size: 1.8em;
	font-weight: 400;
	padding: 0.5em;
	margin: 5em 0 0;
}

.palvelut .otsikko_palvelut {margin-top: 0;}

.palvelut h3, .tuotteet h3 {font-size: 1.8em; font-weight: 300; margin: 2em 2em 0.5em;}

.jalkojenhoito {background-color: #fff; padding: 4em 2em; margin-bottom: 2em;}

.jalkojenhoito_kehikko {max-width: 54em; margin: 0 auto;}

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

.hoito_sisalto {
	width: calc(100% - 350px);
	display: inline-block;
	text-align: left;
	vertical-align: top;
	padding-left: 2em;
}

.jalkojenhoito ol {padding-left: 1em;}

.hoito_sisalto img {max-width: 100%; height: auto; margin: 1em 2em 0 0;}


/* hinnasto - palvelut */

.grid-kehikko {
	max-width: 80%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4em;
	padding: 4em 0 3em;
	margin-inline: auto;
}

.palvelu {
	background-color: #f6f1ee;
	box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.3);
	position: relative;
	padding-bottom: 6em;
}

.palvelu img {width: 100%; height: 250px; object-fit: cover;}

.palvelukuvaus {text-align: left; padding: 1em 2em 1em;}

.palveluhinta {
	width: 100%;
	background: #a0e1ff;
	background: -moz-linear-gradient(top, rgba(246,241,238,1) 0%, rgba(246,241,238,1) 3%, rgba(160,225,255,1) 35%, rgba(160,225,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(246,241,238,1)), color-stop(3%, rgba(246,241,238,1)), color-stop(35%, rgba(160,225,255,1)), color-stop(100%, rgba(160,225,255,1)));
	background: -webkit-linear-gradient(top, rgba(246,241,238,1) 0%, rgba(246,241,238,1) 3%, rgba(160,225,255,1) 35%, rgba(160,225,255,1) 100%);
	background: -o-linear-gradient(top, rgba(246,241,238,1) 0%, rgba(246,241,238,1) 3%, rgba(160,225,255,1) 35%, rgba(160,225,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(246,241,238,1) 0%, rgba(246,241,238,1) 3%, rgba(160,225,255,1) 35%, rgba(160,225,255,1) 100%);
	background: linear-gradient(to bottom, rgba(246,241,238,1) 0%, rgba(246,241,238,1) 3%, rgba(160,225,255,1) 35%, rgba(160,225,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f1ee', endColorstr='#a0e1ff', GradientType=0 );
	position: absolute;
	bottom: 0;
	padding: 2.5em 1em 1.5em;
}

.hinta {
	font-size: 1.5em;
	font-weight: 400;
	margin-right: 0.3em;
}


/* hinnasto - tuotteet */

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


/* yhteystiedot */

.kartta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.kartta img {
	display: block;
	max-width: 100%;
	height: auto;
}

.yritystiedot{
	max-width: 55em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
	padding: 5em 2em 3em;
	margin-inline: auto;
}

.yritystiedot div:first-of-type img:first-of-type {
	margin-bottom: 1em;
}

.jalkahoitola {
	max-width: 100%;
	height: auto;
	border: 3px solid #0055d4;
}



/* @media */

@media screen and (max-width: 80em) /*1280px*/ {
	.grid-kehikko {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 48em) /*768px*/ {
	header {
		position: static;
		text-align: center;
	}

	.navi-kuvake {display: block;}

	.linkit {
		display: none;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 3em;
		background-color: rgba(209, 239, 246, 0.80);
		border-top: 2px solid #d1ecf6;
		backdrop-filter: blur(10px);
		padding: 2em 1em;
		z-index: 1;
	}

	nav a {
		display: block;
		width: fit-content;
		margin-left: 0;
		margin: 1.5em auto;
	}

	nav img {position: initial;}

	.otsikko_etusivu, .otsikko-hinnasto {height: 20em;}

	.otsikko_etusivu h1, .otsikko-hinnasto h1 {font-size: 3.3em;}

	footer {padding-bottom: 4.5em;}

	.grid-kehikko {
		display: grid;
		grid-template-columns: 1fr;
	}

	.yritystiedot, .kartta {
		grid-template-columns: 1fr;
	}

	.kartta div:first-of-type {
		height: 20em;
	}

}

@media screen and (max-width: 42.5em) /*680px*/ {
	.poisto {display: none;}

	.ajanvaraus h2 {font-size: 2em;}

	.ajanvaraus h3 {font-size: 1.3em; margin: 2em 0 0.5em;}

	.ajanvaraus li, .yhteystiedot {font-size: 1.2em;}

	.ajanvaraus ul {padding-left: 4em;}

	.hoito_sisalto {
		width: 100%;
		display: block;
		text-align: center;
		padding-left: 0;
		margin-top: 2em;
	}

	.jalkojenhoito ol {display: inline-block; text-align: left; margin: 1em auto;}
}

@media screen and (max-width: 37.5em) /* 600px */ {
	.esittely_kehikko {text-align: center;}

	.esittely img {
		max-width: 100%;
		height: auto;
		display: block;
		border: 3px solid #0055d4;
		float: none;
		margin: 0 auto 2em;
	}
}

@media screen and (max-width: 25em) /*400px*/ {
	body {font-size: 90%;}

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

	.otsikko_etusivu, .otsikko-hinnasto {height: 15em;}

	.otsikko_etusivu h1, .otsikko-hinnasto h1 {font-size: 2.8em;}

	.otsikko_etusivu h1 {padding-top: 0.4em;}
}