@import url("https://use.typekit.net/jig1pns.css");

/*******************************************************************************************************************************/
:root {
	/*** SANOMA ***/
	--neutral-000: #FFFFFF;
	--neutral-050: #F2F2F2;
	--neutral-100: #E5E5E5;
	--neutral-200: #C8C8C8;
	--neutral-400: #B3B3B3;
	--neutral-500: #949494;
	--neutral-700: #6D6D6D;
	--neutral-900: #333333;

	--green-800: #006000;
	--green-600: #008A24;
	--green-500: #1DA23B;
	--green-100: #B4DFBC;
	--green-050: #EBF5EC;

	--orange-800: #AA2000;
	--orange-600: #D24500;
	--orange-500: #EC5C14;
	--orange-100: #FEBE9F;

	--blue-800: #006074;
	--blue-600: #008197;
	--blue-500: #2499AF;
	--blue-100: #B1E5F0;
	--blue-050: #EBF3F5;

	--purple-900: #40235F;
	--purple-700: #643695;
	--purple-500: #8E6CB1;
	--purple-100: #D8C8EA;
	--purple-050: #F0ECF5;

	--yellow-100: #FFE186;
	--pink-100: #FFBFC2;
	--mint-100: #C0E3D3;
	--pink-700: #E00083;

	--text-black: var(--neutral-900);
	
	--disabled-background: var(--neutral-100);
	--disabled-text: var(--neutral-500); 
	--disabled-other: var(--neutral-200);

	--strokes-neutral-light: var(--neutral-100);
	--strokes-neutral-dark: var(--neutral-400);

	--backgrounds-light-bg-neutral: var(--neutral-050);
	--backgrounds-light-bg-neutral-dark: var(--neutral-100);
	--backgrounds-dark-bg-neutral: var(--neutral-700);
	--backgrounds-dark-bg-neutral-darker: var(--neutral-900);

	--primary-bg-dark: var(--green-600);
	--primary-bg-darker: var(--green-800);

	/*** IIOPPI ***/

	--musta: #000000;
	--harmaa: #999999;
	--harmaa-vaalea: #CCCCCC;
	--harmaa-tausta: #E2E2E4;
	--harmaa-tausta-vaalea: #F5F5F5;
	--harmaa-reuna: #E4E4E4;
	--oikein-vari: #006000;
	--oikein-taustavari: #EBF5EC;
	--vaarin-vari: #D24500;
	--vaarin-taustavari: #FFBFC2;

	--vari1: var(--green-600);
	--vari1-tumma: var(--green-800);
	--vari2: var(--orange-600);
	--vari2-tumma: var(--orange-800);

	--painike-vari: #FFFFFF;
	--painike-vari-hover: #FFFFFF;
	--painike-vari-selected: #FFFFFF;
	--painike-vari-disabled: var(--disabled-text);
	--painike-taustavari: var(--primary-bg-dark);
	--painike-taustavari-hover: var(--primary-bg-darker);
	--painike-taustavari-selected: var(--primary-bg-darker);
	--painike-taustavari-disabled: var(--disabled-background);
	--painike-kehys: .05em solid var(--neutral-000);
	--painike-kehys-hover: .05em solid var(--neutral-000);
	--painike-kehys-selected: .05em solid var(--neutral-000);
	--painike-kehys-disabled: .05em solid var(--disabled-other);
	--painike-mitat: 1.5em;
	--painike-pyoristys: .75em;

	--painike2-vari: var(--neutral-900);
	--painike2-vari-hover: var(--neutral-900);
	--painike2-vari-selected: var(--neutral-700);
	--painike2-vari-disabled: var(--disabled-text);
	--painike2-taustavari: var(--neutral-000);
	--painike2-taustavari-hover: var(--neutral-050);
	--painike2-taustavari-selected: var(--neutral-050);
	--painike2-taustavari-disabled: var(--disabled-background);
	--painike2-kehys: .05em solid var(--strokes-neutral-light);
	--painike2-kehys-hover: .05em solid var(--strokes-neutral-light);
	--painike2-kehys-selected: .05em solid var(--strokes-neutral-light);
	--painike2-kehys-disabled: .05em solid var(--disabled-other);

	--painike3-vari: var(--neutral-000);
	--painike3-vari-hover: var(--neutral-000);
	--painike3-vari-selected: var(--orange-100);
	--painike3-vari-disabled: var(--disabled-text);
	--painike3-taustavari: var(--orange-600);
	--painike3-taustavari-hover: var(--orange-800);
	--painike3-taustavari-selected: var(--orange-800);
	--painike3-taustavari-disabled: var(--disabled-background);
	--painike3-kehys: .05em solid var(--strokes-neutral-light);
	--painike3-kehys-hover: .05em solid var(--strokes-neutral-light);
	--painike3-kehys-selected: .05em solid var(--strokes-neutral-light);
	--painike3-kehys-disabled: .05em solid var(--disabled-other);

	--painike-ok-vari: #FFFFFF;
	--painike-ok-vari-hover: #FFFFFF;
	--painike-ok-taustavari: #2DAC44;
	--painike-ok-taustavari-hover: forestgreen;
	--painike-ok-kehysvari: #2DAC44;
	--painike-ok-kehysvari-hover: forestgreen;

	--painike-sulje-vari: #FFFFFF;
	--painike-sulje-vari-hover: #FFFFFF;
	--painike-sulje-taustavari: #A01C32;
	--painike-sulje-taustavari-hover: #781525;
	--painike-sulje-kehysvari: #A01C32;
	--painike-sulje-kehysvari-hover: #781525;

	--painike-true-vari: #FFFFFF;
	--painike-true-vari-hover: #FFFFFF;
	--painike-true-taustavari: #2DAC44;
	--painike-true-taustavari-hover: forestgreen;
	--painike-true-kehysvari: #2DAC44;
	--painike-true-kehysvari-hover: forestgreen;

	--painike-false-vari: #FFFFFF;
	--painike-false-vari-hover: #FFFFFF;
	--painike-false-taustavari: #A01C32;
	--painike-false-taustavari-hover: #781525;
	--painike-false-kehysvari: #A01C32;
	--painike-false-kehysvari-hover: #781525;

	--valilehdet-vari-selected: #2DAC44;
	--valilehdet-palkki-tausta-mobile: linear-gradient(0deg, rgba(235,235,235,1) 0%, rgba(245,245,245,1) 50%);

	--range-mitat: 1.5em;
	--range-border-radius: .75em;

	
	
	
	
	/*** KOKEET ***/

	--primary-bg-dark: var(--purple-700);
	--primary-bg-darker: var(--purple-900);
	--vari1: var(--primary-bg-dark);
	--vari1-tumma: var(--primary-bg-darker);

	--painike-ok-taustavari: #306B34;
	--painike-ok-taustavari-hover: #115F43;
	--painike-ok-kehysvari: #306B34;
	--painike-ok-kehysvari-hover: #115F43;

	--painike-sulje-taustavari: #C51C1C;
	--painike-sulje-taustavari-hover: #A51818;
	--painike-sulje-kehysvari: #C51C1C;
	--painike-sulje-kehysvari-hover: #A51818;

	--black: var(--neutral-900);
	--black-dark: #000000;
	/* --black-light: var(--backgrounds-dark-bg-neutral); */
	--black-light: #95969D;
	/* --grey: var(--backgrounds-light-bg-neutral-dark); */
	--grey: #E2E2E4;
	/* --grey-light: var(--backgrounds-light-bg-neutral); */
	--grey-light: #F5F5F6;
	/* --grey-hover: var(--backgrounds-light-bg-neutral-dark); */
	--grey-hover: #B1B2B7;
	--grey-text: #444548;
	--white-hover: #E2E2E4;
	--opacity-hover: rgba(0,0,0,.1);
	--color-1: var(--purple-700);
	--opacity-disabled: .5;

	--huomio-vari: #C51C1C;

	--ylapalkki-taustavari: var(--purple-700);
	--ylapalkki-otsikko: var(--neutral-000);
	--ylapalkki-painike: var(--neutral-000);
	--ylapalkki-painike-wrap: var(--purple-700);

	--korostettu-taustavari: rgba(0,0,0,0.1);

	--font-main: open-sans, sans-serif;
}

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

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;

	min-width: 100%;
	min-height: 100%;
	line-height: 1.2;
}
html.preloader::after,
html *.preloader::after {
	content: '';
	position: absolute;
	left: calc(50% - 18px);
	top: calc(50% - 18px);
	width: 36px;
	height: 36px;
	background-image: url(kuvat/preloader.gif);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

body {
	margin: 0;
	padding: 0;

	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	
	overflow: hidden;

	font-family: var(--font-main);
	color: var(--black);
	background-color: #fff;
}

/***/



b, sb{
	font-weight: bold;
}
.piilossa{
	display: none !important;
}

/*** NAPIT ****/
.okB {
	color: var(--painike-ok-vari) !important;
	border-color: var(--painike-ok-kehysvari) !important;
	background-color: var(--painike-ok-taustavari) !important;
}
html.no-touch .okB:not(.disabled):not(.selected):hover {
	color: var(--painike-ok-vari-hover) !important;
	border-color: var(--painike-ok-kehysvari-hover) !important;
	background-color: var(--painike-ok-taustavari-hover) !important;
}

.suljeB {
	color: var(--painike-sulje-vari) !important;
	border-color: var(--painike-sulje-kehysvari) !important;
	background-color: var(--painike-sulje-taustavari) !important;
}
html.no-touch .suljeB:not(.disabled):not(.selected):hover {
	color: var(--painike-sulje-vari-hover) !important;
	border-color: var(--painike-sulje-kehysvari-hover) !important;
	background-color: var(--painike-sulje-taustavari-hover) !important;
}

/*** RANGE ***/
:root{
	--range-mitat: 1.5em;
	--range-border-radius: calc(var(--range-mitat) / 2);
}
input[type="range"].range {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
}
input[type="range"].range:focus {
	outline: none;
}
input[type="range"].range::-webkit-slider-runnable-track {
	width: 100%;
	height: var(--range-mitat);
	cursor: pointer;
	background: var(--painike-taustavari);
	border-radius: var(--range-border-radius);
}
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: var(--painike-taustavari-hover);
}
input[type="range"].range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: var(--range-mitat);
	height: var(--range-mitat);
	border: 1px solid var(--painike-taustavari);
	border-radius: var(--range-border-radius);
	background: #fff;
	cursor: pointer;
}
input[type="range"].range::-moz-range-track {
	width: 100%;
	height: var(--range-mitat);
	cursor: pointer;
	background: var(--painike-taustavari);
	border-radius: var(--range-border-radius);
}
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: var(--painike-taustavari-hover);
}
input[type="range"].range::-moz-range-thumb {
	width: var(--range-mitat);
	height: var(--range-mitat);
	border: 1px solid var(--painike-taustavari);
	border-radius: var(--range-mitat);
	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: var(--range-mitat);
	cursor: pointer;
	color: transparent;
	background: var(--painike-taustavari);
	border-radius: var(--range-mitat);
	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: var(--range-mitat);
	height: var(--range-mitat);
	border: 1px solid #666;
	border-radius: var(--range-mitat);
	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: var(--painike-taustavari-hover);
}

