﻿@media (max-width: 1200px) {
	/* QUICK SEARCH */
	.quick-search-results .result {
		width: 48%;
	}
	.rslt-info {
		width: 100%;
		max-width: 260px;
	}
}
@media (max-width: 1024px) {
	/* STRUCTURE */
	.section {
		width: 100%;
		overflow: hidden;
	}
}
@media (max-width: 996px) {
	html,
	body {
		font-size: 14px;
		line-height: 16px;
		background-color: #EEE;
	}
	h1, h2, h3, h4, h5, h6, p {
		margin: 15px 0;
	}
	h1 {
		font-size: 70px;
		line-height: 71px;
	}
	h2 {
		font-size: 50px;
		line-height: 51px;
	}
	h3 {
		font-size: 28px;
		line-height: 29px;
	}
	h4 {
		font-size: 18px;
		font-weight: 300;
		line-height: 19px;
	}
	h5 {
		font-size: 14px;
		line-height: 13px;
	}
	p {
		font-size: 14px;
		line-height: 20px;
	}
	p.ingress {
		font-size: 16px;
		line-height: 20px;
	}
	/* STRUCTURE */
	.section.meta {
		height: 57px;
		margin-bottom: 0;
		padding: 0;
		float: left;
	}
	.page {
		position: relative;
		width: 100%;
		margin: 0;
		float: left;
		overflow: hidden;
		background: #FFF;
	}
	.subpage .header,
	.subpage .article {
		background-color: #FFF;
	}
	.sub-header .section {
		background-color: transparent;
	}
	.cols.section,
	.col .section {
		display: block;
		width: 96%;
		margin: 0 2%;
	}
	.sub-content {
		width: auto;
	}
	.sub-content .event-search {
		padding: 0;
	}
	.sub-imago {
		margin: 0;
	}
	.col,
	.mini-cards .col {
		height: auto;
		margin-bottom: 0;
	}
	.sub-content .mini-cards .col {
		min-height: 420px;
		max-height: 420px;
	}
	.sub-content .mini-cards {
		border-spacing: 5px;
	}
	.quarter,
	.third {
		width: 50%;
	}
	.mini-cards.inline .quarter {
		width: 21%;
		margin: 0 2%;
		clear: none;
	}
	.inline.mini-cards .col {
		width: 46%;
		margin: 0 2% 15px 2%;
	}
	.cols.split .third {
		width: 33%;
		margin: 0;
	}
	.half,
	.two-thirds,
	.three-quarters,
	.split .two-thirds {
		width: auto;
	}
	.third-left {
		left: 0;
	}
	.article.item .quarter,
	.article.item .three-quarters {
		display: block;
		width: 100%;
		float: none;
	}
	.col.sub-content.with-subnav,
	.col.sub-nav {
		width: 100%;
		float: none;
	}
	.col.sub-nav .nav.sub {
		display: none;
	}
	.sub-header .content {
		padding: 0 2% 10px 2%;
	}
	.tight-mobile .content {
		padding: 0 10px 10px 10px;
	}
	.mini-cards .content {
		min-height: 1px;
	}
	.promo-img.large {
		margin-top: 20px;
	}
	.mini-cards .mini-card-title {
		width: 100%;
		overflow: hidden;
		color: #FFF;
		white-space: nowrap;
		text-overflow: ellipsis;
		background: #000;
	}
	.mini-cards.inline .content {
		min-height: 80px;
	}
	.split .topic-title {
		padding: 7px 15px;
	}
	.col.date {
		width: 20%;
	}
	.col.category,
	.col.srchtxt {
		width: 24%;
	}
	.sub-header {
		background: #91BF22 !important;
	} 
	.sub-header h1 {
		margin: 10px 0 5px 0;
		font-size: 30px;
		line-height: 31px;
		border: none;
	}
	.sub-header a,
	.sub-header h1 a {
		color: #FFF !important;
	}
	.yahoo {
		position: static;
		padding-bottom: 5px;
	}
	.yahoo .div {
		background-position: -234px -103px;
	}
	footer {
		background-color: #000;
	}
	.footer {
		min-height: 1px;
		background-image: none;
	}
	/* ELEVATOR */
	.content.elevator {
		padding: 0 15px 15px 15px;
	}
	/* NAVIGATION */
	.top-nav-mobi {
		display: block;
		position: absolute;
		z-index: 99999;
		top: 0;
		right: 0;
		width: 51px;
		height: 57px;
		background: #000 url(../images/gfx.png) no-repeat -129px -62px;
		overflow: visible;
		transition: background-color 300ms;
		cursor: pointer;
	}
	.top-nav-mobi.active {
		background-color: #004D60;
	}
	.mobile-only {
		display: block !important;
	}
	.top-nav-mobi-menu {
		position: static;
		margin: 0 0 10px 0;
		padding: 10px 2%;
		width: 96%;
		height: auto;
		overflow: hidden;
		background-color: #004D60;
		color: #FFF;
		text-align: center;
		border-radius: 0 0 3px 3px;
	}
	.top-nav-mobi-menu ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.top-nav-mobi-menu.active,
	.top-nav-mobi-menu ul.active {
		display: block;
	}
	.top-nav-mobi-menu li {
		display: block;
		position: relative;
		width: 100% !important;
		margin: 0;
		padding: 0;
		float: left;
		overflow: hidden;
		font-size: 20px;
		line-height: 1.0em;
		text-align: left;
		list-style-type: none;
	}
	.top-nav-mobi-menu ul li {
		font-size: 0.8em;
		line-height: 1.1em;
	}
	.top-nav-mobi-menu ul ul li {
		font-size: 1.0em;
	}
	.top-nav-mobi-menu a {
		display: block;
		width: 83%;
		min-height: 1px;
		margin-top: 1px;
		padding: 13px 14% 13px 3%;
		overflow: hidden;
		border: none;
		color: #FFF;
		background: #395F6F;
		border-radius: 3px;
		transition: background-color 300ms, opacity 300ms;
		opacity: 0.8;
		text-overflow: ellipsis;
	}
	.top-nav-mobi-menu a:hover,
	.top-nav-mobi-menu .open a {
		color: #000 !important;
		background: #A2D926 !important;
		opacity: 1;
	}
	.top-nav-mobi-menu ul a:hover,
	.top-nav-mobi-menu ul .open a {
		color: #FFF !important;
		background: #395F6F !important;
		opacity: 1;
	}
	.top-nav-mobi-menu .icon {
		position: absolute;
		z-index: 1;
		top: 5px;
		right: 5px;
		display: inline-block;
		width: 35px;
		height: 35px;
		background: #FFF;
		font-size: 30px;
		font-weight: bold;
		line-height: 35px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		color: #395F6F;
		opacity: 0.5;
		border-radius: 3px;
		transition: opacity 300ms;
	}
	.top-nav-mobi-menu .icon:hover {
		opacity: 1;
	}
	.top-nav-mobi-menu .icon:after {
		content: "+";
	}
	.top-nav-mobi-menu .icon.active:after {
		content: "-";
	}
	.top-nav-mobi-ldr {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 45px;
		height: 45px;
		border-radius: 3px;
		background: #234D5F url(/images/ajax-loader-mobi.gif) no-repeat center center;
	}
	.top-nav-mobi-menu .top-nav-mobi-ldr {
		top: 5px;
		right: 5px;
		width: 35px;
		height: 35px;
	}
	.sub-nav-col nav {
		display: none;
	}
	.nav.bottom {
		margin: 15px auto;
	}
	.nav.bottom ul {
		display: block;
	}
	.nav.bottom li {
		display: block;
		padding: 0;
		float: none;
		text-align: center;
	}
	.nav.bottom ul ul {
		display: none;
	}
	.bottom-meta li {
		display: block;
		float: none;
		text-align: center;
		font-size: 18px;
		line-height: 26px;
		border: none;
	}
	.nav.top {
		position: absolute;
		top: 0;
		right: 0;
		padding: 0;
	}
	.nav.top ul {
		display: none;
	}
	.meta-links {
		position: static;
		background: #395F6F;
	}
	.section.meta-links-content {
		text-align: center;
	}
	.meta-block {
		display: inline-block;
		margin: 10px 2%;
		float: none;
	}
	.meta-block.subscribe {
		display: none;
	}
	.meta-block.lang-menu {
		width: auto;
		height: auto;
	}
	.lang-select {
		display: inline;
		position: static;
		width: auto;
		border: none;
		background: transparent;
	}
	.meta-block:last-child {
		width: 90%;
	}
	.qsrch {
		width: 98%;
		padding: 5px 1%;
		background: #FFF;
	}
	input[type='text'].qsrch-txt {
		width: 80% !important;
		font-size: 1.4em;
		padding: 5px;
	}
	input.qsrch-btn,
	input.qsrch-btn:focus,
	input.qsrch-btn:hover {
		float: right;
	}
	.meta-link,
	.meta-link:hover,
	.meta-block.lang-menu a,
	.meta-block.lang-menu a.active,
	.lang-select a {
		display: inline-block ;
		margin: 5px;
		padding: 0;
		border-width: 5px;
	}
	.lang-select {
		display: inline !important;
	}
	.lang-select a {
		border: solid 5px #000;
		background: #000;
		border-radius: 4px;
	}
	.lang-select a:hover {
		border-color: #004D60;
		background-color: #004D60;
	}
	.lang-menu a .icon {
		display: none;
	}
	.meta-link.lang.active {
		border-color: #FFF;
	}
	.subscribe-form {
		display: block !important;
		position: static;
		width: 90%;
		margin: 0 5%;
		font-size: 1em;
		color: #FFF;
		border: none;
		background: #FFF;
		box-shadow: none;
	}
	.subscribe-form strong {
		padding: 5px 0;
		color: #004D60;
		border: none;
		background: transparent;
	}
	.subscribe-form p {
		padding: 0 5px 5px 5px;
	}
	.subscribe-form label {
		display: none;
	}
	.subscribe-form input[type='text'] {
		width: 74%;
		margin: 0;
		padding: 10px 1%;
		font-size: 1em;
	}
	.subscribe-form input[type='submit'] {
		width: 22%;
		padding: 12px 0;
		font-size: 1em;
	}
	.nav.bottom li {
		font-size: 18px;
		line-height: 26px;
	}
	.logo {
		margin-top: 10px;
		margin-left: 2%;
	}
	/* QUICK SEARCH */
	.quick-search-results {
		display: none !important;
	}
	.quick-search-results.mobile {
		display: block !important;
		width: 100%;
	}
	.quick-search-results.mobile .rslt-image {
		width: 50%;
	}
	.quick-search-results .rslt-text {
		left: 100%;
		width: 100%;
	}
	/* BLOG */
	.blog-list .col {
		width: 47.5%;
		height: 300px;
		margin: 0 1% 25px 1%;
	}
	/* MISC */
	.comps {
		position: relative;
		top: 0;
		left: 0; 
		width: 100%;
		overflow: hidden;
		border-radius: 4px;
	}
	.comps-list {
		height: 400px;
		margin: 0 0 5px 0;
	}
	.comps-list.cols {
		display: table;
		text-align: left;
	}
	.comps-list .col {
		display: table-cell;
	}
	.comps-list .third {
		width: 33%;
	}
	.comps-list .two-thirds {
		width: 66%;
	}
	.comps-list h5 {
		font-size: 1.4em;
	}
	.comps-list p {
		font-size: 1.2em;
	}
}
@media (max-width: 800px) {
	body {
		background: #DDD;
	}
	h2 {
		font-size: 40px;
		line-height: 41px;
	}
	/* FORM */
	input[type='text'],
	input[type='password'],
	select,
	textarea {
		width: 90%;
		padding: 10px 5%;
	}
	/* STRUCTURE */
	.document {
		float: left;
	}
	.header {
		display: inline-block;
		position: relative;
		width: 100%;
		overflow: visible;
	}
	footer {
		background: #000;
	}
	/* SECTION AND CONTENT */
	.section.nav.top,
	.section .section,
	.col .section {
		width: 100%;
		margin: 0;
	}
	.cols,
	.list-row {
		display: block;
	}
	.quarter,
	.split .o.quarter {
		display: inline-block;
		float: left;
		width: 47%;
	}
	.promo {
		display: table;
	}
	.promo .col.half,
	.promo .col.quarter {
		display: table-cell;
		float: none;
	}
	.col.third,
	.split .col.third {
		display: inline-block;
		width: 100%;
	}
	.split.some-teasers .third {
		display: block;
		max-width: 300px;
		margin: 10px auto 0 auto;
		float: none;
	}
	.list-col.two-thirds,
	.list-col.third {
		display: inline-block;
		float: left;
		width: 100%;
	}
	.list-col.list-image,
	.list-col.list-text {
		width: 48%;
	}
	.list-col.list-image {
		margin-right: 2%;
		height: 200px;
	}
	.list-col .content,
	.list-col .content.double-margin {
		padding: 0;
	}
	.mini-cards.inline .quarter {
		width: 46%;
	}
	.mini-cards .content {
		min-height: 1px;
	}
	.image {
		width: 100%;
		background: none !important;
	}
	.event-search {
		padding-bottom: 20px;
	}
	.col.srch-date,
	.col.srch-area,
	.col.srch-event, 
	.col.srch-category,
	.col.srch-txt {
		display: inline-block;
		width: 50%;
		float: left;
	}
	.col.srch-area select {
		width: 100% !important;
	}
	.col.srch-btn {
		display: inline-block;
		width: 100%;
		text-align: right;
	}
	.sub-content {
		display: block;
		width: 100%;
	}
	.split .content {
		padding-right: 10px;
		padding-left: 10px;
	}
	.teaser {
		margin-bottom: 15px;
	}
	.split.imago-cols {
		display: table;
	}
	.split.imago-cols .col.two-thirds,
	.split.imago-cols .col.third {
		display: table-cell;
		width: 66%;
		margin: 0;
	}
	 .split.imago-cols .thirds {
		width: 33%;
	}
	.imago-cols h1 {
		margin: 20px 0;
		font-size: 30px;
		line-height: 31px;
	}
	/* ELEVATOR */
	.imago-content .split .col.third {
		width: 50%;
		margin-right: 50%;
		margin-bottom: 20px;
	}
	.split .topic-title {
		position: relative;
		left: 100%;
	}
	.promo-cards .topic-title {
		left: 0;
	}
	.content.elevator {
		position: relative;
		top: 0 !important;
		left: 100%;
		min-height: 120px;
		border: none;
		overflow: hidden;
	}
	.content.elevator .handle,
	.content.elevator p {
		display: none;
	}
	/* IMAGO AND SLIDESHOW */
	.imago .slideshow {
		padding: 40px 0;
	}
	.slide h1, .slide h2 {
		font-size: 30px;
		line-height: 34px;
	}
	.slide p {
		font-size: 18px;
		line-height: 22px;
	}
	/* BACKGROUNDS */
	.bg-image img {
		width: auto;
	}
	/* BLOG */
	.blog-list .col {
		width: 97.5%;
		height: auto;
		margin: 0 1% 25px 1%;
	}
	.captcha-img {
		width: 40%;
		text-align: center;
	}
	.captcha-info {
		width: 40%;
	}
	/* MISC */
	.map-frame {
		margin-top: 20px;
	}
	iframe.promo {
		position: static;
		min-height: 250px;
		float: left;
	}
	/* QUICK SEARCH */
	.quick-search-results .rslts-info {
		width: 90%;
		padding: 0 5%;
		text-align: left;
	}
	/* BLOG */
	.blog-thumb-frame img {
		max-width: 100%;
	}
	.blog-image-frame {
		display: block;
		width: 100%;
		float: none;
		background: none;
		text-align: center;
	}
	.blog-image-frame img {
		margin: 0 auto;
		border: solid 3px #DDD;
		border-radius: 4px;
	}
	
	/* Suosittelen saloa -kehys */
	.suosittelen-saloa-frame .tintup {
		height: 550px;
	}
	/* MISC */
	.promo-img.small {
		padding-top: 200px;
	}
	p.share-bar {
		width: 90%;
		padding: 0 5%;
		float: left;
	}
	.page.suosittelen-saloa footer {
		display: none;
	}
}

