@import url('https://fonts.googleapis.com/css2?family=Arimo&family=Lobster&family=Montserrat:wght@700&&family=Roboto+Mono&display=swap');

/* mobile < 820px < desktop */

body,html {
	margin:0px; padding:0px;
}
body {
	font-family:Arimo;
	font-size:16px;
	background-color:#ffffff;
}

.form_inputs div:nth-of-type(1),
.form_inputs div:nth-of-type(2) {
	display:none;
}

#wrapper { max-width:1200px; margin-left:auto; margin-right:auto; }

div.tekstia, div.kuva div.credits {
	margin-left:2%;
	margin-right:2%;
}
@media (max-width:820px) {
	div.tekstia, div.kuva div.credits {
		margin-left:4%;
		margin-right:4%;
	}
}

p.ingressi {
	font-weight:bold;
}

header { text-align:center; }
nav { margin-top:15px; }
@media (max-width:820px) {
	nav { line-height:160%; }
}

#ehdota {
	float:right;
	border-bottom:2px solid #0000E0;
	text-decoration:none;
}

h1 {
	line-height:120%;
}
h1 span.name {
	font-family: 'Lobster', cursive;
	font-size:50px;
	color:#FF8000;
	line-height:120%;
}
h1 span.tagline {
	font-family: 'Lobster', cursive;
	font-size:25px;
	color:#484848;
}
@media (max-width:820px) {
	h1 span.tagline {
		font-size:22px;
	}
}

body.valintatilanne h1 {
	font-family: 'Montserrat', sans-serif;
	font-size:32px;
	color:#484868;
}
body.valintatilanne h2 {
	font-family: 'Montserrat', sans-serif;
	font-size:20px;
	color:#484868;
}
body.valintatilanne h3 {
	font-family: 'Montserrat', sans-serif;
	font-size:18px;
	color:#484868;
}


a {
	color:#0000E0;
}
td.vaihtoehto { font-size:21px; }
div.uusin_perustelu { opacity:0; box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 10px 0px; margin-bottom:45px; }


hr {
	width:40%;
	border:2px solid #F47A00;
	margin-top:40px;
	margin-bottom:25px;
}



.zoom {
  transition: transform .5s; /* Animation */
}
.zoom:hover {
  transform: scale(1.04);
}

div.kuva img {
	width:100%;
	max-width:800px;
}
div.kuva div.credits {
	color:#777;
	font-size:12px;
	text-align:left;
	padding-left:1px;
}
@media (min-width:820px) {
	div.kuva {
		text-align:center;
		background-color:#444;
		padding:20px 0px 18px 0px;
		min-height:555px;
	}
	div.kuva div.credits {
		max-width:800px;
		margin-left:auto;
		margin-right:auto;
	}
	div.kuva img {
		border-radius:5px;
	}
}


img.pikkukuva {
	border-radius:5px;
	float:left;
	margin-top:5px;
	margin-right:32px;
}
@media (max-width:600px) {
	img.pikkukuva {
		float:none;
		margin-right:0px;
	}
}


p,ul,div.perusteluteksti {
	line-height:140%;
}
@media (max-width:820px) {
	p,div.perusteluteksti {
		line-height:160%;
	}
}

table {
	border-collapse:collapse;
	margin:0px;
}
td {
	padding:0px;
}

#perustelut {
	margin-top:28px;
}
.toimintahairio {
	color:#ff0000;
	margin:5px 0px 7px 0px;
}
.tarkista {
	display:inline-block;
	background-color:#FFFFBB;
	border-radius:10px;
	border:1px solid #c0c0c0;
	padding:4px 8px 4px 8px;
	margin:5px 0px 7px 0px;
}

div.vaihtoehto0 {
	width:95%;
}
div.vaihtoehto1,div.vaihtoehto2 {
	width:90%;
}
div.vaihtoehto0,div.vaihtoehto1,div.vaihtoehto2 {
	border:2px solid #f0f0f0;
	border-radius:10px;
	margin-bottom:30px;
}
#uusi_perustelu_form_kehys {
	width:95%;
	padding-top:11px;
}
#uusi_perustelu_form_kehys textarea {
	font-family: 'Roboto Mono', monospace;
	border:2px solid #f0f0f0;
	border-radius:10px;
	width:100%;
	height:150px;
	box-sizing: border-box; /* https://stackoverflow.com/questions/37727843/textarea-width-issue-in-div/37727999 */
	padding:15px;
}
#uusi_perustelu_form_kehys #laheta_perustelu {
	border: 1px solid #1F7225;
	border-radius: 10px;
	padding: 10px 20px 10px 20px;
	background-color: #227B28;
	background-image: linear-gradient(to bottom,#35BF40,#227B28);
	color: #ffffff;
	font-weight: bold;
	font-size: 15px;
	margin-top: 10px;
}
#uusi_perustelu_form_kehys #laheta_perustelu:hover {
	background-image: linear-gradient(to bottom,#227B28,#35BF40);
}

/*
div.vaihtoehto0 div.sisa {
	padding:15px 20px 15px 20px;
	overflow:hidden;
}
*/
div.vaihtoehto0 div.sisa, div.vaihtoehto1 div.sisa, div.vaihtoehto2 div.sisa {
	padding:30px 20px 20px 20px;
	overflow:hidden;
}
div.vaihtoehto1 {
	margin-right:auto;
}
div.vaihtoehto2 {
	margin-left:auto;
}

