@charset "utf-8";
/* CSS Document */
/* --------- COLWRAPPER + VIEWPORTS ----------- */
.content-col {width: 100%;clear: both;}
.center-col {clear: both;margin: 0% auto;width: 1600px;}
@media only screen and (max-width:1660px) {.center-col {width: 1400px;}}
@media only screen and (max-width:1440px) {.center-col {width: 1200px;}}
@media only screen and (max-width:1280px) {.center-col {width: 1000px;}}
@media only screen and (max-width:1024px) {.center-col {width: 90%;margin: 0 auto;}}
/* --------- GLOBAL CLASSES ----------- */
div {display: block;}
.center-col iframe {max-width: 90%;margin: 0 auto !important;}
section, article, header {display: block;float: left;width: 100%;}
.cboth {clear: both;}
.elmcenter {text-align: center;}
.dtable {display: table;}
/* Footer <UL> navistyles */
#footer {background: #fe8c16;}
#footer ul {color: #fff;display: table;float: none;text-align: center;width: 100%;margin: 0 auto;padding: 0;}
#footer ul li {display: block;float: left;width: auto;height: auto;padding: 0px 20px;text-align: center;}
#footer ul li a {font-family: 'Playfair Display', serif;color: #fff;font-weight: bold;text-decoration: none;text-transform: uppercase;width: 100%;text-align: center;padding: 20px 0;display: block;float: left;}
#footer ul li a:hover {color: #aeaeae;text-decoration: none;}
/* Image scaling */
.content-col img.erikoiskuva, .content-col img.kuva2, .content-col img.kuva, .center-col img.erikoiskuva, .center-col img.kuva, .center-col img.kuva2 {border: 0;outline: none;max-width: 100%;height: auto;display: block;margin: 0;}
/* Cols */
.col-20,.col-25, .col-33, .col-40, .col-50, .col-60, .col-67, .col-75, .col-80 {float: left; box-sizing:border-box}
.col-20 {width:25%;}.col-25 {width: 25%;}.col-33 {width: 33.3%;}.col-40 {width: 40%;}.col-50 {width: 50%;}.col-60 {width: 60%;}.col-67 {width: 66.7%;}.col-75 {width: 75%;}.col-80 {width: 75%;}.col-100 {width: 100%;clear: both;}
/* Webio content cols */
.col-left {width: 49%;float: left;}
.col-right {width: 49%;float: right;}
.col-full {clear: both;padding-top: 20px;width: 100%;}
.col-3 {width: 32%;float: left;}
.col-3-center {margin: 0 2%;padding: 0;}
/* Paddings */
.nopadding {padding: 0;}.vpadding-10 {padding: 10px 0;}.vpadding-15 {padding: 15px 0;}.vpadding-20 {padding: 20px 0;}.vpadding-25 {padding: 25px 0;}.vpadding-30 {padding: 30px 0;}.vpadding-35 {padding: 35px 0;}.vpadding-40 {padding: 40px 0;}.vpadding-45 {padding: 45px 0;}.vpadding-50 {padding: 50px 0;}.vpadding-55 {padding: 55px 0;}.vpadding-60 {padding: 60px 0;}.vpadding-80 {padding: 80px 0;}.vpadding-110 {padding: 110px 0;}
/* Margin */
.nomargin {margin: 0 auto;}.vmargin-10 {margin: 10px auto;}.vmargin-20 {margin: 20px auto;}.vmargin-30 {margin: 30px auto;}.vmargin-40 {margin: 40px auto;}.vmargin-50 {margin: 50px auto;}.vmargin-60 {margin: 60px auto;}
/* Flexbox - .dflex for parent element + .flex-element and .flex-xxxx-col to child element depending column count*/
/* Flexbox - Flex wrapper*/
.dflex {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;flex-wrap:wrap;}
/* Flexbox - Flex element*/
.flex-element {-webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;}
/* Flexbox - flexbox cols */
.flex-2-col {flex-basis: 48%; max-width:48%; margin:0 1%;}
.flex-3-col {flex-basis: 31.3%; max-width:31.3%; margin:0 1%;}
.flex-4-col {flex-basis: 23%; max-width:23%; margin:0 1%;}
.flex-5-col {flex-basis: 18%; max-width:18%; margin:0 1%;}
/* Flex keskitys */
/* Breadcrump */
#murupolku {color: #fe8c16; width: 100%;height: auto;padding-bottom: 20px;}
#murupolku a {color: #fe8c16;}
/*--------- WEBIO BASIC STYLE ------------*/
html, body {font-size:100%;line-height: 140%;}
body, p {margin: 0;padding: 0;}
body, p, .teksti, td, ul, li, a {font-family: 'Open Sans', serif !important; color: #3f3f3f; font-weight:300;}
a {color: #e17d28; text-decoration: none;}
a:hover {text-decoration: underline;}
.kuva {cursor : pointer;}
/* <HEADINGS> */
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {font-family: 'Playfair Display', serif; margin: 0;font-weight:700;}
h1, h1 a {color: #a5391e; font-size: 3.125rem;line-height: 3.5rem;padding: 0px 0px 0px 0px; font-weight:900;}
h2, h2 a {color: #a5391e; font-size: 2.125rem;line-height: 2.5rem;padding: 0px 0px 0px 0px;}
h3, h3 a {color: #a5391e; font-size: 1.3rem;line-height: 1.6rem;padding: 0px 0px 0px 0px;}
h4, h4 a {color: #000; font-size: 1.1rem;line-height:1.4rem;padding: 0px 0px 0px 0px;}
h5, h5 a {color: #000; font-size: 1.3rem;line-height:1.6rem;padding: 0px 0px 5px 0px;}
h6, h6 a {color: #fe8c16; font-size: 1.3rem;line-height:1.6rem;padding: 0px 0px 0px 0px;}
li#navilink-sel-1-2 a, li#navilink-sel-2-3 a, li#navilink-sel-3-4 a, li#navilink-sel-4-5 a, li#navilink-sel-5-6 a, li#navilink-sel-6-7 a {padding: 20px 0 15px 0;border-bottom: 5px solid #006165;}
/* Event calendar */
.tapahtumat {font-weight: bold;}
.tapahtumakalenteri_otsikko {color: #fe8c16; font-weight: bold;}
.tapahtumakalenteri_valiotsikko {font-weight: bold;}
/* News */
.uutis_otsikko, .nostettumoduli {color: #fe8c16 !important; font-size: 1.2rem;font-weight: normal;}
.nostettumoduli {color: #fe8c16 !important; font-size: 1.2rem;font-weight: normal;}
.uutispaivays, .uutis_paivays, .uutispaivaysetusivu, .nostouutis_paivays {display: block;font-size: 0.875rem;color : #555555; font-weight: 700;}
a.nostouutis_otsikko {color: #555555; display: block;font-size: 1.2rem;font-family: 'Playfair Display', serif;font-weight: 300;
}
/* Forms heading*/
.lomakeotsikko {color: #fe8c16; font-weight: bold;}
.lomaketekstiotsikko {color: #fe8c16; font-weight: bold;}
/* Form fields */
/* For iphone & ipad */
.lomakenappi_submit, .valikkomodulilinkki_select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input, .lkentta select, .lpainike, textarea {color: #000; border: 1px solid #b0b0b0;padding-left: 3px;border-radius: 3px;}
/* Webio submenu */
.valikkolinkki-sel, .valikkolinkki, .valikkomodulilinkki, .valikkomodulilinkki-sel {text-decoration: none;}
.valikkomodulilinkki, .valikkolinkki {color: #fff; font-family:'Playfair Display', serif; font-weight:300; font-size:1rem; padding:1px 0; display:block; box-sizing:border-box; width:100%;}
.valikkomodulilinkki-sel,.valikkolinkki-sel {color: #e17d28;font-weight: 400; font-size:1rem; padding:3px 0; display:block; box-sizing:border-box; width:100%;font-family:'Playfair Display', serif; }
.valikkomodulilinkki::after, .valikkomodulilinkki-sel::after,.valikkolinkki::after, .valikkolinkki-sel::after { content: "›";float: right; color:#747474;font-family:'Playfair Display', serif; }
.valikkomodulilinkki-sel::after,.valikkomolinkki-sel::after {color:#e17d28}
#shop-sidenavi table td table a.valikkomodulilinkki, #shop-sidenavi table td table a.valikkomodulilinkki-sel {
font-size: 0.9rem !important;
}
#shop-sidenavi ul, #shop-sidenavi li {list-style:none; margin:0; padding:0;}
#shop-sidenavi ul li ul {padding-left: 10%;width: 90%;}
/* Misc */
hr {border-top-width: 1px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #dedede; border-right-color: #dedede; border-bottom-color: #dedede; border-left-color: #dedede; }
a.webiolinkkipainike,a.takaisinuutisiin {margin-top: 20px;display: inline-block;text-align: center;background: #7ebed0; /* vari1 */height: auto;color: #FFF;padding: 10px 40px;font-weight: 900;text-transform: uppercase;line-height: 160%;width: auto;}
a.webiolinkkipainike:hover, a.takaisinuutisiin:hover {opacity: 0.98;filter: alpha(opacity=80);transition: all 0.3s ease 0s;}
img[title="Poista"] {height: auto !important;width: auto !important;}
.valikkolinkki_piilosivu {color: #005600;}
/* --------- FORMS ----------- */
/* form elements */
.col-left form, .col-right form, .col-3 form, .col-full form, .col-left tr[id^="lomakerivi"] input, .col-left tr[id^="lomakerivi"] textarea {max-width: 100%;}
.col-left tr[id^="lomakerivi"] td table td, .col-right tr[id^="lomakerivi"] td table td, .col-3 tr[id^="lomakerivi"] td table td, .col-50-whp tr[id^="lomakerivi"] td table td {display: block;clear: both;width: 100%;}
.col-left tr[id^="lomakerivi"] td table td:last-child, .col-right tr[id^="lomakerivi"] td table td:last-child, .col-3 tr[id^="lomakerivi"] td table td:last-child, .col-full tr[id^="lomakerivi"] td table td:last-child, .col-50-whp tr[id^="lomakerivi"] td table td:last-child {margin-bottom: 20px;}
.col-left input[type=text], .col-left input[type=file], .col-left input[type=button], .col-right input[type=text], .col-right input[type=file], .col-right input[type=button], .col-3 input[type=text], .col-3 input[type=file], .col-3 input[type=button], .col-full input[type=text], .col-full input[type=file], .col-full input[type=button] {height: 25px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;margin-bottom: 10px;background: #fff;width: 96%;border: 1px solid rgba(0, 0, 0, 0.2);}
.col-left textarea, .col-right textarea, .col-3 textarea, .col-full textarea {border-radius: 2px;margin-bottom: 10px;width: 94%;border: 1px solid rgba(0, 0, 0, 0.2);padding: 0;}
.col-full .lomakeotsikko {width: 30%;}
.col-full textarea, .col-full input[type=text], .col-full input[type=file] {width: auto;}
.col-full input[type=button] {width: 30%;}
.col-left input[type=button], .col-right input[type=button], .col-3 input[type=button] {background: rgba(0, 0, 0, 0.1);color: #fff;font-size: 0.875rem;font-weight: bold;text-transform: uppercase;padding: 5px 0;display: block;height: auto;}
/* ------- 1440px ------ */
@media only screen and (max-width:1440px) {
/* Footer */
#footer .col-75 {padding: 15px 0 !important;}
#semio-logot {padding-top: 25px !important;}
h1, h1 a {font-size: 2.5rem; line-height:3rem;}
h3, h3 a {font-size: 1.3rem; line-height:1.5rem;}
h4, h4 a {font-size: 1.125rem; line-height:5rem;}
h4, h5 a {font-size: 1.125rem; line-height:1.5rem;}
h6, h6 a {font-size: 1.125rem; line-height:1.5rem;}}
/* ------- 1280px ------ */
@media only screen and (max-width:1280px) {
html, body {font-size:70%;line-height: 1.5rem;}
p, div {font-size:1.2rem; line-height: 1.8rem}
}
/* ------- 1024px ------ */
@media only screen and (max-width:1024px) {
.col-left, .col-right, .col-50-whp, .col-50, .col-3, .col-75, .col-67, .col-33, .col-25, .col-75-whp, .col-67-whp, .col-33-whp, .col-25-whp {clear: both;float: none;margin-bottom: 1%;width: 100%;}
/* Footer */
#footer div {clear: both;float: none;padding: 0 0 20px;text-align: center;width: 100%;}
#footer .col-67 {margin-top: 40px !important;}
#footer ul {margin: 0 auto;padding: 0;width: 90%;}
#footer ul li {display: inline-block;float: none;}
/* Submenu */
#submenu ul {background: none; /*vari1*/list-style-type: none;margin: 0 auto;padding: 10%;width: 80%;}
#submenu ul li ul {list-style-type: none;margin: 0;padding: 0 0 0 20px;}
.valikkolinkki-sel, .valikkolinkki, .valikkomodulilinkki, .valikkomodulilinkki-sel {background: #777777 none repeat scroll 0 0;border-radius: 3px;color: #fff !important;display: block;margin-bottom: 10px;padding: 10px 2%;text-decoration: none;width: 96%;}
#submenu ul {background: none;padding: 0;width: 100%;}
#submenu ul li a::after {content: "›";float: right;font-size: 20px;}
#submenu ul li ul {padding: 0 0 0 5%;width: 95%;}
#submenu li ul li a {background: none;color: #000 !important;padding: 0;}
#submenu ul li ul li a::after {float: none;padding-left: 10px;}
body {
line-height: 170%;
}
}
/* ------- 860px ------ */
@media only screen and (max-width:860px) {
body {line-height: 1.25em;}
/* Headings */
h1, h1 a {font-size: 2rem; line-height:2.5rem;}
h2, h2 a {font-size: 1.625rem; line-height:2.1rem;}
h3, h3 a {font-size: 1.375rem; line-height: 1.8rem;}
h4, h4 a {font-size: 1.125rem; line-height: 1.6rem;}
h4, h5 a {font-size: 1.125rem; line-height: 1.6rem;}
h6, h6 a {font-size: 1.125rem; line-height: 1.6rem;}
#subpage table, #subpage tr, #subpage td {display: block;width: 100% !important;height: auto;clear: both;}
#subpage tbody {width: 100%;display: inline-block;}
/* Footer */
#footer ul li {padding: 0px 10px;}
/* Forms*/
.col-left form, .col-right form, .col-3 form, .campaign-box-sisennys form {width: 90%;margin: 0 auto;display: block;}
.col-left input[type="text"], .col-right input[type="text"], .col-3 input[type="text"], .col-left input[type="file"], .col-right input[type="file"], .col-3 input[type="file"], .col-left input[type="button"], .col-right input[type="button"], .col-3 input[type="button"] {height: 35px;width: 100% !important;}
.col-full form[id^="lomake_"] {margin: 0 auto;width: 90%;}
.col-full input[type=text], .col-full input[type=file], .col-full input[type=button], .col-full lomakeotsikko {width: 96% !important;margin-bottom: 5px;}
.col-full textarea {width: 100% !important;margin-bottom: 5px;}
}
/* ------- 800px ------ */
@media only screen and (max-width:800px) {
/* Footer */
#footer ul {margin: 0 auto;padding: 0;width: 90%;}
#footer .col-75 {display: none;}
.center-col {width: 90% !important;margin: 0 auto;}
}
/* ------- 768px ------ */
@media only screen and (max-width:768px) {
}
/* ------- 720px ------ */
@media only screen and (max-width:720px) {
#subpage .dtable {display: block;}
#subpage .center-col img {height: auto;max-width: 100%;padding: 20px 0;float: none;clear: both;}
}
/* ------- 680px ------ */
@media only screen and (max-width:680px) {
}
/* ------- 575px ------ */
@media only screen and (max-width:575px) {
/* body {font-size:95%;}*/
body {
line-height: 170%;
}
/* Haadings */
h1, h1 a {font-size: 2rem; line-height:2.5rem;}
h2, h2 a {font-size: 1.625rem; line-height:2.1rem;}
h3, h3 a {font-size: 1.375rem; line-height: 1.8rem;}
h4, h4 a {font-size: 1.125rem; line-height: 1.6rem;}
h4, h5 a {font-size: 1.125rem; line-height: 1.6rem;}
h6, h6 a {font-size: 1.125rem; line-height: 1.6rem;}
}
/* ------- 420px ------ */
@media only screen and (max-width:420px) {
#submenu {font-size: 60%;}
a.webiolinkkipainike {font-size: 0.75rem;}
}
/* ----------- KUVAGALLERIATAUSTA -------------- */
@media only screen and (max-width:1024px) {.kuvagalleriakuvatausta {width: 23% !important;height: 35vh !important;margin: 0 1% 20px 1% !important;box-sizing: border-box;padding: 0;}.kuvagalleriakuvatausta img {padding: 0 !important;width: 100%;height: 100%;}}
@media only screen and (max-width:860px) {.kuvagalleriakuvatausta {height: 30vh !important;}}
@media only screen and (max-width:720px) {.kuvagalleriakuvatausta {height: 25vh !important;}}
@media only screen and (max-width:620px) {.kuvagalleriakuvatausta { width: 31.3% !important;height: 30vh !important;}}
@media only screen and (max-width:520px) { .kuvagalleriakuvatausta {height: 25vh !important;}}
@media only screen and (max-width:420px) {.kuvagalleriakuvatausta {height: 20vh !important;}}
/* MOBIILIVALIKKO */
#mobilelogo {display:none;}
#mobilelogo img {height: auto;width: 180px;position: absolute;top: 0;z-index: 900000000000000000;left: 41%;margin: 0 auto;display: inline;padding-top: 10px;}
#main-navi-resp, #top-navi{display:none;}
#mobile-logo {display:none;}
@media only screen and (max-width:1024px) {
#verkkokauppa-sivunavi,#toplinks {display:none;}
#main-navi-resp {display:block;}
#mobilelogo {display:block;}
#mobile-logo {display:block; position:absolute; top:15px; left:20px;}#mobile-logo img { max-width: 110px;}
.mean-bar::before {
color: #fff !important;
content: "VALIKKO";
font-family: 'Playfair Display', serif;
top: 48px;
width: 48px;
height: auto;
left: 20px;
position: absolute;
font-size: 9px !important;
line-height: 170% !important;
z-index:1;
}
#resp-logo {display: block;left: 2%;position: absolute;top: 14px;width: 90px;z-index: 2000000;}
.elm-header, #main-navi-wrap #main-navi, ul#top-navi, #top-navi-wrap{display:none;}
#main-navi-wrap {position: absolute !important; top: 0px;z-index: 3000;height: auto;background: #fff; width:50%; border:none;}
.mainimg, #mainimg-front {background-size: cover !important;height: 300px !important; margin-top:110px;} /* Navibar height */
#menu-wrapper {display:none;}
.main-navi-resp {background:#fff;}
#mobilemenu-container::after {right:13px!important}
#top-navi-wrap {background:#fff; }
a.meanmenu-reveal { display:none }
.mean-container a.meanmenu-reveal:after { color:#000; font-size:10px !important; top:65px; width:50px; height:50px }
.mean-container a.meanmenu-reveal.meanclose::after {display:block;margin-left:-2px;margin-top:15px;padding-left:0;text-align:left}
.mean-container .mean-bar { float:left; width:100%; position:absolute; top:43px; padding:0; min-height:42px; z-index:999; background:url(../img/header/toplinkbg.jpg) center top;}
.mean-container a.meanmenu-reveal {
color: #fff;
cursor: pointer;
display: block;
font-family: 'Domine', serif !important;
font-size: 1px;
font-weight: 700;
height: 48px;
line-height: 22px;
margin-top: 0px;
padding: 18px 20px 0;
position: absolute;
right: 0 !important;
text-decoration: none;
text-indent: -9999em;
top: 0px;
width: 39px;
}
.mean-container a.meanmenu-reveal.meanclose {height: 56px; right: 11px !important;width: 40px !important;color: #fff;font-size: 32px !important; margin-top: 0px; background: #222222;padding: 26px 20px 0;}
.mean-container a.meanmenu-reveal span { background: #ffa01e; border-radius:2px;
display:block; height:6px; margin-top:4px; color:#000; width:39px }
.mean-container .mean-nav { float:left; width:100%; margin-top: 80px }
.mean-container .mean-nav ul { padding:0; margin:0; width:100%; list-style-type:none }
.mean-container .mean-nav ul li { position:relative; float:left; width:100% }
.mean-container .mean-nav ul li a { display:block; float:left; width:90%; padding: 10px 5% 5px; height:28px; margin:0; text-align:left; color:#fff; border-top: 1px solid rgba(255,255,255,0.1); text-decoration:none; font-size:14px;background:#222;font-weight:600; text-transform:uppercase; font-family: 'Roboto SLab', sans-serif !important;
font-weight: 300 !important;
}
.mean-container .mean-nav ul li li a { width:90%; padding: 15px 0 6px 10%; border-top: 1px solid rgba(255,255,255,0.1); background:#2a2a2a !important; text-shadow:none!important; visibility:visible }
.mean-container .mean-nav ul li.mean-last a { border-bottom:none; margin-bottom:0 }
.mean-container .mean-nav ul li li li a { width:70%; padding:1em 15% }
.mean-container .mean-nav ul li li li li a { width:60%; padding:1em 20% }
.mean-container .mean-nav ul li li li li li a { width:50%; padding:1em 25% }
.mean-container .mean-nav ul li a:hover { background:#222222 !important }
.mean-container .mean-nav ul li a.mean-expand {
background: #e17d28 none repeat scroll 0 0 !important;
border: medium none;
border-radius: 3px;
color: #fff;
font-weight: 700;
height: 22px;
margin-top: 2px;
padding: 3px 2px 2px !important;
position: absolute;
right: 10px;
text-align: center;
top: 7px;
width: 26px;
z-index: 2;
font-family:'Roboto', serif !important;
}
.mean-container .mean-push, .mean-nav .wrapper { width:100%; padding:0; margin:0 }
.mean-container .mean-nav ul li a.mean-expand:hover { opacity:.8 }
.mean-container .mean-push { float:left; clear:both }
.mean-container .mean-bar, .mean-container .mean-bar * { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box }
.mean-remove { display:none!important }
.meanclose {margin: 6px -14px 0 0;}
}
@media only screen and (max-width:860px) {#mobilelogo img {left: 39%;}}
@media only screen and (max-width:768px) {#mobilelogo img {left: 37%;} .mean-container .mean-bar {top:40px;}}
@media only screen and (max-width:675px) {#mobilelogo img {left: 35%;}}
@media only screen and (max-width:575px) {#mobilelogo img {left: 38%;}#mobilelogo img {width: 123px; padding-top: 20px;}}
@media only screen and (max-width:480px) {#mobilelogo img {left: 35%;}}
@media only screen and (max-width:375px) {#mobilelogo img { width: 90px; padding-top: 23px;left: 37%;}}