/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  src: url('../fonts/Latov14/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
       url('../fonts/Latov14/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Latov14/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Latov14/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Latov14/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Latov14/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}


/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/opensansv15/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/opensansv15/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/opensansv15/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/opensansv15/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/opensansv15/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/opensansv15/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/opensansv15/open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('../fonts/opensansv15/open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/opensansv15/open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/opensansv15/open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/opensansv15/open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/opensansv15/open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/opensansv15/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/opensansv15/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/opensansv15/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/opensansv15/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/opensansv15/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/opensansv15/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: bold;
  src: url('../fonts/opensansv15/open-sans-v15-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('../fonts/opensansv15/open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/opensansv15/open-sans-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/opensansv15/open-sans-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/opensansv15/open-sans-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/opensansv15/open-sans-v15-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Open_Sans/open-sans-v15-latin-600.eot");
  src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), 
	url("../fonts/Open_Sans/open-sans-v15-latin-600.eot?#iefix") format("embedded-opentype"), 
	url("../fonts/Open_Sans/open-sans-v15-latin-600.woff2") format("woff2"), 
	url("../fonts/Open_Sans/open-sans-v15-latin-600.woff") format("woff"), 
	url("../fonts/Open_Sans/open-sans-v15-latin-600.ttf") format("truetype"), 
	url("../fonts/Open_Sans/open-sans-v15-latin-600.svg#OpenSans") format("svg");
}


/*normalize.css v2.1.0 | MIT License | git.io/normalize */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden] {
	display: none;
}

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	overflow: auto;
	/*scrollibaarit näkyviin*/
}

body {
	margin: 0;
}

a:focus {
	outline: thin dotted;
}

a:active,
a:hover {
	outline: 0;
}

h1 {
	font-size: 2em;
	margin: .67em 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}

mark {
	background: #ff0;
	color: #000;
}

code,
kbd,
pre,
samp {
	font-family: monospace,
serif;
	font-size: 1em;
}

pre {
	white-space: pre-wrap;
}

q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 0;
	max-width: 100%;
}

.form_radios,
.form_checkboxes,
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: .35em .625em .75em;
}

.form_row h3,
legend {
	border: 0;
	padding: 0;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
}

button,
input {
	line-height: normal;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}


/* Overthrow CSS:
Enable overflow: auto on elements with overthrow class when html element has overthrow class too */

.overthrow-enabled .overthrow {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}


/*  ===================
	Global
	===================  */

html {
	background-image: url(../images/tampere-bg.gif);
	background-color: white;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: rgba(0,0,0,0);
	color: #444444;
	font-family: "Open Sans",
"Lucida Grande",
"Lucida Sans",
"Lucida Sans Unicode",
Helvetica,
Arial,
sans-serif;
	font-size: 0.875em;
	line-height: 1.57143;
	overflow-y: scroll;
}

body {
	background: url(../images/aaltoikkuna_moni_kuulto.png) -500px -395px no-repeat fixed transparent;
}

@media all and (min-width: 48em) {
	body {
		background-position: -432px -378px;
	}
}


/*  Paragraph  */

p {
	margin-top: 0;
}

b,
strong,
.strong {
	font-weight: bold;
}


/*  Small text  */


/*  Base margin-bottom  */

hgroup,
blockquote,
address,
table,
p,
fieldset,
figure,
pre {
	margin-bottom: 1.57143em;
}


/*  Links & selection  */

a {
	color: #d1443d;
	text-decoration: none;
}

a:hover,
a:hover .icon-arrow-right {
	color: #444444;
}

 ::-moz-selection,
::selection {
	background: #d1443d;
	color: #fff;
	text-shadow: none;
}


/*  Horizontal ruler */

hr {
	clear: both;
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #e0edef;
	padding: 0;
	margin-top: 0;
	margin: 0 0 1.57143em 0;
}


/*  ===================
	Forms
	* Basic form settings
	===================  */


/*  Global form settings  */

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=submit],
textarea {
	color: #447588;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fff;
	background-color: #f1f7f8;
	border-radius: 4px;
	border: 0;
	border: 1px solid #e0edef;
	border-top: 1px solid #cfe3e6;
	border-left: 1px solid #cfe3e6;
	line-height: 1.3;
	margin: 0 0 1.57143em;
	outline: 0;
	padding: 0.39286em 0;
	width: 100%;
	text-indent: 6px;
}

input[type=text]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=url]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=submit]:-moz-placeholder,
textarea:-moz-placeholder {
	color: #447588;
}

input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=submit]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #447588;
}


input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=submit]:focus,
textarea:focus {
	background: #fff;
	color: #444444;
}


textarea {
	min-height: 150px;
	max-width: 100%;
}

.main-content #cal-pick-wrapper {
	width: 100%;
}

.main-content input.cal-pick {
	width: 36%;
	margin-right: 1%;
	vertical-align: top;
}


/*  ===================
	Tables
	===================  */

table {
	margin: 0;
	border-collapse: collapse;
}

caption {
	font-weight: bold;
	font-size: 1.4em;
}

.TableBlock {
	clear: both;
	overflow-x: auto;
}

.TableBlock table,
[path='tampere/komponentti/taulukko'] table {
	margin-bottom: 1.57143em;
}

td,
th {
	font-size: 1em;
	border: 1px solid #d1443d;
	padding: .78571em .78571em;
}

th {
	background-color: #d1443d;
	color: #fff;
}

th a,
th a:hover {
	border-color: #fff !important;
	color: #fff !important;
}

td {
	border-color: #bed9de;
}


/*  ===================
	Images & embeds
	===================  */

embed,
object,
iframe {
	max-width: 100% !important;
	margin-bottom: 1.57143em;
}

img {
	max-width: 100%;
	border-radius: 4px;
}

table img {
	max-width: none;
}

/*  ===================
	Print etc.
	===================  */

@media print {
	* {
		background: transparent !important;
		color: black !important;
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}
	a,
a:visited {
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
		content: "";
	}
	pre,
blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group;
	}
	tr,
img {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	@page {
		margin: 0.5cm;
	}
	p,
h2,
h3 {
		orphans: 3;
		widows: 3;
	}
	h2,
h3 {
		page-break-after: avoid;
	}
}


/*  ===================
	Global classes
	* extended & for use in html
	===================  */


/*  Clearfix  */

.cf,
.nav,
.list li,
.list-icons,
.header-primary,
.header-nav-section,
.search-primary,
.page,
.container,
.main-content,
.breadcrumb,
.sidebar,
.footer,
.footer-primary-last,
.component-blog,
.component-lift,
.component-rating,
.form-large .search-form-float,
.element-img,
.pagination,
.service-index ul,
.grid-item,
.component,
.grid-item-inner {
	*zoom: 1;
}

.meta-text.author,
.cf:before,
.nav:before,
.list li:before,
.list-icons:before,
.header-primary:before,
.header-nav-section:before,
.search-primary:before,
.page:before,
.container:before,
.main-content:before,
.breadcrumb:before,
.sidebar:before,
.footer:before,
.footer-primary-last:before,
.component-blog:before,
.component-lift:before,
.component-rating:before,
.form-large .search-form-float:before,
.element-img:before,
.pagination:before,
.service-index ul:before,
.grid-item:before,
.component:before,
.grid-item-inner:before,
.cf:after,
.nav:after,
.list li:after,
.list-icons:after,
.header-primary:after,
.header-nav-section:after,
.search-primary:after,
.page:after,
.container:after,
.main-content:after,
.breadcrumb:after,
.sidebar:after,
.footer:after,
.footer-primary-last:after,
.component-blog:after,
.component-lift:after,
.component-rating:after,
.form-large .search-form-float:after,
.element-img:after,
.pagination:after,
.service-index ul:after,
.grid-item:after,
.component:after,
.etusivupaakuva:after,
.grid-item-inner:after {
	content: "";
	display: table;
}

.cf:after,
.nav:after,
.list li:after,
.list-icons:after,
.header-primary:after,
.header-nav-section:after,
.search-primary:after,
.page:after,
.container:after,
.main-content:after,
.breadcrumb:after,
.sidebar:after,
.footer:after,
.footer-primary-last:after,
.component-blog:after,
.component-lift:after,
.component-rating:after,
.form-large .search-form-float:after,
.element-img:after,
.pagination:after,
.service-index ul:after,
.grid-item:after,
.component:after,
.etusivupaakuva:after,
.grid-item-inner:after {
	clear: both;
}


/*  Display & spacing */

.block {
	display: block;
}

.block-spacing {
	margin-bottom: 1.57143em !important;
}


/*  Expander classes  */

.expand {
	cursor: pointer;
}

.expand .icon-arrow-down,
.expand .icon-calendar {
	color: #d1443d;
}

.expand.open .icon-arrow-down:before {
	content: "\2191";
	/*  .icon-arrow-up */
}

.js .expand-content {
	display: none;
}


/*  Colors classes  */

.color-brand {
	color: #d1443d;
}

.color-white {
	color: #fff;
}

.content a:visited,
.links-basic a:visited {
	color: #007f83;
}

.content a:hover,
.links-basic a:hover {
	color: #d1443d;
}


/*  Backface visibility
	* Prevent flickering in iOS during transitions
	* Added via .js  */

.backface-visibility {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}


/*  ===================
	Event classes
	===================  */


/*  All ransformed/transitioned/animated classes  */

.animate .header-nav-section,
.animate .search-primary,
.page.animate,
.aside-primary.animate {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.js.csstransforms {
	/*  Header
	  CSS Transforms
	  * Transitions with translate are much faster
	  * These settings include some magic numbers
	  but the header content is going to be pretty much static  */
	/*  Set the elements ready for CSS3
	  transforms (translate) controlled via .js
	  * Works on small breakpoint  */
	/*  Reset the default settings  */
	/*  Rough number to make sure it's hidden  */
	/*  Parent .header-primary class controls the
  child elements behavior  */
	/*  Aside primary  */
}

.js.csstransforms .header-nav-section {
	position: absolute;
	width: 100%;
	z-index: 4;
}

.js.csstransforms .search-primary {
	top: 0;
}

.js.csstransforms .search-primary {
	-webkit-transform: translateY(-113px);
	-moz-transform: translateY(-113px);
	-ms-transform: translateY(-113px);
	-o-transform: translateY(-113px);
	transform: translateY(-113px);
}

.js.csstransforms .header-nav-section {
	-webkit-transform: translateY(-1000px);
	-moz-transform: translateY(-1000px);
	-ms-transform: translateY(-1000px);
	-o-transform: translateY(-1000px);
	transform: translateY(-1000px);
}

.js.csstransforms .header-primary.search-open .search-primary,
.js.csstransforms .header-primary.nav-open .header-nav-section {
	-webkit-transform: translateY(56px);
	-moz-transform: translateY(56px);
	-ms-transform: translateY(56px);
	-o-transform: translateY(56px);
	transform: translateY(56px);
}

.js.csstransforms .header-primary.search-open.nav-open .header-nav-section {
	-webkit-transform: translateY(114px);
	-moz-transform: translateY(114px);
	-ms-transform: translateY(114px);
	-o-transform: translateY(114px);
	transform: translateY(114px);
}

.js.csstransforms .aside-primary {
	left: 0;
	-webkit-transform: translateX(-288px);
	-moz-transform: translateX(-288px);
	-ms-transform: translateX(-288px);
	-o-transform: translateX(-288px);
	transform: translateX(-288px);
}

.js.csstransforms .aside-primary.open {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}


/*  ===================
	Medium breakpoint
	===================  */

@media all and (min-width: 48em) {
	.js.csstransforms {
		/*  Header  */
	}
	.js.csstransforms .search-primary {
		-webkit-transform: translate(301px,0);
		-moz-transform: translate(301px,0);
		-ms-transform: translate(301px,0);
		-o-transform: translate(301px,0);
		transform: translate(301px,0);
		visibility: hidden;
		display: none;
	}
	.js.csstransforms .header-nav-section {
		-webkit-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-o-transform: none !important;
		transform: none !important;
		position: static;
		width: auto;
	}
	.js.csstransforms .header-primary.search-open .search-primary {
		-webkit-transform: translate(-40px,0);
		-moz-transform: translate(-40px,0);
		-ms-transform: translate(-40px,0);
		-o-transform: translate(-40px,0);
		transform: translate(-40px,0);
		visibility: visible;
		display: block;
	}
}


/*  ===================
	Large breakpoint
	===================  */

@media all and (min-width: 64em) {
	.js.csstransforms .search-primary {
		-webkit-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-o-transform: none !important;
		transform: none !important;
		visibility: visible;
		display: block;
	}
}


/*  ===================
	Largest breakpoint
	===================  */

@media all and (min-width: 1540px) {
	.js.csstransforms .page.open {
		-webkit-transform: translateX(288px);
		-moz-transform: translateX(288px);
		-ms-transform: translateX(288px);
		-o-transform: translateX(288px);
		transform: translateX(288px);
	}
}


/*  ===================
	No transforms
	===================  */

.js.no-csstransforms {
	/*  Header  */
	/*  Aside primary
	  left:-288px; is defined already @ _aside-primary.scss
	  because it's no-js fallback
	  */
}

.js.no-csstransforms .search-primary,
.js.no-csstransforms .header-nav-section {
	display: none;
}

.js.no-csstransforms .header-primary.search-open .search-primary,
.js.no-csstransforms .header-primary.nav-open .header-nav-section {
	display: block;
}

.js.no-csstransforms .header-primary.search-open.nav-open .header-nav-section {
	margin-top: 113px;
}

.js.no-csstransforms .aside-primary.open {
	left: 0;
}


/*  ===================
	Medium breakpoint
	===================  */

@media all and (min-width: 48em) {
	.js.no-csstransforms {
		/*  Header  */
	}
	.js.no-csstransforms .header-nav-section {
		display: block;
		margin-top: 0 !important;
	}
	.js.no-csstransforms .search-primary {
		display: block;
		top: 0;
		right: -294px;
	}
	.js.no-csstransforms .header-primary.search-open .search-primary {
		right: 44px;
	}
}


/*  ===================
	Large breakpoint
	===================  */

@media all and (min-width: 64em) {
	.js.no-csstransforms {
		/*  Header  */
	}
	.js.no-csstransforms .search-primary {
		right: 0;
		display: block !important;
	}
}


/*  ===================
	Hide & Show
	===================  */


/*  Large screen  */

.bp-med-visible,
.bp-lrg-hidden,
.bp-sml-visible,
.bp-lrgr-visible {
	display: none !important;
}

.bp-lrg-visible {
	display: inherit !important;
}


/*  Medium screen  */

@media all and (min-width: 48em) and (max-width: 63.9375em) {
	.bp-lrg-hidden,
.bp-med-visible {
		display: inherit !important;
	}
	.bp-lrg-visible,
.bp-med-hidden,
.bp-lrgr-visible {
		display: none !important;
	}
	table {
		table-layout: fixed;
		width: 100%;
		word-wrap: break-word;
	}
}


/*  Small screen  */

@media all and (max-width: 47.9375em) {

	.hidemobile {
		display: none;
	}

	#nav-secondary .nav-secondary.heading i {
		/*display: block !important;*/
	}
	body:not(.EDIT) .main.front-page,
	body:not(.EDIT) .main.single-page {
		/* margin-top: 0 !important; */
	}
	.bp-lrg-hidden,
	.bp-sml-visible {
		display: inherit !important;
	}
	.bp-lrg-visible,
	.bp-sml-hidden,
	.bp-lrgr-visible {
		display: none !important;
	}
	table {
		table-layout: fixed;
		/* width: 100%;
		word-wrap: break-word; */
	}
}


/*  Extra large screen  */

@media all and (min-width: 1200px) {
	.bp-lrgr-visible {
		display: inherit !important;
	}
}


/*  Hide/Show  */

.hidden {
	display: none;
}

.show {
	display: block;
}


/*  Visually hidden  */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}


/*  ===================
	Icons

	* Icomoon icons,
settings: _icons
		To modify your generated font,
use the *dev.svg* file,
located in the *fonts*
		folder in this package. You can import this dev.svg file to the IcoMoon app.
		All the tags (class names) and the Unicode points of your glyphs are saved in
		this file. See the documentation for more info on how to use this package:
		http://icomoon.io/#docs/font-face

		===================  */

