* {
  padding: 0;
  margin: 0;
  transition: 0.8s;
  /*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
}

nav {
  color: #000;
  /*display: flex;*/
  /*justify-content: space-between;*/
  font-size: 16px;
  /*align-items: center;*/
  margin: 15px;
  width: 90vw;
  height: 200px;
  padding: 20px 5px;
  /*outline: dashed 1px black;*/
  
  /*transform: translate(30px, 0px);*/
  /*position: absolute;
  top: 60%;
  left: 50%;*/
  /* Setup */
  position: relative;
  /*background-color: #fff;*/
  /*height: 20vh;*/
}

nav .links {
  display: flex;
  justify-content: space-between;
  /*margin: auto;
  width: 80%;*/
  /* Center vertically and horizontally */
  position: absolute;
  top: 20%;
  left: 5%;
  margin: -25px 0 0 -25px; /* Apply negative top and left margins to truly center the element */
}

.links p a{
  padding: 5px;
  /*color: #033B81;*/
  color: #ffffff;
  text-decoration: none;
  /*word-wrap: break-word;*/
}

.links a:hover {
  color: #FFD800; /*C8C8C8 gray;*/
  text-decoration:  none;
}

#mobile-menu-btn {
  display: none;
}

.mobile-menu {
  color: #033B81;
  font-weight: 300;
  font-size: 17px;
  display: none;
  position: absolute;
  left: 20px;
  top:  17vw;
  height: calc(max(230px, 100% - 60px));
  max-width: calc(max(130px, 90% - 60px));
  /*width: calc(40vw - 40%);*/
  background-color: #FFF2BA; /* C0C0C0 */
  z-index: 1;
}

pre {
  font-size: 1em;
}

p.sivukuva {font-size: 1vw;} 

.row::after {
  margin-top: 3em;
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 10px;
}

.lomake_input {
  background-color: #fff; 
  color: #044C8C; 
  font-size: 1em;
  font-weight: bold; 
  font-family: arial;
}

