/* Akkilahdot 2020 stylesheet */

/* Base font is 15px */

/* Mobile styles 360px - also basic styles for all sizes */

body {
	background-color: #FAFBFC;
	color: #333F48;
	font-family: 'Roboto Condensed', sans-serif;
}

.error-message {
	color: red;
}

/* Colors for weather svg's. */
.cls-1 {
	fill: #ff9800; /* orange */
}
.cls-2 {
	fill: #ffeb3b; /* yellow */
}
.cls-3 {
	fill: #bbdefb; /* light blue */
}
.cls-4 {
	fill: #2196f3; /* dark blue */
}
.cls-5 {
	fill: #8b8b8b; /* grey */
}
.cls-6 {
	fill: #ffffff; /* white */
}
.cls-7 {
	fill: #333F48;
	stroke: none;
	stroke-linecap: round;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}

.cls-8 {
	fill: #7fc536; /* green */
}

.cls-9 {
	fill: #333f48; /* dark grey */
}

.cls-10 {
	fill: none;
	stroke: #333f48;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}

.cls-11 {
	fill: #323f48;
}

.cls-bell {
	fill: #81c341; /* green bell */
}

.hero__container {
	display: none; /* don't display hero in mobile */
}

.container.site-content {
    max-width: 100%; /*was 99%*/
    padding-left: 0; /*was .5rem*/
    padding-right: 0;
}

/* Override general style to remove extra space from mobile page's top.*/
.site-hero + .site-content {
    margin-top: 0; /*was 2rem*/
    padding-top: 0;
}

.mobile-only { display: inline-block; }
.tablet-only { display: none; }
.desktop-only { display: none; }

.noresults {
	font-size: 1.2rem;
	text-align: center;
	margin-top: 1rem;
}

.weather-disclaimer {
	font-size: 1.1rem;
	margin: 1rem 0;
}

/* Full width, contains top filters and order row. */ 
.lomakone-container-filter-and-order {
	position: relative;
	width: 100%;
	margin-top: 0;
	padding-top: 1.2rem;
	background: #f5f5f5 no-repeat 50% top;
}

.lomakone-container {
	position: relative;
	width: 100%;
	margin-top: 0;
}

.lomakone-go-to-top {
	width: 100%;
	/*max-width: 40rem;*/
	position: fixed;
	top: 0; /* 3rem when navigation visible */
	left: 0;
	z-index: 20;
	background-color: #333f48;
	height: 4.467rem; /*50px*/
	color: #ffffff;
	font-size: 1.467rem; /*22px*/
	letter-spacing: normal;
	line-height:  1.467rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	padding-top: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
	border: 0.4667rem solid #ffffff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
	display: none;
}

.lomakone-go-to-top-link {
	width: 70%;
}

/* Contains top filters. */
#lomakone-filter-container,  #lomakone-filter-container-top {
	display: block; /*not hidden in mobile first */
	width: 94%;
	/*background-color: #FAFBFC;*/
	background: rgba(235, 237, 242, 0.9); /*use this to prevent opacity being inherited*/
	height: auto; /*debug*/
	/*height: 13.67rem;*/ /*205px - old small size NOT IN USE*/
	margin-left: auto;
	margin-right: auto;
	/*overflow: hidden;*/ /* hides content that doesn't fit to defined height */
	/*overflow: visible;*/
	margin-bottom: 0;
}

/* Contains additional filters that are at first hidden in mobile. */
 #lomakone-filter-container {
 	 display: none; /* hidden first in mobile */
 }

.lomakone-filter-row {
	/*position: relative;*/
	width: 100%;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
}

/* Mobile: containers for departure and destination pop ups. Contain checkboxes.
This container grey out's the whole page. */
.lomakone-departure-container, .lomakone-destination-container {
	display: none; /* Hidden by default */
	/*display: block;*/ /*debug*/
	position: fixed; /* Stay in place */
	z-index: 1001; /* higher than .site-navbar, since we want to show this, not navbar. */
	top: 0;
	left: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Show when user clicks mihin div.*/
#lomakone-departure-container.opened, #lomakone-destination-container.opened {
	display: block;
}

.lomakone-departure-content, .lomakone-destination-content {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ffffff;
	padding: 0.3rem 1.2rem;
	width: 90%;
	/*width: 18.13rem;*/
	height: auto;
	border-radius: 0.5rem;
	z-index: 1001;
}

.pop-up-heading {
	width: 80%;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.267rem;
	font-weight: 400;
	line-height: 1.2;
	padding-top: 0.5333rem;
	padding-bottom: 0.5333rem;
}

/* Mobile: X that closes pop-ups. */
.lomakone-button-close-pop-up {
	/*position: relative;*/
	position: absolute;
	right: 0;
	display: block;
	/*float: right;*/
	width: 1.667rem; /*25px*/
	height: 1.667rem; /*25px*/
	/*padding: 0.8667rem 0.3333rem;*/
	background-color: #ffffff;
	color: #333f48;
	text-align: right;
	font-size: 1.067rem; /*16px*/
	letter-spacing: normal;
	line-height:  1.267rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	margin:  0.5333rem 0.8rem 0.5333rem 0;
}

/* Container for all the rest of the filters, that are originally hidden. Modal window. */
#lomakone-hidden-filter-container {
	display: none; /* Hidden by default */
	/*display: block;*/ /*debug*/
	position: fixed; /* Stay in place */
	z-index: 1001; /* higher than .site-navbar, since we want to show this, not navbar. */
	top: 0;
	left: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.lomakone-hidden-filter-content {
	/*width: 77%;*/
	width: 18.13rem;
}

/* Show when user clicks more filters link.*/
#lomakone-filter-container.opened #lomakone-hidden-filter-container {
	display: block;
}

/* Mobile: Styles for mobile filters. Show up on top of the page. Counter styles in desktop if needed.*/

.lomakone-top-box-mobile {
	background-color: #333f48;
	height: 3rem; /*45px*/
	color: #ffffff;
	font-size: 1.067rem; /*16px*/
	letter-spacing: normal;
	line-height:  1.267rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	padding-top: 0.6667rem;
	padding-left: 0.6667rem;
	padding-right: 0.3333rem;
}

.lomakone-top-box-desktop {
	display: none;
}

#lomakone-hidden-filter-container .lomakone-filters-number-mobile {
	padding-top: 0.2rem;
	width: 70%;
}

#lomakone-hidden-filter-container .lomakone-button-close-filters-mobile {
	position: relative;
	display: block;
	float: right;
	width: 4.267rem; /*64px*/
	height: 1.667rem; /*25px*/
	padding: 0.2rem 0.3333rem;
	background-color: #ffffff;
	border-radius: 0.4rem; /*6px*/
	color: #333f48;
	text-align: center;
	font-size: 1.067rem; /*16px*/
	letter-spacing: normal;
	line-height:  1.267rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	border: 0;
	margin: 0 auto;
}

.lomakone-bottom-box-mobile {
	background-color: #ffffff;
	height: 3rem; /*45px*/
	color: #ffffff;
	font-size: 1.067rem; /*16px*/
	letter-spacing: normal;
	line-height:  1.267rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	padding-top: 0.6667rem;
	padding-left: 0.6667rem;
	padding-right: 0.3333rem;
}

#lomakone-hidden-filter-container .lomakone-button-clear-filters-mobile {
	position: relative;
	display: block;
	float: left;
	width: 80%; /*64px*/
	height: 1.667rem; /*25px*/
	padding: 0.2rem 0.3333rem;
	background-color: #ffffff;
	border-radius: 0.4rem; /*6px*/
	color: #81c341;
	text-align: left;
	font-size: 1.067rem; /*16px*/
	letter-spacing: normal;
	line-height:  1.267rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	border: 0;
	margin: 0 auto;
}

#lomakone-hidden-filter-container .block__body {
	position: relative;
	/*border-bottom: 0.06667rem solid rgba(51, 63, 72, 0.5);*/ /*#333f48 rgba(51, 63, 72, 0.5)*/
	/* border-bottom: 0.06667rem solid #cccccc; */
	border-bottom: 0.06667rem solid #eaeaea;
	padding-top: 1.067rem;
	padding-bottom: 1.533rem;
	background-color: #ffffff; /* white bg for hidden filters */
}

#lomakone-hidden-filter-container .block__body .copy--h5 {
   font-size: 1.067rem; /*16px*/
   letter-spacing: normal;
   line-height:  1.267rem; /*19px*/
   font-family: 'Roboto Condensed',sans-serif;
   font-weight: 600;
}

/* Mobile: Little arrow that opens or closes one filter block. */
#lomakone-hidden-filter-container .block__body .toggle-filter-row-mobile {
	position: absolute;
	width: 1rem;
	top: 0.3333rem;
	right: 1rem;
}

#lomakone-hidden-filter-container .block__body .toggle-filter-row-mobile svg {
	color:  #333f48;
}

/* Mobile: Some filters are closed first (agency).*/

#agency-headers, #agency-selections {
	display: none;
}

#category-headers, #category-selections {
	display: none;
}

#lomakone-filter-container #lomakone-hidden-filter-container #agency,
#lomakone-filter-container #lomakone-hidden-filter-container #category {
	height: 3.333rem;
	overflow: hidden; /* important, prevents the contents showing through the elements that come after this, when this filter is closed and only the height of the header. Contains floats inside these div's. FIXED*/
}

/* Show when user clicks mobile filters arrow icon.*/
#lomakone-filter-container #lomakone-hidden-filter-container #agency.opened_row,
#lomakone-filter-container #lomakone-hidden-filter-container #category.opened_row {
	height: auto;
}

/* When row is opened, show inner selections */
#agency.opened_row #agency-headers, #agency.opened_row #agency-selections,
#category.opened_row #category-headers, #category.opened_row #category-selections {
	display: block;
}

#lomakone-filter-container #lomakone-hidden-filter-container #agency .filters-row-closed-icon,
#lomakone-filter-container #lomakone-hidden-filter-container #category .filters-row-closed-icon {
	display: inline-block;
}

#lomakone-filter-container #lomakone-hidden-filter-container #agency.opened_row .filters-row-closed-icon,
#lomakone-filter-container #lomakone-hidden-filter-container #category.opened_row .filters-row-closed-icon {
	display: none;
}

#lomakone-filter-container #lomakone-hidden-filter-container #agency .filters-row-opened-icon,
#lomakone-filter-container #lomakone-hidden-filter-container #category .filters-row-opened-icon {
	display: none;
}

#lomakone-filter-container #lomakone-hidden-filter-container #agency.opened_row .filters-row-opened-icon,
#lomakone-filter-container #lomakone-hidden-filter-container #category.opened_row .filters-row-opened-icon {
	display: inline-block;
}

/* NOT USED - filters-choose-days-mobile*/

/* Mobile only: Style that is used after user clicks 'valitse paivat' link.  */
/*#lomakone-filter-container.medium {
	height: 28.53rem; 428px
	height: auto;
	margin-bottom: 0;
}*/

/*#filters-choose-days-mobile {
	position: relative;
	float: left;
	display: block;
	background-color: transparent;
	box-shadow: none;
	color: #81c341;
	font-size: 0.9333rem;
	width: 50%;
	height: auto;
	min-height: 1rem;
	padding: 1.3333rem 0.3333rem 1.667rem 1rem;
	line-height: 1.6rem;
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	border: 0;
}*/

/*.medium #filters-choose-days-mobile {
	display: none;
}

#filters-choose-days-mobile svg {
	width: 1rem;
	height: auto;
	margin-left: 0.3333rem;
	color: #81c341;
}*/

/* Mobile: Add style opened, when user clicks filters open - makes all the filters show. */
#lomakone-filter-container.opened {
	display: block;
	height: auto;
	padding-bottom: 0.6667rem;
}

.form-field__icon--left {
    right: auto;
    left: 0.8rem;
    z-index: 100; /* so this shows above autocomp */
    max-height: 3rem; /* so this doesn't get too high, when autocomp opens */
}

.form-input::placeholder {
    color: #333F48;
    opacity: .8;
    font-size: 1rem;
}

.label--checkbox {
   color: #333F48;
}

/* Mobile - do these work?*/
/*.akkilahdot-content {
    transition: transform .5s cubic-bezier(.215,.61,.355,1);
    transform: translate(-50%);
    width: 200%;
}*/

/* Debug */
.akkilahdot-wrapper {
    /*overflow: hidden;*/ /*debug*/ /*because this is hidden, box shows only partially */
    width: 100%;
}

/* Mobile */
.lomakone-sidebar {
    float: left;
    position: relative;
    width: 100%;
    padding: 0 0 0 0;
}

/* More space for close filters link at the bottom of filters. */
.opened .lomakone-sidebar {
	padding-bottom: 4rem;
}

.block__body {
	float: left;
	width: 100%; /*in desktop 25%, same for rest, style name tells the width in desktop */
	padding: 0.6667rem 0.6667rem 0 0.6667rem; /*10px*/
}

#destcountriesfilter.block__body {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0.3333rem;
}

#destcountriesfilter.block__body p {
	padding-left: 0;
	float: left;
	margin-top: 1rem;
	/*margin-bottom: 0.3333rem;*/
}

.block__body input {
	color: #000000;
	border-radius: 0.5333rem; /*8px*/
	padding: 1rem 0.66667rem;
}

/* Contains heading in akkilahdot 18.2.2019 - different use in old lomakone*/
.block__body.mobile-filter-top-box {
	padding-top: 0;
	padding-bottom: 0;
}

.block__body.width95 {
	width: 100%;
}

.block__body.width65 {
	width: 100%;
}

.block__body.width30 {
	width: 100%; 
}

/*.block__body.width25 {
	width: 100%;
}*/

.block__body.width20 {
	width: 100%;
}

.block__body.wide {
	float: left;
	width: 100%;
}

.block__body.destination {
	width: 100%; /*34.33rem = 515px 33rem =495px*/
	padding-top: 0;
}

.block__body.destination .form-field {
	width: 98%; /*50%*/
	float: left;
	margin-top: 0.3333rem; /*0.5333rem*/
}

.block__body.destination #departure-headers.form-field {
	margin-top: 0;
}

/* Actual input field is inside pop-up.*/
.block__body.destination #inputdestination.form-input, .block__body.destination #autocomp-destination.form-input {
	width: 97%;
	border-color: #cccccc; /*darker grey border*/
	padding-top: 0.6667rem;
	padding-bottom: 0.6667rem;
	height: auto;
	color: #333F48;
	font-size: 1.067rem;
}

/* Actual input field is inside pop-up.*/
.block__body.destination #inputdeparture.form-input, .block__body.destination #autocomp-departure.form-input {
	width: 97%;
	border-color: #cccccc; /*darker grey border*/
	padding-top: 0.6667rem;
	padding-bottom: 0.6667rem;
	height: auto;
	color: #333F48;
	font-size: 1.067rem;
}

/* Autocomplete's changed styles. */
#autocomp-departure::placeholder, #autocomp-destination::placeholder {
	color: #333F48;
	opacity: .8;
	font-size: 1rem;
}

.autoComplete_highlighted {
    color: #81c341;
}

#chosen-departure-container {
	position: relative;
}

/* Div that looks like normal input, but isn't really. Show here selected departure places.*/
#chosen-departure, #chosen-destination {
	position: relative;
	display: block;
	width: 100%;
    color: #81c341;
	border-radius: 0.5333rem; /*8px*/
	padding: 1rem 0.6667rem 1rem 0.6667rem;	
	font-size: inherit;
	line-height: 1.25;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ededed;
	cursor: pointer;
}

#chosen-departure span,
#chosen-destination span {
	color: #333F48;
	opacity: .8;
	padding-left: 2.75rem; /*3.25rem*/
	font-size: 1rem;
}

#chosen-departure-inner,
#chosen-destination-inner {
	padding-left: 2.75rem;
	font-size: 1rem;
	line-height: 1.25;
}

#chosen-departure .remove-chosen-departure,
#chosen-destination .remove-chosen-destination {
	display: inline-block;
	float: right;
	top: 0;
	margin: -0.2667rem 1.1rem 0 0;
	padding-top: 0.2667rem;
	color: #ffffff;
	text-align: center;
	font-weight: 600;
	width: 1.8rem; /* Set a specific slider handle width */
    height: 1.8rem; /* 33px Slider handle height */
    border-radius: 50%;
    background: #81C341; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border: none; /*#EAEDF2*/
	
}

/* Mobile: Little arrow that opens or closes departure and destination pop-up. */
#chosen-departure .toggle-pop-up,
#chosen-destination .toggle-pop-up {
	position: absolute;
	width: 1rem;
	top: 0.2667rem;
	right: 0.3333rem; /*0.6667rem*/
	margin-top: .75rem;
}

/* Mobile: Little arrow that opens or closes destination pop up's checboxes level 3. */
.lomakone-arrow-down {
	position: absolute;
	width: 1rem;
	top: 0;
	right: 0; /*0.6667rem*/
	margin-top: 0;
	cursor: pointer;
}

#chosen-departure .toggle-pop-up svg,
#chosen-destination .toggle-pop-up svg,
.lomakone-arrow-down svg {
	color:  #81c341;
}

#chosen-departure .toggle-pop-up .row-closed-icon,
#chosen-destination .toggle-pop-up .row-closed-icon,
.lomakone-arrow-down .arrow-down-icon {
	display: inline-block;
	color: #81c341;
	opacity: 1;
	padding-left: 0;
	font-size: 1rem;
}