@font-face {
	font-family: 'icomoon';
	src: url("../fonts/icon/icomoon.eot");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'icomoon';
	src: url("../fonts/icon/icomoon.woff") format("woff"),
url("../fonts/icon/icomoon.ttf") format("truetype"),
url("../fonts/icon/icomoon.svg#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
}

.icon,
.icon-arrow-right,
.icon-arrow-down,
.icon-arrow-left,
.icon-facebook,
.icon-twitter,
.icon-instagram,
.icon-linkedin,
.icon-rss,
.icon-list,
.icon-cross,
.icon-house,
.icon-youtube,
.icon-search,
.icon-star,
.icon-star-2,
.icon-arrow-up,
.icon-new-tab,
.icon-plus,
.icon-minus,
.external .linktext:after,
.icon-calendar,
.icon-flickr {
	font-family: 'icomoon';
	font-size: 16px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	top: 2px;
	-webkit-font-smoothing: antialiased;
}

.icon-flickr:before {
	content: "\e600";
}

.icon-arrow-right:before {
	content: "\2192";
}

.icon-arrow-down:before {
	content: "\2193";
}

.icon-arrow-left:before {
	content: "\2190";
}

.icon-facebook:before {
	content: "\25ab";
}

.icon-twitter:before {
	content: "\2604";
}

.icon-instagram:before {
	content: "\f16d";
	font-family: fontawesome;
}

.icon-linkedin:before {
	content: "\25a1";
}

.icon-rss:before {
	content: "\25a0";
}

.icon-list:before {
	content: "\2630";
}

.icon-cross:before {
	content: "\2715";
}

.icon-house {
	margin-right: 3px;
}

.icon-house:before {
	content: "\2302";
}

.icon-youtube:before {
	content: "\25b6";
}

.icon-search:before {
	content: "\2316";
}

.icon-star:before {
	content: "\2605";
}

.icon-star-2:before {
	content: "\2606";
}

.icon-arrow-up:before,
.icon-arrow-down.upArrow:before {
	content: "\2191";
}

.icon-new-tab:before {
	content: "\2348";
}

.icon-calendar:before {
	content: "\e000";
}


/*  ===================
	Buttons
	===================  */

.formInput,
.formInput input,
.ui-datepicker-buttonpane button,
.formInput .uutis-btn,
.btn {
	/*  Annoying if the text gets selected
  so we disable it  */
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: #f1f7f8;
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
	font-family: inherit;
	font-size: 100%;
	cursor: pointer;
	border: 0;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 3;
	padding-right: 1em;
	padding-left: 1em;
	border-radius: 4px;
	text-align: center;
}

.formInput:hover,
.formInput input:hover,
.formInput .uutis-btn:hover,
.btn,
.btn:hover {
	text-decoration: none;
}

.formInput input:active,
.formInput input,
:focus,
.btn:active,
.btn:focus {
 /*	outline: none; */
}


/*  Button sizes  */

.btn--small {
	padding-right: 0.5em;
	padding-left: 0.5em;
	line-height: 2.3;
}

.btn--large {
	padding-right: 1.5em;
	padding-left: 1.5em;
	line-height: 4;
}

.btn--huge {
	padding-right: 2em;
	padding-left: 2em;
	line-height: 5;
}

.btn--full {
	width: 100%;
	padding-right: 0;
	padding-left: 0;
	text-align: center;
}


/*  Button font sizes  */

.btn--1 {
	font-size: 3em;
}

.btn--2 {
	font-size: 2em;
}

.btn--3 {
	font-size: 1em;
}

.btn--natural {
	vertical-align: baseline;
	font-size: inherit;
	line-height: inherit;
	padding-right: 0.5em;
	padding-left: 0.5em;
}


/*  Button functions  */

.formInput input,
.formInput .uutis-btn,
.ui-datepicker-buttonpane button,
.btn--primary {
	background-color: #595968;
	color: #fff !important;
	margin-bottom: 1.57143em;
}

.formInput input:hover,
.formInput .uutis-btn:hover,
.ui-datepicker-buttonpane button:hover,
.btn--primary:hover {
	background-color: #464652;
	color: #fff !important;
}

.btn--secondary {
	background-color: #d1443d;
	color: #fff;
	margin-bottom: 1.57143em;
}

.btn--secondary:hover {
	background-color: #36363f;
	color: #fff;
}

.btn--positive {
	background-color: #4A993E;
	color: #fff;
}

.btn--negative {
	background-color: #b33630;
	color: #fff;
}

.btn--inactive,
.btn--inactive:hover,
.btn--inactive:active,
.btn--inactive:focus {
	text-decoration: none;
	background-color: #ddd;
	color: #777;
	cursor: text;
}


/*  Form button  */

.formInput,
.btn--form {
	position: relative;
}

.btn--form button {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	width: 100%;
}


/*  ===================
	Navigations
	===================  */


/*  Global nav settings  */

.nav {
	/*  Extend the necessary icons for basic nav use  */
	/*  For less capable mobile browsers there is a img fallback  */
}

.nav button,
.nav a {
	color: #444444;
	display: block;
	padding-top: 0.78571em;
	padding-bottom: 0.78571em;
	padding-left: 6%;
	padding-right: 64px;
	position: relative;
}

.nav a:hover {
	color: #d1443d;
}

.nav li {
	border-top: 1px solid #e0edef;
	position: relative;
	overflow: hidden;
}

.nav>li:first-child {
	border-top: none;
}

.nav .icon {
	color: #d1443d;
	height: 100%;
	position: absolute;
	z-index: 1;
	/*  There will be a span element for IE7
  via the icon-fix.js (from icomoon) */
	width: 43px !important;
	right: 0;
	top: 0;
}

.lt-ie8 .nav .icon span {
	position: relative;
	right: -13px;
	top: 13px;
}

.nav .icon:before {
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -8px;
	padding-left: 12px;
	padding-right: 14px;
}

.nav .icon-fallback img {
	display: block;
	width: 16px;
	margin: 14px auto 0 auto;
}


/*  List navigations  */

.nav--list {
	margin-bottom: 1.57143em !important;
	/*  For less capable mobile browsers there is a img fallback  */
}

.nav--list a {
	color: #d1443d;
	padding: 0.52381em 0;
}

.nav--list a:hover {
	color: #444444;
}

.nav--list .icon {
	border: none;
	width: 10px !important
}

.nav--list .icon:before {
	padding-right: 0;
}

.nav--list .icon-fallback {
	display: none;
}

.nav--list-light,
.nav--list-light li {
	border-color: #de7872;
}

.nav--list-light a {
	color: #fff;
}

.nav--list-light a .icon {
	color: #e79f9c;
}

.nav--list-light a:hover,
.nav--list-light a:hover .icon {
	color: #fff;
}


/*  ===================
	Medium breakpoint
	===================  */

@media all and (min-width: 48em) {
	.nav a {
		padding-left: 1.57143em;
	}
	.nav--list li {
		border-top: none;
	}
	.nav--list a {
		padding: 2px 0 2px 12px;
	}
	.nav--list .icon {
		right: auto;
		left: 0;
		width: 10px;
	}
	.lt-ie8 .nav--list .icon {
		left: -18px;
		top: -8px;
	}
}


/*  ===================
	Lists
	===================  */


/*  Global list settings  */

.nav .textarea ul,
.nav .textarea ol,
nav .textarea ul,
nav .textarea ol,
ul,
ol,
dd {
	margin-top: 0;
	margin-left: 0.78571em;
	margin-bottom: 1.57143em;
	list-style: disc;
}

ol li {
	list-style: decimal;
}

.nav .textarea ul,
.nav .textarea ol,
nav .textarea ul ,
nav .textarea ol {
	margin-left: 5%;
	margin-right: 5%;
}

/*  Reset lists  */

.nav,
.nav ul,
.list,
.list-icons,
.breadcrumb,
.element-anchor-links,
.service-index ul,
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav .textarea ul,
.nav .textarea ol,
nav .textarea ol,
nav .textarea ul {
	padding-left: 40px;
}

/*  Main list settings  */

.list {
	margin-bottom: 1.57143em;
}

.list a {
	color: #444444;
}

.list a:hover,
.tiedotenosto a:hover {
	color: #d1443d;
}

.list li {
	border-bottom: 1px solid #e0edef;
	padding-top: 1.57143em;
	padding-bottom: 1.57143em;
}

.list li:first-child {
	padding-top: 0;
}

.list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.list .icon-arrow-right {
	color: #d1443d;
}

.list .list-ingress {
	margin: 0 0 0.39286em 0;
}

.list h1, 
.list h2, 
.list h3 {
	margin: 0;
}

.list h1:only-child,
.list h2:only-child,
.list h3:only-child {
	margin-bottom: 0;
}


/*  Medium list  */

.list--medium h1,
.list--medium h2, 
.list--medium h3 {
	margin-bottom: 0.39286em;
}


/*  Small list  */

.list--small li {
	padding-top: 0.78571em;
	padding-bottom: 0.78571em;
}

.list--light,
.list--light-style-2 {
	color: #fff;
}

.list--light a,
.list--light-style-2 a {
	color: #fff;
}

.list--light a:hover,
.list--light-style-2 a:hover {
	color: #d1443d;
}

.list--light a,
.list--light-style-2 a {
	border-color: #555555;
}


/*  List image  */

.list-img {
	float: left;
	margin: 0.39286em 1.57143em 0.52381em 0;
}

.list-img img {
	display: block;
}


/*  Used @ primary aside  */

.list--light-style-2 h1,
.list--light-style-2 h2,
.list--light-style-2 h3 {
	color: #fff;
}

.list--light-style-2 li {
	border-color: #464652;
	padding-top: 1.57143em;
	padding-bottom: 1.57143em;
}

.list--light-style-2 .meta-text a {
	color: #fff;
	padding: 0;
	border: none;
}

.list--light-style-2 .meta-text a:hover {
	color: #d1443d;
}


/*  List with simple links only  */

.list--links a,
.list--links-small a {
	color: #d1443d;
}

.list--links a:hover,
.list--links-small a:hover {
	color: #444444;
}

.list--links li,
.list--links-small li {
	border: 0;
	padding: 0;
}

.list--links p,
.list--links-small p {
	color: #3e7178;
	font-size: 0.8125em;
	display: block;
	margin: 0 0 4px 20px;
}


/*  Icons list  */

.list-icons {
	margin: -4px 0 1.57143em -4px;
}

.list-icons li a {
	float: left;
	margin: 0 5px 0 5px !important;
	padding: 0 !important;
}


/*  ===================
	Large breakpoint
	===================  */

@media all and (min-width: 64em) {
	.list-service-index li {
		width: 25%;
	}
}


/*  ====================
	Headings
	====================  */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #33485f;
	font-family: "Lato",
Helvetica,
Arial,
sans-serif;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0.78571em;
}

h1 .icon-arrow-right,
h2 .icon-arrow-right,
h3 .icon-arrow-right,
h4 .icon-arrow-right,
h5 .icon-arrow-right,
h6 .icon-arrow-right {
	color: #d1443d;
}

a:hover h1,
a:hover h2,
a:hover h3,
a:hover h4,
a:hover h5,
a:hover h6 {
	color: #d1443d;
}

h1 {
	font-size: 1.85714em;
	line-height: 1.4;
}

h2 {
	font-size: 1.85714em;
	line-height: 1.333;
}

h3 {
	font-size: 1.71429em;
	line-height: 1.5;
}

h4 {
	font-size: 1.42857em;
	line-height: 1.5;
}

h5 {
	font-size: 1.21429em;
	line-height: 1.5;
}

h6 {
	font-size: 1.07143em;
	line-height: 1.5;
}


/*  Global heading settings
	* Because linked headings need to have colored border underline
	  we have to display them inline /w <span> element
	* <h1 class="heading"><span>Heading</span><h1>
	* Not necessary for headings that aren't linked but it's probably
	wise to keep identical settings  */

.heading span {
	display: inline;
}

a .heading span {
	border-bottom: 1px solid #e0edef;
	padding-bottom: 2px;
}

.heading .meta-text {
	margin-top: 0.78571em;
}


/*  Primary heading  */

.primary-heading {
	margin: 0;
	padding-bottom: 1.57143em;
}

.primary-heading h1 {
	color: #d1443d;
	font-size: 1.85714em;
	margin-bottom: 5px;
}
.primary-heading.project-title-color1 h1,
.primary-heading.project-title-color2 h1,
.primary-heading.project-title-color3 h1 {
	color: #ffffff;
}

.form-view .primary-heading.project-title-color1 h1 {color: #00bd9c;}

.form-view .primary-heading.project-title-color2 h1 {color: #e87e04;}

.form-view .primary-heading.project-title-color3 h1 {color: #39a7d7;}

.primary-heading .ingressiteksti,
.primary-heading>h2 {
	font-family: "Open Sans",
"Lucida Grande",
"Lucida Sans",
"Lucida Sans Unicode",
Helvetica,
Arial,
sans-serif;
	font-size: 1.07143em;
	line-height: 1.6;
	font-weight: normal;
	margin-bottom: 0;
}

.primary-heading .ingressiteksti:before,
.primary-heading>h2:before {
	background-color: #e0edef;
	display: block;
	content: "";
	height: 1px;
	width: 140px;
	margin: 0.78571em 0 0.78571em 0;
}

.primary-heading .ingressiteksti span,
.primary-heading>h2 span {
	margin-top: 0.39286em;
}

.primary-heading>h4 {
	margin-top: 0.78571em;
	margin-bottom: 0;
}

.primary-heading .ingressiteksti p:last-child,
.primary-heading h2 p:last-child {
	margin-bottom: 0;
}


/*  Search result heading  */

.search-result-heading {
	margin: 0;
	padding-top: 1.57143em;
}

.search-result-heading>h2 {
	margin: 0;
	padding: 0;
}


/*  Project page heading  */

.primary-heading--project>h1 {
	color: #fff;
	display: inline-block;
	font-size: 1.57143em;
	margin-left: -7.14286em;
	padding-top: 0.52381em;
	padding-bottom: 0.52381em;
	padding-right: 1.42857em;
	padding-left: 7.14286em;
	position: relative;
	bottom: 0em;
	margin-bottom: 0;
}

.primary-heading--project>h2 {
	margin-top: -2.85714em;
}


/*  Component blog heading  */

.component-heading--blog {
	font-size: 1.57143em;
	line-height: 1.333;
}


/*  Component banner heading  */

.component-banner-heading {
	/*border-bottom: 1px solid #e0edef; */
	line-height: 1.57143;
	font-family: "Open Sans",
"Lucida Grande",
"Lucida Sans",
"Lucida Sans Unicode",
Helvetica,
Arial,
sans-serif;
	font-size: 1em;
	font-weight: normal;
	/*	padding-bottom: 0.78571em;
			margin-bottom: 1.57143em; */
}


/*  Meta heading  */

.meta-heading {
	margin-bottom: 1.5em;
	/*  For less capable mobile browsers there is a img fallback  */
}

.meta-heading a:hover h1,
.meta-heading a:hover h2,
.meta-heading a:hover h4 {
	color: #fff;
	background-color: #d1443d;
}

.meta-heading h1,
.meta-heading h2,
.meta-heading h4 {
	font-size: 0.85714em;
	text-transform: uppercase;
	background-color: #36363f;
	border-radius: 0 0 0 4px;
	border-right: 4px solid #d1443d;
	color: #fff;
	line-height: 1.6;
	margin: 0;
	padding: 5px 1em;
	position: absolute;
	right: 0;
	top: -1px;
}

.meta-heading .icon {
	color: #fff;
	font-size: 14px;
	margin: 0 0 0 -4px;
	right: -4px;
}

.meta-heading a h1 .icon,
.meta-heading a:link h1 .icon,
.meta-heading a:visited h1 .icon,
.meta-heading a:hover h1 .icon,
.meta-heading a:active h1 .icon,
.meta-heading a h2 .icon,
.meta-heading a:link h2 .icon,
.meta-heading a:visited h2 .icon,
.meta-heading a:hover h2 .icon,
.meta-heading a:active h2 .icon,
.meta-heading a h4 .icon,
.meta-heading a:link h4 .icon,
.meta-heading a:visited h4 .icon,
.meta-heading a:hover h4 .icon,
.meta-heading a:active h4 .icon {
	color: #fff;
}

.meta-heading .icon-fallback {
	display: none;
}


/*  Footer heading  */

.footer-heading {
	color: #fff;
	/*  For less capable mobile browsers there is a img fallback  */
}

.footer-heading .icon {
	color: #e79f9c;
}

.footer-heading .icon-fallback {
	display: none;
}

.footer-heading:hover {
	color: #fff;
}

.footer-heading:hover .icon {
	color: #fff;
}

@media all and (min-width: 48em) {
	.primary-heading h1 {
		font-size: 2.57143em;
	}
	.primary-heading--project h2 {
		margin-top: -5em;
	}
}


/*  ===================
	Font styles
	===================  */

.header-toggle-btn span,
.footer-back-to-top {
	font-family: "Lato",
Helvetica,
Arial,
sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}

.list--small h1,
.list--light-style-2 h1,
.list--small h3,
.list--light-style-2 h3 {
	font-family: "Open Sans",
"Lucida Grande",
"Lucida Sans",
"Lucida Sans Unicode",
Helvetica,
Arial,
sans-serif;
	font-weight: normal;
}


/*  ===================
	Text styles
	===================  */


/*  External links
	* found also @ _icons

	http://bit.ly/110IAVc
	Looks like webkit has some bug with this
	selector: selects all links after it has been declared for
	the first time.

	&[target="_blank"]:after {
		@extend .icon;
		content: "\2348"; // .icon-new-tab
		font-size:15px;
		top:-4px;
		margin-left:2px;
	}

	So I made class .external for external links:

	*/

.external .linktext:after {
	content: "\2348";
	top: -4px;
	margin-left: 2px;
	margin-right: 3px;
}


/*  Superscript & Subscript  */

.superscript,
.subscript {
	position: relative;
	top: -0.5em;
	font-size: 13px;
}

.subscript {
	top: auto;
	bottom: -0.5em;
}


/*  Break all words
	* use in long displayed links
	* used e.g. @ element-link  */

.wrap {
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}


/*  Line break @ Medium breakpoint only
	* used @ primary heading
	* Extend to wider breakpoints if needed
	e.g. .bp-lrg-break  */

@media all and (min-width: 48em) and (max-width: 63.9375em) {
	.bp-med-break {
		display: inline-block;
	}
	.bp-med-break:before {
		content: "-";
	}
}


/*  ===================

	Link styles
	* Most of the sites links are
	defined by their parent element
	e.g. .component,
.list,
.nav ...

	===================  */


/*  Content links*/

.content .element-contact a.karttaLinkki .linktext,
.content .korostuslaatikko a .linktext,
.content .palveluntarjoaja a.karttaLinkki .linktext,
.content .palveluntarjoaja .homepage a .linktext,
.content .TableBlock a .linktext,
.content .tapahtumalistaus a.ilmoittautuminen .linktext,
.content .tapahtumalistaus a.karttaLinkki .linktext,
.content .tapahtumalistaus a.lisatietoja .linktext,
.content .textarea a .linktext,
.links-basic a {
	border-bottom: 1px solid #bed9de;
	display: inline;
	padding-bottom: 1px;
}


/*  ===================
	Meta text
	===================  */

.meta-text {
	color: #9999a8;
	font-family: "Lato",
Helvetica,
Arial,
sans-serif;
	text-transform: uppercase;
	font-weight: normal;
}

.meta-text a {
	color: #d1443d;
}

.meta-text a {
	color: #d1443d;
	border-bottom: 1px solid #bed9de;
	padding-bottom: 2px;
}

.meta-text a:hover {
	color: #444444;
	border-bottom-color: #d1443d;
}

.meta-text--small {
	font-family: "Open Sans",
"Lucida Grande",
"Lucida Sans",
"Lucida Sans Unicode",
Helvetica,
Arial,
sans-serif;
	text-transform: none;
	font-weight: normal;
}

.meta-text--small a {
	padding-bottom: 0;
}

.meta-text-breadcrumb {
	display: block;
	margin-bottom: 2px;
}

.meta-text-breadcrumb a {
	color: #444444;
}

.meta-text-breadcrumb a:hover {
	color: #d1443d;
}

.meta-text-breadcrumb .icon {
	color: #9999a8;
}


/*  ===================

	Font sizing
	* Placed all main font-sizes here to have better control
	* Heading sizes @ _headings
	* Icon basic sizes @ _icons

	===================  */


/*  Extra small sizes  */

.cal-body td {
	font-size: 11px;
}

.header-toggle-btn span,
.footer-back-to-top,
.external .linktext:after,
.meta-text .icon,
.heading .meta-text {
	font-size: 12px;
}

.nav-primary-top,
.search-primary,
.breadcrumb {
	font-size: 0.9em;
}

.search-primary {
	font-size: 1em;
}


/*  Medium sizes  */

.list-icons .icon,
.list-icons .icon-facebook,
.list-icons .icon-youtube,
.list-icons .icon-linkedin,
.list-icons .icon-twitter,
.list-icons .icon-instagram,
.form-large .icon-calendar,
.aside-primary-btn .icon,
.header-toggle-btn .icon,
.icon-rss,
.component-rating .icon {
	font-size: 20px;
}


/*  Zoomable small sizes  */

.meta-text,
.meta-text--small {
	font-size: 0.85714em;
}

.small-text,
small,
.component-blog-meta,
.component-blog-desc {
	font-size: 0.92857em;
}

.list-ingress,
.list.list--small h1,
.list--light-style-2 h1,
.list.list--small h3,
.list--light-style-2 h3 {
	font-size: 1em;
	line-height: 1.57143;
}


/*  Zoomable medium sizes */

.list h1,
.list h2,
.list h3 {
	font-size: 1em;
}


/*  Zoomable larger sizes */

.list--medium h1,
.list--medium h2,
.list--medium h3 {
	font-size: 1.21429em;
}

.large-font-size {
	font-size: 1.14286em;
}


/*  ===================
	Large breakpoint
	===================  */

@media all and (min-width: 48em) {
	/*  Small sizes   */
	.nav-primary,
.nav-secondary--wide {
		font-size: 13px;
	}
	/*  Zoomable small sizes */
	.nav-secondary {
		font-size: 0.92857em;
	}
}


/*  ===================
	Large breakpoint
	===================  */

@media all and (min-width: 64em) {
	/*  Default sizes  */
	.nav-primary,
.nav-primary-top,
.search-primary {
		font-size: 1em;
	}
	.nav-primary,
.nav-secondary.nav-secondary--wide {
		font-size: 1.1em;
	}
	/*  Zoomable sizes  */
	.nav-secondary {
		font-size: 1em;
	}
	.large-font-size .nav-secondary ul ul {
		font-size: 14px;
	}
}

.nav-secondary ul ul {
	font-size: 13px;
}


/*  ===================
	Primary header
	=================== */

.header-primary {
	background-color: #36363f;
	position: relative;
	z-index: 80;
}

.header-nav-section {
	clear: both;
}

.header-bar {
	background-color: #fff;
	border-bottom: 4px solid #cfe3e6;
	position: absolute;
	height: 52px;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 10;
}

.header-logo {
	background-color: #fff;
	border-radius: 4px;
	display: inline-block;
	padding-top: 13px;
	padding-bottom: 1px;
	height: 38px;
	padding-left: 0.78571em;
	width: 135px
}

.header-logo span {
	background-image: url(../images/vaakunayla.png);
	background-repeat: no-repeat;
	background-color: #fff;
	/* background-size: 116px 28px; */
	font-size: 100%;
	margin: 0 auto;
	/*width: 126px;*/
	height: 28px; 
	display: block;	
	text-indent: -99999px;
	margin-left: 7px;
}

.no-svg .header-logo h1 {
	background-image: url(../images/Vaakuna_Tampere.png);
}

.header-right-section {
	float: right;
}


/*  Navigation/Searchform/Toggle buttons  */

.header-toggle-btn {
	background-color: #fff;
	border-radius: 0;
	border-bottom: 4px solid #cfe3e6;
	float: left;
	line-height: 56px;
	height: 56px;
	position: relative;
	z-index: 25;
	/*  If we set the border-left directly it'll overlap
  with the border-bottom so use :before instead  */
}

.header-toggle-btn span {
	position: relative;
	top: -1px;
}

.header-toggle-btn .icon {
	position: relative;
	top: 3px;
}

.header-toggle-btn:before {
	border-left: 1px solid #cfe3e6;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	left: 0;
}

.header-toggle-btn.active {
	border-bottom-color: #d1443d;
}


/*  ===================
	Small breakpoint only
	===================  */

@media all and (max-width: 19.9375em) {
	.header-toggle-btn span {
		display: none;
	}
}


/*  ===================
	Medium breakpoint
	===================  */

@media all and (min-width: 48em) {
	/*  Resets  */
	.header-primary {
		background-color: #fff;
		height: auto !important;
		overflow: hidden;
	}
	.header-bar {
		background-color: #36363f;
		border: none;
		border-left: 4px solid #595968;
		height: 60px;
		width: 141px;
	}
	.header-logo {
		border-bottom: 1px solid #e0edef;
		border-radius: 4px 4px 0 0;
		padding: 16px 3px 5px 16px;
		margin-left: -4px;
		width: 135px;
	}
	.header-toggle-btn {
		border: none;
	}
	.header-toggle-btn--nav {
		display: none;
	}
	.header-toggle-btn--search {
		height: 60px;
		line-height: 60px;
		padding: 0 12px;
		background-color: #d1443d;
	}
	.header-toggle-btn--search:before {
		display: none;
	}
	.header-toggle-btn--search .icon {
		color: #fff;
	}
	.header-toggle-btn--search span {
		display: none;
	}
}


/*  ===================
	Large breakpoint
	===================  */

@media all and (min-width: 64em) {
	.header-bar {
		position: relative;
	}
	.header-toggle-btn--search {
		display: none;
	}
}


/*  ===================
	Main search form
		* @ header
		===================  */

.search-primary {
	background-color: #fff;
	left: 0;
	padding: 13px 6% 13px 6%;
	position: absolute;
	top: 56px;
	/*  No-js  */
	/*  101 because for some reasong mobile safari doesn't fit 100% width  */
	width: 89%;
	z-index: 5;
}

.search-primary .search-primary-text,
.search-primary .search-primary-btn {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.search-primary .search-primary-text {
	float: left;
	width: 71.5%;
	margin: 0;
}

.search-primary .search-primary-btn {
	background-color: #d1443d;
	color: #fff;
	float: right;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	width: 25%;
	right: 1%;
}

.search-primary .search-primary-btn .icon-search {
	display: none;
}

@media all and (min-width: 48em) {
	.search-primary {
		background-color: #d45049;
		border: none;
		border-right: 1px solid #de7872;
		height: 60px;
		left: auto;
		right: 44px;
		top: 0;
		padding: 0 14px;
		width: 230px;
		z-index: 20;
	}
	.search-primary .search-primary-text {
		position: relative;
		top: 15px;
		text-indent: 0;
		color: #de7872;
		background-color: #D45049;
		padding-left: 0;
		border-radius: 0;
		border-color: transparent;
		border-bottom-color: #de7872;
		width: 63%;
	}
	.search-primary .search-primary-text:-moz-placeholder {
		color: #ecb3b0;
	}
	.search-primary .search-primary-text::-webkit-input-placeholder {
		color: #ecb3b0;
	}
	.lt-ie8 .search-primary .search-primary-text {
		color: #fff;
		width: 60%;
		top: 20px;
	}
	.search-primary .search-primary-text:focus {
		border-radius: 4px;
		text-indent: 6px;
	}
	.search-primary .search-primary-btn {
		background: #D45049;
		border: 1px solid #de7872;
		position: relative;
		top: 15px;
		padding-left: 3px;
		padding-right: 3px;
		line-height: 2.2;
		width: 32%;
	}
	.search-primary .search-primary-btn:hover {
		background-color: #36363f;
		border-color: #36363f;
	}
}


/*  ===================
	Large breakpoint
	===================  */

@media all and (min-width: 64em) {
	.header-bar {
		position: relative;
	}
	.header-toggle-btn--search {
		display: none;
	}
	.search-primary {
		right: 0;
	}
	.search-primary .search-primary-btn .icon-search {
		display: inline;
	}
}


/*  ===================
	Primary navigation
	* @ header
	===================  */

.nav-primary {
	border-top: 1px solid #e0edef;
	background-color: #36363f;
}

.nav-primary li {
	background-color: #fff;
}

.nav-primary li:last-child {
	border-radius: 0 0 4px 4px;
}

.nav-primary li:last-child a {
	border-bottom: none;
}

.nav-primary li.active {
	border-left: 4px solid #d1443d;
}

.no-js .nav-primary {
	margin-top: 56px;
}


/*  ===================
	Medium breakpoint
	===================  */

@media all and (min-width: 48em) {
	.nav-primary {
		background-color: transparent;
		border: none;
	}
	.no-js .nav-primary {
		margin-top: 0;
	}
	.nav-primary li {
		cursor: pointer;
		border-top: none;
		border-bottom: 4px solid #e0edef;
		float: left;
		width: 14.28571%;
		min-height: 8em;
	}
	.nav-primary li.active {
		border-left: none;
		border-bottom-color: #d1443d;
	}
	.nav-primary li:last-child {
		border-radius: 0;
	}
	.nav-primary li:first-child a {
		border: none;
	}
	.nav-primary li:hover {
		border-color: #d1443d;
	}
	.nav-primary li:hover a {
		color: #d1443d;
	}
	.nav-primary a {
		border: none;
		border-left: 1px solid #e0edef;
		line-height: 1.3;
		min-height: 34px;
		max-width: 7.54286em;
		padding-top: 71px;
		padding-bottom: 11%;
		padding-right: 10%;
		padding-left: 10%;
		position: absolute;
		bottom: 0;
		font-weight: 600;
	}
	.nav-primary .icon-arrow-right {
		display: none;
	}
}


/*  ===================
	Primary navigation top
	* @ header
	===================  */

.nav-primary-top {
	border-top: none;
	border-bottom: 1px solid #464652;
	margin-left: -3%;
	background-color: #36363f;
	padding: 0.78571em 3%;
	/*  For less capable mobile browsers there is a img fallback  */
	/*  Edit some of the basic list-icon settings  */
}

.nav-primary-top a {
	color: #fff;
	padding-right: 0.85714em;
}

.nav-primary-top li {
	border-color: #464652;
	float: left;
	margin-left: 3%;
	width: 47%;
}

.nav-primary-top li:first-child,
.nav-primary-top li:nth-child(2) {
	border: none;
}
.nav-primary-top li:nth-child(2) {
	border-top: solid 1px transparent;
}
.nav-primary-top li.active a {
	color: #d1443d;
}

.nav-primary-top .icon-arrow-right {
	color: #fff;
	border: none;
	width: auto;
}

.nav-primary-top .icon-arrow-right:before {
	padding: 0;
}

.nav-primary-top .icon-fallback {
	display: none;
}

.nav-primary-top .list-icons {
	position: absolute;
	right: 430px;
	margin: 0;
}

.nav-primary-top .list-icons a {
	color: #9999a8;
}

.nav-primary-top .list-icons a:hover {
	border: none;
	color: #fff;
}


/*  ===================
	Medium breakpoint
	===================  */

@media all and (min-width: 48em) {
	.nav-primary-top {
		border: none;
		border-radius: 0 0 0 4px;
		height: 60px;
		line-height: 60px;
		margin-left: 145px;
		padding: 0 0 0 10px;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 15;
	}
	.nav-primary-top li {
		margin: 0;
		width: auto;
	}
	.nav-primary-top li a {
		border: none;
		display: inline;
		margin: 0 0 0 8px;
		padding: 0 0 2px 0;
	}
	.nav-primary-top li a:hover {
		border-bottom: 1px solid #595968;
	}
	.nav-primary-top li.active a {
		border-bottom: 1px solid #fff;
	}
	.nav-primary-top .icon-arrow-right,
.nav-primary-top .nav-home span {
		display: none;
	}
}


/*  ===================
	Medium breakpoint
	===================  */

@media all and (min-width: 64em) {
	.nav-primary-top li {
		border-top: none;
	}
	.nav-primary-top li a {
		margin-left: 10px;
	}
}


/*  ===================
	Components
	===================  */


/*  Fix some sub-pixel rendering
caused by the absolute positioning in components */

@media all and (min-width: 64em) {
	.front-page .components {
		right: -1px;
	}
}

.component {
	background-color: #fff;
	border-bottom: 1px solid #fff;
	overflow: hidden;
}

.component .grid-item-inner {
	border-right: 4px solid #e0edef;
	box-shadow: inset 0 -1px #CFE3E6;
}

.component .grid-item-inner.underlined {
	border-bottom: 1px solid #cfe3e6;
}


/*  ===================

	Secondary nav
	* Clickable dropdown on mobile & desktop
	* Bp medium: aligns right to the sidebar

	===================  */


/*  Secondary nav section gives space for the navigation
and floats right @ Medium bp  */

.nav-secondary-inner {
	background: #36363f;
	border: 4px solid #36363f;
	border-top: none;
	padding: 0.78571em;
}

.nav-secondary {
	background-color: #fff;
	border-radius: 4px;
	border-bottom: 4px solid #e0edef;
	overflow: hidden;
	/*  Im hiding the <ul>'s  here
	  because it's faster than doing /w .js at the bottom.
	  This way we can't see the <ul>'s doing their hiding onload  */
	/*  For the subnav's
  * If it's open/clicked extend the arrow icon to point up  */
}

.js .nav-secondary ul {
	display: none;
}

.js .nav-secondary ul.display {
	display: block;
}

.nav-secondary a {
	border: none;
}

.nav-secondary a:after {
	/*  This generated border was first added to the
	  .icon class (@ _navigations),
but client wanted the
	  border to be present even if there wasn't icon/sub-pages */
	content: none;
	width: 44px;
	height: 100%;
	border-left: 1px solid #e0edef;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.nav-secondary>li:first-child {
	border: none;
}

.nav-secondary li>a.open {
	border-left: 4px solid #9dc6cc;
	padding-left: calc(1.57143em - 4px);
}

.nav-secondary li>a.open {
	border-left: 4px solid #9dc6cc;
	padding-left: calc(1.57143em - 4px);
}

#nav-secondary li li li>a {
	padding-left: 2.7em;
}
#nav-secondary li li li>a.open {
	padding-left: calc(2.7em - 4px);
}

#nav-secondary li li li li>a {
	padding-left: 3.5em;
}
#nav-secondary li li li li>a.open {
	padding-left: calc(3.5em - 4px);
}