td.c0 {height: 21px; width: 18%}
td.c1 {height: 34px; width: 48%}
td.c1b {font-size: 13px; padding-left: 30px; padding-bottom: 0px; padding-top: 1px; text-align: left}
td.c2 {padding-left: 30px; height: 21px; width: 18%}
td.c3 {padding-left: 0px; padding-right: 0px}
td.c4 {margin-left: auto; margin-right: auto; width: 100px}
td.lomake {padding: 5px 0 2px 0; width: auto; height:36px}
td.lomake_otsikko {height: 23px; background-color: #FFF}
td.lomake_sisenna {padding: 0 0 0 20px}

p.ajankoht_otsikko {margin-top: 13px; margin-left: 8px; margin-bottom: -0.4em; font: 1em Georgia, serif, arial,sans-serif; text-align: left}
p.ajankoht_teksti {margin-top: 15px; margin-bottom:0.5em; font: 13px Georgia, serif, arial,sans-serif; } /* padding: 0px 3px 0px 8px*/
p.ajankoht_pvm {margin-top: 5px; color: #CDCDCD; font: 11px bold arial,sans-serif }

h1.content_header { 
  margin-top: 5vh; margin-left: 2vh; 
  color: white; //#033B81;
  padding: 8px;
  background-color: #267F00; //#D6E9FF; 
  font: normal normal bold 15px  arial, sans-serif;
  border-top-left-radius:1em; border-bottom-right-radius:1em;
}
p.content_teksti { margin: 4vh; margin-left: 5vh; color: #033B81; font: normal normal normal 15px  arial, sans-serif;}

p.c1 {padding-left: 30px; padding-bottom: 10px; padding-top: 1px; text-align: left}
p.c1b {font-size: 13px; padding-left: 30px; padding-bottom: 2px; padding-top: 1px; text-align: left}
p.c2 {font: 15px arial,sans-serif; padding-left: 10px; padding-bottom: 1px; padding-top: 15px; text-align: center}
p.c3 {padding-left: 40px; padding-top: 5px; text-align: left}
p.c6 {padding-left: 10px; padding-bottom: 1px; padding-top: 5px; text-align: left}

/*div.et_pb_section.et_pb_section_0 {
    background-image: linear-gradient(180deg,rgba(2,59,126,0.8) 0%,rgba(2,59,126,0.0) 100%),url(/wp-content/uploads/2020/10/Joensuun-kataja-1.jpg)!important;
}*/

.common-image {
    height: 40vh;
    margin-bottom: 4vh;
}

.main-image {
  /*background-image: url("../img/menu/etusivu.png");*/
  background-image: linear-gradient(180deg,rgba(19,63,0.0) 0%,rgba(43,145,0,0.0) 100%),url(../img/menu/etusivu_small.png)!important;
  background-color: #cccccc;
  height: 58vh;
  /*height: calc(max(200px, 100vh - 100px));*/

  margin-bottom: 5em;
  background-position-x: 45%;
  background-position-y: 68%;
  background-repeat: no-repeat;
  background-size: auto; /* cover */
  position: relative; top: -50px; left: -15px; text-align: center;
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}

.main-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}

.historia-image {
  background-image: linear-gradient(180deg,rgba(19,63,0.0) 0%,rgba(43,145,0,0.0) 100%),url(../img/menu/historia.jpg)!important;
  background-color: #cccccc;
  height: 45vh;
  /*height: calc(max(200px, 100vh - 100px));*/
  margin-bottom: 3vh;
  /*background-position: center;*/
  background-position-x: 1%;
  background-position-y:  25%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; top: -50px; left: -15px; text-align: center;
  /*background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}

.historia-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}

.saannot-image {
  background-image: linear-gradient(180deg,rgba(19,63,0.0) 0%,rgba(43,145,0,0.1) 100%),url(../img/menu/saannot.jpg)!important;
  background-color: #cccccc;
  height: 45vh;
  /*height: calc(max(200px, 100vh - 100px));*/
  margin-bottom: 3vh;
  /*background-position: center;*/
  background-position-x: 1%;
  background-position-y:  10%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; top: -50px; left: -15px; text-align: center;
  /*background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}

.saannot-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}

.jasenyys-image {
  background-image: linear-gradient(180deg,rgba(19,63,0.0) 0%,rgba(43,145,0,0.1 ) 100%),url(../img/menu/jasenyys.jpg)!important;
  background-color: #cccccc;
  height: 45vh;
  /*height: calc(max(200px, 100vh - 100px));*/
  margin-bottom: 3vh;
  /*background-position: center;*/
  background-position-x: 1%;
  background-position-y: 20%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; top: -50px; left: -15px; text-align: center;
  /*background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}

.jasenyys-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}

.metsastys-image {
  background-image: linear-gradient(180deg,rgba(19,63,0.0) 0%,rgba(43,145,0,0.1) 100%),url(../img/menu/metsastys.jpg)!important;
  background-color: #cccccc;
  height: 45vh;
  /*height: calc(max(200px, 100vh - 100px));*/
  margin-bottom: 3vh;
  /*background-position: center;*/
  background-position-x: 1%;
  background-position-y:  10%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; top: -50px; left: -15px; text-align: center;
  /*background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}

.metsastys-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}
.maanomistajat-image {
  background-image: linear-gradient(180deg,rgba(19,63,0.0) 0%,rgba(43,145,0,0.1) 100%),url(../img/menu/maanomistajat.jpg)!important;
  background-color: #cccccc;
  height: 45vh;
  /*height: calc(max(200px, 100vh - 100px));*/
  margin-bottom: 3vh;
  /*background-position: center;*/
  background-position-x: 1%;
  background-position-y:  10%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; top: -50px; left: -15px; text-align: center;
  /*background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}

.maanomistajat-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}
.yhteystiedot-image {
  background-image: linear-gradient(180deg,rgba(19,63,0.0) 0%,rgba(43,145,0,0.0) 100%),url(../img/menu/yhteystiedot.png)!important;
  background-color: #cccccc;
  height: 35vh;
  /*height: calc(max(200px, 100vh - 100px));*/
  margin-bottom: 5vh;
  /*background-position: center;*/
  background-position-x: 5%;
  background-position-y: 45%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; top: -50px; left: -15px; text-align: center;
  /*background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}

.yhteystiedot-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}

.video-container {
    height: 400px;
    width: 400px;
    position: relative;
}

.video-container video {
  /*width: 100%;*/
  height: 65vh; /*height: 100%;*/
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  font-size: 22px;
  z-index: 1;
  position: relative;
  text-align: center;
  color: #00ff00;
  padding: 10px;
}

.maja-image {
  background-image: linear-gradient(180deg,rgba(19,63,0.0) 0%,rgba(43,145,0,0.0) 100%),url(../img/menu/majasisalta.png)!important;
  background-color: #cccccc;
  height: 45vh;
  /*height: calc(max(200px, 100vh - 100px));*/
  margin-bottom: 5vh;
  /*background-position: center;*/
  background-position-x: 15%;
  background-position-y: 45%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; top: -50px; left: -15px; text-align: center;
  /*background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}

.maja-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}

.saalis-image {
  background-image: linear-gradient(180deg,rgba(19,63,0,1) 0%,rgba(43,145,0,0.7) 100%),url(../img/menu/palaute.png)!important;
  background-color: #cccccc;
  height: 45vh;
  /*height: calc(max(200px, 100vh - 100px));*/
  margin-bottom: 5em;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 35%;
  background-position-y: 45%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; top: -50px; left: -15px; text-align: center;
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}


.saalis-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}


.palaute-image {
  background-image: linear-gradient(180deg,rgba(19,63,0,10) 0%,rgba(43,145,0,0.4) 100%),url(../img/menu/palaute.png)!important;
  background-color: #cccccc;
  height: 45vh;
  /*height: calc(max(200px, 100vh - 100px));*/
  margin-bottom: 5em;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 35%;
  background-position-y: 45%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; top: -50px; left: -15px; text-align: center;
  opacity: 0.98;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}


.palaute-image:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 120%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -99;
}