/* Airport pop up checkboxes to one column. */
.block__body.destination .lomakone-departure-content .form-field,
.block__body.destination .lomakone-destination-content .form-field {
	width: 100%;
}

/* Airport pop up only input's container slightly less to give space for closing X on the right. */
.block__body.destination .lomakone-departure-content .form-field.first-input,
.block__body.destination .lomakone-destination-content .form-field.first-input {
	width: 90%;
}

.block__body.destination .lomakone-departure-content .block__body {
	padding-top: 0; /*moves checkboxes closer to input field in mobile*/
}

.block__body.destination .lomakone-departure-content .block__body {
	padding-top: 0; /*moves checkboxes closer to input field*/
}

/* FIXME - debug Destination pop up, show checkboxes. */
.block__body.destination .lomakone-destination-content .collapse {
	display: block; /*counter display: none; from styles.css, debug!!! shows also child checkboxes */
}

/* Styles for the ul elements that contain the checkboxes. */
.lomakone-destination-content .treeview-list {
	float: left;
	width: 100%;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

/* #destcountriesfilter contains destination checkboxes. Is a treeview waith ul and li elements. */
.lomakone-destination-content #destcountriesfilter .form-field {
	width: 100%; /*50%*/
	float: left;
	margin-top: 0.3333rem; /*0.5333rem*/
}

/* #destcountries-headers.form-field contains no selection and choose all checkboxes. */
.lomakone-destination-content #destcountriesfilter #destcountries-headers.form-field {
	width: 100%; /*50%*/
	float: left;
	/*margin-top: 0.5333rem;*/
	margin-top: 0; /* less space between autocomplete input and the checkboxes */
}

.lomakone-destination-content #destcountriesfilter #destcountries-headers.form-field .form-field {
	width: 100%;
}

.lomakone-destination-content #destcountriesfilter #destcountries-headers .col--inputs {
	width: 100%;
}

/* close level3 by default */
.lomakone-destination-content #destcountriesfilter #destcountries-selections .form-field.level3 {
	width: 100%;
	display: none;
	margin-left: 0;
	/*padding-left: 1rem;*/
	border-bottom: none;
}

.block__body #destcountries-selections input.form-checkbox {
	width: 80%; /* less than 100%, so the open/close arrow can be clicked */
}

.block__body.dates {
	display: block;
	width: 100%; /*25.33rem 380px 26.67rem = 400px*/
	/*padding-left: 0;*/ /* normal padding in mobile */
}

/*.medium .block__body.dates { display: block;}*/

.block__body.dates .form-field {
	width: 50%; /*33rem =495px*/
	float: left;
}

.block__body.dates #inputearliestdate.form-input {
	width: 97%; /*495px*/
}

.block__body.dates #inputlatestdate.form-input {
	width: 97%; /*495px*/
}

.block__body.triptypes {
	display: block;
	width: 95%; /*125px = 8.333rem 120px = 8rem*/
	/*padding-left: 0;*/
	/*padding-right: 0;*/
	margin-top: 0;
}

/*.medium .block__body.triptypes {
	display: block;
}*/

.form-checkbox-input {
    display: inline-block;
    height: 1.5rem; /*1.667rem = 25px 17px = 1.133rem*/
    width: 1.5rem;
    background-color: #fff;
    border: 1px solid rgba(40,50,57,.2);
        border-top-color: rgba(40, 50, 57, 0.2);
        border-right-color: rgba(40, 50, 57, 0.2);
        border-bottom-color: rgba(40, 50, 57, 0.2);
        border-left-color: rgba(40, 50, 57, 0.2);
    position: absolute;
    top: 0.2667rem; /*4px - was 0.333rem*/
    text-align: center;
    line-height: 2;
    transition: border-color .3s cubic-bezier(.215,.61,.355,1);
    border-radius: 0.3333rem;
}

.form-checkbox-input::after {
    position: absolute;
    content: "";
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJyBmaWxsPScjZmZmJz48cGF0aCBkPSdNMTEuNSAxOC4yTDI0LjkgNC45YzEuNi0xLjYgNC4zLTEuNiA1LjkgMCAxLjYgMS42IDEuNiA0LjMgMCA1LjlMMTYgMjUuNmMtLjIuMi0uNS40LS44LjYtLjIuMy0uNC43LS43LjktMS42IDEuNi00LjMgMS42LTUuOSAwbC03LjQtNy40Yy0xLjYtMS42LTEuNi00LjMgMC01LjkgMS42LTEuNiA0LjMtMS42IDUuOSAwbDQuNCA0LjR6Jy8+PC9zdmc+);
    top: 20%;
    left: 20%;
    background-size: contain;
    width: 60%; /* size of white selected mark */
    height: 60%;
}

.form-checkbox-input + .label--checkbox {
    position: relative;
    width: 80%; /*85%*/
    margin-left: 2.25rem;
    margin-top: .3rem;
    margin-bottom: .1rem;
    line-height: 1.3; /*1.1*/
    cursor: pointer;
}

.label--checkbox a {
    position: relative;
    z-index: 2;
    float: right; /* little arrow floats to the right */
}

/* Own styles for triptypes small checkboxes. */
.block__body.triptypes .form-checkbox-input {
	height: 1.133rem; /*1.5rem = 24px 17px = 1.133rem*/
    width: 1.133rem;
    top: 0.3333rem;
    line-height: 2;
}

.block__body.triptypes .form-checkbox-input::after {
    position: absolute;
    content: "";
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJyBmaWxsPScjZmZmJz48cGF0aCBkPSdNMTEuNSAxOC4yTDI0LjkgNC45YzEuNi0xLjYgNC4zLTEuNiA1LjkgMCAxLjYgMS42IDEuNiA0LjMgMCA1LjlMMTYgMjUuNmMtLjIuMi0uNS40LS44LjYtLjIuMy0uNC43LS43LjktMS42IDEuNi00LjMgMS42LTUuOSAwbC03LjQtNy40Yy0xLjYtMS42LTEuNi00LjMgMC01LjkgMS42LTEuNiA0LjMtMS42IDUuOSAwbDQuNCA0LjR6Jy8+PC9zdmc+);
    top: 20%;
    left: 20%;
    background-size: contain;
    width: 60%;
    height: 60%;
}

.block__body.triptypes .form-group-inline .form-field label {
    line-height: 1.333rem;
}

.block__body.triptypes .form-checkbox-input + .label--checkbox {
    position: relative;
    margin-left: 1.6rem; /*24px = 1.6rem*/
    margin-top: .2rem;
    margin-bottom: .2rem;
    line-height: 1.1;
    cursor: pointer;
}

.block__body.selected_criteria {
	display: block;
	width: 100%; /*14rem 210px*/
	margin: 0 auto 0 auto;
	padding: 0.4667rem 0 0 1rem;
}

/*.medium .block__body.selected_criteria {
	display: block;
}*/

#filters-selected-criteria-destination, #filters-selected-criteria-departure {
	overflow: hidden; /* contain floats */
}

.block__body.selected_criteria .selected_criteria_list { /*ul*/
	display: block;
	float: right;
	width: 65%;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	text-transform: uppercase;
	margin-left: 1.333rem;
	font-size: 0.9333rem;
}

.block__body.selected_criteria .selected_criteria_list li {
	display: inline-block;
	color: #333F48;
	margin-right: 1.6rem; /*24px*/
}

/* .block__body.selected_criteria .selected_criteria_list li a {
	color: #333F48; 
} */

.block__body.selected_criteria .selected_criteria_list li:hover {
	cursor: pointer;
	color: #848b91; 
}

.block__body.selected_criteria .selected_criteria_list li .times {
    font-weight: 700;
    color: #e74c3c;
    padding-right: .25rem;
}

#lomakone-filter-container-top .block__body.showmore {
	display: block; /* DEBUG: should be none at first - hidden in mobile */
	width: 100%; /*14rem 210px*/
	margin-top: 0;
	padding-left: 0;
}

/*FIXME is this needed, style path is not right anymore. */
/* Open filters text's container. Is at the bottom of filter container when it's in opened state. */
#lomakone-filter-container.opened .block__body.showmore {
	float: none;
	position: absolute;
	bottom: 0; /*0.3333rem*/
	width: 100%;
	clear: both;
	margin: 0 auto 0 auto;
}

/* OLD - Style to make hotel columns be side by side.*/
/*.col--sm-6 {
	width: 50%;
	float: left;
}*/

/* Agency filters are normally under each other, so no styles here that would float them side by side like in desktop. */

/* Style to make stars checkbox inputs be side by side.*/
.hotelrating .col--inputs {
	width: 14%;
	float: left;
	padding-right: 1rem;
}

/* Prevents second column dropping too low. */
.form-field .col + .col {
    margin-top: 0; /*.75rem*/
}

/* Mobile: Desktop only - Normal filter activate button, when filters are in small mode. */
#lomakone-filter-container-top .block__body.button {
	/*float: right;*/
	/*width: 10.667rem;*/ /*155px*/
	width: 100%;
	margin-top: 0.3333rem;
	padding-left: 0;
	/*padding-right: 1rem;*/
	padding-right: 0;
	padding-top: 0;
}

/* Button container inside pop up filters. */
#lomakone-filter-container-top .lomakone-departure-container .block__body.button,
#lomakone-filter-container-top .lomakone-destination-container .block__body.button {
	float: left;
	width: 7.667rem;
}

/* Button container inside pop up filters. */
#lomakone-filter-container-top .lomakone-departure-container .block__body.clearfilters,
#lomakone-filter-container-top .lomakone-destination-container .block__body.clearfilters {
	float: left;
	width: 8rem;
	padding-top: 0.8rem;
}

#lomakone-filter-container-top.medium .block__body.button {
	width: 9.667rem; /*145px*/
}

#lomakone-filter-container-top .lomakone-button-clear-departure-filters,
#lomakone-filter-container-top .lomakone-button-clear-destination-filters {
	position: relative;
	display: block;
	/*float: left;*/
	width: 9.333rem; /*64px*/
	height: 1.667rem; /*25px*/
	padding: 0.8rem 0.3333rem;
	color: #81c341;
	text-align: left;
	font-size: 1rem; /*1.067rem 16px*/
	letter-spacing: normal;
	line-height:  1.267rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	border: 0;
	margin: 0 auto;
	cursor: pointer;
}

/* NOT IN USE in akkilahdot, doesn't change location - Mobile: Desktop only - Activate the filters button's container. Is at the bottom of filter container when it's in opened state. */
/*#lomakone-filter-container.opened .block__body.button {
	float: none;
	position: absolute;
	bottom: 0; 0.3333rem
	width: 100%;
	clear: both;
	margin: 0 auto 0 auto;
}*/

#lomakone-filter-container-top .block__body.matkavahti {
	display: block;
	/*float: left;*/
	margin-left: 0;
	margin-right: 0;
	margin-top: 0.3333rem;
	/*padding: 0 0 0.5333rem 0.3333rem;*/
	padding: 0 0 0.5333rem 0;
	/*width: 9.667rem;*/
	width: 100%;
}

/*#lomakone-filter-container.medium .block__body.matkavahti {
	display: block;
}*/

/* Mobile: bell not shown in mobile. */
.matkavahti-bell {
	display: none;
	float: left;
	/*display: block;*/
	height: 1.4rem; /* same as font size in text */
	max-width: 1.3333rem; /* added width, so chrome shows svg inside this narrow enough */
	margin-right: 0.6667rem; /*10px*/
	margin-top: 0.3333rem; /*5px*/
}

.matkavahti-text {
	/*float: left;*/
	display: block;
	font-size: 1rem;
	/*max-width: 1.3333rem;*/ /* added width, so chrome shows svg inside this narrow enough */
	/*font-size: 0.8667rem;*/ /*14px = 0.9333rem 0.8667rem = 13px*/
	line-height: 1.2;
}

/*#lomakone-filter-container .block__body.matkavahti {
	float: none;  so it can be centered 
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	padding: 0.4667rem 0 0.6667rem 0;
	width: 21.33rem; 320px
}*/

.col--12 {
    width: 100%;
    float: left;
}

.input-range-delimiter {
	color: #333F48;
	line-height: 3;
	text-align: center;
}

.form-label {
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 1.067rem; /*18px 1.3333rem*/
    font-weight: 600;
}

.copy--heading-primary {
	text-transform: none;
	color: #81C341;
}

/* Input headers */
.mobile-filter-heading {
	font-size: 1.6rem; /* 24px - 1.467rem = 22px*/
	font-weight: 400;
	width: 100%;
	padding-top: 0.5333rem;
	padding-bottom: 0;
	letter-spacing: 0;
	font-family: 'Roboto Condensed', sans-serif;
}

.copy--h5 {
	font-size: 1.2rem;
	font-weight: 400;
}

.copy--h5 + * {
    margin-top: 0.625rem; /*10px*/
}

.copy--h5 + .slider-container {
	margin-top: 0;
}

/* Mobile: Forms slider styles */

.slider-container {
    width: 100%; /* Width of the outside container */
}

#price_inputs_container, #duration_inputs_container, #temperature_inputs_container {
	border: 0; 
	color: #81c341; /* green, #333F48 dark grey*/ 
	background-color: transparent;
	padding: 0 0 2.3333rem 0.66667rem;
	font-weight: 600;
	position: relative;
	top: -1.467rem;
	right: 0;
	text-align: right;
	border-radius: 0;
	width: 98%;
	font-size: 1.067rem; /*16px*/
}

#priceatleast, #price, #durationatleast, #duration, #temperaturemin, #temperaturemax, #tripduration-amount, .dash-after-slidervalue, .char-after-slidervalue, .word-after-slidervalue {
	border: 0; 
	color: #81c341;
	background-color: transparent;
	padding: 0 0 0.3333rem 0.2rem;
	font-weight: 600;
	position: relative;
	float: left;
	text-align: right;
	border-radius: 0;
	width: 3rem;
	font-size: 1.067rem;
}

#durationatleast, #duration, #temperaturemin, #temperaturemax {
	width: 1.667rem; /*25px*/
}

#temperaturemax {
	text-align: left;
	width: 1.3333rem;
}

#priceatleast {
	margin-left: 6rem;
}

#durationatleast {
	margin-left: 7rem;
}

#temperaturemin {
	margin-left: 9.333rem;
}

.dash-after-slidervalue, .char-after-slidervalue {
	width: 1rem;
	padding-left: 0.3333rem;
}

/* Contains also +, so give more space */
#temperature_inputs_container .dash-after-slidervalue {
	width: 2rem;
	text-align: right;
}

.char-after-slidervalue {
	width: 1rem;
	text-align: left;
}

.word-after-slidervalue { /* paivaa */
	width: 2rem;
	text-align: left;
}

/* Jquery ui slider styles */

.ui-slider {
	position: relative;
	text-align: left;
	/*margin-top: 0.6667rem;*/
	margin-top: 0;
}
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

.ui-slider-horizontal { 
	height: 0.6667rem;
	width: 80%;
	cursor: pointer;
	background: #c9dfbc; /* green/grey slider #81C341*/
	border-radius: 25px;
	border: none;
	box-shadow: none;
	margin-left: 0.667rem;
}
.ui-slider-horizontal .ui-slider-handle {
	/*top: -.3em;*/
	top: -.8rem;
	margin-left: -.6em;
	/* custom styles below */
	width: 2.2rem; /* Set a specific slider handle width */
    height: 2.2rem;; /* 33px Slider handle height */
    border-radius: 50%;
    background: #81C341; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border: 4px solid #FAFBFC;
	
}
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; background: #81C341;}
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* End of slider styles */

/* Mobile: Styles for button like checkboxes - could be done with jquery ui? */

.lomakone-checkbox-button input[type=checkbox] {
   position: absolute;
   opacity: 0;
   /* For mobile, it's typically better to position checkbox on top of clickable
      area and turn opacity to 0 instead. */
}

/* Hide normal checkbox 'box'. Show the styled label instead.*/
.lomakone-checkbox-button input[type=checkbox] {
	visibility: hidden;
}

/*.form-checkbox-input::after - makes the old version of input box, remove from html when button type cehckbox is used */

.lomakone-checkbox-button label {
	position: relative;
	display: inline-block;
	/*margin: 0 0 0.6667rem 0;*/ /*0.6667rem 10px*/
	margin: 0 0 0 0;
	cursor: pointer;
	color: #333F48;
	width: 100%;
	overflow: auto; /*keeps tworow text buttons inline with others */
}

/*.lomakone-checkbox-button label.tworows {
	line-height: 1.2rem;
}*/

/*.lomakone-checkbox-button label span {
	position: relative; 
	display: inline-block;
	width: 70%;
	height: 3.067rem; */46px/*
	margin-top: 0.8rem; */12px/*
}*/

/* Default State */
.lomakone-checkbox-button div.form-group--checkbox {
	position: relative;
	display: inline-block;
	background: #ffffff;
	width: 49%; /*10.4rem = 156px*/
	height: 3.867rem; /*58px*/ 
	line-height: 3.867rem;
	color: #ffffff;
	text-align: center;
   /*border: 1px solid #9b9b9b;*/
   margin-top: 0; /* counter general after h5 all get padding style from .copy--h5 + *  */
   border: 1px solid #ededed;
}

/* Own width for target area selection. */
.lomakone-checkbox-button.targetarea div.form-group--checkbox {
	width: 31%; /* 9.467rem = 142 x 58px*/
}

