.banneri { /* banneriluonkan tyyli */
    height: 12vw; /* bannerin korkeus */
    z-index:1; /* layer sijaitsee alimpana */
    transform-origin: left bottom; /* seuraava muutos alkaa vasemmasta alakulmasta */
    transform: skewY(-5deg); /* banneri diagonaaliin */
    margin-top: -1vw; /* ylin banneri näyttää yläreunaltaan suoralta */
    position: relative; /* sijainti ilmaistaan suhteessa normaaliasemaan*/
    box-shadow: 0 0.5vw 1vw -0.3vw gray; /* dropshadow bannerin alareunassa */
}
.logo {
    width: 10vw;
    z-index: 2;
    height: auto; /* automaattisesti oikeassa suhteessa leveyden kanssa */
    margin-top: -10vw; /* kuva bannerin päällä. Ei samassa divissä, koska bannerissa käytetty skew vääristäisi. */
    margin-left: 1.5vw;
    position: absolute; /* sijainti absoluuttinen suhteessa sen ensimmäiseen ei-staattiseen "esi-isään"  */   
}
.logo:hover {
    transform: scale(1.1);
}  
/* estää logon muuttumisen ylimmässä bannerissa */
#noHover {
    pointer-events: none;
}

.sanna {
    font-family: 'Sacramento', cursive; /* Google-fontti, kursiivi vaihtoehtona */
    font-size: 5.8vw;
    z-index: 3;
    position: absolute;
    margin-left: 14vw;
    margin-top: -11.5vw; /*negatiivinen arvo, jotta teksti on saatu bannerin päälle */
}