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

body { font-size:20px; font-size:2.0vh; }

#tausta{
background-image:url("graf/jonelecTaustaMobi.jpg"); background-size:100%;
width:100%;
}

#taustaPalv{
background-image:url("graf/jonelecTaustaPalvMobi.jpg"); background-position:0% -10%; background-position:0vh -19vh;
}

#taustaRef{
background-image: url("graf/jonelecTaustaRefMobi.jpg"); background-position:0% -10%; background-position:0vh -15vh;
}

#taustaYht{
background-image: url("graf/jonelecTaustaYhtMobi.jpg"); background-position:0% -10%; background-position:0vh -19vh;
}


#aloitusValinnat{ display:block; width:100%; }
#aloitusValinnat div{ /* width:100%; */ }
#aloitusValinnat font{ display:none; }


#logoTausta { margin:0px; position:relative; top:-20px; left:70px; top:-2.5vh; left:12.0vh; display:inline-block; width:70%; width:38.0vh; min-width:220px; }
#logoTausta div{ text-align:left; margin:0px; line-height:0.5vh; width:60%; position:relative; top:30px; left:40px; top:4.0vh; left:5.0vh; }
#logoTausta div span{ padding-top:2px; padding-left:10px; font-size:1.5vh; }

#valinnat{ display:none; }
.valinta,.kielivalinta{ background-color:#001334; margin:0px; border:solid 1px #001334; }
.kielivalintojenErotin,#viiva{ width:100%; display:block; margin:0px;  }
#valikkoNuoliAlue{ border:solid 0px red; position:relative; height:inherit; float:right; right:6.0vh; display:flex; align-items:center; justify-content:center; }
#valinnat img{ margin-top:20px; }


.valikkoNuoli {
  border: solid #fff;
  display: inline-block;
  border-width: 0 4px 4px 0; 
  padding: 3px; padding: 0.5vh;
  transition: all 0.7s;
  transition-timing-function: ease-in-out;
}

.alas{ transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.ylos{ transform: rotate(225deg); -webkit-transform: rotate(225deg); }

#symboliSelite{ width:90%; }
#symboliSelite div{ font-size:16px; font-size:2.0vh; }

#symboliRivi{
    top:15px;
    top:3.0vh;
    height:10.0vh;
    max-height: 170px;
    width:300px;
    width:43.0vh;
   margin-bottom:4.5vh;
}

.symboliTausta {
    border: solid 0.3vh #274270;
    margin-left: 7px;
    margin-right: 7px;
    margin-left: 0.8vh;
    margin-right: 0.8vh;
    cursor: auto;
}
.symboliTausta:hover{ border: solid 0.3vh #fff; }

.symboliTausta img {
    height: 70px;
    height: 6.0vh;
    max-height: 100px;
    margin: 10px;
}

#keskialueenTekstit, #keskialueenVaihtuvatTekstit {
    font-size: 2.0vh;
    line-height: 2.6vh;
    text-shadow: 1px 1px 1px #000;
    padding-left: 20px; padding-right: 20px;
}
#keskialueenTekstit span {
    font-size: 22px;
    font-size: 2.8vh;
    text-shadow: 2px 2px 1px #000;
    line-height: 28px;
    line-height: 3.8vh;
}

#rullaaAlas img {
    margin-top:3.0vh;
    max-height: 25px;
    height: 5.0vh;
}

/***** LIITTEET / PDF / JNE *****/

#keskialueenTekstit .liitteet,#keskialueenVaihtuvatTekstit .liitteet{ font-size:14px; font-size:1.9vh; }
#keskialueenTekstit .liitteet span,#keskialueenVaihtuvatTekstit .liitteet span{ font-size:16px; font-size:2.0vh; line-height:3.2vh; }
#keskialueenTekstit .liitteet hr,#keskialueenVaihtuvatTekstit .liitteet hr{ width:70%; }
.dokumentit{ margin-bottom:10px; }
.dokumentit img{ height:28px; }


/*** VAIHTUVA KUVA-ALUE ***/

#sliderArea{
padding-bottom:10px;
padding-bottom:0.5vh;
}

#sliderContainer{
width:65%; height:40.0vh; margin-bottom:30px; 
}

.slider div{
padding:0px; margin-top:10px;
}

.sliderVas{
float:none;
text-align:left;
}

.sliderVas img{
border:solid 2px #001334; border:solid 0.4vh #001334;
border-radius:8px; border-radius:1.0vh;
max-height:180px;
height:20.0vh;
}

.sliderOik{
float:none;
font-size:16px; font-size:1.7vh;
line-height:20px; line-height:2.3vh;
height:auto;
max-height:400px;
}

.sliderOik span{ font-size:20px; font-size:2.2vh; line-height:30px; line-height:4.0vh; }

.bx-wrapper,.bx-viewport{ height:40.0vh !important; width:101%; }
.bx-wrapper .bx-prev{ left:-40px; left:-7.0vh; }
.bx-wrapper .bx-next{ right:-40px; right:-7.0vh; }
.bx-wrapper .bx-controls-direction a { top:32%; }

/*** ALAOSA & TULEVAT ***/

#tulevatSisalto{ padding:0px;max-width:78%; }
#yhteystiedot{ text-align:center; width:90%; }
#osoitteet{ border:solid 0px red; text-align:left; width:53%; }
#yhteyskuva{ margin-left:30px; margin-left:8.0vh; }
#tunnustukset{ margin:30px; margin:5.0vh; margin-bottom:0px; display:block; }
img.tunnustus{ height:13.0vh; margin-bottom:10px; }

/***** REFERENSSIT *****/

#keskitys{ width:95%; }

.refOts{ max-width:95%; height:50px; height:6vh;}
.refOtsTxt{ padding:1.6vh; font-size:2.2vh; }

.refSisalto{ display:inline-block; background-color:#042f53; margin:0px; width:95%; float:none; }
.refSisaltoOik,.refSisaltoOikP{ display:none; }
.refSisaltoVas,.refSisaltoVasP{ margin:0px; float:none; height:27.0vh; overflow:hidden; }

.referenssinKuvat{ margin:3.0vh; display:block; border:solid 0px #004080; width:34.0vh; max-height:26.0vh; }
.refSisaltoVas .referenssinKuvat img,.refSisaltoVasP .referenssinKuvat img{ border-radius:5px; max-width:100%;max-height:100%; }

.refTekstiAlue span{ font-size:2.2vh; line-height:3.5vh; }
.refTekstiAlue{ display:block; margin-left:2.8vh;margin-right:2.8vh; padding-right:3.0vh; margin-top:2.5vh; margin-bottom:2.5vh; font-size:1.7vh; height:16.0vh; overflow:auto; }

}