/* Toggled State - selects label that has the same parent as the selected checkbox */
.lomakone-checkbox-button div.form-group--checkbox input[type=checkbox]:checked ~ label {
   background-color: #81C341;
   /*border-color: #000;*/
   color: #ffffff;
   font-weight: 700;
}

/* Styles for hotel stars filter. Replaces normal checkboxes with stars. */

#hclass-selections {
	/*margin-top: 0;*/
}

#hclass-selections label {
	font-size: 1.6rem;
	margin-top: 0;
	color: #8B8B8B; /* grey stars */
}

.hotelrating {
  position: relative;
  /*display: inline-block;*/
  border: none;
  /*font-size: 14px;*/
 /* margin: 50px auto;
  left: 50%;
  transform: translateX(-50%);*/
}

.hotelrating #hclass-selections input {
  border: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  opacity: 0;
}

.hotelrating #hclass-selections label {
  position: relative;
  /*float: right;*/
  color: #ffffff;
}

.hotelrating #hclass-selections label:before {
  margin: 5px;
  content: '\f005';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  font-size: 2rem;
  color: #959595;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.hotelrating #hclass-selections input:checked ~ label:before {
  color: #81c341; /*green*/
}

/* Do not use any hover definitions in mobile. Will break things, is bad. These are defined separately for desktop. */
/*
.hotelrating #hclass-selections label:hover ~ label:before {
  color: #81c341;
}

.hotelrating #hclass-selections label:hover:before {
  color: #81c341;
}
*/

/* Center number inside star */
.hotelrating #hclass-selections label .label--number {
	display: inline-block;
	position: absolute;
	top: 34.5%;
	left: 39.5%;
	font-size: 1.067rem;
	font-weight: 600;
}

/* Hide normal checkbox from mobile, when undefined hotel rating. Use this is you want to show a star instead.*/
/*.hotelrating .col--inputs.undefined-hotel-div span.form-checkbox-input.desktop-only {
	display: none;
}*/

/* Show normal checkbox in mobile, when undefined hotel rating. */
.hotelrating .col--inputs.undefined-hotel-div span.form-checkbox-input {
	display: block;
}

/* Mobile: Normal text checkbox, not a star for undefined hotel both in desktop and in mobile).*/
.hotelrating .col--inputs.undefined-hotel-div {
	width: 100%;
}

/* Mobile: Give the only not star normal checkboxes styles. */
.hotelrating #hclass-selections .undefined-hotel-div input {
  clip: auto; /*counters star style, important, without this user can't click checkbox*/
  position: absolute;
  top: 0;
  left: 0;
  height: 1.75rem;
  width: 100%;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  color: #000000;
  border-radius: 8px;
  padding: 1rem 0.66667rem;
}

/* Mobile: Undefined hotel text */
.hotelrating  #hclass-selections .undefined-hotel-div label {
  position: relative;
  /*float: right;*/
  color: #333F48;
  margin-top: .5rem;
  margin-bottom: .1rem;
  font-family: 'Roboto Condensed',sans-serif;
  margin-left: 2.25rem; /*leaves space for checkbox*/
  font-size: 1rem;
}

/* Mobile: don't show star since shows normal checkbox instead */
.hotelrating #hclass-selections .undefined-hotel-div label:before {
   display: none;
}

/* Use this style is undefined hotel is shown as a star, not a checkbox.*/
/*.undefined-hotel-div .form-checkbox-input + .label--checkbox {
    position: absolute;
    margin-left: 0;
    margin-top: .3rem;
    margin-bottom: .1rem;
    line-height: 1.2rem;
    cursor: normal;
}*/

/* End of mobile filters */


/* Mobile: order container */
.lomakone-order-container {
	position: relative;
	width: 100%;
	height: 5.867rem; /*88px = 5.867rem*/ /*94px*/
	background-color: #ffffff;
	box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.07);
}

.lomakone-order-row {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
}

.lomakone-order-row-box {
	position: relative;
	float: left;
	width: 100%;
	/*border: 1px solid #000;*/
	padding: 0 0 0.6667rem 0; /* 0.6667rem = 10px 1.6rem = 24px 1.333rem = 20px*/
	font-family: 'Roboto Condensed', sans-serif; 
	color: #333F48; 
	font-size: 1.067rem; /*16px*/
	margin-top: 0; /*10px = 0.6667rem*/
	margin-right: 2.333rem; /*35px*/
	cursor: default;
}

/*.lomakone-order-row-box:hover {
	background-color: #EAEDF2;
}*/

.lomakone-order-row-box.selected {
	background-color: #EAEDF2;
	padding-right: 1rem; /*normal padding 1.6rem - arrows own padding 0.2667rem = 1.3333rem */
}

.lomakone-order-row-box.header {
	font-family: 'Roboto Condensed', sans-serif;
	padding-left: 1rem;
	padding-right: 0;
	padding-top: 0.6667rem;
	margin-right: 0; /*38px*/
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	cursor: default;
	width: 10.33rem; /*155px*/ /* 155px = 10.33rem */
}

/* Normally hidden, shown only after user has clicked the order column. Arrow indicates the column is selected.*/
.lomakone-order-arrow-down {
	display: none;
	float: right;
	height: 0.5333rem; /* 10px smaller than font size in text */
	padding-left: 0.2667rem; /*4px*/
}

.lomakone-order-row-box.selected  .lomakone-order-arrow-down {
	display: inline;
}

.lomakone-order-row-box.header:hover, .lomakone-order-row-box.matkavahti:hover {
	background-color: transparent;
}
/* order container styles end */


/* Mobile: Matkavahti container. Modal window. */

#lomakone-matkavahti-container, #errordialog-container {
	display: none; /* Hidden by default */
	/*display: block;*/ /*debug*/
	position: fixed; /* Stay in place */
	z-index: 1001; /* higher than .site-navbar, since we want to show this, not navbar. */
	top: 0;
	left: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	
	/*opacity: 0;*/
	/*visibility: hidden;*/
}

/* Show when user clicks matkavahti link.*/
#lomakone-matkavahti-container.opened, #errordialog-container.opened {
	display: block;
}

.lomakone-matkavahti-content {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ffffff;
	padding: 1rem 1.5rem;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

.lomakone-matkavahti-content p {
	margin-top: 1rem;
}

.lomakone-matkavahti-content .block__body.second {
	margin-top: 1rem;
}

.lomakone-matkavahti-content .block__body input {
	width: 95%;
	padding: 0.66667rem 0.66667rem;
	background-color: #ffffff;
	margin-bottom: 1rem;
}

.lomakone-matkavahti-content .filters.dropbox {
	width: 95%;
}

.lomakone-matkavahti-content .block__body label {
	width: 95%;
}

.lomakone-matkavahti-content .block__body select {
	width: 95%;
	background-color: #ffffff;
	padding: 0.3333rem;
}

/* Mobile: Contains order newletter checkbox. */
.lomakone-matkavahti-content .checkbox-div {
	margin-top: 1rem;
}

.lomakone-matkavahti-content .checkbox-div label {
	width: 80%;
	margin-left: 0.6667rem;
}

.lomakone-matkavahti-content .block__body input#newsletter {
	width: auto;
	vertical-align: 50%;
}

.lomakone-matkavahti-content #matkavahtisubmit, #errordialogsubmit, #lomakone-red-button-close-matkavahti .button-matkavahti {
	position: relative;
	display: block;
	width: 100%; /* 16rem */
	height: 3rem; /*3 rem = 45px*/ /*2.333rem*/ /*35px*/
	padding: 0.8rem 0.3333rem;
	min-height: 2.333rem;
	background-color: #81c341; /* #e74c3c red*/
	box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.15);
	border-radius: 6px;
	color: #fff;
	text-align: center;
	font-size: 1.2rem; /*1.2rem = 18px*/
	letter-spacing: normal;
	line-height:  1.6rem; /*24px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	border: 0;
	margin: 1rem 1rem 1rem 0;
}

#errordialogsubmit {
	width: 50%;
}

#lomakone-red-button-close-matkavahti .button-matkavahti {
	background-color: #e74c3c;
	height: auto;
	/*width: 16rem;*/
}

#lomakone-matkavahti-container .lomakone-button-close-matkavahti {
	position: relative;
	display: block;
	float: right;
	width: 4.267rem; /*64px*/
	height: 1.667rem; /*25px*/
	padding: 0.2rem 0.3333rem;
	background-color: #333f48;
	border-radius: 0.4rem; /*6px*/
	color: #ffffff;
	text-align: center;
	font-size: 1.067rem; /*16px*/
	letter-spacing: normal;
	line-height:  1.267rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	/*border: 1px solid #333f48*/;
	margin: 0 auto;
}


/* matkavahti container styles end */


/* Always same width, until styles for next width take over. */
.lomakone-results-container {
	width: 23rem; /*345px 97% 21.33rem = 320px 19 rem = 300px - base font is 15px*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
}

/* Mobile: Ad styles - mobile has it's own ad spots and it doesn't show any normal desktop ads. Mobile's ad spots have word mobile in their class. */

/* Mobile: Desktop ads are HIDDEN in mobile. */
.lomakone-results-skyscrapers {	display: none; }
/*.lomakone-results-horizontal-ads { display: none; }*/
.lomakone-results-horizontal-ads-3 { display: none; }

/* Mobile: Contains ads between results on mobile. 300x300 sized ads. */
.lomakone-results-horizontal-ads,
.lomakone-results-horizontal-ads-mobile { /*was .lomakone-results-horizontal-ads-mobile*/
	position: relative;
	display: block;
	float: left; 
	width: 100%; /*160px = 10.67rem*/
	/*margin-top: 1.533rem;*/ /*40px = 2.667rem - 0.667rem (result rows margin) = 2rem*/
	/*margin-bottom: 2rem;*/ /*40px = 2.667rem, result rows don't have top margin */
}

/* Extra class that can be added when ad spot gets no actual ad and we need to remove margin top and bottom. */

.lomakone-results-horizontal-ads-mobile.lomakone-ad-no-margins,
.lomakone-results-horizontal-ads.lomakone-ad-no-margins {
	margin-top: 0;
	margin-bottom: 0;
}

/* Mobile: Large horizontal ad spot. Can get ad sizes 300x300 and 300x600.*/
/* Mobile specific class is not in use, use same wide class and it's parent as in desktop. */
.lomakone-results-horizontal-ads .horizontal-ad-wide,
.lomakone-results-horizontal-ads-mobile .horizontal-ad-wide {
	position: relative;
	width: 20rem; /*300px = 20rem*/
	/*min-height: 20rem;*/ /*300px = 20rem*/
	/*max-height: 40rem;*/ /*600px*/
	height: auto; 
	background-color: transparent; /* #cccccc for test purposes */
	margin-left: auto;
	margin-right: auto;
}

/* Mobile: Large horizontal ad spot. Width 600, height 600. Add this extra style. Can be used */
.lomakone-results-horizontal-ads-mobile .horizontal-ad-wide.w600h600 {
	display: none; /* NOT IN USE IN MOBILE WIDTHS LESS THAN 600 */
	width: 40rem; /*600px*/
	/*height: 40rem;*/ /*600px*/
	height: auto;
}

#default_result_info {
	 background: transparent;
	 border: none;
	 box-shadow: none;
	 min-height: 2rem;
}

#default_result_info .info_text {
	width: 100%;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	font-size: 1.2rem;
}

#default_result_covidinfo {
	 background: transparent;
	 border: none;
	 box-shadow: none;
	 min-height: 1.5rem;
	 margin-bottom: 1.2rem;
}

#default_result_covidinfo .info_text {
	width: 100%;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	font-size: 1.1rem;
}

.lomakone-results-row {
	position: relative;
	float: left;
	width: 100%;
	border: 1px solid #eff1f5; /*was #EAEDF2*/
	background-color: #ffffff;
	margin-bottom: 0.5333rem; /*7px*/
	box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.07);
}

.lomakone-results-row.recommended {
	border: 2px solid #81c341;
	border-top: 2rem solid #81c341;
}

.lomakone-results-row.recommended .recommended-text {
	position: absolute;
	top: -1.733rem;
	left: 0.2667rem;
	text-transform: uppercase;
	color: #ffffff;
	font-weight: 600;
	line-height: 1.6rem;
}

/* Yellow star svg */
.lomakone-results-row.recommended .recommended-text img {
	height: 1.133rem; /*18px, 17px = 1.133rem;*/
	padding-right: 0.2rem;
	vertical-align: text-top;
}

.lomakone-yellow-star { /* not in use */
	font-size: 1.6rem;
	line-height: 1.6rem;
	vertical-align: text-top;
}

/* Mobile 360: Special styles for recommended row */
.lomakone-results-row.recommended .lomakone-row-image {
	display: block;
	float: left;
	width: 10.13rem; /*152px*/
	margin-bottom: 6rem;
}

/* Ekstra div that gives green background to sponsored row. */
.lomakone-results-row.recommended .green-bg-mobile {
	width: 12.93rem; /*185px*/
	/*width: 12.13rem;*/ /*182px = 12.13rem*/
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #f7fbf3;
	border-left: 1px solid #eaeaea;
}

.lomakone-results-row.recommended .lomakone-row-destination {
	width: 12.13rem; /*182px = 12.13rem*/
}

.lomakone-results-row.recommended .lomakone-row-time {
	width: 12.13rem; /*182px = 12.13rem*/
	padding-left: 0.8rem;
}
.lomakone-results-row.recommended .lomakone-row-weather {
	height: 5.533rem; /*83px*/
	width: 10.13rem; /*152px*/
	padding-left: 0;
}

.lomakone-results-row.recommended .lomakone-row-weather .lomakone-weather-icon {
	width: 3.667rem; /*55px = 3.667rem*/
	height: 3.067rem; /*46px*/
	margin-left: auto;
	margin-right: auto;
}

.lomakone-results-row.recommended .lomakone-row-weather .lomakone-weather-temperature-icon-mobile {
	display: block;
	position: absolute;
	left: 2.3333rem; /*0.4667rem*/
	bottom: 1rem; /*0.9333rem*/
	width: 1rem;
}

.lomakone-results-row.recommended .lomakone-row-weather .lomakone-weather-degrees {
	font-size: 1.267rem; /*19px*/
	bottom: 1.867rem; /* 1.867rem 28px 0.6667rem */
	left: 2rem;
	width: 55%;
}

.lomakone-results-row.recommended .lomakone-row-partner {
	float: none;
	position: absolute;
	top: 6.333rem; /*95px*/
	left: 0;
	width: 10.13rem; /*152px*/
	height: 5.333rem; /*80px*/ /*4.667rem 70px*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
}

.lomakone-results-row.recommended .lomakone-row-button {
	width: 10.13rem;
	padding-top: 1.333rem;
}

.lomakone-results-row.recommended .lomakone-row-button .lomakone-price-deeplink a {
	background-color: #81c341;
	width: 10.67rem; /*160px x 50px*/
	height: 3.333rem;
	padding: 0.8rem 0.3333rem;
	font-size: 1.733rem;
}

