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

* {box-sizing: border-box;}

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

img {color: #3a3a3a; font-size: 0.8em; text-transform: uppercase;}

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

body {
	height: 100%;
	background: #191919 url("kuvat/tausta.png") no-repeat left top 3em;
	background-size: contain;
	background-attachment: fixed;
	color: #b5b5b5;
	font-family: 'Open Sans', 'Trebuchet MS', Arial, sans-serif;
	line-height: 1.5;
	letter-spacing: 0.1em;
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4 {color: #ddd; font-weight: 400;}

h1 {font-size: 2.5em;}

h2 {font-size: 1.55em;}

h3 {font-size: 1.4em;}

h4 {font-size: 1.25em;}

/* header */

header {
	width: 100%;
	background: #f21a25 linear-gradient(to right, #f21a25, #000);
	position: fixed;
	top: 0;
	z-index: 2;
	box-shadow: 0 3px 10px #000;
	padding: 0.4em 0 0.1em 1em;
}


/* navigointi */

#label_navi {
display: none;
text-transform: uppercase;
font-size: 0.8em;
font-weight: bold;
position: absolute;
right: 2em;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
padding: 0.2em 0;
}

#navi {display: none;}

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

nav {
	width: 16em;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	color: #999;
	position: fixed;
	left: 0;
	z-index: 1;
	overflow-y: auto;
	padding: 5em 1.5em 1.5em;
}

nav a {
	display: block;
	font-size: 1.1em;
	text-transform: uppercase;
	margin: 0.5em 0;
}

nav a:last-child {margin-bottom: 4em;}

nav a::after {
	display: block;
	content: " ";
	border-bottom: 3px solid #d10b16;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 250ms ease-in-out;
}

nav a:hover:not(.valittu)::after {transform: scaleX(1); transform-origin: 0% 50%}

nav a:hover {color: #ddd;}

nav .valittu {color: #ddd; border-bottom: 3px solid #d10b16;}

nav hr {border: none; border-bottom: 1px solid #3a3a3a; padding: 0; margin: 1em 0;}


/* sisältö - yleiset */

main {display: block; padding: 6em 4em; margin-left: 16em;}

main hr {
	border: none;
	border-bottom: 1px solid #3a3a3a;
	padding:0;
	margin: 2em 0;
}

.otsikko h1 {
	border-bottom: 1.5px solid rgba(242, 26, 37, 0.6);
	text-align: center;
	font-weight: 300;
}

.otsikko p {
	max-width: 80ch;
	text-align: center;
	font-size: 1.1em;
	margin: 1em auto;
}

.otsikko a {border-bottom: 2px solid rgba(242, 26, 37, 0.6);}

section {margin-bottom: 4em;}

.flex-kehikko {
	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;
	padding: 0;
	margin: 0;
}

.flex-start {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.flex-space-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.flex-space-around {
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.flex-space-evenly {
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
}

.flex-align-items {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

/* etusivu - tuotenostot */

.etusivu h2 {text-align: center; margin-bottom: 1.5em;}

.otsikko_etusivu {
	background: #0f0f0f url("kuvat/otsikko_etusivu.jpg") no-repeat left bottom;
	text-transform: uppercase;
	text-align: center;
	padding: 1em 3em 2.5em;
}

.otsikko_etusivu h1 {border-bottom: none; font-weight: 700;}

.poikkeusaukioloajat {
	background: #0f0f0f url("kuvat/etusivu_aukioloajat.png") no-repeat left 
center;
	background-size: cover;
	text-align: center;
	
}

.poikkeusaukioloajat div {
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 1em 3em 2.5em;
}

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

.poikkeusaukioloajat h3 {margin-bottom: 0;}

.tuotenostot {
	width: calc(25% - 2em);
	height: 20em;
	border: 1px solid #3a3a3a;
	text-align: left;
	position: relative;
	margin-bottom: 3em;
}

.tuotenostot:first-of-type, .tuotenostot:last-of-type {width: calc(50% - 1.4em);}

.tuotenostot:hover {border: 1px solid rgba(242, 26, 37, 0.6);}

.tuote1 {
	background: rgba(15, 15, 15, 0.5) url("kuvat/etusivu/tausta_tuote1.jpeg") no-repeat center bottom;
	background-size: cover;
}

.tuote2 {
	background: rgba(15, 15, 15, 0.5) url("kuvat/etusivu/tausta_tuote2.jpeg") no-repeat center top;
	background-size: cover;
}

.tuote3 {
	background: rgba(15, 15, 15, 0.5) url("kuvat/etusivu/tausta_tuote3.jpeg") no-repeat center bottom;
	background-size: cover;
}

.tuote4 {
	background: rgba(15, 15, 15, 0.5) url("kuvat/etusivu/tausta_tuote4.jpeg") no-repeat center top;
	background-size: cover;
}

.tuote5 {
	background: rgba(15, 15, 15, 0.5) url("kuvat/etusivu/tausta_tuote5.jpeg") no-repeat center top;
	background-size: cover;
}

.tuote6 {
	background: rgba(15, 15, 15, 0.5) url("kuvat/etusivu/tausta_tuote6.jpeg") no-repeat center;
	background-size: cover;
}

.tuotenosto {
	width: 100%;
	background: rgba(15, 15, 15, 0.9);
	text-align: center;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.5em 1em;
}

.tuotenosto h3 {border-bottom: 1px solid #3a3a3a; padding-bottom: 0.2em; margin: 0;}

.tuotenosto p {margin: 0; margin-top: 0.5em;}


/* etusivu - lisätiedot ja tilaukset */

.lisatiedot_ja_tilaukset p {text-align: left;}

.etusivu_yhteys {
	width: 50%;
	background: rgba(15, 15, 15, 0.5);
	border: 1px solid #3a3a3a;
	text-align: center;
	font-size: 150%;
	padding: 1.5em;
	margin: 2em auto;
}

.punainen {color: rgba(242, 26, 37, 0.6); text-align: center;}


/* etusivu - tuotteet ja palvelut */

.palvelut {
	width: calc(25% - 2em);
	background: rgba(15, 15, 15, 0.5);
	border: 1px solid #3a3a3a;
	padding: 0 1em 1em;
	margin-bottom: 3em;
}

.palvelut h3 {
	border-bottom: 1px solid rgba(242, 26, 37, 0.6);
	padding: 0.6em 0 0.2em;
	margin: 0;
}

.palvelut a {border-bottom: 2px solid rgba(242, 26, 37, 0.6);}

.lue_lisaa {
	width: 15em;
	background: rgba(15, 15, 15, 0.5);
	border: 1px solid rgba(242, 26, 37, 0.6);
	display: block;
	text-align: center;
	text-transform: uppercase;
	padding: 1em 2em;
	margin: 2em auto 0;
}

.lue_lisaa:hover {background: rgba(242, 26, 37, 0.6);}


/* sisältö - tuotteet */

.tuoteryhma {
	width: calc(100% / 4 - 2em);
	display: block; 
	background: #0f0f0f;
	border: 1px solid #3a3a3a;
	text-align: center;
	transition: border .3s ease-in-out;
	padding: 1em;
	margin: 0 2em 3em 0;
}

.tuoteryhma:hover {border: 1px solid rgba(242, 26, 37, 0.6);}

.tuoteryhma_kuva {width: 100%; height: 200px;}

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

.tuoteryhma hr{
	width: 40%;
	border: none;
	border-bottom: 2px solid rgba(242, 26, 37, 0.6);
	filter: grayscale(0%);
	padding: 0;
	margin: 1em auto;
}
	

/* sisältö - tuote */

.tuote_sivu {background: #141414;}

.otsikko_tuote {margin-bottom: 6em;}

.tuote {
	width: 100%;
	padding: 0.5em 1em 1em;
	margin-bottom: 3em;
}

.tuote h2 {
	width: 100%;
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 25%, rgba(242,26,36,0.8) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,0.8)), color-stop(50%, rgba(242,26,36,0.8)), color-stop(75%, rgba(0,0,0,0.8)), color-stop(100%, rgba(0,0,0,0)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 25%, rgba(242,26,36,0.8) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 25%, rgba(242,26,36,0.8) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 25%, rgba(242,26,36,0.8) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 25%, rgba(242,26,36,0.8) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0) 100%);
	text-align: center;
	padding: 0.3em;
	margin: 0;
}

.tuote h3 {
	width: 100%;
	background: #000;
	border-bottom: 1px solid rgba(242, 26, 37, 0.6);
	text-align: center;
	padding: 0.3em;
	margin: 0 0 2em 0;
}

.tuote h4 {padding: 0.1em 0 0.5em; margin: 0;}

.tuote-esittely {
	width: 100%;
	text-align: center;
	font-size: 1.1em;
	margin: 2em 0;
}

.tuote-esittely p {
	max-width: 90%;
	width: 80ch;
	margin: 2em auto;
}

.tuote-esittely a {border-bottom: 2px solid rgba(242, 26, 37, 0.6);} 

.tuotetieto_ryhma {
	width: 100%;
	background: #0f0f0f;
	border-top: 1px solid #282828;
	border-bottom: 1px solid #282828;
	box-shadow: 0 4px 8px 0 rgba(58, 58, 58, 0.2), 0 6px 20px 0 rgba(58, 58, 58, 0.19);
	margin-bottom: 3em;
}

.tuotemalli {
	width: calc(100% / 4 - 3em);
	background: #191919;
	margin: 0 1.5em 3em;
}

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

.tuotetieto {padding: 0 1em 1em;}

.varipallo {margin: 0.3em;}

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

.lisatieto_teksti p {margin: 0 2em 1em;}

.lisatieto_kuva {width: 100%;}

.lisatieto_kuva div {
	text-align: center;
	margin: 0 1.5em 3em;
}
	
.lisatieto_kuva img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 1em;
}

.video {width: calc(100% / 2 - 3em); display: inline-block;}

.video:first-of-type {margin-right: 1.5em;}


/* sisältö - galleria */

.galleria h2 {
	text-align: center;
	position: relative;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	padding-top: 1em;
	padding-bottom: 1em;
	margin: 0;
}

.galleria h2::after {
	content: "»";
	color: rgba(242, 26, 37, 0.6);
	padding-left: 0.5em;
}

.galleria_kuva, .galleria_tuoteryhma {
	width: calc(100% / 3 - 1em);
	position: relative;
	margin-bottom: 2em;
}

.galleria_tuoteryhma {background: #0f0f0f; border: 1px solid #3a3a3a;}

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

.galleria h3 {margin: 0;}

.galleria_kuvaus {
	width: 100%;
	height: 100%;
	background: rgba(15, 15, 15, 0.8);
	opacity: 0;
	-webkit-transition: opacity 0.8s;
	-o-transition: opacity 0.8s;
	transition: opacity 0.8s;
	position: absolute;
	left: 0;
	top: 0;
	padding: 1em;
}

.galleria_kuvaus:hover {opacity: 1;}

.galleria_kuvaus ul {list-style: none;}

.galleria_kuvaus ul li {margin-left: 0;}

.galleria_kuvaus ul li:before {
	content: "✕";
	color: #f21a25;
	font-weight: 600;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	margin-right: 0.3em;
}


/* sisältö - yhteystiedot */

.kartta {
	width: 100%;
	height: 25em;
	border: 1px solid #f21a25;
}

.nadare {
	display: table;
	border-bottom: 3px solid #f21a25;
	text-align: center;
	margin: 0.5em auto 1em;
}

.yhteystiedot h2 {text-align: center;}

.tiedot {width: calc(50% - 2em);}

.tiedot h3, .kesaaukioloajat h3 {margin-bottom: 0.2em; }

.tieto_yhteystiedot {text-align: right; margin-right: 3em;}

.kesaaukioloajat {
	text-align: center;
	margin-top: 5em;
}

.kesaaukioloajat h2 {margin-bottom: 0;}


/* info */

.otsikko_info h1 {border-bottom: none;}

.info {
	max-width: 70em;
	margin: 0 auto;
}

.info div {
	background: rgba(15, 15, 15, 0.5);
	border-top: 1px solid #282828;
	border-bottom: 1px solid #282828;
	box-shadow: 0 4px 8px 0 rgba(58, 58, 58, 0.2), 0 6px 20px 0 rgba(58, 58, 58, 0.19);
	padding-bottom: 1em;
	margin-bottom: 3em;
}

.info div h2 {
	background: rgba(15, 15, 15, 0.9);
	border-bottom: 1px solid rgba(242, 26, 37, 0.6);
	text-align: center;
	padding: 0.3em;
	margin: 0 0 1em 0;
}

.info div h3  {margin-bottom: 0; padding-left: 0.7em;}

.info div p {padding-left: 1em; padding-right: 1em;}



/* tarjoukset */

.otsikko_tarjous h2 {text-align: center; font-size: 2em; margin-bottom: 0;}

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

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

.hinnat strong {color: #f21a25; font-size: 1.1em;}

.tarjoushinta {color: #f21a25; font-weight: 700; font-size: 4em; padding: 0;}


/* poistotuotteet */

.poisto_muut_hinnat {width: 60%; text-align: left; margin: auto;}

.hinta {text-align: right;}


/* vuokraus */

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

.vuokraushinta {font-size: 1.2em; font-weight: 600;}


/* footer */

footer {
	background-color: rgba(15, 15, 15, 0.5);
	border-top: 1px solid #f21a25;
	padding: 0.5em 4em 3em 4em;
	margin-left: 16em;
}

footer h2 {font-size: 1.8em; margin-bottom: 0;}

.footer_tiedot {width: 32%; display: inline-block; vertical-align: top;}

.footer_tiedot h4 {margin-bottom: 0;}

.footer_tiedot a {text-transform: uppercase;}


/* @media */

@media screen and (max-width: 109.375em) /*1750px*/ {
	/* sisältö - tuoteryhmat */
	.tuoteryhma {width: calc(100% / 3 - 2em);}
}

@media screen and (max-width: 93.75em) /*1500px*/ {
	.palvelut {width: calc(50% - 2em);}
	
	/* tarjoukset */
	.tarjoustuote {width: calc(100% / 2 - 2em);}
	
	/* sisältö - tuote */
	.tuotemalli {width: calc(100% / 3 - 3em);}

}

@media screen and (max-width: 81.25em) /*1300px*/ {
	/* sisältö - tuoteryhmät */
	.tuoteryhma {width: calc(100% / 2 - 2em);}
	
	/* sisältö - tuote */
	.tuotemalli {width: calc(100% / 2 - 3em);}

	/* galleria */
	.galleria_kuva, .galleria_tuoteryhma {width: calc(100% / 2 - 1em);}
	
	.taytekuva {display: none;}
}	

@media screen and (max-width: 75em) /*1200px*/ {
	/*etusivu */
	.tuotenostot {width: calc(50% - 2em);}
	
	.tuotenostot:first-of-type, .tuotenostot:last-of-type {width: 100%;}
	
	
	/* poistotuotteet */
	.poisto_muut_hinnat {width: 100%;}
}

@media screen and (max-width: 62.5em) /*1000px*/ {
	html {font-size: 90%;}
	
	#label_navi {display: initial;}
	
	nav {background-color: rgba(0, 0, 0, 0.9);}
	
	#navigointi {display: none;}
	
	main, footer {margin-left: initial;}
}

@media screen and (max-width: 48em) /*768px*/ {
	/* etusivu */
	.otsikko_etusivu h1 {font-size: 2em;}
	
	.tuotenostot {width: calc(50% - 1em);}
	
	.etusivu_yhteys {width: 100%;}
	
	
	/* sisältö - tuote */
	.lisatieto_teksti {width: 100%;}
	
	.video {width: 100%; display: block;}
	
	/* yhteystiedot */
	.tiedot {width: 100%; text-align: center;}
	
	.tieto_yhteystiedot {border-bottom: 1px solid #3a3a3a; padding-bottom: 2em; margin-right: 0;}
	
	
	/* footer */
	.footer_tiedot {width: 100%; display: block; margin-bottom: 3em;}
	
	.footer_tieto {width: 32%; display: inline-block; vertical-align: top;}
	
	.footer_tieto h4 {margin-top: 0;}
}

@media screen and (max-width: 37.5em) /*600px*/ {
	html {font-size: 87.5%;}
	
	main {padding-left: 1em; padding-right: 1em;}
	
	#label_navi {font-size: 1em;}
	
	.palvelut {width: 100%;}
	
	/* sisältö - tuoteryhmät */
	.tuoteryhma {width: 100%; margin-right: 0;}
	
	/* sisältö - tuote */
	.tuotemalli {width: 100%;}
	
	
	/* galleria */
	.galleria_kuva, .galleria_tuoteryhma {width: 100%;}
	
	/* footer */
	footer {text-align: center;}
	
	.footer_tieto {width: 100%; display: block;}
	
	.footer_tieto h4 {margin-top: 1em;}
}

@media screen and (max-width: 25em) /*400px*/ {
	/* etusivu */
	.otsikko_etusivu h1 {font-size: 1.8em;}
	
	.tuotenostot {width: 100%;}
	
	.etusivu_yhteys {font-size: initial;}
	
	/* tarjoukset */
	
	.tarjoustuote {width: 100%;}
}