html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    
    overflow: hidden;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -ms-content-zooming: none;
    content-zooming: none;
    
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    min-width: 100%;
    min-height: 100%;
}
html.preloader::after,
html *.preloader::after {
    content: '';
    position: absolute;
    left: calc(50% - 18px);
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
    
    background-image: url(images/preloader.gif);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
body {
    font-family: "myriad-pro", serif;
    margin: 0;
    padding: 0;
}
html, body {
	-webkit-text-size-adjust: none;
}
html.lukittu,
html.lukittu * {
	pointer-events: none !important;
    cursor: default !important;
}


/*** h1, h2, h3 ***/
h0, h1, h2, h3 {
    font-size: inherit;
    margin: 0 0 .5em;
    padding: 0;
    display: block;
}
h0 {
    font-size: 1.5em;
    font-weight: 700;
}
h1 {
    font-size: 1.2em;
    font-weight: 700;
}
h2 {
    font-size: 1.1em;
    font-weight: 700;
}
h3 {
    font-weight: 700;
}
h0:not(:first-child), h1:not(:first-child), h2:not(:first-child), h3:not(:first-child) {
    margin-top: 1em;
}


/*** ol ***/
ol.pallo, ol.viiva, ol.abc, ol.nro, ol.tyhja, ol.merkki{
    position: relative;
    margin: 0 0 .5em;
    padding: 0;
    list-style: none;
}
ol > li {
    margin: 0 0 .5em;
    padding: 0 0 0 1em;
}
ol.tyhja > li {
    padding: 0;
}
ol.pallo > li::before {
    content: '•';
    font-weight: bold;
    position: absolute;
    left: .25em;
} 
ol.viiva > li::before {
    content:'–';
    position: absolute;
    left: .15em;
}
ol.merkki > li::before {
    content: attr(data-merkki);
    position: absolute;
    left: .25em;
}

ol.abc {
    counter-reset: ol-abc-counter;
}
ol.abc ol.abc {
    counter-reset: ol-abc2-counter;
}
ol.abc ol.abc ol.abc {
    counter-reset: ol-abc3-counter;
}
ol.nro {
    counter-reset: ol-nro-counter;
}
ol.nro ol.nro {
    counter-reset: ol-nro2-counter;
}
ol.nro ol.nro ol.nro {
    counter-reset: ol-nro3-counter;
}
ol.abc > li::before,
ol.nro > li::before {
    position: absolute;
    left: .75em;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
ol.abc > li::before {
    content: counter(ol-abc-counter, lower-latin) ')';
    counter-increment: ol-abc-counter;
}
ol.abc ol.abc > li::before {
    content: counter(ol-abc2-counter, lower-latin) ')';
    counter-increment: ol-abc2-counter;
}
ol.abc ol.abc ol.abc > li::before {
    content: counter(ol-abc3-counter, lower-latin) ')';
    counter-increment: ol-abc3-counter;
}
ol.nro > li::before {
    content: counter(ol-nro-counter, decimal) '.';
    counter-increment: ol-nro-counter;
}
ol.nro ol.nro > li::before {
    content: counter(ol-nro2-counter, decimal) '.';
    counter-increment: ol-nro2-counter;
}
ol.nro ol.nro ol.nro > li::before {
    content: counter(ol-nro3-counter, decimal) '.';
    counter-increment: ol-nro3-counter;
}

/*** p ***/
p {
    margin: .5em 0;
    padding: 0;
}
p:first-child {
    margin-top: 0;
}
p:last-child {
    margin-bottom: 0;
}


/*** a ***/
a[href],
a[data-tiedosto]{
    color: #07a;
    white-space: normal;
    text-decoration: underline;
    cursor: pointer;
}
.no-touch a[href]:hover,
.no-touch a[data-tiedosto]:hover{
    color: #000;
}
a[href]:visited,
a[data-tiedosto]:visited{
    
}


/*** * ***/
* {
	box-sizing: border-box;
}
*[contenteditable="true"] {
	-webkit-user-select: text;
	-ms-user-select: text;
    user-select: text;
}

*[data-aani],
*[data-kaiutin],
*[data-aikakohta] {
    cursor: pointer !important;
}
*[data-aikakohta]:not(.nappi).kaiutin::after {
    content: '';
    position: absolute;
    top: 0em;
    left: 0em;
    width: 1.5em;
    height: 1.5em;
    
    background-image: url(images/nappi/kuuntele.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
/*.no-touch *[data-aikakohta]:not(.disabled).kaiutin:hover::after,
*[data-aikakohta]:not(.disabled).kaiutin.korostettu::after {
    background-color: #324050;
}*/


/*** container ***/
#container {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
	
    font-size: 20px;
    line-height: 1.1;
    
    cursor: default;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html:not(.fixed) #container {
	max-width: 100vw;
}
html.preloader #container {
    visibility: hidden;
}


/*** sulje-ikkuna ***/
#suljeIkkunaB {
	position: absolute;
	top: .5em;
	right: .5em;
	border-radius: 50%;
	background-color: #A01C32;
	z-index: 10001;
}
html.no-touch #suljeIkkunaB:hover {
    background-color: #781525;
	-webkit-transition: background-color .2s linear;
    transition: background-color .2s linear;
}
html.scrollY #suljeIkkunaB {
    margin-right: 18px;
}

