@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;}
@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: 760px;}}
@media only screen and (max-width:768px) {#subpage-tpl .center-col {width: 100% !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: #a03196;}
#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: 'Open Sans', sans-serif, Helvetica, Arial;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 */ 


/* Cols */

.col-25, .col-33, .col-40, .col-50, .col-60, .col-67, .col-75 {float: left; box-sizing: border-box;}
.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;}


/* 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-70 {padding: 70px 0;}  .vpadding-80 {padding: 80px 0;} .vpadding-110 {padding: 110px 0;} .vpadding-120 {padding:120px 0}


@media only screen and (max-width:1660px) {.vpadding-70, .vpadding-60 { padding: 40px 0;}}
@media only screen and (max-width:1024px) {.vpadding-120 {padding: 80px 0;}}
@media only screen and (max-width:720px) {.vpadding-120 {  padding: 40px 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%;}


/* Breadcrump */

#murupolku {    color: #000;width: 100%;height: auto;padding-bottom: 1em;}
#murupolku a {color: #000;}

/*--------- WEBIO BASIC STYLE ------------*/
html, body {font-size:100%;line-height: 1.5rem;}
body, p {margin: 0;padding: 0;}
body, p, .teksti, td, ul, li, a {font-family: 'Open Sans', sans-serif, Helvetica, Arial; color: #000;}

a {color: #9a248f; 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: 'Open Sans', sans-serif, Helvetica, Arial; margin: 0;font-weight: 700;}
h1, h1 a {color: #a03196; font-size: 2.5rem;line-height: 3rem;padding: 0px 0px 0px 0px;text-transform: uppercase;}
h2, h2 a {color: #a6197d; font-size: 2.125rem;line-height: 2.65rem;padding: 0px 0px 10px 0px;}
h3, h3 a {color: #a6197d; font-size: 1.625rem;line-height: 2.1rem;padding: 0px 0px 5px 0px;}
h4, h4 a {color: #000; font-size: 1.625rem;line-height:2.1rem;padding: 0px 0px 5px 0px;}
h5, h5 a {color: #000; font-size: 1.125rem;line-height:1.6rem;padding: 0px 0px 5px 0px;}
h6, h6 a {color: #002f2f; font-size: 2rem;line-height:2.5rem;padding: 0px 0px 5px 0px;text-transform: uppercase;}

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

/* News */
.uutis_otsikko, .nostettumoduli {color: #a03196 !important; font-size: 1.2rem;font-weight: normal;}


.uutis_otsikko {color: #a03196 !important; font-weight:700;padding-top: 30px !important;}
.uutis_otsikko:first-of-type {padding-top:0;}

.nostettumoduli {color: #a03196 !important; font-size: 1.2rem;font-weight: normal;}
.uutispaivays, .uutis_paivays, .uutispaivaysetusivu, .nostouutis_paivays {
    display: inline-block;
    font-size: 0.65rem;
    color: #fff;
    font-weight: 700;
    background: #9a2590;
    padding: 3px 10px;
    line-height: 140%;
}


.uutis_paivays {margin-bottom: 20px;font-size: 0.8rem;color: #747474;padding: 0px 5px; background:none;}

a.nostouutis_otsikko {color: #000; display: block;font-size: 1.2rem;font-family: 'Open Sans', sans-serif, Helvetica, Arial;font-weight: 700;
}
/* Forms heading*/
.lomakeotsikko {color: #a03196; font-weight: bold;}
.lomaketekstiotsikko {color: #a03196; font-weight: bold;}
/* Form fields */



input, .lkentta select, .lpainike, textarea {color: #000; border: 1px solid #b0b0b0;padding-left: 3px;}
/* Webio submenu */

.valikkolinkki-sel, .valikkolinkki, .valikkomodulilinkki, .valikkomodulilinkki-sel {text-decoration: none;}
.valikkolinkki {color: #fff;}
.valikkolinkki-sel {color: #fff;font-weight: bold;}
.valikkomodulilinkki {color: #a03196;}
.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 {font-size:0.9rem;margin-top: 20px;display: inline-block;text-align: center;background: #a03196; /* vari1 */height: auto;color: #FFF;padding: 10px 10%;font-weight: 700;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);
  /* Safari */
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
a.webiolinkkipainike:hover, a.takaisinuutisiin:hover {opacity: 1;filter: alpha(opacity=100);transition: all 0.3s ease 0s;}
img[title="Poista"] {height: auto !important;width: auto !important;}

.valikkolinkki_piilosivu,.valikkolinkki_eijulkinen  {color: #005600;}
@media only screen and (max-width:1280px) {a.webiolinkkipainike, a.takaisinuutisiin { padding: 10px 5%;}}

/* --------- 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"], .lomakenappi_reset {height: 40px;-webkit-border-radius: 2px;-moz-border-radius: 2px; border-radius: 2px;margin-bottom: 10px;background: #fff;width: 100% !important;border: 1px solid rgba(0, 0, 0, 0.2); box-sizing: border-box;}
.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: #a03196;color: #fff;font-size: 0.875rem;font-weight: bold;text-transform: uppercase;padding: 5px 0;display: block;}


.pakollinenkentta {background:none !important;}
.pakollinenkentta .lomakeotsikko {
  color: red !important;}

#submenu input {border: none;border-radius: 0;}

div[id^="webiolomake_"] select {color: #000;font-size: 18px;width: auto; margin-left: 0; margin-top: 0;padding: 10px 0 10px 10px; border: 0 !important; -webkit-appearance: none;-moz-appearance: none; appearance: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
    background-size: 12px;background-position: calc(100% - 20px) center;background-repeat: no-repeat;background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2) !important; min-width:163px}
input.lomakenappi_submit:hover {background: #7f035a !important;}
.pakollisetkentat td {color: #514e4e;}
#submenu input {border: none;border-radius: 0;}
div[id^="webiolomake_"]  {background: #e9e7e8;padding: 5%;box-sizing: border-box;}
div[id^="webiolomake_"] p {color: #514e4e;font-style: italic;font-size: 14px;font-weight: 300;}
div[id^="webiolomake_"] h5 {color: #a61a7d;}

/* Placeholder */div[id^="webiolomake_"]  input {color: #8f8e8e;font-weight: 500;font-size: 16px;padding: 0 10px;}
/* For iphone & ipad */
.lomakenappi_submit, .valikkomodulilinkki_select, .lomakenappi_reset {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.lomakenappi_submit, .lomakenappi_reset {background: #a61a7d !important;color: #fff !important;font-size: 15px;}
input.lomakenappi_submit:hover { background: #7f035a !important;}.pakollisetkentat td {color: #514e4e;}
.lomakenappi_reset {
    background: #aeaeae !important;
}

/* ------- 1440px ------ */
@media only screen and (max-width:1440px) {
.col-full textarea, .col-full input[type="text"], .col-full input[type="file"] {
    width: 100%;
}
/* Footer */
#footer .col-75 {padding: 15px 0 !important;}
#semio-logot {padding-top: 25px !important;}
h4, h4 a {font-size: 1.4rem;line-height: 1.6rem;}
  
}

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

html, body {font-size:90%;line-height: 1.5rem;}  
  p {font-size:1.1rem; line-height: 1.7rem}  
  
/* Headings */
h1, h1 a {font-size: 2.2rem; line-height:2.7rem;}
h2, h2 a {font-size: 2.125rem; line-height:2.6rem;}
h4, h4 a {font-size: 1.125rem; line-height:5rem;}
h4, h5 a {font-size: 1.5rem; line-height:2rem;}
h6, h6 a {font-size: 1.8rem; line-height:2.3rem;}
}


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

/* 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; 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;}*/
  #submenu ul {display:none;}
  
  h3, h3 a {
    font-size: 1.1rem;
    line-height: 1.5rem;
}
}

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

body {line-height: 1.25em;}

/* Headings 
h1, h1 a {font-size: 1.8rem; line-height:2.3rem;}
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.4rem; line-height:	1.9rem;}*/	
	
  
.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: 100%;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, .col-full textarea, .lomakenappi_reset {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) {


/* 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.2rem; line-height:	1.7rem;}
  
}*/	
}
/* ------- 420px ------ */
@media only screen and (max-width:420px) {
#submenu {font-size: 60%;}
}

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

@media only screen and (max-width:640px) {
.kuvagalleriakuvatausta {float: left !important;margin: 0 1.5% 20px !important;width: 29% !important;}
.kuvagalleriakuvatausta .kuva {float: none;margin: 0 auto;}
}

@media only screen and (max-width:480px) {.kuvagalleriakuvatausta {width: 45% !important;}
}




/* ----------- MOBIILIVALIKKO ------------------*/

#main-navi-resp {display:none;}

@media only screen and (max-width:1024px) {
	#topnavi, #main-navi, header nav, header .col-75  {display:none;}
  #main-navi-resp {display:block;}
  nav.content-col {display:none;}
  #logo {left: 20px;position: absolute;top: 10px;width: auto;z-index: 2300000;}
   #mobilemenu-container::after {right:13px!important}
  .mean-bar::before {color: #000 !important;content: "VALIKKO";font-size: 10px !important;top: 45px;width: 50px;height: 50px;right: 1px;position:absolute;}
	a.meanmenu-reveal { display:none }
	.mean-container a.meanmenu-reveal.meanclose::after {margin-left:-2px;margin-top:15px;padding-left:0;text-align:left; color:#fff; display:none;}
	.mean-container a.meanmenu-reveal.meanclose { height:46px; right:25px !important; width:42px!important; color:#000; font-size: 37px !important; margin-top: 11px}
	.mean-container .mean-bar { float:left; left:0;width:100%; position:absolute; top:0; padding:0; min-height:78px; z-index:20 }
	.mean-container a.meanmenu-reveal { height:22px; position:absolute; top:0px; margin-top: 4px;cursor:pointer; color:#fff; text-decoration:none; text-indent:-9999em; line-height:22px; font-size:1px; display:block; font-weight:700; right:12px !important; padding:8px 0 11px; width:39px }
	.mean-container a.meanmenu-reveal span { background:#a03196; border-radius:2px;
	display:block; height:6px; margin-top:4px; color:#000; width:39px }
	.mean-container .mean-nav { float:left; width:100%; margin-top: 78px }
	.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: 15px 5% 5px 5%; height:28px; margin:0; text-align:left; color:#fff; border-top:1px solid rgba(255, 255, 255, 0.2); text-decoration:none; font-size:14px;background:#a03196;font-weight:600; text-transform:uppercase }
	.mean-container .mean-nav ul li li a { width:80%; padding:15px 10% 3px 10%; border-top:1px solid #f1f1f1; border-top:1px solid rgba(255, 255, 255, .25);  text-shadow:none!important; visibility:visible; background:#7e0873; }
	
	.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:#9a248f; }
	.mean-container .mean-nav ul li a.mean-expand { height:27px; background: #7e0873 none repeat scroll 0 0; border:0; border-radius: 3px; color: #fff; font-weight: 700; margin-top: 7px; padding: 6px 4px 0px !important; position: absolute; right: 10px; text-align: center; top: 2px; width: 26px; z-index: 2; }
	.mean-container .mean-push, .mean-nav .wrapper { width:100%; padding:0; margin:0 }
	.mean-container .mean-nav ul li a.mean-expand:hover {}
	.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:375px) {
		#mobilemenu-container::after {right:8px!important}  
		#mainimg-productpage {height:auto !important;}
	}
	
	@media only screen and (max-width:290px) {
		#mobilemenu-container::after {right:4px!important}
	}