/*
MERIROOSI CSS-I LUGEMISJUHEND
HTML määrab sisu ja ülesehituse, CSS määrab välimuse.

section = HTML-i temaatiline jaotis, näiteks kursuse sisu või toimumisajad.
article = HTML-i iseseisev sisutervik, näiteks uudis või kursusekaart.
Selles failis article jaoks eraldi reeglit pole. <article class="panel">
saab kujunduse .panel reeglist.

.facts = meie valitud klassinimi kursuse põhiandmete reale.
.eyebrow = meie valitud klassinimi väikesele sissejuhatavale tekstile
suure pealkirja kohal, näiteks „ITIL · VERSION 5”.
Need nimed ei ole HTML-i tagid ega brauseri sisseehitatud funktsioonid.

Punkt tähistab klassi: .facts vastab HTML-is class="facts".
Punktita nimi tähistab HTML-elementi: section vastab <section>-ile.
.facts span tähendab facts-ploki sees asuvaid span-elemente.
Komaga eraldatud valijatele rakendub sama reegel.
Tühik tähendab elemendi paiknemist teise sees; > tähendab otsest last;
+ tähendab vahetult järgnevat naaberelementi.
:hover = hiire all; :focus-visible = nähtav klaviatuurifookus.
::before ja ::after = kujunduslik lisakiht, näiteks päisefoto.
@media = reeglid kindla ekraanilaiuse või muu tingimuse korral.
Kattuvate reeglite puhul loevad valija täpsus ja järjekord:
võrdse täpsuse korral kehtib hilisem reegel.

margin = väline vahe; padding = sisemine vahe; gap = elementide vahe.
color = teksti värv; background = taust; border = ääris.
font-size = kirja suurus; line-height = reavahe.
display: grid = veergude/ridade paigutus; flex = paindlik elementide rida.
max-width = suurim laius; border-radius = nurkade ümardus.
px = pikslid; ch = märgilaiusel põhinev ühik; vw = protsent vaateakna laiusest.
clamp määrab miinimumi, paindliku väärtuse ja maksimumi.
var(--nimi) kasutab ühist väärtust, näiteks faili alguses määratud värvi.
Kommentaarid ei muuda lehe kujundust.
*/
/* Ühised värvid: ink põhitekst, muted kõrvaltekst, accent rõhuvärv, line äärised, pale hele taust. */
:root {
	--ink: #172b2a;
	--muted: #495f5c;
	--accent: #14574f;
	--line: #d8e3df;
	--pale: #edf5f1;
}
/* Elemendi laiuse sisse arvestatakse ka sisemine vahe ja ääris. */
* {
	box-sizing: border-box;
}
/* Kogu lehe põhitaust, tekstivärv, kirjatüüp ja reavahe. */
body {
	margin: 0;
	background: #fafcfb;
	color: var(--ink);
	font: 16px/1.6 system-ui,'Segoe UI',sans-serif;
}
/* Tavaliste linkide värv ja allajoonimise kaugus. */
a {
	color: var(--accent);
	text-underline-offset: 3px;
}
a:focus-visible, summary:focus-visible {
	outline: 3px solid #b27722;
	outline-offset: 3px;
}
/* Klaviatuuriga kasutatav otse põhisisuni viiv link; fookuse korral tuuakse nähtavale. */
.skip {
	position: absolute;
	left: 12px;
	top: -100px;
}
.skip:focus {
	top: 8px;
	z-index: 3;
	background: white;
	padding: 8px;
}
/* Vasak külgmenüü. Hilisemad reeglid täpsustavad sama menüü käitumist. */
.sidebar {
	position: fixed;
	inset: 0 auto 0 0;
	width: 255px;
	background: #f0f5f2;
	border-right: 1px solid var(--line);
	padding: 26px 18px;
	overflow: auto;
}
/* Meriroosi nime ja märgi ühine rida. */
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 23px;
	font-weight: 750;
	line-height: 1.2;
	margin-bottom: 30px;
}
/* Ettevõtte tähise värviline taust. */
.mark {
	background: var(--accent);
	color: white;
	padding: 8px 12px;
	border-radius: 10px;
}
/* Väikesed selgitavad tekstid: ettevõtte alatekst, pealkirja kohal olev eyebrow ja menüürühmade pealkirjad. */
.brand small, .eyebrow, nav p {
	display: block;
	font-size: 11px;
	letter-spacing: .13em;
	font-weight: 750;
	color: var(--muted);
}
nav p {
	margin: 22px 9px 5px;
}
/* Menüülinkide välimus ja klõpsuala. */
nav a {
	display: block;
	padding: 6px 9px;
	border-radius: 7px;
	text-decoration: none;
	font-size: 14px;
	color: var(--ink);
}
/* Hiire all oleva või aktiivsele lehele viitava menüülingi taust. */
nav a:hover, nav a[aria-current] {
	background: #dcebe4;
}
.sidebar summary {
	cursor: pointer;
	font-weight: 650;
}
/* Põhisisu ümbris: vasak vahe jätab ruumi menüüle. */
.shell {
	margin-left: 255px;
}
/* Põhisisu ja jaluse suurim laius ning servavahed. */
main, footer {
	max-width: 1120px;
	margin: auto;
	padding: 38px clamp(20px,5vw,65px);
}
/* Pealkirjade ühine kujundus: h1 lehe, h2 jaotise ja h3 alajaotise pealkiri. */
h1, h2, h3 {
	line-height: 1.16;
	letter-spacing: -.025em;
}
h1 {
	font-size: clamp(34px,5vw,56px);
	margin: 8px 0 12px;
}
h2 {
	font-size: 26px;
	margin: 0 0 12px;
}
h3 {
	margin: 0 0 6px;
}
p {
	margin: 0 0 12px;
}
/* Pealkirja järel olev suurema kirjaga sissejuhatav lõik. */
.lead {
	font-size: 18px;
	color: var(--muted);
	max-width: 66ch;
}
/* Temaatilise jaotise ülemine vahe. */
section {
	margin-top: 32px;
}
/* Ühine valge ümardatud raam infokaartidele ja koolitusloendile. */
.panel, .schedule {
	background: white;
	border: 1px solid var(--line);
	border-radius: 12px;
}
/* Infokaardi sisemised vahed; seda klassi võib kasutada ka article-elemendil. */
.panel {
	padding: 19px;
}
/* Koolituskalendri loendi sisemised küljevahed. */
.schedule {
	padding: 0 16px;
}
/* Ühe koolituse rida: kuupäev, kursus, hind või muu info ja tegevuslink. */
.row {
	display: grid;
	grid-template-columns: 120px minmax(0,1fr) 112px auto;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
}
/* Eraldusjoon järjestikuste koolitusridade vahel. */
.row + .row {
	border-top: 1px solid var(--line);
}
.row strong, .price {
	font-weight: 750;
}
/* Tagasihoidlikuma värviga kõrvalinfo. */
.row small, .muted {
	color: var(--muted);
}
.row small {
	display: block;
}
/* Nupuna kujundatud link või element, näiteks registreerimise link. */
.button {
	display: inline-block;
	background: var(--accent);
	color: white;
	padding: 7px 13px;
	border-radius: 7px;
	font-weight: 650;
	text-decoration: none;
	text-align: center;
}
.button:hover {
	background: #103f39;
}
/* Kahe võrdse veeruga paigutus, näiteks kursusevariantide kõrvutamiseks. */
.grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 14px;
}
/* Kursuse põhiandmete sildid: õppekeel, eelteadmised jms; vajadusel murduvad mitmele reale. */
.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}
/* Ühe põhiandmete sildi hele taust ja ümardatud nurgad. */
.facts span {
	background: var(--pale);
	padding: 5px 10px;
	border-radius: 6px;
}
/* Suurelt kuvatav hind. */
.price {
	font-size: 28px;
}
/* Kursuse pikema kirjelduse loetav realaius. */
.course-text {
	max-width: 78ch;
}
/* Kursuse pildid mahuvad sisualasse ja säilitavad proportsioonid. */
.course-text img {
	max-width: 100%;
	height: auto;
}
/* Jalus: kõrvalinfo ja ülemine eraldusjoon. */
footer {
	color: var(--muted);
	border-top: 1px solid var(--line);
	font-size: 14px;
}
/* Lehe sisse põimitud vaate raam ja kõrgus. */
iframe {
	width: 100%;
	height: 680px;
	border: 1px solid var(--line);
	border-radius: 8px;
	margin-top: 12px;
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(min-width:801px){
.sidebar summary {
	display: none;
}
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:800px){
/* Vasak külgmenüü. Hilisemad reeglid täpsustavad sama menüü käitumist. */
.sidebar {
	position: static;
	width: auto;
	border-right: 0;
	border-bottom: 1px solid var(--line);
	padding: 14px 20px;
}
/* Meriroosi nime ja märgi ühine rida. */
.brand {
	margin-bottom: 10px;
}
/* Põhisisu ümbris: vasak vahe jätab ruumi menüüle. */
.shell {
	margin: 0;
}
main {
	padding-top: 24px;
}
/* Ühe koolituse rida: kuupäev, kursus, hind või muu info ja tegevuslink. */
.row {
	grid-template-columns: 1fr auto;
}
.row .course {
	grid-column: 1/-1;
	grid-row: 1;
}
/* Kahe võrdse veeruga paigutus, näiteks kursusevariantide kõrvutamiseks. */
.grid {
	grid-template-columns: 1fr;
}
}
/* Vasak külgmenüü. Hilisemad reeglid täpsustavad sama menüü käitumist. */
.sidebar {
	z-index: 2;
}
/* Külgmenüü kokkutõmbamise ja laiendamise nupp. */
.sidebar-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0 0 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--accent);
	background: #fafcfb;
	cursor: pointer;
}
.sidebar-toggle[hidden] {
	display: none;
}
.sidebar-toggle:hover {
	background: #dcebe4;
}
.sidebar-toggle:focus-visible {
	outline: 3px solid #b27722;
	outline-offset: 2px;
}
/* Menüü vektorkujul ikoonide suurus. */
.sidebar svg {
	width: 21px;
	height: 21px;
	flex: none;
}
.sidebar nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}
/* Kokkutõmmatud menüü: kitsas ikoone näitav riba. */
.sidebar-compact .sidebar {
	width: 62px;
	padding: 15px 8px;
}
/* Kitsama menüü kõrval saab põhisisu rohkem ruumi. */
.sidebar-compact .shell {
	margin-left: 62px;
}
.sidebar-compact .brand {
	justify-content: center;
	margin-bottom: 16px;
}
/* Kokkutõmmatud menüüs peidetavad tekstid; ikoonid jäävad nähtavale. */
.sidebar-compact .brand-name, .sidebar-compact .nav-label, .sidebar-compact nav p {
	display: none;
}
.sidebar-compact .sidebar nav a {
	justify-content: center;
	padding: 0;
}
.sidebar-compact .sidebar nav p + a {
	margin-top: 8px;
}
.sidebar-compact .sidebar-toggle svg {
	transform: rotate(180deg);
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:800px){
.sidebar:has(.sidebar-toggle:not([hidden])){position:fixed;inset:0 auto 0 0;border-right:1px solid var(--line);border-bottom:0;width:min(255px,calc(100vw - 26px));box-shadow:5px 0 18px #172b2a20}
.sidebar-compact .sidebar:has(.sidebar-toggle:not([hidden])){width:62px;box-shadow:none}
.sidebar:has(.sidebar-toggle:not([hidden]))+.shell{margin-left:62px}
.shell main, .shell footer {
	padding-left: 14px;
	padding-right: 14px;
}
/* Ühe koolituse rida: kuupäev, kursus, hind või muu info ja tegevuslink. */
.row {
	column-gap: 6px;
}
}
/* Lehe päiseplokk heleda rohelise värviüleminekuga. */
.page-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 164px;
	padding: 22px clamp(16px,3vw,32px);
	border: 1px solid #d8e5df;
	border-radius: 12px;
	background: linear-gradient(110deg,#f7fbf8 3%,#eaf4ee 58%,#d9ebe2 100%);
}
/* Päise tekstikiht asub taustapildi ees. */
.page-banner-text {
	position: relative;
	z-index: 1;
	max-width: 66ch;
}
.page-banner .lead {
	margin-bottom: 0;
}
/* Parempoolne poolläbipaistev päisefoto, mis hajub vasakule. */
.page-banner-photo::before {
	content: "";
	position: absolute;
	inset: 0 0 0 40%;
	background: url("koolitusklass-pais.png") right 39% / cover no-repeat;
	opacity: .34;
	filter: saturate(.6);
	mask-image: linear-gradient(to right,transparent 0%,#000 56%);
}
/* Lisakiht hajutab foto alumise serva päise taustaga kokku. */
.page-banner-photo::after {
	content: "";
	position: absolute;
	inset: 0 0 0 40%;
	background: linear-gradient(to bottom,transparent 55%,#e3f0e8 100%);
	pointer-events: none;
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:650px){
/* Lehe päiseplokk heleda rohelise värviüleminekuga. */
.page-banner {
	min-height: 0;
	padding: 18px 14px;
}
.page-banner-photo::before, .page-banner-photo::after {
	inset: 0 0 0 48%;
}
/* Parempoolne poolläbipaistev päisefoto, mis hajub vasakule. */
.page-banner-photo::before {
	opacity: .22;
	background-position: 69% top;
}
.page-banner .lead {
	font-size: 16px;
}
}
/* Alternatiivne päise joonistus; rakendub ainult vastava klassiga päisele. */
.page-banner-illustration::before {
	content: "";
	position: absolute;
	inset: 0 0 0 46%;
	background: url("koolitusklass-joon.svg") right 6px top 2px / auto 106% no-repeat;
	opacity: .31;
	mask-image: linear-gradient(to right,transparent 0%,#000 43%,#000 94%,transparent);
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:650px){
/* Alternatiivne päise joonistus; rakendub ainult vastava klassiga päisele. */
.page-banner-illustration::before {
	inset: 0 0 0 42%;
	background-position: 66% top;
	opacity: .19;
}
}
/* Teine katsetatud päisefoto; rakendub ainult vastava klassi lisamisel. */
.page-banner-photo-alt::before {
	background-image: url("koolitusklass-pais-2.png");
}
/* Vanast veebist üle toodud sisu; lai sisu saab kerida ja pikad sõnad murduvad. */
.legacy-content {
	margin-top: 24px;
	overflow-x: auto;
	overflow-wrap: anywhere;
}
.legacy-content img, .legacy-content video {
	max-width: 100%;
	height: auto;
}
.legacy-content iframe {
	max-width: 100%;
	height: 360px;
}
.legacy-content table {
	border-collapse: collapse;
	max-width: 100%;
}
.legacy-content td, .legacy-content th {
	padding: 6px 9px;
	vertical-align: top;
}
.legacy-content p, .legacy-content li {
	max-width: 85ch;
}
/* Kursusekirje ülemine vahe. */
.course-entry {
	margin-top: 16px;
}
/* Kursuste linkide loend kahes veerus. */
.course-directory {
	columns: 2;
	column-gap: 24px;
	margin: 0;
	padding-left: 22px;
}
.course-directory li {
	break-inside: avoid;
	margin-bottom: 6px;
}
.schedule > p {
	padding: 12px 0;
	margin: 0;
}
.schedule + p {
	margin-top: 10px;
}
/* Täis kursuse teate punane tekst. */
.calendar-full {
	color: #9b1c17;
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:650px){
/* Kursuste linkide loend kahes veerus. */
.course-directory {
	columns: 1;
}
}
/* Peagi algavate koolituste algne paigutus; upcoming-compact täpsustab allpool praegust vaadet. */
.upcoming {
	display: grid;
	grid-template-columns: minmax(0,1fr) 132px;
	gap: 20px;
	align-items: start;
}
.upcoming .row {
	grid-template-columns: minmax(170px,auto) minmax(0,1fr) auto;
}
.upcoming-copy > p {
	margin: 10px 0 0;
}
/* Kursuste kõrval oleva kella kujundus; hilisemad reeglid täpsustavad asukohta. */
.upcoming-clock {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 20px;
	color: #286357;
}
/* Sekundiosuti: algne CSS-animatsioon lülitatakse hilisema reegliga välja, sest õiget aega juhib JavaScript. */
.clock-second {
	transform-origin: 66px 66px;
	animation: clock-tick 60s steps(60,end) infinite;
}
@keyframes clock-tick{to{transform:rotate(360deg)}}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(prefers-reduced-motion:reduce){
/* Sekundiosuti: algne CSS-animatsioon lülitatakse hilisema reegliga välja, sest õiget aega juhib JavaScript. */
.clock-second {
	animation: none;
}
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:900px){
/* Peagi algavate koolituste algne paigutus; upcoming-compact täpsustab allpool praegust vaadet. */
.upcoming {
	grid-template-columns: minmax(0,1fr) 84px;
}
.upcoming .row {
	grid-template-columns: minmax(0,1fr) auto;
}
.upcoming .row .course {
	grid-column: 1/-1;
	grid-row: 1;
}
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:550px){
/* Peagi algavate koolituste algne paigutus; upcoming-compact täpsustab allpool praegust vaadet. */
.upcoming {
	position: relative;
	display: block;
}
.upcoming h2 {
	padding-right: 55px;
}
/* Kursuste kõrval oleva kella kujundus; hilisemad reeglid täpsustavad asukohta. */
.upcoming-clock {
	position: absolute;
	right: 0;
	top: -9px;
	width: 42px;
	margin: 0;
}
.upcoming .row {
	grid-template-columns: 1fr;
}
.upcoming .row .button {
	justify-self: start;
}
}
/* Sekundiosuti: algne CSS-animatsioon lülitatakse hilisema reegliga välja, sest õiget aega juhib JavaScript. */
.clock-second {
	animation: none;
	transform-origin: 0 0;
}
/* Kursuste kõrval oleva kella kujundus; hilisemad reeglid täpsustavad asukohta. */
.upcoming-clock {
	text-align: center;
	font-size: 12px;
}
.upcoming-clock svg {
	width: 100%;
	display: block;
}
/* Digitaalse kella võrdselt laiad numbrid ei hüple sekundite vahetumisel. */
.upcoming-clock time {
	font-variant-numeric: tabular-nums;
	font-weight: 750;
}
/* Rühmitatud toimumiste eraldusjoon; praegune avaleht näitab üksikuid kursuseridu. */
.upcoming-group + .upcoming-group {
	border-top: 1px solid var(--line);
}
.upcoming-group .row + .row {
	border-top: 1px dashed var(--line);
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:550px){
.upcoming-clock span, .upcoming-clock time {
	display: none;
}
}
/* Praegune avalehe variant: kaks koolituserida ja kell ühises plokis. */
.upcoming.upcoming-compact {
	display: block;
}
/* Loend ja kell kõrvuti ühes raamis; align-items: center tsentreerib need vertikaalselt. */
.upcoming-compact .upcoming-panel {
	display: grid;
	grid-template-columns: minmax(0,1fr) 116px;
	gap: 20px;
	align-items: center;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: white;
}
/* Ühises plokis eemaldatakse loendi enda ääris, et ei tekiks topeltraami. */
.upcoming-compact .schedule {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
/* Kell paigutatakse oma veeru keskele. */
.upcoming-compact .upcoming-clock {
	position: static;
	align-self: center;
	width: 100%;
	margin: 0;
}
.upcoming-compact > p {
	margin: 10px 0 0;
}
.upcoming-compact h2 {
	padding-right: 0;
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:900px){
/* Loend ja kell kõrvuti ühes raamis; align-items: center tsentreerib need vertikaalselt. */
.upcoming-compact .upcoming-panel {
	grid-template-columns: minmax(0,1fr) 84px;
	gap: 12px;
}
}
/* Järgnevad kohandused kehtivad ainult sulgudes näidatud ekraanilaiuse või kasutaja eelistuse korral. */
@media(max-width:550px){
/* Loend ja kell kõrvuti ühes raamis; align-items: center tsentreerib need vertikaalselt. */
.upcoming-compact .upcoming-panel {
	grid-template-columns: minmax(0,1fr) 62px;
	padding: 10px;
	gap: 8px;
}
.upcoming-compact .upcoming-clock time {
	display: inline;
}
}

/* Ilma kellata kursuselehe kalender kasutab kogu ploki laiust. */
.upcoming-compact.upcoming-no-clock .upcoming-panel {
    grid-template-columns: minmax(0, 1fr);
}
/* Kursuste eksamiskeemid: sama loetav laius nagu Foundation Bridge lehel.
   Väikesel ekraanil kahanevad proportsionaalselt sisuala laiuseks. */
.legacy-content img.exam-diagram {
    display: block;
    width: 700px;
    max-width: 100%;
    height: auto;
}
/* MSF päis: uus foto sulandub laia, mitmeastmelise maskiga tausta.
   Läbipaistvus algab nullist; eraldi alumine kattekiht ei tekita serva. */
.page-banner-msf::before {
    inset: 0 0 0 24%;
    background-image: url("images/Banner/MSF-genereeritud.png");
    background-position: right center;
    opacity: .34;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.02) 12%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.38) 46%, rgba(0,0,0,.72) 65%, #000 86%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.02) 12%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.38) 46%, rgba(0,0,0,.72) 65%, #000 86%);
}
.page-banner-msf::after {
    content: none;
}
@media(max-width:650px) {
    .page-banner-msf::before {
        inset: 0 0 0 12%;
        opacity: .22;
    }
}
/* PIC: muudatuse kavandamine ja elluviimine; MSF-iga sama sujuv hajutus. */
.page-banner-pic::before {
    background-image: url("images/Banner/PIC-genereeritud.png");
}
/* Producti ja Service'i oma ikoonipildid; ühine sujuv hajutus. */
.page-banner-product::before {
    background-image: url("images/Banner/Product-genereeritud.png");
}
.page-banner-service::before {
    background-image: url("images/Banner/Service-genereeritud.png");
}
/* Kursuste oma päisepildid: ühine sujuv üleminek rohelisse tausta. */
.page-banner-experience::before { background-image: url("images/Banner/Experience.jpg"); background-position: right center; }
.page-banner-transformation::before { background-image: url("images/Banner/Transformation-genereeritud.png"); }
.page-banner-apo::before { background-image: url("images/Banner/APO.png"); background-position: right center; }
.page-banner-phoenix::before { background-image: url("images/Banner/Phoenix Project.png"); background-position: right center;  background-size: auto 100%; }
.page-banner-carworks::before { background-image: url("images/Banner/Carworks.jpg"); background-position: right center;  background-size: auto 100%; }
/* DevOps: lõpmatuse märk ja arenduse ning käituse ühine töövoog. */
.page-banner-devops::before { background-image: url("images/Banner/DevOps-Foundation-genereeritud.png"); }

/* Väheste kohtade teade; viimase vaba koha puhul sama punane rõhk nagu täitunud kursusel. */
.seat-warning { margin: .4em 0 0; color: #80500b; font-weight: 700; font-size: .95em; }
.seat-warning.seat-warning-last { color: #b42318; }