@media (max-width: 630px) {
	h2 {
		font-size: 30px;
		line-height: 31px;
	}
	/* STRUCTURE */
	.col.quarter,
	.col.third,
	.split .col.third {
		display: block;
		width: 100%;
		margin-right: auto;
		margin-left: auto;
	}
	.sub-content .mini-cards  .col {
		display: block;
		width: 100%;
		float: none;
	}

	.sub-content .mini-card-image,
	.sub-content .mini-card-text {
		width: 46%;
		margin: 0;
		padding: 10px 2%;
		float: left;
	}
	.sub-content .mini-cards .col {
		min-height: 1px;
		max-height: none;
	}
	.promo .col.half,
	.promo .col.quarter {
		width: 50%;
	}
	/* SECTION AND CONTENT */
	.sub-imago .section {
		height: 250px;
	}
	/* BACKGROUNDS */
	.mini-lifts .bg-image,
	.mini-cards .bg-image {
		height: 200px;
	}
	/* ELEVATOR */
	.imago-content .split .col.third {
		margin-bottom: 10px;
	}
	/* MINI CARDS */
	.event-card .col.two-thirds,
	.event-card .col.third {
		width: 100%;
		margin: 0;
	}
	/* QUICK SEARCH */
	.quick-search-results .result,
	.quick-search-results.mobile .result {
		width: 90%;
		margin-right: 5%;
		margin-left: 5%;
	}
	/* NEWSLETTER */
	.newsletter table,
	.newsletter td {
		width: auto !important;
		height: auto !important;
	}
	.newsletter table table td {
		width: 10% !important;
	}
	.newsletter table table td:first-child {
		width: 45% !important;
	}
	.newsletter table table td:last-child {
		width: 45% !important;
	}
	.newsletter img {
		width: 100% !important;
		height: auto !important;
	}
	/* BLOGS */
	.captcha-img {
		width: 50%;
		text-align: center;
	}
	.captcha-info {
		width: 40%;
	}
	/* MISC */
	.more,
	.more.medium {
		width: 39px;
		height: 39px;
		background-position: -61px -37px;
	}
	.more:hover {
		background-position: -61px -115px;
	}
	.no-mobile {
		display: none;
	}
	.mobile-only {
		display: block;
	}
}