/* zoomContainer */
.zoomContainer{
	position: relative;
	flex: 0 0 auto;
	
	display: flex;
	align-items: flex-end;
	justify-content: center;
	
	height: 73px;
	padding-bottom: 17px;
	background-image: url(kuvat/zoom.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

#zoomRangeB-container{
	position: absolute;
	top: 0;
	left: .2em;
	right: .2em;

	display: flex;
}
#zoomRangeB-container .zoomRangeB{
	flex: 1 0 auto;
	height: 1.8em;
	cursor: pointer;
}

#palkkiOikea .zoomContainer #zoomRange input{
	display: block;
	padding: 0;
	margin: 0;
	width: 156px;
}

/***/

.tehtava, .header, .footer{
	position: relative;
	display: block;
	text-align: left;
}

.teksti, .kuva{
	position: absolute;
	padding: 0;
	margin: 0;
	white-space: pre;
	line-height: 1em; 

	transform-origin: left center;
	
	box-shadow: none;
	
	-webkit-appearance: none;
	appearance: none;
	
	outline: none;
}

.alla{
	z-index: 0;
	pointer-events: none;
}
.paalla{
	z-index: 1;
}

.teksti txt{
	display: inline;
	line-height: inherit;
	vertical-align: top;

	padding: 0;
	margin: 0;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	
	box-shadow: none;
}
.teksti txt.puuttuvaFontti{
	background-color: #f00;
}
.teksti p{
	margin: 0;
}
.teksti span{
	letter-spacing: 0em !important;
}

