html,body{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; flex-direction:column; margin:0px; padding:0px; color:#000; }

#sisaltoAlue{ border-radius:0px 0px 0px 0px; position:relative; z-index:0; display:flex;justify-content:center;align-items:center; width:133.0vh; height:65.0vh; border:solid 1px black; }
#sisalto{ overflow:hidden; width:126.0vh; height:57.9vh; max-width:133.0vh; max-height:65.0vh; }

#vaihtuvaSisalto{ background-color:#fff; width:133.0vh; height:65.0vh; position:relative;z-index:10; transition: all 1.2s; padding:10px; border:0px; }
#vaihtuvanSisallonKehys{ width:126.0vh; height:65.0vh; margin-left:-1.0vh; overflow:auto; }
#vaihtuvanSisallonKehys hr{ width:97%; }

.kuvaikkunaPslide,.kuvaikkunaVslide{ margin:0px;padding:0px; }
.kuvaikkunaPslide{ width:38.5vh; height:57.5vh; }
#kuvaikkunaPysty{ width:38.0vh; height:56.3vh; margin-right:12px;margin-right:1.0vh; }

.kuvaikkunaVslide{ width:85.0vh; height:57.5vh; }
#kuvaikkunaVaaka{ width:84.5vh; height:56.3vh; margin-left:12px;margin-left:1.0vh; }

#kuvaikkunaPysty,#kuvaikkunaVaaka{ border-radius:0px; }
#kuvaikkunaPysty,#kuvaikkunaVaaka{ border:solid 1px black; display:inline-block; overflow:hidden; }

#valikkoAlue{ display:flex;justify-content:flex-start; align-items:center; border:solid 1px black; width:133.0vh; height:15.0vh; border-radius:0px 0px 0px 0px; background-color:#000; }
#logo{ height:15.0vh; width:30.0vh; border:solid 0px green; display:flex; justify-content:center; align-items:center; }
#logo img{ max-height:12.0vh; }

/*** PÄÄVALINNAT ALAREUNASSA ***/

#valinnat{
border:solid 0px yellow;
height:15.0vh; width:90.0vh;
display:flex; justify-content:center; align-items:flex-start;
flex-wrap: wrap;
}

#valinnat a{
position:relative;top:-4px;
border:solid 1px #fff; border-left-width:0px;
text-decoration:none;
}

#valinnat a:first-child{ border-left-width:1px; }
#valinnat a:last-child{ border-right-width:1px; }
#soitin{ position:relative; top:-4.0vh; right:2.0vh; width:133.0vh; border:solid 0px red; display:grid; justify-content: right; }

.play {
display:block; width: 0; height: 0; 
border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid #ffffff; border-top: 1.0vh solid transparent; border-bottom: 1.0vh solid transparent; border-left: 1.5vh solid #ffffff;
position:relative; z-index:1; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; left:0px;
}  

.play:after {
    content:'';
    opacity:0;
  }

.play.active,.play:focus {
	border-color:transparent;
  }

.play.active:after,.play:focus:after {
      content:'';
      opacity:1;
      width:8px;
      height:18px;
      width:0.8vh;
      height:1.5vh;
      background:#fff;
      position:absolute;
      right: 0px;
	bottom:0px;
      top: -8px; top: -0.8vh;
      border-left:5px solid #fff;
      border-right:5px solid #fff;
      box-shadow:inset 8px 0 0 0 #000;
      border-left: 0.6vh solid #fff;
      border-right: 0.6vh solid #fff;
      box-shadow: inset 0.8vh 0 0 0 #000;
    }

/*** TEKSTISIVUT ***/

.reunaAlue{ width:38.0vh; height:56.3vh; margin-right:12px; margin-right:1.5vh; margin-top:0.1vh; border:solid 1px black; display:inline-block; overflow:hidden; float:left; }
.reuna{ width:38.0vh; width:inherit; height:57.5vh; overflow:hidden; margin:0; padding:0; display:flex; justify-content:center; align-items:center; }
.reuna img{ max-height:57.5vh; border:0px; margin:0; padding:0; }