html.mobile.sulje-ikkunaB-parent #suljeIkkunaB {
	display: none !important;
}
html.sulje-ikkunaB-children:not(.mobile) #suljeIkkunaB {
	display: none !important;
}


/*** painikkeet ***/
#painikkeet {
    pointer-events: none;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-end;
	align-items: flex-end;
    -webkit-justify-content: center;
    justify-content: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	pointer-events: none;
}
#painikkeet > *:not(.disabled) {
    pointer-events: all;
}
#painikkeet > * {
    margin-top: .2em;
    margin-left: .1em;
    margin-right: .1em;
}
#painikkeet > .painike {
    margin-top: .266em;
    margin-left: .133em;
    margin-right: .133em;
}


#container > #painikkeet {
    position: absolute;
    left: .4em;
    right: .4em;
    bottom: .5em;
    z-index: 10000;
	
	-webkit-justify-content: flex-end;
    justify-content: flex-end;
}
html.mobile.portrait #container > #painikkeet {
	-webkit-justify-content: center;
    justify-content: center;
}
html.fixed.scrollX #container > #painikkeet {
    margin-bottom: 18px;
}
html.fixed.scrollY #container > #painikkeet {
    margin-right: 18px;
}
html:not(.fixed) #container > #painikkeet {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
	padding: .3em .4em .5em;
	-webkit-justify-content: center;
    justify-content: center;
}
html:not(.fixed) #container > #painikkeet:empty {
	padding: 0;
}


/*** .painike.ruksi, .painike.ruksittu ***/
.painike.ruksi,
.painike.ruksittu,
.painike.ruksi.valittu,
.painike.ruksi.selected {
	position: relative;
	padding-right: .75em;
	padding-left: 2em;
}
.painike.ruksi::before,
.painike.ruksittu::before {
	content: '';
	position: absolute;
	box-sizing: border-box;
	color: inherit;
	font-size: 1.2em;
	top: calc(50% - .5em);
	left: calc(.85em - .5em);
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 1px solid;
	background-color: #fff;
}
.painike.ruksittu::before,
.painike.ruksi.valittu::before,
.painike.ruksi.selected::before {
	background-image: url(images/nappi/sulje_musta.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}


/*** eteneminen ***/
#container > #eteneminen {
    position: absolute;
    left: 0;
    right: 0;
    top: .5em;
    text-align: center;
}
html.mobile #container > #eteneminen {
	top: 0;
    z-index: 10000;
}



/*** copy ***/
*[data-copy]:not([data-copy=""])::after {
	content: attr(data-copy);
	position: absolute;
	bottom: .5em;
	left: .5em;
	font-size: .5em;
	color: #000;
	text-align: left;
	pointer-events: none;
	font-family: "myriad-pro", serif;
}