/* Mobile: Containers on one result row. */
/* Some div's currently hidden, instead make the absolute positioned and put the inside info-box. */
.lomakone-row-image {display: none; float: left;} /*dont show image on mobile */
.lomakone-row-destination {position: relative; float: left; height: 100%; width: 64%; padding-left: 0.8rem; /*12px*/ padding-top: 0.6667rem; padding-bottom: 0.3333rem;}
.lomakone-row-time {position: relative; float: left; height: 100%; width: 35%; padding-top: 0.6667rem; padding-bottom: 1.3333rem; /*slightly higher than destination to allow weather to float all the way to left*/}
.lomakone-row-weather {display: block; position: relative; float: left; height: 4.667rem; /*70px*/ text-align: center; padding-left: 0.8rem; clear: left;}
.lomakone-row-partner {width: 6rem; /*90px*/ display: block; position: relative; float: left; height: 4.667rem; /*70px*/ text-align: left; margin-left: 7.333rem; padding-top: 0.3333rem;}
.lomakone-row-price {display: none; position: relative; float: left; height: 100%; width: 100%; padding: 0.3333rem 0.6667rem 0.3333rem 1.333rem; /*border-top: 1px solid #eff1f5;*/ background-color: #FAFBFC;}
.lomakone-row-button { float: right; width: 30%; height: 4.667rem; padding-top: 1rem; /*25px*/ padding-right: 0.5333rem; border: none; background-color: transparent;}
.lomakone-row-info {position: relative; float: left; height: 100%; width: 100%; padding-left: 0.8rem; /*12px*/ padding-top: 0.6667rem; padding-bottom: 0.6667rem; }

/* Additional info box contains in mobile also flight duration, weather info, partner logo and extra red button.*/

/* Not used in akkilahdot, only in lomakone */
.lomakone-row-additional-info-box {position: relative; float: left; height: 100%; border-top: 1px solid #eff1f5; }

.lomakone-single-image { max-width: 100%; max-height: 100%; float: left;}

.lomakone-destination-city {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	font-size: 1.333rem;
	line-height: 1.3; /* less space between lines for long destination names */
}

.lomakone-destination-l4 { font-size: 0.9333rem; font-weight: bold; line-height: 1.333rem; }
.lomakone-destination-hotelname { float:left; /*font-family: Arial, sans-serif;*/ font-size: 0.9333rem; /*14px*/ line-height: 1.333rem;}
.lomakone-destination-hotelrating { float: left; font-size: 1.467rem; line-height: 1.0; color: #8B8B8B; width: 100%;}
.lomakone-destination-hotelrating img { padding-right: 0.2rem; /*3px*/ height: 1.133rem; /*17px*/} /* img is svg star */
.lomakone-green-star { color: #81C341; } /*not in use, used if stars were done with star character from font */
.lomakone-yellow-star { color: #fcd700; } /* not in use */
.lomakone-destination-infolink {
	display: none; /*hidden in mobile*/
	position: relative;
	width: 8rem;
	font-family: 'Roboto Condensed', sans-serif; 
	color: #8B8B8B; 
	font-size: 0.9333rem; /*14px*/ 
	text-transform: uppercase;
	clear: left;
	padding-top: 1rem; 
}

/* Link only shown in mobile, is located near deeplink button. */
.lomakone-destination-infolink-mobile {
	position: relative;
	float: left;
	width: 8rem;
	font-family: 'Roboto Condensed', sans-serif; 
	color: #8B8B8B; 
	font-size: 0.9333rem; /*14px*/ 
	text-transform: uppercase;
	clear: left;
	padding-top: 0.4667rem;
	margin-right: 0.6667rem; /*2.667rem = 40px*/
}

.lomakone-infolink-arrow {
	float: right;
	height: 8px; /*13px*/
}

.lomakone-destination-onlyflights { color: #E74C3C; line-height: 1.9;}

.lomakone-time-date {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	font-size: 1.333rem;
}
.lomakone-time-departurecity { font-size: 0.9333rem; /*14px*/ line-height: 1rem; }
.lomakone-time-flightinfo { font-size: 0.9333rem; /*14px*/ display: none;}

.lomakone-weather-icon { width: 100%; height: 2rem; /*30px*/ width: 3rem; /*45px*/ text-align: center; }
.lomakone-weather-temperature-icon-mobile {
	display: block;
	position: absolute;
	width: 100%;
	left: 1rem; /*0.4667rem*/
	bottom: 0.3333rem; /*0.9333rem*/
}
.lomakone-weather-degrees {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	/*font-size: 0.9333rem;*/
	font-size: 1.067rem; /*16px*/
	position: absolute;
	width: 100%;
	left: 2rem; /*0.4667rem*/
	bottom: 1rem; /*0.9333rem*/
	line-height: 1.1;
}

/* Shown only in mobile, just text, desktop shows normal logo. */
.lomakone-partner-logo { display: block; position: relative; height: 100%; }
.lomakone-partner-logo img { /*this positions image in the middle, both horizontally and vertically */
	max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.lomakone-price-price {
	display: none;
	position: relative;
	width: 100%;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	font-size: 1.2rem; /*18px*/
	/*font-size: 1.733rem;*/ /*26px*/
	color: #333F48;
}
.lomakone-price-duration {display: none;}

/* Shown only in mobile, just text that is in the 'right' column, desktop shows this in a different spot. */
.lomakone-price-duration-mobile { }

.lomakone-price-deeplink {float: right; clear: none;}

/* Removed .lomakone-button-matkavahti from the list since it is only a text link, not a button. */
.lomakone-price-deeplink a, .filters-button, #filters-showmore, .filters-showless,
.lomakone-button-filter, .lomakone-button-filter-close,  .lomakone-button-order, .lomakone-mobile-price-deeplink a {
	position: relative;
	display: block;
	width: 6.667rem; /*100px*/ /*4.8rem*/ /*72px*/
	height: 3rem; /*3 rem = 45px*/ /*2.333rem*/ /*35px*/
	padding: 0.8rem 0.3333rem;
	min-height: 2.333rem;
	background-color: #81c341; /* #e74c3c red*/
	box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.15);
	border-radius: 6px;
	color: #fff;
	text-align: center;
	font-size: 1.2rem; /*1.2rem = 18px*/
	letter-spacing: normal;
	line-height:  1.6rem; /*24px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	/*transition: background-color .3s cubic-bezier(.215,.61,.355,1);*/
	border: 0;
	margin: 0 auto;
}

/* ***** Mobile: Buttons ******** */

.filters-button {
	/*width: 8.333rem;*/ /*125px - same in desktop sizes*/
	/*height: 3.3333rem;*/ /*50px*/
	width: 9.667rem; /*145px*/
	height: 3.2rem; /*48px*/
}

.lomakone-departure-container .filters-button,
.lomakone-destination-container .filters-button {
	width: 6.667rem; /*100px*/
}

.medium .filters-button {
	width: 8.333rem;
	height: 3.3333rem;
}

/* NOT IN USE - Number of results shown only in mobile in the red button.*/
/*.filters-button #lomakone-mobile-count {
	display: inline;
}*/

.lomakone-price-deeplink a {
	font-size: 1.467rem; /*22px*/
	line-height: 1.0;
	padding-bottom: 0.3333rem;
}

/* Button inside additional info box with text varaa. */
.lomakone-mobile-price-deeplink a {
	width: 5.667rem;
	padding: 0.3333rem 0.6667rem 0.3333rem 0.6667rem;
	margin: 0 0;
}

/* This button is only shown in mobile, button that closes filters view */
.lomakone-button-filter-close {
	float: right;
	background-color: #81C341;
	color: #ffffff;
	width: 11.07rem; /*166px*/
	height: 3rem; /*45px*/
	line-height:  1.2rem; /*18px*/
	margin: 0 0 0 0; /*0 10px 0 0*/
	padding-top: 0.8667rem;
}

#filters-showmore {
	/*background-color: #ffffff;*/
	/*color: #333F48;*/
	/*width: 13.33rem;*/ /*200px - smaller when closed*/
	background-color: transparent;
	box-shadow: none;
	color: #81c341;
	font-size: 0.9333rem; /*15px*/
	width: 13.33rem; /*200px - smaller when closed*/
	height: auto; /*35px*/
	min-height: 1rem;
	padding: 0.3333rem 0.3333rem 0.3333rem 0.3333rem;
}

#filters-showmore svg {
	width: 1rem;
	height: auto;
	max-height: 13px;
	margin-left: 0.3333rem;
	color: #81c341;
}

/* Doesn't use svg image, but normal html entity. */
#filters-showmore .filters-showmore-opened-text .minus {
	font-size: 1.6rem;
	line-height: 1rem;
	margin-left: 0.3333rem;
}

/*FIXME*/
#lomakone-filter-container.opened #filters-showmore {
	width: 23.33rem; /*350px - wide when opened*/
}

/* When filters are closed. */
#filters-showmore .filters-showmore-closed-text {
	display: inline-block;
}

#filters-showmore .filters-showmore-opened-text {
	display: none;
}

/* When filters are open.*/
#lomakone-filter-container.opened #filters-showmore .filters-showmore-closed-text {
	display: none;
}

#lomakone-filter-container.opened #filters-showmore .filters-showmore-opened-text {
	display: inline-block;
}

/* Old from lomakone - little bell in a green square button */
/*.lomakone-button-matkavahti a {
	float: left;
	background-color: #81C341;
	color: #ffffff;
	width:  3.2rem; 48px
	height: 3rem; 45px
	line-height:  1.2rem; 18px
	padding-top: 0.8667rem; 13px
	padding-left: 0.8667rem;
}*/

/* Mobile: only link text in mobile, button in desktop. */
.lomakone-button-matkavahti {
	color: #333f48;
	text-decoration: underline;
	width: 70%;
	/*min-height: 2.333rem;*/
	text-align: center;
	/*font-size: 1.2rem;*/ /*1.2rem = 18px*/
	letter-spacing: normal;
	/*line-height:  1.6rem;*/ /*24px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	border: 0;
	margin: 0 auto;
	
	/* old red button styles */
	/*background-color: #e74c3c;
	color: #ffffff;
	width:  12.67rem; 190px
	height: 3.333rem;
	width: 8.3333rem; 125px = 8.333rem 
	font-size: 1rem;
	text-align: left;
	padding-left: 0.6667rem; 10px
	padding-top: 0.6667rem; 10px*/
}

/* This text is only shown in mobile */
.lomakone-text-count {
	font-size: 1.133rem;
	text-align: center;
	font-weight: 600;
	/*width: 19.33rem;*/ /*129px*/
	width: 100%;
	margin: 0 0 0 0;
	padding: 0.6667rem;
	background-color: #f5f5f5;
}

/* This text is only shown in mobile */
.lomakone-button-filter {
	float: left;
	background-color: #81C341;
	color: #ffffff;
	width:  8.533rem; /*128px*/
	height: auto; /*45px*/
	line-height:  1.2rem; /*18px*/
	margin: 0 0.6667rem 0 1.133rem; /*0 10px 0 1.133rem*/
	padding-top: 0.4667rem;
}

/* This button is only shown in mobile - contains a select that looks like text. Is actually a dropdown menu for filtering results */
.lomakone-button-order {
	float: right;
	background-color: transparent;
	color: #81c341;
	width: 11.33rem; /*170px = 11.33rem - 20px less than select to get custom arrow on right */
	height: auto;
	line-height: 1.2rem; /*18px*/
	margin: 0 0.4667rem 0 0; /*0 10px 0 0*/
	padding-top: 0.4667rem;
	/*padding-top: 0;*/
	overflow: hidden;
	box-shadow: none;
	background: url('https://www2.rantapallo.fi/akkilahdot/img/arrow_down_order_green.svg') 85% / 8% no-repeat;
}

.lomakone-button-order select {
	background: transparent;
	font-size: 1.2rem;
	font-weight: 600;
	color: #81c341;
	height: auto;
	padding: 0.3333rem 0;
	margin-top: 0;
	/*padding: 0;*/ /* If you add too much padding here, the options won't show in IE */
	width: 10.67rem; /*160px = 10.67rem - 20px wider than container so it gives space to custom arrow on right*/
	width: 12.67rem; /*190px =  12.67rem - 20px wider than container so it gives space to custom arrow on right*/
	/*border-radius: 6px;*/
	line-height: 1.2rem;
	cursor: pointer;
	
	border: none;
	box-shadow: none;
	background-image: none;
    -webkit-appearance: none;
}

.lomakone-button-order select:focus {
    outline: none;
}

.lomakone-price-deeplink a:focus {
	background-color: #e43725;
	color: #fff;
	outline: 0
}

/* Mobile: Styles for results show more button.*/

.lomakone-show-more-results-container {
	width: 100%;
	border: 1px solid #81c341;
	background-color: #81c341;
	font-family: 
}

#lomakone-show-more-results-link {
	color: #ffffff;
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	font-size: 0.9333rem;
	font-weight: 600;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	cursor: pointer;
	padding: 1em;
}

/* Mobile: Styles for additional info boxes content. */
.lomakone-info-box-image { position: relative; float: left; width: 100%; margin-top: 2.667rem; /*40px*/ }
.lomakone-info-box-hotel { /*position: relative;*/ /*don't set to relative, so that header is positioned in relation to whole info box to the top.*/  float: left; width: 100%; }
.lomakone-info-box-hotelfacts {display: none; position: relative; float: left; color: #000000; }

.lomakone-info-box-image .lomakone-single-image { width: 50%; }
.lomakone-info-box-image-overlay { position: absolute; bottom: 0; right: 0; height: 100%; width: 50%; z-index: 2; background-color: #000000; opacity: 0.5; }
.lomakone-info-box-image-text { /*this positions text in the middle, both horizontally and vertically */
	position: absolute; 
	bottom: 0;
	right: 0;
	height: 100%; 
	width: 50%; 
	color: #ffffff; 
	font-family: 'Roboto Condensed', sans-serif; 
	font-size: 1.2rem; /*18px*/; 
	font-weight: normal; 
	z-index: 10; 
	text-align: center;
	padding-top: 11%;
}

.lomakone-info-box-hotelname { position: absolute; top: 0; float: left; width: 100%; font-size: 1rem; /*15px*/  color: #81C341; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; padding: 0.4667rem 1.2rem 0.4667rem 1.2rem; }
.lomakone-info-box-hoteldescription {float: left; width: 100%; font-size: 0.9333rem; /*14px*/ color: #000000; padding: 0.6667rem 1.2rem 0.8rem 1.2rem;}

.lomakone-info-box-factsheader { color: #81C341; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }

/* Mobile only additional info - shown below hotel information */
.lomakone-mobile-additional-info {} /* container for mobile only info */

.lomakone-mobile-left-col { float: left; width: 65%; padding-left: 1.2rem; padding-bottom: 1rem;}
.lomakone-mobile-right-col { float: right; width: 33%; padding-right: 1.2rem; padding-bottom: 1rem;}

.lomakone-mobile-flightinfo { float: left; width: 12rem; font-size: 0.9333rem; line-height: 1.267rem;}
.lomakone-mobile-flightinfo-icon {float: left; width: 2rem; /*30px*/ height: 2.2rem; margin-right: 0.8rem; /*12px*/ margin-top: 0.1333rem;}

.lomakone-mobile-partner-logo {float: left; width: 100%; height: 3.2rem; padding-top: 0.5333rem; /*8px*/}
.lomakone-mobile-partner-logo img { max-height: 100%; margin-top: 0.3333rem; margin-left: 0.2rem;}

.lomakone-mobile-weather { float: left; width: 100%; padding-bottom: 1rem; }
.lomakone-mobile-weather-icon { float: left; width: 2.667rem; height: 2.2rem; /*33px*/ /*text-align: left;*/ }
.lomakone-mobile-weather-degrees {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	font-size: 1.067rem;
	
	position: relative;
	float: left;
	width: 50%;
	line-height: 1.1;
	padding-left: 0.3333rem;
	padding-top: 0.6667rem;
}

.lomakone-mobile-price {float: left; position: relative; width: 100%;}
.lomakone-mobile-price-deeplink { position: relative; }
.lomakone-mobile-price-deeplink .arrow-right { display: inline-block; float:right; font-size: 0.8rem; margin-top: 0.2rem; height: 0.9333rem;}

/* Hotel facts are not shown in mobile sizes.*/

/*.lomakone-info-box-facts-col {}
.lomakone-info-box-factname {}
.lomakone-info-box-factvalue {}*/


 

/* ******** Mobile styles 600px and above - large mobile - These only contain necessary changes. ********* */
@media only screen and (min-width: 600px) {
	
/* Full width, contains filters and order row. Background image must be 800px wide.*/ 
.lomakone-container-filter-and-order {
	background: #f5f5f5 no-repeat left top;
}
	
#lomakone-filter-container, #lomakone-filter-container-top  {
	width: 96%;
	/*height: 12.67rem;*/ /*190px*/
}
	
/*#filters-choose-days-mobile {
	padding: 1.3333rem 0.3333rem 1rem 1rem;
}*/
	
.block__body.destination {
	/*width: 71%;*/ /*34.33rem = 515px 33rem =495px*/
	padding-top: 0;
	/*padding-right: 0;*/
}

/* NOT IN USE - Used when there is additional medium style in lomakone-filter-container.*/
/*.medium .block__body.destination {
	width: 100%; 34.33rem = 515px 33rem =495px
	padding-top: 0;
	padding-right: 0.6667rem;
}*/

.block__body.destination .form-field {
	width: 50%; /*50%*/
	float: left;
	margin-top: 0.5333rem;
}

.block__body.destination #inputdestination.form-input, #autocomp-destination.form-input {
	width: 97%;
}

.block__body.destination #inputdeparture.form-input, #autocomp-departure.form-input {
	width: 97%;
}

/* Div that looks like normal input, but isn't really. Show here selected departure places.*/
#chosen-departure, #chosen-destination {
	width: 97%;
}

/*.medium .block__body.destination #inputdestination.form-input {
	width: 97%;
}

.medium .block__body.destination #inputdeparture.form-input, #autocomp-departure.form-input {
	width: 97%;
}*/

/* Mobile 600: Desktop only - Normal filter activate button, when filters are in small mode. */
#lomakone-filter-container-top .block__body.button {
	/*float: right;*/
	/*width: 10.667rem;*/ /*155px*/
	/*margin-top: -4.133rem;*/ /*was used with earlier one row layout */
	padding-left: 0;
	/*padding-right: 1rem;*/
	padding-top: 0;
}

/* NOT IN USE - Mobile 600: Desktop only - Normal filter activate button, when filters are in small mode. Style in medium size. */
/*#lomakone-filter-container.medium .block__body.button {
	float: right;
	width: 10.667rem;
	margin-top: 0.3333rem;
	padding-left: 0;
	padding-right: 1rem;
	padding-top: 0;
}*/

.block__body.selected_criteria .selected_criteria_list { /*ul*/
	width: 80%;
}

/* Always same width, until styles for next width take over. */
.lomakone-results-container {
	width: 38.8rem; /*582px = 38.8rem - base font is 15px*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
}

/* Mobile 600: Ad styles*/
.lomakone-results-horizontal-ads-mobile .horizontal-ad-wide.w600h600 {
	display: block; /* USED IN MOBILE WIDTHS 600 AND ABOVE */
}

/* Mobile 600: Sponsored row.*/

.lomakone-results-row.recommended {
	height: 16rem; /*240px = 16rem*/
}

/* Ekstra div that gives green background to sponsored row. */
.lomakone-results-row.recommended .green-bg-mobile {
	width: 28.4rem; /*426px*/ 
	/*width: 12.13rem;*/ /*182px = 12.13rem*/
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #f7fbf3;
	border-left: 1px solid #eaeaea;
}

/* Special styles for recommended row */
.lomakone-results-row.recommended .lomakone-row-image {
	width: 10.33rem; /*155px*/
}

.lomakone-results-row.recommended .lomakone-row-destination {
	width: 17.13rem; /*182px = 12.13rem*/
	padding-left: 1rem;
	padding-top: 0.8rem;
}

.lomakone-results-row.recommended .lomakone-row-time {
	width: 12.13rem; /*182px = 12.13rem*/
	padding-left: 1rem;
	padding-top: 1.667rem;
	height: 100%;
	position: absolute;
	top: 5.667rem; /*same as destination's height */
	left: 10.13rem; /* same as image's width */
}
.lomakone-results-row.recommended .lomakone-row-weather {
	height: 5.53rem; /*83px = 5.533rem*/
	width: 10.13rem; /*152px*/
	padding-left: 0;
	position: absolute;
	top: 6.667rem; /*same as destination's height + 1rem*/
	left: 0;
}

.lomakone-results-row.recommended .lomakone-row-partner {
	float: right;
	position: relative;
	top: 0;
	right: 0;
	width: 10.67rem; /*160px 10.13rem = 152px*/
	height: 6rem; /*5.333rem = 80px*/ /*4.667rem 70px*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-left: 0;
	padding-right: 0;
}

.lomakone-results-row.recommended .lomakone-row-weather .lomakone-weather-degrees {
	font-size: 1.267rem; /*19px*/
	bottom: 0; /* 1.867rem 28px 0.6667rem */
	left: 0;
	margin-top: 1.333rem;
}

.lomakone-results-row.recommended .lomakone-row-button .lomakone-price-deeplink a {
	width: 7.333rem; /*110px*/
}

/* Less width, to make room for weather icon. */
.lomakone-row-destination { width: 37.2%; /*was 64%*/ }
.lomakone-row-time {
    width: 23.9%;
}
.lomakone-row-weather {
    width: 16.2%;
    height: 4.6667rem; /*120px*/
    padding: 1rem 0.6667rem 1.3333rem 0.6667rem;
    text-align: center;
    clear: none; /* counter clear:left from smallest mobile size */
}

/* 600px */
.lomakone-row-partner { width: 22.7%; /*width: 5.667rem;*/ /*85px*/ display: block; position: relative; float: left; height: 3.667rem; /* 3.667rem = 55px*/ text-align: left; margin-left: 0; /*counter earlier mobile*/ padding-left: 1.6rem; padding-right: 1.6rem; /*padding-top: 0.6667rem; padding-bottom: 0.6667rem;*/}
.lomakone-row-button { width: 22.7%; height: 4rem; /*60px*/ padding-top: 0; /*25px*/ padding-right: 1rem; border: none; background-color: transparent; text-align: center;}

.lomakone-weather-icon { width: 2.667rem; height: 2.2rem; text-align: center; margin-left: auto; margin-right: auto;}
.lomakone-weather-temperature-icon-mobile {	display: none; }
.lomakone-weather-degrees {
	position: relative;
	width: 2.667rem;
	left: 0;
	/*bottom: 0.9333rem;*/ /*0.9333rem*/
	/*font-size: 1.133rem;*/ /*17px*/
	font-size: 1.2rem;
	line-height: 1.1; /*1.1*/
	/*margin-top: 1.3333rem;*/
	margin-top: 1rem;
	margin-left: auto;
	margin-right: auto;
}

.lomakone-text-count {
	font-size: 1.2rem;
}

.lomakone-order-row-box.header {
	margin-right: 1rem;
}

.lomakone-button-order {
	float: left;
}

	
/* Put the extra space back so that content isn't hidden under top menu.*/
.site-hero + .site-content {
    margin-top: 1.333rem; /*is 0rem in small mobile with mobile menu in use */
    padding-top: 0;
}

#default_result_covidinfo .info_text {
	padding-left: 2rem; 
	padding-right: 2rem;
}
	
} /* end of mobile styles for 600px */





