/* Menu

–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*

ul#navi {

	display: block;

	float: right;

	list-style-type: none;

	margin-bottom: 1rem;

	font-family: 'palanquinmedium', Helvetica, Arial, serif;

}

ul#navi li {

	display: block;

	float: left;

	margin-left: 0.4em;

}

*/



/* Hamburger menu */

ul#navi {

	font-family: 'palanquinmedium', Helvetica, Arial, serif;

}

#navi li {

  list-style: none;

  text-align: center;

  width: 100%;

}

#navi li a {

  padding: 0.2rem;

  display: block;

}



.showmenu {

	display: none;

}

.navigation__list {

	display: flex;

}

#btnHamb {

	display: none;

}

@media (max-width: 550px) {

.navigation__list {

	flex-direction: column;

	}

	.navigation__list li {

		vertical-align: center;

		flex: 2;

	}

	.navigation__list li a {

		width: 80%;

		margin: 0 auto;

	}

.showmenu {

  font-size: 50px;

  display: block;

  text-align: right;

  padding: 0.2rem;

  float: right;

}

#btnHamb:checked ~ #navi {

	transition: all .5s;

	height: 44vh;

	display: block;

}

#navi {

	transition: all .5s;

	height: 0;

	display: none;

}

}



ul#subnavi {

	display: block;

	width: 100%;

	background: transparent;

	color: #fff;

	padding: 0.2em 0 2.2em 0.8em;

	margin: 0 auto;

	list-style-type: none;

}

ul#subnavi li {

	display: block;

	float: left;

	margin-left: 0.4em;

	background: transparent;

}

/* Headings

–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1#slogan {

	display: block;

	color: #2a2b2d;

	text-align: center;

	padding-top: 14%;

	font-size: 6rem;

}

h1#slogan-etusivu {

	display: block;

	color: #2a2b2d;

	text-align: left;

	padding: 3% 0 0 3%;

	font-size: 6rem;

}

h1 {

	padding: 0.2em;

}

h2, h3 {

	display: block;

	padding: 0.2em;

	color: #2a2b2d;

	margin-bottom: 0.2em;

}

/* Links

–––––––––––––––––––––––––––––––––––––––––––––––––– */

a, h3 a {

	color: #48a0ff;

	text-decoration: none;

}

a:hover, h3 a:hover {

	color: #51b1ff;

	text-decoration: underline;

}

/* Order form

------------------------ */

div.orderform {

	background-color: #f9f9f9;

	padding: 2rem;

}

.orderform ul li {

	margin-left: 0.8rem;

}

iframe {

	display: inline-block;

	margin: 2.8rem 1rem 1rem 1.3rem;

	padding: 0;

	border: 0;

	background: transparent;

}

.contactbox {

	background-color: #555658;

	color: #fff;

	padding: 0.4em;

	margin: 1.4rem 0 1.4rem 0.7rem;

	min-width: 200px;

}

.contactbox h3 {

	background: transparent;

	color: #fff;

}

form#haku {

	width: 100%;

	height: auto;

	margin: 5.6rem 0 0 0;

}

form#haku fieldset {

	display: block;

	float: left;

	width: 46%;

	min-width: 322px;

	margin-right: 3%;

}

form#haku fieldset:first-child {

	margin-left: -2%;

}

form#haku fieldset:last-child {

	margin-right: 0;

}

form#haku label, form#haku input, form#haku select {

	display: inline-block;

	text-align: left;

	width: 100%;

}

form#haku label {

	color: #f9f9f9;

	height: 0.6rem;

	line-height: 0.6;

}

#bar {

	width: 1px;

	height: 30px;

	background: #5fb234;

	text-align: center;

	transition-duration: 0.5s;

	transition-timing-function: ease;

}