/*** HS/YLE-linkki ****************************************************************/
.yle,
.hs,
.hstv {
    position: relative;
    color: #000;
    padding-left: 2em;
    padding-top: .05em;
    /*cursor: pointer;
    color: #1564a4;
    text-decoration: underline;*/
}
.no-touch .yle:hover span,
.no-touch .hs:hover span,
.no-touch .hstv:hover span {
    /*text-decoration: underline;*/
}
.no-touch .yle:hover,
.no-touch .hs:hover,
.no-touch .hstv:hover {
    /*color: #000;*/
}
.yle::before,
.hs::before,
.hstv::before {
    content:'';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5em;
    height: 1.5em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.yle::before {
    background-image: url(images/yle-logo.png);
}
.hs::before {
    background-image: url(images/hs-logo.png);
}
.hstv::before {
    width: 3em;
    background-image: url(images/hstv-logo.png);
}
.hstv {
	padding-left: 3.5em;
}



/*** puhekupla ***/
.puhekupla {
    position: relative;
    display: inline-block;
    padding: 1em;
    border-radius: .5em;
    background-color: #E2E2E2;
    text-align: center;
}
.puhekupla.valkoinen {
	background-color: #fff;
}
.puhekupla::after {
    content: '';
    position: absolute;
	z-index: -1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.5em .5em 0 .5em;
    border-color: #E2E2E2 transparent transparent;
    
    left: 2em;
    bottom: -1.25em;
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}
.puhekupla.valkoinen::after {
    border-color: #fff transparent transparent;
}
.puhekupla.oikea::after {
    left: auto;
    right: 2em;
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.puhekupla.sivu::after {
    left: -1em;
	bottom: 0.1em;
	-webkit-transform: rotate(72deg);
	-ms-transform: rotate(72deg);
	transform: rotate(72deg);
}
.puhekupla.sivu.oikea::after {
	left: auto;
    right: -1em;
	bottom: 0.1em;
	-webkit-transform: rotate(-72deg);
	-ms-transform: rotate(-72deg);
	transform: rotate(-72deg);
}
.puhekupla.sivu.keskella::after {
	bottom: calc(50% - 1em);
}
.puhekupla[data-aani],
.puhekupla[data-kaiutin],
.puhekupla[data-aikakohta] {
    background-image: url(images/nappi/kuuntele_musta.png);
    background-size: 1em;
    background-position: left .1em top .1em;
    background-repeat: no-repeat;
}


/*** div-zoom ***/
.div-zoom {
	
}
.div-zoom-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	overflow: auto;
}
.div-zoom-content {
	position: absolute;
	width: 100%;
	height: 100%;
}
/* .div-zoom:not([data-zoom="1"]):not(.dragging) .div-zoom-content, */
.div-zoom[data-scroll="true"]:not(.dragging) .div-zoom-content {
	cursor: move;
	cursor: grab;
}
.div-zoom.dragging .div-zoom-content {
	cursor: move;
	cursor: grabbing;
}
.div-zoom-buttons {
	position: absolute;
	left: .75em;
	bottom: .75em;
}
.div-zoom-b {
	display: block !important;
	width: 1.25em !important;
	min-width: 0 !important;
	height: 1.25em !important;
	border-radius: .2em !important;
}
.div-zoom-plusB {
	background-image: url(images/nappi/plus.png);
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.div-zoom-minusB {
	background-image: url(images/nappi/minus.png);
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}


/*** virhe ***/
virhe {
	display: block;
	color: red;
	font-weight: bold;
	border: 2px solid;
	padding: .25em;
	margin: .5em auto;
}


/*** ELEMENTIT ****************************************************************/

/*** RANGE ***/
input[type="range"].range {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: .5em;
    background: none;
}
input[type="range"].range:focus {
    outline: none;
}
input[type="range"].range::-webkit-slider-runnable-track {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: #666;
    border-radius: 1em;
}
input[type="range"].range:hover::-webkit-slider-runnable-track,
input[type="range"].range:focus::-webkit-slider-runnable-track,
input[type="range"].range:active::-webkit-slider-runnable-track {
    background: #333;
}
input[type="range"].range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border: 1px solid #666;
    border-radius: 1em;
    background: #fff;
    cursor: pointer;
}
input[type="range"].range::-moz-range-track {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: #666;
    border-radius: 1em;
}
input[type="range"].range:hover::-moz-range-track,
input[type="range"].range:focus::-moz-range-track,
input[type="range"].range:active::-moz-range-track {
    background: #333;
}
input[type="range"].range::-moz-range-thumb {
    width: 1em;
    height: 1em;
    border: 1px solid #666;
    border-radius: 1em;
    background: #fff;
    cursor: pointer;
}
input[type="range"].range::-moz-focus-inner,
input[type="range"].range::-moz-focus-outer {
    border: none;
}
input[type="range"].range::-ms-track {
    width: 100%;
    height: 1em;
    cursor: pointer;
    color: transparent;
    background: #666;
    border-radius: 1em;
    border: none;
}
input[type="range"].range::-ms-fill-lower {
    display: none;
}
input[type="range"].range::-ms-fill-upper {
    display: none;
}
input[type="range"].range::-ms-thumb {
    width: 1em;
    height: 1em;
    border: 1px solid #666;
    border-radius: 1em;
    background: #fff;
    cursor: pointer;
}
input[type="range"].range::-ms-tooltip {
    display: none;
}
input[type="range"].range:hover::-ms-track,
input[type="range"].range:focus::-ms-track,
input[type="range"].range:active::-ms-track {
    background: #333;
    /*border-color: #333;*/
}



/*** FONTIT ***************************************************/

/*
* This CSS file includes copyrighted font software data (fonts) which is authorized
* for the following URLs only:
*
* https://www.sanomapro.fi/
*
* The copyrighted fonts are:
*
* Alku-Laiha
* Alku-Normaali
* Alku-Lihava
* AlkuApulinjat-Laiha
* AlkuApulinjat-Normaali
* AlkuApulinjat-Lihava
* AlkuPiirtosuunnat-Laiha
*
* These fonts are protected by copyright and licensing terms, and may not be
* used without permission on other web sites, servers or computers. For full
* terms, please see http://www.typolar.com/licenses
*
* (c) 2016 Typolar Ltd
*/

/*Alku*/
@font-face {
    font-family: 'Alku';
    src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-laiha-webfont.eot');
    src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-laiha-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-laiha-webfont.woff2') format('woff2'),
         url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-laiha-webfont.woff') format('woff');
    font-weight: 300;
}
@font-face {
    font-family: 'Alku';
    src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-normaali-webfont.eot');
    src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-normaali-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-normaali-webfont.woff2') format('woff2'),
         url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-normaali-webfont.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'Alku';
    src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-lihava-webfont.eot');
    src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-lihava-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-lihava-webfont.woff2') format('woff2'),
         url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-lihava-webfont.woff') format('woff');
    font-weight: bold;
}

svg [name="Alku_Lihava"] tspan {
    font-weight: bold !important;
}