/* ****** Mobile styles tablet 800px and above - These only contain necessary changes. 

800px is a mix of mobile size and desktops layout.

******* */
@media only screen and (min-width: 800px) {

/* Shows only in tablet size. */
.tablet-only { display: inline-block; }

/* Tablet: Hero needs same styles as desktop. */

.hero__container {
	display: block; /* counter mobile hiding, this is the first size that shows hero image. */
	margin-bottom: 0;
	padding-top: 2.5rem;
	padding-bottom: 0.8rem;
	padding-left: 0;
	padding-right: 0;
	height:  14.53rem; /*218px*/
	max-width: 100%;
}

.hero__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 70%;
}

.hero__cover--dim::after {
	opacity: 0;
}

.site-hero {
	border-bottom: none; /* no border in lomakone */
}

.hero__heading {
	font-family: 'Roboto Condensed', sans-serif;
	letter-spacing: 0;
	font-size:  2.667rem; /*42px 2.667rem = 40px */
	font-weight: 100;
	line-height: 1.2;
	/*text-shadow: 0 2px 4px rgba(40,50,57,.4);*/
	text-shadow: none;
	color: #333f48;
	margin-top: 6.8rem; /* new */
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: transparent; /* Fallback color */
	background-color: rgba(255,255,255,0.4); /* White w/ opacity */
}

.site-hero + .site-content {
    margin-top: 0;
    padding-top: 0;
}

.lomakone-container-filter-and-order {
	background-image: none; /* don't show image behind form */
	width: 100%;
	margin-top: 0;
	padding-top: 0;
}

#lomakone-filter-container, #lomakone-filter-container-top {
	width: 100%;
	/*height: 8.533rem;*/ /*128px = 8.533rem*/
	margin-bottom: 0;
}

.filters-button {
	width: 8.333rem; /*125px = 8.333rem*/
	height: 3.3333rem; /*50px*/
}

.block__body.mobile-filter-top-box {
    display: none;
}

/*#filters-choose-days-mobile {
	padding: 4rem 0.3333rem 1rem 2rem;
	width: 30%;
}*/

.block__body.destination {
	width: 100%; /*was 56%*/
	padding-top: 1rem;
	padding-right: 0;
}

/* Div that looks like normal input, but isn't really. Show here selected departure places.*/
#chosen-departure, #chosen-destination {
	width: 96%;
}

/* Order row's text on the same level as buttons. */
.lomakone-order-container {
	height: 3.333rem; /*50px 65px 4.333rem*/
	padding-top: 0.3333rem
}

.lomakone-button-order select {
	font-size: 1rem;
}

/* Tablet 800px: originally hidden, shown when medium and opened styles are present. */
/*#filters-showmore {
	display: none;
}*/

#lomakone-filter-container-top.medium #filters-showmore {
	display: block;
}

#lomakone-filter-container.opened #filters-showmore  {
	display: block;
}

.lomakone-text-count {
    display: none;
}

/* Always same width, until styles for next width take over. */
.lomakone-results-container {
	width: 52.33rem; /*785px = 52.33rem - base font is 15px*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
}

.lomakone-results-row {
	min-height: 5.667rem;
	margin-bottom: 0.6667rem;
	box-shadow: none;
}


/* Mobile 800: Sponsored row.*/

.lomakone-results-row.recommended {
    min-height: 7.8rem; /*5.667rem + 2rem = 7.667rem + 2px (.133rem) for bottom border  */
    height: auto; /* needs to have dynamic height */
    background-color: #f7fbf3; /* green bg */
    
    /* fixes the floated childrens borders to continue in changing height result row */
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	align-items: stretch;
	/* FIXME: Add browser specific names and check compatibility with most browsers */
	flex-wrap: wrap; 
}

/* Ekstra div that gives green background to sponsored row. */
.lomakone-results-row.recommended .green-bg-mobile {
	display: none;
}

/* Tablet 800: Special styles for recommended row */
.lomakone-results-row.recommended .lomakone-row-image {
	width: 16.6%;
	/*height: 5.667rem;*/
	margin-bottom: 0; /* Counter extra margin from mobile */
}

.lomakone-results-row.recommended .lomakone-row-destination {
	width: 28%;
	padding-left: 1rem;
	padding-top: 0.533rem;
	padding-bottom: 0.6667rem;
	border-right: 1px solid #eff1f5;
	height: auto;
	overflow: auto;
}

.lomakone-results-row.recommended .lomakone-row-time {
	width: 17.5%;
	padding-left: 1rem;
	padding-top: 0.5333rem;
	min-height: 5.667rem;
	height: auto;
	position: relative; /*counter earlier mobile */
	top: 0; /*counter earlier mobile */
	left: 0; /*counter earlier mobile */
	overflow: auto;
}
.lomakone-results-row.recommended .lomakone-row-weather {
	/*display: block;*/
	min-height: 5.667rem;
	height: auto;
	width: 8%;
	padding: 0.5333rem 0.6667rem 1.3333rem 0.6667rem;
	position: relative;
	float: left;
	text-align: center;
	top: 0; /*counter earlier mobile */
	left: 0; /*counter earlier mobile */
}

.lomakone-results-row.recommended .lomakone-row-partner {
	float: left;
	position: relative;
	top: 0;
	right: 0;
	width: 15%;
	height: 5.667rem;
	margin-left: 0;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0.6667rem;
	padding-right: 0.6667rem;
}

.lomakone-results-row.recommended .lomakone-row-button {
	float: left;
    width: 14.9%;
    height: 5.667rem;
    padding-top: 1.333rem;
	padding-left: 0.333rem;
	border: none;
	background-color: transparent;
}

.lomakone-results-row.recommended .lomakone-row-button .lomakone-price-deeplink a {
	width: 6.667rem;
	height: 3rem;
	padding: 0.8rem 0.3333rem;
	font-size: 1.467rem;
}

/* 800px: styles for recommended weather icon */
.lomakone-results-row.recommended .lomakone-row-weather .lomakone-weather-icon { width: 2.667rem; height: 2.2rem; text-align: center; margin-left: auto; margin-right: auto;}
.lomakone-results-row.recommended .lomakone-row-weather .lomakone-weather-temperature-icon-mobile { display: none; }
.lomakone-results-row.recommended .lomakone-row-weather .lomakone-weather-degrees {
	position: relative;
	width: 2.667rem;
	left: 0;
	/*bottom: 0.9333rem;*/ /*0.9333rem*/
	font-size: 1.133rem; /*17px*/
	line-height: 1.1;
	margin-top: 0.3333rem;
	margin-left: auto;
	margin-right: auto;
}

/* Tablet 800px: Row styles */

/* NOT IN USE */
.lomakone-row-image {
	display: block;
	width: 16.6%;
    height: 5.667rem; /*85px*/
}

/* Tablet: Different widths, to make room for picture and red button. */
.lomakone-row-destination {
	width: 44.6%; /*28+16.6 since image not in use anymore*/
	height: 5.667rem; /*85px*/
	padding-top: 0.5333rem;
	padding-left: 1rem;
	padding-bottom: 0.6667rem;
	border-right: 1px solid #eff1f5;
}

.lomakone-row-time {
    width: 17.5%;
    height: 5.667rem;
    padding-top: 0.5333rem;
    padding-left: 1rem; /*20px*/
    border-right: 1px solid #eff1f5;
    /*border: none;*/
}

.lomakone-row-weather {
    display: block;
    position: relative;
    float: left;
    width: 8%;
    height: 5.667rem;
    padding: 0.5333rem 0.6667rem 1.3333rem 0.6667rem;
    text-align: center;
    border-right: 1px solid #eff1f5;
}

.lomakone-row-partner {
	float: left;
	width: 15%;
	text-align: center;
	/*border-right: 1px solid #eff1f5;*/
	border: none;
	height: 5.667rem;
	margin-left: 0; /*counter mobile*/
	padding-left: 0.6667rem;
	padding-right: 0.6667rem;
}

.lomakone-row-button {
	float: left;
	width: 14.9%;
	height: 5.667rem;
	padding-top: 1.333rem;
	padding-left: 0.333rem;
	border: none;
	background-color: transparent;
}

.lomakone-single-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.lomakone-destination-city { font-size: 1.2rem; }
.lomakone-time-date { font-size: 1.2rem; }
.lomakone-weather-degrees { line-height: 1.5;}
.lomakone-partner-logo-mobile { line-height: 1.9; }

.lomakone-price-deeplink { float: left; clear: both; width: 100%;}

} /*end of 800px tablet styles*/




/* *********** Desktop styles 1278px and above (narrow desktop) *************** */

@media only screen and (min-width: 1278px) {

/* Override some common styles from other stylesheets. */
.hero__container {
	display: block; /*counter mobile hiding*/
	margin-bottom: 0;
	padding-top: 2.5rem;
	padding-bottom: 0.8rem;
	padding-left: 0;
	padding-right: 0;
	height: 14.53rem: /*218px*/
	max-width: 100%;
}

.hero__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 70%;
}

.hero__cover--dim::after {
	opacity: 0;
}

.site-hero {
	border-bottom: none; /* no border in lomakone */
}

.hero__heading {
	font-family: 'Roboto Condensed', sans-serif;
	letter-spacing: 0;
	font-size:  2.667rem; /*42px 2.667rem = 40px */
	font-weight: 100;
	line-height: 1.2;
	/*text-shadow: 0 2px 4px rgba(40,50,57,.4);*/
	text-shadow: none;
	color: #333f48;
	margin-top: 6.8rem; /* new */
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: transparent; /* Fallback color */
	background-color: rgba(255,255,255,0.4); /* White w/ opacity */
}

.site-hero + .site-content {
    margin-top: 0;
    padding-top: 0;
}

.mobile-only { display: none; }
.tablet-only { display: none; }
.desktop-only { display: block; }

/* Full width, contains filters and order row. */ 
.lomakone-container-filter-and-order {
	position: relative;
	width: 100%;
	margin-top: 0;
	padding-top: 0; /* counter mobile */
	/*margin-bottom: 0;*/
	background-image: none; /* counter mobile */
}

.lomakone-container {
	width: 85.2rem; /* 1280px = 85.33rem, 1278px = 85.2rem */
	/*width: 100%;*/
	margin-left: auto;
	margin-right: auto;
}

.lomakone-go-to-top {
	width: 100%;
	position: fixed;
	top: 0;
	/* bottom: 0; */
	cursor: pointer;
}

.lomakone-go-to-top-link {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Desktop: filter styles */
#lomakone-filter-container-top {
	display: block;
	width: 100%; /*counter mobile*/
	background-color: #EAEDF2;
	min-height: 9.667rem; /*145px smallest height, no filter selections shown under inputs */
	/*height: 11.6rem;*/ /*174px medium height, use when one filter selections shown under inputs */
	height: auto; /* used so top part of filters is correct height even when filter selections are not shown */
	/*overflow: visible;*/ /* this must be visible to be able to show the full pop-up, if hidden, pop-up is cut off */
	/*height: auto;*/ /*debug - used when developing filters*/
	margin-bottom: 0; /*counter mobile*/
}

/* Left floating filters on desktop. */
#lomakone-filter-container {
	display: block;
	float: left;
	width: 18rem; /* 270px counter mobile*/
	background-color: #ffffff;
	min-height: 9.667rem; /*145px smallest height, no filter selections shown under inputs */
	/*height: 11.6rem;*/ /*174px medium height, use when one filter selections shown under inputs */
	height: auto; /* used so top part of filters is correct height even when filter selections are not shown */
	overflow: hidden;
	/*height: auto;*/ /*debug - used when developing filters*/
	margin-bottom: 0; /*counter mobile */
	margin-top: 1.467rem; /*22px*/
	margin-left: 0.6667rem; /*10px 1.2rem = 18px*/ /* more space for wide ad */
	/*padding-bottom: 1.333rem;*/ /*20px = 1.333rem space at the bottom*/
	box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.07);
}

/* Add style opened, when user clicks filters open - makes all the filters show. */
#lomakone-filter-container.opened {
	height: auto;
	padding-bottom: 0.6667rem;
}

.form-field__icon--left {
    right: auto;
    left: 1rem;
}

/* Top filters user this. */
/* FIXME make slightly wider */
.lomakone-filter-row {
	position: relative;
	width: 86.67rem; /*was 86.67rem 1300px - base font is 15px*/
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
}

#lomakone-filter-container .lomakone-filter-row {
	width: 100%;
}

/* Desktop: containers for departure and destination pop ups. Contain checkboxes.
In desktop, don't grey out whole page and make this static, so we can position checkboxes in relation to these parent div.*/
.lomakone-departure-container, .lomakone-destination-container {
	display: none; /* Hidden by default */
	/*display: block;*/ /*debug*/
	position: static; /* this is position: fixed in mobile */
	height: auto;
	width: auto;
	background-color: transparent;
}

.lomakone-departure-content, .lomakone-destination-content {
	position: absolute;
	/*top: 20%;*/ /*103px = 6.867rem*/
	/*left: 20%;*/
	top: auto;
	left: auto;
	width: 54rem;
	padding: 0.3rem 0.3rem; /*0.3rem 1.2rem*/
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
	border: solid 1px #efefef;
}

.lomakone-departure-content {
	width: 18.27rem;
}

.pop-up-heading {
	width: 80%;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.267rem;
	font-weight: 400;
	line-height: 1.2;
	padding-top: 0.5333rem;
	padding-bottom: 0.5333rem;
	padding-left: 1rem;
}

/* Desktop: X that closes pop-ups. */
.lomakone-button-close-pop-up {
	text-align: right;
	margin: 0.5333rem 0.8rem 0.5333rem 0;
	cursor: pointer;
}

