@font-face{
    font-family: "Custom";
   src: url('font/delr.eot'); 
   src: url('font/delr?#iefix') format('embedded-opentype'), 
        url('font/delr#bn') format('svg'),
        url('font/delr.woff') format('woff'),
        url('font/delr.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}


html{width:100%;height:100%;}
body{ margin:0px; padding:0px; color:#ffffff; font-family:Custom; width:100%; height:100%; background-color:#0068b5; font-size:20px; font-size:2.6vh; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0px; padding:0px;}
a {text-decoration:none;}

#kokoTausta{ width:auto; height:50%; min-height:225px; background:url("graf/tausta1.jpg") no-repeat; background-size:cover; z-index:-99; }
#logoAlue,#logo,#logoLinja,#otsikkoTeksti{ display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
}
#logoAlue{ border:solid 0px red; width:auto; height:auto; min-height:0px; max-height:105px;padding-top:25px; padding-bottom:40px; overflow:hidden; white-space:nowrap; }

#logo{
border:solid 0px green; 
width:auto;
height:100%;
max-width:311px;
max-height:105px;
min-height:0px;
}

#logoLinja{ 
border:solid 0px red;
width:100%;
height:auto;
max-height:105px;
min-height:0px;
background-image: url("graf/logolinja.png");
background-repeat: repeat-x;
background-position:0px 1px;
background-size:contain;
position:relative;
}

#otsikkoTeksti{ align-items:center; text-indent:40px; text-indent:8.0vh; width:auto; width:95%; height:auto; max-height:105px; margin-top:auto;margin-bottom:auto; }
#muutValinnat { height:auto; width:100px; right:0px; margin-right:10px; 
position: absolute; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#muutValinnat img { border-radius:6px; box-shadow: 1px 1px 1px #232323; }
#sisaltoValikko div,.vaaleanSinTxt{ font-size:26px; font-size:3.0vh; color:#c3eefe; -webkit-text-shadow: 2px 2px 2px #000; -moz-text-shadow: 2px 2px 2px #000;  text-shadow: 2px 2px 2px #000; }

#sisaltoTausta{
margin:auto;
/*padding:20px;*/
position:relative;
top:-13%;
width:77%;
height:auto;
border-radius:7px;
background-color:#0068b5; 
z-index:10;
}

#sisalto{ position:relative; z-index:10; white-space:nowrap; }

#sisaltoTaustaKala{
position:absolute;top:-25px;left:-20px; 
width:201px;
height:103px;
z-index:11;
margin: auto;
}

#sisaltoTaustaKalaKuva{
display:flex;
width:auto;
height:100%;
height:12.0vh;
max-width:201px;
max-height:103px;

}

#sisaltoTaustaTaytto{
position:absolute;top:20px;left:0px;
width:100%;
height:250px;
background-color:#0068b5; 
} 


#sisaltoTaustaVarjo{
position:absolute;top:0px;left:0px;
width:100%;
height:200px;
z-index:-10;
border-radius:7px;
-webkit-box-shadow:0px -6px 15px 3px #00345b; -moz-box-shadow:0px -6px 15px 3px #00345b; 
box-shadow: 0px -6px 15px 3px #00345b;
padding-bottom:30px;
}

#sisaltoValikko{
display:inline-block;
position:relative;
padding-top:100px;
padding-top:11.0vh;
border:solid 0px red;
width:26%;
min-width:190px;
height:auto;
background-image: url("graf/vedenalaista.png");
background-repeat: no-repeat;
background-position:0px 0px;
background-size:contain;

}

#sisaltoValikko div{ position:relative; margin:10px; margin:1.0vh; margin-left:22px; margin-left:7.0vh; }
#sisaltoValikko div.valintaTaso a{ cursor:pointer; }
#sisaltoValikko div.valintaTasoVal a{ cursor:default; }

#sisaltoValikko div .osoitin{ 
margin: 0vh 0; 
position:absolute; left:-4.0vh; top:2.0vh;
display: block; 
width: 0px; 
height: 0px; 
border-right: 1.4vh solid transparent; 
border-bottom: 0.7vh solid #000080; 
border-left: 1.4vh solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); 
} 

#sisaltoValikko div .osoitin:before{ border-bottom: 1.3vh solid #000080; border-left:0.6vh solid transparent; border-right: 0.6vh  solid transparent; position: absolute; height: 0; width: 0; top: -0.7vh; left: -0.9vh; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); 
} 

#sisaltoValikko div .osoitin:after{ position: absolute; display: block; color: #000080; top: 0.0vh; left: -1.4vh; width: 0px; height: 0px; border-right: 1.4vh solid transparent; border-bottom: 0.7vh solid #000080; border-left: 1.4vh solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; 
}


