html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 101%; } /* always display scrollbars */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; } 
a {text-decoration: none;}
input { outline: none; }
.clear {clear: both;}
em {font-style: italic;}
.liner {width: 100%; height: 3px; background: #f0f0f0; float: left; margin-top: 15px; margin-bottom: 30px;}
/*
COLOURS:
Green: #009640
Light yellow: #fffcd8
Light green: #e5f4eb
*/
body {-webkit-text-size-adjust: 100%; font-family: 'Roboto', sans-serif; font-size: 14px; height: auto; color: #878787;}
h1, h2, h3, h4, h5, h6 {font-family: 'Ubuntu', sans-serif; font-weight: 700; color: #000;}
.wrapper {width: 100%; max-width: 1400px; margin: 0 auto;}
.whiteBg {background: #fff;}
.greenBg {background: #e5f4eb;}
.yellowBg {background: #fffcd8;}
.button {padding: 15px 3%; color: #fff; font-size: 16px; text-transform: uppercase; font-family: 'Ubuntu', sans-serif; min-width: 200px; text-align: center;}
.greenButton, .content .greenButton  {background: #009640;border: 2px solid #fff;padding: 15px;color: #fff;text-transform: uppercase;}
.greenButton:hover {background: #fff; color: #009640;border: 2px solid #009640;}
.grayButton {background: #b0b0b0;border: 2px solid #666;padding: 15px; color: #fff;text-transform: uppercase;}
.grayButton:hover {background: #fff; color: #009640;border: 2px solid #009640;}
.buttonRight {float: right;}
.buttonLeft {float: left;}
.buttonWrapper {width: 100%; text-align: center; margin: 20px auto 40px auto;}
.submitButton {border: none; margin-top: 30px; cursor: pointer;}
.marginTop {margin-top: 40px;}
h1 {font-size: 36px; text-transform: uppercase;  letter-spacing: 1px;}
h2 {font-size: 36px; margin-bottom: 30px;}
h3 {font-size: 24px; text-transform: uppercase; margin-bottom: 30px;}
h4 {font-size: 20px; text-transform: uppercase; margin-bottom: 15px;}
h5 {font-size: 18px;}
h6 {font-size: 14px; text-transform: uppercase;}
p {font-size: 15px; line-height: 24px;}
.popUpError{position:absolute;z-index:9999;font-weight:600;top:40px;width:80%;margin:0 5%;left:0;border:3px solid #009640;background:#fff;text-align:center;font-size:20px;padding:40px 5%;box-shadow:0 0 20px #000}
.redText {color: #ff0000; float: left;}
.centerText {text-align: center;}
.greenText {color: #009640;}
.content {float: left; width: 100%; margin: 0 auto;}
.content p {margin: 5px auto 15px auto; color: #777;}
.content a {color: #009640; font-weight: bold;}
.content a:hover {color: #777;}
header {width: 100%; position: absolute; float: left; background: #fff; z-index: 20; padding: 10px 0; height: 70px; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.fixed {position: fixed; border-bottom: #f0f0f0 solid 3px;}
.branding {float: left; width: 150px; height: auto;}
.branding img {width: 100%; height: auto;}
.menuLang {float: right; margin-right: 3%; width: 80%; text-align: right;}
.menuLang li {display: inline-table; margin-left: 10px;}
.menuLang li .svg-inline--fa {font-size: 24px;}
.menuMain {float: left; padding-top: 27px; width: 85%;}
.menuMain li {display: inline-table; margin-left: 3%;}
#menuMainMobile, #menuMainMobileBars {visibility: hidden; display: none;}
.menuLang a, .menuMain a {color: #000; font-size: 14px; text-transform: uppercase; font-weight: 500; font-family: 'Ubuntu', sans-serif;}
.menuMain a {color: #777; height: 40px; float: left; width: 100%;}
.menuMain li ul {display: none;}
.menuMain li:hover ul {display: block; position: absolute; width: 270px; background: #e5f4eb; padding: 30px 30px 10px 30px; margin-left: -50px; margin-top: 35px;}
.menuMain li:hover ul:before {content:""; border-style: solid; border-width: 0 20px 20px 20px; border-color: transparent transparent #e5f4eb transparent; position: absolute; top: -17px; left: 50px;}
.menuMain li:hover ul ul {display: block; position: relative; background: none; margin-top: 0; padding: 0;}
.menuMain ul ul li {display: block; margin-bottom: 20px;}
.menuLang a:hover, .menuMain a:hover, .menuLang li.active a, .menuMain li.active a,.menuMain li.active li.active a {color: #009640;}
.menuMain li.active li a {color: #777;}
.menuMain li:hover ul ul {width: 200px; margin-left: -30px; margin-bottom: 0;}
.menuMain ul ul ul li {margin-left: 30px; margin-bottom: 10px;}
.menuMain ul ul ul li a {text-transform: none;}
.menuMain li:hover ul ul:before {border: none;}
/*PÄÄKUVA*/
.mainImage {width: 100%; height: 100vh; float: left; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top center; z-index: 0; position: relative;}
#mainInnerImage {width: 100%; height: auto; float: left; margin-top: 90px;}
#mainInnerImage img {width: 100%; height: auto; float: left;}
#mainImageSmall {width: 100%; height: 80vh; float: left; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; z-index: 0; text-shadow: 1px 1px rgba(0,0,0,0.4);}
.imageReplacement {float: left; margin-top: 100px; width: 100%;}
/*SLIDERIN TEKSTIT*/
.mainText {width: 90%; padding: 40px 5% 50px 5%; position: absolute; bottom:0; z-index: 10; text-align: left; background: rgba(0,0,0,0.5);}
.mainText h3, .mainText h2 { margin-bottom: 10px; color: #fff; font-weight: 500;}
.mainText .button {margin-top: 20px; float: right;}
.mainTextInfo {width: 80%; float: left;}
/*ETUSIVUN PIKALINKIT*/
.linkBanner {width: 90%; background: #fffcd8; float: left; padding: 30px 5%; clear: both; position: relative; text-align: center;}
.linkBanner a.button {display: inline-table; margin: 5px 2%;}
/*SISÄLTÖ*/
.textContent {width: 44%; float: left; padding: 40px 3%;}
.textContent ul {list-style: disc; list-style-position: inside; font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 24px;}
.textContent ul ul {list-style: circle; padding-left: 50px;}
.textContent.floatRight {float: right;}
.textContent img {max-width: 100%; height: auto;}
.imageContent {text-align: center; width: 44%; float: left; padding: 50px 3%;}
.imageContent img {width: 100%; height: auto; max-width: 700px;}
.wideTextContent {width: 94%; padding: 40px 3% 20px 3%; clear: both; float: none;}
.textWrapper {max-width: 600px; margin: 0 auto;}
/*UUTISET*/
.newsWrapper { overflow-x: scroll; white-space: nowrap; margin-right: auto; margin-left: auto; max-width: 1400px; margin-bottom: 30px;}
.newsBox {background: #fff; width: 300px; margin: 0 15px 40px 15px; padding: 30px 20px 20px 20px; white-space: normal; display: inline-block; vertical-align: top;}
.newsBox h4, .newsBox p {margin-bottom: 20px; text-transform: none;}
.newsWrapper::-webkit-scrollbar {width: 10px; height: 10px;}
.newsWrapper::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:window-inactive {border-radius: 0; -webkit-box-shadow: 0; background: #009640;}
.newsWrapper::-webkit-scrollbar-track-piece  {background: #fff;}
.newsBox a {font-family: 'Ubuntu', sans-serif;}
.newsList {text-align: left; width: 85%; float: left; max-width: 400px; margin: 30px 5%; padding: 5%;}
.newsList li {margin-bottom: 15px; font-family: 'Ubuntu', sans-serif; font-size: 16px; border-bottom: 1px solid #009640; padding-bottom: 5px; list-style: none;}
/*TAPAHTUMAT*/
.eventBox {width: 20.3%; margin: 10px 3%; display: inline-table; padding: 20px 3%; background: #fffcd8;}
.eventBox h4 {text-transform: none; margin-bottom: 0;}
.eventBox:hover {background: #777;}
/*KARTTA*/
iframe.googleMap {width: 100%; margin-top: 40px;}
/*FORM*/
form {width: 100%; float: left;}
.ilmoittaudu, .ilmoittauduWide {width: 48%; margin: 10px 1%; float: left;}
.ilmoittauduWide {width: 98%;}
label, select, textarea, input {width: 100%; float: left; margin-bottom: 5px;}
label {font-family: 'Ubuntu', sans-serif; font-size: 16px; color: #000;}
input {height: 30px;}
textarea {height: 100px;}
.checkbox {width: 30px; float: left; height: auto;}
.submitButton {width: auto; min-width: 150px; height: auto; font-family: 'Ubuntu', sans-serif; font-size: 16px;}
form p {width: 100%; float: left;}
/*FOOTER*/
footer {background: #3d3d3d; color: #fff; text-align: center; width: 100%; margin: 0 auto; padding: 40px 0; float: left;}
footer p {font-size: 13px; width: 100%; line-height: normal; margin: 5px 0 10px 0;}
footer h5 {color: #fff; text-transform: uppercase; float: left; width: 100%; margin-bottom: 5px;}
footer li {display: inline-table; margin: 20px 10px 10px 10px;}
footer a {color: #fff;}
/*LOGOT*/
.logos {width: 100%; float: left; text-align: center; padding: 20px 0;}
.logos img {max-width: 170px; height: auto; max-height: 40px; margin: 10px 4%;}
.logos img.eskolaLogo {max-width: 200px; height: auto; max-height: 80px; margin: 10px 4%;}
/*VIDEO*/
.videoContainer {position: relative; padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; margin-top: 30px; margin-bottom: 20px; width: auto; max-width: none;}
.videoContainer iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/*SEARCH*/
.simplesearch-highlight {background: #ff0;}
.simplesearch-result h3 {margin-bottom: 15px;}
.simplesearch-result {margin-bottom: 30px;}

@media screen and (max-width: 1580px) {
.wrapper {width: 90%; margin: 0 5%;}
.newsWrapper {margin-bottom: 30px;}
}
@media screen and (max-width: 1280px) {
.linkBanner a.button {margin: 5px 1%;}
/*---MEANMENU---*/
/* hide the link until viewport size is reached */
a.meanmenu-reveal {display: none;}
/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {width: 100%; position: absolute; padding: 0; z-index: 4000; margin-bottom: 0; top:0; margin-top: 38px; height: 50px; color: #777;}
.mean-container a.meanmenu-reveal {position: absolute; cursor: pointer; color: #000; text-decoration: none; text-indent: 0; display: block; z-index: 4000; text-align: left; text-transform: uppercase; margin-top: 5px; margin-right: 3%;}
.mean-container a.meanmenu-reveal span {display: block;background: #000; height: 5px; margin-top: 3px; width: 30px; border-radius: 2px;}
.mean-container .mean-nav {float: left; width: 100%;}
.mean-container .mean-nav ul {width: 100%; list-style-type: none; z-index: 3000; margin: 52px 0 0 0; background: #e5f4eb;}
.mean-container .mean-nav ul li {position: relative; float: left; width: 90%; margin: 0; float: left; display: block; background: #e5f4eb; padding: 20px 5%; border-bottom: 1px solid #fff;}
.mean-container .mean-nav ul li a {display: block; float: left; width: 100%; color: #777; font-size: 14px; text-transform: uppercase; font-weight: 500; font-family: 'Ubuntu', sans-serif;}
.mean-container .mean-nav ul li a.mean-expand {width: 15px; height: 15px; padding: 12px 20px 30px 25px !important; text-align: left; position: absolute; right: 0; top: 0; z-index: 2; background: #009640; border: none !important; color: #fff;}
.mean-container .mean-nav ul li ul {width: 97%; padding-left: 3%;}
.mean-container .mean-nav ul li li {border-bottom: none;}
.mean-container .mean-nav ul li ul a {text-transform: none;}
.mean-container .mean-push {float: left; width: 100%; padding: 0; margin: 0; clear: both;}
.mean-nav .wrapper {width: 100%; padding: 0; margin: 0;}
/* Fix for box sizing on Foundation Framework etc. */
.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;}

}
@media screen and (max-width: 1180px) {
.linkBanner {width: 60%; padding: 30px 20%;}
.linkBanner a.button {margin: 5px 2%;}
.eventBox {width: 37%; margin: 10px 3%;}
.menuLang {width: 70%; position: absolute; right: 0;}
.menuMain {padding-top: 50px;}
}
@media screen and (max-width: 880px) {
.linkBanner {width: 90%; padding: 30px 5%;}
.textContent, .imageContent {width: 94%; padding: 40px 3%;}
.imageContent {padding-top: 0;}
.wideTextContent {padding: 40px 3% 20px 3%;}
.eventBox {width: 94%; margin: 10px 0;}
#mainInnerImage {overflow: hidden; height: 300px;}
#mainInnerImage img {height: 300px; width: auto;}
}
@media screen and (max-width: 640px) {
.ilmoittaudu {width: 98%;}
header {height: 100px;}
.imageReplacement {margin-top: 140px;}
.branding {margin-top: 30px;}
.menuLang {float: right; margin-right: 3%; width: 97%; text-align: right;}
.mean-container .mean-bar {margin-top: 75px;}
.mean-container .mean-nav ul {margin: 45px 0 0 0;}

}