/* Always show filters on desktop 1278 and up. These are hidden in mobile at first. */
#lomakone-hidden-filter-container {
	display: block;
	background-color: #ffffff; /*counter mobile*/
	width: 100%; /* counter mobile */
	position: relative; /* counter mobile fixed - we use modal way of showing these in mobile */
	z-index: 1; /* counter mobile - lower than .site-navbar, since we want to show navbar. */
}

.lomakone-hidden-filter-content { /* contains the actual filters */
	width: 100%; /* counter mobile */
}

/* Show when user clicks more filters link.*/
#lomakone-filter-container.opened #lomakone-hidden-filter-container {
	display: block;
}

.lomakone-top-box-mobile, .lomakone-bottom-box-mobile {
	display: none;
}

.lomakone-top-box-desktop {
	display: block;
	height: 3.133rem; /*47px*/
	color: #333f48;
	font-size: 1.2rem; /*18px*/
	letter-spacing: normal;
	line-height:  1.267rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	padding-top: 0.6667rem;
	padding-left: 0.6667rem; /*10px = 0.6667rem*/
	padding-right: 0.6667rem;
	border-bottom: 0.0667rem solid #eaeaea;
}

.lomakone-button-clear-filters-desktop {
	position: relative;
	display: block;
	float: right;
	width: 7.333rem; /*110px*/
	height: 1.667rem; /*25px*/
	padding: 0.2rem 0.3333rem 0.2rem 0.3333rem;
	background-color: #ffffff;
	border-radius: 0.4rem; /*6px*/
	color: #81c341;
	text-align: center;
	font-size: 1.067rem; /*16px*/
	letter-spacing: normal;
	line-height:  1.267rem; /*19px*/
	font-family: 'Roboto Condensed',sans-serif;
	font-weight: 600;
	border: 0;
	margin: 0 auto;
	cursor: pointer;
}

.lomakone-filters-text-desktop {
	text-transform: uppercase;
	line-height:  1.267rem; /*19px*/
	padding-top: 0.2666rem;
	width: 35%;
}

#filters-choose-days-mobile { display: none; /*mobile only*/}

.akkilahdot-wrapper {
    overflow: visible; /* needs to be visible to show full pop-up */ /*when this is hidden, box shows only partially */
}

.lomakone-sidebar {
	position: relative;
	width: 100%;
	/*padding: 2rem 5.2rem 2rem 5.2rem;*/ /*30px 78px*/
	padding: 0 0 0 0; /*0rem 0rem 4rem 1.563rem 30px 25px*/
}

/* More space for show less link at the bottom of the filters. */
.opened .lomakone-sidebar {
	padding-bottom: 1.667rem; 
}

.block__body {
	float: left;
	width: 100%; /*was 25%*/
	padding: 1rem 0.6667rem 1rem 0.6667rem; /*10px = 0.6667rem*/
}

#lomakone-hidden-filter-container .block__body {
	/*border-bottom: none;*/
	/*border-bottom: 0.06667rem solid #cccccc;*/ /*#eff1f5*/
	border-bottom: 0.06667rem solid #eaeaea;
	background-color: #ffffff; /*counter mobile*/
	padding-bottom: 1.533rem;; /* counter mobile */
}

/* Opening and closing filter rows are used also in desktop filters. */
#lomakone-hidden-filter-container .block__body .toggle-filter-row-mobile {
	/*display: block;*/
}

#lomakone-filter-container #lomakone-hidden-filter-container #agency,
#lomakone-filter-container #lomakone-hidden-filter-container #category {
	/*height: auto;*/ /*counter mobile*/
	height: 3.333rem;
}

#agency-headers, #agency-selections {
	/*display: block;*/
}

#category-headers, #category-selections {
	/*display: block;*/
}

/* Desktop: shows agency count in mobile - not in use in desktop */
.agency-count-mobile {
	display: none;
}

#destcountriesfilter.block__body p {
	padding-left: 1rem;
}

.block__body input {
	color: #000000;
	border-radius: 8px;
	padding: 1rem 0.66667rem;
}

.block__body.mobile-filter-top-box {
	display: none; /* mobile only box */
}

/* These were the widths when filters were above results in wide area. Since they are on the left in a narrow column, they are now all 100% wide. */
.block__body.width95 {
	width: 100%;
	/*padding-right: 0;*/
}

.block__body.width65 {
	/*width: 65%;*/
	width: 100%;
	/*padding-right: 0;*/
}

.block__body.width30 {
	/*width: 30%;*/
	width: 100%;
}

.block__body.width25 {
	/*width: 25%;*/
	width: 100%;
}

.block__body.width20 {
	/*width: 20%;*/
	width: 100%;
}

.block__body.wide {
	float: left;
	width: 100%;
}

.block__body.wide.price {
	padding-top: 0;
}

.block__body.destination {
	width: 37rem; /*540px = 36rem, was 31rem 465px*/
	padding-right: 0;
	padding-top: 1rem; /*counter mobile*/
	font-size: 1.067rem; /*16px = 1.067rem*/
}

.block__body.destination .form-field {
	/*width: 50%;*/ /*33rem =495px*/
	width: auto;
	float: left;
	margin-top: 0.75rem;
	padding-right: 0.5333rem; /*8px*/
}

.block__body.destination #departure-selections.form-field {
	margin-top: 0;
}

/* Desktop: input that opens autocomplete. Had earlier id #inputdestination, but is now #autocomp-destination. */
.block__body.destination #inputdestination.form-input, .block__body.destination #autocomp-destination.form-input {
	/*width: 97%;*/ /*495px*/
	width: 20.93rem; /* 314px = 20.93rem, 13.87rem = 208px */
	padding-left: 1.25rem; /* plane icon is hidden on desktop, so leave less space for it */
	padding-top: 0.6667rem;
	padding-bottom: 0.6667rem;
}

#chosen-destination { width: 20.93rem; /* 314px = 20.93rem, 13.87rem = 208px */ }

/* Desktop: input that opens autocomplete. Had earlier id #inputdeparture, but is now #autocomp-departure. */
.block__body.destination #inputdeparture.form-input, .block__body.destination #autocomp-departure.form-input, #autocomp-destination.form-input {
	/*width: 97%;*/ /*495px*/
	width: 13.87rem; /* 13.87rem = 208px */
	padding-left: 1.25rem; /* plane icon is hidden on desktop, so leave less space for it */
	padding-top: 0.6667rem;
	padding-bottom: 0.6667rem;
}

#chosen-departure { width: 13.87rem; /* 13.87rem = 208px */ }

/* Airport pop up checkboxes to one column. */
.block__body.destination .lomakone-departure-content .form-field {
	width: 100%;
	margin-top: 0.5333rem; /* less height per row */
}

/* Airport pop up only input's container slightly less to give space for closing X on the right. */
.block__body.destination .lomakone-departure-content .form-field.first-input,
.block__body.destination .lomakone-destination-content .form-field.first-input {
	width: 85%;
	padding-left: 1rem;
}

.block__body.destination .lomakone-departure-content .block__body {
	padding-top: 0;
	padding-right: 1.6667rem; /* give space for x */
}

/* Desktop: styles for destination checkboxes */

/* Styles for the ul elements that contain the checkboxes. In desktop show 3 ul's side by side. */
.lomakone-destination-content .treeview-list {
	width: 30%;
    padding-left: 0;
    margin-right: 1.667rem;
    margin-bottom: 0;
    list-style: none;
}

/* #destcountriesfilter contains destination checkboxes. Is a treeview waith ul and li elements. */
.lomakone-destination-content #destcountriesfilter .form-field {
	width: 100%; /*50%*/
	float: left;
	margin-top: 0.2rem; /*0.5333rem*/
	margin-left: 0;
	/*margin-right: 1rem;*/
	border-bottom: 1px solid #d4d4d4; /*efefef*/
	padding-bottom: 0.3333rem; /*was 0.5333rem*/
}

.lomakone-destination-content #destcountriesfilter #destcountries-headers {
	margin-left: 1rem;
	margin-bottom: 0; /* was 0.3333rem */
}

.lomakone-destination-content #destcountriesfilter #destcountries-headers.form-field {
	margin-left: 0;
	padding-left: 1rem;
	width: 100%;
	margin-top: 0; /* less space between autocomplete input and the checkboxes */
}

.lomakone-destination-content #destcountriesfilter #destcountries-headers.form-field .form-field {
	border-bottom: none;
}

.lomakone-destination-content #destcountriesfilter #destcountries-headers .col--inputs {
	padding-left: 0;
	width: 30%;
}

.lomakone-destination-content #destcountriesfilter #destcountries-selections {
	margin-left: 1rem;
	/*border-top: 1px solid #efefef;*/
	/*clear: both;*/
}

.lomakone-destination-content #destcountriesfilter #destcountries-selections .form-field.level3 {
	width: 100%;
	display: none;
	margin-left: 0;
	/*padding-left: 1rem;*/
	border-bottom: 1px solid #d4d4d4; /*border in desktop*/
}

.block__body.dates {
	display: block; /*counter hiding in mobile*/
	width: 20rem; /*300px = 20rem, 395px = 26.33rem*/
	padding-left: 0;
	padding-right: 0;
	font-size: 1.067rem; /*16px = 1.067rem*/
}

.block__body.dates .form-field {
	width: 50%; /*33rem =495px*/
	float: left;
}

.block__body.dates #inputearliestdate.form-input {
	width: 94%; /*495px*/
}

.block__body.dates #inputlatestdate.form-input {
	width: 94%; /*495px*/
}

.block__body.triptypes {
	display: block; /*counter hiding in mobile*/
	width: 8rem; /*125px = 8.333rem 120px = 8rem*/
	padding-left: 0;
	padding-right: 0;
	margin-top: 2.333rem;
}

#covidfilters {
	padding-top: 1.6667rem;
}

.form-checkbox-input {
    display: inline-block;
    height: 1.5rem; /*1.667rem = 25px 17px = 1.133rem*/
    width: 1.5rem;
    background-color: #fff;
    border: 1px solid rgba(40,50,57,.2);
        border-top-color: rgba(40, 50, 57, 0.2);
        border-right-color: rgba(40, 50, 57, 0.2);
        border-bottom-color: rgba(40, 50, 57, 0.2);
        border-left-color: rgba(40, 50, 57, 0.2);
    position: absolute;
    top: 0.2667rem; /*4px - was 0.333rem*/
    text-align: center;
    line-height: 2;
    transition: border-color .3s cubic-bezier(.215,.61,.355,1);
    border-radius: 0.3333rem;
}

.form-checkbox-input::after {
    position: absolute;
    content: "";
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJyBmaWxsPScjZmZmJz48cGF0aCBkPSdNMTEuNSAxOC4yTDI0LjkgNC45YzEuNi0xLjYgNC4zLTEuNiA1LjkgMCAxLjYgMS42IDEuNiA0LjMgMCA1LjlMMTYgMjUuNmMtLjIuMi0uNS40LS44LjYtLjIuMy0uNC43LS43LjktMS42IDEuNi00LjMgMS42LTUuOSAwbC03LjQtNy40Yy0xLjYtMS42LTEuNi00LjMgMC01LjkgMS42LTEuNiA0LjMtMS42IDUuOSAwbDQuNCA0LjR6Jy8+PC9zdmc+);
    top: 20%;
    left: 20%;
    background-size: contain;
    width: 60%; /* size of white selected mark */
    height: 60%;
}

.form-checkbox-input + .label--checkbox {
    position: relative;
    margin-left: 2.25rem;
    margin-top: .3rem;
    margin-bottom: .1rem;
    line-height: 1.3; /*1.1*/
    cursor: pointer;
}

/* Own styles for triptypes small checkboxes. */
.block__body.triptypes .form-checkbox-input {
	height: 1.133rem; /*1.5rem = 24px 17px = 1.133rem*/
    width: 1.133rem;
    top: 0.3333rem;
    line-height: 2;
}

.block__body.triptypes .form-checkbox-input::after {
    position: absolute;
    content: "";
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJyBmaWxsPScjZmZmJz48cGF0aCBkPSdNMTEuNSAxOC4yTDI0LjkgNC45YzEuNi0xLjYgNC4zLTEuNiA1LjkgMCAxLjYgMS42IDEuNiA0LjMgMCA1LjlMMTYgMjUuNmMtLjIuMi0uNS40LS44LjYtLjIuMy0uNC43LS43LjktMS42IDEuNi00LjMgMS42LTUuOSAwbC03LjQtNy40Yy0xLjYtMS42LTEuNi00LjMgMC01LjkgMS42LTEuNiA0LjMtMS42IDUuOSAwbDQuNCA0LjR6Jy8+PC9zdmc+);
    top: 20%;
    left: 20%;
    background-size: contain;
    width: 60%;
    height: 60%;
}

.block__body.triptypes .form-group-inline .form-field label {
    line-height: 1.333rem;
}

.block__body.triptypes .form-checkbox-input + .label--checkbox {
    position: relative;
    margin-left: 1.6rem; /*24px = 1.6rem*/
    margin-top: .2rem;
    margin-bottom: .2rem;
    line-height: 1.1;
    cursor: pointer;
}

.block__body.selected_criteria {
	display: block;
	width: 100%; /*14rem 210px*/
	margin: 0 auto 0 auto;
	padding: 0.4667rem 0 0 1rem;
	overflow: hidden; /* contain floats */
}

#filters-selected-criteria-destination, #filters-selected-criteria-departure {
	overflow: hidden;
}

.block__body.selected_criteria .selected_criteria_list { /*ul*/
	display: inline-block;
	float: right; /*counter mobile*/
	width: 91%; /*counter mobile*/
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	text-transform: uppercase;
	margin-left: 1.333rem;
	font-size: 0.9333rem;
}

.block__body.selected_criteria .selected_criteria_list li {
	display: inline-block;
	color: #333F48;
	margin-right: 1.6rem; /*24px*/
}

/* .block__body.selected_criteria .selected_criteria_list li a {
	color: #333F48; 
} */

.block__body.selected_criteria .selected_criteria_list li:hover {
	cursor: pointer;
	color: #848b91; 
}

.block__body.selected_criteria .selected_criteria_list li .times {
    font-weight: 700;
    color: #e74c3c;
    padding-right: .25rem;
}

#lomakone-filter-container-top .block__body.showmore {
	display: block;
	width: 100%; /*14rem 210px*/
	margin: 0 auto 0 auto;
	padding: 0;
}

/*FIXME*/
/* Open filters text's container. Is at the bottom of filter container when it's in opened state. */
#lomakone-filter-container.opened .block__body.showmore {
	float: none;
	position: absolute;
	bottom: 0; /*0.3333rem*/
	width: 100%;
	clear: both;
	margin: 0 auto 0 auto;
}

/* Agency filter */
#agency-headers.row.form-field {
	/*width: 40.711%;*/ /* old wide filters, width: 28.3%; */
	width: 100%;
	float: left;
	margin-right: 0rem;
}

/* Left side filters are now full width. */
.col--inputs {
	/*width: 20%;*/ /* old wide filters, width: 14%; */ /*Style to make checkbox inputs be side by side.*/
	width: 100%;
	float: left;
	/*padding-right: 1rem;*/
}

/* Add class wide for extra long agency names */
.col--inputs.wide {
	/*width: 28%;*/ /*old wide filters*/
	width: 100%;
}

/* Style to make checkbox inputs be side by side.*/
.hotelrating .col--inputs {
	width: 14%;
	float: left;
	padding-right: 1rem;
}

.hotelrating #hclass-selections label:hover ~ label:before {
  color: #81c341;
}

.hotelrating #hclass-selections label:hover:before {
  color: #81c341;
}

/* Normal text checkbox, not a star for undefined hotel only in desktop (also in mobile).*/
.hotelrating .col--inputs.undefined-hotel-div {
	width: 100%;
}

/* Give the only not star normal checkboxes styles. */
.hotelrating #hclass-selections .undefined-hotel-div input {
  clip: auto; /*counters star style, important, without this user can't click checkbox*/
  position: absolute;
  top: 0;
  left: 0;
  height: 1.75rem;
  width: 100%;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  color: #000000;
  border-radius: 8px;
  padding: 1rem 0.66667rem;
}

/* Hides normal checkbox from mobile. Shows it in desktop. */
/*.hotelrating .col--inputs.undefined-hotel-div span.form-checkbox-input.desktop-only {
	display: inline-block;
}*/

.hotelrating .col--inputs.undefined-hotel-div span.form-checkbox-input {
	display: inline-block;
}

.hotelrating  #hclass-selections .undefined-hotel-div label {
  position: relative;
  /*float: right;*/
  color: #333F48;
  margin-top: .5rem;
  margin-bottom: .1rem;
  font-family: 'Roboto Condensed',sans-serif;
  margin-left: 2.25rem; /*leaves space for checkbox*/
  font-size: 1rem;
}

/* don't show star since shows normal checkbox instead */
.hotelrating #hclass-selections .undefined-hotel-div label:before {
   display: none;
}

#agency-headers .col--inputs {
	/*width: 50%;*/ /*old wide filters*/
	width: 100%;
	padding-right: 1rem;
}

/* Prevents second column dropping too low. */
.form-field .col + .col {
    margin-top: 0; /*.75rem*/
}

/* Normal filter activate button, when filters are in small mode. */
#lomakone-filter-container-top .block__body.button {
	float: left; /*counter mobile float right*/
	width: 9.667rem; /*145px*/
	margin-top: 2rem;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0.5333rem;
}

