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

@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;	
}

* {box-sizing: border-box;}

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

body {
	background-color: #e0e5de;
	font-size: 120%;
	font-family: 'Open Sans', Arial, sans-serif;
	letter-spacing: 0.1em;
	padding: 0;
	margin: 0;
}

main {display: block; position: relative;}

.ylos {
	text-align: center;
	text-transform: uppercase;
	font-size: 0.8em;
	position: absolute;
	right: 2em;
	bottom: 1em;
}

.ylos span {color: #f7473e; font-size: 2.5em; position: relative; top: 0.2em;}

/* header + navigointi */

header {
	background: #f7473e;
	background: -moz-linear-gradient(left, rgba(247,71,62,1) 0%, rgba(247,106,62,1) 23%, rgba(247,148,62,1) 50%, rgba(169,229,58,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(247,71,62,1)), color-stop(23%, rgba(247,106,62,1)), color-stop(50%, rgba(247,148,62,1)), color-stop(100%, rgba(169,229,58,1)));
	background: -webkit-linear-gradient(left, rgba(247,71,62,1) 0%, rgba(247,106,62,1) 23%, rgba(247,148,62,1) 50%, rgba(169,229,58,1) 100%);
	background: -o-linear-gradient(left, rgba(247,71,62,1) 0%, rgba(247,106,62,1) 23%, rgba(247,148,62,1) 50%, rgba(169,229,58,1) 100%);
	background: -ms-linear-gradient(left, rgba(247,71,62,1) 0%, rgba(247,106,62,1) 23%, rgba(247,148,62,1) 50%, rgba(169,229,58,1) 100%);
	background: linear-gradient(to right, rgba(247,71,62,1) 0%, rgba(247,106,62,1) 23%, rgba(247,148,62,1) 50%, rgba(169,229,58,1) 100%);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	text-align: right;
	position: relative;
}

.header_logo {
	position: absolute;
	left: 2em;
	top: 0;
	z-index: 2;
}

.header_facebook {
	display: block;
	position: absolute;
	right: 2em; 
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

nav {
	text-transform: uppercase;
	padding: 1em;
	margin-right: 3.5em;
}

nav a {
	padding: 1em;
	margin: 0;
}

nav a:hover:not(.valittu) {background-color: #f7473e;}

.valittu {background-color: #f7473e;}


/* etusivu */

.etusivu {text-align: center;}

.taustakuva_etusivu {
	height: 35em;
	background: #f7473e url("kuvat/taustakuva_etusivu.jpg") no-repeat center bottom;
	background-size: cover;
}

.jasenet {background-color: #f7473e; font-size: 1.2em; padding: 3em 1em;}

.jasenet h1 {font-size: 1.8em; margin: 0 0 0.2em;}

.jasenet p {width: 90%; max-width: 40em; margin: 0 auto;}


/* etusivu esittely */

.esittely_otsikko {width: 90%; max-width: 45em; margin: 0 auto;}

.esittely h2 {font-weight: 300; font-size: 2em; margin: 2.5em auto;}

.myymala {
	background-color: #f1f4f0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-align: left;
	margin-bottom: 5em;
}

.myymala img:not(.oiva) {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.avoinna {
	text-align: center;
	padding: 1em;
}

.avoinna p {width: 100%; max-width: 30em; margin: 2em auto 3em;}

.avoinna p a:link {border-bottom: 3px solid #f7953e;}

.avoinna p a:hover:not(.oiva) {border-bottom: 3px solid #f7473e;}

.oivalinkki {display: block; margin: 4em auto 3em;}


/* kuvagalleria */

.kuvia {padding: 2em 1em 4em;}

.kuvia_otsikko {border-top: 2px solid #f7953e;}

.kuvia_otsikko h2 {
	display: table;
	background-color: #e0e5de;
	position: relative;
	top: -0.9em;
	padding: 0 1em;
	margin: 0 auto;
}

.kuvia img {
	width: calc(100% / 3 - 1em);
	height: auto; 
	-o-object-fit: cover;
	object-fit: cover;
	padding: 0.5em;
}

.label_kuva img, .label_kuva span {cursor: pointer;}

input, .iso_kuva {display: none;}

#tuotekuva1:checked ~ #iso_kuva1,
#tuotekuva2:checked ~ #iso_kuva2,
#tuotekuva3:checked ~ #iso_kuva3,
#tuotekuva4:checked ~ #iso_kuva4,
#tuotekuva5:checked ~ #iso_kuva5,
#tuotekuva6:checked ~ #iso_kuva6,
#tuotekuva7:checked ~ #iso_kuva7,
#tuotekuva8:checked ~ #iso_kuva8 {display: block;}

.iso_kuva {
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	overflow: auto;
	padding: 5em 1em;
	z-index: 3;
}

.iso_kuva img {
	width: 90%;
	max-width: 60em;
	height: auto;
	-o-object-fit: cover;
	object-fit: cover;
}


/* yhteystiedot */

.karttakehikko {width: 90%; max-width: 70em; margin: 6em auto 0;}

.kartta {
	width: 100%;
	height: 30em;
	border: none;
}

.opaste_yhteys {width: 90%; max-width: 60em; margin: 3em auto;}

.opastekartta, .yhteystiedot {
	width: calc(100% / 2 - 0.5em);
	height: auto;
	display: inline-block;
	vertical-align: top;
}

.yhteystiedot {padding-left: 3em;}

.yhteystiedot h1 {font-size: 1.2em; margin-top: 0;}

.tervetuloa {
	color: #f7953e;
	text-align: center;
	text-transform: uppercase;
	font-size: 4em;
	margin: 2em auto;
}

.tuotemyynti {width: 90%; max-width: 60em; text-align: center; padding-bottom: 9em; margin: 0 auto;}


/* footer */

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

.footer_yhteystiedot {
    width: calc(25% - 0.5em);
    display: inline-block; 
    vertical-align: top;
}

.footer_yhteystiedot p {max-width: 40ch; margin: 1.5em auto;}

.footer_yhteystiedot h3 {margin-top: 0;}


/* media */

@media screen and (max-width: 75em) /*1200px*/ {
	.taustakuva_etusivu {height: 25em;}
		
	.myymala {
		grid-template-columns: 1fr;
		padding: 0 0 1em;
	}
	
	.avoinna p {margin: 1.5em auto;}
	
	.footer_yhteystiedot {width: 100%; display: block;}

	.footer_yhteystiedot:nth-of-type(2) {margin: 3em 0;}

	.footer_yhteystiedot:first-of-type img {width: 150px; height: auto;}
}

@media screen and (max-width: 56.25em) /*900px*/ {
	body {font-size: 100%;}
	
	.header_logo {width: 150px; height: auto;}
	
	.kuvia img {width: calc(100% / 2 - 1em); height: auto;}
	
	.iso_kuva img {width: 90%; max-width: 60em; height: auto;}
}


@media screen and (max-width: 48em) /*768px*/ {

	.opastekartta, .yhteystiedot {width: 100%; max-width: 30em; display: block; margin: auto;}

	.yhteystiedot {padding-left: 0; text-align: center; margin-top: 2em;}
}


@media screen and (max-width: 37.5em) /*600px*/ {
	header {text-align: center;}
	
	.header_logo {display:block; position: initial; margin: 0 auto;}
	
	nav {margin-right: 0;}
	
	nav a {padding: 0.3em; margin: 1em;}
	
	nav a:hover:not(.valittu) {background-color: inherit; border-bottom: 3px solid #f7473e;}
	
	.valittu {background-color: inherit; border-bottom: 3px solid #f7473e;}
	
	.header_facebook {
		top: 1em;
		-ms-transform: none;
		-webkit-transform: none;
		transform: none;
	}
	
	.taustakuva_etusivu {height: 18em;}
	
	.jasenet h1 {font-size: 1.6em;}
	
	.esittely h2 {font-size: 1.5em;}
	
	.karttakehikko {margin: 3em auto 0;}
	
	.tervetuloa {font-size: 3em;}
}

@media screen and (max-width: 30em) /*480px*/ {
	.kartta {height: 25em;}
		
	.tervetuloa {font-size: 2em;}
}