@charset "utf-8";
* {text-decoration:none;}

body { background-color:black; font-family: 'Nunito Sans', sans-serif; color:#d6d6d6; }
img { border:0; vertical-align:middle; }
.underline {text-decoration: underline;}
/* ============================================== */
/* ======== Setting up the column layout ======== */

.contentContainer { width:100%; box-sizing:border-box; overflow:hidden; }
.contentWrapper { /*padding-left:2%; padding-right:2%;*/ padding:1em 0 1em 0; box-sizing:border-box; }
@media only screen and (max-width: 768px)  {#leipis {padding-left:0; padding-right:0;}}
@media only screen and (min-width: 769px)  {#leipis, .mainHeading { padding-top:0; padding-left:3%; padding-right:3%;} body { font-size: 14px;}} /* Split Two columns */
@media only screen and (min-width: 1025px) {#leipis, .mainHeading { padding-left:4%; padding-right:4%;} body { font-size: 15px;}}
/* Decrese the normal resolutions by the average width of a scrollbar - 24px)*/
@media only screen and (min-width: 1256px) {#leipis, .mainHeading { padding-left:3%; padding-right:3%;} body { font-size: 17px;}} /* Split Three Columns */
@media only screen and (min-width: 1416px) {#leipis, .mainHeading { padding-left:4%; padding-right:4%;} body { font-size: 17px;}}
@media only screen and (min-width: 1656px) {#leipis, .mainHeading { padding-left:3%; padding-right:3%;} body { font-size: 18px;}} /* Split Four Ways */
@media only screen and (min-width: 1896px) {#leipis, .mainHeading { padding-left:4%; padding-right:4%;} body { font-size: 19px;}}
@media only screen and (min-width: 2376px) {#leipis, .mainHeading { padding-left:3%; padding-right:3%;} body { font-size: 21px;}} /* Split Five Ways */
@media only screen and (min-width: 3176px) {#leipis, .mainHeading { padding-left:4%; padding-right:4%;} body { font-size: 24px;}}
@media only screen and (min-width: 3576px) {#leipis, .mainHeading { padding-left:5%; padding-right:5%;} body { font-size: 26px;}}


.columnGroup { margin-top: 2em; margin-bottom: 4em; /*overflow-x: hidden;*/}
.columnGroup:first-child { margin-top:0;}
.columnGroup:last-child { margin-bottom:0;}
.columnGroup:after { content:""; /*width:80%; width:150%;*/ width:129%; box-sizing:border-box; /*margin-left:10%;*/ margin-left:-25%; overflow:hidden;
	display:block; height:5px; border-radius:3px; clear:both; margin-top: 2em; margin-bottom:2em;
	background-color:rgba(55,55,55,0.40); border-top:2px solid rgba(100,100,100,0.24);
}
.columnGroup:last-child:after { margin-bottom:0; height:0; border:none;}
.contentWrapper .column, .contentWrapper .column.wide { box-sizing:border-box; width: 100%; }

.column { width:100%; float:left; color:black; border-bottom:0.5em solid #f9b721; margin-bottom:2em; }
.halfcol { width:50%; float:left; /*min-height:180px;*/ min-width:80px; box-sizing:border-box; margin-bottom:3em; }
.halfcol p.caption .halfcol img { padding:0; margin:0;}
.halfcol img.svg {width:35% !important; height:auto; box-sizing: border-box;}

@media all and (max-width:320px) {
	.halfcol {padding-left:3%; padding-right:1.5%; }
	.halfcol:nth-child(odd) {clear:both;}
	.halfcol:nth-child(even) { padding-left:1.5%; padding-right:3%;}
}
@media all and (min-width: 321px) and (max-width:480px) {
	.halfcol { width:29%; padding:0; margin-left:3%; margin-right:1%;}
	.halfcol:nth-child(3n+1) { clear:both;} }
@media all and (min-width: 481px) and (max-width: 768px) {
	.halfcol { width:23%; padding:0; margin-left:1%; margin-right:1%;}
	.halfcol:nth-child(4n+1) { clear:both;} }
@media all and (min-width: 769px) and (max-width: 1024px) {
	.halfcol {width:31%; padding:0; margin-left:1%; margin-right:1%;}
	.halfcol:nth-child(3n+1) { clear:both;} }
@media all and (min-width: 1025px) and (max-width: 1368px) {
	.halfcol {width:23%; padding:0; margin-left:1%; margin-right:1%;}
	.halfcol:nth-child(4n+1) { clear:both;} }
@media all and (min-width: 1368px) and (max-width: 1920px) {
	.halfcol {width:18%; padding:0; margin-left:1%; margin-right:1%;}
	.halfcol:nth-child(5n+1) { clear:both;} }
@media all and (min-width: 1921px) and (max-width: 2560px) {
	.halfcol {width:14.5%; padding:0; margin-left:1%; margin-right:1%;}
	.halfcol:nth-child(6n+1) { clear:both;} }
@media all and (min-width: 2561px) and (max-width: 3200px) {
	.halfcol {width:12%; padding:0; margin-left:1%; margin-right:1%;}
	.halfcol:nth-child(7n+1) { clear:both;} }
@media all and (min-width: 3201px){
	.halfcol {width:10%; padding:0; margin-left:1%; margin-right:1%;}
	.halfcol:nth-child(8n+1) { clear:both;} }
	
/* ================================== */
/* ======= MAIN COLUMN LAYOUT ======= */	
@media all and (min-width: 769px) and (max-width: 1255px) { 	/* 2 Cols */
	.contentWrapper .column {width:48%;}
	.contentWrapper .column:nth-child(even) {margin-right:0;}
	.column:nth-child(odd) { clear:both; margin-right:4%;} }

@media all and (min-width: 1256px) and (max-width: 1655px) { 	/* 3 Cols */
	.contentWrapper .column {width:31%; margin-left:1.5%; margin-right:1%;}
	.column:nth-child(3n) { margin-right:0; margin-left:2%;}
	.column:nth-child(3n+1) { clear:both; margin-left:0.5%;; margin-right:2%; } }

@media all and (min-width: 1656px) and (max-width: 2375px) { 	/* 4 Cols */
	.contentWrapper .column {width:23%; margin-left:1.4%; margin-right:1.4%;}
	.column:nth-child(4n) { margin-right:0; margin-left:1.2%;}
	.column:nth-child(4n+1) { clear:both; margin-left:0; margin-right:1.2%;}}

@media all and (min-width: 2376px) { 							/* 5 Cols */
	.contentWrapper .column {width:18%; margin-left:1%; margin-right:1%;} /* making each col 20%; wide */
	.column:nth-child(5n) { margin-right:0; margin-left:1%; } /* last one on a row is only 19% */
	.column:nth-child(5n+1) { clear:both; margin-left:0; margin-right:1%; } /* first one on a row also only 19%; */
}
	/* I think it should be fine. Have to figure out a way to preview larger monitors though... :/ */


/* =============================== */
/* ======== Main Elements ======== */


.mainHeading { width:100%; box-sizing:border-box;}

#header {
	height:138px;
	border-radius:16px 16px 0 0;
	background-position:93% 0%;
	background-repeat:repeat-y;
	position:relative;
}
@media all and (max-width:768px) { #header, #banner_wrap, .slicknav_menu { height:160px !important;}}

#banner_wrap {
	background-color:black;
	position:relative;
	z-index:60;
}

.contentContainer:before { content:""; height:0.9em; background-color:black; width:100%; 
	display:table; border-bottom: 0.3em solid #1ebbe0; box-sizing:border-box; position:fixed; z-index:800;
}

#header:before { content:""; height:0.9em; display:table;}
#header:after { content:""; height:0; clear:both; display:table; }


/* ============================================================= */
/* ======== Banner Images for each lesson & Other Stuff ======== */

#banner {
	background-size:cover;
	background-image:url(../images/default_banner_uusi2017.jpg); /* use this image for default layout, override based on .contentContainer class */
	background-repeat:no-repeat;
	height:100%;
	min-height:138px;
	position:absolute;
	top:0;
}
@media all and (max-width:768px) { 
	#content_top { background-size:cover; background-image:url(../images/default_banner.jpg); background-repeat:no-repeat; }
	#banner { display:none; }
}
@media all and (min-width: 769px) {#banner { width:55%; margin-left:45%; } #content_top { background:none; height:auto !important; } }
/* use the class on div.contentContainer, since it contains both #banner and  #content_top */
.luku01 #banner { background-image:url(../images/luku01.jpg); }
.luku02 #banner { background-image:url(../images/luku02.jpg); }
.luku03 #banner { background-image:url(../images/luku03.jpg); }
.luku04 #banner { background-image:url(../images/luku04.jpg); }
.luku05 #banner { background-image:url(../images/luku05.jpg); }
.luku06 #banner { background-image:url(../images/luku06.jpg); }
.luku07 #banner { background-image:url(../images/luku07.jpg); }
.luku08 #banner { background-image:url(../images/luku08.jpg); }
.luku09 #banner { background-image:url(../images/luku09.jpg); }
.luku10 #banner { background-image:url(../images/luku10.jpg); }
.luku11 #banner { background-image:url(../images/luku11.jpg); }
.luku12 #banner { background-image:url(../images/luku12.jpg); }
.luku13 #banner { background-image:url(../images/luku13.jpg); }
.luku14 #banner { background-image:url(../images/luku14.jpg); }
.luku15 #banner { background-image:url(../images/luku15.jpg); }
.luku16 #banner { background-image:url(../images/luku16.jpg); }
.luku17 #banner { background-image:url(../images/luku17.jpg); }
.luku18 #banner { background-image:url(../images/luku18.jpg); }
.luku0-am120 #banner { background-image:url(../images/am120_banner_luku00_2018.jpg); }
.luku1-am120 #banner { background-image:url(../images/am120_banner_luku01_2018.jpg); }
.luku2-am120 #banner { background-image:url(../images/am120_banner_luku02_2018.jpg); }
.luku3-am120 #banner { background-image:url(../images/am120_banner_luku03_2018.jpg); }
.luku4-am120 #banner { background-image:url(../images/luku04.jpg); }
.luku5-am120 #banner { background-image:url(../images/luku05.jpg); }
.luku6-am120 #banner { background-image:url(../images/luku06.jpg); }
.luku7-am120 #banner { background-image:url(../images/luku07.jpg); }
.luku8-am120 #banner { background-image:url(../images/luku08.jpg); }
.luku9-am120 #banner { background-image:url(../images/luku09.jpg); }
.luku10-am120 #banner { background-image:url(../images/luku10.jpg); }
.luku11-am120 #banner { background-image:url(../images/luku12.jpg); }
.luku12-am120 #banner { background-image:url(../images/luku15.jpg); }
.luku13-am120 #banner { background-image:url(../images/luku16.jpg); }
.luku14-am120 #banner { background-image:url(../images/luku17.jpg); }
.luku15-am120 #banner { background-image:url(../images/luku18.jpg); }
.luku16-am120 #banner { background-image:url(../images/am120_banner_luku00_2018.jpg); }
.luku0-am121 #banner { background-image:url(../am121/images/am121_banner_def-2019.jpg); }
.luku1-am121 #banner { background-image:url(../am121/images/am121_banner_def-2019.jpg); }
.luku2-am121 #banner { background-image:url(../images/am120_banner_luku02_2018.jpg); }
.luku3-am121 #banner { background-image:url(../am121/images/am121_banner_luku03.jpg); }
.luku4-am121 #banner { background-image:url(../images/luku04.jpg); }
.luku5-am121 #banner { background-image:url(../images/luku05.jpg); }
.luku6-am121 #banner { background-image:url(../images/luku06.jpg); }
.luku7-am121 #banner { background-image:url(../images/luku07.jpg); }
.luku8-am121 #banner { background-image:url(../images/luku08.jpg); }
.luku9-am121 #banner { background-image:url(../images/luku09.jpg); }
.luku10-am121 #banner { background-image:url(../images/luku10.jpg); }
.luku11-am121 #banner { background-image:url(../images/luku12.jpg); }
.luku12-am121 #banner { background-image:url(../images/luku15.jpg); }
.luku13-am121 #banner { background-image:url(../images/luku16.jpg); }
.luku14-am121 #banner { background-image:url(../images/luku17.jpg); }
.luku15-am121 #banner { background-image:url(../images/luku18.jpg); }
.luku16-am121 #banner { background-image:url(../images/banner_01_uusi2017.jpg); }
.luku1-a #banner, .luku13-a #banner { background-image:url(../a-kortti/images/a_banner_def-2019.jpg);}
.luku2-a #banner {background-image: url(../a-kortti/images/a_banner_x1.jpg);}
.luku3-a #banner {background-image: url(../a-kortti/images/a_banner_x5.jpg);}
.luku4-a #banner {background-image: url(../a-kortti/images/a_banner_06.jpg);}
.luku5-a #banner {background-image: url(../images/luku05.jpg);}
.luku6-a #banner {background-image: url(../a-kortti/images/a_banner_03.jpg);}
.luku7-a #banner {background-image: url(../images/luku07.jpg);}
.luku8-a #banner {background-image: url(../images/luku08.jpg);}
.luku9-a #banner {background-image: url(../a-kortti/images/a_banner_x6.jpg);}
.luku10-a #banner {background-image: url(../a-kortti/images/a_banner_x2.jpg);}
.luku11-a #banner {background-image: url(../a-kortti/images/a_banner_x4.jpg);}
.luku12-a #banner {background-image: url(../a-kortti/images/a_banner_02.jpg);}
.luku_c1 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku01.jpg");}
.luku_c2 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku02.jpg");}
.luku_c3 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku03.jpg");}
.luku_c4 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku04.jpg");}
.luku_c5 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku05.jpg");}
.luku_c6 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku06.jpg");}
.luku_c7 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku07.jpg");}
.luku_c8 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku08.jpg");}
.luku_c9 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku09.jpg");}
.luku_c10 #banner {background-image: url("../c-kortti/c-kuvat/banner_luku10.jpg");}
.luku0-tmk #banner, .luku1-tmk #banner, .luku2-tmk #banner, .luku3-tmk #banner, .luku4-tmk #banner, .luku5-tmk #banner, .luku6-tmk #banner, .luku7-tmk #banner {background-image: url("../images/kelkka.jpg")}
.luku0-tt #banner, .luku1-tt #banner, .luku2-tt #banner, .luku3-tt #banner, .luku4-tt #banner, .luku5-tt #banner, .luku6-tt #banner, .luku7-tt #banner {background-image: url("../images/traktori.jpg")}

/* ======== ALT Banners on the mobile version */
@media all and (max-width:768px) {
	.luku01 #content_top { background-image:url(../images/luku01.jpg); }
	.luku02 #content_top { background-image:url(../images/luku02.jpg); }
	.luku03 #content_top { background-image:url(../images/luku03.jpg); }
	.luku04 #content_top { background-image:url(../images/luku04.jpg); }
	.luku05 #content_top { background-image:url(../images/luku05.jpg); }
	.luku06 #content_top { background-image:url(../images/luku06.jpg); }
	.luku07 #content_top { background-image:url(../images/luku07.jpg); }
	.luku08 #content_top { background-image:url(../images/luku08.jpg); }
	.luku09 #content_top { background-image:url(../images/luku09.jpg); }
	.luku10 #content_top { background-image:url(../images/luku10.jpg); }
	.luku11 #content_top { background-image:url(../images/luku11.jpg); }
	.luku12 #content_top { background-image:url(../images/luku12.jpg); }
	.luku13 #content_top { background-image:url(../images/luku13.jpg); }
	.luku14 #content_top { background-image:url(../images/luku14.jpg); }
	.luku15 #content_top { background-image:url(../images/luku15.jpg); }
	.luku16 #content_top { background-image:url(../images/luku16.jpg); }
	.luku17 #content_top { background-image:url(../images/luku17.jpg); }
	.luku18 #content_top { background-image:url(../images/luku18.jpg); }
	.luku0-am120 #content_top { background-image:url(../images/am120_banner_luku00_2018.jpg); }
	.luku1-am120 #content_top { background-image:url(../images/am120_banner_luku01_2018.jpg); }
	.luku2-am120 #content_top { background-image:url(../images/am120_banner_luku02_2018.jpg); }
	.luku3-am120 #content_top { background-image:url(../images/am120_banner_luku03_2018.jpg); }
	.luku4-am120 #content_top { background-image:url(../images/luku04.jpg); }
	.luku5-am120 #content_top { background-image:url(../images/luku05.jpg); }
	.luku6-am120 #content_top { background-image:url(../images/luku06.jpg); }
	.luku7-am120 #content_top { background-image:url(../images/luku07.jpg); }
	.luku8-am120 #content_top { background-image:url(../images/luku08.jpg); }
	.luku9-am120 #content_top { background-image:url(../images/luku09.jpg); }
	.luku10-am120 #content_top { background-image:url(../images/luku10.jpg); }
	.luku11-am120 #content_top { background-image:url(../images/luku12.jpg); }
	.luku12-am120 #content_top { background-image:url(../images/luku15.jpg); }
	.luku13-am120 #content_top { background-image:url(../images/luku16.jpg); }
	.luku14-am120 #content_top { background-image:url(../images/luku17.jpg); }
	.luku15-am120 #content_top { background-image:url(../images/luku18.jpg); }
	.luku16-am120 #content_top { background-image:url(../images/am120_banner_luku00_2018.jpg); }
	.luku0-am121 #content_top { background-image:url(../am121/images/am121_banner_def-2019.jpg);}
	.luku1-am121 #content_top { background-image:url(../am121/images/am121_banner_def-2019.jpg);}
	.luku2-am121 #content_top { background-image:url(../images/am120_banner_luku02_2018.jpg); }
	.luku3-am121 #content_top { background-image:url(../am121/images/am121_banner_luku03.jpg); }
	.luku4-am121 #content_top { background-image:url(../images/luku04.jpg); }
	.luku5-am121 #content_top { background-image:url(../images/luku05.jpg); }
	.luku6-am121 #content_top { background-image:url(../images/luku06.jpg); }
	.luku7-am121 #content_top { background-image:url(../images/luku07.jpg); }
	.luku8-am121 #content_top { background-image:url(../images/luku08.jpg); }
	.luku9-am121 #content_top { background-image:url(../images/luku09.jpg); }
	.luku10-am121 #content_top { background-image:url(../images/luku10.jpg); }
	.luku11-am121 #content_top { background-image:url(../images/luku12.jpg); }
	.luku12-am121 #content_top { background-image:url(../images/luku15.jpg); }
	.luku13-am121 #content_top { background-image:url(../images/luku16.jpg); }
	.luku14-am121 #content_top { background-image:url(../images/luku17.jpg); }
	.luku15-am121 #content_top { background-image:url(../images/luku18.jpg); }
	.luku16-am121 #content_top { background-image:url(../images/banner_01_uusi2017.jpg); }
	.luku1-a #content_top, .luku13-a #content_top { background-image:url(../a-kortti/images/a_banner_def-2019.jpg);}
	.luku2-a #content_top {background-image: url(../a-kortti/images/a_banner_x1.jpg);}
	.luku3-a #content_top {background-image: url(../a-kortti/images/a_banner_x5.jpg);}
	.luku4-a #content_top {background-image: url(../a-kortti/images/a_banner_06.jpg);}
	.luku5-a #content_top {background-image: url(../images/luku05.jpg);}
	.luku6-a #content_top {background-image: url(../a-kortti/images/a_banner_03.jpg);}
	.luku7-a #content_top {background-image: url(../images/luku07.jpg);}
	.luku8-a #content_top {background-image: url(../images/luku08.jpg);}
	.luku9-a #content_top {background-image: url(../a-kortti/images/a_banner_x6.jpg);}
	.luku10-a #content_top {background-image: url(../a-kortti/images/a_banner_x2.jpg);}
	.luku11-a #content_top {background-image: url(../a-kortti/images/a_banner_x4.jpg);}
	.luku12-a #content_top {background-image: url(../a-kortti/images/a_banner_02.jpg);}
	.luku_c1 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku01.jpg");}
	.luku_c2 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku02.jpg");}
	.luku_c3 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku03.jpg");}
	.luku_c4 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku04.jpg");}
	.luku_c5 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku05.jpg");}
	.luku_c6 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku06.jpg");}
	.luku_c7 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku07.jpg");}
	.luku_c8 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku08.jpg");}
	.luku_c9 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku09.jpg");}
	.luku_c10 #content_top {background-image: url("../c-kortti/c-kuvat/banner_luku10.jpg");}
}

#speedblur {
	background-image:url(../images/uudet_2017/speedblur_to_black_mirrored.png);
	background-repeat: repeat-y;
	background-position: right;
	background-size: auto;
	position: absolute; top:0; left:0; z-index: 100; height:100%; width:170px;
}
@media all and (max-width: 768px) { #speedblur { display:none; } }

#topic {
	position:absolute; z-index:240; left:3%; top:72%;
	height:40px;
	text-align:right;
	color:#e6e6e6; font-size:1.4em; letter-spacing:0.015em; font-weight:normal; font-style:italic;
	font-family:/*"Blue Highway",*/ 'Nunito Sans', Helvetica, Arial, sans-serif; 
}
@media all and (max-width:768px) { #topic { text-align:left; bottom:1em; top:auto;} }

#logo {
	background-image:url(../images/uudet_2017/logo_vector.svg);
	background-repeat:no-repeat;
	background-size:contain;
	position:absolute; width:28%; height:12em; z-index:160; left:16%;
	/*max-width:290px;*/ /* get rid of this once the image is larger or vector format */ /* ATTENTION! */
	max-height:72%;	
}
@media all and (max-width:768px) { #logo { left:30%; width:60%; height:100%; } }



/* ================================== */
/* ======== Navigation Setup ======== */


.navi_wrap {
	clear:both;
	width:100%;
	position:static;
}
#banner_wrap:after { content:""; height:0.75em; position: absolute; bottom:-0.75em; right:0; width:55%; background-color:#e6e6e6; z-index:110;}
.navi_wrap:before { content:""; height:1.6em; clear:both; display:table; width:45%; margin:0 0 1em 0; padding:0; 
	background-image:url(../images/uudet_2017/banner_border-bottom-image.png); }
.navi_wrap:after, #navi:after { content:""; clear:both; display:table; height:0.8em;}
.navi_btn { position:absolute; top: 1em; right:0; z-index:640; display: block; cursor: pointer;
	border-radius: 0 0 0 1em; border: 0.15em solid #f9b721; border-top:none; border-right:none; background-color:rgba(0,0,0,1);
	font-weight: normal; font-size: 0.9em; color:#f9b721; letter-spacing: 0.1em; text-shadow: 0 1px 3px #000; line-height: 1.125em; vertical-align: middle;
	-webkit-transition: color 0.2s ease, background-color 0.2s ease;
	-moz-transition: color 0.2s ease, background-color 0.2s ease;
	-o-transition: color 0.2s ease, background-color 0.2s ease;
	transition: color 0.2s ease, background-color 0.2s ease;
	padding: 0.8em 0.625em 0.6em 0.8em; margin: 0em 0 0 -0.5em !important; 
}
.navi_btn p {text-transform:uppercase;}
.navi_btn.active { color:white; background-color:rgba(0,0,0,0);}
@media all and (min-width:769px) { .navi_wrap { position:relative; } .navi_btn { top:1.83em; color:white; cursor:default; }}
@media all and (max-width:768px) {
	#header:after { height:100%; position:absolute; width:0; z-index:320; background-color:#f9b721; top:0.9em; right:0;
		-webkit-transition: width 0.2s ease;
		-moz-transition: width 0.2s ease;
		-o-transition: width 0.2s ease;
		transition: width 0.2s ease; 
	} 
	#header.active:after { width:100%;}
}
#navi {	position:relative; z-index:60; min-height:80px; height:auto; margin-left:0; padding:0; }
.mobile-only { display:none;} /* This are the bits at the beginning of nav-links */
@media all and (max-width:768px) { 
	#navi {display:none;} #navi.active { display:block;} /* Hide the nav by default for mobile size, display when button pressed*/
	#navi { 
		position:absolute; z-index:400; top:4em; right:-32em; background-color:black; width:32em; max-width:100%; padding: 1em 1em 1em 2em;
		border:0.5em solid #f9b721; border-right:none; box-sizing:border-box; border-radius: 3em 0 0 2em;
		-webkit-transition: right 0.2s;
		-moz-transition: right 0.2s;
		-o-transition: right 0.2s;
		transition: right 0.2s;
	}
	#navi.active { right:0; 
		-webkit-transition: right 0.2s;
		-moz-transition: right 0.2s;
		-o-transition: right 0.2s;
		transition: right 0.2s;
	}
	#navi li { height:auto; min-height:1.5em; text-align:right; padding-right:1.6em; margin-right:0.3em;}
	#navi a p { line-height:2; color: white;}
	#navi .selected a p { color:#1ebbe0; }
	#navi .selected { background-image:url(../images/uudet_2017/navi_circ_selected_2017.png); background-position:102% 10%; background-repeat:no-repeat;}
	.mobile-only { display:inline;}
}
@media all and (min-width:769px) {
	#navi li { float:left; padding-top:1em; height:5.6em; }
	#navi .link { height:7em; box-sizing:border-box; position:relative; /*white-space:nowrap; overflow:hidden;*/ }
	#navi a:after { content:""; display:block; position:relative; height:0.6em; margin-top:0.4em; background-color: #f9b721; bottom:0; z-index:1000; border-right: 2px solid black; }
	#navi li:last-child a:after { border-right:none;}
	#navi .link p {box-sizing:border-box; padding:1.4em 0.7em 0 0.7em;}
	#navi .link p:before { content:""; position:absolute; display:block; height:44%; width:0.1em; top:12%; left:0;
		background-color:#f9b721; border-radius:0.5em; }
	#navi li:first-child .link p:before { display:none;}
	#navi .selected a:after {background-color:#ffda4e;}

	body#navi1 #navi li { width:100%; }
	body#navi1 #navi, body#navi1 .navi_btn {display: none;}
	.luku_c-2 #current h1, .luku_c-1 #current h1 {display: none;}
	body#navi3 #navi li { width:33.33%; }
	body#navi4 #navi li { width:25%; }
	body#navi5 #navi li { width:20%; }
	body#navi6 #navi li { width:16.66%; }
	body#navi7 #navi li { width:14.28%; }
	body#navi8 #navi li { width:12.5%; }
	body#navi9 #navi li { width:11.11%}
	body#navi10 #navi li { width:10%; }
	body#navi11 #navi li { width:9.09% }
}

#navi a p {	text-overflow:ellipsis; overflow:hidden; /*height:auto;*/ height:100%; white-space:normal;  }
@media all and (min-width:769px) { #navi a p {line-height:1.2;}}
#navi .selected p { color:#e6e6e6; }
.slicknav_nav h3 { padding:1.2em 0 0.2em 0; line-height:1.4; display:block; color:#1ebbe0;}
.slicknav_nav h3:first-child { padding-top:0.4em;}




/* ========================================== */
/* ======== Main Menu Things & Stuff ======== */

/* Old menu is Hidden, Slicknav clones the contents and that's what is shown | Only keeping styles that apply to the new stuff */

#menu_wrap { 
	display:none; opacity:0; visibility:hidden;
}
#menu_button, .slicknav_btn {
	text-align:center;
	font-family: /*"Blue Highway",*/ 'Nunito Sans', Helvetica, Arial, sans-serif;
	font-size:1.2em;
	letter-spacing:0.03em;
	line-height:1.6;
}
#menu_button:hover { cursor:pointer;}

#menulist  li, .slicknav_nav li { /* reworking for Slicknav lists */
	width:27em;
	max-width:100%;
	background-repeat:no-repeat;
	height:32px;
	margin:0;
	padding:0;
	position:relative; left:0;
	overflow:hidden;
	transition: left 0.5s;
	-webkit-transition: left 0.5s;
	-moz-transition: left 0.5s;
	-o-transition: left 0.5s;
}
#menulist div a, .slicknav_nav div a {
	height:32px; /* I think this does nothing...*/
}
#menulist div:hover, .slicknav_nav div:hover {
	background-image:url(../images/uudet_2017/menu_circ_normal_2017.png); background-repeat:no-repeat;
	left:10px;
}
#menulist div p, .slicknav_nav div p {
	margin:0;
	padding:0 0 0 40px;
	font-size:0.9em;
	line-height:2.2;
	max-height:32px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	width:100%;
	font-family:/*"Blue Highway",*/ 'Nunito Sans', Helvetica, Arial, sans-serif;
	color:white;
}
#menulist div.selected {list-style-image:url(../imagesmenu_circ_selected.png); }
.slicknav_nav div.selected { background-image:url(../images/uudet_2017/menu_circ_selected_2017.png); background-repeat:no-repeat; }
#menulist div.selected p, .slicknav_nav div.selected p { /*color:#f1c929;*/ color:#f9b721; }
.menulist-open #menulist  {opacity:0.97; left:1%; width:350px; transition: width 0.2s ease;}



/* --------*/
/* Content */

.content_wrapper {
	background-image:url(../images/sideline.png);
	background-repeat:repeat-y;
	background-position:93% 0%;
}
#content {
	position:relative;
	z-index:100;
}
#content_top {
	margin-top:4em;
	margin-bottom:5em;
	width: 100%;
	position:relative;

}
@media all and (min-width:769px) { #content_top { margin-top:0; margin-bottom:1em;} }
@media all and (max-width:768px) { #content_top { border-bottom: 0.4em solid #1ebbe0; border-top: 0.4em solid #1ebbe0;} }
#lang, #breadcrumbs { position:relative; z-index:120; }
#breadcrumbs { width:75%; }
@media all and (max-width:768px) { 
	#lang { position:absolute; top:-3.5em; right:1em; margin-top:0; padding-top:0; }
	#breadcrumbs { width:100%; position:absolute; bottom:-4.5em; margin-bottom:0; padding-bottom:0; }
}

#leipis {
	padding-top: 1em;
	padding-bottom: 1em;
	background-color:black;
	/*overflow-x: hidden; tried to fix stuff, made it worse*/
}
sub {vertical-align: sub; font-size: smaller;}

.next-prev { width:100%; clear:both; background-image: url(../images/uudet_2017/banner_border-bottom-image.png); background-repeat:repeat-x; }
.next-prev .links {min-width:32%; max-width:48%; margin-left:auto; margin-right:auto; text-align:center; background-color:black;}
.next-prev a { color:#1ebbe0;}
.next-prev a:hover { text-decoration:underline;}
.nextlink { margin-left:0.2em;}
.prevlink { margin-right:0.2em;}
.next-prev .spacer {margin-left:1.6em; margin-right:1.6em;}
@media all and (max-width:1280px) { .next-prev .links { max-width:56%;} }
@media all and (max-width:768px) { .next-prev .links { max-width:88%;} }
@media all and (max-width:640px) { .next-prev .links { max-width:100%;} .next-prev .spacer { margin-left:0.4em; margin-right:0.4em;} }


/* --------*/
/* Footer */

#footer {
	height:8em;
	padding-top:2em;
	width:100%;
	margin-left:0;
	box-sizing:border-box;
	position:relative;
	z-index:100;
	font-family:/*"Blue Highway",*/ 'Nunito Sans', Helvetica, Arial, sans-serif;
}
#footer:after { content:""; position:absolute; width:50%; left:25%; height:100%;
	background-image:url(../images/uudet_2017/logo_vector.svg); background-repeat:no-repeat; background-position:50% 0; }
.eng #footer:after {background-image:url(../images/uudet_2017/logo_vector_eng.svg);}
.swe #footer:after {background-image:url(../images/uudet_2017/logo_vector_swe.svg);}
@media all and (max-width:1280px) { #footer:after { width:45%; left:40%;} }
@media all and (max-width:768px) { #footer:after { display:none;} }
#footer a { color:#1ebbe0;}
#links {
	float:left;
	width:40%;
	height:100px;
}
#links p { padding: 1em 1em 0 1em; margin-left:2em; font-size:0.9em; line-height:1.4;}
#auto {
	float:left;
	width:127px;
	height:100px;
	padding:1.6em 2.4em 0.8em 1.6em;
	box-sizing:content-box;
	border-radius:0 3em 0 0;
	background-color:#1ebbe0;
}
#image {
	background-image:url(../images/auto.png);
	width:127px;
	height:73px;
	margin-top:20px;
	color:#2fc5e0;
}

#footer a:hover {text-decoration:underline;}

#backtotop {
	/*display:none;*/
	opacity:0;
	-webkit-transition: opacity 0.7s ease;
	-moz-transition: opacity 0.7s ease;
	-o-transition: opacity 0.7s ease;
	transition: opacity 0.7s ease;
	position:fixed; bottom:5.6em; right:2em;
	width:auto;
	height:auto;
}
#backtotop.scrolled { display:block; opacity:1; }
#backtotop:after {content:""; background-image:url(../images/uudet_2017/uturn_btt.svg); background-repeat:no-repeat; background-size:contain;
	width:75%; position:absolute; height:5em; margin-left:15%; }