/* Button container inside pop up filters. */
#lomakone-filter-container-top .lomakone-departure-container .block__body.button,
#lomakone-filter-container-top .lomakone-destination-container .block__body.button {
	margin-top: 0;
	padding-top: 0;
	padding-left: 1rem;
}

/* NOT IN USE in akkilahdot, doesn't change location - Activate the filters button's container. Is at the bottom of filter container when it's in opened state. */
/*#lomakone-filter-container.opened .block__body.button {
	float: none;
	position: absolute;
	bottom: 0;
	width: 100%;
	clear: both;
	margin: 0 auto 0 auto;
}*/

/* 1278 px */
#lomakone-filter-container-top .block__body.matkavahti {
	display: block; /* counter mobile */
	
	/*FIXME DEBUG - hide after styles are ready */ display: block !important;
	
	float: left;
	margin-left: 0;
	margin-right: 0;
	margin-top: 2rem;
	padding: 0.5333rem 0 1rem 0.3333rem;
	width: auto;
}

.matkavahti-bell {
	float: left;
	display: block;
	height: 1.4rem; /* same as font size in text */
	max-width: 1.3333rem; /* added width, so chrome shows svg inside this narrow enough */
	margin-right: 0.6667rem; /*10px*/
	margin-top: 0.3333rem; /*5px*/
}

.matkavahti-text {
	float: left;
	display: block;
	max-width: 1.3333rem; /* added width, so chrome shows svg inside this narrow enough */
	font-size: 0.8667rem; /* 14px = 0.9333rem 0.8667rem = 13px*/
	line-height: 1.2;
}

.input-range-delimiter {
	color: #333F48;
	line-height: 3;
	text-align: center;
}

.form-label {
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 1.067rem; /*15px 16px = 1.067rem*/
    font-weight: bold;
}

.copy--heading-primary {
	text-transform: none;
	color: #81C341;
}

/* Inout headers */
.copy--h5 {
	font-family: 'Roboto Condensed',sans-serif;
	font-size: 1.067rem; /*16px*/
	font-weight: 600;
}

.copy--h5 + * {
    margin-top: .75rem;
}

.copy--h5 + .slider-container {
	margin-top: 0;
}

.copy--h5 + #targetareafilters { /* Less space under matkakohteet heading. */
    margin-top: 0.3333rem;
}

/* Desktop: Forms slider styles */

.slider-container {
    width: 100%; /* Width of the outside container */
}

#price_inputs_container, #duration_inputs_container {
	width: 98%; /*was 93%*/
}

#priceatleast, #price, #durationatleast, #duration, #temperaturemin, #temperaturemax, #tripduration-amount, .dash-after-slidervalue, .char-after-slidervalue, .word-after-slidervalue {
	
}

#priceatleast {
	margin-left: 7rem; /*was 8rem*/
}

#temperaturemax {
	text-align: left;
	width: 1.3333rem;
}

#temperaturemin {
	margin-left: 9rem; /*was 10rem*/
}

/* Jquery ui slider styles */

.ui-slider {
	position: relative;
	text-align: left;
	/*margin-top: 0.6667rem;*/
	margin-top: 0;
}
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

.ui-slider-horizontal { 
	height: 0.6667rem;
	width: 90%; /*80%*/
	cursor: pointer;
	background: #c9dfbc; /* green/grey slider #81C341*/
	border-radius: 25px;
	border: none;
	box-shadow: none;
	margin-left: 0.2rem; /* counter mobile */
}
.ui-slider-horizontal .ui-slider-handle {
	/*top: -.3em;*/
	top: -.8rem;
	margin-left: -.6em;
	/* custom styles below */
	width: 2.2rem; /* Set a specific slider handle width */
    height: 2.2rem;; /* 33px Slider handle height */
    border-radius: 50%;
    background: #81C341; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border: 4px solid #FAFBFC; /*#EAEDF2*/
	
}
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; background: #81C341;}
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* End of slider styles */

/* Desktop: Styles for button like checkboxes - could be done with jquery ui? */

.lomakone-checkbox-button input[type=checkbox] {
   position: absolute;
   opacity: 0;
   /* For mobile, it's typically better to position checkbox on top of clickable
      area and turn opacity to 0 instead. */
}

/* Hide normal checkbox 'box'. Show the styled label instead.*/
.lomakone-checkbox-button input[type=checkbox] {
	visibility: hidden;
}

/*.form-checkbox-input::after - makes the old version of input box, remove from html when button type cehckbox is used */

.lomakone-checkbox-button label {
	display: inline-block;
	margin: 0 0 0 0; /*0 0 0.6667rem 0, 10px*/
	cursor: pointer;
	color: #333F48;
	width: 100%;
	overflow: auto; /*keeps tworow text buttons inline with others */
}

/*.lomakone-checkbox-button label.tworows {
	line-height: 1.2rem;
}*/

/* Additional style for two row target area. */
/*.lomakone-checkbox-button label span {
	position: relative; 
	display: inline-block;
	width: 70%;
	height: 3.067rem; 46px
	margin-top: 0.8rem; 12px
}*/

/* Default State */
.lomakone-checkbox-button div.form-group--checkbox {
   display: inline-block;
   background: #ffffff;
   width: 10.4rem; /*156px*/
   height: 3.333rem; /*50px*/ 
   line-height: 3.333rem;
   color: #ffffff;
   text-align: center;
   /*border: 1px solid #9b9b9b;*/
}

/* Own width for target area selection. */
.lomakone-checkbox-button.targetarea div.form-group--checkbox {
	/*width: 9.467rem;*/ /*142x58px*/
	width: auto; /*widths: 140x50 9.333rem, 121 200 172 124 238px*/
}

.lomakone-checkbox-button.targetarea div.form-group--checkbox.area1 {
	 width: 9.333rem; /*widths: 140x50 9.333rem, 121 200 172 124 238px*/
}
.lomakone-checkbox-button.targetarea div.form-group--checkbox.area2 {
	 width: 8.067rem; /*121px*/
}
.lomakone-checkbox-button.targetarea div.form-group--checkbox.area3 {
	 width: 13.33rem; /*200px*/
}
.lomakone-checkbox-button.targetarea div.form-group--checkbox.area4 {
	 width: 11.47rem; /*172px*/
}
.lomakone-checkbox-button.targetarea div.form-group--checkbox.area5 {
	 width: 8.267rem; /*124px*/
}
.lomakone-checkbox-button.targetarea div.form-group--checkbox.area6 {
	 width: 15.87rem; /*238px*/
}

/* Toggled State - selects label that has the same parent as the selected checkbox */
.lomakone-checkbox-button div.form-group--checkbox input[type=checkbox]:checked ~ label {
   background-color: #81C341;
   /*border-color: #000;*/
   color: #ffffff;
   font-weight: 700;
}

/* Styles for hotel stars filter. */
#hclass-selections {
	margin-top: 0;
}

#hclass-selections label {
	font-size: 1.6rem;
	margin-top: 0;
	color: #8B8B8B; /* grey stars */
	line-height: 1.1; /* space between stars above and down */
}

/*#hclass-selections label.undefined-hotel {
	font-size: 1rem;
	color: #333F48;
}*/


/* **** Desktop 1278px: order container, also contains matkavahti button - also done in mobile **** */

.lomakone-order-container {
	position: relative;
	width: 100%;
	height: 3.4rem; /*3.467rem 52px 3.333rem = 50px 65px 4.333rem*/
	background-color: #ffffff;
	box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.07);
	padding-top: 0; /* counter mobile*/
}

.lomakone-order-row-container {
	width: 85.33rem; /*same width as lomakone-container: results + skyscraper */
	margin-left: auto;
	margin-right: auto;
}

.lomakone-order-row {
	position: relative;
	float: left;
	width: 82.67rem; /*was 71rem, 1240px = 82.67rem - base font is 15px*/
	background-color: #ffffff;
	margin-left: 1rem;
}
.lomakone-order-row-box {
	position: relative;
	float: left;
	/*border: 1px solid #000;*/
	padding: 0.4667rem 1.6rem 0.6667rem 1.6rem; /* 0.6667rem = 10px 1.6rem = 24px 1.333rem = 20px*/
	font-family: 'Roboto Condensed', sans-serif; 
	color: #333F48; 
	font-size: 1rem; /*15px*/
	margin-top: 0.5333rem; /*10px*/
	margin-right: 0; /*2.333rem 35px*/
	text-align: center;
}

/* NOT IN USE but occupies space, just doesn't have any content. */
.lomakone-order-row-box.hotelrating {
	width: 32.4%; /*306px was 16.6%, was 22.6%, 345px = 23rem = 27.8% */
}

.lomakone-order-row-box.date {
	width: 12.1%; /*150px 14.6% = 176px*/
	cursor: pointer;
}
.lomakone-order-row-box.weather {
	width: 11.5%; /*was 13% 115px + little more for the arrow */
	padding-left: 0.6667rem;
	cursor: pointer;
}
.lomakone-order-row-box.partner {
	width: 8.2%; /*13.7% 190px*/
}
.lomakone-order-row-box.price {
	width: 8.2%; /*9.8% 115px*/
	cursor: pointer;
}

.lomakone-order-row-box.date:hover, .lomakone-order-row-box.weather:hover, .lomakone-order-row-box.price:hover  {
	background-color: transparent;
	border-bottom: 2px solid #81c341;
}

.lomakone-order-row-box.selected {
	background-color: transparent;
	padding-right: 1rem; /*normal padding 1.6rem - arrows own padding 0.2667rem = 1.3333rem */
	border-bottom: 2px solid #81c341;
	color: #81c341;
	/*font-size: 0.9333rem;*/
	font-weight: 600;
}

.lomakone-order-row-box.header {
	font-family: 'Roboto Condensed', sans-serif;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0.4667rem; /*counter mobile*/
 	margin-right: 0; /*38px*/
	font-size:  1.067rem;
	font-weight: 600;
	text-transform: none;
	cursor: default;
	width: 15.5%; /* was 18.5%, was 10.33rem*/ /*155px*/ /* 155px = 10.33rem */
}

.lomakone-order-row-box.header:hover {
	border: none;
}

/* Normally hidden, shown only after user has clicked the order column. Arrow indicates the column is selected.*/
.lomakone-order-arrow-down {
	display: none;
	float: none;
	height: 0.5333rem; /* 10px smaller than font size in text */
	padding-left: 0.2667rem; /*4px*/
	max-width: 1.3333rem; /* added width, so chrome shows svg inside this narrow enough */
}

.lomakone-order-row-box.selected  .lomakone-order-arrow-down {
	display: inline-block;
}

.lomakone-order-row-box.header:hover, .lomakone-order-row-box.matkavahti:hover {
	background-color: transparent;
}

/* Desktop: Matkavahti container. Modal window. Basic styles defined in mobile. */

.lomakone-matkavahti-content {
	top: 10%;
	left: 25%;
	width: 60rem;
	/* use these later when translate works in all browsers
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);*/
}

.lomakone-matkavahti-content .block__body {
	width: 50%;
}

.lomakone-matkavahti-content .block__body.second {
	margin-top: 0;
}

.lomakone-matkavahti-content #matkavahtisubmit:hover { background-color: #74b238; }
#lomakone-red-button-close-matkavahti .btn.matkavahti:hover { background-color: #e43725; }

/* Matkavahti container styles end */


/* al19_2 */
.lomakone-results-container {
	position: relative;
	float: left;
	width: 65.33rem; /*980px = 65.33rem 950px = 63.33rem, was 1065px = 71rem, 82.67rem = 1240px - base font is 15px*/
	margin-top: 1.467rem; /*was 0.8rem*/
	margin-left: 0.6667rem; /*10px 1rem = 15px*/
	margin-right: 0.2667rem; /*4px 1rem = 15px*/
	/*letter-spacing: -.02rem;*/
}

/* Hide mobile ads.*/
.lomakone-results-horizontal-ads-mobile { display: none; }

/* Contains skyscraper ads on right side of results. 160x600 sized ads. */
.lomakone-results-skyscrapers {
	position: relative;
	display: block; /* counter hiding in mobile */
	float: left; 
	width: 10.67rem; /*160px = 10.67rem*/
	margin-top: 0.8rem;
}

/* First ad spot. */
.lomakone-results-skyscrapers .ad-1 {
	position: relative;
	width: 10.67rem; /*160px = 10.67rem*/
	height: 40rem; /*600px = 40rem*/
	margin-bottom: 1rem;
	background-color: transparent; /* #cccccc for test purposes */
}

/* Second, sticky ad spot. */
.lomakone-results-skyscrapers .ad-2 {
	position: relative;
	width: 10.67rem; /*160px = 10.67rem*/
	height: 40rem; /*600px = 40rem*/
	background-color: transparent; /* #cccccc for test purposes */
}

/* Contains ads between results on desktop. xxx sized ads. This container can be used for one large ad as well as for many smaller square ads by using the correct inner ad css class. */
.lomakone-results-horizontal-ads {
	position: relative;
	display: block; /* counter hiding in mobile */
	float: left; 
	width: 100%; /*160px = 10.67rem*/
	/* margin-top: 2rem; */ /*40px = 2.667rem - 0.667rem (result rows margin) = 2rem*/
	/*margin-bottom: 2.667rem;*/ /*40px = 2.667rem, result rows don't have top margin */ 
}

/* Large horizontal ad spot. */
.lomakone-results-horizontal-ads .horizontal-ad-wide {
	position: relative;
	width: 65.33rem; /* 60rem 160px = 10.67rem*/
	height: auto; /* Use this with actual ads?*/
	/*height: 24.67rem;*/ /*370px = 24.67rem*/ /* debug size */
	background-color: transparent; /* #cccccc for test purposes */
	margin-left: auto;
	margin-right: auto;
}

/* Small square ad spots. 4 square spots.*/
.lomakone-results-horizontal-ads .horizontal-ad-1, .lomakone-results-horizontal-ads .horizontal-ad-2, .lomakone-results-horizontal-ads .horizontal-ad-3, .lomakone-results-horizontal-ads .horizontal-ad-4 {
	position: relative;
	float: left;
	width: 20rem; /*300px = 20rem*/
	/*height: 16.67rem;*/ /*250px = 16.67rem*/
	margin-right: 0.8667rem; /*13px = 0.8667rem*/
	background-color: transparent; /* #cccccc for test purposes */
}

/* No right margin on the last ad spot.*/
.lomakone-results-horizontal-ads .horizontal-ad-4 {
	margin-right: 0;
}

/* TEST: Small square ad spots. Only 3 square ad spots. This is ok also in 1278px wide layout. Is centered.*/
.lomakone-results-horizontal-ads-3 {
	position: relative;
	display: block; /* counter hiding in mobile */
	float: left;
	width: 100%; /*935px = 62.33rem*/
	/*margin-top: 2rem;*/ /*40px = 2.667rem - 0.667rem (result rows margin) = 2rem*/
	/*margin-bottom: 2.667rem;*/ /*40px = 2.667rem, result rows don't have top margin */
}

/* Extra container needed for centering floated small ads.*/
.lomakone-results-horizontal-ads-3 .horizontal-ads-3-inner {
	width: 62.33rem; /*935px = 62.33rem*/
	margin-left: auto;
	margin-right: auto; 
}

.lomakone-results-horizontal-ads-3 .horizontal-ad-1, .lomakone-results-horizontal-ads-3 .horizontal-ad-2, .lomakone-results-horizontal-ads-3 .horizontal-ad-3 {
	position: relative;
	float: left;
	width: 20rem; /*300px = 20rem*/
	/*height: 16.67rem;*/ /*250px = 16.67rem*/
	margin-right: 0.8667rem; /*13px = 0.8667rem*/
	background-color: transparent; /* #cccccc for test purposes */
}

/* No right margin on the last ad spot.*/
.lomakone-results-horizontal-ads-3 .horizontal-ad-3 {
	margin-right: 0;
}

#default_result_info .info_text {
	font-size: 1.333rem;
}

.lomakone-results-row {
	/*height: 7.467rem;*/ /*112px  7.333rem 110px*/
	/*height: 7.333rem;*/ /*110px*/
	min-height: 6.667rem; /*100px*/
	height: auto;
	margin-bottom: 0.6667rem;
	box-shadow: none;
	
	/* fixes the floated childrens borders to continue in changing height result row */
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	align-items: stretch;
	/* FIXME: Add browser specific names and check compatibility with most browsers */
	flex-wrap: wrap; 
}

/* Counter recommended row's mobile specific styles here. */
.lomakone-results-row.recommended {
	border: 2px solid #81c341;
	border-top: 2rem solid #81c341;
	height: auto; /* counter mobile */
	background-color: #f7fbf3;
}

.lomakone-results-row.recommended .recommended-text {
	position: absolute;
	top: -1.733rem;
	left: 0.2667rem;
	text-transform: uppercase;
	color: #ffffff;
	font-weight: 600;
	line-height: 1.6rem;
}

.lomakone-results-row.recommended .lomakone-row-image { width: 13.2%; /*was 14.6%*/ height: 100%; }
.lomakone-results-row.recommended .green-bg-mobile { display: none; }
.lomakone-results-row.recommended .lomakone-row-destination { width: 19.1%; /* was 22.6%*/ padding-top: 0.7rem; min-height: 6.667rem; height: auto; overflow: auto;}