.joulu-image {
  background-image: url("../img/tausta/joulu4small400.jpg");
  background-color: #fff;
  height: 35vh;
  margin-bottom: 5vh;
  background-position-x: -5em;
  background-position-y: -5em;
  background-repeat: no-repeat;
  background-size: initial;
  position: relative;
  opacity: 0.99;
  filter: alpha(opacity=98); /* For IE8 and earlier */
}

.main-text {
  /*font-family: 'Karla' !important;*/
  font-family: "Fjalla One",sans-serif;
  /*font-style:italic !important;*/
  /*text-transform: none !important;*/
  text-transform: uppercase;
  letter-spacing: 6px;
  text-align: left;
  font-weight: 100 !important;
  color: #ffffff;
  font-size: 25px;
  /*text-align: center;*/
  margin: 2.5vw;
  position: relative;
  top: 45%;
  left: 35%;
  /*transform: translate(-5%, -50%);*/
  z-index: -1;
}

.main-text h1 {
  font-size: 35px;
}
.main-text h2 {
  font-size: 20px;
}

.main-text h3 {
   font-size: 15px;
   text-transform: lowercase;
  }

img.menu-logo {
  /*display: flex;
  justify-content: space-between;*/
  width: 150px; 
  height: auto; margin: 2vw; padding: 2vw;
  /*position: absolute;*/
  /*transform: translate(0px, 40px);*/
  display: block;
}
img.logo2 {border: 0; width: 5em; height: auto; margin: 0.2em; padding: 0.2em;}

.menu-text {
  /*font-family: 'Karla' !important;*/
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  text-transform: none !important;
  /*font-weight:100 !important;*/
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  position: absolute;
  transform: translate(25px, 30px);
}

h3.nimi {
  font-family: 'Brush Script MT','Snell Roundhand','Bradley Hand' !important;
  font-style:normal !important;
  font-size: 0.9em;
}

h1.ui-state-highlight { font-size: 13px; }

div.exPanel { margin-left:  5%; width:  95%; font-size: 1vw; }
.lineborder { font-size: 12px; }

.header {
  background-color: #ffffff; /* #9933cc */
  color: #000000; /* #ffffff */
  padding: 15px;
}