#sisaltoValikko div .osoitin.j,#sisaltoValikko div .osoitin.j:before,#sisaltoValikko div .osoitin.j:after{ border-bottom-color: #ffffff; }
#sisaltoValikko div .osoitin.t,#sisaltoValikko div .osoitin.t:before,#sisaltoValikko div .osoitin.t:after{ border-bottom-color: #ffffff; }

#sisaltoValikko #sisaltoValikkoReuna{
margin:0px; margin-left:0px; margin-left:0.0vh;
font-size:0px; font-size:0vh;
display:flex;
position:absolute;
top:40px;right:0px;
width:3px;
height:100%;
background-color:#004080;
}

#sisaltoValikko .valintaPorras,#sisaltoValikko .valintaPorrasVal{ line-height:24px; line-height:3.0vh; padding-left:10px;padding-right:10px; }

#sisaltoValikko a{ font-size:20px; font-size:2.6vh; color:#c3eefe; -webkit-text-shadow: 2px 2px 2px #000; -moz-text-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000; }
#sisaltoValikko a:hover{ color:#fff; }
#sisaltoValikko .valintaTasoVal a{ color:#fff; }

#sisaltoValikko a.porras{ font-size:16px; font-size:2.2vh; }
#sisaltoValikko a.porras:hover{ color:#fff; }
#sisaltoValikko .valintaPorrasVal a{ color:#fff; }

#mobiKieli{ display:none; }

#sisaltoRullaa{
display:inline-block;
width:70%;
position:relative; left:10px;left:3.0vh;
vertical-align:top;
}

#sisaltoNaytto{
padding-top:80px;
padding-top:9.0vh;
padding-right:3.5vh;
white-space:pre-line;
}

#sisaltoNaytto p{ margin-top:30px; }

#edustukset{
width:100%;
height:100px;
height:15.0vh;
line-height:150px;
line-height:23.5vh;
overflow:hidden;
background-color:#005695;
}

#edustukset img{
margin:5px; border-radius:8px; max-width:200px; max-width:35.0vh; max-height:60px; max-height:10.0vh;
}

#alaosa{
width:100%;
height:250px;
min-height:35.0vh;
height:38.0vh;
background-color:#003d6b;
background-image: url("graf/logoUpotettu.jpg");
background-repeat: no-repeat;
background-position:50%;
background-size:25%;
}

#alaosaSisalto{
display:inline-block;
width:65%;
width:80.0vh;
color:#fff;
margin-top:30px;
margin-top:5.0vh;
font-size:18px; font-size:2.2vh;
-webkit-text-shadow: 2px 2px 2px #000;
-moz-text-shadow: 2px 2px 2px #000;
text-shadow: 2px 2px 2px #000;
border:solid 0px green;
}

#alaosaSisalto div{
text-align:left;
overflow:hidden;
margin:3px;
width:32%;
border:solid 0px green;
display:inline-block;
vertical-align:top;
max-height:240px;
}

#alaosaSisalto div img{ margin:5px; }


