@charset "utf-8";
/* CSS Document */
@-ms-viewport {width: device-width;}


/* --------- COLWRAPPER + VIEWPORTS ----------- */

.content-col {width: 100%;clear: both;}
.center-col {clear: both;margin: 0% auto;width: 1600px;}
#subpage-content img {max-width:100%; height:auto;}
@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: 96%;}}
@media only screen and (max-width:768px) {.center-col {width: 90% !important;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: #112432;}


/* Image scaling */
.content-col img.erikoiskuva, .content-col img.kuva2, .center-col img.erikoiskuva, .center-col img.kuva2 {border: 0;outline: none;max-width: 100%;height: auto;display: block;margin: 0;}

/* Cols */

.col-25, .col-33, .col-40, .col-50, .col-60, .col-67, .col-75 {float: left;}
.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-100 {width: 100%;clear: both;}

/* Cols w padding*/

.col-25-whp, .col-33-whp, .col-40-whp, .col-50-whp, .col-60-whp, .col-67-whp, .col-75-whp, .col-100-whp, .col-33-center-whp {float: left;box-sizing:border-box;}
.col-25-whp {width: 21%;padding: 0 2%;} .col-33-whp {width: 29.3%;padding: 0 2%;}.col-40-whp {width: 36%;padding: 0 2%;}.col-50-whp {width: 46%;padding: 0 2%;}.col-60-whp {width: 56%;padding: 0 2%;}.col-67-whp {width: 62.7%;padding: 0 2%;}.col-75-whp {width: 71%;padding: 0 2%;}.col-100-whp {width: 92%;padding: 0 4%;}

/* 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-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%;}

#subpage-content table, #subpage-content tr, #subpage-content td {height:auto !important;}

/* Breadcrump */

#murupolku {color: #c32e18; width: 100%;height: auto;padding-bottom: 20px;}
#murupolku a {color: #c32e18;}

/*--------- WEBIO BASIC STYLE ------------*/
html, body {font-size:1rem;line-height: 1.375em;}
.tuote-esittely-pcard-content td, .tuote-esittely-pcard-content p, .tuote-esittely-pcard-content span, #tuotevaihtoehdot td, #tuotevaihtoehdot p, #tuotevaihtoehdot span {font-size:1rem !important;}
body, p {margin: 0;padding: 0;}
body, p, .teksti, td, ul, li, a {font-family: 'Open Sans', sans-serif; color: #000;}

a {color: #c32e18; 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: 'Montserrat', sans-serif; margin: 0;font-weight: 400;}
h1, h1 a {color: #fff; font-size: 2.875rem;line-height: 1.05em;padding: 0px 0px 0px 0px; font-weight:900;transform: skew(-8deg); -webkit-transform: skew(-8deg);-moz-transform: skew(-8deg); -ms-transform: skew(-8deg); -o-transform: skew(-8deg);text-shadow:1px 4px 8px rgba(0, 0, 0, 0.8);}
h2, h2 a {color: #fff; font-size: 1.5rem;line-height: 1.25em;padding: 0px 0px 20px 0px; font-weight:700;}
h3, h3 a {color: #e41e13; font-size: 1.375rem;line-height: 1.25em;padding: 0px 0px 5px 0px; font-weight:900; text-transform: uppercase;}
h4, h4 a {color: #c32e18; font-size: 1.125rem;line-height:1.22222222em;padding: 0px 0px 5px 0px;}
h5, h5 a {color: #000; font-size: 1.125rem;line-height:1.22222222em;padding: 0px 0px 5px 0px; font-weight:700;}
h6, h6 a {color: #fff; font-size: 1.75rem;line-height:1.22222222em;padding: 0px 0px 5px 0px;text-transform: uppercase; font-weight:900;}

/* Event calendar  */
.tapahtumat {font-weight: bold;}
.tapahtumakalenteri_otsikko {color: #c32e18; font-weight: bold;}
.tapahtumakalenteri_valiotsikko {font-weight: bold;}

/* News */
.uutis_otsikko, .nostettumoduli {color: #c32e18 !important; font-size: 1.2rem;font-weight: normal;}
.nostettumoduli {color: #c32e18 !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: #c32e18; display: block;font-size: 1.2rem;font-family: 'Montserrat', sans-serif;font-weight: 300;
}
/* Forms heading*/
.lomakeotsikko {color: #c32e18; font-weight: bold;}
.lomaketekstiotsikko {color: #c32e18; 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;}
.valikkolinkki {color: #c32e18;}
.valikkolinkki-sel {color: #000;font-weight: bold;}
.valikkomodulilinkki {color: #c32e18;}
.valikkomodulilinkki-sel {color: #000;font-weight: bold;}


/* 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: #e41e13; /* vari1 */height: auto;color: #FFF;padding: 10px 10% 10px 10%;font-weight: 900;text-transform: uppercase;line-height: 160%;width: auto;;-webkit-transform: skew(-8deg);-moz-transform: skew(-8deg);-ms-transform: skew(-8deg);-o-transform: skew(-8deg);transform: skew(-8deg);}
a.webiolinkkipainike:hover, a.takaisinuutisiin:hover {opacity: 0.8;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: #e41e13;color: #fff;font-size: 0.875rem;font-weight: bold;text-transform: uppercase;padding: 5px 0;display: block;height: auto;}


#semio-logot img {
    display: inline;
    padding: 0px 0;
}

/* ------- 1440px ------ */
@media only screen and (max-width:1440px) {

/* Footer */
#footer .col-75 {padding: 15px 0 !important;}
#semio-logot {padding-top: 0 !important;}
}

/* ------- 1280px ------ */
@media only screen and (max-width:1280px) {
  html, body {font-size: 95%;line-height: 1.375rem !important;}}
/* Headings
h1, h1 a {font-size: 2.5rem; line-height:1.125em;}
h2, h2 a {font-size: 2.0rem; line-height:1.25em;}
h3, h3 a {font-size: 1.5rem; line-height:1.25em;}
h4, h4 a {font-size: 1.125rem; line-height:1.22222222em;}
h4, h5 a {font-size: 1.125rem; line-height:1.22222222em;}
h6, h6 a {font-size: 1.125rem; line-height:1.22222222em;}
}*/

/* ------- 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: 20px;width: 100%; padding:0;}
  .vpadding-60 {padding:40px 0;}
/* Footer */
#footer div {clear: both;float: none;padding: 0 0 20px;text-align: center;width: 100%;}
#footer .col-67 {margin-top: 40px !important;}
  h1 {text-shadow:none;}
  .vpadding-40 {padding:20px 0;}
/* 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;}
}



/* ------- 860px ------ */
@media only screen and (max-width:860px) {

body {line-height: 1.25em;}
#mainimg-front p{font-size:80%;}
/* Headings */
h1, h1 a {font-size: 2rem; line-height:1.25em;}
h2, h2 a {font-size: 1.625rem; line-height:1.15384615em;}
h3, h3 a {font-size: 1.375rem; line-height:	1.13636364em;}
h4, h4 a {font-size: 1.125rem; line-height:	1.11111111em;}
h4, h5 a {font-size: 1.125rem; line-height:	1.11111111em;}
h6, h6 a {font-size: 1.125rem; line-height:	1.11111111em;}

#subpage-content table, #subpage-content tr, #subpage-content td {display: block;width: 100% !important;height: auto;clear: both; float:none; padding:0;}


/* Footer */


/* 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 */
.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%;}*/


/* Haadings */
h1, h1 a {font-size: 2rem; line-height:1.25em;}
h2, h2 a {font-size: 1.625rem; line-height:1.15384615em;}
h3, h3 a {font-size: 1.375rem; line-height:	1.13636364em;}
h4, h4 a {font-size: 1.125rem; line-height:	1.11111111em;}
h4, h5 a {font-size: 1.125rem; line-height:	1.11111111em;}
h6, h6 a {font-size: 1.125rem; line-height:	1.11111111em;}

}

/* ------- 420px ------ */
@media only screen and (max-width:420px) {
#submenu {font-size: 60%;}
}

/* ----------- KUVAGALLERIATAUSTA -------------- */

.kuvagalleriakuvatausta {margin: 10px 10px !important;

}

@media only screen and (max-width:1280px) {.kuvagalleriakuvatausta {margin: 10px 1% !important;box-sizing: border-box; }}

@media only screen and (max-width:1024px) {
.kuvagalleriakuvatausta {
    margin: 2% !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
height:auto !important;
    background-size: cover;
    max-width: 21%;
}

.kuvagalleriakuvatausta  .kuva {
    padding: 0 !important;
    height:auto !important;
    max-width:100% !important;
}
}
@media only screen and (max-width:640px) {

	.kuvagalleriakuvatausta .kuva {float: none;margin: 0 auto;}}

@media only screen and (max-width:520px) {.kuvagalleriakuvatausta {max-width:29%;}}