.kisalistaus {
  font-size: 13px;
  padding-top: 0.5em;
  margin-top: 1em;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-30 {width: 30%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%; min-width: 201px; position: relative;
  z-index: 1;}
.col-50 {width: 50%; min-width: 201px}
.col-6 {width: 54.16%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* ----------------------------------------------------*/
@media screen and (max-width: 980px) {

  .main-image {
    height: 65vh;
  }

  .common-image {
    height: 45vh;
    margin-bottom: 1vh;
  }

  .video-container {
    height: 250px;
    width: 250px;
    position: relative;
  }
  .video-container video {
    /*width: 100%;*/
    height: 30vh; /*height: 100%;*/
    position: absolute;
    object-fit: cover;
    z-index: 0;
  }

  .col-5 {margin-top: 10em; width: 41.66%; min-width: 201px; position: relative;
  z-index: 1;}
  .col-50 {width: 50%; min-width: 201px}
  .col-6 {margin-top: 10em; width: 54.16%; }

  pre {
      font-size: 1em;
  }

  /*nav .links {
    left: 10%;
  }*/

  .lineborder { font-size: 11px; }
  p.ajankoht_teksti { font-size: calc(15px + 6 * ((100vw - 980px) / 680)); }
  p.ajankoht_pvm { font-size: calc(11px + 6 * ((100vw - 980px) / 680)); }
  
  .main-text { 
    top: 50%;
    left: 25%;
  }
  .main-text h1 { 
    font-size: calc(35px + 6 * ((100vw - 980px) / 680));
  }
  .main-text h2 { 
    font-size: calc(20px + 6 * ((100vw - 980px) / 680));
  }
  .main-text h3 { 
    font-size: calc(16px + 6 * ((100vw - 980px) / 680));
    text-transform: lowercase;
  }

  p.content_teksti { font-size: calc(15px + 5 * ((100vw - 980px) / 680)); }
  .c1b { font-size: calc(13px + 6 * ((100vw - 980px) / 680)); }
  h1.content_header { font-size: calc(15px + 10 * ((100vw - 980px) / 680)); }

  h1.ui-state-highlight {
    font-size: calc(13px + 6 * ((100vw - 980px) / 680));
  }

  .kisalistaus {
    font-size: calc(13px + 6 * ((100vw - 980px) / 680));
    padding-top: 0.5em;
    margin-top: 1em;
  }
  img.menu-logo {width: calc(100px + 6 * ((100vw - 980px) / 680)); }

  /*nav {
    font-size: calc(12px + 6 * ((100vw - 1080px) / 680));
  }*/
}

@media screen and (max-width: 979px) {

  nav .links {
    left: 7%;
  }

}

/* ----------------------------------------------------*/
@media only screen and (max-width: 780px) {

  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }

  pre {
      font-size: 1em;
    }

  .lineborder { font-size: 9px; }
  p.ajankoht_teksti { font-size: calc(15px + 6 * ((100vw - 670px) / 680)); }
  p.ajankoht_pvm { font-size: calc(11px + 6 * ((100vw - 670px) / 680)); }
  
  .common-image {
    height: 35vh;
    margin-bottom: 1vh;
  }

  .main-text { 
    top: 50%;
    left: 25%;
  }

  .main-text h1 { 
    font-size: calc(25px + 6 * ((100vw - 670px) / 680));
    left: 20%;
  }

  .main-text h2 { 
    font-size: calc(15px + 6 * ((100vw - 670px) / 680));
    left: 20%;
  }

  .main-text h3 { 
    font-size: calc(12px + 6 * ((100vw - 670px) / 680));
    text-transform: lowercase;
    left: 20%;
  }

  p.content_teksti { font-size: calc(15px + 5 * ((100vw - 670px) / 680)); }
  .c1b { font-size: calc(13px + 6 * ((100vw - 670px) / 680)); }

  h1.content_header { 
    /*font-size: calc(15px + 6 * ((100vw - 670px) / 680)); */
    font-size: calc(1rem + 1vw);
  }

  h1.ui-state-highlight {
    font-size: calc(13px + 6 * ((100vw - 670px) / 680));
  }
  
  .kisalistaus {
    font-size: calc(13px + 6 * ((100vw - 670px) / 680));
    padding-top: 0.5em;
    margin-top: 1em;
  }

  img.menu-logo {
    /*transform: translate(-40px, 40px);*/
    width: calc(80px + 6 * ((80vw - 620px) / 680));
    /*margin-right: 5vw;*/
    left: -20px;
  }

  li.l0 { font-size: 9px; }
  
  .lomake_input {
    background-color: #fff; 
    color: #044C8C; 
    height:  1em; 
    font-size: 1em; 
    font-weight: bold; 
    font-family: arial;
  }

  .lomake_vercode  {
    background-color: #fff; 
    color: #044C8C; 
    height:  1em; 
    font-size: 1em; 
    font-weight: bold; 
    font-family: arial;
  }

/* TODO */
  #mobile-menu-btn {
    color: #ffffff;
    display: block;
    cursor: hand;
    /*position: relative; top: -10px; right: calc(-190px + 6 * ((100vw - 670px) / 680));*/
    /*transform: translateX(35);*/
    transform: translateX(35px);
  }

  /*nav {
    font-size: calc(12px + 6 * ((100vw - 980px) / 680));
  }*/
  
  nav p {
    display: none;
  }

  .mobile-menu > p:active > a,
  .mobile-menu > p:hover > a {
    background-color: yellow;
    text-decoration:  underline;
  }

  .mobile-menu a {
    color: #033B81;
    text-decoration: none;
  }

  .mobile-menu {
    display: none;
    width: 35vw;
    min-width: 140px;
    font-size: calc(17px + 6 * ((100vw - 480px) / 680));
    flex-direction: column;
    justify-content: space-around;
    align-items: right;
  }
}