@media (max-width: 480px) {
	/* STRUCTURE */
	.list-col.list-image,
	.list-col.list-text {
		width: 100%;
	}
	.list-col.list-image {
		height: 140px;
		margin: 0 0 20px 0;
	}
	.promo .col.quarter {
		display: none;
	}
	/* BLOG */
	.blog-all-blogs {
		text-align: center;
	}
}

@media (max-width: 340px) {
	/* STRUCTURE */
	.header,
	.quarter,
	.third,
	.split .third.col,
	.two-thirds,
	.three-quarters {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
	.sub-imago .section {
		height: 200px;
	}
	.split .quarter,
	.split:nth-child(2n+2).quarter {
		width: 92%;
		margin-right: 4%;
		margin-left: 4%;
	}
	.promo .bg-black.semi-trans {
		background-color: #000;
	}
	.promo-img.large {
		padding: 0;
		background-image: none !important;
	}
	.split.mini-cards .quarter,
	.split:nth-child(2n+2).quarter {
		width: 100%;
		margin: 0;
	}
	.sub-content .mini-card-image {
		display: none;
	}
	.sub-content .mini-card-text {
		width: 94%;
		padding: 10px 3%;
		float: left;
	}
	.blog-list .third-rel,
	.blog-list .two-thirds-rel {
		width: 100% !important;
		margin: 0;
	}
	.blog-list .third-rel {
		margin-bottom: 15px;
	}
}