/*
Tämä tyylitiedosto sisältää asiakaskohtaiset väri- ja fonttimääritykset.
*/

body{
	font-family: lato, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
    line-height: 30px;
    color: var(--text);
	background: var(--bg-primary);
}

h1{
	font-family: lato, sans-serif;
	font-weight: 800;
	font-style: normal;
	color: var(--title);
}

h2, h3, h4, .module-title-h2, .module-title-h3, .module-title-h4{
	font-family: lato, sans-serif;
	font-weight: 800;
	font-style: normal;
	color: var(--title);
}

.tumma h1, .tumma h2, .tumma h3, .tumma h4, .tumma .module-title-h2, .tumma .module-title-h3, .tumma .module-title-h4{
	color: var(--title-dark);
}

strong, b{
	font-family: lato, sans-serif;
	font-weight: 700;
	font-style: normal;
}

a{
	color: var(--link);
}

a:hover{
	color: var(--link-hover);
}


a.painike, .painike a, a.apupalkki-painike, a .painike, .wpcf7 input.wpcf7-submit{
	color: var(--button);
	background: var(--button-bg);
	font-weight: 700;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
	text-decoration: none;
}

#sivutus a.next, #sivutus a.prev{
	display: inline-block;
	background:var(--button-bg);
	color: var(--button);
	font-weight: 700;
	text-decoration: none;
	padding: 10px 30px;
	-webkit-transition: background 300ms ease, border 300ms ease;
	transition:         background 300ms ease, border 300ms ease;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
}

#sivutus a.next:hover, #sivutus a.prev:hover, .wpcf7 input.wpcf7-submit:hover{
	background: var(--button-bg-hover);
	text-decoration: none;
	color: var(--button-hover);
}

a.painike:hover, a .painike:hover, .painike a:hover, a.apupalkki-painike:hover{
	background: var(--button-bg-hover);
	color: var(--button-hover);
}

a.nuolilinkki{
	background: url('../images/nuoli.svg') no-repeat left 5px;
	background-size: 20px 20px;
	display: inline-block;
	padding-left: 25px;
	color: var(--text);
	text-decoration: none;
	font-weight: 700;
}

a.nuolilinkki:hover{
	text-decoration: underline;
}

.tumma a.nuolilinkki{
	color: var(--text-dark);
}

.wpcf7 textarea{
	font-family: lato, sans-serif;
}

.wpcf7 input.wpcf7-submit{
	color: var(--button);
	background: var(--button-bg);
}

.wpcf7 input.wpcf7-submit:hover{
	background: var(--button-bg-hover);
	color: var(--button-hover);
}

footer{
	background-color: var(--tumma);
	color: var(--text-dark);
}

footer ul a{
	color: var(--link);
}

.footer-linkit a{
	color: var(--link);
}

.footerpalstat a{
	color: var(--link);
}

.footer-linkit a:hover, .footerpalstat a:hover{
	color: #fff;
}

.footerpalstat .module-title-h4{
	color: var(--title-dark);
}

/* Raidat otsikoiden alle */

.otsikkopalkki-1 h2:after , .otsikkopalkki-1 .module-title-h2:after, .kuvanosto .module-title-h2:after {
    content: "";
    display: block;
	margin-left: auto;
	margin-right: auto;
    width: 60px;
    padding-top: 20px;
    border-bottom: 5px solid var(--turkoosi);
}

.otsikkopalkki h2:after , .otsikkopalkki .module-title-h2:after{
	content: "";
    display: block;
	margin-left: 0;
	margin-right: 0;
    width: 60px;
    padding-top: 20px;
    border-bottom: 5px solid var(--turkoosi);
}

#subhero h1{
	color: var(--title-dark);
}

#subhero h1:after{
    content: "";
    display: block;
	margin-left: 0;
	margin-right: 0;
    width: 60px;
    padding-top: 20px;
    border-bottom: 5px solid var(--tumma);
}

#intro-empty h1:after, #intro h1:after {
    content: "";
    display: block;
	margin-left: auto;
	margin-right: auto;
    width: 60px;
    padding-top: 20px;
    border-bottom: 5px solid var(--tumma);
}

.kuvanosto .module-title-h2:after{
	margin-left: 0;
	margin-right: 0;
}

#subhero{
	background: var(--turkoosi);
}

/* TAUSTAVÄRIT */

.perussisalto.tumma, .kuvanostot.tumma, .kuvallisetnostot.tumma{
	background: var(--tumma);
	color: var(--text-dark);
}

.perussisalto.harmaa, .kuvanostot.harmaa, .kuvallisetnostot.harmaa{
	background: var(--harmaa);
}

/*
TOIMINTAKEHOITE
*/

.toimintakehoitesisalto{
	background: var(--turkoosi);
	color: #fff;
}

.toimintakehoite a.painike, .toimintakehoite .painike a, .toimintakehoite a .painike{
	background: var(--tumma);
}

.toimintakehoite a.painike:hover, .toimintakehoite .painike a:hover, .toimintakehoite a .painike:hover{
	background: #fff;
	color: var(--tumma);
}