@charset "utf-8";

html {scroll-behavior: smooth;}

* {padding:0; margin:0; border:0; outline:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
body {background-color:#fff; padding:0; color:#626262; font-family: Helvetica, Arial, sans-serif; font-size:18px; letter-spacing:1px; line-height:1.4em; margin:2px 0 0 0; -ms-text-size-adjust:100%; -moz-text-size-adjust:100%; -o-text-size-adjust:100%; -webkit-text-size-adjust:100%; transition:0.3s;}
.off {display:none !important;}
.darkmode {background-color:#292E33; color:#999; transition:0.3s;}

/* COLOUR PALETTE
lt blue 		#4d84bb	MINE
lt-med blue 	#3E6A96
med blue 		#2D4D6E
med-drk blue 	#0d253e	FOOTER BG +
drk blue 		#202B36 LI MAIN BG
drk blue-grey	#292E33	PAGE BG
lt-gry 			#f5f5f5	LISTING BG
lt-med grey		#999
gry 			#626262 
drk grey		#4a4a4a FORM INPUT
blk				#404040
green 			#669933
orange 			#d47d00
red 			#B30000		*/


img {border:none; max-width:100%;}
img.lazy {width:100%;}
img.tag {margin:0 0.1em 0 0; padding:0;}
.darkmode img {opacity:0.9 !important;}

.no-br {white-space:normal;}
.no-br-all {white-space:nowrap;}
.spacing-zero {letter-spacing:0px;}
.spacing-half {letter-spacing:.5px;}
.uline {text-decoration:underline;}
.no-uline {text-decoration:none;}
.no-uline-bld {text-decoration:none; font-weight:bold;}
p {margin:0 .3em 1em .3em; padding:0;}
p.homeIntro {display:none;}
p.center {text-align:center;}
a {outline:0; color: #4d84bb;}
a:active, a:hover, a:focus {color: #669933;}
.space a {margin-right:5px; margin-bottom:7px;}
h1, h2, h3, h4, p.brief, p.links {font-weight:bold; color:#4d84bb; font-size:1.2rem; margin:0 0 0.5em 0;}
p.brief, p.links {margin:0 .3em .5em .3em;}
p.links {clear:left;}
p.providers {font-weight:bold; font-size:.9em; color:#626262; text-transform:uppercase; margin-bottom:.1em;}
.direct-links {display:block; font-weight:normal; font-size:.8rem; color:#626262; line-height:1.1rem;}
h1 {font-size:1.4rem; line-height:1.7rem; text-align:center; padding:0.5em 0 0 0;}
h2 {line-height:1.7rem; font-size:1.3rem; letter-spacing:-1px; padding:0.5em 0;}
h3 {font-size:1.1rem;}
h4 {font-size:1.1rem;}
.sm {font-size:.9rem;}
.uppercase {text-transform:uppercase; font-size:.9em;}
h1 .subheading, h2 .subheading {display:block; font-size:1rem; color:#626262; line-height:1.4rem;}
.bott {margin-bottom:.1em;}
hr {height:1px; border-width:0; color:#999; background-color:#999;}
ul, ol {margin:0 .3em 1em .3em; padding:0 0 0 1em; display:table;}
ol {padding:0 0 0 1.6em;}
li ul, li ol {list-style:square;}
#drop ul.menu, #drop ul.sub  {margin:0; padding:0;}
.off {display:none;}
.future, .future a {text-decoration:none; color:#626262;}
a.future-blk {text-decoration:none; color:#404040;}
.jump-container {display:flex; flex-flow:row nowrap; justify-content:center; margin:0 0 1em 0; padding:0;}
ul.jump, ul.jump.col2, ul.jump.col3, ul.jump.col4 {display:grid; grid-template-columns:auto; grid-gap:0; list-style-type:none; margin:0; padding:0;}
ul.jump li {background: url(../images/bullet_jump.png) no-repeat left 4px; padding:0 0 .5em 0; margin:0;}
ul.jump a {display:block; text-decoration:none; padding-left:1.2em;}
ul.jump li.rt {background-image: url(../images/bullet_jump_right.png);}
ul.jump li.gr {background-image: url(../images/bullet_jump_gr.png);}
ul.jump li.orng {background-image: url(../images/bullet_jump_orng.png);}
ul.jump li.gr a {color:#669933;}
li.related {width:100% !important; font-weight:bold;}
ul.jump li.jump-sub {background:none;}
.lists-float {display:inline-block; margin:0 0 1em 0; width:100%;}
.lists-float ul, .lists-float ol {display:inline-block; float:left; margin-right:1em; margin-bottom:0;}

ul.section-index {list-style-type:none; margin:1em .3em .9em .3em; padding:0;}
ul.section-index li {margin:0 0 .6em 0;}

ul.related-links {list-style-type:none; padding:0;}
ul.related-links li {background: url(../images/bullet_jump_right.png) no-repeat 0 5px; padding-left:1.1em; margin:0 0 .8em 0;}
ul.related-links a {font-weight:bold;}
ul.related-links a.normal, ul.section-index a.normal {font-weight:normal;}
ul.section-index a {font-weight:bold; color:#4d84bb; background:none; margin:0 .5em 0 0;}

/* Nested lists in Related */
ul.related-links li ul, ul.related-links li ol {list-style-type:square; margin:0; padding:0;} 
ul.related-links li ul li, ul.related-links li ol li {background:none; padding:0; margin:0;}
ul.related-links li ul a, ul.related-links li ol a {font-weight:normal;}

#Metric {width:100%;}
#Metric ul {list-style:none; padding:0; margin:0 auto; margin-bottom:1em;}
#Metric p {clear:both;}
/*ULs in #Metric*/
ul.col2xw50 li, ul.col3xw33 li {float:left; white-space:nowrap;}
ul.col3xw33 li:nth-child(3n+3) {width:110px;}
ul.col2xw50 li:nth-child(2n+2), ul.col3xw33 li:nth-child(3n+2) {clear:both; width:65px;}
/* USED FOR CONVERSIONS ON GROCERIES PAGE
3n+2 means "every 3, starting at 2nd"		w3schools.com/cssref/sel_nth-child.asp */

.w80 {display:inline-block; width:80px;}
.w90 {display:inline-block; width:90px;}
.w100 {display:inline-block; width:100px;}
.w125 {display:inline-block; width:125px;}
.w150 {display:inline-block; width:150px;}
.w200 {display:inline-block; width:200px;}
.w250 {display:inline-block; width:250px;}

.blk, .blk a, a.blk {color:#404040;}
.orng, .orng a, a.orng {color:#d47d00;}
.orngBld, .orngBld a, a.orngBld {color:#d47d00; font-weight:bold;}
.gr, .gr a, a.gr {color: #669933;}
.grBld, .grBld a, a.grBld {font-weight:bold; color:#669933;}
.gry, .gry a, a.gry {color:#626262;}
.gryBld, .gryBld a, a.gryBld {font-weight:bold; color:#626262;}
.red, .red a, a.red {color:#B30000;}
.blue {color:#4d84bb;}
.hd {font-weight:bold; color:#4d84bb;}
.ulHd, .blHd, .grHd, .orngHd {font-weight:bold; margin-bottom: 0.1em;}
.blHd {color:#4d84bb;}
.grHd {color:#669933;}
.orngHd {color:#d47d00;}
/* Darkmode colours */
.darkmode .orng, .darkmode .orngBld, .darkmode .orngHd {color:#fff;}
.darkmode .blk, .darkmode .gry, .darkmode .gryBld {color:#ccc;}
.darkmode .listing-info .gry, .darkmode .listing-info .blk, .darkmode .listing-info-wide .gry, .darkmode .listing-info-wide .blk {color:#626262;}
.darkmode .red {color:#e30202;}

input[type=text], textarea, select {border-radius:5px; font-family: Arial, Helvetica, sans-serif;}
.display-off-lt450 {display:none;}
.display-off-lt768 {display:none;}
.display-off-lt1024 {display:none;}
.display-on-lt768 {display:inline;}

/* HEAD BLOCKS */
.main {padding:0; margin:0 2px 1em 2px; overflow:hidden;}
.printlogo {display:none} /* first item under -main */

/* EF: ALL HEADER ITEMS. 12x4 grid. All divs are in all pages */
.ef {display:grid; width:100%; gap:0; color:#fff;
grid-template-columns:repeat(12, auto);
grid-template-rows:repeat(4, auto);}

/* FEATURE-MOBILE Add to a site page: remove class off from <div class="feature-mobile off">*/
.feature-mobile {grid-area:span 1 / span 12;}
.feature-mobile object {display:grid; width:100%; height:32px; border:1px solid #fe5614; border-radius:5px; margin:1px 0 3px 0;}/* body has 2px top-margin */
/*	feature_mobile.html has TRANSPARENT BG from EMBEDDED CSS,
	<style>body {background:rgba(255, 255, 255, 0);}</style>
	SO object can change bg with darkmode. To ADD BG put below OR change opacity */
object[data*="feature_mobile.html"] {background:#fff;}
/* the data* asterisk selects data attributes with feature_mobile.html SOMEWHERE in them
SEE https://css-tricks.com/almanac/selectors/a/attribute/ */
.darkmode object[data*="feature_mobile.html"] {opacity:.8;}
.client {display:grid; height:28px; justify-content:center; align-content:center; margin:0; }
.client a {text-decoration:none; font-size:18px; color:#fe5614;}

.logo {grid-area:span 2 / span 6;
width:100%; min-width:160px; background:#4d84bb url(../images/logo_mobile.png) no-repeat 25% 50%; border-top-left-radius:7px; height:105px; padding:10px 0 10px 10px;}
.logo a, .logo img {height:85px; opacity:0;}

.feature, .seasons, .feature object, .seasons object {display:none;} 

.switchbox, .mobilenav {grid-area:span 1 / span 6;
width:100%; display:grid; justify-items:end;
background:#4d84bb;}
.switchbox {border-top-right-radius:7px; height:51px; padding:10px 10px 1px 0;}
.mobilenav {align-items:center; height:54px; padding:0 10px 0 0;}
.mobilenav a {display:flex; padding:0; align-items:center;
color:#fff; text-decoration:none;}
.mobilenav a img {width:29px; height:29px; margin-left:5px;}

.loc {display:none;}
.sitemap-link {display:none;}

.search {grid-area:span 1 / span 12;}
.search form {height:32px; margin:3px 0;}
.search form input[type=text] {height:32px; margin:0 0 7px 0; padding:5px; width:100%; color:#4a4a4a; text-align:center; border:1px solid #acb1b7; background:#fff url(../images/search_ani.gif) no-repeat 7px center; border-radius:5px; box-shadow:0 2px 3px #ccc inset;}
.search form ::placeholder {color:#333; font-size:1rem;}
.darkmode .search {opacity:.8;}

.submenu {grid-area:span 1 / span 12;
height:32px; background:#fcfcfc; border:1px solid #4d84bb; border-radius:5px; box-shadow:0 2px 3px #ccc inset;}
.submenu a {display:flex; font-size:1rem; height:32px; justify-content:center; align-items:center; color:#4d84bb; text-decoration:none;}
.submenu a img {padding:0 0 2px 5px;}
.darkmode .submenu {opacity:.8;}

/* DARKMODE SWITCH */
label.switch {width:100px; height:40px; position:relative; display:inline-block; background:#ebebeb; border-radius:40px; box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4), inset 0px -1px 3px rgba(255,255,255,0.4); cursor:pointer; transition:0.3s;}
label.switch:after {content: ""; width:36px; height:36px; position:absolute; top:2px; left:2px; background:linear-gradient(180deg,#ffcc89,#d8860b); border-radius:36px; box-shadow:0px 1px 2px rgba(0,0,0,0.2); transition:0.3s;}
input.switch {width:0; height:0; visibility:hidden;}
.darkmode input.switch + label.switch:after {transform:translateX(60px); background:linear-gradient(180deg,#777,#3a3a3a);}
.darkmode input.switch + label.switch {background:#191a1c;}
label.switch svg {position:absolute; width:24px; top:8px; z-index:100;}
label.switch svg.sun {left:8px; fill:none; stroke:#fff; stroke-width:1.2; stroke-linecap:square; transition:0.3s;}
label.switch svg.moon {left:68px; fill:#777; transition:0.3s;}
.darkmode input.switch + label.switch svg.sun {stroke:#777;}
.darkmode input.switch + label.switch svg.moon {fill:#fff;}

/* ADS FOR MOBILE */
.rightmobile {clear:both; display:block; width:auto; text-align:center; margin:0 0 .7em 0;}
.rightmobile img {width:100%; min-width:280px; max-width:450px; height:auto;}
.right, .right-400 {display:none;}

/* NAV DROPDOWN */
#drop {display:flex; flex-flow:row nowrap; justify-content:center; padding:.5em 0 0 0; border:0;}
#drop ul {list-style:none; margin:0; padding:0; border:0;}
#drop li {}
#drop li a {display:block; text-decoration:none; white-space:nowrap;}

#drop ul.menu {display:grid; grid-template-columns:1fr; grid-gap:0;}
#drop ul.menu li.li-main {display:none; width:94vw; margin:0 0 .5em 0; padding:0 1%; border:0px; background-color:#4d84bb; border-radius:5px;}
#drop ul.menu li.li-main a {width:100%; color:#fff; font-size:1.2rem; font-weight:bold; padding:.3em 0 .3em 1.5em; text-align:center; position:relative;}
#drop ul.menu li.li-main a img.nav-icon {position:absolute; left:.5em; padding-top:2px;}


#drop ul.menu li.li-sub {display:none; margin:0 0 5px 0; padding:0;}
#drop ul.menu li.li-sub a {color:#4d84bb; font-size:1rem; font-weight:normal; padding:3px 0 3px 20px; background: url(../images/bullet_jump_right.png) no-repeat left center;}
#drop ul.menu li.li-sub a:hover {text-decoration:underline; color:#999;}	
#drop ul.menu li.li-sub a.selected {color:#669933; background-image:url(../images/bullet_jump_right_gr.png)}

/* CONTENT */
.content {clear:left; float:left; display:inline; margin:0; margin-bottom:1em; padding:.7em 0 0 0; opacity:1;}
.blue-box, .orng-box, .gr-box {display:table; color:#fff; border-radius:5px; background-color:#4d84bb; padding:1em 1em 0 1em; margin:0 0 1em 0; line-height:1.3em;}
.orng-box {background-color:#d47d00;}
.gr-box {background-color:#669933;}
.blue-box .schedule {color:#4d84bb; text-align:center; border-radius:3px; background-color:#fff; padding:.5em; margin:0 0 .5em 0; line-height:1.3em;}
.blue-box a, .orng-box a, .gr-box a, .blue-box h2, .orng-box h2, .gr-box h2, .blue-box h3, .orng-box h3, .gr-box h3 {color:#fff;}
.blue-box .schedule a {color:#4d84bb;}

.listing, .listing-wide {display:flex; flex-wrap:wrap; background:#e2e2e2; margin:0 0 2em 0; border-radius:5px;}
.listing-info, .listing-info-wide {flex:100%; margin:0; padding:0;  border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:0; border-bottom-left-radius:0;}
.darkmode .listing-info, .darkmode .listing-info-wide {background:#f5f5f5;}
.listing-info p, .listing-info-wide p {padding:1em; margin:0;}
.listing-info .bott, .listing-info-wide .bott {padding-bottom:.1em;}
.listing-info .last, .listing-info-wide .last {padding-top:0;}
.listing-info ul, .listing-info-wide ul, .listing-info ol, .listing-info-wide ol {padding: 0 1em 0 2em; margin:0;}
.listing-contact, .listing-contact-wide {flex:100%; color:#fff; border-radius:5px; background-color:#4d84bb; padding:1em; margin:0; line-height:1.7em; border-top-left-radius:0; border-top-right-radius:0; border-bottom-right-radius:5px; border-bottom-left-radius:5px;}
.listing-contact-wide p {color:#fff; padding:0; margin:0;}
.listing-contact a, .listing-contact-wide a {color:#fff;}
.web, .web-wide, .quote, .address, .address-wide, .person, .tel, .tel-wide, .landline, .landline-wide, .email, .gallery, .hours, .fbook, .igram, .lnkdin {padding:0 0 0 25px; background: url(../images/icons/web.png) no-repeat 0 5px;}
.web-wide, .address-wide, .tel-wide, .landline-wide, .quote {display:inline-block; margin-right:10px;}
.address, .address-wide {background-image:url(../images/icons/address.png);}
.tel, .tel-wide {background-image:url(../images/icons/phone.png);}
.landline, .landline-wide {background-image:url(../images/icons/landline.png);}
.person {background-image:url(../images/icons/person.png);}
.quote {background-image:url(../images/icons/quote.png);}
.email {background-image:url(../images/icons/email.png);}
.gallery {background-image:url(../images/icons/photos.png);}
.hours {background-image:url(../images/icons/clock.png);}
.fbook {background-image:url(../images/icons/facebook.png);}
.lnkdin {background-image:url(../images/icons/linkedin.png);}
.igram {background-image:url(../images/icons/instagram.png);}
ul.others {list-style-type:none; font-weight:bold; color:#626262; padding:0;}
ul.others li {background:url(../images/bullet_right_gry.png) no-repeat 0 5px; padding-left:1.1em;}
ul.others li.euro {background-image:url(../images/euro_l.png);}
ul.others li.euro span {font-size:.9em; font-weight:normal;}
ul.others li.euro span a {text-decoration:underline;}
ul.others a {color:#626262; text-decoration:none;}
ul.others li.euro a {color:#b2b2b2;}


#secintro {display:none;}
p.navintro, p.mobilenavintro {width:auto; margin:0px auto; margin-bottom:1em;}
p.navintro {display:none;}
p.mobilenavintro {display:table;}
.photo {display:block; width:auto; text-align:center; margin: 0 0.3em 0.3em 0.3em;}
.photo img {width:100%; max-width:470px; height:auto;}
a.fpf {float:right; clear:none; width:auto; height:auto; margin:0; display:none;}
a.fpf img {width:100%; max-width:142px; height:auto; margin:0 0 0 1em;}
.home-content-left, .home-content-right {display:block; margin:0px; padding:0; width:100%;}
.heading {display:block; clear:both; color:#fff; font-size:1.1rem; font-weight:bold; background-color:#4d84bb; border-radius:5px; padding:.3em .3em; margin-bottom:.8em;}
.home-content-left p, .home-content-right p {clear:both;}
.home-content-left a, .home-content-right a {display:inline-block; float:right; color:#fff; text-decoration:none; border-radius:5px; margin:.3em .3em 1em .3em; padding:.1em 1.7em .1em .5em; background: #0d253e url(../images/bg_butt_arrow_right.png) no-repeat; background-position:right center;}
.home-content-left p.orng a, .home-content-right p.orng a {background-color:#d47d00;}
body .ui-tooltip {pointer-events:none; border-width:1px;}

/* VIDEOS */
.video480 {width:288px; height:216px;}/* 60% 480x360 */
.video640 {width:288px; height:162px;}/* 45% 640x360 */


/* SOCIAL SHARE BUTTONS */
ul.share {display:table; list-style:none; padding:0; margin:0 auto; margin-bottom:.7em; clear:left;}
ul.share li {display:inline; margin:0 5px;}
ul.share img {width:32px;}

/* ADD TO HOME SCREEN FOR MOBILE */
.visible-android {display:none;}
.visible-ios {display:none;}
.on-device .visible-android, .on-device .visible-ios {font-size:1rem; clear:both; color:#fff; text-align:center; padding:.3em 0 .3em 0; width:280px; border:1px hidden #fff; background-color:#0d253e; border-radius:4px; display:block; margin:0px auto; margin-top:1.5em; margin-bottom:1em;}
.on-device .visible-android a, .on-device .visible-ios a {color:#fff; text-decoration:none;}
.device-ios .visible-android {display:none !important;}
.device-ios .hidden-ios {display:none !important;}
.device-android .hidden-android {display:none !important;}
.device-android .visible-ios {display:none !important;}
#add-ios img, #add-android img {height:1em; margin-left:.5em;}
#add-android img {height:.9em;}


/* FOOTER */
.footer {display:grid; grid-template:40px auto auto auto auto / 1fr 1fr; grid-gap:20px 0; background:#0d253e; border-radius:7px; font-size:1em; color:#fff;}
.footer a {color:#fff;}
.footer a.top {grid-column:1 / span 2; font-size:1.2rem; text-align:center; padding:.2em; width:4em; border:1px hidden #fff; background-image:linear-gradient(#4d84bb, #0d253e); border-radius:5px; display:block; margin:0 auto; position:relative; top:-1em; text-decoration:none;}
.footBlock {font-size:.9em; margin:0px auto;}

.footBlock ul {list-style-type:none; display:table; width:auto; padding:0; margin:0;}
.footBlock li {margin:0 0 1em 0;}
.footBlock a {display:block; text-decoration:none;}
.footBlock li.footHd {font-weight:bold; font-size:.95em; text-transform:uppercase;}
li.desktops {display:flex; justify-content:center; align-items:center; padding:0 5px; background-color:#0d253e; background-image:linear-gradient(#ec7000, #9f0003, #0d253e, #11273c); border-radius:4px;}
.footBlock a.cont-EF {display:flex; justify-content:center; align-items:center; padding:0 5px; font-weight:bold; background-color:#4d84bb; background-image: linear-gradient(#4d84bb, #2e4d6c); border-radius:4px;}
.footBlock a.fb, .footBlock a.jokes, .footBlock a.fingerpori, .footBlock a.migri, .footBlock a.kela, .footBlock a.tax, .footBlock a.visitfinland, .footBlock a.thisisfinland {text-indent:26px; white-space:nowrap;}
.footBlock a.fb {background:url(../images/fb_sm.png) no-repeat left center;}
.footBlock a.jokes {background:url(../images/jokes_sm.png) no-repeat left center;}
.footBlock a.fingerpori {background:url(../images/fingerpori_sm.png) no-repeat left center;}
.footBlock a.migri {background:url(../images/migri_sm.png) no-repeat left center;}
.footBlock a.kela {background:url(../images/kela_sm.png) no-repeat left center;}
.footBlock a.tax {background:url(../images/tax_sm.png) no-repeat left center;}
.footBlock a.visitfinland {background:url(../images/visitfinland_sm.png) no-repeat left center;}
.footBlock a.thisisfinland {background:url(../images/thisisfinland_sm.png) no-repeat left center;}
.site-info {grid-column:1 / span 2;  text-align:center; font-size:.8rem; padding:0 0 .8em 0;}
a.sawd {display:block; clear:both; padding:.7em 0 0 0;}

/* WALLPAPERS / DESKTOPS */
.wallpapers {width:100%;}
ul.walls {width:300px; margin:0px auto; margin-bottom:1.5em; list-style-type:none;}
ul.walls li {width:50%; margin:0; padding:0; display:block; float:left;}
ul.walls li.wall-preview {width:300px; padding-bottom:.4em;}
ul.walls a {text-decoration:none; display:block; height:30px; padding:3px 0 0 50px; margin:0 0 .5em 0; background-position:left center;}
ul.walls a.mob-link {background: #fff url(../images/icon_mobile.png) no-repeat;}
ul.walls a.desk-link {background: #fff url(../images/icon_desktop.png) no-repeat;}

/* TOWNS LOCATIONS IN FINLAND */
.towns {display:none}

/* FORMS */
form.contact {display:table; width:96%; margin:0 auto;}
form.contact p {display:table; margin:0 0 .5em 0; font-weight:bold; width:100%;}
form.contact p.form-head {background:#4d84bb; color:#fff; padding:.4em; border-radius:5px; margin:1em 0 .7em 0; font-size:1.1em;}
form.contact label {display:block; color:#4d84bb; margin:0; width:100%; float:left; clear:left; padding:0 0 0 .4em; font-weight:bold;}
form.contact input[type=text], form.contact textarea, form.contact select {width:100%; color:#4a4a4a; padding-left:.3em; font-size:1.1em; font-weight:normal; border:1px solid #acb1b7; background-color: #f7f7f7; clear:left; height:2.2em;}
form.contact textarea {height:auto}
/* ANTI-SPAM hidden form areas */
p#contact-website, p#project-website {display:none;}
form.contact input[type=submit] {display:block; width:auto; padding:.35em .3em .3em .3em; margin:0 auto; color:#fff; font-size:1.2rem; font-weight:bold; border-radius:5px; margin-top:.5em; margin-bottom:.5em; background-color:#4d84bb;}

/* SITEMAP */
ul.sitemap {width:96%; display:block; margin:0px auto; padding:0; position:relative; list-style-type:none;}
ul.sitemap li {margin:0; padding:0; display:inline; float:left; clear:both;}
ul.sitemap a {text-decoration:none; color:#626262; display:block; margin:0 0 1em 0;}
ul.sitemap a:active, ul.sitemap a:hover {text-decoration:underline;}
ul.sitemap li.section-head {width:100%;}
ul.sitemap li.section-head a {color:#fff; font-weight:bold; text-transform:uppercase; width:100%; padding:.5em; border-radius:5px; background-color:#4d84bb;}
ul.sitemap li.page a {color:#4d84bb; font-size:1.1rem; font-weight:bold;}

/* REAL ESTATE TERMS */
ul.real-estate {width:96%; display:block; margin:0px auto; padding:0; list-style-type:none;}
ul.real-estate li {margin:0; padding:0; float:left; clear:left; display:block;}
ul.real-estate li:last-child {padding-bottom:1em; clear:both; width:100% !important;}
ul.real-estate li.term {font-weight:bold; padding-top:.5em;}

/* COUNTRY CODES */
#CountryCodes {width:100%;}
ul.country-codes {width:96%; display:block; margin:0px auto; padding:0; list-style-type:none;}
ul.country-codes li {margin:0; padding:0; float:left; clear:none; display:block; width:80%;}
ul.country-codes li:last-child {padding-bottom:1em; clear:both; width:100% !important;}
ul.country-codes li.code {font-weight:bold; width:20%;}

/* JQUERY UI STYLES */
.ui-helper-hidden {display:none;}
.ui-helper-hidden-accessible {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}
.ui-helper-reset { margin:0; padding:0; border:0; outline:0; line-height:1.3; text-decoration:none; font-size:100%; list-style:none;}
.ui-helper-clearfix:before, .ui-helper-clearfix:after {content:""; display:table; border-collapse:collapse;}
.ui-helper-clearfix:after {clear:both;}
.ui-helper-clearfix {min-height:0; /* support: IE7 */}
.ui-helper-zfix {width:100%; height:100%; top:0; left:0; position:absolute;	opacity:0;}
.ui-front {z-index: 100;}
.ui-state-disabled {cursor: default !important;}
.ui-icon {display:block; text-indent:-99999px; overflow:hidden;	background-repeat:no-repeat;}
.ui-widget-overlay {position:fixed; top:0; left:0; width:100%; height:100%;}
.ui-tooltip {padding:8px; position:absolute; z-index:9999; max-width:400px; font-size:.82rem; line-height:1.2rem; background-color:#fff; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa;}


/* HIGHER RESOLUTIONS */

@media only screen and (min-width: 450px) {
h2 {letter-spacing:normal;}
.display-off-lt450 {display:inline;}
.shop {display:inline-block; width:160px;}

/* VIDEOS */
.video480 {width:432px; height:324px;}/* 90% 480x360 */
.video640 {width:416px; height:234px;}/* 65% 640x360 */

/* FORM */
form.contact .narrowlabel label {width:35%; position:relative; top:.5em;}
form.contact .narrowlabel input[type=text], form.contact .narrowlabel select {width:65%; display:block; clear:none; float:right;}
form.contact .widelabel label {width:60%; position:relative; top:.5em;}
form.contact .widelabel input[type=text], form.contact .widelabel select {width:40%; display:block; clear:none; float:right;}

/* ADD TO HOME SCREEN FOR MOBILE */
.on-device .visible-android, .on-device .visible-ios {width:300px;}

/* FOOTER */
.footer {font-size:1.1em;}
.footBlock li.footHd {font-size:1em;}
.footBlock a.fb, .footBlock a.jokes, .footBlock a.fingerpori, .footBlock a.migri, .footBlock a.kela, .footBlock a.tax, .footBlock a.visitfinland, .footBlock a.thisisfinland, .footBlock ul li a.yle, .footBlock ul li a.sun {text-indent:30px; white-space:nowrap;}
.footBlock ul li a.yle {background:url(../images/yle_sm.png) no-repeat left center;}
.footBlock ul li a.sun {background:url(../images/sun_sm.png) no-repeat left center;}
.site-info {font-size:.9rem;}
a.sawd {clear:none; display:inline-block; padding:0 0 0 .5em; position:relative; top:.9em;}
}


/* This shows in iPhone 8 landscape */
@media only screen and (min-width: 500px) {

/* #DROP Split section menu into 2 cols*/

#drop ul.menu {grid-template-columns:1fr 1fr;}
#drop ul.menu li.li-main {grid-column: span 1; width:47vw; margin:0 .2em .5em .2em;}
#drop ul.menu li.li-sub {grid-column: span 2; margin:7px 0 3px 0;}

ul.jump li {margin:0 10px;}
ul.jump.col4 {grid-template-columns:auto auto;}


/* FOOTER */
.footer {padding:0 2em 0 1em; grid-gap:20px 1em;}
}


/* 640x360 */
@media only screen and (min-width: 600px) {
#drop li a {letter-spacing:0px;}
#drop ul.menu li.li-sub {grid-column: span 1; padding:0 1.5vw;}

/* FOOTER */
.footer {grid-template:40px auto auto auto / 1fr 1fr 1fr; padding:0 1em 0 0;;}
.footer a.top, .site-info {grid-column:1 / span 3;}

/* VIDEOS */
.video480 {width:480px; height:360px;} /* 100% 480x360 */
.video640 {width:576px; height:324px;} /* 90% 640x360 */
}


/* 768x1024 */
@media only screen and (min-width: 768px) {	
body {line-height:1.5em;}

/* HEAD BLOCKS */

/* OLD @768
.ef {background:#4d84bb url(../images/logo_mobile_lrg.png) no-repeat; padding:0; height:123px;}
.logo a, .logo img {width:205px; height:123px;}  
@1024
 LOGO IS TRANSPARENT. VISIBLE LOGO IS BG in EF div.
.ef {background:none; border:none; height:200px; margin:0; height:200px; z-index:15;}
.logo a, .logo img {width:280px; height:200px;}
*/

.search.no-subnav  {grid-area:span 1 / span 12; margin:0;}
.search {grid-area:span 1 / span 6; margin:0 2px 0 0;} /*top/bottom 3px margins are on form*/
.submenu {grid-area:span 1 / span 6; margin:3px 0 3px 2px;}


.content {padding:1.5em 1em;}
ul.jump li {margin:0 20px; background-position: 0 5px;}
.display-off-lt768 {display:inline;}
.display-on-lt768 {display:none;}
h1 {font-size:1.5rem;}
h2 {font-size:1.4rem; background:url(../images/bg_sec.png) no-repeat left 0.6em; margin:0; padding:0.5em 0 1em 2.5em; }
h2.bubble {background:url(../images/bg_pres.png) no-repeat left 0.6em;}
p.brief, p.links {font-size: 1.3rem; background:url(../images/bg_brief.png) no-repeat left; padding: 0.5em 0 0.5em 2em; margin:0;}
p.links {background:url(../images/bg_links.png) no-repeat left .5em;}
p.notes {background:url(../images/bg_notes.png) no-repeat top left; padding:0 .5em .5em 2.7em; margin:.5em 0;}
#Metric ul {margin:0 2em 1em .3em; display:inline-block; float:left;}

/* #DROP 768-1024 */
#drop ul.menu li.li-sub {padding:0 5vw; letter-spacing:0px;}

/* CONTENT */
#secintro {display:inline;}
ul.section-index {display:flex; flex-direction:column; line-height:1.4em; margin:1em .3em .5em .3em;}
ul.section-index li {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; margin:0 0 1.2em 0;}
/* syntax  box-shadow:h-shadow v-shadow blur spread color inset/initial/inherit;  
Add Multiple Shadows ex box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green; */
ul.section-index a {display:flex; flex:0 1 100px; flex-direction:row; min-width:30%; align-items:center; font-weight:normal; color:#fff; margin:0 1.2em 0 0; padding:.4em .85em .4em .6em; border:1px hidden #fff; background:#4d84bb url(../images/bullet_jump_right.png) no-repeat 99% 50%; border-radius:5px; text-decoration:none; box-shadow: 0px 1px 2px 0px #999;}
.darkmode ul.section-index a {box-shadow: 0px 1px 2px 0px #4a4a4a inset;}

/* SOCIAL SHARE BUTTONS */
ul.share {margin-bottom:-1em;}

/* WALLPAPERS / DESKTOPS */
.wallpapers {width:50%; float:left; margin:0 auto;}
ul.walls a {padding:1px 0 0 50px;}

/* SITEMAP */
ul.sitemap {width:100%; margin:0;}
ul.sitemap li {width:50%; position:relative; left:50%;}
ul.sitemap li.section-head {width:100%; left:0px;}
ul.sitemap li.page {width:50%; left:0px; clear:left; padding-left:.7rem;}
ul.sitemap li.section-head a {padding-left:.7em;}
ul.sitemap li.page + li{clear:none; left:0;}

/* REAL ESTATE TERMS */
ul.real-estate {width:100%; margin:0;}
ul.real-estate li {clear:none; width:67%; padding-top:.5em;}
ul.real-estate li.term {clear:left; width:33%; padding-top:.5em; padding-right:2em; }

/* COUNTRY CODES */
ul.country-codes {width:100%; margin:0;}
ul.country-codes li {width:40%;}
ul.country-codes li.code {width:10%;}

/* CONTACT */
form.contact {width:80%}
form.contact .narrowlabel label {width:35%;}
form.contact .narrowlabel input[type=text], form.contact .narrowlabel select {width:65%;}
form.contact .widelabel label {width:50%;}
form.contact .widelabel input[type=text], form.contact .widelabel select {width:50%;}

/* FOOTER */
.footer {padding:0 2em 0 1em; grid-gap:20px 1em;}
.footBlock a.fb, .footBlock a.jokes, .footBlock a.fingerpori, .footBlock a.migri, .footBlock a.kela, .footBlock a.tax, .footBlock a.visitfinland, .footBlock a.thisisfinland, .footBlock ul li a.yle, .footBlock ul li a.sun {text-indent:32px;}
.footer {font-size:1.1em;}
.footBlock li.footHd {font-size:1em;}

}




/* 1024x768 */
@media only screen and (min-width: 1024px) {	
body {margin:0px auto; line-height:1.6em; font-size:18px;}
body .ui-tooltip {pointer-events:auto;}
.main {width:100%; padding:0 5px 0 0; margin:0; overflow:visible;}	
.submenu {display:none;}
.home-content-left, .home-content-right {display:inline-block; width:50%; float:left; padding-top:1em;}
.home-content-left {padding-right:1.5em;}
.home-content-right {padding-left:1.5em;}

ul.jump {margin:0 0 1em 0;}
p {margin: 0 0 1em 0;}
.space a {margin-right:0; margin-bottom:0;}
ul, ol {margin:0 0 1em 0;}
ol {padding:0 0 0 .6em;}
ul.section-index {padding:0;}
h1 {font-size:1.8rem; text-align:left;}
h2 {font-size:1.5rem;}
h2.gr {background:url(../images/bg_sec_gr.png) no-repeat left;}
.blue-box h2 {background:url(../images/bg_sec_gry.png) no-repeat left;}
.no-br {white-space:nowrap;}
.rightmobile {display:none;}
.display-off-lt1024 {display:inline;}


/* HEAD BLOCKS */

/* EF: ALL HEADER ITEMS. COPIED FROM ABOVE
12x4 grid. All divs are in all pages
.ef {display:grid; width:100%; gap:0; color:#fff;
grid-template-columns:repeat(12, auto);
grid-template-rows:repeat(4, auto);}    */

.ef {grid-template-rows:repeat(2, auto);}
.feature-mobile {display:none;}
.mobilenav {display:none;}
.submenu {display:none;}

.logo, .feature, .seasons {display:inline; height:140px; align-content:center;}
.logo { grid-area:span 1 / span 2; justify-content:start; background:none; padding:20px 0 20px 20px;}
.logo a, .logo img {height:100px; opacity:1;}

/* FEATURE and SEASON - SET COLOURS IN PAGES
using image FEATURE SEASON COLOUR SELECTOR.psd to choose
CSS is embedded in feature.html feature_fingerpori.html feature_jokes.html and season.html*/
.feature { grid-area:span 1 / span 4; justify-content:center; padding:20px 0;}
.seasons { grid-area:span 1 / span 6; justify-content:end; padding:20px 0;}
.feature object, .seasons object {display:inline; height:100px; width:100%;}
object[data*="feature.html"], object[data*="feature_jokes.html"], object[data*="feature_fingerpori.html"], object[data*="season.html"] {opacity:1;}
.darkmode object[data*="feature.html"], .darkmode object[data*="feature_jokes.html"], .darkmode object[data*="feature_fingerpori.html"], .darkmode object[data*="season.html"] {opacity:.9;}


/* CRUMBS and EF SEARCH */
.switchbox, .loc, .sitemap-link, .search {display:flex; flex-flow:row nowrap; height:46px; background:#4d84bb; margin:0; padding:0; border:1px solid #4d84bb; align-items:center;}
.darkmode .switchbox, .darkmode .loc, .darkmode .sitemap-link, .darkmode .search {opacity:.8;}
.switchbox {grid-area:2 / 1 / span 1 / span 1; justify-items:start; border-top-left-radius:5px; border-top-right-radius:0; padding-left:10px;}
.loc {grid-area:2 / 2 / span 1 / span 6;
font-size:.9rem; color:#fff; padding:0 0 0 20px;}
.loc a, .loc .current {color:#fff; text-decoration:none; margin:0 0 0 6px; background:url(../images/bullet_loc_right.png) no-repeat left center; padding-left:15px;}
.loc a.home {display:flex; height:100%; opacity:1; align-items:center; margin:0; padding-left:0; background:none;}
.loc a.home img {width:24px; height:21px; margin:0 0 2px 0;}
.loc .current {font-weight:bold;}
.loc .current.no-bg {background:none; padding-left:0;}
.sitemap-link {grid-area:2 / 8 / span 1 / span 1; padding:0 20px;}
.sitemap-link a {display:flex; height:100%; opacity:1; align-items:center;}
.sitemap-link img {width:28px; height:25px;}
.search, .search.no-subnav  {grid-area:2 / 9 / span 1 / span 4;
font-size:.8rem; border-top-left-radius:0; border-top-right-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:0; padding:0 3px 0 0;}
.search form {height:40px; width:100%;}
.search form input[type=text]{height:40px; padding:5px 0px 4px 30px; width:100%; font-size:.9rem; text-align:center; border:1px solid #acb1b7; border-radius:5px; background:#fcfcfc url(../images/search_ani.gif) no-repeat 7px 9px;}

/* FLEX-AREA Contains NAV DROP and CONTENT */
#flex-area {display:flex;}

/* NAV DROP 
.main overflow set to visible in line 540 above*/
#drop {display:inline-block; float:left; clear:none; background:#0d253e; padding:0; width:280px;}
#drop ul.menu {grid-template:auto / auto; position:-webkit-sticky; position:sticky; top:0; overflow-x:hidden; overflow-y:auto; max-height:100vh; max-height: 100dvh; padding:0 0 1em 0;}
/* Scrollbar on nav - see CODE SCROLLBAR STYLING AND COMPATIBILITY.txt */
#drop ul.menu  {scrollbar-width:none;} /* Firefox, no scrollbar shows but menu scrolls */
/* Other browsers */
#drop ul.menu::-webkit-scrollbar {display:none;} /* Others, no scrollbar shows but menu scrolls */


.darkmode #drop ul.menu {opacity:.8;transition:0.3s;}

#drop ul.menu li.li-main, #drop ul.menu li.li-sub {display:inline; grid-area:span 1 / span 1;}
#drop ul.menu li.li-main {width:auto; background-color:#202B36; border-radius:0; padding:0 7px 0 0; margin:5px 0 0 0; border-radius:3px;}
#drop ul.menu li.li-main.open-section {background-color:#325c88;}
#drop ul.menu li.li-main a {display:block; text-align:right; font-size:1.2rem; font-weight:bold; padding:2px 30px 2px 0;}
#drop ul.menu li.li-main a img.nav-icon {position:absolute; top:5px; left:253px; padding:0;}
/* Open section pointer events - prevents multiple JS firing */
#drop ul.menu li.li-main.open-section, #drop ul.menu li.li-main.open-section a img.nav-icon {pointer-events:none;}
#drop ul.menu li.li-main.open-section a {pointer-events:auto;}

#drop ul.menu li.li-sub {display:none; padding:0 12px 0 0; margin:1px 0;}
@media (hover: none) {
#drop ul.menu li.li-sub {display:inline;}
}

/* code to target certain items in menu see 
CODE SELECT CERTAIN  ITEMS OF CERTAIN CLASS.txt */
#drop ul.menu li:nth-child(1 of .li-sub) {margin-top:8px;}
#drop ul.menu li.li-sub a {color:#f5f5f5; text-align:right; padding:0 26px 0 0; background: url(../images/bullet_jump_right.png) no-repeat right center;}


/* CONTENT */
.content {display:inline-block; float:left; clear:none;  padding:1.5em 30px 30px 30px; opacity:1; pointer-events:auto; width:calc(100% - 280px);}
p.mobilenavintro {display:none;}
p.navintro {display:table; margin: 0 0 1em 0;}
a.fpf {display:inline;}
.listing {flex-wrap:nowrap;}
.listing-info {flex:70%;}
.listing-info {border-top-right-radius:0; border-bottom-right-radius:0; border-bottom-left-radius:5px;}
.listing-contact {border-top-right-radius:5px; border-bottom-left-radius:0;}
.listing-info p {padding:1em 2em 1em 1em;}
.listing-info ul, .listing-info ol {padding: 0 2em 0 2em;}
.listing-contact {flex:30%;}
ul.others li {background-position: 0 7px;}
ul.share {margin-bottom:0;}

/* VIDEOS */
.video640 {width:640px; height:360px;}/* 100% 640x360 */

/* FORMS */
form.contact {width:70%; max-width:700px;}
form.contact .narrowlabel label {width:35%;}
form.contact .narrowlabel input[type=text], form.contact .narrowlabel select {width:65%;}
form.contact .widelabel label {width:50%;}
form.contact .widelabel input[type=text], form.contact .widelabel select {width:50%;}

/* WALLPAPERS / DESKTOPS */
.wallpapers {width:33.3%;}

/* SITEMAP */
ul.sitemap li.section-head {margin-top:1em;}
ul.sitemap li.section-head:first-child {margin-top:0;}
ul.sitemap li.section-head a {padding-left:4em;}
ul.sitemap li.page {padding-left:4rem;}

/* REAL ESTATE TERMS */
ul.real-estate li {width:70%;}
ul.real-estate li.term {width:30%;}

/* ADD TO HOME SCREEN FOR MOBILE */
.on-device .visible-android, .on-device .visible-ios {margin-bottom:1.3em;}

/* FOOTER */
.footer {clear:both; margin:0px auto; grid-template:40px auto auto / 1fr .75fr 1fr .85fr 1fr 1fr; padding:0 1em 0 .5em; grid-gap:0 0; font-size:1em; border-top-left-radius:0;}
.footBlock li.footHd {font-size:.9em;}
.footBlock {margin:0 0 0 .5em;}
.footer a.top, .site-info {grid-column:1 / span 6;}
.footBlock a.fb, .footBlock a.jokes, .footBlock a.fingerpori, .footBlock a.migri, .footBlock a.kela, .footBlock a.tax, .footBlock a.visitfinland, .footBlock a.thisisfinland, .footBlock ul li a.yle, .footBlock ul li a.sun {text-indent:28px;}

/* ADS AND BANNERS      negative right-margin to offest content padding */
.right, .right-400 {display:block; clear:none; float:right; width:200px; height:200px; margin:0; position:relative; right:-30px; overflow:hidden; border-radius:0px;}
.right-400 {height:400px;}
.right img, .right-400 img {width:200px; height:auto; max-width:none; position:relative; left:0px; top:0px;}

.darkmode .right, .darkmode .right-400 {width:196px; height:196px; right:-28px; border-radius:5px;}
.darkmode .right-400 {height:396px;}
.darkmode .right img, .darkmode .right-400 img {position:relative; left:-2px;}

}


/* 2019, ALMOST ALL USERS OF 1024 ARE ON TABLETS. 1025 TARGETS DESKTOPS ETC*/
@media only screen and (min-width: 1025px) {
.on-device .visible-android, .on-device .visible-ios {display:none;}
a.phone-gry {text-decoration:none; color:#626262; pointer-events:none;}
a.phone-bl {text-decoration:none; color:#4d84bb; pointer-events:none;}

/* SITEMAP */
ul.sitemap a {margin:0 0 .6em 0;}
}


@media only screen and (min-width: 1280px) {	
.logo { grid-area:span 1 / span 4;}
.feature {grid-area:span 1 / span 4;}
.seasons {grid-area:span 1 / span 4; padding:20px 10px 20px 0}
.loc a, .loc .current {margin:0 0 0 15px; padding-left:22px;}

ul.jump.col4 {grid-template-columns:auto auto auto;}

ul.section-index li {margin:0 0 1.5em 0;}

/* FOOTER */
.footer {padding:0 1em 0 3em; grid-gap:0 0;}
.footBlock {font-size:1.1em;}
.footBlock a.fb, .footBlock a.jokes, .footBlock a.fingerpori, .footBlock a.migri, .footBlock a.kela, .footBlock a.tax, .footBlock a.visitfinland, .footBlock a.thisisfinland, .footBlock ul li a.yle, .footBlock ul li a.sun {text-indent:30px;}

/* SITEMAP */
ul.sitemap li.page {padding-left:8rem;}
ul.sitemap li.section-head a {padding-left:8em;}

/* COUNTRY CODES */
ul.country-codes li {width:28%;}
ul.country-codes li.code {width:5%;}

}


@media only screen and (min-width: 1366px) {	
ul.jump li {margin:0 25px;}
ul.jump, ul.jump.col2, ul.jump.col3 {grid-template-columns:auto auto;}
ul.jump.col4 {grid-template-columns:auto auto auto;}

}


@media only screen and (min-width: 1580px) {	
body {max-width:1580px;}
ul.jump.col3 {grid-template-columns:auto auto auto;}
ul.jump.col4 {grid-template-columns:auto auto auto auto;}

}


/* PRINT STYLES */

@media print {
img, .logo, .seasons, .feature, .feature-mobile, .switchbox, .mobilenav, .loc, .search, .submenu, .right, .rightmobile, #drop, ul.share, .footer {display:none;}
body {font-size:12pt; line-height:1.4;}
h1 {font-size:20pt; margin-top:12pt;}
h2 {font-size:18pt;}
.logo {display:none;}
img.printlogo {display:block; clear:both;}
}