#nav-secondary li li li li li>a {
	padding-left: 4.4em;
}
#nav-secondary li li li li li>a.open {
	padding-left: calc(4.4em - 4px);
}

#nav-secondary li li li li li li>a {
	padding-left: 5em;
}
#nav-secondary li li li li li li>a.open {
	padding-left: calc(5em - 4px);
}
#nav-secondary li li li li li li li>a {
	padding-left: 5.7em;
}
#nav-secondary li li li li li li li>a.open {
	padding-left: calc(5.7em - 4px);
}
.nav-secondary li.active>button,
.nav-secondary li.active>a {
	border-left: 4px solid #d1443d;
}

.nav-secondary a.open .icon:before {
	content: "\2191";
	/*  .icon-arrow-up  */
}

.nav-secondary ul {
	/*  Third level  */
	/*  Fourth level  */
	/*  Fifth level  */
	/*  Sixth level  */
	/*  Seventh level  */
}

.nav-secondary ul ul {
	background-color: #f1f7f8;
}

.nav-secondary ul ul a,
.nav-secondary ul ul .icon {
	border-color: #e0edef;
	padding-left: 3em;
}

.nav-secondary ul ul ul {
	background-color: #e0edef;
}

.nav-secondary ul ul ul li,
.nav-secondary ul ul ul a:after,
.nav-secondary ul ul ul .icon {
	border-color: #cfe3e6;
}

.nav-secondary ul ul ul ul {
	background-color: #cfe3e6;
}

.nav-secondary ul ul ul ul li,
.nav-secondary ul ul ul ul a:after,
.nav-secondary ul ul ul ul .icon {
	border-color: #bed9de;
}

.nav-secondary ul ul ul ul ul {
	background-color: #bed9de;
}

.nav-secondary ul ul ul ul ul li,
.nav-secondary ul ul ul ul ul a:after,
.nav-secondary ul ul ul ul ul .icon {
	border-color: #aed0d5;
}

.nav-secondary ul ul ul ul ul ul {
	background-color: #aed0d5;
}

.nav-secondary ul ul ul ul ul ul li,
.nav-secondary ul ul ul ul ul ul a:after,
.nav-secondary ul ul ul ul ul ul .icon {
	border-color: #9dc6cc;
}


/*  Small floated elements
* used @ service-listing alphabets  */

.nav-secondary--service-index ul {
	border-top: 1px solid #e0edef;
	margin-right: -3px;
}

.nav-secondary--service-index ul li {
	float: left;
	width: 20%;
	border: none;
	margin-bottom: -1px;
}

.nav-secondary--service-index ul li:hover,
.nav-secondary--service-index ul li:focus,
.nav-secondary--service-index ul li.active button,
.nav-secondary--service-index ul li.active a {
	color: #fff;
	/*border: none; */
	background-color: #d1443d;
}

