@font-face {
  font-family: "Goodfish";
  src: url("font/goodfishrg.eot");
  src: url("font/goodfishrg.eot?#iefix") format("embedded-opentype"),
    url("font/goodfishrg.otf") format("opentype"),
    url("font/goodfishrg.svg") format("svg"),
    url("font/goodfishrg.ttf") format("truetype"),
    url("font/goodfishrg.woff") format("woff"),
    url("font/goodfishrg.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

html{width:100%; height:100%;}
body{
border:solid 0px #fff;
width:100%; height:100%; margin:0px; padding:0px; color:#fff; font-family:Goodfish,Calibri,Arial; font-size:15px; font-size:2.0vh; letter-spacing:1px; 
background-color:#043a65;
}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0px; padding:0px;}
a {color:#fff; text-decoration:none;}
a:hover {color:#fff;}

#tausta{
background-image: url("graf/jonelecTausta2.jpg"); background-repeat: no-repeat; background-size:110%;
}

#taustaPalv{
background-image: url("graf/jonelecTaustaPalv.jpg"); background-repeat: no-repeat; background-size:100%; background-position:0% -10%; background-position:0vh -8vh;
}

#taustaRef{
background-image: url("graf/jonelecTaustaRef2.jpg"); background-repeat: no-repeat; background-size:100%; background-position:0% -10%; background-position:0vh -4.5vh;
}

#taustaYht{
background-image: url("graf/jonelecTaustaYht.jpg"); background-repeat: no-repeat; background-size:100%; background-position:0% -10%;
}

#eitaustaa{
background-image:none;
}


/***** YLÄOSA *****/

#ylaosanAlue{
position:relative; z-index:1000;
width:100%;
min-height:150px; 
height:250px; height:40.0vh;
border: solid 0px #fff;
}

#aloitusPalkki{
background-color:#001334;
position:relative; top:60px; top:8.0vh;
width:100%;
height:80px;
height:10.0vh;
z-index:1000;
}

#aloitusValinnat,#valinnat{
border:solid 0px #fff;
height:inherit;
display: flex;
align-items: center;
justify-content: center;
}

#logoTausta{
text-align:center;
border:solid 0px #fff;
background-image: url("graf/logoTausta2.png");
background-repeat: no-repeat;
background-size:contain;
max-width:564px; max-height:268px;
width:33.0vh;
height:16.0vh;
margin-right:5.0vh;
}

#logoTausta div{
margin-top:4.5vh;
line-height:0.5vh;
}
#logoTausta div span{
font-size:2.1vh;
margin-left:3.0vh;
color:#ddeeff;
}

#logoTausta img{
border:0px;
width:240px; width:25.0vh; height:auto;
}

.kielivalintojenErotin{
margin-left:10px;
margin-right:10px;
}

#viiva{
height:1px; width:50px; width:45.0vh;
background-color:#0f9fde;
box-shadow: 0px 0px 6px #91e0ec;
}

.valinta,.kielivalinta{
border:solid 0px #fff;
height:inherit;
margin:0px;
margin-left:10px;
margin-right:10px;
font-weight:bold;
text-align:center;
}

.valinta:hover,.kielivalinta:hover{ text-decoration: underline; }
#valinnat,.valinta,.kielivalinta{ height:auto; }
#valikkoNuoliAlue{ display:none; }
#valinnat img{ margin-left:10px; margin-left:0.7vh; border-radius:5px; }


/***** VARSINAINEN SIVUSISÄLTÖ *****/

#sisalto{
position:relative;
z-index:1;
}

#sisaltoNaytto{
border:solid 0px red;
position:relative;z-index:10;
background-color:#043a65;
width:100%;
min-height:950px;
display:none;
transition: all 1.2s;
}

#symboliSelite{
overflow:hidden;
opacity: 0;
display: flex !important;
align-items: center;
justify-content: center;
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top:-120px;
top:-13vh;
height:80px; height:10vh;
max-height:80px;
width:50%;
border-radius:8px;
border: solid 2px #274270;
background-color:#001334;
transition: all 1.2s;
transition-timing-function: ease-in-out;
}

.symboliSeliteFlash {
opacity: 1 !important;
}

#symboliSelite div{
position:absolute;top:-20vh;
border:solid 0px red;
text-align:center;
font-size:20px;
font-size:2.6vh;
margin:10px;
margin:3.0vh;
transition: all 0.8s;
}

.symboliSeliteText {
position:relative !important;
top:0 !important; 
}

#symboliRivi{
position:relative;
border: solid 0px #ff0000;
height:140px;
height:15.0vh;
max-height:170px;
width:600px; 
width:72.0vh; 
display: flex;
align-items: center;
justify-content: center;
}

