* {margin: 0; padding: 0px; box-sizing: border-box;}
html, body {position: relative; height: 100%; width: 100%; margin: 0px; padding: 0px; font-family: HNforTELUSSA400normal, Arial, sans-serif;}
div {vertical-align: top;}
h1, h6 {margin: 0px; padding: 0px;}

.container {display: block;}
.col {flex: 1;}
.card {
	position: relative;
	height: 100%;
	min-height: initial;
	padding: 25px;
	background-color: #fff;
	color: #666;
	transition: box-shadow 0.1s ease-in-out;
	border: none;
	box-sizing: border-box;
	box-shadow: none;
}

.head {position: relative; height: 80px; width: 100%; background-color: rgb(255,255,255); border-bottom: 1px solid rgb(178,185,191);}
	.head .headbox {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0px 20px; text-align: center;}
	.head span {font-size: 14px; color: rgb(65,69,71); letter-spacing: 0px;}
	
.body {position: relative; height: calc(100% - 160px); width: 100%; }
	.body .bodybox {position: relative; height: 100%; width: calc(100% - 50px);}
		.body .bodybox .card span {font-size: 25px; line-height: 18px; color: rgb(75,40,109);}
		.body .bodybox .linksbox {position: relative; width: 100%; margin: 50px 0px 20px 0px;}
			.body .bodybox .linksbox .link {display: block; position: relative; margin-bottom: 10px; padding: 2px 15px; text-align: center; font-size: 14px;}
			.body .bodybox .linksbox .link:not(:last-child) {border: none;}
			.body .bodybox .linksbox .link a {color: rgba(43,128,0,1.00); text-decoration: none;}
			.body .bodybox .linksbox .link a:hover {color:rgb(31,92,9);}
			
.foot {position: relative; height: 80px; width: 100%; background-color: rgb(255,255,255); border-top: 1px solid rgb(178,185,191);}
	.foot .footbox {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0px 20px; text-align: center; line-height: 14px;}
	.foot span {font-size: 10px; color: rgb(65,69,71); letter-spacing: 0px;}

a.langlink {position: absolute; top: 5px; right: 5px; padding: 20px; font-size: 14px; color: rgb(43,128,0,1.00); text-decoration: none;}
a.langlink:hover {color: rgb(31,92,9);}
img.background {display: none;}
img.logo {margin: 20px 0px; width: 250px;}

a.buttonlink {
	display: block;
	position: relative;
	width: 100%; max-width: revert;
	margin: 20px -4px;
	padding: 2px;
	background-color: rgba(0, 0, 0, 0);
	opacity: 1;
	outline: none;
	border-radius: 36px;
	border-width: 2px;
	border-color: rgba(0, 0, 0, 0);
	text-decoration: none;
}
	a.buttonlink .buttondiv {
		height: 100%;
		min-width: 144px; max-width: 100%;
		padding: 11px 31px;
		background-color: rgba(43, 128, 0, 1.00);
		border-color: rgba(0, 0, 0, 0.00); border-width: 1px;
		border-top-left-radius: 32px;
		border-top-right-radius: 32px;
		border-bottom-right-radius: 32px;
		border-bottom-left-radius: 32px;
		transition: background-color 200ms, border-color 200ms;
		pointer-events: none; flex-direction: row; justify-content: center;
	}
	a.buttonlink:hover .buttondiv {background-color: rgb(31,92,9);}
		a.buttonlink .buttondiv div {
			color: rgba(255, 255, 255, 1.00);
			font-weight: bold; font-size: 16px; line-height: 24px;
			text-align: center;
			text-decoration-line: none;
			text-decoration-style: solid;
			pointer-events: none;
		}

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
	.body .bodybox {position: relative; height: revert; min-width: 80%; top: 20px; }
		.body .bodybox .col:nth-child(2) {display: none;}
	.body .bodybox .card span {font-size: 30px; line-height: 32px;}
	a.buttonlink {display: block; width: 100%;}
		a.buttonlink .buttondiv div {font-size: 1.5rem; line-height: 2rem;}
	.body .bodybox .linksbox {margin-bottom: 50px;}
	.body .bodybox .linksbox .link {display: block; margin-bottom: 20px; text-align: left;}
	.body .bodybox .linksbox .link a {padding: 10px 5px;}
	
	.foot .footbox {width: revert; padding: revert; line-height: revert;}
	.foot span {font-size: 12px;}
	.card {height: revert; max-width: 800px; margin: 0 auto; padding: 50px 50px 20px 50px; box-shadow: rgba(0,0,0,0.03) 0px 12px 12px 0px; border-color: rgb(227,230,232); border-radius: 12px; border-width: 1px; border-style: solid;}
	img.background {display: block; position: absolute; top: -10%; height: 120%; right: 0; z-index: -1;}
}

@media screen and (max-width: 768px) and (orientation: landscape) {.body {height: 100%;} }
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
	body {overflow: auto;}
	.body {height: revert;}
	.body .bodybox {top: 0px; width: 100%;}
	.card {width: 100%; max-width: revert; border: none;}
	.body .bodybox .linksbox .link a {padding: 10px 5px;}
}

@media screen and (min-width: 1024px) and (max-width: 1024px) {
	.body .bodybox {max-width: 1000px; margin: 0 auto;}
	.body .bodybox .linksbox {margin-top: 35px;}
	.body .bodybox .linksbox .link {margin-bottom: 20px;}
	.body .bodybox .linksbox .link a {padding: 10px 5px;}
}
@media screen and (min-width: 1025px) {
	.container {display: flex; gap: 1px;}
	.card {padding: 50px 25px 25px 25px;}
	.head .headbox {width: revert;}
	.body {height: calc(100% - 160px);}
	.body .bodybox {height: revert; top: 50%; left: 50%; transform: translate(-50%,-80%); max-width: 1200px;}
	.body .bodybox .card span {font-size: 30px; line-height: 32px;}
	a.buttonlink {display: inline-flex; width: fit-content; max-width: calc(100% + 8px);}
	.body .bodybox .linksbox .link {display: inline-block; margin-bottom: revert;}
	.body .bodybox .linksbox .link:not(:last-child) {border-right: 1px solid rgb(178,185,191);}
	.foot .footbox {width: revert; padding: revert; line-height: revert;}
	.foot span {font-size: 12px;}
	.card {height: revert; padding: 50px 50px 20px 50px; box-shadow: rgba(0,0,0,0.03) 0px 12px 12px 0px; border-color: rgb(227,230,232); border-radius: 12px; border-width: 1px; border-style: solid;}
	img.background {display: block; position: absolute; top: -10%; height: 110%; right: 0; z-index: -1;}
}