@font-face {

    font-family: 'palanquinmedium';

    src: url('../fonts/palanquin-medium-webfont.woff2') format('woff2'),

	url('../fonts/palanquin-medium-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

	font-family: 'abhaya_libremedium';

    src: url('../fonts/AbhayaLibre-Medium-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

/* Blockquotes

----------------- */

q, blockquote {

	font-size: 3rem;

	margin-bottom: 2.4rem;

	margin-left: 0.2em;

	display: inline-block;

	font-family: 'abhaya_libremedium', serif;

	border: 1px solid lightgray;

	padding: 3rem;

}

blockquote:before {

	content: open-quote;

	font-size: 3rem;

}

blockquote:after {

	content: close-quote;

	font-size: 3rem;

}

.one-third {

	justify-content: center;

	text-align: center;

}

.four.columns.category, .five.columns.category, .three.columns.category {

	min-width: 290px;

	height: auto;

	margin: 1rem;

}

.five.columns.category {

	min-width: 342px;

}

.seven.columns.category {

	min-width: 330px;

	margin-top: 1.3rem;

	margin-left: 1.3rem;

}

/* Sections

–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section {

	text-align: left;

	margin-top: 1.2rem;

}

.section-heading,

.section-description {

	margin-bottom: 1.2rem;

}

.hero .container p, .hero .container h5 {

	margin: 1.4rem 1.4rem 1.4rem 0;

}

.hero .container p {

	font-size: 2rem;

}

.hero .container p em {

	color: #fff;

	background-color: #2a2b2d;

}

.container {

	padding: 0.4em;

}

.container ul {

	margin-left: 1.4em;

	list-style-type: square;

}

.container ol {

	margin-left: 1.4em;

}

.container h5 {

	margin-left: 0.8rem;

}

/* Header

-------------------------------------------------- */

.header, .footer {

	background-color: #2a2b2d;

	color: #fff;

	margin: 0 auto;

	font-family: 'palanquinmedium', Helvetica, Arial, serif;

}

.subheader {

	margin: 0 auto;

	background-color: #555658;

}

.subheader .container {

	background: transparent;

	margin: 0 auto;

	padding: 0;

}

.footer {

	margin: 1em auto 0;

	padding: 1.2em 0 0 0;

}

.header .container, .footer .container {

	background-color: transparent;

	margin: 0 auto;

	/* padding: 1em; */

}

.header span a, .header ul li a, .footer a, .footer .container p {

	color: #fff;

	text-decoration: none;

	text-align: center;

}

.header ul li a:hover, .header ul li a.current, .footer a:hover {

	color: #fff;

	text-decoration: underline;

}

.subheader ul li a.current {

	color: #51b1ff;

	text-decoration: underline;

}

.header span a {

	font-size: 2.6em;

}

.header ul li a {

	font-size: 1.6em;

	margin: 0.3em;

}

.header ul li {

	padding-top: 0.9em;

}

.header img#logo {

	width: auto;

	height: auto;

	max-width: 83%;

	max-height: 194px;

	margin-top: 0.3rem;

}

.header .columns {

	width: auto;

	min-width: 290px;

}

.header h1, .header h5, .header p, .footer p {

    color: #222;

}

.header h1 {

	margin-top: 3rem;

}

.header h5 {

	margin-top: -2rem;

}

/* Contact

-------------------------------------------------- */

.contact .one-third {

	min-width: 266px;

	min-height: 366px;

}

.contact .specialcontact {

	min-width: 150px;

	min-height: 366px;

	background-color: #fff;

}

.specialcontact table {

	text-align: center;

	margin-left: auto;

	margin-right: auto;

	width: auto;

}

.specialcontact table td {

	margin: 2px;

	padding: 2px;

	text-align: center;

}

/* Categories

–––––––––––––––––––––––––––––––––––––––––––––––––– */

.categories {

	background-color: #fff;

}

.categories .section-description { 

	margin-bottom: 4rem;

}

.categories .section-heading {

	color: #222;

}

.category {

	padding: 0px;

	background-color: #fff;

	color: #222;

}

.category p, .categories p {

	padding: 0.2em 0.4em;

}

.category img {

	max-width: 640px;

	max-height: 540px;

	width: auto;

	height: auto;

}

.categories p.description {

	color: #222;

	font-size: 1.2em;

	text-align: left;

	padding: 0.3em;

	white-space: pre-line;

}

.categories h5 {

	margin-top: 1.5rem;

}

.productcard {

	margin-top: 0.8rem;

	padding: 0.8rem;

	border: 1px solid lightgray;

}

.productcard img {

	margin-right: 1rem;

	max-width: 100%;

	width: auto;

	height: auto;

}

.productcard p, .productcard h3, .productcard h4 {

	margin-left: 0.4rem;

	padding: 0.4rem;

	margin-bottom: 0.2rem;

}

/* Tables */

table {

	margin: 5px 5px 5px 0;

	width: 97%;

}

th, td {

	padding: 5px;

}

th:first-child, td:first-child {

	padding-left: 7px;

}

th.keskitetty, td.keskitetty {

	text-align: center;

}

th {

	color: #fff;

	background-color: #2a2b2d;

	border: 1px solid #fff;

}

td {

	padding: 5px;

	border: 1px solid #ececec;

	max-width: 123px;

}

/* So called tables

------------------------ */

dl { 

	display: inline-block;

}

dt { float: left; width: 80%; overflow: hidden; white-space: nowrap; text-align: left; }

dd { float: left; min-width: 10%; width: auto; overflow: hidden; text-align: left; margin-left: 0; }

dt span:after { content: " ........................................................................................................................................................................................................................... "; }

dl#services {

	font-size: 1.2em;

	width: 95%;

	margin: 2rem 4rem;

}

dl#timetable {

	font-size: 1.2em;

	margin: 0 20% 0 17%;

	width: 80%;

}