.reunaKuva{ border:0px; }

.tekstinErotin{ width:2px;height:30px;height:0.8vh;  }
.kappaleenErotin{ width:2px;height:30px;height:10.0vh; }

/*** SUUNNITTELIJAT ***/

.suunnittelijaAlue{ width:38.0vh; height:56.3vh; margin-right:12px;margin-right:0.5vh; margin-top:1.0vh; border:solid 1px black; display:inline-block; overflow:hidden; }
.suunnittelija{ width:38.0vh; width:inherit; height:57.5vh; overflow:hidden; margin:0; padding:0; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.suunnittelija img{ max-height:57.5vh; border:0px; margin:0; padding:0; }

.suunnittelijaKuva{ border:0px; }
.suunnittelijaNayta{ transition: all 0.8s; }
.suunnittelijaNayta:hover{ color:#800000; }

.suunnittelijaYhteys{ display:none; overflow-y:auto; overflow-x:hidden; padding:3.0vh; }
.suunnnittelijaKorostettu{ font-size:17px; font-size:2.1vh; padding-bottom:1.5vh;}

.suunnittelijaKohde{ padding:0.2vh; }
.suunnittelijaTieto{ padding:1.5vh; padding-left:0;padding-right:0; }

/***** GALLERIA *****/

.gallerianKuvat{ margin-top:20px; }
.gallerianKuvat img{ display:inline; max-width:250px; max-height:90px; border-radius:0px; border:solid 1px #585858; margin:5px; }


/*** DOKUMENTIT ***/

.liitteet{ margin:10px; margin-top:30px; margin-left:0px; }
.liitteet hr{ margin:4px; margin-left:0px; display:block; width:40%; max-width:65%; }

.dokumentit{ margin-left:0px; margin-bottom:10px; }
.dokumentit div{ margin:5px; padding-right:10px; margin-left:0px; }
.dokumentit img{ height:35px; height:4.0vh; position:relative;top:7px;left:0px; margin-right:10px; }
.dokumentit a{ font-size:1.9vh; line-height:2.6vh; } 
.dokumentit a:hover{ color:#3e3e3e;  } 

/*** TEKSTIT ***/

.tekstiAlue_otsikko,.tekstiAlue_otsikkoNaps{ font-size:26px; font-size:2.6vh; line-height:30px; line-height:7.0vh; }
.tekstiAlue_otsikkoNaps{ cursor:pointer; }

.tekstiAlue_teksti,.tekstiAlue_tekstiNaps{ font-size:20px; font-size:1.8vh; line-height:24px; line-height:2.4vh; margin-right:1.0vh; }
.tekstiAlue_tekstiNaps{ display:none; }

.tekstilinkki{ color:#ca0000; text-decoration:none; transition: all 0.8s; transition-timing-function: ease-in-out; }
.tekstilinkki:hover{ color:#000000; }

.peruslinkki{ color:#ca0000; text-decoration:none; transition: all 0.8s; transition-timing-function: ease-in-out; }
.peruslinkki:hover{ color:#000000; }






@media only screen and (max-width:1290px) and (max-height:750px) {
.suunnittelijaAlue{ width:37.5vh; height:55.3vh;  }
.suunnittelija{ height:56.5vh; }
.suunnittelija img{ max-height:56.5vh; }
}


@media only screen and (max-width:970px) and (min-height:580px) {
#vaihtuvaSisalto{ height:58.0vh; padding:5px; }
#vaihtuvanSisallonKehys{ height:58.0vh; }
.tekstiAlue_teksti,.tekstiAlue_tekstiNaps{ margin-right:3.0vh; }
}

@media only screen and (min-width:2400px) and (min-height:1350px) {
.reunaAlue{ margin-top:0.8vh; margin-left:0.8vh; }
#vaihtuvanSisallonKehys{ margin-left:-0.2vh; }
}
