/*	Copyright ZenuHit @ 2023.
	2023-11-18 @ 08:10. */

:root {--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: #0071ae; --Farg_2: #ffcb05; --Farg_3: #fff5cd; --Farg_V: #ffffff; --Farg_S: #000000; --Farg_G: #176105; --Farg_O: #FF9700; --Farg_R: #d80a12; --Farg_B: #eeeeee; --Rgb_1: 0, 113, 174; --Rgb_2: 255, 203, 5; --Rgb_3: 255, 245, 205; --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: 'Rock Salt'; --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; --Farg_Schema: normal} 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: 1000px) {: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); color-scheme: var(--Farg_Schema); 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; text-wrap: balance} 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 {--Farg_Schema: dark; --Farg_1: #fff5cd; --Farg_2: #ffcb05; --Farg_3: #0071ae; --Rgb_1: 255, 245, 205; --Rgb_2: 255, 203, 5; --Rgb_3: 0, 113, 174; --BlendMode_Body: color-burn; --BlendMode_Head: luminosity; --Bak: var(--Farg_S)} @media (prefers-color-scheme: dark) {:root {--BlendMode_Body: color-burn; --BlendMode_Head: luminosity; --Bak: var(--Farg_S); --Farg_1: #fff5cd; --Farg_2: #ffcb05; --Farg_3: #0071ae; --Rgb_1: 255, 245, 205; --Rgb_2: 255, 203, 5; --Rgb_3: 0, 113, 174} 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}} .Hover {position: relative; padding: 0 0.2em} .Hover::before {content: ""; display: block; height: 0.4em; background: var(--Farg_2); position: absolute; top: .4em; left: 0; right: 0; transform: scale(0, 1); transform-origin: left; transition: transform ease-in-out 950ms; z-index: -1} .Hover:hover::before, .Hover:focus::before {transform: scale(1, 1); transform-origin: right; transition: transform ease-in-out 350ms} A[href^="mailto:"].Hover::after {content: "@"; position: absolute; top: -300%; left: 50%; transform: translate(-50%); font-size: 8em; color: var(--Farg_3); opacity: .2; z-index: -2; transition: opacity 750ms} A[href^="mailto:"].Hover:hover::after, A[href^="mailto:"].Hover:focus::after {opacity: 0.9} .Byar .Hover::before {top: 1.5em} Img {width: auto} :root {--gradient-light: linear-gradient(145deg, rgba(var(--Rgb_B), 0), rgba(var(--Rgb_B), .25)); --gradient-dark: linear-gradient(145deg, rgba(0,0,0,0), rgba(0,0,0,.25))} #zSiten {--Debugg_Outline: 1px solid red; display: grid; gap: calc(var(--Gap) * 2); margin: 0 auto; max-width: var(--Site_MaxWidth); min-height: var(--Site_MinHeight); color: var(--Farg_1); position: relative; z-index: 2} #zHead {min-height: var(--Zead_MinHeight); padding: var(--Gap); border: 2px solid var(--Farg_1); background-color: var(--Farg_2); background-image: var(--gradient-dark)} #zHead Img {height: 100px} #zBody {display: grid; gap: var(--Gap); text-align: center} #zBodyH {} #zBodyB {font-family: var(--Font_Text); display: grid; gap: var(--Gap)} .BodyB P {font-size: 1.4rem; line-height: 1.6} #zBodyF {} #zFoot {padding: 10px 20px} Html {scroll-snap-type: y proximity} Body {background-color: var(--Farg_3); background-image: url("/I/Img/Bg2.jpeg"); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-blend-mode: var(--BlendMode_Body)} H3 {margin: 0 auto} #zHead {border: none; height: auto; background: var(--Farg_1); min-height: 1em; padding: 0.6em; color: var(--Farg_B); text-align: center} .Logo1 {height: 6rem} .Logo1 Img {display: inline; max-height: 100%} Section {display: flex; justify-content: center; align-items: center; gap: var(--Gap); min-height: 100vh} Section.Zubbar {flex-direction: column} .Zubbar {display: flex; flex-wrap: wrap; justify-content: center; gap: 2em} .Zubbar Img {max-height: 100%; margin: 0 auto} .Zubbar .Zubb {height: 12rem; min-width: 30rem; text-align: center} Section, .Head {scroll-snap-align: start} .Geo {display: flex; justify-content: center; align-items: center; flex-direction: column; background: linear-gradient(40deg, rgb(var(--Rgb_2), 0.8), rgb(var(--Rgb_2), 0.1), rgb(var(--Rgb_2), 0.8)); min-height: 25vh; margin-bottom: var(--Gap); transition: min-height 500ms} .Geo P + P {margin-top: 1rem} .Postis {display: flex; flex-wrap: wrap; text-align: center; gap: var(--Gap)} .Postis A {display: flex; justify-content: center; align-items: center; letter-spacing: normal; line-height: 1} .Postis > Li {flex: 1 1 33%; background: var(--Farg_2); margin: 0; height: 4em; transition: background 1000ms ease-in-out, color 1000ms ease-in-out} .Postis > Li:hover, .Postis > Li:focus {background: var(--Farg_3); color: var(--Farg_2)} .Byar {flex-direction: column; padding: 2em; background: rgb(var(--Rgb_2), 0.6)} .Byar .Info {display: flex; flex-wrap: wrap; margin: auto 0; gap: 4em; width: 100%} .By {flex: 1 1 30%; text-align: center} .By P Span {display: block} .By > P:first-of-type {margin: 0.6em 0 0 0} .Kontakt {flex-direction: column; position: relative; padding: 0} .Kontakt .Hover:first-child {position: absolute; top: 2em; right: 2em} @media only screen and (orientation: landscape) {.Geo {background: linear-gradient(40deg, rgb(var(--Rgb_3), 0.8), rgb(var(--Rgb_3), 0.4), rgb(var(--Rgb_3), 0.8))} .Kontakt {justify-content: flex-end; align-items: center; padding: 2em}} @media Screen AND (Max-width: 600px) {Section {padding: 2em} .Geo {min-height: 50vh} .Kontakt .Hover:first-child {right: 1em}} @media Screen AND (Max-width: 480px) {.Byar {margin: 0} .Byar .Info {gap: calc(var(--Gap) - 1em)} .By {flex: 100%} .By > Span {font-size: 3em} .By P Span {display: inline} .By P Span + Span {padding-left: 1em} .By > P:first-of-type {margin: 0.1em 0 0 0; font-size: 1.4em; color: var(--Farg_G)} .By P + P {margin-top: 0.2em} .Postis {padding: 0 1em; gap: calc(var(--Gap) - 1em)} .Postis > Li {flex: 100%} .Zubbar {gap: 4em}} @media Screen AND (Min-width: 1000px) {Body {padding-top: 2em} .Geo {min-height: 50vh; margin: 0 calc(-50vw + 50%) calc(var(--Gap) * 2)}} @font-face {font-family: Futura; src: url('/I/Ttf/Futura-Book.otf')} @font-face {font-family: FuturaBold; font-weight: bold; src: url('/I/Ttf/Futura-Bold.otf')} @font-face {font-family: MonoType; src: url('/I/Ttf/CourierTwelveMTStd.otf')} H1 {font-size: min(14vw, 10em); line-height: normal} H3 {font-size: min(8vw, 4em); line-height: 1.8em; text-align: center; color: var(--Farg_1); max-width: 18ch} Li {font-family: var(--Font_RubrikL)} #zHead {font-size: 1.6em; line-height: 1.6em; letter-spacing: 0.2em; font-family: var(--Font_RubrikL)} .Postis {font-size: 2em; color: var(--Farg_3)} .Skugga {text-shadow: 0 0 0.6em var(--Farg_3)} .Kontakt {font-size: 4em} .By > Span {font-size: 4em; line-height: normal} .By P Span {font-size: 1.2em} .By > P:first-of-type {font-size: 2em; color: var(--Farg_1)} .Geo P {font-size: 2rem} @media Screen AND (Max-width: 480px) {H3 {line-height: 1.2em}} @media Screen AND (Min-width: 1000px) {H3 {text-decoration: underline}} :root {--Bg: linear-gradient(69deg, var(--Farg_1), #0071ae, #0071ae, #ffcb05, #fff5cd)} html {--BlendMode_Body: luminosity; --BlendMode_Body: saturation; --BlendMode_Body: hue; --BlendMode_Body: darken; --BlendMode_Body: color; --BlendMode_Body: exclusion; --BlendMode_Body: difference; --BlendMode_Body: soft-light; --BlendMode_Body: hard-light; --BlendMode_Body: color-burn; --BlendMode_Body: color-dodge; --BlendMode_Body: overlay; --BlendMode_Body: screen; --BlendMode_Body: normal; --BlendMode_Body: lighten; --BlendMode_Body: multiply} H1 {background-image: var(--Bg); background-size: 400%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: BgAnimation 18s infinite alternate} @keyframes BgAnimation {0% {background-position: left} 100% {background-position: right}} .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: 600px) {.Meny1 {display: none}} @media Screen AND (Min-width: 1000px) {.MenyX {display: none} .Meny1 {position: relative; left: 0}} Label.Ham {position: absolute; top: 0em; right: 1em; height: 44px} #SolUppNer {display: grid; align-content: center; border: 1px solid var(--Farg_1); padding: 1em; background-color: rgba(var(--Rgb_B), .4); font-family: var(--Font_Mono); font-size: 1.2rem; text-align: center} #SolUppNer > Div {display: grid; grid-auto-flow: column; grid-auto-columns: 1fr} #SolUppNer Img {display: inline-block} #SolUppNer P + P {margin: 0} #SolUppNer .MittenMitt {display: grid} @media Screen AND (Min-width: 1000px) {#SolUppNer {min-height: 50vh} #SolUppNer .Storre {line-height: 1.2; flex: 2}} @media Screen AND (Max-width: 600px) {#SolUppNer > .Info {grid-auto-flow: row}} #SolUppNer {font-family: var(--Font_RubrikL); color: rgb(var(--Rgb_1), .8); text-shadow: 1px 1px rgb(var(--Rgb_S), .8); font-size: 1.8em} .NotaBene {position: relative; display: block; padding: 2rem; border: 0.4em solid var(--Farg_2); border-left: 2em solid var(--Farg_2); color: var(--Farg_2); font-family: var(--Font_RubrikL); font-size: 1.4em; line-height: 1.2em; letter-spacing: 0.1rem} .NotaBene .NotaBene Hr {border-color: currentColor} .NotaBene > Span:first-child {position: absolute; top: 0; left: 0; padding: 0.2rem 0.6rem 0.6rem 0; margin: 0 0.6rem 0.6rem -1.4em; background-color: var(--Farg_2); border-bottom-right-radius: 0.6rem; font-family: 'Rock Salt'; font-weight: bold; color: var(--Farg_B)} .NotaBene Span + P, .NotaBene Span + Div {margin-top: 2rem; background: purple} .NotaBene Form > .Rut {margin: 1em 0 0 0; gap: 1em} .NotaBene P {margin: 1em} .NotaBene > P {font-family: Handwrite, 'Brush Script MT', 'Comic Sans MS', Cursive; font-size: 1.6rem; line-height: 1.2em} .NotaBene:empty {display: none} .NotaBene.Noop, .NotaBene.Noop > A.PerHaps, .NotaBene.Noop > Li.PerHaps {border-color: var(--Farg_R); color: var(--Farg_R)} .NotaBene.Noop > Span:first-child {background-color: var(--Farg_R)} .NoopBak {background-color: var(--Farg_R)} .NoopText {color: var(--Farg_B)} .NoopBorder {border-color: var(--Farg_R)} .NotaBene.PerHaps, .NotaBene.PerHaps > A.PerHaps, .NotaBene.PerHaps > Li.PerHaps {border-color: var(--Farg_O); color: var(--Farg_O)} .NotaBene.PerHaps > Span:first-child {background-color: var(--Farg_O); color: var(--Farg_R)} .PerHapsBak {background-color: var(--Farg_O)} .PerHapsText {color: var(--Farg_O)} .PerHapsBorder {border-color: var(--Farg_O)} .NotaBene.Jaapp, .NotaBene.Jaapp > A.PerHaps, .NotaBene.Jaapp > Li.PerHaps {border-color: var(--Farg_G); color: var(--Farg_G)} .NotaBene.Jaapp > Span:first-child {background-color: var(--Farg_G)} .JaappBak {background-color: var(--Farg_G)} .JaappText {color: var(--Farg_G)} .JaappBorder {border-color: var(--Farg_G)} :root {} Html.OhHelgaNatt {filter: invert(1) hue-rotate(180deg)} @media (prefers-color-scheme: dark) {Html {--BlendMode_Body: color-burn} Body {ZZbackground-color: var(--Farg_1); color: var(--Farg_B)} #zHead {background: var(--Farg_3)}} #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)}