.nav-secondary--service-index ul li button,
.nav-secondary--service-index ul li a {
	border-top: none;
	border-bottom: 1px solid #e0edef;
	border-right: 1px solid #e0edef;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

.nav-secondary--service-index ul li button,
.nav-secondary--service-index ul li a  {
	background-color: #fff;
	width: 100%;
	border-width: 1px;
	border-color: #e0edef;
	border-style: solid;
}
.palveluhakemisto .bp-med-w-35 .nav-secondary--service-index ul li a {
	width: 100%;
	display: block;
	padding-top: 0.78571em;
	padding-bottom: 0.78571em;
	padding-left: 0;
	padding-right: 0;
}
.nav-secondary--service-index ul li a:after {
	display: none;
}


.nav-secondary--service-index  li ul li button:focus,
.nav-secondary--service-index  li ul li button:hover,
.nav-secondary--service-index  li ul li:hover ,
.nav-secondary--service-index  li a:hover {
	color: #fff;
	background-color: #d1443d;
}
.nav-secondary-heading.btn-nav-toggle.open .icon-arrow-down:before,
.nav-secondary-section--project .btn-nav-toggle.open .icon-arrow-down:before {
	content: "\2191";
}

/*  ===================
	Medium breakpoint
	===================  */

@media all and (min-width: 48em) {
	.nav-secondary-section {
		position: relative;
		float: right;
		z-index: 49;
	}
	.nav-secondary-inner {
		background-color: #f8fbfb;
		border: none;
		border-right: 4px solid #e0edef;
		padding: 40px 8%;
	}
	/*  Secondary nav section for projects floats nowhere */
	.nav-secondary-section--project {
		background-color: #f1f7f8;
		float: none;
	}
	.nav-secondary-section--project .nav-secondary-inner {
		border: none;
		padding: 0;
	}
	.nav-secondary {
		border-left: 1px solid #e0edef;
		border-right: 1px solid #e0edef;
		/*  .first class always displays it's content on medium breakpoint <=
	* faster than w/ .js @ bottom */
	}
	.nav-secondary .nav-secondary-heading {
		display: none !important;
	}
	.lt-ie8 .nav-secondary .nav-secondary-heading {
		position: absolute;
	}
	.js .nav-secondary ul.first {
		display: block;
	}
	/*  Wide project page navigation
  extends the secondary nav */
	.nav-secondary--wide {
		background-color: #f1f7f8;
		border: none;
		border-radius: 0;
		margin: 0;
	}
	.nav-secondary--wide li {
		float: left;
	}
	.nav-secondary--wide li li {
		border-right: 1px solid #e0edef;
	}
	.nav-secondary--wide li li ul {
		display: none !important;
	}
	.nav-secondary--wide li.active a {
		border-left: none;
		background-color: #fff;
		color: #00bd9c;
		border-bottom-color: #d1443d;
	}
	.nav-secondary--wide a {
		border: none;
		border-radius: 0 !important;
		border-bottom: 4px solid #e0edef;
		padding: 1.57143em 0.52381em;
	}
	.nav-secondary--wide a:hover {
		background-color: #fff;
		border-bottom-color: #d1443d;
	}
	.nav-secondary--wide a:after {
		display: none;
	}
	.nav-secondary--wide .icon {
		display: none;
	}
}


/*  ===================
	Large breakpoint
	===================  */

@media all and (min-width: 64em) {
	.nav-secondary--wide a {
		padding-left: 0.78571em;
		padding-right: 0.78571em;
	}
}


/*  =============================

	Various layout elements
	* wrappers,
containers,
sidebar

	============================= */


/*  Main wrapper  */

.page {
	max-width: 1200px;
	overflow: hidden;
}

.main {
	position: relative;
}

.main.front-page,
.main.single-page {
	margin-top: 58px;
}

.main.front-page .dummy-sidebar {
	display: none;
}

.main.front-page .component:nth-child(1) .meta-heading h1,
.main.front-page .component:nth-child(2) .meta-heading h1,
.main.front-page .component:nth-child(3) .meta-heading h1,
.main.front-page .component:nth-child(1) .meta-heading h2,
.main.front-page .component:nth-child(2) .meta-heading h2,
.main.front-page .component:nth-child(3) .meta-heading h2,
.main.front-page .component:nth-child(1) .meta-heading h4,
.main.front-page .component:nth-child(2) .meta-heading h4,
.main.front-page .component:nth-child(3) .meta-heading h4 {
	top: 0;
}

.main.single-page .main-content {
	margin-bottom: 0;
}

.container {
	position: relative;
	clear: both;
	border-top: 4px solid #36363f;
}

.main-content {
	position: relative;
	float: left;
	width: 100%;
	z-index: 50;
}


/*  ===================
	Medium small breakpoint
	===================  */

@media all and (min-width: 30em) {
	.page {
		margin-left: 44px;
	}
}


/*  ===================
	Medium  breakpoint
	===================  */

@media all and (min-width: 48em) {
	.main,
.main.front-page,
.main.single-page {
		margin-top: 20px;
	}
}


/*  Logo image
	@ primary footer
	* scales better as img  */

.logo-wide {
	max-width: 200px;
	margin: 0 0 1.57143em 0;
	border-radius: 0;
}


/*  ===================
	Breadcrumb
	===================  */

.breadcrumb {
	line-height: 2;
	margin: 0 12px 12px 1.57143em;
	padding: 0;
	text-shadow: 0 -1px 0 rgba(255,255,255,0.8);
	max-width: 92%;
}

.breadcrumb li {
	display: block;
	float: left;
}

.breadcrumb li.active a {
	color: #d1443d;
}

.breadcrumb a {
	color: #444444;
}

.breadcrumb a:hover {
	color: #d1443d;
}

.breadcrumb .icon-arrow-right {
	color: rgba(0,0,0,0.7);
}


/*  ===================
	Aside primary
	(Sidebar on the left)
	===================  */

.aside-primary {
	display: none;
	background: url(../images/aaltoikkuna_grafiikka_kuulto.png) bottom left no-repeat #36363f;
	background-size: 125%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: -288px;
	z-index: 100;
	width: 332px;
}

.aside-primary-inner h2 {
	font-size: 1.71429em;
    line-height: 1.5;
}	

.aside-primary-inner {
	border-top: 4px solid #d1443d;
	padding: 3.14286em 4.71429em 1.57143em 1.57143em;
}

.aside-primary-toggle {
	background: #464652;
	cursor: pointer;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
}

.aside-primary-toggle:hover {
	background: #494955;
}

.aside-primary-toggle:hover .aside-primary-btn .icon-arrow-left {
	background: #d1443d;
}

.aside-primary-btn .icon {
	background-color: #595968;
	display: block;
	color: #fff;
	padding: 16px 12px;
	border-bottom: 4px solid #3f3f4a;
	top: 0 !important;
}

.aside-primary-btn .icon:hover {
	background: #d1443d;
}

.aside-primary-btn .icon-text {
	background-image: url(../images/tampere-sprite.svg);
	background-repeat: no-repeat;
	background-position: -10px -80px;
	display: block;
	height: 160px;
	text-indent: -9999px;
	margin-top: 14px;
}

.no-svg .aside-primary-btn .icon-text {
	background-image: url(../images/tampere-sprite.png);
}

.aside-primary.open .aside-primary-btn .icon {
	background-color: #d1443d;
}

.aside-primary.open .aside-primary-btn .icon:before {
	content: "\2715";
	/* Extend to Icon cross .icon-cross  */
}

.aside-primary.open .aside-primary-btn span {
	background-position: -54px -80px;
}
.aside-button, .avaa-sivukartta-btn, .cal-button {
	border: none;
	padding: 0;
}

/*  ===================
	Medium small breakpoint
	===================  */

@media all and (min-width: 30em) {
	.aside-primary {
		display: block;
	}
}


/*  ===================
	Medium  breakpoint
	===================  */

@media all and (min-width: 48em) {
	.aside-primary-btn .icon-list {
		font-size: 20px;
		padding: 20px 12px;
	}
}


/*  ===================

	Sidebar
	* Small breakpoint: at the bottom
	* Medium breakpoint: on the right
	* Used @ osioetusivu,
osiosivu,
projektisivu

	===================  */

.sidebar {
	float: right;
	border-top: 1px solid #e0edef;
	background-color: #f8fbfb;
	position: relative;
	z-index: 49;
}

.sidebar .component {
	background-color: #f8fbfb;
}


/*  ===================
	Medium  breakpoint
	===================  */

@media all and (min-width: 48em) {
	.dummy-sidebar {
		background-color: #fff;
		background-color: #f8fbfb;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		width: 35%;
		z-index: 0;
	}
	.dummy-sidebar .inner {
		border-right: 4px solid #e0edef;
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		right: 0;
	}
}


/*  ===================
	Primary footer
	===================  */

.footer {
	position: relative;
	clear: both;
	z-index: 60;
}

.footer-primary {
	background-color: #d45049;
}

.footer-primary .grid-item,
.footer-primary .component {
	background-color: #D45049;
}

.footer-primary .f-2,
.footer-primary .f-4,
.footer-primary .f-6 {
	background: #d1443d;
}

.footer-back-to-top {
	background-color: #fff;
	color: #444444;
	display: block;
	padding: 12px 0;
	text-indent: 6%;
	margin-top: 5em;
}

.footer-primary-last,
.footer-primary-last .f-7,
.footer-primary-last .f-8 {
	background-color: #fff;
}

.footer-primary-last .f-7 .grid-item-inner {
	border-bottom: 1px solid #e0edef;
}

.footer-primary-last {
	min-height: 776px;
}


/*  Logo image
	@ primary footer
	* scales better as img  */

.logo-wide {
	max-width: 200px;
	margin: 0 0 1.57143em 0;
	border-radius: 0;
}


/*  ===================
	Medium only breakpoint
	===================  */

@media all and (min-width: 48em) and (max-width: 63.9375em) {
	/*  Last footer item (white area)  */
	.footer-primary .f-3 {
		background: #d1443d none repeat scroll 0 0;
	}
	.footer-primary-last .f-7 .grid-item-inner {
		border-bottom: none;
	}
	.footer-primary-last .f-8 .grid-item-inner {
		border-left: 1px solid #e0edef;
	}
}


/*  ===================
	Medium breakpoint
	===================  */

@media all and (min-width: 48em) {
	.footer-back-to-top {
		border-top: 1px solid #cfe3e6;
		border-right: 4px solid #e0edef;
		border-left: 1px solid #cfe3e6;
		margin-top: 0;
		padding: 8px 13px 8px 8px;
		position: absolute;
		text-indent: 0;
		top: -36px;
		right: 0;
	}
	.footer-primary .f-3 {
		background: ##D9645E;
	}
	.footer-primary .f-4 {
		background-color: #D45049;
	}
}


/*  ===================
	Medium large
	===================  */

@media all and (min-width: 64em) {
	.footer-primary,
.footer-primary-last {
		float: left;
	}
	.footer-primary .f-3,
.footer-primary .f-6 {
		background-color: #D45049;
	}
	.footer-primary .f-4 {
		clear: both;
	}
	.footer-primary .f-5 {
		background-color: #d1443d;
	}
	.footer-primary .grid-item-inner {
		border-bottom: 1px solid #d9645e;
		min-height: 23.14286em;
		/*  Optimal min-height (?)  */
	}
	.footer-primary-last .f-7 .grid-item-inner {
		border-bottom: none;
	}
	.footer-primary-last .grid-item-inner {
		border-top: 1px solid #e0edef;
		border-right: 4px solid #e0edef;
	}
}


/*  ===================
	Component event /
	Component article
	===================  */

.component-event a,
.component-article a {
	color: #444444;
}

.component-event a:hover,
.component-article a:hover {
	color: #d1443d;
}

.component-event .icon-arrow-right,
.component-article .icon-arrow-right {
	color: #d1443d;
}

.component-event-meta {
	display: block;
	margin-top: 0.39286em;
}


/*  ===================
	Banner component
	@ front page
	===================  */

.component-banner img {
	margin-bottom: 0.78571em;
}

.component-banner article:last-child .component-banner-heading {
	border-bottom: 0;
	padding-bottom: 0;
}


/*  ===================
	Component blog
	===================  */

.component-blog {
	/*margin-bottom: 0.78571em;*/
}

.component-blog-author {
	display: block;
	border-left: 1px solid #e0edef;
	float: right;
	margin: 0 0 1.57143em 1.57143em;
	max-width: 90px;
	padding-left: 6%;
	text-align: center;
}

.component-blog-author img {
	border-radius: 50%;
	display: block;
	height: auto;
	margin: 0 auto 0.78571em auto;
	width: 100px;
}

.component-blog-author.left {
	float: left;
	margin: 0 1.57143em 1.57143em 0;
	padding-left: 0;
	padding-right: 6%;
	border: none;
	border-right: 1px solid #e0edef;
}


/*  ===================
	Component gallup
	===================  */

.component-gallup-result {
	background-color: #d1443d;
	border-radius: 4px;
	display: block;
	height: 10px;
	margin-top: 10px;
}


/*  ===================
	Component lift
	===================  */

.component-banner .guillotine-wrapper img,
.component-lift .guillotine-wrapper img {
	height: auto !important;
	width: 100% !important;
}

.component-lift-left {
	margin-bottom: 1.57143em;
}

@media all and (min-width: 64em) {
	.component-lift {
		margin-left: 1.57143em;
		margin-top: 1.57143em;
		margin-bottom: 1.57143em;
	}
	.component-lift .component-lift-left {
		float: left;
		margin-left: -3.14286em;
	}
	.component-lift .component-lift-right {
		float: right;
		margin-left: 3.14286em;
	}
}


/*  ===================
	Rating component
	===================  */

.component-rating {
	direction: rtl;
	position: relative;
	text-align: left;
	margin-bottom: 1.57143em;
}

.component-rating .icon {
	cursor: pointer;
	color: #36363f;
	display: inline-block;
	width: 10px;
	padding: 0 6px;
	position: relative;
	margin-top: 6px;
	top: 0;
	left: 0;
}

.component-rating .icon.active,
.component-rating .icon:hover:before,
.component-rating .icon:hover~.icon:before {
	color: #d1443d;
	content: "\2605";
	/*  .icon-star  */
}

.component-rating .inactive {
	color: #cfe3e6;
}

.component-rating.result {
	direction: ltr;
}

.component-rating.result .icon {
	cursor: default;
	margin-left: -6px;
	margin-right: 6px;
}

.component-rating.result .icon:hover:before,
.component-rating.result .icon:hover~.icon:before {
	color: inherit;
}

.component-rating.result p:last-child {
	margin: 0;
}


/*  ===================
	Various elements
	===================  */


/*  Contact element  */

.element-contact span {
	display: block;
}

.element-contact .element-contact-title {
	color: #a2a2a2;
}

.element-contact a {
	padding-bottom: 1px;
}


/*  Highlight element  */

.element-highlight-box {
	border-radius: 4px;
	border: 1px solid #cfe3e6;
	background-color: #e0edef;
	padding: 1.57143em 6%;
	margin-bottom: 1.57143em;
}


/*  Anchor link element  */

.element-anchor-links {
	margin-bottom: 1.57143em;
}

.element-anchor-links a {
	border-bottom: 0;
}

.element-anchor-links a:hover .icon {
	color: #d1443d;
}


/*  Featured img @ osioetusivu */

.featured-img {
	position: relative;
}

.featured-img img {
	display: block;
	border-radius: 0;
}

.featured-img .mask {
	border-top: 1px solid rgba(255,255,255,0.15);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Bit larger and cropped image for
480px > */

@media all and (max-width: 29.9375em) {
	.featured-img {
		overflow: hidden;
	}
	.featured-img img {
		max-width: 100%;
		display: block;
	}
}


/*  ===================
	Form element
	* Basic form settings @ global/_forms
	* Used e.g. @ Global component area
	===================  */

.form_radios,
.form_checkboxes,
.element-form,
.element-form fieldset {
	border: 1px solid #e0edef;
	border-radius: 4px;
	margin-bottom: 1.57143em;
	padding: 1.57143em;
}

.form_row h3,
.element-form label,
.element-form legend {
	font-weight: 700;
	margin: 0;
	margin-bottom: 5px;
}

.element-form  .labeli span,
.element-form label span {
	font-weight: 400;
	margin-left: 3px;
}

.form_row h3,
.element-form label,
.element-form select,
.element-form legend,
.element-form .form-el {
	display: block;
}

#tyyppihaku label {
	display: inline;
}

#tyyppihaku div {
	margin-bottom: 5px;
}

.element-form select {
	margin-bottom: 1.57143em;
}

.form_radios,
.form_checkboxes,
.element-form .form-field {
	margin-bottom: 1.57143em;
}

.form_radios input,
.form_checkboxes input,
.element-form .form-field input {
	display: inline;
}

.form_row h3,
.form_radios legend,
.form_checkboxes legend,
.element-form .form-field legend {
	margin: 0;
}

.form-large {
	border-radius: 4px;
	border: 1px solid #e0edef;
	border-bottom: 4px solid #e0edef;
	padding: 1.57143em;
	padding-bottom: 0;
	/*margin-bottom: 3.14286em;*/
}

.form-large.margin-bottom {
	margin-bottom: 3.14286em;
}

