/* HTML5 fixes */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

*{
  margin:0;
  padding:0;
}

html,body{
	min-height: 100vh;
}

body {
	background: #fff;
	color: #000;
	text-align: left;
	font: 17px/1.6 'Montserrat', sans-serif;
	border: 10px solid #98c21d;
	padding: 30px 0 0;
}

p{
	margin-bottom:10px;
}

h1, h2, h3{
	font: 700 60px/1.25 'Montserrat', sans-serif;
	margin:0;
	word-wrap:break-word;
}
h1{
	font-size: min(60px, 10vw);
	letter-spacing: -2px;
	text-shadow:2px 2px 2px #fff;
	font-weight: 400;
	color: #98c21d;
}
h1 span{
	font-size: min(30px, 5.8vw);
	display: block;
	letter-spacing: 0;
	color:#222;
	padding-top: 10px;
}

h2{
	font-size: min(34px, 5.8vw);
	margin: 6px 0;
}
h2 + p,
p + h2{
	margin-top: 1em;
}

h3{
	font-size: min(24px, 5vw);
	margin: 20px 0;
}
a{
	color:#03548F;
	border: none;
    outline: none;
}

a:hover{
	color:#EE7202;
}


a img{
	border:none;
}

img{
	max-width:100%;
	height:auto;
	border-radius: 10px;
}

ul{
	margin:10px 0 10px 25px;
}
li{
	margin-left:15px;
}
input, textarea, label, img, body,.latka{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.clear{
	clear:both;
}
.wrap{
	max-width:1200px;
	margin:0 auto;
	padding:0 5%;
	min-height:250px;
}
.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas: "text image";
	gap: min(50px, 5vw);
}
.grid-item {
	grid-column: span 1;
	opacity: 0;
	transition: opacity 0.5s;
}
.grid-item:nth-child(1){
	transition-delay: 0.2s;
}
.grid-item:nth-child(2){
	transition-delay: 0.6s;
}
.grid-item:nth-child(3){
	transition-delay: 0.4s;
}
.grid-item.kuva {
	grid-area: image;
	grid-row: 1 / 3;
}
.grid-item.buttons {
    grid-area: image;
    grid-row: 1 / 3;
    transition-delay: 0.8s;
    align-self: self-end;
    margin-bottom: 3em;
    z-index: 2;
}
body.ready .grid-item {
	opacity: 1;
}
#content{
	padding: 40px 0;
}
.border{
	border-top:3px solid #EE7202;
}
a.nappi, .button{
	font-size: min(22px, 5.5vw);
	margin-top: 30px;
	line-height: 1;
	font-weight: 700;
	padding: 15px 30px;
	/* margin-top: 10px; */
	background: #fff;
	border: 1px solid #98c21d;
	color: #98c21d;
	display: inline-block;
	text-shadow:none;
	text-decoration: none;
	border-radius: 5px;
	-webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    -o-transition: background 0.6s;
    transition: background 0.6s;
}
a.nappi:hover, .button:hover{
	text-decoration: none;
	background: #98c21d;
	color: #fff;
	box-shadow: inset 0px 0px 2px #fff;
}

#header{
	padding: 20px 0 0;
}
.kuva{
	position: relative;
}
.latka{
	position: absolute;
	top: 10%;
	left: 10%;
	width: min(200px, 40vw);
	height: min(200px, 40vw);
	box-shadow: inset 1px 1px 10px rgba(255,255,255,.5);
	background: linear-gradient(135deg, rgb(99 220 58 / 80%) 0%,rgb(85 180 47 / 80%) 29%,rgb(85 184 45 / 80%) 47%,rgb(58 184 39 / 80%) 75%,rgb(81 196 24 / 80%) 100%);
	border-radius: 50%;
	text-align: center;
	padding: min(40px, 6vw) min(10px, 2vw);
	text-decoration: none;
    transition: background 0.6s;
}
a.latka:hover, a .latka:hover{
	background: #333;
}
.latka h3{
	color: #fff;
}
.logot{
	text-align: center;
	margin:30px 0;
}
.logot img, .logot a{
	display: inline-block;
	margin:0 5px;
}
.logot a img{
	margin: 0;
}
#footer{
	background: #1E2D31;
	background: #E9E9E9;
	text-align: center;
	padding: 15px 0;
	margin-top: 25px;
}
.logo{
	max-width: min(300px, 50vw);
}
#copy{
	padding:3px;
}

.design{
	font-size: 13px;
	color: #ddd;
}
.design a{
	color: #ddd;
	text-decoration: none;
	border-bottom: 1px dotted #ddd;
}
.design a:hover{
	text-decoration: none;
	border-bottom: none;
}

@media screen and (max-width: 650px){
	body {
		font-size: 16px;
	}
	.grid {
		grid-template-columns: 1fr;
		grid-template-areas: "text";
	}
	.grid-item,
	.grid-item.kuva,
	.grid-item.buttons {
		grid-area: unset;
	}

}