.lomakone-results-row.recommended .lomakone-row-time { 
	width: 15.8%; /*was 14.6%*/
	min-height: 6.667rem;
	height: auto; /*100%*/
	padding-left: 1rem;
	padding-top: 1rem; /* counter mobile */
	position: relative; /* counter mobile */
	top: 0; /* counter mobile */ 
	left: 0; /* counter mobile */
	overflow: auto;
}

.lomakone-results-row.recommended .lomakone-row-weather {
	min-height: 6.667rem;
	height: auto; /*100%;*/
	width: 8.3%; /*was 9.8%*/
	padding: 1rem 1.333rem 1.333rem 1.333rem;
	position: relative; /* counter mobile */
	top: 0; /* counter mobile */
	left: 0; /* counter mobile */
}

.lomakone-results-row.recommended .lomakone-row-weather .lomakone-weather-icon {
	width: 70%;
	height: 3.467rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.lomakone-results-row.recommended .lomakone-row-weather .lomakone-weather-degrees {
	/*position: absolute;*/ /* counter mobile*/
	font-size: 1.267rem; /*19px*/
	/*bottom: 0.6667rem;
	left: 0;*/
	width: 100%;
}

.lomakone-results-row.recommended .lomakone-row-partner {
	float: left;
	position: relative;
	top: 0;
	width: 17.6%; /*was 16.9%*/
	min-height: 6.667rem;
	height: auto; /*100%;*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0; /* counter mobile */
}

.lomakone-results-row.recommended .lomakone-row-button {
	width: 15.1%; /*was 11.6%*/
	padding-top: 1.667rem; /*25px*/
}

.lomakone-results-row.recommended .lomakone-row-button .lomakone-price-deeplink a {
	width: 6.933rem; /* 105px was 92px = 6.133rem */ /*105px 6.933rem*/
	height: 3.333rem; /*50px*/
	padding: 1rem 1.333rem;
	font-size: 1.2rem;
}

.lomakone-results-row.recommended .lomakone-row-button .lomakone-price-deeplink a:focus,
.lomakone-results-row.recommended .lomakone-row-button .lomakone-price-deeplink a:hover {
	background-color: #74b238;
	color: #fff;
	outline: 0
}

.lomakone-yellow-star { /* not in use */
	font-size: 1.6rem;
	line-height: 1rem;
	vertical-align: text-top;
}
/* 1278px desktop */
/* Desktop: Containers on one result row. Own widths that are different from mobile. */

/* FIXME added min-height: 6.667rem; height: 100% to try to make these elements the height of their parent, but it doesn't work since parent has height: auto and not specific height. Try something else. Change these to the original height: height: 6.667rem; later. */

/* NOT IN USE! */ .lomakone-row-image { display: block; /*counter mobile hiding*/ width: 14.6%; /*155px = 10.33rem 12.5%*/ height: 6.667rem; /*100px*/} /* NOT IN USE! */
.lomakone-row-destination {  width: 32.3%; /*was 37.2%, 22.6+14.6%*/ min-height: 6.667rem; height: auto; border-right: 1px solid #eff1f5; padding: 1.0rem 1.2rem 0.8rem 1rem; /*20px 25px*/ }
.lomakone-row-time { width: 15.8%; /*was 14.6%*/ min-height: 6.667rem; height: auto; /*100%;*/ border-right: 1px solid #eff1f5; padding: 1.0rem 0.8rem 1.2rem 1rem; overflow: auto;}
.lomakone-row-weather { display: block; /*counter mobile style*/ position: relative; float: left; width: 8.3%; /*was 9.8%*/ min-height: 6.667rem; height: auto; /*100%;*/ border-right: 1px solid #eff1f5; padding: 1rem 1.333rem 1.333rem 1.333rem; text-align: center; clear: none; /* counter mobile */}
.lomakone-row-partner { width: 17.6%; /*was 16.9%*/ min-height: 6.667rem; text-align: center; border-right: 1px solid #eff1f5; /*padding: 1.2rem 1.6rem 1.2rem 1.6rem;*/ /*height: 6.667rem;*/ /*110px*/ height: auto; /*was 100%;*/ margin-left: 0; /*counter mobile*/}
.lomakone-row-price { display: block; /*counter mobile*/ float: left; width: 10.8%; /*was 9.8%*/ min-height: 6.667rem; height: auto; /*100%;*/ padding-top: 2rem; padding-left: 0; padding-right: 0;  border-right: 1px solid #eff1f5; background-color: transparent;}
.lomakone-row-button { float: left; width: 15.1%; /*was 11.6%*/ min-height: 6.667rem; height: 100%; padding-top: 1.667rem; /*25px*/ padding-right: 0; /*counter mobile*/ border: none; background-color: transparent;}
.lomakone-row-info {position: relative; float: left; height: 100%; width: 100%; padding-left: 0.8rem; /*12px*/ padding-top: 0.6667rem; padding-bottom: 0.6667rem; border-top: 1px solid #eff1f5; clear: both;}

/* Not used in akkilahdot, only in lomakone */
.lomakone-row-additional-info-box { /*display: none;*/ position: relative; width: 100%; clear: both; height: 14.67rem; /* 220px 14.33rem = 215px*/ /*padding: 1.2rem 1.6rem 1.2rem 0;*/ }

.lomakone-single-image { max-width: 100%; max-height: 100%; height: 6.667rem; /* same as other boxes */}

.lomakone-destination-city { font-size: 1.333rem /*font-size: 1.333rem = 20px*/ }
.lomakone-destination-hotelname { font-size: 1rem; line-height: 1.5;/*1.333rem;*/ margin-right: 0.0667rem;} /* margin-right was 0.6667rem */
.lomakone-destination-hotelrating { font-size: 1.467rem; line-height: 1.1; margin-left: 0; /*10px*/ width: 90%;}
.lomakone-destination-infolink { display: block; padding-top: 0; cursor: pointer;}
.lomakone-destination-infolink-mobile { display: none; }

.lomakone-destination-onlyflights {}

.lomakone-time-date {
	font-size: 1.333rem /*font-size: 1.333rem = 20px*/
}
.lomakone-time-departurecity { font-size: 0.9333rem; /*14px*/ line-height: 1.4;}
.lomakone-time-flightinfo { font-size: 0.9333rem; /*14px*/ display: block; /*counter mobile hiding*/}

.lomakone-weather-icon { width: 70%; height: 3.467rem; /*52px*/ text-align: center; }
.lomakone-weather-degrees {
	/*position: absolute;*/
	width: 100%;
	/*left: 0;*/
	/*bottom: 0.6667rem;*/ /*10px = 0.6667rem*/
	font-size: 1.267rem; /*19px*/
	line-height: 1.5; /*1.1*/
}

/* Shown only in mobile, just text that is in the 'right' column, desktop shows this in a different spot. */
.lomakone-price-duration-mobile { display: none;}

.lomakone-partner-logo { display: block; /*counter hiding in mobile*/ position: relative; height: 100%;}
.lomakone-partner-logo img { /*this positions image in the middle, both horizontally and vertically */
	max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.lomakone-price-price { display: block; position: relative; float: left; width: 100%; font-weight: 600; font-size: 1.733rem; /*26px*/ text-align: center; padding-right: 0; line-height: 1.0; padding-bottom: 0.4667rem; /*7px*/}
.lomakone-price-duration { display: block; /*counter mobile hiding*/ float: left; width: 100%; line-height: 1.0; /*26px*/ padding-top: 0; /*5px*/ font-size:  1.067rem; /*16px*/ text-align: center;}
.lomakone-price-duration-mobile { display: none; }
.lomakone-price-deeplink { float: none; clear:both;}
.lomakone-price-deeplink a, .filters-button, #filters-showmore, .lomakone-button-matkavahti {
	position: relative;
	display: block;
	width: 6.133rem; /*92px = 6.133rem */ /*105px 6.933rem*/
	height: 3.333rem; /*50px*/
	padding: 1rem 0.3333rem 1rem 0.3333rem;
	min-height: 2.5rem;
	background-color: #81c341; /* #e74c3c red */
	box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.15);
	border-radius: 6px;
	color: #fff;
	text-align: center;
	font-size: 1.2rem; /*18px*/
	/*letter-spacing: .5px;*/
	line-height: 1.2;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	/*transition: background-color .3s cubic-bezier(.215,.61,.355,1);*/
	border: 0;
	margin: 0 auto;
	cursor: pointer;
}

.lomakone-price-deeplink a {
	width: 6.933rem;
}

.lomakone-results-row.recommended .lomakone-price-deeplink a {
	background-color: #81c341;
}

.filters-button {
	width: 8.333rem; /*125px = 8.333rem*/
	height: 3.3333rem; /*50px*/
}

/* NOT IN USE Number of results shown only in mobile in the red button.*/
/*.filters-button #lomakone-mobile-count {
	display: none;
}*/

/* 1278px desktop: Filters always on the left and top, so hide this link. Text link, not a button. */
#filters-showmore {
	display: none;
	
	background-color: transparent;
	box-shadow: none;
	color: #81c341;
	font-size: 0.9333rem; /*15px*/
	width: 13.33rem; /*200px - smaller when closed*/
	height: auto; /*35px*/
	min-height: 1rem;
	padding: 0.3333rem 0.3333rem 0.3333rem 0.3333rem;
}

/*Fix*/
#filters-showmore.opened {
	/*width: 23.33rem;*/ /*350px - wide when opened*/
}

.lomakone-button-matkavahti {
	background-color: #ffffff;  /* was red: #e74c3c, #81C341 */
	color: #81c341; /* was white #ffffff */
	width:  12.67rem; /*190px*/
	height: 3.333rem;
	width: 8.3333rem; /* 125px = 8.333rem */
	font-size: 1rem;
	text-align: left;
	padding-left: 0.6667rem; /*10px*/
	padding-top: 0.6667rem; /*10px*/
	border: 1px solid #81c341;
}

.lomakone-text-count, .lomakone-button-filter, .lomakone-button-order {
	display: none; /*these buttons are not shown in desktop */
}

.lomakone-button-matkavahti:focus, .lomakone-button-matkavahti:hover {
	background-color: #e43725; /* dark green on hover #74b238*/
}

.lomakone-price-deeplink a:focus, .lomakone-price-deeplink a:hover,
.filters-button:focus, .filters-button:hover {
	background-color: #74b238; /* dark red on hover #e43725*/
	color: #fff;
	outline: 0
}

#filters-showmore:focus, #filters-showmore:hover {
	/*background-color: #e43725;*/
	/*color: #fff;*/
	outline: 0;
}

/* Desktop: Styles for additional info boxes content. */
.lomakone-info-box-image { width: 14%; margin-top: -1px; /*counter mobile*/ }
.lomakone-info-box-hotel { /*position: relative;*/ width: 43%; }
.lomakone-info-box-hotelfacts { display: block; /*counter mobile*/ width: 41%; }

.lomakone-info-box-image .lomakone-single-image { width: 100%; height: 50%;}
.lomakone-info-box-image-overlay { position: absolute; bottom: 0; height: 50%; width: 100%; z-index: 2; background-color: #000000; opacity: 0.5; }

.lomakone-info-box-image-text { /*this positions text in the middle, both horizontally and vertically */
	position: absolute; 
	bottom: 0; 
	height: 50%; 
	width: 100%; 
	color: #ffffff; 
	font-family: 'Roboto Condensed', sans-serif; 
	font-size: 1.333rem; /*20px*/; 
	font-weight: normal; 
	z-index: 10; 
	text-align: center;
	padding-top: 23%;
}

.lomakone-info-box-hotelname { position: relative; float: left; width: 100%; font-size: 1.333rem; /*20px*/ line-height: 1.0; padding: 1.2rem 1.6rem 1rem 1.6rem;}
.lomakone-info-box-hoteldescription { width: 90%; font-size: 1rem; padding: 0 1.6rem 1.2rem 1.6rem;}

.lomakone-info-box-factsheader { float: left; width: 100%; font-size: 1.333rem; /*20px*/ line-height: 1.0; padding: 1.2rem 1.6rem 1rem 0;}

.lomakone-info-box-facts-col { float:left; width: 50%; }
.lomakone-info-box-factname { float: left; width: 54%; }
.lomakone-info-box-factvalue { float: left; width: 45%; }

/* Desktop: Mobile only additional info not shown in desktop! */
.lomakone-mobile-additional-info { display: none; } /* contains all mobile only info */
	
} /*end of media query 1278px */

/* *********** Desktop styles 1436px and above (normal desktop, almost same as narrow desktop) *************** */

@media only screen and (min-width: 1436px) {

.hero__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 80%;
}
	
/* Contains results container and scyscraper container. */
.lomakone-container {
	width: 95.73rem; /* old wider was 1436px = 95.73rem 1300px = 86.67rem */
}

.lomakone-order-row-container {
	width: 95.73rem; /*same width as lomakone-container: results + skyscraper */
}

.lomakone-order-row {
	position: relative;
	width: 82.67rem; /*1240px - base font is 15px*/
}

.lomakone-order-row-box {
	position: relative;
	float: left;
	/*border: 1px solid #000;*/
	padding: 0.4667rem 1.6rem 0.6667rem 1.6rem; /* 0.6667rem = 10px 1.6rem = 24px 1.333rem = 20px*/
	font-family: 'Roboto Condensed', sans-serif; 
	color: #333F48; 
	font-size: 1rem; /*15px*/
	margin-top: 0.5333rem; /*10px*/
	margin-right: 0; /*2.333rem 35px*/
	text-align: center;
}

.lomakone-order-row-box.hotelrating {
	width: 32.4%; /*was 16.6%, was 27.8% 345px = 23rem = 27.8% */
}
.lomakone-order-row-box.date {
	width: 12.1%; /*14.2% 176px*/
}
.lomakone-order-row-box.weather {
	width: 11.5%; /*13.3% 9.3% 115px*/
	padding-left: 1rem;
}
.lomakone-order-row-box.partner {
	width: 8.2%; /*was 11.3%, 190px*/
}
.lomakone-order-row-box.price {
	width: 8.2%; /*9.3% 115px*/
}

.lomakone-order-row-box.header {
	font-family: 'Roboto Condensed', sans-serif;
	padding-left: 0;
	padding-right: 0;
	margin-right: 0; /*38px*/
	/*font-size: 1rem;*/
	font-weight: 600;
	/*text-transform: uppercase;*/
	cursor: default;
	width: 15.5%; /* was 18.5%, was 12.5%, 155px*/ /* 155px = 10.33rem */
}

.lomakone-matkavahti-content {
	left: 20%;
}

/* al19_2 */
.lomakone-results-container {
	width: 65.33rem; /*980px = 65.33rem 950px = 63.33rem, 82.67rem = 1240px - base font is 15px*/
	/*margin-left: auto;
	margin-right: auto;*/
}

/* Counter recommended row's mobile specific styles here - change only widths, 1280px layout counters all the other styles. As of 12.2019 same widths as in 1280, so these styles are hidden. */
/*.lomakone-results-row.recommended .lomakone-row-image { width: 12.5%; } 
.lomakone-results-row.recommended .lomakone-row-destination { width: 27.8%; }
.lomakone-results-row.recommended .lomakone-row-time { width: 14.2%; }
.lomakone-results-row.recommended .lomakone-row-weather { width: 9.3%; }
.lomakone-results-row.recommended .lomakone-row-partner { width: 15.3%; }
.lomakone-results-row.recommended .lomakone-row-button { width: 11.6%; }
.lomakone-results-row.recommended .lomakone-row-button .lomakone-price-deeplink a {
	width: 6.933rem; 125px = 8.333rem 105px 6.933rem
}*/


/* Desktop: Containers on one result row. Own widths that are different from mobile and narrow desktop. As of 12.2019 same widths as in 1280, so these styles are hidden.*/
/* NOT IN USE! */ /*.lomakone-row-image { display: block; counter mobile hiding width: 12.5%; 155px = 10.33rem 12.5% height: 6.667rem; 100px}*/ /* NOT IN USE! */
/*.lomakone-row-destination {  width: 40.3%; 27.8+12.5 since image not in use anymore height: 6.667rem; border-right: 1px solid #eff1f5; padding: 1.0rem 1.6rem 1.2rem 1.2rem; */20px 25px/* }
.lomakone-row-time { width: 14.2%; height: 6.667rem; border-right: 1px solid #eff1f5; padding: 1.0rem 1.6rem 1.2rem 1.6rem; }
.lomakone-row-weather { display: block; counter mobile style position: relative; float: left; width: 9.3%; height: 6.667rem; border-right: 1px solid #eff1f5; padding: 1rem 1.333rem 1.333rem 1.333rem; text-align: center;}
.lomakone-row-partner { width: 15.3%; height: 6.667rem; text-align: center; border-right: 1px solid #eff1f5; height: 6.667rem; 110px}
.lomakone-row-price { float: left; width: 9.3%; height: 6.667rem; padding-top: 2rem; padding-left: 0; padding-right: 0;  border-right: 1px solid #eff1f5; background-color: transparent;}
.lomakone-row-button { float: left; width: 11.6%; height: 6.667rem; padding-top: 1.667rem; 25px border: none; background-color: transparent;}*/

/*.lomakone-destination-hotelname { font-size: 1rem; line-height: 1.9;}*/
/*.lomakone-destination-hotelrating { font-size:  1.6rem; line-height: 1.1; margin-left: 0.6667rem; width: auto; }*/

/*.lomakone-price-deeplink a {
	width: 6.933rem; 125px = 8.333rem 105px 6.933rem
}*/
	
} /*end of media query 1436px */