#backtotop p {
	width:100%;
	text-align:right;
	font-size:0.9em;
	text-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.75);
}



/* ================================================ */
/* ======== Fonts & Typography and Similar ======== */

@font-face {
  font-family: 'typicons';
  src: url("../typicons/typicons.eot");
  src: url("../typicons/typicons.eot?#iefix") format('embedded-opentype'),
       url("../typicons/typicons.woff") format('woff'),
       url("../typicons/typicons.ttf") format('truetype'),
       url("../typicons/typicons.svg#typicons") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: "Blue Highway";
    src: url('../fonts/BlueHighway.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/blue_highway_regular.ttf')  format('truetype');
}
@font-face {
    font-family: "Blue Highway";
	font-weight: bold;
    src: url('../fonts/BlueHighwayBold.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/blue_highway_bold.ttf')  format('truetype');
}

@media all and (min-width:769px) {
	#navi p {
		font-family:/*"Blue Highway",*/ 'Nunito Sans', Helvetica, Arial, sans-serif; height:100%;
		/*white-space:nowrap; overflow:hidden; text-overflow:ellipsis;*/ 
		font-weight:normal; letter-spacing:0.01em; text-align:center; font-size:0.9em; color:#f9b721; /*color:#f1c929;*/ 
	}
}
#navi .link:hover p { color:#ffda4e; }