.form-large .search-form-float input,
.form-large .search-form-float .btn--form {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.form-large .search-form-float input {
	float: left;
	width: 72.5%;
}

.form-large .search-form-float .btn--form {
	float: right;
	width: 25%;
}

.form-large .element-form {
	border: none;
	margin: 0;
	padding: 0;
}

.nav-secondary--content {
	border-top: 1px solid #e0edef;
	border-left: 1px solid #e0edef;
	border-right: 1px solid #e0edef;
	margin-bottom: 3.14286em;
}

.nav-secondary--content .element-form {
	border: none;
	border-radius: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.nav-secondary--content .calendar-outer {
	margin-bottom: 1.57143em;
}

.nav-secondary--content .calendar-outer a:after {
	display: none;
}

.nav-secondary--content .calendar-outer .calendar {
	/*  For less capable mobile browsers there is a img fallback  */
}

.nav-secondary--content .calendar-outer .calendar .icon-fallback img {
	display: inline;
}


/*  ===================
	Link element
	===================  */

.element-link .icon,
.element-link .icon-arrow-right,
.element-link .icon-arrow-left,
.element-link .icon-arrow-bottom,
.element-link .icon-arrow-up {
	color: #d1443d;
}

.element-link a {
	border: none !important;
}

.element-link a:visited {
	color: #d1443d;
}

.element-link.skin1 a:visited,
.element-link.skin1 a:visited>.icon-arrow-right, 
.element-attachment.element-link a:visited {
	color: #007f83;
}

.element-link a:hover {
	color: #444444;
}

.element-link.skin1 a:hover,
.element-attachment.element-link a:hover {
	color: #d1443d;
}

.element-link .element-link-inner {
	font-size: 1em;
	display: block;
	margin: 2px 0 0 20px;
	/* 20 */
}

.element-link.reset-link a:visited {
	color: #d1443d;
}

.element-link.reset-link a:hover {
	color: #444444;
}

.linkkilista p {
	margin: 0;
}

.linkkilista p:empty {
	display: none;
}

.linkkilista br {
	display: none;
}

.linkkilista .element-link .element-link-inner br {
	display: block;
}

@media all and (max-width: 63.9375em) {
	.suosituimmat li,
	.linkkilista p {
		margin-bottom: 1.57143em;
	}
}


/*  ===================

	Image element

	* Used e.g.
		@ Global content area
		@ Components

	* Without the classes images are centered and 280px wide
	* Float classes (.left/.right)
		* Small 120px (.small) images float always
		* Medium 280px images (default sizes,
no class)
		  and Large sizes 400px (.large)
		  float on small medium breakpoint and large breakpoint
		  with max-width set to 210px
		* Also in large breakpoint large images are set a little
		  bit smaller (350px) to allow better text flow
		* In largest breakpoint large images are set to original size
		* .center is forcing all sizes to center in large breakpoint,
		  and this is basically needed only for large images

		  ===================  */

.element-img {
	display: block;
	margin: 0 auto 1.57143em auto;
	max-width: 280px;
}

.element-img.small {
	max-width: 120px;
	margin-bottom: 0.78571em;
}

.element-img.small.right {
	float: right;
	margin-left: 1.57143em;
}

.element-img.small.left {
	float: left;
	margin-right: 1.57143em;
}

.element-img img {
	display: block;
}

.element-img .caption {
	border-radius: 0 0 4px 4px;
	font-size: 1em;
	padding: 0.78571em;
	border: 1px solid #cfe3e6;
	border-top: none;
	background-color: #f1f7f8;
	position: relative;
	top: -2px;
}

.element-img.large {
	max-width: 400px;
}

@media all and (min-width: 30em) and (max-width: 47.9375em) {
	.element-img.right,
.element-img.left {
		max-width: 210px;
	}
	.element-img.right {
		float: right;
		margin-left: 1.57143em;
	}
	.element-img.left {
		float: left;
		margin-right: 1.57143em;
	}
}

@media all and (min-width: 64em) {
	.element-img.right.large,
	.element-img.left.large {
		max-width: 350px;
	}
	
	.yksipalsta .element-img.right.large,
	.yksipalsta .element-img.left.large {
		max-width: 400px;
	}
	
	.element-img.right {
		float: right;
		margin-left: 1.57143em;
	}
	.element-img.left {
		float: left;
		margin-right: 1.57143em;
	}
	.element-img.center {
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
}


/*  ===================
	Table element
	===================  */

.element-table {
	width: 100%;
	overflow: auto;
	margin: 0 0 1.57143em;
}


/*  ===================
	Pagination
	===================  */

.pagination {
	margin-bottom: 1.57143em;
	font-weight: bold;
}

.pagination a,
.pagination span {
	border-radius: 4px;
	color: #d1443d;
	display: block;
	float: left;
	border: 1px solid #e0edef !important;
	border-bottom: 4px solid #e0edef !important;
	padding: 0.39286em 0.52381em !important;
	margin: 0 0 3px 3px;
}

.pagination a:hover {
	border-color: #d1443d !important;
	border-bottom-color: #bd342d !important;
	background-color: #d1443d;
	color: #fff;
}


/*  ===================
	Calendar
	* Scalable table
	===================  */

.calendar {
	position: relative;
	font-weight: bold;
	background-color: #fff;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	*vertical-align: auto;
	zoom: 1;
	*display: inline;
	width: 100%;
	overflow: hidden;
	margin-bottom: 1.57143em;
}

.calendar td:first-child {
	border-left: 0;
}

.cal-table {
	border-radius: 0 0 4px 4px;
	position: relative;
	border-collapse: separate;
	width: 100%;
	border: 1px solid #e0edef;
	border-top: none;
}

.cal-caption {
	border-radius: 4px 4px 0 0;
	text-align: center;
	background: #656576;
	margin-right: 1px;
	/*  For less capable mobile browsers there is a img fallback  */
}

.cal-caption,
.cal-caption a {
	color: #fff;
	line-height: 44px;
}

.cal-caption a {
	display: inline;
	border: none;
	padding: 0;
	padding: 0 10px;
	top: 0;
}

.cal-caption a:hover {
	color: #d1443d;
}

.cal-caption .cal-prev {
	float: left;
}

.cal-caption .cal-next {
	float: right;
}

.cal-caption .icon-fallback img {
	margin: 0;
}

.cal-body {
	width: 100%;
}

.cal-body td {
	padding: 0;
	border: none;
	border-left: 1px solid #e0edef;
}

.cal-body a {
	border-top: 1px solid #e0edef;
	display: block;
	padding: 0;
	position: relative;
	line-height: 44px;
	color: #444444;
	text-align: center;
}

.cal-body a:hover {
	background: #f1f7f8;
}

.cal-off a {
	color: #ccc;
	font-weight: normal;
}

.cal-today a {
	color: black;
	background-color: #f1f7f8;
}

.cal-selected a {
	margin: 0 -1px;
	color: #fff;
	background: #d1443d;
	border-top: 1px solid #d1443d;
}

.cal-selected a:hover {
	color: #fff;
	background-color: #d1443d;
}

.cal-check a {
	color: #d1443d;
	overflow: hidden;
}

.ui-datepicker-today a:before,
.cal-check a:before {
	content: '';
	position: absolute;
	top: -6px;
	right: -6px;
	width: 12px;
	height: 12px;
	background-color: #d1443d;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.lt-ie8 .cal-table {
	*border-collapse: collapse;
}

.lt-ie8 .cal-body a {
	zoom: 1;
}


/*  ===================
	Sitemap list
	===================  */

.element-sitemap {
	margin-left: -1.57143em;
	margin-bottom: 1.57143em;
}

.element-sitemap ol {
	margin: 0 0 0 1.57143em;
	padding: 0;
	counter-reset: section;
}

.element-sitemap li {
	list-style-type: none;
	counter-increment: section;
	padding: 2px 0;
}

.element-sitemap li:before {
	/*  Note removing the space after ',' fixes IE7's CSS parser  */
	content: counters(section,
".") ". ";
}

.element-sitemap li a {
	border-bottom: 1px solid #bed9de;
	padding-bottom: 1px;
	color: #444444;
}

.element-sitemap li a:hover {
	color: #d1443d;
}

.element-sitemap li .icon-arrow-right {
	color: #d1443d;
}

.element-sitemap .icon {
	cursor: pointer;
	color: #d1443d;
}

.element-sitemap .icon.open:before {
	content: "\2191";
	/*  .icon-arrow-up  */
}


/*  ===================
	Service index list
	===================  */

.service-index {
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #cfe3e6;
	border-bottom: 4px solid #e0edef;
	font-weight: bold;
	margin: 0 0 1.57143em 0;
	overflow: hidden;
	text-align: center;
}

.service-index ul {
	margin: 0 -6px -1px 0;
}

.service-index li {
	float: left;
	display: block;
	width: 20%;
}

.service-index a {
	color: #444444;
	display: block;
	border-right: 1px solid #e0edef;
	border-bottom: 1px solid #e0edef;
	padding: 1.57143em 0;
}

.service-index a:hover {
	background-color: #d1443d;
	color: #fff;
}


/*  ===================
	Text sizing
	===================  */

.text-sizing {
	position: absolute;
	top: -7px;
	right: 12px;
	text-transform: uppercase;
	font-weight: bold;
}

.text-sizing .text-sizing-small-letter,
.text-sizing .text-sizing-large-letter {
	cursor: pointer;
	margin-left: 5px;
}

.text-sizing .text-sizing-small-letter:hover,
.text-sizing .text-sizing-large-letter:hover {
	color: #d1443d;
}

.text-sizing .text-sizing-small-letter {
	font-size: 20px;
}

.text-sizing .text-sizing-large-letter {
	font-size: 26px;
}


/*  ===================
	Comments
	===================  */

.comment {
	border-radius: 4px;
	border: 1px solid #e0edef;
	padding: 1.57143em 1.57143em 0 1.57143em;
	margin-bottom: 1.57143em;
}


/*  ===================

	Grid / Responsive widths
	* These are the main scaffolding elements for the site / components
	* Container (@ _layout) controls the main contents max-width
	* Javascript controls the better floating

	===================  */


/*  Grid item  */

.grid-item,
.component {
	float: left;
	position: relative;
	width: 100%;
}

.grid-item-inner {
	padding: 1.57143em 6% 0 6%;
}

.bp-med-w-100 {
	width: 100%;
}

.bp-med-w-35 {
	width: 100%;
}

.bp-med-w-50-33 {
	width: 100%;
}

.bp-med-w-50-66 {
	width: 100%;
}


/*
	===================
	Medium breakpoint
	===================
	*/

@media all and (min-width: 48em) {
	.grid-item-inner {
		padding-top: 3em;
		padding-bottom: 1.5em;
		padding-left: 8%;
		padding-right: 8%
	}
	.w-100 {
		width: 100%;
	}
	.bp-med-w-35 {
		width: 35%;
	}
	.bp-med-w-40 {
		width: 40%;
	}
	.bp-med-w-40-30 {
		width: 40%;
	}
	.bp-med-w-50 {
		width: 50%;
	}
	.bp-med-w-50-33 {
		width: 50%;
	}
	.bp-med-w-50-100 {
		width: 50%;
	}
	.bp-med-w-60 {
		width: 60%;
	}
	.bp-med-w-65 {
		width: 65%;
	}
	.bp-med-w-60-70 {
		width: 60%;
	}
	.bp-med-w-70 {
		width: 70%;
	}
	.bp-med-w-100-25 {
		width: 100%;
	}
	.bp-med-w-100-50 {
		width: 100%;
	}
}


/*
	===================
	Large breakpoint
	===================
	*/

@media all and (min-width: 64em) {
	.bp-med-w-40-30 {
		width: 30%;
	}
	.bp-med-w-50-33 {
		width: 33.33%;
	}
	.bp-med-w-50-66 {
		width: 66.66%;
	}
	.bp-med-w-50-100 {
		width: 100%;
	}
	.bp-med-w-60-70 {
		width: 70%;
	}
	.bp-med-w-100-25 {
		width: 25%;
	}
	.bp-med-w-100-50 {
		width: 50%;
	}
	/*  Large and up breakpoints  */
	.bp-lrg-w-25 {
		width: 25%;
	}
	.bp-lrg-w-50 {
		width: 50%;
	}
	.bp-lrg-w-70 {
		width: 70%;
	}
	.bp-lrg-w-75 {
		width: 75%;
	}
}


/*  ===================
	Project page
	===================  */


/*  Headings  */

.heading-project-color-1 {
	background: #00bd9c;
	z-index: 41;
}


/*  Secondary navigation colors  */

.nav-project-color-1 .icon-arrow-right,
.nav-project-color-1 .icon-arrow-down {
	color: #00bd9c;
}

.nav-project-color-1 li.active>a {
	border-left-color: #00bd9c;
}

.nav-project-color-1 a:hover {
	color: #00bd9c;
}


/*  Secondary navigation wide colors  */

#project-nav .emosivu {
	display: none;
}

@media all and (min-width: 48em) {
	.nav-secondary--wide.nav-project-color-1 li.active a {
		background-color: #fff;
		border-bottom-color: #00bd9c;
		color: #00bd9c;
	}
	.nav-secondary--wide.nav-project-color-1 a:hover {
		border-bottom-color: #00bd9c;
	}
	/* Hide project page menu buttons on desktop */
	.nav-secondary-section--project .nav-secondary .btn-nav-toggle {
		display: none;
	}	
	
	#project-nav .emosivu {
		display: flex;
	}	
	
}


/*  Project page colors
* Add .project-page-1 to .main  */

.project-page-1 .component a {
	color: #00bd9c;
}

.project-page-1 .component a:hover {
	color: #444444;
}

.project-page-1 .component a:hover h1,
.project-page-1 .component a:hover h2,
.project-page-1 .component a:hover h3,
.project-page-1 .component a:hover h4,
.project-page-1 .component a:hover h5,
.project-page-1 .component a:hover h6 {
	color: #00bd9c;
}

.project-page-1 .component.content a:visited,
.project-page-1 .component .links-basic a:visited {
	color: #007F83;
}

.project-page-1 .component .primary-heading h2 {
	color: #33485f;
}

.project-page-1 .component .meta-heading h1,
.project-page-1 .component .meta-heading h2,
.project-page-1 .component .meta-heading h4 {
	border-color: #00bd9c;
}

.project-page-1 .component .meta-heading a:hover,
.project-page-1 .component .meta-heading a:hover h2 {
	color: #fff;
	background-color: #00bd9c;
}

.project-page-1 .component .meta-heading a:hover h1,
.project-page-1 .component .meta-heading a:hover h2,
.project-page-1 .component .meta-heading a:hover h4 {
	background-color: #00bd9c;
}

.project-page-1 .component .element-link a {
	color: #444444;
}

.project-page-1 .component .element-link .icon-arrow-right {
	color: #00bd9c;
}

.project-page-1 .component .list a {
	color: #444444;
}

.project-page-1 .component .list a:hover {
	color: #00bd9c;
}

.project-page-1 .component .list a:hover h1 {
	color: #00bd9c;
}

.project-page-1 .component .list .icon-arrow-right {
	color: #00bd9c;
}

.project-page-1 .component table th {
	background-color: #00bd9c;
	border-color: #00bd9c;
}

.project-page-1 .component .list-rating a {
	color: #9999a8;
}

.project-page-1 .component .list-rating a:hover {
	color: #00bd9c;
}

.project-page-1 .component .component-gallup-result {
	background-color: #00bd9c;
}

.project-page-1 .nav-secondary-section.nav-project-color-1 .component {
	background-color: #f1f7f8;
}

/*  Headings  */

.heading-project-color-2 {
	background: #e87e04;
	z-index: 41;
}

.project-title-color1 {
	color: #00bd9c;
	margin-top: 21px;
}

.project-title-color2 {
	color: #e87e04;
	margin-top: 21px;
}

.project-title-color1.kodinhoitohaku h1 {
	color: #00bd9c;
}

.project-title-color2.kodinhoitohaku h1 {
	color: #e87e04;
}

.project-title-color3.kodinhoitohaku h1 {
	color: #39a7d7;
}

/*  Secondary navigation colors  */

.nav-project-color-2 .icon-arrow-right,
.nav-project-color-2 .icon-arrow-down {
	color: #e87e04;
}

.nav-project-color-2 li.active>a {
	border-left-color: #e87e04;
}

.nav-project-color-2 a:hover {
	color: #e87e04;
}


/*  Secondary navigation wide colors  */

@media all and (min-width: 48em) {
	.nav-secondary--wide.nav-project-color-2 li.active a {
		background-color: #fff;
		border-bottom-color: #e87e04;
		color: #e87e04;
	}
	.nav-secondary--wide.nav-project-color-2 a:hover {
		border-bottom-color: #e87e04;
	}
}


/*  Project page colors
* Add .project-page-1 to .main  */

.project-page-2 .component a {
	color: #e87e04;
}

.project-page-2 .component a:hover {
	color: #444444;
}

.project-page-2 .component a:hover h1,
.project-page-2 .component a:hover h2,
.project-page-2 .component a:hover h3,
.project-page-2 .component a:hover h4,
.project-page-2 .component a:hover h5,
.project-page-2 .component a:hover h6 {
	color: #e87e04;
}

.project-page-2 .component .primary-heading h2 {
	color: #33485f;
}

.project-page-2 .component .meta-heading h1,
.project-page-2 .component .meta-heading h2,
.project-page-2 .component .meta-heading h4 {
	border-color: #e87e04;
}
.project-page-2 .component .meta-heading a:hover,
.project-page-2 .component .meta-heading a:hover h2 {
	color: #fff;
	background-color: #e87e04;
}

.project-page-2 .component .meta-heading a:hover h1,
.project-page-2 .component .meta-heading a:hover h4 {
	background-color: #e87e04;
}

.project-page-2 .component .element-link a {
	color: #444444;
}

.project-page-2 .component .element-link .icon-arrow-right {
	color: #e87e04;
}

.project-page-2 .component .list a {
	color: #444444;
}

.project-page-2 .component .list a:hover {
	color: #e87e04;
}

.project-page-2 .component .list a:hover h1 {
	color: #e87e04;
}

.project-page-2 .component .list .icon-arrow-right {
	color: #e87e04;
}

.project-page-2 .component table th {
	background-color: #e87e04;
	border-color: #e87e04;
}

.project-page-2 .component .list-rating a {
	color: #9999a8;
}

.project-page-2 .component .list-rating a:hover {
	color: #e87e04;
}

.project-page-2 .component .component-gallup-result {
	background-color: #e87e04;
}

/*  Headings color 3  */

.heading-project-color-3 {
	background: #39a7d7;
	z-index: 41;
}

.project-title-color3 {
	color: #39a7d7;
	margin-top: 21px;
}




/*  Secondary navigation colors  */

.nav-project-color-3 .icon-arrow-right,
.nav-project-color-3 .icon-arrow-down {
	color: #39a7d7;
}

.nav-project-color-3 li.active>a {
	border-left-color: #39a7d7;
}

.nav-project-color-3 a:hover {
	color: #39a7d7;
}


/*  Secondary navigation wide colors  */

@media all and (min-width: 48em) {
	.nav-secondary--wide.nav-project-color-3 li.active a {
		background-color: #fff;
		border-bottom-color: #39a7d7;
		color: #39a7d7;
	}
	.nav-secondary--wide.nav-project-color-3 a:hover {
		border-bottom-color: #39a7d7;
	}
}


/*  Project page colors
* Add .project-page-1 to .main  */

.project-page-3 .component a {
	color: #39a7d7;
}

.project-page-3 .component a:hover {
	color: #444444;
}

.project-page-3 .component a:hover h1,
.project-page-3 .component a:hover h2,
.project-page-3 .component a:hover h3,
.project-page-3 .component a:hover h4,
.project-page-3 .component a:hover h5,
.project-page-3 .component a:hover h6 {
	color: #39a7d7;
}

.project-page-3 .component .primary-heading h2 {
	color: #33485f;
}

.project-page-3 .component .meta-heading h1,
.project-page-3 .component .meta-heading h2,
.project-page-3 .component .meta-heading h4 {
	border-color: #39a7d7;
}

.project-page-3 .component .meta-heading a:hover,
.project-page-3 .component .meta-heading a:hover h2 {
	color: #fff;
	background-color: #39a7d7;
}

.project-page-3 .component .meta-heading a:hover h1,
.project-page-3 .component .meta-heading a:hover h2,
.project-page-3 .component .meta-heading a:hover h4 {
	background-color: #39a7d7;
}

.project-page-3 .component .element-link a {
	color: #444444;
}

.project-page-3 .component .element-link .icon-arrow-right {
	color: #39a7d7;
}

.project-page-3 .component .list a {
	color: #444444;
}

.project-page-3 .component .list a:hover {
	color: #39a7d7;
}

.project-page-3 .component .list a:hover h1 {
	color: #39a7d7;
}

.project-page-3 .component .list .icon-arrow-right {
	color: #39a7d7;
}

.project-page-3 .component table th {
	background-color: #39a7d7;
	border-color: #39a7d7;
}

.project-page-3 .component .list-rating a {
	color: #9999a8;
}

.project-page-3 .component .list-rating a:hover {
	color: #39a7d7;
}

.project-page-3 .component .component-gallup-result {
	background-color: #39a7d7;
}

#componentsx.project-color-1 a p.list-ingress,
#componentsx.project-color-2 a p.list-ingress,
#componentsx.project-color-3 a p.list-ingress,
#components.project-color-1 a p.list-ingress,
#components.project-color-2 a p.list-ingress,
#components.project-color-3 a p.list-ingress {
	color: #444444;
}

.project-page-1 .visible-s .media-400x250,
.project-page-2 .visible-s .media-400x250,
.project-page-3 .visible-s .media-400x250 {
	max-width: 100% !important;
	height: auto !important;
}


/*  ===================
	Featured img
	===================  */

.featured-img-project {
	position: relative;
	z-index: 40;
	overflow: hidden;
	height: 170px;
}

.featured-img-project .mask {
	border-top: 1px solid rgba(255,255,255,0.15);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.featured-img-project img {
	border-radius: 0;
	max-width: 185%;
	display: block;
}

@media all and (min-width: 30em) {
	.featured-img-project {
		height: auto;
	}
	.featured-img-project img {
		max-width: 100%;
		margin: 0;
	}
}


/*  ============================================

	In english mods
	* Overrides elements in the site
	* Remember to add "in-english" class to body

	============================================  */

.in-english {
	/*  No primary aside on the english version
  * Remove the margin from the page wrapper  */
	/*  Logo change
	  * @ header
	  * NOTE: On smallest view the finnish logo is displayed
	  because there isn't space for the wide english logo  */
}

.in-english .page {
	margin-left: 0;
}

/*
@media all and (min-width: 30em) {
	.in-english .header-logo h1 {
		background-position: -10px -40px;
		width: 195px;
	}
}

*/

@media all and (min-width: 48em) {
	.in-english {
		/*  Give space for the logo  */
	}
	.in-english .header-bar {
		width: 212px;
	}
	.in-english .nav-primary-top {
	/*	margin-left: 214px; */
		padding: 0 0 0 8px;
	}
}


/* Prototyylit                                          */


/********************************************************/

.proto.V,
div.proto {
	opacity: 0.7;
	z-index: 1000;
	position: absolute;
	margin: 3px 0 0 3px;
	padding: 1px 6px 1px 3px;
	background: rgba(60,155,30,0.8);
	border: 1px solid rgba(0,155,0,0.2);
	border-bottom-right-radius: 4px;
	font-family: "Lato",
Helvetica,
Arial,
sans-serif;
	color: #FFF;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	line-height: 1.5;
	text-shadow: 0 0px 2px #000;
	box-shadow: inset 1px -1px 6px #50C850, inset -1px 1px 2px rgba(100,155,100,0.5);
}

.proto.Kesken,
.proto.K,
.proto.punainen {
	background: #EB4D4D;
	box-shadow: inset 1px -1px 6px #FF7C24, inset -1px 1px 2px rgba(236,28,19,0.73);
	opacity: 0.5;
	text-shadow: 0 0px 2px #000;
}

.proto.OH,
.proto.keltainen {
	background: #EBD84D;
	box-shadow: inset 1px -1px 6px #FFE524,
inset -1px 1px 2px #ECCA13;
	opacity: 0.8;
	text-shadow: 0 0px 2px #000;
}


/* Reijon lisäykset */


/********************************************************/

ol.protonavi {
	display: block;
	margin: 10px;
	padding: 0 45px;
}

ol.protonavi li {
	display: inline-block;
	margin: 0 5px 0 10px !important;
	font-size: 12px !important;
}

.errormessage {
	display: none
}

.form_contents .error .errormessage {
	display: block;
	border-style: solid;
	border-color: red;
	border-width: 1px;
	padding: 5px;
}

.component.form-edit form,
.component.form-view form {
	border: 1px solid #e0edef;
	border-radius: 4px;
	margin-bottom: 1.57143em;
	padding: 1.57143em;
	position: relative;
}

.component.form-edit form .form_row.form_checkboxes,
.component.form-view form .form_row.form_checkboxes,
.component.form-edit form .form_row.form_radios,
.component.form-view form .form_row.form_radios {
	border: none;
	padding: 0;
}

.component.form-edit form fieldset,
.component.form-view form fieldset {
	border: 1px solid #e0edef;
	border-radius: 4px;
	margin-bottom: 1.57143em;
	padding: 1.57143em;
}

.component.form-edit form fieldset legend,
.component.form-view form fieldset legend {
	font-weight: bold;
}

.component.form-edit form fieldset legend span.form_required_field,
.component.form-view form fieldset legend span.form_required_field {
	color: #ff6666;
	float: none;
	left: 0;
	margin: 0;
	position: relative;
	font-size: 150%;
}

form .form_row label {
	display: inline-block;
	font-weight: normal;
	margin: 0 0 5px 0;
}

.form_row {
	position: relative
}

.form_row h3 {
	font-size: 1em;
	line-height: 1.57143;
	color: #444444;
	background: white;
	left: 15px;
	position: absolute;
	margin-top: -34px;
	font-weight: normal;
}

.form_required_field {
	color: #FF6666;
	float: left;
	position: static;
	margin: 0 5px 0;
	font-size: 150%;
}

.form_checkboxes .form_required_field,
.form_radios .form_required_field {
	position: absolute;
	left: -3px;
	margin-top: -31px;
	color: #FF6666;
	font-size: 150%;
}

.formInput {
	position: relative;
	background: none;
	padding: 0;
	margin: 0;
}

.formInput input {
	margin-bottom: 0
}

.form_row.no-grouping {
	padding: 15px 0;
	margin: 0;
	border: none;
}

.form_row.no-grouping h3 {
	display: none
}

.form_row.no-grouping .form_required_field {
	float: left;
	position: static;
	margin: 0 5px 0;
}


/* staton seurantakuva aiheutti sivun pohjalla tyhjän kaistaleen*/

body>img {
	position: absolute
}

#palvelut_aakkosittain .otsikko {
	font-size: 1.5em;
	font-weight: bold;
}

#palvelut_aakkosittain .element-link {
	margin-top: 10px
}

#palvelut_aakkosittain .anchor-list {
	margin-bottom: 15px
}

#palvelut_aakkosittain .anchor-list a {
	font-size: 1.1em;
	font-weight: bold;
}

#cal-pick-wrapper .form_row {
	display: block;
	width: 50%;
	float: left;
}

#cal-pick-wrapper .form_row label {
	font-weight: bold;
	display: block;
}

#cal-pick-wrapper .form_row input.cal-pick {
	width: 75%;
	margin-right: 1%;
}

#cal-pick-wrapper i {
	max-width: 17%;
	min-width: 10px;
	color: #d1443d;
	font-size: 20px;
	line-height: 25px;
}

#ui-datepicker-div {
	display: none;
	z-index: 999999999999 !important;
	background: #FFF;
	box-shadow: 0 0 6px 0 rgba(0,0,0,0.3);
	border-top: 1px solid #E0EDEF;
	margin-top: 5px;
	margin-bottom: 5px;
}

.ui-datepicker-next,
.ui-datepicker-prev {
	float: left;
	font-size: 21px;
	color: #FFF;
	cursor: pointer;
	line-height: 1;
	position: relative;
	top: -6px;
}

.ui-datepicker-next:hover,
.ui-datepicker-prev:hover {
	color: #d1443d
}

.ui-datepicker-next {
	float: right
}

.ui-datepicker-title {
	font-weight: bold;
	text-align: center;
}

.ui-datepicker-header {
	background: #656576;
	margin: 0;
	border: none;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	padding: 14px 8px 13px 9px;
	font-size: 0.9em;
	color: #FFF;
	line-height: 1;
}

#ui-datepicker-div th {
	display: none
}

#ui-datepicker-div td {
	text-align: center;
	/* padding: 0.38571em 0.78571em; */
	 padding: 0;
}

#ui-datepicker-div .ui-datepicker-today {
	position: relative;
	overflow: hidden;
}

#ui-datepicker-div td:hover {
	background: #F1F7F8
}

#ui-datepicker-div td:hover a {
	color: #333 !important
}

#ui-datepicker-div td.ui-datepicker-unselectable:hover {
	background: none
}

#ui-datepicker-div td a {
	color: #656576;
	font-weight: bold;
	font-size: 0.8em;
	line-height: 3;
	padding: 7px 12px;
}

#ui-datepicker-div .ui-datepicker-current-day {
	background: #d1443d
}

#ui-datepicker-div .ui-datepicker-current-day a {
	color: #FFF
}

.cal-pick-divider {
	position: absolute;
	right: 7.5%;
	margin-top: 4px;
}

#integraatio table * {
	font-size: 0.95em
}

#integraatio table th {
	font-size: 1.2em
}

.highlight {
	background: #d1443d;
	color: #FFF;
	border-radius: 5px;
	padding: 0 3px;
}

#keskustelijoita {
	float: right;
	position: relative;
	top: -18px;
}

.meta-text.author img {
	border-radius: 50%;
	float: left;
	height: 50px !important;
	width: 50px !important;
}

.meta-text.author span {
	padding: 15px 15px 0 10px;
	display: block;
	float: left;
	color: #d1443d;
}

.blog-name {
	padding-bottom: 1px;
	color: #d1443d;
}

.form_input label,
.form_textarea label,
.form_select label {
	font-weight: bold !important
}

.form_input label .kysymys {
	font-weight: normal !important
}	

#ui-datepicker-div .ui-datepicker-unselectable {
	background: #F0F0F0 !important
}

.ui-datepicker-calendar .ui-state-disabled span {
	background: none;
	border: none;
}

.ui-datepicker-buttonpane {
	display: block;
}
.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em !important;
    width: auto;
	overflow: visible;
}

#ui-datepicker-div td:hover {
	background: #D1443D !important
}

.img-80-80 {
	width: 80px !important;
	height: 80px !important;
}

.img-90-90 {
	width: 90px !important;
	height: 90px !important;
}

.img-120-120,
.img-400-x {
	height: auto !important
}

.nav-secondary-inner i {
	max-height: 44px;
}

.meta-text.author .img-90-90 {
	width: 50px !important;
	height: 50px !important;
}


#componentsx .statoelement:not(a),
#componentsx .elementcontainer,
#components .statoelement:not(a),
#components .elementcontainer {
	display: block
}

.component-edit {
	background: #FFF
}

#aside-primary hgroup {
	font-size: 1.21429em;
	padding: 0;
	margin: 0;
}

#aside-primary hgroup h1 {
	color: #D1443D
}

.pagination span.selected,
.pagination span:hover {
	cursor: pointer;
	border-color: #D45049 !important;
	border-bottom-color: #B1302A !important;
	background-color: #D45049;
	color: #FFF;
}

textarea.ingressi-edit {
	min-height: 0;
	resize: none;
	text-indent: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	color: #333;
	overflow-y: hidden;
}

textarea.title-edit {
	min-height: 0;
	resize: none;
	text-indent: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	color: #D1443D;
	overflow-y: hidden;
}

.col-select {
	z-index: 9999999;
	float: right;
	margin-right: 155px;
	color: #FFF;
	font-size: 0.85714em;
	background-color: #36363F;
	border-radius: 0 0 0 4px;
	padding: 5px 10px;
	top: -1px;
	position: relative;
	border-right: 2px solid #D33;
}

.col-select input {
	vertical-align: middle;
	margin-right: 4px;
}

.col-select label {
	margin-right: 4px;
	font-size: 12px;
}

.col-select h4 {
	display: inline-block;
	padding: 0;
	margin: 0 5px 0 0;
	font-size: 12px;
	color: #FFF;
}

.component-korjaa {
	float: left;
	position: relative;
	background: #FFF;
}

.component-korjaa .meta-heading i {
	display: none
}

.component-korjaa .meta-heading input {
	margin: 0
}

.component-korjaa .meta-heading h1,
.component-korjaa .meta-heading h2,
.component-korjaa .meta-heading h4 {
	padding: 10px;
	z-index: 11000;
}


/*.element-link a {
  word-break: break-all;
} */

.components .cms_outline_selected>.elementcontainer>.component-korjaa .meta-heading h1,
.components .cms_outline_selected>.elementcontainer>.component-korjaa .meta-heading h2,
.components .cms_outline_selected>.elementcontainer>.component-korjaa .meta-heading h4 {
	background: #D1443D
}

body.dragging.resizing {
	cursor: col-resize !important;
}

img.handle {
	display: none;
	height: 18px;
	z-index: 9999999;
	position: absolute;
	right: 0;
	margin: 8px 10px 0 0;
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
}

img.handle:active {
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
}

.dragmode .component-korjaa:hover img.handle {
	display: block
}

.ui-resizable-s,
.ui-resizable-e {
	display: none !important
}

.ui-icon-gripsmall-diagonal-se {
	display: none !important
}

.tapahtuma-aika,
.tapahtuma-paikka {
	font-family: Lato,
Helvetica,
Arial,
sans-serif;
	font-size: 1em;
	line-height: 19px;
	display: block;
	font-weight: normal;
}

.tapahtuma-aika strong {
	font-weight: normal;
}

body.dragging.resizing img.handle {
	display: block !important;
}

body.dragging.resizing .ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
	display: block !important;
}

.reverse {
	unicode-bidi: bidi-override;
	direction: rtl;
}

.reverse,
.eml,
.element-contact .reverse {
	display: inline
}

.element-contact .eml {
	display: inline-block
}

.component-korjaa embed,
.component-korjaa object,
.component-korjaa iframe,
.component embed,
.component object,
.component iframe {
	width: 100%
}

.proto.sk {
	position: static;
	width: auto;
	float: none;
	clear: both;
	display: inline-block;
	margin-bottom: 5px;
}

.component-korjaa .cms_noimage {
	max-height: 200px;
	width: 100%;
}


/* Leveä */

.bp-med-w-50-66 .component-lift,
.bp-med-w-100 .component-lift {
	display: block;
}

.bp-med-w-50-66 .component-banner,
.bp-med-w-100 .component-banner {
	display: none;
}


/* Kapee */

.bp-med-w-100-50 .component-banner,
.bp-med-w-50-33 .component-banner {
	display: block;
}

.bp-med-w-100-50 .component-lift,
.bp-med-w-50-33 .component-lift {
	display: none;
}

.korostuslaatikko {
	background-color: #e0edef;
	border: 1px solid #cfe3e6;
	border-radius: 4px;
	padding: 1.57143em 6%;
	margin: 1.57143em 0;
}

.korostuslaatikko * {
	outline: none
}

.korostuslaatikko>div {
	border-radius: 2px
}

.korostuslaatikko>div>div {
	padding: 7px
}

.korostuslaatikko p {
	margin: 0
}


/*
.korostuslaatikko h1,
.korostuslaatikko h2,
.korostuslaatikko h3,
.korostuslaatikko h4,
.korostuslaatikko h5 {
color: #FFF;
} */

.korostuslaatikko .red {
	color: #FFA4A4;
	font-weight: bold !important;
}

.korostuslaatikko .blue {
	color: #A4B2FF;
	font-weight: bold !important;
}

.korostuslaatikko .green {
	color: #A4FFBE;
	font-weight: bold !important;
}

.korostuslaatikko .grey {
	color: #B6B2B2;
	font-weight: bold !important;
}

.korostuslaatikko .yellow-highlight {
	font-weight: bold !important;
	background: #FFFF7A;
	border-radius: 2px;
	margin: 0 2px;
	color: #3E3C3C;
	padding: 0 1px 0 3px;
}

.korostuslaatikko .grey-highlight {
	font-weight: bold !important;
	background: #F3F3F3;
	border-radius: 2px;
	margin: 0 2px;
	color: #3E3C3C;
	padding: 0 1px 0 3px;
}

.ui-dialog {
	z-index: 1000000;
	padding: 30px 30px 30px 20px;
}

.ui-dialog .ui-button {
	text-align: right;
	float: right;
	margin-bottom: 5px;
	background: #D1443D;
	color: #FFF;
	border-radius: 2px;
	padding: 5px 8px;
	box-shadow: 2px 2px 4px -1px rgba(41,41,41,0.44);
	border: 1px solid #F34444;
	border-top: 1px solid #B82C2C;
	border-left: 1px solid #DF5252;
	width: 95px;
	position: relative;
	right: -4px;
}

.ui-dialog .ui-dialog-title {
	text-align: right;
	float: left;
	margin-bottom: 5px;
	position: relative;
	background: #413F3F;
	color: #FFF;
	border: none;
	border-radius: 2px;
	padding: 5px 8px;
	display: block;
	line-height: 1.4;
	box-shadow: 2px 2px 4px -1px rgba(41,41,41,0.44);
	border: 1px solid #000;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}

.ui-dialog iframe {
	box-shadow: 5px 4px 15px -4px rgba(41,41,41,0.61);
	border: 2px solid #797979;
	border-radius: 2px;
	margin: 0;
	background: #FFFFFF;
}

.karttaBoksi {
	height: auto !important
}

.grid-item-inner .grid-item-inner .elementcontainer,
.grid-item-inner .grid-item-inner .statoelement {
	/*outline: 0 !important;*/
	margin-bottom: 5px;
}

.content_editor.content_side_tab {
	margin-bottom: 40px
}

.content_editor.content_side_tab * {
	/*outline: 0 !important;_NO__DOTCOMMA__AFTER__*/
}

.primary-heading .list-ingress {
	margin-bottom: 0
}

.primary-heading .block {
	margin-bottom: 20px
}

.form_row.form_select select {
	display: block
}

.form-preview form {
	border: 1px solid #E0EDEF;
	border-radius: 4px;
	margin-bottom: 1.57143em;
	padding: 1.57143em;
}

.form_row.form_select select,
.form-view .form_row,
.form-edit .form_row,
.form-preview .form_row {
	margin-top: 8px;
	margin-bottom: 1.5em;
	overflow: hidden;
	position: static;
}

.form_contents {
	position: relative
}

.form_row .textarea-counter {
	font-size: 0.9em;
	display: inline-block;
	margin-left: auto;
	text-align: right;
	margin-right: 0;
	float: right;
}


/*

.form-preview .form_checkboxes div > span,
.form-preview .form_radios  div > span,
.form-view .form_checkboxes div > span,
.form-view .form_radios  div > span {
display: block !important;
}

*/

a .linkdescription {
	margin: 0 0 0 5px;
	font-size: 0.85em;
	display: inline;
}

.linkdescription:before {
	content: "(";
	padding-right: 1px;
}

.linkdescription:after {
	content: ")";
	padding-left: 1px;
}

.form-large .search-form-float .hakutarkennecb {
	width: auto
}

.ui-dialog-titlebar {
	padding: 0
}

.tablespans {
	display: table
}

.tablespans .eml {
	vertical-align: top
}

.elementti .tablespans {
	font-size: 0.92857em;
	line-height: 1.1;
}

.karttaModal {
	display: inline
}

.elementti>div>p {
	display: inline
}

.elementti>p>span>a {
	font-size: 13px;
	margin-left: 3px;
}

.elementti>span>input {
	vertical-align: top
}

.elementti>span>span>a {
	vertical-align: top;
	line-height: 13px;
}

.elementti>span,
.elementti>span>span,
.elementti>p,
.elementti>p>strong,
.elementti>p>span {
	vertical-align: top;
	margin-bottom: 5px;
	clear: left;
	line-height: 13px;
}

.elementti>p:after {
	clear: both;
	display: table;
	content: "";
}

.elementti span img {
	float: left;
	margin-right: 5px;
}

.elementti>p>strong {
	font-size: 1.1em;
	margin-bottom: 8px;
	display: block;
}

.meta-heading h1,
.meta-heading h2,
.meta-heading h4 {
	max-width: 100%
}

.display_block {
	display: block
}

.btn--form span {
	font-size: 12px;
	margin-right: 5px;
}

.elementti.palveluntarjoaja>strong,
.elementti.palveluntarjoaja>span {
	display: block
}

.elementti .expand-content {
	overflow: hidden
}

.elementti .expand-content>span {
	float: left;
	clear: left;
}

.elementti label.expand, .elementti button.expand {
	margin-bottom: 5px !important
}

.elementti p {
	display: inline
}

hr+hr {
	display: none
}

.list_line li {
	list-style-image: url(../ElementImages/hyphen2.png)
}

table td.align_right,
table th.align_right {
	text-align: right
}

.attachmentdescription {
	margin-left: 5px
}

.imagespan_left_row {
	margin: 0;
	display: block;
	float: none;
	clear: both;
	text-align: left;
}

.imagespan_left {
	float: left;
	padding-right: 10px;
}

.imagespan_right_row {
	margin: 0;
	display: block;
	float: right;
	clear: both;
	text-align: right;
}

.imagespan_right_row:after,
.imagespan_left_row:after {
	clear: both;
	content: "";
	display: table;
}

.imagespan_right {
	float: right;
	padding-left: 10px;
}

.imagespan_center {
	margin: 0 auto;
	display: block;
	float: none;
	text-align: center;
}

.imagespan_center .media_caption {
	margin: 0 auto;
	position: relative;
	left: -1px;
	text-align: left;
}

.rajoitteet input {
	width: 14px;
	position: relative;
	bottom: 12px;
	display: inline-block;
}

.rajoitteet img {
	width: 43px;
	max-width: 16%;
	display: inline-block;
}

.rajoitteet div {
	width: 100%;
	line-height: 1;
	vertical-align: top;
	display: inline-block;
}

.rajoitteet div div {
	max-width: 75%
}

.elementti input {
	display: inline
}

.karttaBoksi {
	display: inline !important
}

.elementti p {
	margin: 0 !important
}

.elementti textarea {
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 5px 1%;
	text-indent: 0;
	width: 98%;
}

.palveluhakemisto .expand i,
.elementti .expand i {
	float: left;
	margin-right: 5px;
}

.palveluhakemisto .inner .bp-med-w-35 {
	width: 100%;
}

.korostuslaatikko {
	clear: both
}

.imagespan_left_edit,
.imagespan_right_edit,
.imagespan_left:after,
.imagespan_right:after {
	display: table;
	content: "";
}

.imagespan_left_edit:after,
.imagespan_left:after {
	clear: left
}

.imagespan_right_edit:after,
.imagespan_right:after {
	clear: right
}

.media-120x120 {
	width: 120px;
	height: 120px;
}

.media-280x200 {
	max-width: 280px;
	max-height: 200px;
}

.media-280x350 {
	max-width: 280px;
	max-height: 350px;
}

.media-400x250 {
	max-width: 400px;
	max-height: 250px;
}

.media-original {
	/*width: auto;
	height: auto;*/
}

span.media_caption {
	-webkit-box-sizing: border-box;
	/* Safari/Chrome,
other WebKit */
	-moz-box-sizing: border-box;
	/* Firefox,
other Gecko */
	box-sizing: border-box;
	display: block;
	border-radius: 0 0 4px 4px;
	font-size: 1em;
	padding: 11px 10px;
	background-color: #f1f7f8;
	position: relative;
	top: 0px;
	text-decoration: none !important;
	font-style: normal;
	box-shadow: inset 0px 0px 0 1px #cfe3e6;
	max-width: 100%;
}

.image-120 span.media_caption {
	width: 120px !important;
	max-width: 100%;
	padding-left: 10px;
	padding-right: 10px;
}

.image-280 span.media_caption {
	max-width: 100%;
	padding-left: 10px;
	padding-right: 10px;
}

.image-400 span.media_caption {
	max-width: 100%;
	padding-left: 10px;
	padding-right: 10px;
}

.diaari-ripustus table {
	border-collapse: collapse;
	margin-bottom: 10px;
}

.diaari-ripustus table,
.diaari-ripustus td {
	background: #FFF;
	padding: 5px;
}

.diaari-ripustus table:nth-child(1) tr:nth-child(1) td {
	border: none;
	font-weight: bold;
	padding: 0;
	text-transform: capitalize;
}

.diaari-ripustus table:nth-child(1) tr:nth-child(2) td {
	background: #d1443d;
	color: #FFF;
	font-weight: bold;
}

.diaari-ripustus table:nth-child(2) tr:nth-child(1) td {
	background: #d1443d;
	color: #FFF;
	font-weight: bold;
}

.component img,
.imagespan_left_row_edit img,
.imagespan_right_row_edit img,
.imagespan_left_edit img,
.imagespan_right_edit img,
.imagespan_center_edit img,
.imagespan_left img,
.imagespan_right img,
.imagespan_center img {
	/*height: auto !important aiheutti ongelman listauskuvissa julkipuolella*/
}

.statoelement .elementcontainer,
h1 textarea.title-edit,
.statoelement .stato5outline,
.stato5element h1 textarea,
.stato5element .stato5outline {
	outline: 1px dotted #8D8D8D
}

.cms_outline_selected .elementcontainer,
h1 textarea:focus,
.cms_outline_selected .stato5outline {
	outline: 1px dotted #D1443D
}

.component:not([tabindex]) {
	overflow: visible !important;
}

.nav-secondary.nav-secondary--wide {
	/*max-height: 77px;*/
}

.footer-primary .grid-item-inner {
	border-bottom: 1px solid #d9645e;
	min-height: 378px;
}

.guillotine-wrapper {
	overflow: hidden;
	background: #FFF;
}

.ankkurilista {
	margin-bottom: 1.57143em;
}

.guillotine-wrapper img {
	/*visibility: hidden;*/
	max-width: none;
	max-height: none;
}

.ankkurilista {
	margin-bottom: 1.57143em;
}

form .confirm {
	display: none;
}

#chatti .elementcontainer {
	outline: none;
}

#chatti .chatbox {
	xborder: 1px solid #000;
	float: left;
	margin-top: 15px;
}

#chatti .output {
	border: 1px solid #000;
	height: 500px;
	overflow: auto;
	padding: 20px;
	width: 620px;
}

#chatti .output div {
	margin-top: 5px;
	margin-bottom: 0px;
}

#chatti .output div div {
	margin-top: 0px;
	margin-bottom: 0px;
}

#chatti .messageinfo {
	margin-bottom: 0;
	margin-top: 0;
}

#chatti .messagecontent {
	margin-bottom: 0;
	margin-top: 0;
}

#chatti input.message {
	margin-top: 15px;
	width: 530px;
}

#chatti .error {
	color: red;
	text-align: left;
}

#chatti .self {
	background: none repeat scroll 0 0 #d7e4ed;
	border: 0 solid #bbb;
	border-radius: 15px;
	font-size: 11px;
	margin: 0 auto;
	margin: 10px;
	position: relative;
	padding: 10px;
	width: 500px;
	/* min-height: 75px; */
}

#chatti .self .pointer {
	border-color: transparent #d7e4ed;
	border-style: solid;
	border-width: 15px 0 15px 15px;
	content: "";
	display: block;
	margin-top: -15px;
	position: absolute;
	right: -15px;
	top: 50%;
	width: 0;
	z-index: 1;
}

#chatti .admin .messageinfo strong:before {
	background: url("/images/tampere_vaakuna.png") no-repeat scroll 0 0 rgba(0,0,0,0);
	content: "";
	display: block;
	float: left;
	height: 16px;
	margin: 0 6px 0 0;
	width: 16px;
}

#chatti .other {
	background: none repeat scroll 0 0 #eee;
	border: 0 solid #bbb;
	border-radius: 15px;
	font-size: 11px;
	margin: 0 auto;
	position: relative;
	padding: 10px;
	width: 500px;
}

.component:not([tabindex])>.grid-item-inner,
.component-korjaa:not([tabindex])>.grid-item-inner {
	box-shadow: none;
}

.guillotine-wrapper br {
	display: none !important;
}

body:not(.EDIT):not(.VIEW) .media_caption {
	top: -8px;
}

body:not(.EDIT) .guillotine-wrapper {
	height: auto !important;
}

.ShowInNavigationfalse {
	color: black;
	margin-left: 10px
}

.elementti-kuva .imagespan_right_row,
.elementti-kuva .imagespan_left_row {
	padding-bottom: 1.5em;
}

.elementti-kuva .media-120x120 {
	height: 120px !important;
	width: 120px !important;
}

.elementti-kuva img {
	max-width: 100% !important;
	height: auto !important;
}

.projektisivu #componentsx .component:first-child .grid-item-inner,
.projektisivu #components .component:first-child .grid-item-inner {
	min-height: 0;	
	position: relative;
}

.projektisivu .component .grid-item-inner.projektisivuotsikko,
.projektisivu .ylinpalsta .component:first-child .grid-item-inner {	
	padding-top: 0;
	padding-bottom: 0;	
}

.projektisivu .ylinpalsta .component:first-child .grid-item-inner .meta-heading {	
	padding-top: 3em;	
}

.project-page-1 #componentsx .component:first-child .grid-item-inner .meta-heading:empty,
.project-page-2 #componentsx .component:first-child .grid-item-inner .meta-heading:empty,
.project-page-3 #componentsx .component:first-child .grid-item-inner .meta-heading:empty,
.project-page-1 #components .component:first-child .grid-item-inner .meta-heading:empty,
.project-page-2 #components .component:first-child .grid-item-inner .meta-heading:empty,
.project-page-3 #components .component:first-child .grid-item-inner .meta-heading:empty{	
	padding-top: 0em;	
}


.project-page-1 #componentsx .component:first-child .grid-item-inner hgroup,
.project-page-2 #componentsx .component:first-child .grid-item-inner hgroup,
.project-page-3 #componentsx .component:first-child .grid-item-inner hgroup,
.project-page-1 #components .component:first-child .grid-item-inner hgroup,
.project-page-2 #components .component:first-child .grid-item-inner hgroup,
.project-page-3 #components .component:first-child .grid-item-inner hgroup {
	position: relative;
	padding: 10px;
	top: -3.50em;
}

