/* Asiakaslogot: yhteiset tyylit tervetuloikkunalle (index.html) ja Koulutukset-sivulle.
   Logo näkyy yhtenäisessä sävyssä ja vaihtuu alkuperäisiin väreihin, kun hiiri on sen päällä. */
.logo{position:relative;display:inline-block;line-height:0;vertical-align:middle;max-width:100%}
.logo img{display:block;max-width:100%;height:auto}
.logo-muste{opacity:.82;transition:opacity .35s ease}
.logo-vari{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s ease}
@media (hover:hover){
  .logo.ladattu:hover .logo-vari{opacity:1}
  .logo.ladattu:hover .logo-muste{opacity:0}
}

/* Ruudukko */
.logoruudukko{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:28px;row-gap:34px;align-items:center;justify-items:center}
.logoruudukko li{display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%}
@media (max-width:980px){.logoruudukko{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:30px}}
@media (max-width:560px){.logoruudukko{column-gap:18px;row-gap:26px}}

/* Liukuva rivi */
.liuku{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.liuku-rata{list-style:none;margin:0;padding:0 38px 0 0;display:flex;flex:none;align-items:center;gap:38px;animation:logoliuku var(--liuku-aika,70s) linear infinite}
.liuku-rata li{flex:none;display:flex;align-items:center}
.liuku:hover .liuku-rata,.liuku:focus-within .liuku-rata{animation-play-state:paused}
@keyframes logoliuku{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .liuku{flex-wrap:wrap;justify-content:center;row-gap:14px;-webkit-mask-image:none;mask-image:none}
  .liuku-rata{animation:none;flex-wrap:wrap;justify-content:center;padding:0;row-gap:14px;flex:1 1 100%}
  .liuku-rata[aria-hidden="true"]{display:none}
}