/*	Copyright ZenuHit @ 2023.
	2023-05-25 @ 20:02. */

@font-face {font-family: GillSans; src: url("/I/Ttf/GillSans.otf")} @font-face {font-family: GillSans; src: url("/I/Ttf/GillSans-Bold.otf"); font-weight: bold} @font-face {font-family: Handwrite; src: url("/I/Ttf/AmaticSC-Regular.ttf")} @font-face {font-family: Handwrite; src: url("/I/Ttf/Amatic-Bold.ttf"); font-weight: bold} :root {color-scheme: light dark; color-scheme: normal; --Site_MaxWidth: 1024px; --Site_MinHeight: 100vh; --Zead_MinHeight: 60px; --Zoot_MinHeight: 20px; --Gap: 1em; --Gap_M: calc(var(--Gap) / .75); --Gap_L: calc(var(--Gap) / .50); --Farg_1: #064022; --Farg_2: #4c8b65; --Farg_3: #afd7bf; --Farg_V: #ffffff; --Farg_S: #000000; --Farg_G: #176105; --Farg_O: #FF9700; --Farg_R: #d80a12; --Farg_B: #eeeeee; --Rgb_1: 6, 64, 34; --Rgb_2: 76, 139, 101; --Rgb_3: 175, 215, 191; --Rgb_V: 255, 255, 255; --Rgb_S: 0, 0, 0; --Rgb_G: 23, 97, 5; --Rgb_O: 255, 151, 0; --Rgb_R: 216, 10, 18; --Rgb_B: 238, 238, 238; --Font_Rubrik: GillSans, Sans-Serif; --Font_RubrikL: Tahoma, Sans-Serif; --Font_Text: Georgia, Serif; --Font_Not: Handwrite, 'Brush Script MT', 'Comic Sans MS', Cursive; --Font_Mono: MonoType, 'Courier New', Courier, Monospace} Html {--Bak: var(--Farg_B); --BlendMode_Body: soft-light; --BlendMode_Head: screen} Body {--Bak: linear-gradient(60deg, rgb(var(--Rgb_3), .4), rgb(var(--Rgb_2), .4), rgb(var(--Rgb_3), .2))} @media Screen AND (Min-width: 600px) {:root {--Site_MaxWidth: 1024px; --Site_MinHeight: 50vh; --Zead_MinHeight: 120px; --Zoot_MinHeight: 40px; --Gap: 2em}} *, *::before, *::after {box-sizing: border-box; padding: 0; margin: 0; border: 0} * {font-family: inherit} ::selection {background: var(--Farg_3); color: var(--Farg_1)} :focus, Input:hover {box-shadow: 0 0 4px var(--Farg_1); outline-color: transparent} ::-moz-focus-inner {border: 0} Html, Body {min-height: 100vh; background-attachment: fixed} Html {line-height: 1.5; -webkit-text-size-adjust: 100%; font-size: 62.5%; font-family: cursive; color: var(--Farg_1); scroll-behavior: smooth} Div.Zody {display: none} Hr {border: 2px solid var(--Farg_2); margin: 0.4rem 0; width: 100%} Ul, Ol {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2em; padding: 0; list-style-type: none} Li {font-family: var(--Font_Not)} Li A {display: block; padding: 0.4em; letter-spacing: 0.2em} Nav {font-family: var(--Font_Rubrik)} Nav > Ul, Nav > Ol {font-size: 1.2rem; line-height: 1} Nav Li {width: 100%} Label > #Ham {position: absolute !important; top: -9999px !important; left: -9999px !important} ::Marker {color: var(--Farg_R)} Li:hover::Marker {color: var(--Farg_G)} H1, H2, H3, H4, H5, H6 {font-family: var(--Font_Rubrik); font-weight: bold; line-height: 1.2} H1 {font-size: 2rem} H1 P {font-weight: normal; font-family: var(--Font_Not); font-size: 0.6em; line-height: 1} H1 > P + P {border: 1px solid red} H2 {font-size: 1.6rem} H3 {font-size: 1.2rem} P {line-height: 1.4} P + P {margin-top: 2em} P.Bold + P {margin-top: 0.4em} P + H2 {margin-top: 2em} .Vanster {text-align: left} .Hoger {text-align: right} .Mitten {text-align: center} .MittenMitt {display: grid; place-items: center} .Bold {font-weight: bold} .Bolder {font-weight: bolder} .Stor {font-size: large} .Storre {font-size: larger; line-height: 1.5} .Zidden {display: none} .Obs {font-weight: bold; font-style: normal; color: var(--Farg_O)} .Kol, .Kol2, .Kol3 {columns: 20ch 3; column-rule: 1px dotted var(--Farg_2); column-gap: 4em; text-align: justify} .Kol2 {column-count: 2} .Kol3 {column-count: 3} .Kol > P ~ P {text-indent: 1em} .Kol3 > P:first-child {column-span: all} A, A:visited, A:hover, A:active, A:focus-within {color: inherit; text-decoration: none; background-color: transparent; border: none} A Img {border: none} Nav A, Nav A:visited {color: inherit} Ol A, UL A {width: 100%; height: 100%} Img, Object, Picture, Canvas, Svg {max-width: 100%; height: auto; display: block; border-style: none} Main Picture, Main .Media {background: radial-gradient(circle at top left, rgb(var(--Rgb_1), 1) 0%, rgb(var(--Rgb_2), 1) 35%, rgb(var(--Rgb_1), 1) 100%); width: fit-content; border: 1px solid var(--Farg_1)} A Svg {margin: 0 4px 0 0} A.SvgLank {position: relative; display: inline-block} A.SvgLank:after {position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0} .Logo1 A.SvgLank, .Logo1 A.SvgLank:hover {cursor: w-resize} .Logo1 A.SvgLank:after {cursor: not-allowed} Table {empty-cells: show; border-collapse: collapse; border: none; font-size: 1rem; width: 100%} Th, Td {text-align: start; font-family: var(--Font_Mono); font-size: 1.2rem; line-height: 1.6} Td + Td, Th + Th, Th + Td {padding-left: 0.4em} Caption {caption-side: bottom; text-align: center; font-size: inherit; font-family: var(--Font_Not); color: inherit} tHead Td {font-weight: bold} Div > Table {overflow-x: auto} #zModal, #zMedia, #zModalKnapp {display: none} #Zhange {display: none} .Cookie {background: var(--Farg_1); border: 0.5em solid var(--Farg_V); color: var(--Farg_V); position: fixed; left: 0; right: 0; bottom: -100%; margin: 0 auto; padding: 2em; width: 400px; font-size: 1.4rem; text-align: center; z-index: 999; transition: 600ms} .Cookie.Aktiv {bottom: 100px} .Cookie > Div {padding-bottom: 2em} .Cookie .Knapp {font-size: inherit; padding: 1em} .Cookie .Knapp + .Knapp {margin: 0 0 0 2em} .Cookie .Knapp.Japp {background: var(--Farg_G)} .Cookie .Knapp.Nopp {background: var(--Farg_R)} Html.OhHelgaNatt {color-scheme: dark; --BlendMode_Body: color-burn; --BlendMode_Head: luminosity; --Bak: var(--Farg_S); --Farg_1: #afd7bf; --Farg_2: #4c8b65; --Farg_3: #064022; --Rgb_1: 175, 215, 191; --Rgb_2: 76, 139, 101; --Rgb_3: 6, 64, 34} @media (prefers-color-scheme: dark) {:root {--BlendMode_Body: color-burn; --BlendMode_Head: luminosity; --Bak: var(--Farg_S); --Farg_1: #afd7bf; --Farg_2: #4c8b65; --Farg_3: #064022; --Rgb_1: 175, 215, 191; --Rgb_2: 76, 139, 101; --Rgb_3: 6, 64, 34} Html {background-color: var(--Bak); color: var(--Farg_B)} Body {--Bak: linear-gradient(120deg, rgb(var(--Rgb_3), .9), rgb(var(--Rgb_3), .8), rgb(var(--Rgb_3), .6)); background-color: var(--Farg_S)}} @media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important}} @media only screen and (max-width: 440px) {#zSiten {} #Zhange {display: block; border: 2px dashed var(--Farg_1); padding: 2em; color: var(--Farg_1); text-align: center} .Cookie {width: 90%} .Cookie.Aktiv {bottom: 20px}} #zSiten {display: grid; overflow-x: hidden; gap: var(--Gap); grid-auto-rows: var(--Zead_MinHeight) 1fr var(--Zoot_MinHeight); grid-auto-rows: auto 1fr auto; min-height: var(--Site_MinHeight); max-width: var(--Site_MaxWidth)} #zHeadB {min-height: var(--Zead_MinHeight)} .Logo1 {max-width: 100px} #zBodyB {display: grid; ZZalign-items: self-start; grid-template: "Rubrik" "Main" "Kolumn"; gap: 2em; padding: 0 1em} .Rubrik {grid-area: Rubrik} .Text {grid-area: Main} .Zolumn {grid-area: Kolumn} .Meny3 {grid-area: Meny3} #zFoot {text-align: center} .Zolumn Li {width: 100%} Body {} .Meny1 {position: absolute; left: 100vw; z-index: 509; transition: left 500ms ease-in-out} .Meny1 Ul {flex-direction: column; gap: 0.4em} .Meny3 {} .Meny3 Ul {display: flex} .Meny3 Li {display: inline-block; width: auto} @media Screen AND (Min-width: 600px) {#zBody {} #zBodyB {grid-template: "Rubrik Rubrik" "Meny3 Meny3" "Main Main" 1fr / 180px auto; gap: var(--Gap)} Body.zKolumn #zBodyB {grid-template: "Rubrik Rubrik Rubrik" "Meny3 Meny3 Kolumn" "Main Main Kolumn" 1fr / auto auto 200px} Main {ZZdisplay: grid; gap: var(--Gap)}} #zHead {position: relative; padding: 20px; border: 2px solid var(--Farg_1)} #zHead .BreadCrum, #zHead .Datum {position: absolute; top: 0.6em} #zHead .Datum {right: 0.6em} .Logo1 {max-width: 130px; max-height: 200px} @media Screen AND (Min-width: 600px) {:root {--Site_MaxWidth: 1024px; --Site_MinHeight: 100vh; --Zead_MinHeight: auto}} .LaddaNer {border: 2px solid var(--Farg_2); background-color: var(--Farg_3); float: right; padding: 1em; margin-bottom: 1em; margin-left: 4em; max-width: 120px} .LaddaNer A {} .LaddaNer Span {margin-top: 0.6em; display: inline-block} .LaddaNer H3 {margin-bottom: 0.6em} .LaddaNer::after {content: ''; clear: right} .LaddaNer Span {font-size: 1rem; font-family: var(--Font_RubrikL)} Main .Media {margin-top: var(--Gap)} .MenyX {position: absolute; top: 3.2em; right: 1em; height: 20px; z-index: 510} Label > #Ham {position: absolute !important; top: -9999px !important; left: -9999px !important} #Ham:checked + .Burgare {transform: rotate(45deg)} #Ham:checked + .Burgare::before {opacity: 0} #Ham:checked + .Burgare::after {transform: translateY(-4px) rotate(-90deg)} Label.Ham {display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; height: 20px} .Burgare, .Burgare::before, .Burgare::after {content: ''; display: block; background: var(--Farg_B); height: 4px; width: 20px; border-radius: 4px; transition: all ease-in-out 500ms} .Burgare::before {transform: translateY(-8px)} .Burgare::after {transform: translateY(4px)} .Burgare, .Burgare::before, .Burgare::after {background: var(--Farg_1)} Span.Ham {margin-bottom: -1em; display: none} .Hamburgad {height: 0; padding-top: 0; padding-bottom: 0; ZZoverflow: hidden} .Meny1.Hamburgad {left: 0; top: 0; width: 100vw; height: 100vh; padding: 6em 4em; backdrop-filter: blur(0.6em); -webkit-backdrop-filter: blur(0.6em); background-color: rgba(var(--Rgb_2), 0.6)} .Meny1.Hamburgad > Ul {flex-direction: column; gap: var(--Gap)} .Meny1.Hamburgad Li {border: 1px solid var(--Farg_B); background-color: var(--Farg_3); color: var(--Farg_1); width: 100%; transition: background 750ms ease-in-out; box-shadow: 0 0 0.6em var(--Farg_1)} .Meny1.Hamburgad Li:hover {border: 1px solid var(--Farg_3); background-color: var(--Farg_1); color: var(--Farg_3)} .Meny1.Hamburgad Li:hover {box-shadow: 0 0 0.6em var(--Farg_1)} .Meny1.Hamburgad Li:last-child {margin: 0} .Auto {} .Auto.Topp {margin-top: auto} .Auto.Botten {margin-bottom: auto} .AutoL {margin-left: auto} @media Screen AND (Max-width: 319px) {.Meny1 {display: none}} @media Screen AND (Min-width: 600px) {.MenyX {display: none} .Meny1 {position: relative; left: 0}} @media Screen AND (Max-width: 319px) {.Meny1 {display: none}} @media Screen AND (Min-width: 600px) {.MenyX {display: none} .Meny1 {position: relative; left: 0; transition: left 500ms ease-in-out}} .Meny1 A {padding: .6em} .Meny1 Ul {margin-top: 2em; flex-direction: row; gap: var(--Gap); font-size: 1.6rem} .Meny1 Li {border: 1px solid var(--Farg_B); background-color: var(--Farg_3); color: var(--Farg_1); width: auto; transition: background 750ms ease-in-out} .Meny1 Li:hover {border: 1px solid var(--Farg_3); background-color: var(--Farg_1); color: var(--Farg_3)} .Meny3 {margin: 1em 0 2em 0; padding: 0.4em 0.4em; box-shadow: 0 0 12px rgba(var(--Rgb_2), 0.8); border: none} .Meny3:hover {background: linear-gradient(36deg, rgba(var(--Rgb_2), 0.4), rgba(var(--Rgb_2), 0.1), rgba(var(--Rgb_2), 0.3))} .Meny3 Ul {display: flex; gap: 0.4em} .Meny3 Ul Li {display: inline-block; width: auto; padding: 0.2em 0.4em 0.2em 0.4em} .Meny3 Li:hover {border: none; background: transparent; box-shadow: 0 0 1em rgba(var(--Rgb_2), 0.8)} @supports not (gap: 1em) {.Meny3 Li + Li {margin-left: 0.4em}} Html {background-image: url('../Img/Layout/Body.jpeg'); background-size: cover; background-position: center left; background-color: var(--Bak); background-blend-mode: var(--BlendMode_Body); z-index: -1} Body {} #zHead {background-color: rgb(var(--Rgb_2), 0.6); box-shadow: 0 0.8em 0.4em -0.4em var(--Farg_S)} .Logo1 {transition: width 500ms ease-in-out} .Meny1 Li:hover {color: var(--Farg_B); background-color: var(--Farg_1)} #zBody {} .Text {flex: 1} .Text > .Rad {display: flex; flex-wrap: wrap; gap: 2em; margin-bottom: 1em; justify-content: space-between} .Text > .Rad > P {flex: 1; margin: 0} .Text Ul, .Text Ol {align-items: start; justify-content: left} .Text Li {flex: 0 0 calc(100% - var(--Luft_V))} Time.Datum {position: relative; display: block; border-top: 2px solid var(--Farg_1); margin-top: 1em} #zFoot {padding: 2em; border: 2px solid var(--Farg_1); border-bottom-left-radius: 2em; border-bottom-right-radius: 2em} @media Screen AND (Max-width: 319px) {} @media Screen AND (Min-width: 600px) {#zSiten {margin: 0 auto 0 0} #zHead {background-color: var(--Farg_3); background-image: url('../Img/Layout/HeadTop.jpeg'); background-size: cover; background-position: center 45%; background-blend-mode: var(--BlendMode_Head); border-left: none; border-right: none} .Logo1 {max-width: 200px} .Meny1 Li:last-child {margin-left: auto} #zBody {margin: 0 4em} #Rubrik {font-size: 2.4rem} #zBodyB {} .Text Ul, .Text Ol {gap: var(--Gap)} .Text Li {flex-basis: calc(50% - var(--Luft_V) - var(--Gap))} .Zolumn {flex: 0 0 25rem; border: 2px solid var(--Farg_1); padding: 2em}} @media Screen AND (Min-width: 800px) {.Text Li {flex-basis: calc(30% - var(--Luft_V) - var(--Gap))}} @media Screen AND (Min-width: 1024px) {Body {padding: 2em} #zBody {margin: 0em} #zHead {border-left: 2px solid var(--Farg_1); border-right: 2px solid var(--Farg_1)}} #zSiten {color: var(--Farg_Text)} #zHead {background-color: rgb(var(--Rgb_2), 0.6); font-family: var(--Font_Rubrik)} #zBody {} .Text {font-family: var(--Font_Text); font-size: 1.4rem} .Text > .Rad {display: flex; flex-wrap: wrap; gap: 2em; justify-content: space-between} .Text > .Rad > P {flex: 1; margin: 0} .Text Ul {list-style-image: url('../Img/Ikoner/16.png')} .Text Li {--Margin_Left: 24px; --Padding_Left: 4px; --Luft_V: calc(var(--Margin_Left) + var(--Padding_Left)); margin-left: var(--Margin_Left); padding-left: var(--Padding_Left); font-size: 1.8rem; line-height: 1.2} .Zolumn {font-family: var(--Font_Not); font-size: 1.4rem} .Kolumn {margin-top: 1em; padding: 0.5em; border: 1px solid var(--Farg_1)} .Kolumn:first-child {margin-top: 0em} .Kolumn Span:first-child {font-family: var(--Font_Rubrik); display: block; margin-bottom: 0.4em} #zFoot {} Nav Li {font-weight: bold; letter-spacing: 0.1em} P .Bold, P > B:first-child {font-family: var(--Font_Rubrik)} Time.Datum {font-family: var(--Font_RubrikL); font-size: 1rem; text-align: right} @media Screen AND (Min-width: 1024px) {Nav Li {font-size: 1.4rem}} @media (prefers-color-scheme: dark) {} @media (hover: hover) {} #zModal {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgb(var(--Rgb_B), 0.8); z-index: 99999} #zModal, #zModal Nav {font-family: verdana, sans-serif; color: var(--Farg_1); font-size: 1.2rem} .Modal {display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%); padding: 2em; box-shadow: 0 0 50px 15px var(--Farg_3); background-color: var(--Farg_3); overflow: auto; line-height: 1.4; font-weight: normal; color: var(--Farg_1)} .Modal .Info {font-style: italic} .Modal .Error {color: var(--Farg_R); font-weight: bold} .Modal P + P {margin-top: 1.4em} .Modal Hr {border: 2px solid var(--Farg_1); margin: 0.4em 0 0.4em 0; padding: 0} .Modal .Ztart {font-size: 1.4em; font-weight: bold} .Modal .Bold {font-weight: bold} .Modal .Body {flex: 1; border-bottom: 2px solid var(--Farg_1)} .Modal .Meny {position: sticky; top: -1.8em; text-align: center; font-size: 1.2em; color: var(--Farg_1); padding-bottom: 1em; border: 1px solid var(--Farg_3); background-color: var(--Farg_3)} .Modal .Meny A {display: inline-block; color: inherit; margin: 0 1em 0 0; padding: 0 0.6em 0.2em 0.6em; line-height: 2} .Modal .Meny A:last-child {margin: 0} .Modal .Meny A:hover {background-color: var(--Farg_1); color: var(--Farg_2)} .Modal .Meny.Sub A {margin: 0; padding: 0; background-color: transparent} .Modal .Meny.Sub A:hover {border-bottom: 2px solid var(--Farg_1); padding-bottom: 0} .Modal .Head {padding: 1.4em; margin: 0 0 1em 0; border: 4px solid var(--Farg_1); background-color: var(--Farg_2); font-size: 1.6em; font-weight: bold; zzz-index: 2} .Modal .Foot {border: 4px solid red; padding: 1em; min-height: 2em; background-color: green; zzz-index: 2} .Modal Table {border: 2px solid var(--Farg_1); margin: 0 0 2em 0; color: inherit; font-family: monospace} .Modal Table Tr {line-height: 1.4} .Modal Table Tr:hover {background-color: var(--Farg_B)} .Modal Table Tr.Splitt Td {border-right: 10px solid var(--Farg_1)} .Modal Table Tr.Splitt > Td {margin: 0; padding: 0} .Modal Table Th:first-child, .Modal Table Td:first-child {padding: 0 0.4em; background-color: var(--Farg_1); color: var(--Farg_2)} .Modal Table Th:first-child {text-align: right} .Modal Table Th:last-child, .Modal Table Td:last-child {padding-right: 0.4em} .Modal Table Th, .Modal Table Td {padding-left: 1em; letter-spacing: 0; font-size: 1.2em; line-height: 2} .Modal Table .Hoger {text-align: right; padding-right: 0.4em} .Modal Table tHead {border-bottom: 1px solid var(--Farg_2)} .Modal Table tBody {margin: 2em; border: none} .Modal Table Table {border: none; margin-bottom: 0.4em} .Modal .PerHapsText {color: var(--Farg_O); font-weight: bold} @media only screen and (max-width: 800px) {.Modal {width: 80%; height: 90%}} #zModalKnapp {position: fixed; right: 10px; bottom: 10px; width: 22px; height: 22px; font-family: verdana, sans-serif; font-weight: bold; font-size: 1.4rem; line-height: 1; color: var(--Farg_2); padding: 3px; border: 1px solid var(--Farg_B); border-radius: 50%; cursor: pointer; background-color: var(--Farg_1); animation: Bakfarg 4s; z-index: 99999} @keyframes Bakfarg {from {background-color: var(--Farg_2)} to {background-color: var(--Farg_1)}} #zModalKnapp.Error {background-color: var(--Farg_R); animation: BakfargError 4s 4s; animation-iteration-count: 4} @keyframes BakfargError {from {background-color: var(--Farg_3); color: var(--Farg_R)} to {background-color: var(--Farg_R); color: var(--Farg_3)}} #zModal Span.Stang {position: fixed; top: 0; right: -24px; width: 24px; height: 2em; font-size: 1.8rem; color: var(--Farg_1); line-height: 2; text-align: center; border-top-right-radius: 8px; background-color: var(--Farg_3); cursor: pointer} .Shide {} .Shide .Hide {display: none} .Shide .Show {display: block !important} .Clicked {border-bottom: 2px solid var(--Farg_2)}