@media all and (max-width: 47.9375em) {
	
	.project-page-1 #componentsx .component:first-child .grid-item-inner hgroup,
	.project-page-2 #componentsx .component:first-child .grid-item-inner hgroup,
	.project-page-3 #componentsx .component:first-child .grid-item-inner hgroup,
	.project-page-1 #components .component:first-child .grid-item-inner hgroup,
	.project-page-2 #components .component:first-child .grid-item-inner hgroup,
	.project-page-3 #components .component:first-child .grid-item-inner hgroup {	
		top: -20px;
	}
}	

.project-page-1 #componentsx .component:first-child .grid-item-inner hgroup.eikuvaa,
.project-page-2 #componentsx .component:first-child .grid-item-inner hgroup.eikuvaa,
.project-page-3 #componentsx .component:first-child .grid-item-inner hgroup.eikuvaa,
.project-page-1 #components .component:first-child .grid-item-inner hgroup.eikuvaa,
.project-page-2 #components .component:first-child .grid-item-inner hgroup.eikuvaa,
.project-page-3 #components .component:first-child .grid-item-inner hgroup.eikuvaa {
	top: -1.50em
}	

.statoelement.imagespan_right_row_edit:after {
	clear: both;
	display: table;
	content: "";
}

.rajoitteet {
	margin-bottom: 1.57em;
}

.statoelement.imagespan_right_row_edit+.statoelement {
	clear: both;
}

.element-link .icon-arrow-right {
	margin-right: 3px;
}

figure.elementti-kuva {
	margin-bottom: 1.57em;
}

body:not(.EDIT) p:empty {
	display: none;
}

body:not(.EDIT) p:empty+br {
	display: none;
}

.elementti .p-fix p {
	display: block;
	line-height: 1.57143;
}

.p-fix p+p {
	padding: 10px 0 0;
}

.karttaBoksi.hidden {
	display: none !important;
}

.primary-heading-viivallinen h1::after {
	background-color: #e0edef;
	content: "";
	display: block;
	height: 1px;
	margin-top: 21px;
	width: 140px;
	font-size: 15px;
	position: absolute;
	z-index: 1;
}

.no-bottom-padding .primary-heading-viivallinen h1::after {
	margin-bottom: 0;
}

.no-bottom-padding .primary-heading h1 {
	margin-bottom: 0;
}

.no-bottom {
	margin-bottom: 0;
	padding-bottom: 0;
}

.elementti>div>p+p {
	display: block;
	padding: 10px 0 0;
}

.saavutettavuus .selite,
.saavutettavuus input[type='checkbox'],
.saavutettavuus img {
	vertical-align: middle;
	display: inline-block;
	position: static;
	line-height: 1;
	margin: 0;
	padding: 0;
}

.saavutettavuus img {
	min-width: 100%;
	max-width: 100%;
}

.saavutettavuus tr,
.saavutettavuus td,
.saavutettavuus table {
	border: none;
}

.tampere-linkki-inline a {}

.component-banner h4 a,
.component-banner h3 a,
.component-banner h2 a {
	color: #33485f;
	border-bottom: 1px solid #e0edef;
}

.component-banner h4 a:hover,
.component-banner h3 a:hover,
.component-banner h2 a:hover {
	color: #d1443d;
}

/* Nosto otsikko linkkinuoli pois */
.component-banner h2>a>i.icon-arrow-right,
.component-banner h3>a>i.icon-arrow-right {
	display: none;
}
.component-banner .element-link>.external>.icon-arrow-right {
    color: #d1443d; /* #007f83; */
}

.guillotine-wrapper img {
	width: 100% !important;
}

.element-attachment {
	position: relative;
	padding-left: 20px;
}

.element-attachment a i {
	position: absolute;
	left: 0;
}

.element-attachment .element-link-inner {
	margin-left: 0;
}

#chatti .messagecontent {
	word-wrap: break-word;
}


/* padding-vähennys viivattomiin kuvauksiin */

.grid-item-inner.description {
	/*padding-bottom: 0;*/
	/*margin-bottom: 0;*/
}

.grid-item-inner.description .primary-heading.primary-heading-viivallinen {
	padding-bottom: 0;
}


/*
.component.no-bottom-padding + input + .component,
.component.no-bottom-padding + .component {
	padding-top: 0;
}
.component.no-bottom-padding + input + .component > .grid-item-inner,
.component.no-bottom-padding + .component > .grid-item-inner {
	padding-top: 0;
}*/


/* padding-vähennys viivattomiin kuvauksiin päättyy */

.footer-primary-last .list--links-small a {
	display: inline;
}

#resultsettable_paging span {
	font-size: 0;
}

#resultsettable_paging span a {
	font-size: 12px;
}

.featured-img-project img[src='ElementImages/noimage.png'] {
	width: 1200px !important;
	height: 350px !important;
}

body.EDIT:not(.dragmode) .component {
	position: static !important;
}

body.EDIT:not(.dragmode) #components {
	position: static !important;
	height: auto !important;
}

.dragmode .editor-container .grid-item-inner {
	max-height: 200px;
	overflow: hidden;
}

.dragmode .editor-container .grid-item-inner .meta-heading {
	display: none;
}

.text-sizing .active {
	color: #d1443d;
}

.dragmode .editor-container .grid-item-inner:after {
	content: "";
	width: -moz-calc(100% - 4px);
	width: -webkit-calc(100% - 4px);
	width: calc(100% - 4px);
	height: -moz-calc(100% - 4px);
	height: -webkit-calc(100% - 4px);
	height: calc(100% - 4px);
	display: block;
	position: absolute;
	top: 2px;
	left: 2px;
	border-bottom: 2px solid rgb(235,243,245);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 48%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, rgba(255,255,255,0)), color-stop(48%, rgba(255,255,255,0)), color-stop(79%, rgba(255,255,255,1)), color-stop(99%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 48%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 48%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 48%,rgba(255,255,255,1) 79%,  rgba(255,255,255,1) 99%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 48%, rgba(255,255,255,1) 79%,  rgba(255,255,255,1) 99%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}

.nav-secondary-inner .yllapito i {
	display: inline;
}


/* Tiedotenoston aikaleiman marginaalit */

.component-event.tiedotenosto h1.heading,
.component-event.tiedotenosto h2.heading,
.component-event.tiedotenosto h3.heading {
	margin-bottom: 0;
}

.list .tiedotelistaus h2,
.list .tiedotelistaus h3 {
	font-size: 1.21429em;
	line-height: 1.5;
}	

.component-event.tiedotenosto h3 {
	font-size: 1.85714em;
	line-height: 1.4;
}

.component-event.tiedotenosto span.meta-text,
.component-event.tiedotenosto time.meta-text {
	display: block;
	margin: 13px 0 25px 0;
}


/* /Tiedotenoston aikaleiman marginaalit */

.pager-tiedotearkisto h3,
.ilmoituslistaus h3 {
	font-size: 1.85714em;
    line-height: 1.333;
}

.ilmoituslistaus h4 {
	font-size: 1em;
    line-height: 1.4;
}

/* Tarkennetun haun hakunapit */

@media all and (max-width: 30em) {
	.form-large .advanced-search .search-form-float input,
.pager-ajankohtaistapaalista .form-large .search-form-float input {
		width: 58.5%;
	}
	.form-large .advanced-search .search-form-float .btn--form,
.pager-ajankohtaistapaalista .form-large .search-form-float .btn--form {
		width: 38%;
	}
}


/* /Tarkennetun haun hakunapit */

.listauskuva img {
	height: auto !important;
}


/* Upotuskomponentti */

#main .upotuskomponentti,
#main .upotuskomponentti iframe {
	max-width: 100% !important;
	width: 100% !important;
}


/* /Upotuskomponentti */

.uutiskeskusnostokuva {
	text-align: left;
	margin-top: 20px;
}

.uutiskeskusnostokuva figure {
	text-align: left;
	float: none;
	margin-bottom: 0;
}

.uutiskeskusnostokuva figure img {
	text-align: left;
	float: none;
}

.uutiskeskusnostokuva .element-img.left.large {
	max-width: 400px;
}

.breadcrumb {
	line-height: 2;
	margin: 0 12px 12px 1.57143em;
	padding: 0;
	text-shadow: 0 -1px 0 rgba(255,255,255,0.8);
	max-width: 80%;
	float: left;
}

.text-sizing {
	position: absolute;
	text-transform: uppercase;
	font-weight: bold;
	float: right;
	margin: 0 10px;
	top: 3px;
    right: 0px;
}

.main .rsbtn {
	display: table;
	position: relative;
	z-index: 50;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	float: right;
	line-height: 45px;
	height: auto !important;
	margin: 0;
	margin-left: 10px;
	right: 65px;
}



/*
.icon,
.icon-arrow-right,
.icon-arrow-down,
.icon-arrow-left,
.icon-facebook,
.icon-twitter,
.icon-linkedin,
.icon-rss,
.icon-list,
.icon-cross,
.icon-house,
.icon-youtube,
.icon-search,
.icon-star,
.icon-star-2,
.icon-arrow-up,
.icon-new-tab,
.icon-plus,
.icon-minus,
.external .linktext:after,
.icon-calendar,
.icon-flickr {
	font-family: 'icomoon';
	font-size: 16px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	top: 2px;
	-webkit-font-smoothing: antialiased;
} */

.icon-volume {
	color: #444444 !important;
	margin-right: 10px !important;
	text-transform: uppercase !important;
	font-family: "Lato", Helvetica, Arial,sans-serif !important;
	font-size: 0.85714em !important;
	
}




#xp1 .rsbtn_powered {
	display: none;
}

#main #xp1 {
	margin-top: 10px
}

.rs_preserve .speakerimage {
	border-style: none;
	vertical-align: text-bottom;
	width: 14px;
	height: 14px;
	margin-left: 4px;
}

.rsbtn a {
	vertical-align: middle;
}

.rs_preserve .fa-volume-up {
	font-size: 1.5em;
	vertical-align: middle;
	margin-top: -3px;
}

hgroup.noimage {
	margin-bottom: 45px !important;
}

hgroup.noimage h1 {
	top: 42px !important;
}

.terveysasemahakuosoite {
	display: block;
}

.terveysasemahaku {
	clear: both;
	width: calc(100% - 120px) !important;
	float: left;
}

.terveysasemahakusubmit {
	width: 100px !important;
	margin-left: 2% !important;
	padding: 7px 0 !important;
	float: left;
}

#terveysasemahakutulos {
	clear: both;
}

#terveysasemahakutulos .vastaus {
	margin-bottom: 20px;
	border-bottom: 1px solid black;
	padding-bottom: 10px;
}

#terveysasemahakutulos .vastaus .katu {
	text-transform: capitalize;
}

.terveysasemahakuohjehaku1 {
	margin-top: 40px;
}

nav .bp-med-w-100-50 {
	width: 100%;
}

nav .component {
	margin-top: 40px;
	margin-bottom: 40px;
}


/*
██       █████  ███████ ██   ██ ██    ██ ██████  ██
██      ██   ██ ██      ██  ██  ██    ██ ██   ██ ██
██      ███████ ███████ █████   ██    ██ ██████  ██
██      ██   ██      ██ ██  ██  ██    ██ ██   ██ ██
███████ ██   ██ ███████ ██   ██  ██████  ██   ██ ██
*/


.toimeentulolaskuri label {
	max-width: 50%;
	width: 50%;
}

.kotihoitolaskuriform {
	border: 1px solid #bababa;
	padding: 20px;
}

.kotihoitolaskuri label {
	display: block;
}


.toimeentulolaskuri input.form_input_text {
	max-width: 30%;
	margin-left: 20px;
	vertical-align: top;
}

.kotihoitolaskuri input.form_input_text {
	max-width: 60px;
	vertical-align: top;
	margin-top: 5px;
	margin-bottom: 5px;
}

.toimeentulolaskuri label .selite {
	font-weight: normal;
	font-size: 90%;
}

.toimeentulolaskuri .sarakeotsikko {
	margin-left: 20px;
	max-width: 20%;
	width: 100%;
	font-weight: bold;
}

.maksuprosentit {
	width: 100%;
}

.maksuprosentit th,
.maksuprosentit td {
	padding: 5px;
}

.maksuprosentit input {
	margin: 0;
}

.kotihoitolaskuri table {
	border: 0;
}

.kotihoitolaskuri table td {
	border-color: #fff;
	padding: 5px;
}


.kotihoitolaskuri .form_input_text {
	width: 400px;
}

.kotihoitolaskuri .aika input {
	margin-right: 5px;
}

.kotihoitolaskuri #hakupainike {
	margin-top: 20px;
}

@media (max-width: 768px) {
	.kotihoitolaskuri {
		font-size: 1.4em;
		margin: 40px 0 30px 0;
	}
	.kotihoitolaskuri table td {
		padding: 10px 0;
	}

	.kotihoitolaskuri .ajat {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
	}

	.kotihoitolaskuri td:first-child {
		text-align: right;
		font-weight: bold;
		width: 40%;
	}
	.kotihoitolaskuri td:last-child {
		align-items: center;
		width: 100%;
	}
	.kotihoitolaskuri td:last-child span {
		margin: 0 10px;
	}
	.kotihoitolaskuri+.formInput {
		width: 100%;
	}
	.kotihoitolaskuri+.formInput input {
		width: 50%;
		font-size: 1.2em;
	}
	.toimeentulolaskuri input.form_input_text,
	.kotihoitolaskuri input.form_input_text {
		max-width: 70% !important;
	}

	.kotihoitolaskuri .aika {
		display: flex;
	}

}


/* Laskuri päättyy */

.vammaispalvelunhaku .postinumero {
	background-color: #f1f7f8;
	float: left;
	width: 33%;
	border: 1px solid #e0edef;
	border-top: 1px solid #cfe3e6;
	border-left: 1px solid #cfe3e6;
	color: #444444 !important;
	height: 44px;
	margin-left: 10px;
	text-align: left;
	-moz-user-select: auto;
}
.vammaispalvelunhaku label.postinumero-label {
	float: left;
	font-weight: bold;
}

.vammaispalvelunhaku .postinumero:hover {
	background-color: #f1f7f8;
	color: #444444 !important;
}

.vammaispalvelunhaku .postinumero:focus {
	background-color: white;
	box-shadow: 0px 0px 5px 2px #b1dae0;
	border-color: #e0edef;
	color: #444444;
}

.vammaispalvelunhaku .hakunappi {
	float: left;
	width: 33%;
	margin-left: 20px;
	height: 46px;
}

#vammaispalvelunhakutxt2 {
	margin-top: 15px;
}

#componentsx.project-color-1 .component:first-child .grid-item-inner hgroup,
#components.project-color-1 .component:first-child .grid-item-inner hgroup {
	margin-left: -10%;
	background-color: #00bd9c;
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
	color: #fff;
	padding: 5px 20px;
}

#componentsx.project-color-2 .component:first-child .grid-item-inner hgroup,
#components.project-color-2 .component:first-child .grid-item-inner hgroup {
	margin-left: -10%;
	background-color: #e87e04;
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
	color: #fff;
	padding: 5px 20px;
}

#componentsx.project-color-3 .component:first-child .grid-item-inner hgroup,
#components.project-color-3 .component:first-child .grid-item-inner hgroup {
	margin-left: -10%;
	background-color: #39a7d7;
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
	color: #fff;
	padding: 5px 20px;
}

nav .nav-project-color-1 .icon,
nav.nav-project-color-1 a:hover,
#componentsx.project-color-1 a h1 .icon-arrow-right,
#componentsx.project-color-1 a,
#componentsx.project-color-1 a:hover,
#componentsx.project-color-1 .element-link a .icon-arrow-right,
#componentsx.project-color-1 .element-link .icon,
#componentsx.project-color-1 .icon-rss,
#components.project-color-1 a h1 .icon-arrow-right,
#components.project-color-1 a,
#components.project-color-1 a:hover,
#components.project-color-1 .element-link a .icon-arrow-right,
#components.project-color-1 .element-link .icon,
#components.project-color-1 .icon-rss,
.project-color-1 .paljeotsikko:hover h5,
.project-color-1 .paljeotsikko:hover i,
.nav-project-color-1 .paljeotsikko:hover h5,
.nav-project-color-1 .paljeotsikko:hover i,
#componentsx.project-color-1 .expand .icon-arrow-down,
.project-page-1 .expand .icon-arrow-down,
.nav-project-color-1 .component-rating .icon.active,
.nav-project-color-1 .component-rating .icon:hover:before,
.nav-project-color-1 .component-rating .icon:hover~.icon:before,
.nav-project-color-1 .component-rating.result .icon.active,
#componentsx.project-color-1 .component-rating .icon.active,
#componentsx.project-color-1 .component-rating .icon:hover:before,
#componentsx.project-color-1 .component-rating .icon:hover~.icon:before,
#componentsx.project-color-1 .component-rating.result .icon.active  {
	color: #00bd9c;
}

nav .nav-project-color-2 .icon,
nav.nav-project-color-2 a:hover,
#componentsx.project-color-2 a h1 .icon-arrow-right,
#componentsx.project-color-2 a,
#componentsx.project-color-2 a:hover,
#componentsx.project-color-2 .element-link a .icon-arrow-right,
#componentsx.project-color-2 .element-link .icon,
#componentsx.project-color-2 .icon-rss,
#components.project-color-2 a h1 .icon-arrow-right,
#components.project-color-2 a,
#components.project-color-2 a:hover,
#components.project-color-2 .element-link a .icon-arrow-right,
#components.project-color-2 .element-link .icon,
#components.project-color-2 .icon-rss,
.project-color-2 .paljeotsikko:hover h5,
.project-color-2 .paljeotsikko:hover i,
.nav-project-color-2 .paljeotsikko:hover h5,
.nav-project-color-2 .paljeotsikko:hover i,
#componentsx.project-color-2 .expand .icon-arrow-down,
.project-page-2 .expand .icon-arrow-down,
.nav-project-color-2 .component-rating .icon.active,
.nav-project-color-2 .component-rating .icon:hover:before,
.nav-project-color-2 .component-rating .icon:hover~.icon:before,
.nav-project-color-2 .component-rating.result .icon.active,
#componentsx.project-color-2 .component-rating .icon.active,
#componentsx.project-color-2 .component-rating .icon:hover:before,
#componentsx.project-color-2 .component-rating .icon:hover~.icon:before,
#componentsx.project-color-2 .component-rating.result .icon.active  {
	color: #e87e04;
}

nav .nav-project-color-3 .icon,
nav.nav-project-color-3 a:hover,
#componentsx.project-color-3 a h1 .icon-arrow-right,
#componentsx.project-color-3 a,
#componentsx.project-color-3 a:hover,
#componentsx.project-color-3 .element-link a .icon-arrow-right,
#componentsx.project-color-3 .element-link .icon,
#componentsx.project-color-3 .icon-rss,
#components.project-color-3 a h1 .icon-arrow-right,
#components.project-color-3 a,
#components.project-color-3 a:hover,
#components.project-color-3 .element-link a .icon-arrow-right,
#components.project-color-3 .element-link .icon,
#components.project-color-3 .icon-rss,
.project-color-3 .paljeotsikko:hover h5,
.project-color-3 .paljeotsikko:hover i,
.nav-project-color-3 .paljeotsikko:hover h5,
.nav-project-color-3 .paljeotsikko:hover i,
#componentsx.project-color-3 .expand .icon-arrow-down,
.project-page-3 .expand .icon-arrow-down,
.nav-project-color-3 .component-rating .icon.active,
.nav-project-color-3 .component-rating .icon:hover:before,
.nav-project-color-3 .component-rating .icon:hover~.icon:before,
.nav-project-color-3 .component-rating.result .icon.active,
#componentsx.project-color-3 .component-rating .icon.active,
#componentsx.project-color-3 .component-rating .icon:hover:before,
#componentsx.project-color-3 .component-rating .icon:hover~.icon:before,
#componentsx.project-color-3 .component-rating.result .icon.active  {
	color: #39a7d7;
}

#componentsx.project-color-1 .component-rating .inactive,
#componentsx.project-color-2 .component-rating .inactive,
#componentsx.project-color-3 .component-rating .inactive,
#components.project-color-1 .component-rating .inactive,
#components.project-color-2 .component-rating .inactive,
#components.project-color-3 .component-rating .inactive {
	color: #cfe3e6;
}