div.vaihtoehto0 div.valinta {
	position:absolute;
	border:2px solid #f0f0f0;
	padding:6px 10px 6px 10px;
	border-radius:10px;
	margin-top:-43px;
	background-image:url(gfx/checkmark2.png);
	background-repeat:no-repeat;
	background-position:center left;
	padding-left:40px;
}
div.vaihtoehto1 div.valinta, div.vaihtoehto2 div.valinta {
	position:absolute;
	border:2px solid #f0f0f0;
	padding:6px 10px 6px 10px;
	border-radius:10px;
	margin-top:-43px;
	background-image:url(gfx/checkmark2.png);
	background-repeat:no-repeat;
	background-position:center left;
	padding-left:40px;
}
div.vaihtoehto0 div.valinta {
	background-color:#fff;
}
div.vaihtoehto1 div.valinta, div.vaihtoehto1_palkki  {
	/* https://blog.mayesh.com/2021-pantone-color-of-the-year */
	background-color:#a6df4f; /* 9ecc41 D9F9FF FFFE9B FFFE6C FFF462 CEDE00  */
}
div.vaihtoehto2 div.valinta, div.vaihtoehto2_palkki {
	background-color:#ffb600; /* ffa600 FFFADF F3FD74 EDFD1F E3F315 F5DF4D  */
}

div.rajoitettu_nakyvyys {
	margin-top:8px;
	color:#a0a0a0;
	font-size:12px;
}



div.google-auto-placed {
	/* Lisätty 4.9.2022 11:05 */
	border-top: 40px solid #fff; /* margin-top:40px; */
	border-bottom: 40px solid #fff; /* margin-bottom:40px; */
}



footer {
	clear:left;
	margin-top:75px;
	border-top:5px solid #404040;
	color:#fffff;
	width:100%;
	padding-top:13px;
	padding-bottom:15px;
	line-height:160%;
}
footer a {
	margin-right:15px;
	color:#404040;
}













div.valikoima div.rivi, div.osa, div.sisa, div.osa_img_container { margin:0px; padding:0px; border:none; }
div.valikoima div.rivi { clear:left; }
div.valikoima div.rivi div.osa { float:left; width:49.5%; padding-bottom:1%; border:none; }
div.valikoima div.rivi div.osa:nth-child(1) {	margin-right:1%; }
div.valikoima div.rivi div.osa:nth-child(2) { margin-right:0px; }
div.valikoima div.osa img {	display:block; }
div.valikoima div.rivi div.osa div.sisa {	position:relative; overflow:hidden; }
@media (max-width:675px) { div.valikoima div.rivi div.osa {	float:none;	width:100%;	margin-right:0px;	margin-bottom:3%; } }
div.valikoima div.osa_img_container { padding-top:55%; background-color:#f0f0f0; }
div.valikoima div.osa_img_container img { width:100%; position:absolute; top:0px; left:0px; margin-top:-2%; }
div.valikoima div.title_link_container { background-image:url(/tyyli/gfx/bg_000000_opacity70.png); position:absolute; bottom:0px; left:0px; width:100%; display:block; }
div.valikoima div.title_link_container .sisa { padding:13px 13px 13px 13px; }
div.valikoima div.title_link_container .sisa a { display:block; font-size:20px; text-decoration:none; color:#ffffff; }




/* Checkmark style starts */
@-moz-keyframes dothabottomcheck {
  0% {
    height: 0;
  }
  100% {
    height: 23px;
  }
}
@-webkit-keyframes dothabottomcheck {
  0% {
    height: 0;
  }
  100% {
    height: 23px;
  }
}
@keyframes dothabottomcheck {
  0% {
    height: 0;
  }
  100% {
    height: 23px;
  }
}
@keyframes dothatopcheck {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: 55px;
  }
}
@-webkit-keyframes dothatopcheck {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: 55px;
  }
}
@-moz-keyframes dothatopcheck {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: 55px;
  }
}
input[type=radio] {
  display: none;
}

.check-box {
  height: 46px;
  width: 46px;
  background-color: #f0f0f0;
  border: 7px solid #fff;
  border-radius: 4px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}
.check-box::before, .check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: 9px;
  background-color: #1A5E1F;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: ' ';
  -webkit-transition: opacity ease .5;
  -moz-transition: opacity ease .5;
  transition: opacity ease .5;
}
.check-box::before {
  top: 33px;
  left: 18px;
  /* box-shadow: 0 0 0 5px #FEB618; */
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.check-box::after {
  top: 17px;
  left: 2px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

input[type=radio]:checked + .check-box,
.check-box.checked {
  border-color: #227B28;
}
input[type=radio]:checked + .check-box::after,
.check-box.checked::after {
  height: 23px;
  -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
  animation: dothabottomcheck 0.2s ease 0s forwards;
}
input[type=radio]:checked + .check-box::before,
.check-box.checked::before {
  height: 55px;
  -moz-animation: dothatopcheck 0.4s ease 0s forwards;
  -o-animation: dothatopcheck 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
  animation: dothatopcheck 0.4s ease 0s forwards;
}