@media only screen 
and (max-width: 480px) {

  img.menu-logo {
    /*display: none;*/
    width: 60px;
    height: auto; margin: 2vw; padding: 2vw;
    position: absolute;
    /*transform: translate(130px, -20px);*/
    transform: translate(5px, 35px);
  }

  .video-container {
    height: 250px;
    width: 250px;
    position: relative;
  }
  .video-container video {
    /*width: 100%;*/
    height: 35vh; /*height: 100%;*/
    position: absolute;
    object-fit: cover;
    z-index: 0;
  }

  .col-5 {margin-top: 10em; width: 41.66%; min-width: 201px; position: relative;
  z-index: 1;}
  .col-50 { width: 50%; min-width: 201px;}
  .col-6 {margin-top: 10em; width: 54.16%;}
  

  .mobile-menu {
    top:  80px;
    left: 0px;
  }

  .main-text {
   top: 45%;
   left: 100px;
  }

  .main-text h1 {
   font-size: calc(19px + 6 * ((80vw - 670px) / 680));
   left: 30%;
  }

  .main-text h2 {
   font-size: calc(15px + 6 * ((80vw - 670px) / 680));
   left: 30%;
  }

  .main-text h3 {
   font-size: calc(12px + 6 * ((80vw - 670px) / 680));
   left: 30%;
  }

}

@media only screen 
and (min-width: 481px)
and (max-width: 979px)
and (min-device-height: 550px) 
and (orientation : portrait) {
  
  .main-text {
    font-size: 17px; 
    top: 35%;
    left: 30%;
  }

  .main-image2 {
    height: 65vh;
  }

  .video-container {
    height: 250px;
    width: 250px;
    position: relative;
  }
  .video-container video {
    /*width: 100%;*/
    height: 30vh; /*height: 100%;*/
    position: absolute;
    object-fit: cover;
    z-index: 0;
  }

  .col-5 {margin-top: 10em; width: 41.66%; min-width: 201px; position: relative;
  z-index: 1;}
  .col-50 { width: 50%; min-width: 201px;}
  .col-6 {margin-top: 10em; width: 54.16%; min-width: 201px;}
  
  .suksienvoitelu-image
   {
    height: 60vh;
  }

  img.menu-logo {
    max-width: calc(max(130px, 30% - 20vw));
    height: auto; margin: 2vw; padding: 2vw;
    position: absolute;
    transform: translate(20px, 35%);
  }

}

@media only screen 
and (max-width: 980px)
and (max-device-height: 580px) 
and (orientation : landscape) {

   .main-text {
   font-size: 17px; 
   top: 35%;
   left: 30%;
  }

  .common-image {
    height: 60vh;
  }

  .main-image {
    height: 60vh;
  }

  img.menu-logo {
    max-width: calc(max(130px, 30% - 20vw));
    height: auto; margin: 2vw; padding: 2vw;
    position: absolute;
    transform: translate(20px, 30px);
  }

  .col-5 {margin-top: 10em; width: 41.66%; min-width: 201px; position: relative;
  z-index: 1;}
  .col-50 { width: 50%;  min-width: 201px;}
  .col-6 {margin-top: 10em; width: 54.16%;}
  
}

@media only screen 
and (min-device-width : 981px) 
and (max-device-width : 1500px)
and (max-device-height: 580px) 
and (orientation : landscape) { 

  .main-text {
   font-size: calc(25px + 6 * ((100vw - 780) / 580)); 
   top: 40%;
   left: 30%;
  }

  img.menu-logo {
    max-width: calc(max(130px, 80% - 50vw));
    height: auto; margin: 2vw; padding: 2vw;
    position: absolute;
    transform: translate(20px, 0px);
  }
}