#somejako otsikko {
	font-size: 0.9em;
	line-height: 2;
}

#somejako a,
#somejako i {
	font-size: 36px;
	margin-right: 4px;
	color: #36363f;
	text-decoration: none;
}

@media (max-width: 530px) {
	#somejako a.whatsapp {
		display: inline;
	}
	#somejako a.whatsapp2 {
		display: none;
	}
}

@media (min-width: 531px) {
	#somejako a.whatsapp {
		display: none;
	}
	#somejako a.whatsapp2 {
		display: inline;
	}
}

#sahkopostinlahetys {
	display: none;
}

#sahkopostinlahetys .bg {
	position: fixed;
	background: rgba(256,256,256,0.5);
	z-index: 70;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

#sahkopostinlahetys .elementcontainer {
	outline: none;
}

#sahkopostinlahetys .elementcontainer #modal {
	background: #fff;
	border: solid 1px #ccc;
	box-shadow: 1px 1px 5px #777;
	display: block;
	max-height: 80%;
	outline: none;
	overflow: hidden;
	overflow-y: auto;
	padding: 20px;
	position: fixed;
	top: 40px;
	left: 20%;
	right: 20%;
	width: 60%;
	z-index: 71;
}

#sahkopostinlahetys .elementcontainer .lomakeotsikko {
	clear: both;
	overflow: hidden;
	display: block;
	width: 100%;
}

#sahkopostinlahetys .elementcontainer .lomakeotsikko>h1 {
	float: left;
}

#sahkopostinlahetys .elementcontainer .suljelomake,
#sahkopostinlahetys .elementcontainer .suljelomake:hover,
#sahkopostinlahetys .elementcontainer .suljelomake:visited {
	background-color: #d1443d;
	border-radius: 2px;
	border: solid 1px #a2241e;
	color: white;
	cursor: pointer;
	display: block;
	float: right;
	font-weight: bold;
	padding: 5px 10px;
	text-decoration: none;
}

#sahkopostinlahetys .elementcontainer .laheta {
	padding: 10px;
	background-color: #d1443d;
	float: right;
}

#sahkopostinlahetys .elementcontainer .laheta a,
#sahkopostinlahetys .elementcontainer .laheta a:hover,
#sahkopostinlahetys .elementcontainer .laheta a:active,
#sahkopostinlahetys .elementcontainer .laheta a:visited {
	color: #fff;
	text-decoration: none;
}

#sahkopostinlahetys .elementcontainer .lahetauusi {
	background-color: #33485f;
	padding: 6px 10px;
	margin: 30% auto 10% auto;
	width: 160px;
	float: none;
	display: block;
	clear: both;
	text-align: center;
}

#kiitosviesti h1 {
	width: calc(100% - 40px);
}

@media (max-width: 530px) {
	#sahkopostinlahetys .elementcontainer #modal {
		width: 85%;
		max-height: 80%;
		display: block;
		background: #fff;
		border: solid 1px #ccc;
		box-shadow: 1px 1px 5px #777;
		overflow-y: auto;
		left: 2.5%;
		right: 2.5%;
		top: 2.5%;
	}
}


}
#viestinlahetys input[type=text],
#viestinlahetys input[type=email],
#viestinlahetys input[type=url],
#viestinlahetys input[type=submit],
#viestinlahetys textarea {
	color: #447588;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fff;
	background-color: #f1f7f8;
	border-radius: 4px;
	border: 0;
	border: 1px solid #e0edef;
	border-top: 1px solid #cfe3e6;
	border-left: 1px solid #cfe3e6;
	line-height: 1.3;
	margin: 0 0 1.57143em;
	outline: 0;
	padding: 0.39286em 0;
	width: 100%;
	text-indent: 6px;
}

.nav-project-color-1 .nav-secondary-inner,
.nav-project-color-2 .nav-secondary-inner,
.nav-project-color-3 .nav-secondary-inner {
	padding : 0;
}

.nav-project-color-1 .nav-secondary-inner .grid-item-inner,
.nav-project-color-2 .nav-secondary-inner .grid-item-inner,
.nav-project-color-3 .nav-secondary-inner .grid-item-inner {
	padding-top: 3em;
}

.nav-project-color-1 .nav-secondary-inner .grid-item-inner,
.nav-project-color-2 .nav-secondary-inner .grid-item-inner,
.nav-project-color-3 .nav-secondary-inner .grid-item-inner {
		border-right : 0;
}

.nav-project-color-1 .component .element-link a {
	color: #00bd9c;
}

.nav-project-color-2 .component .element-link a {
	color: #e87e04;
}

.nav-project-color-3 .component .element-link a {
	color: #39a7d7;
}

.nav-project-color-1  .grid-item-inner .grid-item-inner,
.nav-project-color-2  .grid-item-inner .grid-item-inner,
.nav-project-color-3  .grid-item-inner .grid-item-inner {
	padding: 10px 0;
}

.nav-project-color-1  .component,
.nav-project-color-2  .component,
.nav-project-color-3  .component  {
	margin-top: 0;
	margin-bottom: 0;
}


.nav-project-color-1 .element-link .attachmentdescription,
.nav-project-color-2 .element-link .attachmentdescription,
.nav-project-color-3 .element-link .attachmentdescription {
    display: block;
    font-size: 1em;
    margin: 2px 0 0 20px;
}

.nav-project-color-1 .nav-secondary,
.nav-project-color-2 .nav-secondary,
.nav-project-color-3 .nav-secondary {
	margin: 3em 8% 3em;
 }

.visible-m .grid-item-inner {
	background-color: #f8fbfb;
	padding-top: 0;
}

@media all and (max-width: 63em) {
	.visible-m	{
		display: none;
	}

	.visible-s .component {
		background-color: #f1f7f8;
	}

}


@media all and (max-width: 47em) {
	.emosivu {
		display: none;
	}

	#footeri.tapahtumalistaus {
		margin-top: 45px;
	}

}

@media all and (min-width: 64em) {
	.visible-s	{
		display: none;
	}
}

@media all and (min-width: 48em) {
	.visible-s	{
		width: 65%;
	}
}

.main-content.righttoleft .component .grid-item-inner,
.main-content.righttoleft .component .grid-item-inner .textarea {
	text-align: right;
	direction: rtl;
}

.blogikuva190  {
	margin-top: 10px;
}


 #vvchat div  div:nth-child(2) div  div  div:nth-child(2) svg  {
	fill:none !important;
	background-image: url("/images/k_suomi.png");
}

.paljeotsikko {
	background-color: #e0edef;
	border: 1px solid #cfe3e6;
	border-radius: 4px;
	padding: 10px 6%;
	margin: 10px 0;
	cursor: pointer;
	width: 100%;
	text-align: left;
}

.paljeotsikko:hover  h3,
.paljeotsikko:hover  i {
	color: #d1443d;
}

.paljeotsikko.auki {
	background-color: #BED9DE;
	display: none;
}

.paljeotsikko h3 {
	margin-bottom: 0;
	display: inline;
	width:90%;
	float:left;
	font-size: 1.21429em;
    line-height: 1.5;
}

.paljeotsikko  i {
	font-weight: bold;
	float: right;
    font-size: 1.21429em;
    line-height: 1.5;
}

.tapahtumahaku .tapahtumalajit .tapahtumalaji {
	margin-bottom: 5px;
}

.tapahtumahaku .tapahtumalajit label,
.tapahtumahaku #maksutonlabel {
	display: inline;
	font-weight: 400;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
}

.kotihoidonhaku .bold {
	font-weight: bold;
}

#common_errormessage {
	padding-bottom: 15px;
}

.form_error_message {
	color: #d1443d;
}

.sr-only, .ui-datepicker .ui-datepicker-buttonpane button{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
}

input[type=button]:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=submit]:focus,
textarea:focus,
a:focus,
a:focus h1,
a:focus h2,
a:focus h3,
a:focus .list-ingress,
a:focus .footer-heading,
button:focus,
[aria-role="button"]:focus {
	outline: solid 3px rgba(33, 150, 243, 0.6) !important;
	z-index: 2 !important;
}
/* Projeckt page nav focus fix */
.nav-secondary--wide a:focus {
	box-shadow: inset 0px 0px 0px 3px rgba(33, 150, 243, 0.6);
}
/* one outline in listings (not ie)*/
@supports not (-ms-high-contrast: none) {
	.component-event a:focus,
	.tiedotenosto a:focus,
	.component-event a:focus h1,
	.component-event a:focus h3,
	.tiedotenosto a:focus h1,
	.tiedotenosto a:focus h3,
	.list article a:focus,
	.list article a:focus .list-ingress,
	.list article a:focus h1,
	.list article a:focus h2,
	.list article a:focus h3 {
		outline: none !important;
	}
	.component-event:focus-within,
	.tiedotenosto:focus-within,
	.list article:focus-within {
		outline: solid 3px rgba(33, 150, 243, 0.6) !important;
	}
}
/* Edge */
@supports (-ms-ime-align: auto) {
	.component-event a:focus,
	.tiedotenosto a:focus,
	.component-event a:focus h1,
	.component-event a:focus h3,
	.tiedotenosto a:focus h1,
	.tiedotenosto a:focus h3,
	.list article a:focus,
	.list article a:focus .list-ingress,
	.list article a:focus h1,
	.list article a:focus h2,
	.list article a:focus h3 {
		outline: solid 3px rgba(33, 150, 243, 0.6) !important;
	}
	.component-event:focus-within,
	.tiedotenosto:focus-within,
	.list article:focus-within {
		outline: none;
	}
}
.header-toggle-btn,
.header-toggle-btn:focus {
	z-index: 25 !important;
}
a.header-logo:focus h1 {
	outline: none !important;
}
.formInput input[type=submit]:focus {
	background-color: #595968;
}
.nav-secondary {
	overflow: visible;
}

.nav li {
	overflow: visible;
}

.nav-secondary-section--project .nav-secondary,
.nav-secondary-section--project .nav-secondary li {
	overflow: hidden;
}

.bp-med-w-35 .nav a {
	min-height: 29px;
	padding: 6px 64px 6px 6%;
	display: flex;
	align-items: center;
	width: calc(100% - 45px);
}

.nav .btn-nav-toggle {
	position: absolute;
	right: 0;
	top: 0;
	border: 0 !important;
	height: 41px;
	width: 45px;
	background: transparent;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav .icon {
	width: 100%;
	height: 100%;
}

.nav.nav-primary .icon {
	width: 45px;
	height: 41px;
}

#header-nav-toggle:focus,
#header-search-toggle:focus {
	z-index: 25 !important;
}

.nav-secondary ul {
	width: 100%;
}

.nav-secondary li {
	display: flex;
	flex-wrap: wrap;
}

/*
.nav-secondary-section--project .nav-secondary li {
	display: inline;
}	

*/

.nav-secondary .btn-nav-toggle {
	position: relative;
}

.nav-secondary a::before,
.nav-secondary a::after {
	content: none;
}

.nav-secondary a {
	flex: 0 0 auto;
	width: calc(100% - 45px);
	border-right: 1px solid #e0edef;
	box-sizing: border-box;
	min-height: 41px !important;
}

.nav-secondary .btn-nav-toggle {
	position: relative;
	flex: 0 0 45px;

}

.nav-secondary ul {
	flex: 0 0 100%;
}


.nav-secondary ul ul a {
	border-color: #e0edef;
}

.nav-secondary ul ul ul a {
	border-color: #cfe3e6;
}

.nav-secondary ul ul ul ul a {
	border-color: #bed9de;
}

.nav-secondary ul ul ul ul ul a {
	border-color: #aed0d5;
}

.nav-secondary ul ul ul ul ul ul a {
	border-color: #9dc6cc;
}

button.expand {
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
}

.visible-xs {
	display: block !important;
}

.hidden-xs {
	display: none !important;
}

.text-sizing .text-sizing-small-letter,
.text-sizing .text-sizing-large-letter {
	cursor: pointer;
	margin-left: 5px;
	text-transform: uppercase;
	padding: 0;
	border: 0;
	box-shadow: none;
	font-weight: inherit;
	background: transparent;
}

@media (max-width: 767px) {
	.header-primary:not(.nav-open) .header-nav-section {
		visibility: hidden;
		opacity: 0;
	}
	.header-primary:not(.search-open) .search-primary {
		visibility: hidden;
		opacity: 0;
	}
	.header-nav-section {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
			-ms-flex-direction: column-reverse;
				flex-direction: column-reverse;
	}
}

@media (min-width: 768px) {
	.hidden-sm {
		display: none !important;
	}
	.visible-sm {
		display: block !important;
	}
	.nav-secondary-section--project .nav-secondary li {
		display: inline;
	}
	
	.nav-secondary a {
		width: auto;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.nav-primary {
		padding-top: 60px;
	}
}


.uutiskirje .form_required_field {
	font-size: 150%;
}

.form_required_field2 {
	font-size: 150%;
	color: #FF6666;
	margin: 0 5px 0;
}

.ylinpalsta .grid-item-inner {

	padding-left: 0;
	padding-right: 0;	
}

.ylinpalsta .grid-item-inner .grid-item-inner {
	padding-left: 8%;
	padding-right: 8%;
	border-right: none;
}

.ylinpalsta .bp-med-w-100-50 {
	width: 100%;
}	

.sr-only.sr-only-focusable:active,
.sr-only.sr-only-focusable:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
}

.murupolku {
	list-style: none;
	display: block;
	align-items: center;
	padding: 0;
	margin: 4px 0;
	width: auto;
	color: #222;
}

.murupolku li {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline;
/*	flex: 0 1 auto; */
	border-bottom: 0;
	margin-right: 4px;
}

.murupolku li::before, .murupolku li::after {
	content: none !important;
}

.murupolku li:not(:first-child)::before {
	content: "/ " !important;
	display: inline;
	color: #d1443d;
	margin: 0 2px;
}

.maxleveys {
	width: 100%;
}

.paataso #UutiskeskusEditoricontainer .grid-item-inner  {
	padding-left: 8%;
	padding-right: 8%;
}	

.AjankohtaistaHakudiv {
	background-color: #595968;
	width: 25%;
}	

.etusivupaakuva {
	border-top: 4px solid #36363f;
	border-bottom: 4px solid #36363f;
	border-radius: 0;
	float: left;
}

.container.etusivu {
	border-top: none;
}
/* Hakutulosjako */
.hakutulostenmaara {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
.hakutulostenmaara li {
	display: inline-block;
}
.hakutulosjako .btn--secondary {
	margin-bottom: 0.57143em;
}
.hakutulostenmaara li.btn a {
	color: #ffffff;
}
/* Hakutulos tabit */
.hakutab {
	margin-bottom: 1.57143em;
	border-bottom: solid 1px #d1443d;
	display: flex;
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}
a.tablink,
.tablink {
	border: solid 1px #d1443c;
	border-bottom: none;
    border-radius: 4px 4px 0 0;
    border-color: #d1443c;
    font-weight: bold;
	transition: 0.3s;
	background: #ffffff;
	max-width: 350px;
	margin-right: 3px;
}

.tablink.active,
.tablink:hover,
a.tablink.active,
a.tablink:hover {
	background: #d1443c;
    color: #fff;
}
a.tablink,
.tablink a {
	color: #000;
	padding: 5px 10px;
    display: block;
}
.tablink:hover a,
.tablink.active a {
	 color: #fff;
}
/* Noscript */
.noscript {
	background: #fff3cd;
	color: #856404;
	padding: 16px;
	font-size: 16px;
	box-sizing: border-box;
	display: block;
	position: relative;
	height: auto;
	width: auto;
}
.noscript .fa {
	margin-right: 8px;
}

/* Header muutokset */
@media (max-width: 47.9375em) {
/* 	body:not(.EDIT) .main.front-page, body:not(.EDIT) .main.single-page {
			 margin-top: 58px;  
	}
	.header-primary
	*/
	.header-bar {
		top: initial;
		position: fixed;
		width: 100%;
	}
	.search-primary,
	.header-right-section {
		position: fixed;
		right: 0;
		z-index: 11;
	}

	.header-primary.hide-black .nav-primary-top {
			display: none;
	}
	.header-primary.hide-black .header-nav-section {
		border-bottom: 4px solid #e0edef;
	}
	body:not(.EDIT) .header-primary.nav-open + .main.front-page,
	body:not(.EDIT) .header-primary.nav-open + .main.single-page  {
		margin-top: 0;
	} 
	/* body:not(.EDIT) .header-primary.nav-open.hide-black + .main {
			margin-top: 380px;
	}
	body:not(.EDIT).large-font-size .header-primary.nav-open.hide-black + .main {
			margin-top: 420px;
	} */
	.header-primary.nav-open.hide-black  {
		height: 370px;
	}
	.large-font-size .header-primary.nav-open.hide-black  {
		height: 414px;
	}
	body:not(.EDIT) .header-primary + .main.front-page,
	body:not(.EDIT) .header-primary + .main.project-page-1,
	body:not(.EDIT) .header-primary + .main.project-page-2,
	body:not(.EDIT) .header-primary + .main.project-page-3,
	body:not(.EDIT) .header-primary + .main.single-page  {
		margin-top: 56px;
	}
	body:not(.EDIT) .header-primary.search-open + .main {
			margin-top: 115px;
	}
	/* Project pages */
	body:not(.EDIT) .header-primary.nav-open + .main.project-page-1,
	body:not(.EDIT) .header-primary.nav-open + .main.project-page-2,
	body:not(.EDIT) .header-primary.nav-open + .main.project-page-3,
	body:not(.EDIT) .header-primary.search-open + .main.project-page-1,
	body:not(.EDIT) .header-primary.search-open + .main.project-page-2,
	body:not(.EDIT) .header-primary.search-open + .main.project-page-3 {
		margin-top: 0;
	}
	/*
	body:not(.EDIT) .header-primary.nav-open.hide-black.search-open + .main {
			margin-top: 438px;
	}  
	body:not(.EDIT) .header-primary.nav-open + .main {
			margin-top: 586px;
	}  
	body:not(.EDIT) .header-primary.nav-open.search-open + .main {
			margin-top: 647px;
	}   */
}
@media (min-width: 30em) {
	/* .header-primary, */
	.header-bar {
		left: 44px;
		width: calc(100% - 44px);
	}
	.search-primary {
		right: initial;
		width: calc(100% - 77px);
		left: 30px;
	}
}
@media (min-width: 48em) {
	/* .header-primary,
	.search-primary,*/
	.header-bar {
		left: 0;
		width: 141px;
	} 
	.search-primary {
		left: auto;
		width: 230px;
		right: 0px;

	}
}

.rns-reactions {
	font-family: "Open Sans", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;	
}	

.rsbtn .rsbtn_tooltoggle {
	display: none !important;
}




.cookiehuomautustxtlukio {
  display: none;
  padding: 20px;
  background-color: rgba(241, 241, 241, 0.9);
  text-align: center;
}

.cookiehuomautustxtlukio.visible {
  display: block;
}

.cookiehuomautustxtlukio a:after {
  content: "\f0da";
  padding-left: 5px;
  font-family: fontawesome;
  font-size: 18px;
  height: 1.5px;
  vertical-align: middle;
}

.cookiehuomautustxtlukio a:hover {
  text-decoration: none;
  color: #000000;
  border-bottom: solid 1px #000000 !important;
}

.cookiehuomautustxtlukio button {
  margin-left: 100px;
  background: #333333;
  color: #ffffff;
  line-height: 1.5;
  border: none;
}

.pager-ajankohtaistapaalista h2 {
	line-height: 1.5;
}	

#footeri .footer-heading {
	font-size: 1.21429em;    
}	

.korostuslaatikko.virhe {
	background-color: #fff;
	border-color: red;
}

.primary-heading.ajankohtaisryhma {
    display: flex;
    justify-content: space-between;
}

.ajankohtaisryhma h1 {
	display: inline-block;
}

.ajankohtaisryhma .rsslink {
	display: inline-block;
	float: right;	
	align-self: center;
}



.nav-secondary-section--project .nav-secondary li {display: flex;}  .nav-secondary a {flex: 0 0 auto;width: calc(100% - 45px);}@media (min-width: 768px) {.nav-secondary-section--project .nav-secondary li {display: inline;} .nav-secondary a {width: auto;} }