.tekstiAlue_otsikko{ font-size:26px; font-size:3.0vh; line-height:30px; line-height:5.0vh; }
.pvm{ font-size:20px; font-size:2.5vh; }
.peruslinkki{ color:#9be1f9; font-size: 15px; font-size: 2.0vh; line-height: 3.0vh; } .peruslinkki:hover{ -moz-text-shadow:1px 1px 0px #353535; -webkit-text-shadow:1px 1px 0px #353535; text-shadow:1px 1px 0px #353535; }
.toteutus{ color:#c3eefe; font-size: 15px; font-size: 1.7vh; line-height: 3.0vh; } .toteutus:hover{ color:#fff; }
.toteutuspalkki{ display:block; background-color:#003d6b; width:100%; height:50px; font-size:16px; font-size:1.8vh; overflow:hidden; border:0px; }

.liitteet{ margin:10px; margin-top:30px; color:#797979; font-size:16px; font-size:1.9vh; }
.pdfTiedosto{ height:30px;margin-top:10px;margin-bottom:10px;margin-left:5px; }
.pdfTiedosto a{ color:#0f2653; text-decoration:none;}
.pdfTiedosto a:hover{ color:#0080ff; text-shadow:0px 0px 3px #000000; }

/* YHTEYSTIEDOT */

#kartta{ width:600px; height:500px; width:50.0vh; height:40.0vh; margin:20px; margin-left:0px; -webkit-box-shadow: 3px 3px 3px #004080; -moz-box-shadow: 3px 3px 3px #004080; box-shadow: 3px 3px 3px #004080; }
#karttamobi{ display:none; }

/* GALLERIA */
#sisaltoNaytto .gallerianKuvat{ margin-top:20px; }
#sisaltoNaytto .gallerianKuvat img{ display:inline; width:200px; width:16.0vh; 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; }

/* TUOTTEET */
.tuoteAlue p{ margin-top:20px; }

#sisaltoNaytto .kh{ display:inline-block; vertical-align:top; width:185px; width:20.0vh; margin-bottom:10px; margin-right:20px; }
#sisaltoNaytto .tuotteenKuvat{ width:185px; width:20.0vh; max-height:150px;overflow:hidden; }
#sisaltoNaytto .tuotteenKuvat img{ margin-bottom:30px; max-height:17.0vh; max-width:180px; border:solid 2px #004080; -webkit-box-shadow: 1px 1px 2px #004080; -moz-box-shadow: 1px 1px 2px #004080; box-shadow: 1px 1px 2px #004080; }

#sisaltoNaytto .tuotteenHinta{ width:185px; font-size:15px; font-size:2.0vh; }
#sisaltoNaytto .tuotteenHinta p{ margin-top:10px; }

#sisaltoNaytto hr{ max-width:95%; border:0px;background-color:#004080; height:4px; border-radius:20px; margin-bottom:20px; }
#sisaltoNaytto p.tuote{ font-size:26px; font-size:3.0vh; text-indent:7px; color:#c3eefe; -webkit-text-shadow: 2px 2px 2px #000; -moz-text-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000; }
#sisaltoNaytto .tuoteTeksti{ font-size:16px; font-size:2.3vh; display:inline-block; vertical-align:top; max-width:75%; }

#sisaltoNaytto .tuoteInfo img { cursor:pointer; margin-top:10px; margin-left:0px; margin-right:7px; }
#sisaltoNaytto .tuoteInfo .npNapsauta{ cursor:pointer; position:relative; top:-7px; }

.tuoteInfo{ font-size:16px; font-size:2.3vh; display:inline-block; line-height:20px; width:80%; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; border:solid 0px red; }
.tuoteInfo span{ cursor:pointer;  font-size:15px; font-size:2.0vh; line-height:3.0vh; color:#9be1f9; }
.tuoteInfoNayta div { margin:5px; margin-left:35px; margin-bottom:10px; }
.mittayksikko{ font-size:14px; font-size:1.8vh; }

.liitteet{ margin:10px; margin-top:20px; margin-left:-30px; color:#797979; font-size:16px; font-size:1.6vh; }
.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:-30px; font-size:15px; font-size:1.9vh; line-height:32px;*/ }
.dokumentit div{ /*float:left; margin-left:20px;*/ margin:5px; padding-right:10px; }
.dokumentit img{ height:35px; position:relative;top:7px;left:-10px; }
.dokumentit a{ color:#9be1f9; font-size: 15px; font-size: 2.0vh; line-height: 3.0vh; } .dokumentit a:hover{ -moz-text-shadow:1px 1px 0px #353535; -webkit-text-shadow:1px 1px 0px #353535; text-shadow:1px 1px 0px #353535; }

/* LOMAKE */

.tietueKohde{ height:36px; padding-top:4px; } 
.tietueInput{ height:36px; margin-bottom:20px; }

select,textarea,input{ font-family:Custom; font-size:22px; font-size:2.2vh; background-color:#004b84; border-color:#55352d; color:#fff; } 

select { padding:6px; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; width:60%; }
select option{ text-indent:5px; margin:2px; padding:2px; }
select option{ color:#000; }

textarea { padding:10px; border-radius:7px; width:60%; height:100px; }
textarea:-ms-input-placeholder { 
/*  color: #d7bbb5; */
  transition: opacity 250ms ease-in-out;
}
textarea::-moz-placeholder {
/*  color: #d7bbb5;*/
  transition: opacity 250ms ease-in-out;
}

input { padding:10px; margin-bottom:10px; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; width:50%; }
input:focus,select:focus,textarea:focus{ -webkit-box-shadow:2px 2px 3px #000; -moz-box-shadow:2px 2px 3px #000; box-shadow:2px 2px 3px #000; }
input[type=submit],input[type=reset]{ display:inline; width:30%; margin-right:25px; background-color:#002b4a;  -webkit-box-shadow:1px 1px 1px #4e4e4e; -moz-box-shadow:1px 1px 1px #4e4e4e; box-shadow:1px 1px 1px #4e4e4e; }

.rastita{ margin-left:20px; min-width:450px; }
label{ font-size:16px; font-size:2.1vh; display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right:5px; }
input[type=checkbox]{ display: none; }
label:before{ content: ""; display: inline-block; width:16px;height:16px; margin-right: 10px; position: absolute; left: 0; bottom: 1px; background-color: #9bdeff; -webkit-box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); -moz-box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); }
.rastita label { margin-bottom: 10px; }
.rastita label:before { -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:1px 1px 3px #000; -moz-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000; }
input[type=checkbox]:checked + label:before { content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 26px; font-weight:bold; color: #000000; text-align: center; line-height: 15px; }

.virhe{
position:relative;
background-color:#fff;
color:red;
padding:8px;
text-indent:10px;
width:50%;
border-radius:8px;
font-size:16px;
font-size:2.0vh;
}