dl#timetable dt {

	width: 60%;

}

dl#timetable dd {

	text-align: center;

}

/* Smaller than 1140px */

@media (max-width: 1200px) {

	.seven.columns {

		margin-left: 2rem;

	}

	.four.columns.category, .five.columns.category, .three.columns.category {

		margin-left: 0;

		margin-right: 2%;

	}

	form#haku {

		width: auto;

		height: auto;

		margin: 0.6rem 0 0 0;

	}

	form#haku fieldset {

		display: block;

		float: left;

		width: 46%;

		min-width: 333px;

		margin-right: 6.5%;

	}

	form#haku fieldset:first-child {

		margin-left: 3.6%;

	}

	form#haku fieldset:last-child {

		margin-left: 3.6%;

	}

}

/* Bigger than 989px */

@media (min-width: 1200px) {

	.four.columns.category, .five.columns.category, .three.columns.category {

		margin-left: 0;

		margin-right: 2%;

	}

}

/* Smaller than 987px */

@media (max-width: 986px) {

	dt { width: 70%; }

	#dw, .dwlist {

		width: 340px;

	}

	#map {

		width: 26em;

	}

	.seven.columns {

		width: 280px;

		margin-left: 8rem;

	}

}

/* Smaller than 967px but bigger than 769px */

@media (max-width: 966px) and (min-width: 769px) {

	dt { width: 70%; }

	.section-description {

		max-width: 60%;

		margin-left: auto;

		margin-right: auto;

	}

	.seven.columns {

		width: 240px;

		margin-left: 8rem;

	}

	form#haku fieldset:first-child {

		margin-left: 1%;

	}

	form#haku fieldset:last-child {

		margin-left: 1%;

	}

}

/* Smaller than 769 */

@media (max-width: 768px) {

	dt { width: 70%; }

	.section-description {

		max-width: 60%;

		margin-left: auto;

		margin-right: auto;

	}

	/*

	ul#navi {

		float: left;

		margin-left: 6rem;

	}

	#navi li {

		display: inline-block;

		width: auto;

		margin: 0.1rem;

		padding: 0.1rem;

		font-size: 1.1rem;

	}

	*/

	h1#slogan, h1#slogan-etusivu {

		font-size: 4rem;

	}

	

	.header h1 {

		margin-top: 0;

	}

	.header span a {

		font-size: 2.2em;

	}

	.six.columns {

		width: 240px;

		margin-left: 2rem;

	}

	form#haku fieldset:first-child {

		margin-left: -8%;

	}

	form#haku fieldset:last-child {

		margin-left: -8%;

	}

}

/* Smaller than 551 */

@media (max-width: 550px) {

	.container {

		width: 95%;

	}

	dt { width: 70%; }

	.header h1 {

		margin-top: 0;

		margin-left: 2rem;

	}

	.header h5 {

		margin-left: 0rem;

	}

	/*

	ul#navi {

		margin-left: 2rem;

	}

	*/

	.six.columns {

		width: 240px;

		margin-left: 2rem;

	}

	dl#services {

		margin-left: 2rem;

	}

}

/* Smaller than 415 */

@media (max-width: 414px) {

	.container {

		width: 95%;

		margin: 0 auto;

	}

	dt { width: 70%; }

	.header h1 {

		margin-top: 0;

	}

	.header span a {

		font-size: 2em;

	}

}

/* Redness

------------------------ */

.red {

	color: red;

}

/* Random stylings

------------------------ */

.indent {

	margin-left: 3em;

}

p.larger {

	font-size: 2rem;

}

.contentimg {

	max-width: 100%;

	height: auto;

	width: auto;

	margin: 1.4rem 0 1.4rem 0.7rem;

}

img.larger {

	max-width: 100%;

	width: 100%;

	height: auto;

	margin-top: 1.4rem;

}

img.smaller {

	max-width: 344px;

	margin-top: 1rem;

	margin-left: 0;

}

a.some-icon:hover{text-decoration: none;}

.some-icon{cursor: pointer;color: #fff;font-size: 24px;transition: all 0.3s;color: #ffffff;}

.gray {color: #2a2b2d; }

/* Hiding some content */

input[type=checkbox] {

	display: none;

}

label { 

	display: inline-block;

	cursor: pointer;

}

div#piilo {

	display: none;

}

input[type=checkbox]:checked ~ div#piilo {

	display: block;

}