.kuva{
	line-height: 0px;
}
.kuva img, .kuva svg{
	/*vertical-align: top;*/
	pointer-events: none;
	display: block;
	padding: 0px;
	margin: 0px;
}

.noSelect{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Myriad pro */
.Myriad_Pro{
	font-weight: normal;
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
}
.Myriad_Pro sb{
	font-weight: 600;
}

.Myriad_Pro_Black{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: normal;
	font-weight: 900;
}
.Myriad_Pro_Black_Italic{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: italic;
	font-weight: 900;
}
.Myriad_Pro_Bold{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: normal;
	font-weight: 700;
}
.Myriad_Pro_Bold_Italic{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: italic;
	font-weight: 700;
}
.Myriad_Pro_Italic{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: italic;
	font-weight: 400;
}
.Myriad_Pro_Light{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: normal;
	font-weight: 300;
}
.Myriad_Pro_Light_Italic{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: italic;
	font-weight: 300;
}
.Myriad_Pro_Regular{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: normal;
	font-weight: 400;
}
.Myriad_Pro_Semibold{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: normal;
	font-weight: 600;
}
.Myriad_Pro_Semibold_Italic{
	font-family: 'myriad-pro', 'Myriad Pro', sans-serif;
	font-style: italic;
	font-weight: 600;
}

/*
* 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*/
.Alku_Laiha{
	font-family: 'Alku';
	font-weight: 300;
}
.Alku_Normaali{
	font-family: 'Alku';
	font-weight: normal;
}
.Alku_Lihava{
	font-family: 'Alku';
	font-weight: bold;
}

.teksti.Alku_Laiha > *,
.teksti.Alku_Normaali > *,
.teksti.Alku_Lihava > *{
	vertical-align: -4% !important;
}

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