body { /* gallerialle */
width: auto;
background-image: url("../images/mhbgnew.jpg");
background-attachment: fixed;
margin: 0;
}
.lang {
position: absolute;
margin-left: auto;
margin-right: auto;
}
.imgen {
position: relative; 
top: 445px; 
left: 924px;
width: 30px; 
height: auto;
}
.imgsv {
position: relative; 
top: 445px; 
left: 854px; 
width: 30px; 
height: auto;
}
header {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.navigation { /* main nav */
width: 100%;
margin-left: auto;
margin-right: auto;
height: auto;
background: linear-gradient(#1f2438, #12121a);
border-radius: 0px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.navigation-mobile { /* main nav mobile */
display: none;
background: linear-gradient(#1f2438, #12121a);
}
.mobile-menu{ /* small nav mobile */
font-size: clamp(90px, 4vw, 120px);
margin-top: 0px;
margin-bottom: 0px;
}
.collapsible, .ecollapsible, .elcollapsible { /* open menus: mobile, extended, language */
background: transparent;
color: white;
cursor: pointer;
border: none;
outline: none;
font-size: 24px;
font-family: Arial;
}
.grid-container-nav-m { /* mobile nav bar */
display: none;
}
.grid-item-nav-m a{ /* nav item */
color: white;
}
.grid-item-nav-m a:hover { /* nav item */
text-decoration: underline;
}
.grid-container-nav { /* nav bar */
display: grid;
grid-template-columns: 1fr 2fr 3fr 2fr 1fr 1fr;
height: auto;
text-align: center;
}
.grid-container-nav#en { /* en nav bar */
display: grid;
grid-template-columns: 2fr 2fr 2fr 2fr 1fr 1fr;
height: auto;
text-align: center;
}
.grid-item-nav, .grid-item-nav-main { /* nav bar item */
padding: 10px 0px 10px 0px;
color: white;
font-size: 24px;
font-family: Arial;
padding-top: 50px;
padding-bottom: 50px;
}
.grid-item-nav a{ /* nav item */
color: white;
}
.grid-item-nav a:hover { /* nav item */
text-decoration: underline;
}
.grid-container-nav-expand { /* nav bar expandable */
display: none;
background: linear-gradient(#1f2438, #12121a);
position: absolute;
padding-inline: 20px;
}
.grid-item-nav-e { /* nav bar item expandable */
padding: 10px 0px 10px 0px;
color: white;
font-size: 24px;
font-family: Arial;
padding-top: 10px;
padding-bottom: 10px;
}
.img-gc, .middle {
margin-left: auto;
margin-right: auto;
display: block;
}
.img-k { /* mm v2021 kehys */
	width: 50%;
	height: auto;
	display: inline-block;
	padding-bottom: 15px;
}
.desc-mb15	{ /* kehyskuville */
text-align: center;
width: 960px;
min-height: 30px;
color: black;
font-family: "Book Antiqua";
font-size: 20px;
background: white;
padding: 10px 0px 10px 0px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
}
.desc-k { /* kehyskuville teksti */
    text-align: left;
    width: 960px;
    min-height: 30px;
    color: black;
    font-family: "Book Antiqua";
    font-size: 20px;
    background: white;
    padding: 10px 0px 10px 0px;
    margin-bottom: 150px;
    margin-left: auto;
    margin-right: auto;
}
.topimg {
width: 960px;
margin-left: auto;
margin-right: auto;
height: auto;
margin-bottom: 0px;
margin-top: 0px;
display: block;
}
.content {
    background: linear-gradient(#FCFCFC, #DADADA);
    width: 100%;
    height: auto;
    overflow: auto;
    padding-top: 150px;
    padding-bottom: 150px;
}
.content-container {
    width: 960px;
    min-height: 295px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(#FCFCFC, #DADADA);
}
.grid-item-nav :any-link { /* gallery back link */
    text-decoration: none; 
    color: white;
}
a {
    text-decoration: none;
}
a:link {
    text-decoration: none;
}
.item-footer :any-link { /* footer link */
    text-decoration: none; 
    color: white;
}
.mb0 {
    margin-bottom: 0px;
}
h3 {
color: #666666;
font-family: Arial;
font-size: 28px;
padding: 5px 10px 5px 10px;
margin-top: 0px;
}
.center {
text-align: center;
}
.desc	{
text-align: center;
width: 960px;
min-height: 30px;
color: black;
font-family: "Book Antiqua";
font-size: 20px;
background: white;
padding: 10px 0px 10px 0px;
margin-bottom: 150px;
margin-left: auto;
margin-right: auto;
}
.sub-img {
width: 32%;
height: auto;
}
p {
font-size: 26px;
font-family: Arial;
padding: 5px 10px 5px 10px;
}
.center0 {
text-align: center;
margin-top: 0px;
}
.mb20 {
margin-bottom: 20px;
}
dl {
font-size: 18px;
font-family: Arial;
color: #20447B;
font-weight: normal;
margin-left: 0px;
}
dd {
padding: 3px 10px 3px 10px;
margin-left: 160px;
font-weight: normal;
}
dt {
padding-left: 10px;
}
.col {
background: linear-gradient(#1f2438, #12121a);
color: white;
cursor: pointer;
padding: 18px;
width: 960px;
border: none;
text-align: left;
outline: none;
font-size: 24px;
font-family: Arial;
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 50px;
}
.content-col {
display: none;
overflow: hidden;
margin-bottom: 100px;
background: linear-gradient(#FCFCFC, #DADADA);
}
footer {
    width: 100%;
}
.grid-container-3 { /* for footer */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: linear-gradient(#1f2438, #12121a);
    color: white;
    padding: 50px 0px 50px 0px;
}
.grid-item-footer { /* footer trio */
    font-size: 20px;
    padding: 10px 0px 10px 0px;
    color: white;
    font-family: Calibri;
}
.item-footer { /* footer item */
    padding: 20px 0px 20px 0px;
    text-align: center;
}
@media only screen and (max-width: 1200px) {
body {
margin: 0;
}
.imgen {
display: none;
}
.imgsv {
display: none;
}
.imgen-m {
float: right;
width: 50px;
}
.imgsv-m {
margin-right: 10px;
float: right;
width: 50px;
}
.lang {
position: unset;
}
.navigation{
display: none;
}
.navigation-mobile {
display: block;
width: 100%;
}
.grid-container-nav-m {
background: linear-gradient(#1f2438, #12121a);
}
.grid-item-nav-m {
font-family: Arial;
font-size: clamp(32px, 4vw, 49px);
padding: 10px;
text-align: left;
color: white;
}
.grid-item-nav-m:hover {
background: transparent;
color: white;
font-family: Arial;
font-size: clamp(32px, 4vw, 49px);
}
.content {
width: 100%;
}
.grid-container-4 {
grid-template-columns: auto auto;
}
.grid-item {
width: 99%;
height: 98%;
}
.grid-container-footer {
grid-template-columns: auto;
height: auto;
}
.grid-container-footer a:hover {
text-align: left;
text-decoration: underline;
}
.content {
display: block;
width: 100%;
height: auto;
float: none;
}
.content-container {
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
border: none;
border-radius: 0px;
background: linear-gradient(#FCFCFC, #DADADA);
}
.desc, .col, .front-img, .img-gc, .topimg, header {
    width: 100%;
}
.grid-item-1 {
margin: 0px;
padding: 0px;
}
.img-e-w {
max-width: none;
width: 100%;
height: auto;
}
.grid-item-footer {
font-size: 30px;
padding: 10px 0px 10px 0px;
}
.grid-container-footer {
grid-template-columns: auto;
height: auto;
}
}
@media only screen and (max-width: 600px) {
.mobile-menu{
font-size: clamp(120px, 4vw, 150px);
}
.grid-item-menu-m {
font-size: clamp(32px, 6vw, 58px);
padding: 20px 10px 20px 10px;
}
h3 {
font-size: clamp(32px, 6vw, 59px);
padding: 35px 10px 5px 10px;
}
.grid-item-footer {
font-size: clamp(32px, 6vw, 48px);
}
}