/* Basic
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html  {width:100%: height:100%;background-color: #fff;min-height:100%;}

body {padding: 0;margin: 0;color: #000; min-height:100vh;}
.only-desktop {display:none}
.text-center {text-align: center;}

a {color:#fff; text-decoration:none}
a:hover {opacity:0.7}
li.active > a {color:#fff;}


/* tablet and small desktops (md) */
@media screen and (min-width: 64em) {
body {}
.only-mobile {display:none}
.only-desktop {display:block}
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3 {font-family: 'Digitalino',Arial,sans-serif;margin:0.37em 0;overflow-wrap: break-word;}
h4 {margin:0.37em 0;}

body {font-family: Arial,sans-serif;font-weight:400;}

/* Older browsers */
html,body { font-size: 14px; }
  
/* Modern browsers only need this one */  
@media screen and (min-width: 30em){
body { font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); }
}

p {margin-top: 0.5em;line-height: 1.2em;}
h1 {font-size:5em}
h2 {font-size:1.75em}
h3 {font-size:1.5em;}
h4 {font-size:1.125em}
p.index {font-size:1.25em;font-size:1em; font-weight:bold;}

.pure-g [class*="pure-u"] {font-family:Arial,sans-serif;}

/* large mobile (sm) */
@media screen and (min-width: 35.5em) {
}

/* tablet and small desktops (md) */
@media screen and (min-width: 48em) {
/*p {margin-top: 0.5em;line-height: 1.2em;font-size:0.875em}*/
}

/* medium desktops (lg) */
@media screen and (min-width: 64em) {
}

/* large desktops (xl) */
@media screen and (min-width: 80em) {
}

/* hd and extra large desktops (hd) */
@media screen and (min-width: 120em) {
#section0 p.index {font-size:1.25em;}
}