.symboliTausta{
background-color:#001334;
border: solid 2px #274270;
border: solid 0.4vh #274270;
margin-left:15px; margin-right:15px;
margin-left:2.0vh; margin-right:2.0vh;
border-radius:8px;
cursor:pointer;
transition: all 0.7s;
transition-timing-function: ease-in-out;
}

.symboliTausta:hover { border: solid 3px #c7d5eb; border: solid 0.4vh #c7d5eb; }

.symboliTausta img{
height:120px;
height:10.0vh;
max-height:145px;
margin:10px;
border:0px;
}

/*
.sisaltoLeveaKuva{
position:relative; top:-100px; top:-10.0vh;
height:20vh;
width:100%;
overflow:hidden;
}

.sisaltoLeveaKuva img{
width:100%;
position:relative;top:-400px; top:-30.0vh;
}


#vaihtuvaSisalto{ text-align:center; }
 */

#keskialueenTekstit,#keskialueenVaihtuvatTekstit{
position:relative; z-index:-3;
font-weight:bold; font-size:2.8vh;
padding-left:100px; padding-right:100px; padding-left:12.0vw; padding-right:12.0vw;
}
#keskialueenTekstit{ text-align:center; text-shadow: 2px 2px 2px #000; text-shadow: 0.2vh 0.2vh 0.2vh #000; }
#keskialueenVaihtuvatTekstit{ z-index:100; }

#keskialueenTekstit span{ font-weight:bold; font-size:30px; font-size:4.0vh; text-shadow: 3px 3px 2px #000; line-height:36px; line-height:7.0vh; }

#rullaaAlas img{
padding:20px;
border:0px;
cursor:pointer;
max-height:40px;
height:8.0vh;
}


.erotinPallo{
border: solid 0px #ff0000;
display:inline-block;
border-radius:100%;
width:20px; height:20px;width:2.0vh; height:2.0vh;
margin-left:6px; margin-right:6px;
margin-left:0.9vh; margin-right:0.9vh;
margin-top:20px; margin-top:3.0vh;
margin-bottom:20px; margin-bottom:2.0vh;
background-color:#001334;
}


#keskialueenTayte{
width:100%;
height:200px;
height:25.0vh;
}


.tekstiAlue_otsikko,.tekstiAlue_otsikkoNaps{ font-size:26px; font-size:4.0vh; line-height:30px; line-height:7.0vh; }
.tekstiAlue_otsikkoNaps{ cursor:pointer; }

.tekstiAlue_teksti,.tekstiAlue_tekstiNaps{ font-size:20px; font-size:2.8vh; line-height:24px; line-height:3.4vh; }
.tekstiAlue_tekstiNaps{ display:none; }

.peruslinkki{ color:#87a6de; }
.peruslinkki:hover{ color:#ffffff; }


/***** GALLERIA *****/

.gallerianKuvat{ margin-top:20px; }
.gallerianKuvat img{ display:inline; max-width:250px; max-height:90px; border-radius:5px; border:solid 2px #004080; margin:5px; -webkit-box-shadow: 1px 1px 2px #004080; -moz-box-shadow: 1px 1px 2px #004080; box-shadow: 1px 1px 2px #004080; }
/* .gallerianKuvat img,.referenssinKuvat img{ display:inline; max-width:250px; max-height:90px; border-radius:5px; border:solid 2px #004080; margin:5px; -webkit-box-shadow: 1px 1px 2px #004080; -moz-box-shadow: 1px 1px 2px #004080; box-shadow: 1px 1px 2px #004080; } */


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


#keskitys{ width:120.0vh; text-align:left; }

.gallerianKuvat img{ display:inline; max-width:250px; max-height:90px; border-radius:5px; border:solid 2px #004080; margin:5px; -webkit-box-shadow: 1px 1px 2px #004080; -moz-box-shadow: 1px 1px 2px #004080; box-shadow: 1px 1px 2px #004080; }

.refOts{ background-color:#042f53; max-width:90%; width:123.5vh; height:50px; height:6vh; border-radius:6px; margin-bottom:2.0vh; }
.refOtsTxt{ padding:1.3vh; }
.refSisalto{ background-color:#042f53; margin:0.5vh; width:44%; float:left; }
.refSisaltoVas,.refSisaltoVasP,.refSisaltoOik,.refSisaltoOikP{ float:left;vertical-align:top; }
.refSisaltoVas,.refSisaltoVasP{ height:27.0vh; overflow:hidden; }
.refSisaltoVas,.refSisaltoOikP{ margin:2.5vh; margin-bottom:0.0vh; }
.refSisaltoVasP,.refSisaltoOik{ margin-top:2.5vh; }
.refSisaltoOik,.refSisaltoOikP{ border:solid 0px red; width:100px; height:27.0vh; overflow:hidden; }

.referenssinKuvat{ display:flex; align-items:center; justify-content:center; border:solid 0px #004080; width:33.0vh; max-height:26.0vh; }
.refSisaltoVas .referenssinKuvat img,.refSisaltoVasP .referenssinKuvat img{ border-radius:5px; max-width:100%;max-height:100%; }

.kuvaTausta { vertical-align:top; background-color:#042f53; width:100px; width:10.5vh; }
.kuvaTausta img{ border-radius:5px; width:100px; width:10.5vh; display:inline; }

.refTekstiAlue span{ font-size:2.4vh; line-height:4.6vh; }
.refTekstiAlue{ margin-left: 2.8vh;margin-right:3.8vh; margin-bottom:2.5vh; font-size:1.9vh; height:16.0vh; overflow:auto; }

/*
.refOts{ background-color:#042f53; max-width:90%; width:123.5vh; height:50px; height:6vh; border-radius:6px; margin-bottom:2.0vh; }
.refOtsTxt{ padding:1.3vh; }
.refSisalto{ background-color:#042f53; border:solid 0px red; max-width:42%; width:57.0vh; min-width:395px; max-height:630px; height:52.0vh; overflow:hidden; float:left; margin-bottom:2.0vh; margin-right:2.0vh; }
.refSisaltoVas,.refSisaltoVasP,.refSisaltoOik,.refSisaltoOikP{ float:left; border:solid 0px red; }
.refSisaltoVas,.refSisaltoVasP{ width:70%; width:41.0vh; max-height:67%; height:33.0vh; margin-right:0.2vh; overflow:hidden; }
.refSisaltoOik,.refSisaltoOikP{ width:20%; width:11.3vh; max-height:67%; height:31.0vh; padding-top:2.5vh; margin-left:2.5vh; }
.refSisaltoOikP{ margin:2.5vh; margin-right:1.5vh; margin-bottom:0vh; margin-top:0vh; }
.referenssinKuvat{ border:solid 0px #004080; }

.refSisaltoVas .referenssinKuvat img,.refSisaltoVasP .referenssinKuvat img{ width:auto; max-width:380px; max-width:38.8vh; height:auto; max-height:270px; margin:2.5vh; margin-left:2.8vh; }
.refSisaltoVasP .referenssinKuvat img{ margin-left:0vh; margin-right:0.2vh; }
.kuvaTausta { background-color:#042f53; height:auto; border-radius:5px; margin-bottom:0.7vh; }
.kuvaTausta img{ margin:0vh; width:auto; max-width:93%; height:auto; border:solid 2px #004080;}



.refTekstiAlue span{ font-size:2.4vh; line-height:4.6vh; }
.refTekstiAlue{ margin-left: 2.8vh;margin-right: 3.8vh; font-size:1.9vh; height:16.0vh; overflow:auto; }

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

#keskialueenTekstit .liitteet,#keskialueenVaihtuvatTekstit .liitteet{ margin:10px; margin-top:30px; margin-left:0px; color:#eeeeee; font-size:16px; font-size:2.2vh; }
#keskialueenTekstit .liitteet span,#keskialueenVaihtuvatTekstit .liitteet span{ font-size:16px; font-size:2.2vh; line-height:3.6vh; }
#keskialueenTekstit .liitteet hr,#keskialueenVaihtuvatTekstit .liitteet hr{ margin:4px; margin-left:0px; display:block; width:40%; }

.liitteet form{ clear:both; }
/* .liitteet input{ margin-top:5px;margin-left:30px; width:50%; padding-left:5px; padding-right:5px; min-width:350px; } */

.dokumentit{ clear:both; margin-left:0px; margin-bottom:30px; }
.dokumentit div{ margin:5px; padding-right:10px; margin-left:0px; }
.dokumentit img{ height:35px; position:relative;top:7px;left:0px; margin-right:10px; }
.dokumentit a{ color:#9be1f9; font-size:1.9vh; line-height:2.6vh; } 


/***** ALAOSA TULEVAT PROJEKTIT *****/


#tulevatProjektit{
position:relative;
/* background-color: #152593; height:400px; */
width:100%;
z-index:100;

}

#tulevatSisalto{
border: solid 0px #ff0000;
padding:30px; padding:4.0vh;
width:50%;
width:87.0vh;
}

.projektiAlue{ font-size:2.1vh; text-align:left; font-weight:bold; width:100%; }

.uusiProjekti{ vertical-align:top;
position:relative; display:inline-block; 
padding:30px; padding:3.0vh; padding-right:10.0vh;
max-width:500px;
}

.uusiProjekti span{
font-size:15px; font-size:1.6vh; text-shadow:none;
color:#c6fcff;
line-height:40px; line-height:5.0vh;
}

.uusiProjekti img{
border:0px;
position:absolute;
left:-20px; top:40px; left:-2.0vh; top:6.0vh;
max-width:25px;
width:3.5vh;
}


/***** ALAOSA *****/

#alaosa{
position:relative;
display:block;
background-color:#111f37;
width:100%;
text-align:center;
}

#alaosanYhteystiedot{
border:solid 0px #fff;
display:inline-block;
margin:50px; margin:5.0vh;
margin-right:20px;
height:auto;
background-color:#0b172c;
border-radius:10px;
}

#yhteystiedot,#osoitteet{
border:solid 0px #fff;
text-align:right;
display:inline-block;
margin:20px; margin:3.0vh;
margin-bottom:45px; margin-bottom:6.0vh;
width:300px;
width:30.0vh;
height:auto;
font-size:22px; font-size:2.6vh;
line-height:26px; line-height:2.8vh;
font-weight:bold;
}

#osoitteet{
text-align:left;
overflow:clip;
}

#osoitteet font{
color:#0061a0;
font-weight:bold;
font-size:32px; font-size:3.3vh;
line-height:40px; line-height:10.0vh;
text-shadow: 2px 2px 2px #000;
}

#yhteystiedot div{
padding-right:25px;
padding-right:2.0vh;
}

#yhteystiedot img{
border:0px;
width:240px; width:25.0vh; /* height:auto; */
margin:0px;
margin-bottom:3px;
}

#yhteyskuva{
display:inline-block;
border:0px;
max-height:168px;
max-width:74px;
position:relative; top:10px;
height:14.0vh;
}

#media{
border:solid 0px #fff;
margin-top:0px;
width:97%;
background-color:#0b172c;
line-height:0px;
border-radius:8px;
/* max-width:10.0vh; */
}

#media img{ max-height:80px; height:4.5vh; padding:1.2vh; border:0px; }

#tunnustukset{
border:solid 0px #fff;
display:inline-block;
position:relative; bottom:30px; bottom:5.0vh;
height:auto;
vertical-align:bottom;
}

img.tunnustus{
max-height:160px; height:15.0vh; margin-right:15px; margin-right:1.5vh;
border-radius:8px; position:relative;top:0px;top:0vh;
}

/***** VAIHTUVA ALUE *****/


#sliderArea{
position:relative;
background-color: #1d5885; 
width:100%; padding-bottom:5px;
z-index:100;
}
#sliderContainer{
width:50%;
}

.slider div{
padding:20px; padding:2.2vh;
background-color: #1d5885; 
height:auto; border:0px;
}

.sliderVas{
float:left;
}

.sliderVas img{
border:solid 4px #001334; border:solid 0.6vh #001334;
border-radius:8px; border-radius:1.0vh;
max-height:235px;
height:20.0vh;
}

.sliderOik{
float:left;
text-align:left;
color:#021727; 
font-size:18px; font-size:1.9vh;
line-height:24px; line-height:2.6vh;
font-weight:bold;
max-height:235px;
height:20.0vh;
width:35.0vh;
overflow:hidden;
}

.sliderOik span{ color:#000; font-size:24px; font-size:2.8vh; line-height:50px; line-height:6.0vh; text-shadow:none; }

.bx-wrapper .bx-prev{ left:-40px; left:-10.0vh; }
.bx-wrapper .bx-next{ right:-40px; right:-10.0vh; }
.bx-pager,.bx-default-pager{ display:none; }




@media only screen and (min-width: 1800px) {

	#symboliRivi{ top:15px; }
	#symboliSelite{ padding:10px; padding:1.5vh; }

	#viiva{
	width:500px; width:55.0vh;
	box-shadow: 0px 0px 6px #91e0ec;
	}

	#keskialueenTekstit,#keskialueenVaihtuvatTekstit{
	top:3.0vh; padding-bottom:5.0vh;
	}
}


@media only screen and (min-width: 2390px) {

	.refSisaltoOik,.refSisaltoOikP{ width:10.5vh; }

	.uusiProjekti{ 
	max-width:600px;
	}

	#tunnustukset{ bottom:3.5vh; }
	img.tunnustus{ max-height:240px; height:14.5vh; margin-right:2.0vh; }
}