#leipis p {
	font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
	letter-spacing:0;
	font-size:0.9em;
	line-height:1.6;
}
#leipis li p { padding-bottom:0.3em;}
#leipis p:last-child { padding-bottom:0.1em;}

#breadcrumbs { font-family: /*"Blue Highway",*/ 'Nunito Sans', Helvetica, Arial, sans-serif; font-size:0.9em; }
#breadcrumbs p { padding:1em 0 1.6em 2em; }
#content #breadcrumbs p a {
	color:#2fc5e0;
	text-decoration:none;
}
#content #breadcrumbs p a:hover {
	color:#4baff5;
	text-decoration:underline;
}
h1 {
	padding:0.5em 0.2em 0.8em 0.2em;
	font-family:"Blue Highway", 'Nunito Sans', Helvetica, Arial, sans-serif;
	font-size:3em;
	line-height:1.1;
}
#leipis h2, .column h2 {
	font-family:'Nunito Sans', Helvetica, Arial, sans-serif;
	font-style:italic;
	font-size:1.6em;
	line-height:1.2;
}
.column h2 {color:#1ebbe0;}

.column h2, .column h3, .column p, .column ul, .column ul, .column ol, .column img { background-color:white; }
.collapsibleContainer p, .column .collapsibleContainer p, .collapsibleContainer ul { background:none;}
.column p, #leipis .column p { padding:1.5em 1em 1em 1.5em; }
.column h2, .column h3 { padding:1em 1em 0 0.9em;}
.column ul, .column ol { margin:0; padding:0.2em 1em 0 3em; list-style-position:outside;}
#leipis .column li p { padding:0.5em; }
#leipis h2:first-child, .column h2:first-child { padding-top:0; padding-left:0; padding-bottom:0.7em}
@media all and (max-width:768px) { #leipis .column h2.heading-top, #leipis h2.heading-top {padding-left:1.2em;}}
.column h2:first-child { border-bottom: 0.35em solid #f9b721; background:none;}
#leipis .column h2.blueback {
	background-color:#2fc5e0;
	padding:0.6em 1em 0.6em 1.6em;
	color:white;
}
h3, .column h3 {
	padding:0.8em 1em 0em 1.2em;
	font-family:"Blue Highway", 'Nunito Sans', Helvetica, Arial, sans-serif;
	font-size:1.2em;
	letter-spacing:0px;
	color:#515151;
}
.column h3:first-child { padding: 1em 1em 0 1em;}
#leipis p a {
	font-weight:bold;
	/*color:#009999;*/ color:#0a8f99;
}
#leipis p a:hover {color:#2fc5e0;}

#leipis .column p.caption {
	padding-left:7%;
	font-style:italic;
	font-weight:bold;
	font-size:0.95em;
}

#leipis h2.ingress { font-size:2.4em; padding-bottom:0.3em;}
#leipis p.ingress { font-size:1.16em; padding-bottom:0.6em;}

span.light {color:#ffff5c;}
/*span.orange {color:#f1c929;}*/
span.orange {color:#f9b721;}
span.dgrey {color:#515151;}
span.lgrey {color:#cccccc;}
span.blue {color:#2fc5e0;}
span.dblue {color:#4baff5;}
.white { color:white;}
.turq {color:#29f1a8;}
.clearboth {clear:both;}



/*----------*/
/* tweaks */

strong { font-weight:bold;}

.onlysmall {display:none;}

.column img { width:100%; /*padding-bottom:1em;*/ }
.column img:last-child { padding-bottom:0;}
.column img.merkki { width:48%; }
.column .merkki.narrow {width:24%;}
.no-break {white-space: nowrap;}

.firstline { text-indent:-6.8em; margin-left:6.8em; }

.bluedots {
	list-style-type:disc;
	color:#f1c929;
	padding-top:0;
}
#leipis .bluedots p { color: black; padding:0; }

.precol, #leipis .precol, #leipis p.precol, h3.precol {
	padding-bottom:0;
	margin-bottom:0;
}

.spacer-high { min-height:400px; }

.under480 { display:none;} /* This is used for line breaks */
@media all and (max-width:480px) { .under480 { display:inline;}}


/*----------*/
/* media queries */

@media only screen and (max-width: 768px) {
	/*#header {border-radius:16px 0 0 0;}
	#banner_wrap {margin-left:0;}
	#content {margin-left:0;}
	#footer2 {width:100%;}
	#footerfill {width:100%;margin:0;}
	#temp {width:100%; margin:0;}
	#header {background-position:100% 0%;}
	.navi_wrap {background-position:100% 0%;}
	.content_wrapper {background-position:100% 0%;}
	#leipis h1 {font-size:2.4em;}*/
}

#banner_wrap {width:100%;}

.min800 { display:none; }
@media only screen and (min-width:800px) { .min800 { display:block; } .under800 { display:none; } }



/* ==============================*/
/* ======= RANDOM TWEAKS ======= */

#auto a, #auto a:hover { text-decoration:none; }
#leipis ol, #leipis .collapsibleContainer ol { list-style-type:decimal; }
#leipis ol li, #leipis .collapsibleContainer ol li { padding:0; margin:0; height:auto; line-height:1.1; color:#4baff5; font-weight:bold;
font-family: 'Nunito Sans', Helvetica, Arial, sans-serif; font-size:0.9em; }
#leipis ol li p { color:black; font-weight:normal; }
#leipis ol li p, #leipis .collapsibleContainer ol li p { padding:0; margin:0; line-height:1.6; }
#leipis p.padded { min-height:140px; }
#leipis .seloste { clear:both; }
#leipis .seloste img { float:left; width:auto; margin-left:2em; margin-top:1.6em; }
#leipis .seloste p {
	float:left;
	width:70%;
	margin-top:0.4em;
}
#leipis .doubleheight { /*min-height:260px;*/ margin-top:1.6em; margin-bottom:0; }
#leipis .doubleheight p { width:80%; clear:both;}

video { width:640px; height:auto; max-width:100%;  display:block; margin-left:auto; margin-right:auto; }
.column.video { background-color:white;}
.column.video h2:first-child { background-color:black;}
.column.wide video { margin-bottom:1.6em; margin-top:1em; margin-left:auto; margin-right:auto; }
.column video { background-color:white; margin-top:0; margin-bottom:0; padding-bottom:1.6em;}

.signature { /*margin-left:160px;*/ font-weight:bold; color:#2FC5E0; letter-spacing:3px; padding-bottom:1.6em; text-align:right; }
.main_page_list { padding-left:0; }
#leipis .main_page_list li p a, #leipis .main_page_list li p, #leipis .main_page_list li { padding-bottom:0.25em; margin-bottom:0; }

#leipis ul.bullets { list-style-type:disc; color:#FFCA00; }
#leipis ul.bullets p { color:black; }
#leipis .collapsibleContainer ul.bullets p {color: white;}

#leipis { min-height:640px; }

img.padded { margin-bottom: 24px; }

.bigtable { width:98%; border:solid 2px #cccccc; /*display:block;*/ }
.bigtable p {background:none;}
.bigtable th { background-color:#2FC5E0; color:white; padding-top:0.4em;}
.bigtable th strong { color:#ffcc00; }
.bigtable td { border-right:2px solid #666666; border-bottom:1px solid #cccccc; }
.bigtable td:last-child { border-right:none; }
table#lammitys.bigtable, table#c-opetus.bigtable, .fulltable {width:100%; border:none; box-sizing:border-box;}
table#lammitys.bigtable tr { width:100%;} 
table#lammitys.bigtable th {width:25%;}
table#lammitys.bigtable th p { text-align:center; width:100%; padding:0.5em; letter-spacing:0.02em; }
table#ajoneuvot-n tr {width:100%;}
table#ajoneuvot-n td {width:25%; box-sizing:border-box;}
.fullwidth, table.bigtable.fullwidth { width:100%;}
#leipis table p {width:90%;}
#leipis p.fullwidth {width:100%;}
p.fullwidth { clear: left;}
table .greyed-out {background-color: #868686;}
table .tableheading {background: none; color:white}
p.blank {background: none;}
table p span.spacer {margin-left: 2.4em; margin-right: 2.4em;}

em { font-style:italic; letter-spacing:0.02em; }

hr { clear:both; width:90%; margin-left:4%; border-top:solid 1px #cccccc; display:none; }

#leipis ul.sitemap, #leipis ul.sitemap li, #leipis ul.sitemap li p, #leipis ul.sitemap ul { padding:0; margin:0; }
#leipis ul.sitemap { margin-left:2em; margin-bottom: 0.4em; margin-top:1em; }
#leipis ul.sitemap ul { margin-left:1.6em; margin-top:0.4em; margin-bottom:1.2em; }
#leipis ul.sitemap li { margin-bottom:0.4em; }

/* WEBAUTO FIXES */
.webauto #menu_wrap #menu_cont, 
.webauto #menu_wrap #menulist,
.webauto #menu_wrap div,
.webauto #menu_wrap:hover #menu_cont,
.webauto #menu_wrap:hover #menulist,
.webauto #menu_wrap #menulist:hover,
.webauto #etusivulink, .webauto #rightside,
.webauto .slicknav_nav { display:none; }

/* ENGLISH VERSION FIXES */ /* and swedish version */
#lang { float:right; width:auto; max-width:50%; margin-right:1em; }
@media all and (max-width:768px) { #lang { max-width:100%;} }
#lang p {
	font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
	color:#009999;
	letter-spacing:0;
	font-size:1em;
	line-height:1.2;
	text-align:right;
	float:left;
	padding-right:0.85em;;
}
#lang a { float:left; }
#lang img {margin-left:0.8em;}
#lang a:last-child { /*padding-left:6px;*/ }
.eng #linkimage { background-image:url(../images/etusivulink_eng.png); }
.swe #linkimage { background-image:url(../images/etusivulink_swe.png); }
/* .eng #logo { background-image:url(../images/otsikko_eng.png); }
.swe #logo { background-image:url(../images/otsikko_swe.png); } */
.eng #logo { background-image:url(../images/uudet_2017/logo_vector_eng.svg)}
.swe #logo { background-image:url(../images/uudet_2017/logo_vector_swe.svg); }


/* tweaks 2016 – uudet kuvat */
.sivukuva { height:105px;}


/* Slicknav background that covers banner */
#banner_wrap:before {
	-moz-transition: width 0.2s ease;
	-webkit-transition: width 0.2s ease;
	-o-transition: width 0.2s ease;
	transition: width 0.2s ease;
	content:""; height:100%; background-color:#1ebbe0; z-index:321; display:block;
	position:absolute; top:0; left:0; width:0%;
}
#banner_wrap.open:before { width:100%; }
#current { display:block; position:absolute; right:0.5em; top:1.6em; z-index:800; opacity:0; 
	-webkit-transition: opacity 0.5s ease, right 0.5s ease;
	-moz-transition: opacity 0.5s ease, right 0.5s ease;
	-o-transition: opacity 0.5s ease, right 0.5s ease;
	transition: opacity 0.5s ease, right 0.5s ease;
}
.active #banner_wrap.open #current { right:80%;}

#banner_wrap.open #current, .active #current { display:block; opacity:1;}

#current h1 { font-size:2em; letter-spacing:0.06em; padding:0; text-align:right;}
#current h1 .dgrey { font-family:'Nunito Sans', Helvetica, Arial, sans-serif; font-size:1.6em;}


/* ========================================= */
/* ======= Wide (full width) columns ======= */

/* Initial statement is at the top. Makes .column.wide 100% width regardless of browser width; overrides media queries */

.column h2:first-child {background-color:black;}
.column, .column.wide { background-color:white; }
.column.wide.search { background-color:black; border-bottom:none;}
.column.wide h1, /*.column.wide h2*/ .column.wide h2.heading-top { color:#e6e6e6; background-color:black; }
.section_heading { border-bottom: 0.16em solid #f9b721;}
.columnContents { width:100%; position:relative; }
.columnContents:after {content:""; display:table; clear:both; height:0;}
@media all and (min-width:768px) { 
	.column.wide img { width:45%; margin-left:5%; float:right; padding-bottom:0;} 
	.column.wide img.padded { padding-bottom:0; margin-bottom:0;}
	.column.wide p {width:50%;}
	.column.wide .collapsibleContainer p { width:100%; box-sizing:border-box; padding-left:2em; padding-right:2em;}
	.column.wide .main_page_list {padding-top:2em;}
	.column.wide .halfcol img {float:left; margin-left:5%;}
	#leipis .column .halfcol p.caption { width:50%; font-style:normal; font-weight:normal; line-height:1.2; letter-spacing:0; 
		padding-left:0.4em; padding-top:0.8em; box-sizing:border-box; float:left;}
}

/* ========================================== */
/* ======= Collapsible container fixes =======*/

.collapsibleContainerTitle { background-color:white; padding-left:1.6em; padding-top:0.3em;}
#leipis .collapsibleContainerContent { background-color:black; border:0.4em double #f9b721; z-index:100000;}
#leipis .collapsibleContainerContent p {
	color:white;
	font-size:1.1em;
	font-weight:normal;
	padding-top:1em;
	letter-spacing:0.01em;
}
#leipis .collapsibleContainer.fullwidth .collapsibleContainerContent p {width:100%;}
#leipis .collapsibleContainerContent p, #leipis .seloste .collapsibleContainerContent p { float:none;}

#leipis .collapsibleContainerContent p strong {
	color:#4baff5;
}

.collapsibleContainerTitle div {
	clear:both;
	position:relative;
	top:0;
	padding-left:1em;
	text-align:left;
}
.column .collapsibleContainer ol { background:none;}
@media only screen and (max-width:980px) {.collapsibleContainerContent {width:91%;}}
@media only screen and (max-width:740px) {.collapsibleContainerContent {width:90%;}}

/* Collapsibles for the questionnaire. NOTE: add class .questionnaire to the #content div or each column or both */
/*ADDITIONS*/
.questionnaire button { margin-bottom:20px; margin-left:1em; margin-top:1em; font-family:/*"Blue Highway",*/ 'Nunito Sans',"Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 	font-size:18px; padding: 8px; letter-spacing:0.015em; color:black; }
.questionnaire button#next, .questionnaire button#next2, .questionnaire button#next3  { margin-left:0.4em; }
.questionnaire button:disabled { color:#ccc39d; }

#kys1,#kys2,#kys3,#kys4,#kys5,#kys6,#kys7,#kys8,#kys9,#kys10,#kys11,#kys12,#kys13,#kys14,#kys15,#kys16,#kys17,#kys18,#kys19,#kys20,
#kys21,#kys22,#kys23,#kys24,#kys25,#kys26,#kys27,#kys28,#kys29,#kys30,#kys31,#kys32,#kys33,#kys34,#kys35,#kys36,#kys37,#kys38,#kys39,#kys40,
#kys41,#kys42,#kys43,#kys44,#kys45,#kys46,#kys47,#kys48,#kys49,#kys50,#kys51,#kys52,#kys53,#kys54,#kys55,#kys56,#kys57,#kys58,#kys59{ display:none; }
#kys1,#kys21,#kys41 { display:block; }

.kirjalliset #kys16 { display:none; }
.kirjalliset #kys1, .kirjalliset #kys2, .kirjalliset #kys3, .kirjalliset #kys4, .kirjalliset #kys5, .kirjalliset #kys6, .kirjalliset #kys7, .kirjalliset #kys8, 
.kirjalliset #kys9, .kirjalliset #kys10, .kirjalliset #kys11, .kirjalliset #kys12, .kirjalliset #kys13, .kirjalliset #kys14, .kirjalliset #kys15, .kirjalliset #kys16,
.kirjalliset #kys17, .kirjalliset #kys18, .kirjalliset #kys19, .kirjalliset #kys20, .kirjalliset #kys21, .kirjalliset #kys22, .kirjalliset #kys23, .kirjalliset #kys24,
.kirjalliset #kys25, .kirjalliset #kys26, .kirjalliset #kys27, .kirjalliset #kys28, .kirjalliset #kys29, .kirjalliset #kys30 { display:block; }

.kirjalliset .main { padding-bottom:1em;}

.hidden { display:none; } .main { position:relative; } .nope { color:#ff1154; } .ok { color:#00f36e} 
.holder p, #leipis p.oikea, #leipis p.oikea2, #leipis p.oikea3 { height:auto; max-height:7em; overflow:hidden; margin-top:1em;
	padding:1.6em 0.8em 0.8em 0.8em; font-size:16px; color:#f1c929; background-color:#515151; font-weight:bold;
	-moz-transition: max-height 1s ease;
	-webkit-transition: max-height 1s ease;
	-o-transition: max-height 1s ease;
	transition: max-height 1s ease;
}
.holder p.hidden, #leipis p.oikea.hidden, #leipis p.oikea2.hidden, #leipis p.oikea3.hidden { display:block; max-height:0; padding-top:0; padding-bottom:0; }
img.vastaus, img.vastaus2, img.vastaus3 { position: absolute; z-index:1000; top:12%; height:auto; /*max-height: 350px;*/ max-width:70%; left: 15%;
	-webkit-box-shadow: 0 0 1em 0.5em rgba(255,255,255,0.64); box-shadow: 0 0 1em 0.5em rgba(255,255,255,0.64); border:solid #f9b721 0.3em; }

.kuvaharjoitus { /*border-radius:12px; border:1px solid #ececec; box-shadow:0 0 16px 4px #cacaca; padding-bottom:0; margin-bottom:36px;*/
	margin-top:1em; margin-bottom:0.5em; }
.questionnaire .collapsibleContainerTitle div h3 {
	float:right; padding:15px; color:#f1c929; font-size:1.2em; font-weight:bold; line-height:1.2; text-align:right; border-radius:16px; background-color:#4baff5; width:38px; }
.questionnaire .collapsibleContainerTitle div h3 { color:#f1c929; }
.questionnaire .collapsibleContainerTitle div:hover h3 { color:#29f1a8;}
.questionnaire .collapsibleContainerContent, .kirjalliset .collapsibleContainerContent {
	display:none; /*height:7em;*/ border-radius:12px 0 0 12px; border-right:solid 4px #f1c929; box-sizing:border-box;
	position:absolute; width:80%; left:20%; top:75%; background-color:black; z-index:1100; }
.questionnaire .kirjalliset .collapsibleContainerContent { bottom:35px; }
.questionnaire #leipis .collapsibleContainerContent p { color:white; font-size:0.9em; font-weight:bold; padding-top:1em; }
.questionnaire #leipis .collapsibleContainerContent p strong { color:#4baff5; }

.questionnaire h3 {letter-spacing:0; font-size:1.15em; line-height:1.3; }
.questionnaire h3:first-child {margin-top:0; padding-top:0;}

#leipis .kirjalliset .collapsibleContainerTitle div {
	padding:0.8em 0.5em 0.8em 0.5em; color:#f9b721; border-radius:5em; background-color:#1ebbe0; width:1.8em;
	font-size:1.2em; font-weight:bold; line-height:1.2; text-align:center; 
}
#leipis .questionnaire .collapsibleContainerTitle div {
	padding:0.8em 0.5em 0.8em 0.5em; color:white; border-radius:5em; background-color:#1ebbe0; width:4em;
	font-size:1.2em; font-weight:bold; line-height:1.2; text-align:center; 
}
#leipis .questionnaire .collapsibleContainerTitle div:hover {color:#f9b721;}
.kirjalliset h3 strong {color:#1ebbe0;}



/* ========================= */
/* ======= Misc Fixes =======*/
.top-no-heading {border-top: 0.5em solid #f9b721;}
a.disabled, .slicknav_nav a.disabled p { pointer-events: none; cursor: default; color:#467078;}
.slicknav_nav a.disabled
#navi0 .navi_wrap { height:2.4em; }
#navi0 .navi_wrap .navi_btn { display:none; }
.column.questionnaire { background-color:white;}
.column.questionnaire h2:first-child { background-color:black;}
.quote { text-align:center; }
#leipis h2.blueback { padding-left:1em; padding-top:0.8em; padding-bottom:0.4em;}
#leipis ul.shortlist { padding-top:1.6em; padding-bottom:0.8em; }
#leipis ul.shortlist li { line-height:2;}
.searchbox form { margin-top:1em; float:right; margin-right:2em; margin-bottom:2em;}
	.searchbox span.typcn { color:#a4a4a4; font-size:1.6em; font-weight:normal;}
.resultbox form { margin-top:1em;}
	.resultbox span.typcn { color:#a4a4a4; font-size:1.6em; font-weight:normal;}
#tipue_search_content { margin: 0; width:100%; max-width:56em; padding-top:0.5em; }
.column img.merkki {width:45%; margin-left:2.5%; margin-right:2.5%;margin-top:0.8em;}
#leipis .column ol.alphabetic { list-style-type:lower-alpha; font-size:1em;}
#leipis p.numbered { line-height:2;}
p.numbered strong { background-color:rgba(19,70,147,1.00); font-size:0.8em; padding:0.5em 0.7em; border-radius:5em; color:white;}
#leipis .column .seloste h2 { /*padding-left:9.6em;*/ border:none; background:none; padding-top:2em; padding-bottom:0; padding-left:1em;}
#leipis .column .seloste:first-child h2 {padding-top:0.8em;}
#leipis .column .seloste:last-child:after {content:""; display:table; height:2em; clear:both;}
@media all and (max-width: 450px) { #leipis .column .seloste h2 { clear:both; padding-left:1em; text-align:right;} }
.column ol:last-child, .column p:last-child, .column ul:last-child {padding-bottom:1.6em;}
#leipis .column .seloste ul p { float:none;}
img.divider { border-bottom:0.64em solid #1ebbe0;}
#leipis .kirjalliset h3 { line-height:1.3; font-size:1em}
#leipis .kirjalliset.altversion h3 { padding-bottom:1em;}
#leipis .kirjalliset .column {margin-bottom:4em;}

#leipis img.smol { width: 16%; float:left; padding:0; margin:0;}

#leipis ol.nested { padding-bottom:0;}
#leipis ol.nested li { font-size:1em;}
#leipis ol.nested ul { padding-bottom:0.3em;}

#leipis .column p img.tiny {max-width:100px; width:10%; border-radius:0.7em; margin:0.1em 0.6em 0.4em 0.1em;}

.expander {clear:both; cursor:pointer;}
#leipis h3.expander {color:#f9b721;}
.expander:hover { text-decoration:underline;}

.superscript, sup { vertical-align:super; font-size:64%;}
.uppercase {text-transform: uppercase;}

#leipis ol.red-numbers li { color:#CC0909;}

#lang .fin, #lang .eng, #lang .swe {display: none;}
html.fin .eng, html.fin .swe, html.eng .fin, html.eng .swe, html.swe .fin, html.swe .eng {display: none;} /* remove this line if problematic */
.fin #lang .fin, .eng #lang .eng, .swe #lang .swe { display:block;}
/* Remove once translations are finished */ .flageng, .flagswe { display:none;} /**/
/* work in progress, bring back flag buttons where language versions are available */
.b00 .flageng, .luku01 .flageng, .luku02 .flageng, .luku03 .flageng, .luku04 .flageng, .luku05 .flageng, .luku06 .flageng, .luku07 .flageng, .luku08 .flageng, .luku09 .flageng, .luku10 .flageng, .luku11 .flageng, .luku12 .flageng, .luku13 .flageng, .luku14 .flageng, .luku15 .flageng, .luku16 .flageng, .luku17 .flageng, .luku18 .flageng, .luku19 .flageng {display:block;}
.b00 .flagswe, .luku01 .flagswe, .luku02 .flagswe, .luku03 .flagswe, .luku04 .flagswe, .luku05 .flagswe ,.luku06 .flagswe, .luku07 .flagswe, .luku08 .flagswe, .luku09 .flagswe, .luku10 .flagswe, .luku11 .flagswe, .luku12 .flagswe, .luku13 .flagswe, .luku14 .flagswe, .luku15 .flagswe, .luku16 .flagswe, .luku17 .flagswe, .luku18 .flagswe, .luku19 .flagswe {display:block;}
.luku1-am120 .flagswe, .luku2-am120 .flagswe, .luku3-am120 .flagswe, .luku4-am120 .flagswe, .luku5-am120 .flagswe, .luku6-am120 .flagswe, .luku7-am120 .flagswe, .luku8-am120 .flagswe, .luku9-am120 .flagswe, .luku10-am120 .flagswe, .luku11-am120 .flagswe, .luku12-am120 .flagswe, .luku13-am120 .flagswe, .luku14-am120 .flagswe, .luku15-am120 .flagswe, .luku16-am120 .flagswe, .lukuAM-am120 .flagswe {display: block;}
.lukuA-a .flagswe, .luku0-a .flagswe, .luku1-a .flagswe, .luku2-a .flagswe, .luku3-a .flagswe, .luku4-a .flagswe, .luku5-a .flagswe, .luku6-a .flagswe, .luku7-a .flagswe, .luku8-a .flagswe, .luku9-a .flagswe, .luku10-a .flagswe, .luku11-a .flagswe, .luku12-a .flagswe, .luku13-a .flagswe, .luku14-a .flagswe, .luku15-a .flagswe {display: block;}
.luku1-am121 .flagswe, .luku2-am121 .flagswe, .luku3-am121 .flagswe, .luku4-am121 .flagswe, .luku5-am121 .flagswe, .luku6-am121 .flagswe, .luku7-am121 .flagswe, .luku8-am121 .flagswe, .luku9-am121 .flagswe, .luku10-am121 .flagswe, .luku11-am121 .flagswe, .luku12-am121 .flagswe, .luku13-am121 .flagswe, .luku14-am121 .flagswe, .luku15-am121 .flagswe, .luku16-am121 .flagswe, .luku12-am121 .flagswe, .lukuAM-am121 .flagswe {display: block;}

.lang-fi, .lang-en, .lang-se {display:none;}
.fin .lang-fi {display:inherit;}
.eng .lang-en {display:inherit;}
.swe .lang-se {display:inherit;}
.fin #breadcrumbs .lang-fi, .eng #breadcrumbs .lang-en, .swe #breadcrumbs .lang-se {display: inline-block;}

.activateTTSfin, .activateTTSeng, .activateTTSswe  {width:6em; height:2.4em; border-radius:0.3em; font-size: 1.2em; background-color: black; color:white; font-family: 'Nunito Sans', sans-serif; border-color: #1ebbe0;}

.eng #leipis .column p.caption {text-transform: capitalize;}

.half-width {width:50% !important;}
.half-width:first-child {float:left;}

#leipis .imgGroup {float: left; height: auto; box-sizing: border-box; margin:0;}
#leipis .halves {width:24%;}
#leipis .thirds {width:15%; margin-left: 1.6%;}

#leipis .tarra {width:27%; box-sizing: border-box; float:left;}

.poistettava {border-bottom:double 0.32em rgba(255,42,114,1.00);}
.poistettu {display: none;}

#t-teoriakoe {margin-left: 1%;}

.luku0-tt #links, .luku0-tmk #links,
.luku1-tt #links, .luku1-tmk #links,
.luku2-tt #links, .luku2-tmk #links,
.luku3-tt #links, .luku3-tmk #links,
.luku4-tt #links, .luku4-tmk #links,
.luku5-tt #links, .luku5-tmk #links,
.luku6-tt #links, .luku7-tt #links {display: none;}

.luku0-tt #lang, .luku0-tmk #lang,
.luku1-tt #lang, .luku1-tmk #lang,
.luku2-tt #lang, .luku2-tmk #lang,
.luku3-tt #lang, .luku3-tmk #lang,
.luku4-tt #lang, .luku4-tmk #lang,
.luku5-tt #lang, .luku5-tmk #lang,
.luku6-tt #lang, .luku7-tt #lang{display: none;}

#leipis h3.toclist {padding-bottom: 0.4em;}
#leipis h3.toclist a {padding:0; margin:0; line-height: 1.4; font-size: 1.05em; color:#f9b721;}
#leipis h3.toclist a:hover {color:#4baff5;}
#leipis p.segment {padding-top:0; padding-bottom: 0; padding-left: 2em;}
#leipis p.segment:last-child {margin-bottom: 2em;}

.osio74, .osio75 {display: none;}

/*======================*/
/*WEBAUTO version tweaks*/
.webauto .slicknav_menu { display:none !important;}
.webauto #footer #links { display:none !important;}