/* Sitename
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sitename {position:absolute; top:0.685em; left:0.625em; z-index:900;color:#fff; font-size:1.3em;font-weight:bold}
.sitename a { background-color: transparent;color: #fff;text-decoration: none;font-size: 0.813em;}
.sitename a:hover, .sitename a:focus {opacity:0.75}

/* Desktop menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#desktop-menu {display:none}

/* tablet and small desktops (md) */
@media screen and (min-width: 64em) {
#desktop-menu {display:block;position:absolute; top:0; width:100%; background-color:#61a29a;background-color:#24a49c; padding: 1.125em 0; z-index:9}
ul.menu-list {list-style-type: none;padding-left:0;margin:0;float:right;}
ul.menu-list li {position: relative;display: block;float:left;padding: 0 0.625em 0.208em;}
ul.menu-list li:last-child {border:none}
a.menu-link { color: #fff;text-decoration: none;font-size: 0.75em;}
a.menu-link:hover, a.menu-link:focus {opacity:0.75}
}


/* Mobile menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.jPushMenuBtn {z-index:900}
.toggle-menu {position: fixed;top: 0;right: 0;z-index: 900;background-color: #fff;padding: 10px 15px;cursor:pointer;color:#141b1f}
a.toggle-menu:hover {opacity:0.75}
.toggle-menu > i.fa {font-size:1.125em}
.close-mobile {text-align:right}
.close-mobile > i.fa {font-size:1.125em}
.close-mobile:hover {background-color:##141b1f}


/* tablet and small desktops (md) */
@media screen and (min-width: 64em) {
#mobile-menu {display:none;}
}

/* Shared styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {text-align:center;position:relative;
background-repeat: no-repeat;
background-position: center top;}
.section-container {padding:2em 1em 1em 1em;width:100%}
p.white {color:#fff;}

img {max-width: 100%;}
a.read-more img  {width:50px}
ul.list {list-style: none;padding: 0;margin: 0;}
ul.list li {padding-left: 1em; text-indent: -.7em;}
ul.list li::before {content: "• ";color: #fff;}

ul.list-unstyled {list-style: none;padding: 0;margin: 0 0 1em 0;}
ul.list-unstyled li {padding-left: 0; text-indent: 0;}


 /* tablet and small desktops (md) */
@media screen and (min-width: 48em) {
/*ul.list li, ul.list-inline li {font-size:0.875em}*/
.section-text-col {padding:1em 2em;}
}


/* medium desktops (lg) */
@media screen and (min-width: 64em) {
.section {background-size: cover; height:100vh;}
.section-container {padding:1em 3em;}
a.read-more  {position:absolute; bottom:0.5em;}
a.read-more img  {width:85px}
}

/* hd and extra large desktops (hd) */
@media screen and (min-width: 120em) {
a.read-more img  {width:100%}
}





/* Luokkalehtikilpailu2018
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#section0 {background-color:#24a49c;
background-image: url(../media/2753/bg-section0.jpg);
color:#fff;}
#section0 .section-container {padding:3.875em 1em 1em 1em;}

.section-img {width:50%}
.intro-img {margin:1em 0}

/* tablet and small desktops (md) */
@media screen and (min-width: 48em) {
.section-img-col {padding-top:20vh}
.section-img {width:auto;height:auto;}
.intro-img {width:90%; padding-left:10%;}
.intro-text {padding:2em 0 0 30%;}
}

/* medium desktops (lg) */
@media screen and (min-width: 64em) {
#section0 .section-container {padding:3.875em 3em 1em 3em;}
.section-img-col {padding-top:20vh}
.section-img {width:auto;max-height:65vh;}
#section0 a.read-more  {bottom:0 em;}
}

/* large desktops (xl) */
@media screen and (min-width: 80em) {
.intro-text {padding:2em 0 0 35%;}

}

/* hd and extra large desktops (hd) */
@media screen and (min-width: 120em) {
.intro-text {padding:3em 0 0 45%;}
.section-img {height:65vh;}
}

/* Tutki, opi, innostu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#section1 {background-color: #efd533}
.section-text-col {padding:1em}

/* tablet and small desktops (md) */
@media screen and (min-width: 48em) {
#section1 .section-img-col {padding:0}
#section1 .section-img {}
#section1 .section-text-col {display:table;padding-top:5vh;padding-bottom:5vh}
#section1 .valign-bottom {display:table-cell; vertical-align:bottom;width:auto;height:auto;padding:0 2em;}

}

/* medium desktops (lg) */
@media screen and (min-width: 64em) {
#section1 .section-container {padding:1em 3em}
#section1 .section-img-col {padding-top:5vh;padding-bottom:5vh}
#section1 .section-img {width:auto;max-height:80vh;}
#section1 .section-text-col {display:table;padding-top:5vh;padding-bottom:5vh}
#section1 .valign-bottom {display:table-cell; vertical-align:bottom;height:80vh;padding:0 2em}
}

/* large desktops (xl) */
@media screen and (min-width: 80em) {
#section1 .section-img-col {text-align:right}
#section1 .section-img {width:auto;height:80vh;}
}

/* hd and extra large desktops (hd) */
@media screen and (min-width: 120em) {
#section1 .section-img-col {text-align:right}
#section1 .valign-bottom {padding:0 9em 0 5em}
}

/* Palkinnot
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#section2 {background-color:#eca5a6; background-image: url(../media/2754/bg-section2.jpg);background-position: center bottom;}
.bubble-img {width:80%}
#section2 p.index {margin-top:-1em}

/* tablet and small desktops (md) */
@media screen and (max-width: 48em) { 
#section2 .section-img {width:60%}
}

/* Toimi näin
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#section3 {background-color:#24b3ab; background-image: url(../media/2755/bg-section3.jpg)}
#section3 a {color: #000;font-weight: bold;}
#section3 a:hover {}
#section3 .btn-link {font-family: 'Digitalino',Arial,sans-serif;
background-color:rgba(255,255,255,1); padding:0.6em; border-radius:0.3em;display:inline-block;}
#section3 .btn-link {color: #69b2aa;font-weight: normal;text-align:center;
-webkit-box-shadow: 0px 5px 10px 4px rgba(34,34,33,0.25);
-moz-box-shadow: 0px 5px 10px 4px rgba(34,34,33,0.25);
box-shadow: 0px 5px 10px 4px rgba(34,34,33,0.25);}
#section3 .btn-link:hover {text-decoration:none;background-color:rgba(255,255,255,0.9);opacity:1}
#section3 p.index {margin-bottom:0}
#section3 h2 a {color:#fff;}
#section3 h2 a:hover {color:#fff;opacity:0.75;text-decoration:none;}

/* tablet and small desktops (md) */
@media screen and (min-width: 48em) {
#section3 .section-img-col {padding:0}
#section3 .section-img {}
#section3 .section-text-col {text-align:left; padding:1em 1em}
#section3 h2 a {position:absolute; bottom:1em;}

#section3 ul li{font-size:1em}

}

/* medium desktops (lg) */
@media screen and (min-width: 64em) {
#section3 .section-container {padding:1em 3em}
#section3 .section-img-col {padding-top:5vh;padding-bottom:5vh}
#section3 .section-img {width:auto;max-height:80vh;}
#section3 .section-text-col {text-align:left; padding:2em 1em}
#section3 ul li{font-size:1em}
}

/* large desktops (xl) */
@media screen and (min-width: 80em) {
#section3 .section-img {width:auto;height:80vh;}
#section3 h2 a {bottom:2em;}
}

/* hd and extra large desktops (hd) */
@media screen and (min-width: 120em) {
#section3 .section-img-col {text-align:left}
#section3 .section-text-col {text-align:left; padding:3em 5em}
}


/* Osallistu lomake
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body.formPage {background-color:#24b3ab;background-image: url(../media/2752/bg-section-form.jpg);
background-repeat:no-repeat;
background-position:center top;
background-size: 100% auto;}

.close {position: absolute;top: 0;right: 0;background-color: #000;padding: 0.625em 1.2em;}
#section-form p {margin-bottom:0; margin-top:0.875em}
#section-form p.has-error{text-align: center;color: red; margin-bottom: 2em;}
#section-form h4 {font-size:1em; margin-left:0.875em;color:#69b2aa; margin-bottom:0.625em}
#section-form h4 span.small {font-size:0.7em}
.text-wrapper {padding:3em 1em 1em 1em; text-align:center;}
form {padding-bottom:1em}
.pure-form fieldset {padding:1.2em; background-color:#fff;}
.pure-form textarea {height:5.5em;}
.pure-form-stacked label {margin: .625em 0 .2em; font-size:0.7em;}
.pure-form input[type="text"],
.pure-form input[type="email"],
.pure-form input[type="file"],
.pure-form select,
.pure-form textarea {
	font-size:0.825em; padding:0.3em 0.5em;box-shadow:none;}
.pure-form input[type="text"]:focus,
.pure-form input[type="email"]:focus,
.pure-form input[type="file"]:focus,
.pure-form select:focus, 
.pure-form textarea:focus {
	border-color:#69b2aa;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(105,178,170, 0.6);outline: 0 none;}
.pure-form input.larger-checkbox {width: 1.2em;height: 1.2em;position: relative;top: 1px;}
.pure-form input.larger-radio {width: 1.2em;height: 1.2em;position: relative;top: 1px;margin-right:0.3em}
.pure-form .pure-radio {display: inline-block;margin:0.3em 0}
.pure-form-stacked .pure-control-group, .pure-form-stacked .pure-controls {margin:0.3em 0.875em}
.pure-form-stacked .pure-control-group.julkaisulupa {margin-bottom:1em}
.pure-form-stacked .pure-controls { width:100%}
.pure-form-stacked .pure-control-group.has-error {color:red;}
.pure-form-stacked .pure-control-group.has-error .form-control {border-color:red}
.form-control {width:100%}
.pure-form select {height: 1.875em;border: 1px solid #ccc; background-color: #fff;}
.pure-form input[type="file"]{padding-left:0}
.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected {background-color: #69b2aa;color: #fff;margin-top: 1em;}
div.info {padding-top: 1em;text-align: center;}
div.info span {display:block}

ul.list-inline {list-style: none;padding: 0;margin: 0;}
ul.list-inline li {padding-left: 1em; text-indent: -.7em;}
ul.list-inline li::before {content: "• ";color: #fff;}

span#magPDF_fileErrorMsg.error,div#magPDF_fileErrorMsg.error
{
	color: #E24425;
	border:none !important;
	font-weight: 700;
	text-transform: none;
	background-color: #EBD656;
	padding: 2px 5px;
	color: #FFF;
	}

div#form_ilmo_error.error {
	margin-top:2em;
}


.uploader_container  {
    display: inline-block;
    padding: 0.1em 0.2em;
    border-radius: 0.3em;
    margin: 0.2em 0 0 0;
	background-color: #69b2aa;
	border: 1px solid #69b2aa;
	color: #FFF;font-size:0.875em
}
	
a.uploader_pickfiles{color:#fff;text-decoration: none;font-size:0.875em}
a.remove {color:#69b2aa;}
	
.uploader_filelist {margin-bottom:1.5em; color:#999;font-size:0.7em}

/* large mobile (sm) */
@media screen and (min-width: 35.5em) {
form {padding:1em 2em}
.pure-form fieldset {padding:2em;border-radius:4px;}
.text-wrapper {padding:3em 2em 0}
.form-message {font-size:0.875em;color:#777}
div.info span {}
}

/* medium desktops (lg) */
@media screen and (min-width: 64em) {
form {padding:1em 3em}
.text-wrapper {padding:2em 3em 0}
ul.list-inline li {display:inline}
.pure-form-stacked .pure-control-group.julkaisulupa {width:50%;}
/*.g-recaptcha {float:left}
#form_ilmo_submit {float:right}*/
}

/* hd and extra large desktops (hd) */
@media screen and (min-width: 120em) {

form {padding:1em 10em}
.text-wrapper {padding:2em 10em 0}
}






/* Säännöt
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#section4 {background-color: #efd533;}
#section4 .intro-img {margin:0}
#section4 a {color:#69b2aa}
#section4 p {font-size:0.875em}
#section4 p.index {font-size:1em}
.section-rules-col {background-color:#fff;
-webkit-box-shadow: 0px 5px 10px 4px rgba(34,34,33,0.25);
-moz-box-shadow: 0px 5px 10px 4px rgba(34,34,33,0.25);
box-shadow: 0px 5px 10px 4px rgba(34,34,33,0.25);
border-radius: 0.3em;text-align:left;padding:1em;margin:0 0 1em 0}

/* tablet and small desktops (md) */
@media screen and (min-width: 48em) {
#section4 .section-text-col {text-align:left}
.section-rules-col {width:80%; margin-left:5%}
}

/* medium desktops (lg) */
@media screen and (min-width: 64em) {
#section4 p.index {font-size:1em}
.section-rules-col {width:70%}


}

/* large desktops (xl) */
@media screen and (min-width: 80em) {
.section-rules-col {padding:1em 2em;}
.section-rules-col {width:60%}

}

/* hd and extra large desktops (hd) */
@media screen and (min-width: 120em) {
.section-rules-col {width:60%; margin-top:3em}

}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#footer {background-color: #fff;}
.logo-img {}
#footer h3 {color:#69b2aa;margin-bottom:1.4em;margin-top:0.5em}
#footer h4 {color:#69b2aa}
#footer a.turq {color:#69b2aa}
#footer a.turq:hover {}
#footer p.index a {color:#000}
#footer p.index a:hover {}
h4.yellow-link {margin:1em 0}
h4.yellow-link a {font-family: 'Digitalino',Arial,sans-serif;color:#efd533}
h4.yellow-link a:hover {}

/* tablet and small desktops (md) */
@media screen and (min-width: 48em) {
#footer .section-text-col {text-align:left}
.logo-img {width:80%;}
#footer h3 {font-size:1.4em}
}

/* medium desktops (lg) */
@media screen and (min-width: 64em) {
#footer h3 {font-size:1.5em}
#footer .right-col {padding-top:3em}
}

/* large desktops (xl) */
@media screen and (min-width: 80em) {
.logo-img {width:70%;}
#footer .section-text-col {padding: 3em 3em;}
#footer .section-text-col.right-col {padding-top:6em}
}

/* hd and extra large desktops (hd) */
@media screen and (min-width: 120em) {

}

/* Scroll to top
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.scroll-to-top {position:fixed; bottom:2em; right:1em;}
.scrollToTop{
	width:2em; 
	height:2em; 
	position:fixed;
	bottom:1em;
	right:1em;
	display:none;
	cursor: pointer;
	color: #FFF;
	z-index: 997;
	background-color: rgba(0, 0, 0, 0.5);
	background-image: url("../img/top.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:100%;
	border-radius: 5rem;
}

.scrollToTop:hover{
	text-decoration:none;
}

/* tablet and small desktops (md) */
@media screen and (min-width: 48em) {

}






/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */