diff --git a/static/css/main.css b/static/css/main.css index 3130099..356c279 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,3200 +1,17 @@ -@charset "UTF-8"; -@import 'open_sans.css'; -@import "roboto-slab.css"; -@import 'fontawesome-all.min.css'; -/* - Editorial by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ -html, body, div, span, applet, object, -iframe, h1, h2, h3, h4, h5, h6, p, blockquote, -pre, a, abbr, acronym, address, big, cite, -code, del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, b, -u, i, center, dl, dt, dd, ol, ul, li, fieldset, -form, label, legend, table, caption, tbody, -tfoot, thead, tr, th, td, article, aside, -canvas, details, embed, figure, figcaption, -footer, header, hgroup, menu, nav, output, ruby, -section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} +/* Error: @use rules must be written before any other rules. + * , + * 32 | @use 'base/reset'; + * | ^^^^^^^^^^^^^^^^^ + * ' + * sass/main.scss 32:1 root stylesheet */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { +body::before { + font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", + "Droid Sans Mono", monospace, monospace; + white-space: pre; display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: "Error: @use rules must be written before any other rules.\a \2577 \a 32 \2502 @use 'base/reset';\a \2502 ^^^^^^^^^^^^^^^^^\a \2575 \a sass/main.scss 32:1 root stylesheet"; } - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, q:before, q:after { - content: ""; - content: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -body { - -webkit-text-size-adjust: none; -} - -mark { - background-color: transparent; - color: inherit; -} - -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -input, select, textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; -} - -/* Basic */ -@-ms-viewport { - width: device-width; -} -body { - -ms-overflow-style: scrollbar; -} - -@media screen and (max-width: 480px) { - html, body { - min-width: 320px; - } -} -html { - box-sizing: border-box; -} - -*, *:before, *:after { - box-sizing: inherit; -} - -body { - background: #ffffff; -} -body.is-preload *, body.is-preload *:before, body.is-preload *:after, body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after { - -moz-animation: none !important; - -webkit-animation: none !important; - -ms-animation: none !important; - animation: none !important; - -moz-transition: none !important; - -webkit-transition: none !important; - -ms-transition: none !important; - transition: none !important; -} - -/* Type */ -body, input, select, textarea { - color: #7f888f; - font-family: "Open Sans", sans-serif; - font-size: 14pt; - font-weight: 400; - line-height: 1.65; -} -@media screen and (max-width: 1680px) { - body, input, select, textarea { - font-size: 14pt; - } -} -@media screen and (max-width: 1280px) { - body, input, select, textarea { - font-size: 12pt; - } -} -@media screen and (max-width: 360px) { - body, input, select, textarea { - font-size: 12pt; - } -} - -a { - -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - border-bottom: dotted 1px; - color: #f56a6a; - text-decoration: none; -} -a:hover { - border-bottom-color: #f56a6a; - color: #f56a6a !important; -} -a:hover strong { - color: inherit; -} - -strong, b { - color: #3d4449; - font-weight: 600; -} - -em, i { - font-style: italic; -} - -p { - margin: 0 0 2em 0; -} - -h1, h2, h3, h4, h5, h6 { - color: #3d4449; - font-family: "Roboto Slab", serif; - font-weight: 700; - line-height: 1.5; - margin: 0 0 1em 0; -} -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - color: inherit; - text-decoration: none; - border-bottom: 0; -} - -h1 { - font-size: 4em; - margin: 0 0 0.5em 0; - line-height: 1.3; -} - -h2 { - font-size: 1.75em; -} - -h3 { - font-size: 1.25em; -} - -h4 { - font-size: 1.1em; -} - -h5 { - font-size: 0.9em; -} - -h6 { - font-size: 0.7em; -} - -@media screen and (max-width: 1680px) { - h1 { - font-size: 3.5em; - } -} -@media screen and (max-width: 980px) { - h1 { - font-size: 3.25em; - } -} -@media screen and (max-width: 736px) { - h1 { - font-size: 2em; - line-height: 1.4; - } - h2 { - font-size: 1.5em; - } -} -sub { - font-size: 0.8em; - position: relative; - top: 0.5em; -} - -sup { - font-size: 0.8em; - position: relative; - top: -0.5em; -} - -blockquote { - border-left: solid 3px rgba(210, 215, 217, 0.75); - font-style: italic; - margin: 0 0 2em 0; - padding: 0.5em 0 0.5em 2em; -} - -code { - background: rgba(230, 235, 237, 0.25); - border-radius: 0.375em; - border: solid 1px rgba(210, 215, 217, 0.75); - font-family: "Courier New", monospace; - font-size: 0.9em; - margin: 0 0.25em; - padding: 0.25em 0.65em; -} - -pre { - -webkit-overflow-scrolling: touch; - font-family: "Courier New", monospace; - font-size: 0.9em; - margin: 0 0 2em 0; -} -pre code { - display: block; - line-height: 1.75; - padding: 1em 1.5em; - overflow-x: auto; -} - -hr { - border: 0; - border-bottom: solid 1px rgba(210, 215, 217, 0.75); - margin: 2em 0; -} -hr.major { - margin: 3em 0; -} - -.align-left { - text-align: left; -} - -.align-center { - text-align: center; -} - -.align-right { - text-align: right; -} - -main > section > div > h1 { - font-size: 1.5em; - margin: 0 0 0.5em 0; - line-height: 1.3; - color: #3d4449; - font-family: "Roboto Slab", serif; - font-weight: 700; -} - -main > section > div > h2 { - font-size: 1.2em; - margin: 0 0 0.5em 0; - line-height: 1.3; - color: #3d4449; - font-family: "Roboto Slab", serif; - font-weight: 700; -} - -main > section > div > h3 { - font-size: 1.1em; - margin: 0 0 0.5em 0; - line-height: 1.3; - color: #3d4449; - font-family: "Roboto Slab", serif; - font-weight: 700; -} - -main > section > div > h4 { - font-size: 1em; - margin: 0 0 0.5em 0; - line-height: 1.3; - color: #3d4449; - font-family: "Roboto Slab", serif; - font-weight: 700; -} - -small > em { - font-size: 1.4rem; - line-height: 1.4rem; - transform: scale(0.75); - display: inline-block; - color: rgba(0, 0, 0, 0.2); - font-family: "Roboto Slab", serif; - font-weight: 300; - font-style: italic; - max-width: 20vh; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 8px; - padding: 0.25em 0.5em; - float: right; - margin: 0 0 0.25em 0.25em; - background-color: rgba(0, 0, 0, 0.01); -} -@media screen and (max-width: 1680px) { - small > em { - transform: scale(0.65); - } -} -@media screen and (max-width: 980px) { - small > em { - transform: scale(0.55); - } -} -@media screen and (max-width: 736px) { - small > em { - transform: scale(0.5); - } -} - -/* Row */ -.row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; -} -.row > * { - box-sizing: border-box; -} -.row.gtr-uniform > * > :last-child { - margin-bottom: 0; -} -.row.aln-left { - justify-content: flex-start; -} -.row.aln-center { - justify-content: center; -} -.row.aln-right { - justify-content: flex-end; -} -.row.aln-top { - align-items: flex-start; -} -.row.aln-middle { - align-items: center; -} -.row.aln-bottom { - align-items: flex-end; -} -.row > .imp { - order: -1; -} -.row > .col-1 { - width: 8.3333333333%; -} -.row > .off-1 { - margin-left: 8.3333333333%; -} -.row > .col-2 { - width: 16.6666666667%; -} -.row > .off-2 { - margin-left: 16.6666666667%; -} -.row > .col-3 { - width: 25%; -} -.row > .off-3 { - margin-left: 25%; -} -.row > .col-4 { - width: 33.3333333333%; -} -.row > .off-4 { - margin-left: 33.3333333333%; -} -.row > .col-5 { - width: 41.6666666667%; -} -.row > .off-5 { - margin-left: 41.6666666667%; -} -.row > .col-6 { - width: 50%; -} -.row > .off-6 { - margin-left: 50%; -} -.row > .col-7 { - width: 58.3333333333%; -} -.row > .off-7 { - margin-left: 58.3333333333%; -} -.row > .col-8 { - width: 66.6666666667%; -} -.row > .off-8 { - margin-left: 66.6666666667%; -} -.row > .col-9 { - width: 75%; -} -.row > .off-9 { - margin-left: 75%; -} -.row > .col-10 { - width: 83.3333333333%; -} -.row > .off-10 { - margin-left: 83.3333333333%; -} -.row > .col-11 { - width: 91.6666666667%; -} -.row > .off-11 { - margin-left: 91.6666666667%; -} -.row > .col-12 { - width: 100%; -} -.row > .off-12 { - margin-left: 100%; -} -.row.gtr-0 { - margin-top: 0; - margin-left: 0em; -} -.row.gtr-0 > * { - padding: 0 0 0 0em; -} -.row.gtr-0.gtr-uniform { - margin-top: 0em; -} -.row.gtr-0.gtr-uniform > * { - padding-top: 0em; -} -.row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; -} -.row.gtr-25 > * { - padding: 0 0 0 0.375em; -} -.row.gtr-25.gtr-uniform { - margin-top: -0.375em; -} -.row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; -} -.row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; -} -.row.gtr-50 > * { - padding: 0 0 0 0.75em; -} -.row.gtr-50.gtr-uniform { - margin-top: -0.75em; -} -.row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; -} -.row { - margin-top: 0; - margin-left: -1.5em; -} -.row > * { - padding: 0 0 0 1.5em; -} -.row.gtr-uniform { - margin-top: -1.5em; -} -.row.gtr-uniform > * { - padding-top: 1.5em; -} -.row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; -} -.row.gtr-150 > * { - padding: 0 0 0 2.25em; -} -.row.gtr-150.gtr-uniform { - margin-top: -2.25em; -} -.row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; -} -.row.gtr-200 { - margin-top: 0; - margin-left: -3em; -} -.row.gtr-200 > * { - padding: 0 0 0 3em; -} -.row.gtr-200.gtr-uniform { - margin-top: -3em; -} -.row.gtr-200.gtr-uniform > * { - padding-top: 3em; -} -@media screen and (max-width: 1680px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - .row > * { - box-sizing: border-box; - } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - .row.aln-left { - justify-content: flex-start; - } - .row.aln-center { - justify-content: center; - } - .row.aln-right { - justify-content: flex-end; - } - .row.aln-top { - align-items: flex-start; - } - .row.aln-middle { - align-items: center; - } - .row.aln-bottom { - align-items: flex-end; - } - .row > .imp-xlarge { - order: -1; - } - .row > .col-1-xlarge { - width: 8.3333333333%; - } - .row > .off-1-xlarge { - margin-left: 8.3333333333%; - } - .row > .col-2-xlarge { - width: 16.6666666667%; - } - .row > .off-2-xlarge { - margin-left: 16.6666666667%; - } - .row > .col-3-xlarge { - width: 25%; - } - .row > .off-3-xlarge { - margin-left: 25%; - } - .row > .col-4-xlarge { - width: 33.3333333333%; - } - .row > .off-4-xlarge { - margin-left: 33.3333333333%; - } - .row > .col-5-xlarge { - width: 41.6666666667%; - } - .row > .off-5-xlarge { - margin-left: 41.6666666667%; - } - .row > .col-6-xlarge { - width: 50%; - } - .row > .off-6-xlarge { - margin-left: 50%; - } - .row > .col-7-xlarge { - width: 58.3333333333%; - } - .row > .off-7-xlarge { - margin-left: 58.3333333333%; - } - .row > .col-8-xlarge { - width: 66.6666666667%; - } - .row > .off-8-xlarge { - margin-left: 66.6666666667%; - } - .row > .col-9-xlarge { - width: 75%; - } - .row > .off-9-xlarge { - margin-left: 75%; - } - .row > .col-10-xlarge { - width: 83.3333333333%; - } - .row > .off-10-xlarge { - margin-left: 83.3333333333%; - } - .row > .col-11-xlarge { - width: 91.6666666667%; - } - .row > .off-11-xlarge { - margin-left: 91.6666666667%; - } - .row > .col-12-xlarge { - width: 100%; - } - .row > .off-12-xlarge { - margin-left: 100%; - } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; - } - .row.gtr-0 > * { - padding: 0 0 0 0em; - } - .row.gtr-0.gtr-uniform { - margin-top: 0em; - } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; - } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; - } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; - } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; - } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; - } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; - } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; - } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; - } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; - } - .row { - margin-top: 0; - margin-left: -1.5em; - } - .row > * { - padding: 0 0 0 1.5em; - } - .row.gtr-uniform { - margin-top: -1.5em; - } - .row.gtr-uniform > * { - padding-top: 1.5em; - } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; - } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; - } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; - } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; - } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; - } - .row.gtr-200 > * { - padding: 0 0 0 3em; - } - .row.gtr-200.gtr-uniform { - margin-top: -3em; - } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; - } -} -@media screen and (max-width: 1280px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - .row > * { - box-sizing: border-box; - } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - .row.aln-left { - justify-content: flex-start; - } - .row.aln-center { - justify-content: center; - } - .row.aln-right { - justify-content: flex-end; - } - .row.aln-top { - align-items: flex-start; - } - .row.aln-middle { - align-items: center; - } - .row.aln-bottom { - align-items: flex-end; - } - .row > .imp-large { - order: -1; - } - .row > .col-1-large { - width: 8.3333333333%; - } - .row > .off-1-large { - margin-left: 8.3333333333%; - } - .row > .col-2-large { - width: 16.6666666667%; - } - .row > .off-2-large { - margin-left: 16.6666666667%; - } - .row > .col-3-large { - width: 25%; - } - .row > .off-3-large { - margin-left: 25%; - } - .row > .col-4-large { - width: 33.3333333333%; - } - .row > .off-4-large { - margin-left: 33.3333333333%; - } - .row > .col-5-large { - width: 41.6666666667%; - } - .row > .off-5-large { - margin-left: 41.6666666667%; - } - .row > .col-6-large { - width: 50%; - } - .row > .off-6-large { - margin-left: 50%; - } - .row > .col-7-large { - width: 58.3333333333%; - } - .row > .off-7-large { - margin-left: 58.3333333333%; - } - .row > .col-8-large { - width: 66.6666666667%; - } - .row > .off-8-large { - margin-left: 66.6666666667%; - } - .row > .col-9-large { - width: 75%; - } - .row > .off-9-large { - margin-left: 75%; - } - .row > .col-10-large { - width: 83.3333333333%; - } - .row > .off-10-large { - margin-left: 83.3333333333%; - } - .row > .col-11-large { - width: 91.6666666667%; - } - .row > .off-11-large { - margin-left: 91.6666666667%; - } - .row > .col-12-large { - width: 100%; - } - .row > .off-12-large { - margin-left: 100%; - } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; - } - .row.gtr-0 > * { - padding: 0 0 0 0em; - } - .row.gtr-0.gtr-uniform { - margin-top: 0em; - } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; - } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; - } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; - } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; - } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; - } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; - } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; - } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; - } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; - } - .row { - margin-top: 0; - margin-left: -1.5em; - } - .row > * { - padding: 0 0 0 1.5em; - } - .row.gtr-uniform { - margin-top: -1.5em; - } - .row.gtr-uniform > * { - padding-top: 1.5em; - } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; - } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; - } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; - } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; - } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; - } - .row.gtr-200 > * { - padding: 0 0 0 3em; - } - .row.gtr-200.gtr-uniform { - margin-top: -3em; - } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; - } -} -@media screen and (max-width: 980px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - .row > * { - box-sizing: border-box; - } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - .row.aln-left { - justify-content: flex-start; - } - .row.aln-center { - justify-content: center; - } - .row.aln-right { - justify-content: flex-end; - } - .row.aln-top { - align-items: flex-start; - } - .row.aln-middle { - align-items: center; - } - .row.aln-bottom { - align-items: flex-end; - } - .row > .imp-medium { - order: -1; - } - .row > .col-1-medium { - width: 8.3333333333%; - } - .row > .off-1-medium { - margin-left: 8.3333333333%; - } - .row > .col-2-medium { - width: 16.6666666667%; - } - .row > .off-2-medium { - margin-left: 16.6666666667%; - } - .row > .col-3-medium { - width: 25%; - } - .row > .off-3-medium { - margin-left: 25%; - } - .row > .col-4-medium { - width: 33.3333333333%; - } - .row > .off-4-medium { - margin-left: 33.3333333333%; - } - .row > .col-5-medium { - width: 41.6666666667%; - } - .row > .off-5-medium { - margin-left: 41.6666666667%; - } - .row > .col-6-medium { - width: 50%; - } - .row > .off-6-medium { - margin-left: 50%; - } - .row > .col-7-medium { - width: 58.3333333333%; - } - .row > .off-7-medium { - margin-left: 58.3333333333%; - } - .row > .col-8-medium { - width: 66.6666666667%; - } - .row > .off-8-medium { - margin-left: 66.6666666667%; - } - .row > .col-9-medium { - width: 75%; - } - .row > .off-9-medium { - margin-left: 75%; - } - .row > .col-10-medium { - width: 83.3333333333%; - } - .row > .off-10-medium { - margin-left: 83.3333333333%; - } - .row > .col-11-medium { - width: 91.6666666667%; - } - .row > .off-11-medium { - margin-left: 91.6666666667%; - } - .row > .col-12-medium { - width: 100%; - } - .row > .off-12-medium { - margin-left: 100%; - } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; - } - .row.gtr-0 > * { - padding: 0 0 0 0em; - } - .row.gtr-0.gtr-uniform { - margin-top: 0em; - } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; - } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; - } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; - } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; - } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; - } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; - } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; - } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; - } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; - } - .row { - margin-top: 0; - margin-left: -1.5em; - } - .row > * { - padding: 0 0 0 1.5em; - } - .row.gtr-uniform { - margin-top: -1.5em; - } - .row.gtr-uniform > * { - padding-top: 1.5em; - } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; - } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; - } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; - } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; - } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; - } - .row.gtr-200 > * { - padding: 0 0 0 3em; - } - .row.gtr-200.gtr-uniform { - margin-top: -3em; - } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; - } -} -@media screen and (max-width: 736px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - .row > * { - box-sizing: border-box; - } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - .row.aln-left { - justify-content: flex-start; - } - .row.aln-center { - justify-content: center; - } - .row.aln-right { - justify-content: flex-end; - } - .row.aln-top { - align-items: flex-start; - } - .row.aln-middle { - align-items: center; - } - .row.aln-bottom { - align-items: flex-end; - } - .row > .imp-small { - order: -1; - } - .row > .col-1-small { - width: 8.3333333333%; - } - .row > .off-1-small { - margin-left: 8.3333333333%; - } - .row > .col-2-small { - width: 16.6666666667%; - } - .row > .off-2-small { - margin-left: 16.6666666667%; - } - .row > .col-3-small { - width: 25%; - } - .row > .off-3-small { - margin-left: 25%; - } - .row > .col-4-small { - width: 33.3333333333%; - } - .row > .off-4-small { - margin-left: 33.3333333333%; - } - .row > .col-5-small { - width: 41.6666666667%; - } - .row > .off-5-small { - margin-left: 41.6666666667%; - } - .row > .col-6-small { - width: 50%; - } - .row > .off-6-small { - margin-left: 50%; - } - .row > .col-7-small { - width: 58.3333333333%; - } - .row > .off-7-small { - margin-left: 58.3333333333%; - } - .row > .col-8-small { - width: 66.6666666667%; - } - .row > .off-8-small { - margin-left: 66.6666666667%; - } - .row > .col-9-small { - width: 75%; - } - .row > .off-9-small { - margin-left: 75%; - } - .row > .col-10-small { - width: 83.3333333333%; - } - .row > .off-10-small { - margin-left: 83.3333333333%; - } - .row > .col-11-small { - width: 91.6666666667%; - } - .row > .off-11-small { - margin-left: 91.6666666667%; - } - .row > .col-12-small { - width: 100%; - } - .row > .off-12-small { - margin-left: 100%; - } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; - } - .row.gtr-0 > * { - padding: 0 0 0 0em; - } - .row.gtr-0.gtr-uniform { - margin-top: 0em; - } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; - } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; - } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; - } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; - } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; - } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; - } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; - } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; - } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; - } - .row { - margin-top: 0; - margin-left: -1.5em; - } - .row > * { - padding: 0 0 0 1.5em; - } - .row.gtr-uniform { - margin-top: -1.5em; - } - .row.gtr-uniform > * { - padding-top: 1.5em; - } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; - } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; - } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; - } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; - } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; - } - .row.gtr-200 > * { - padding: 0 0 0 3em; - } - .row.gtr-200.gtr-uniform { - margin-top: -3em; - } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; - } -} -@media screen and (max-width: 480px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - .row > * { - box-sizing: border-box; - } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - .row.aln-left { - justify-content: flex-start; - } - .row.aln-center { - justify-content: center; - } - .row.aln-right { - justify-content: flex-end; - } - .row.aln-top { - align-items: flex-start; - } - .row.aln-middle { - align-items: center; - } - .row.aln-bottom { - align-items: flex-end; - } - .row > .imp-xsmall { - order: -1; - } - .row > .col-1-xsmall { - width: 8.3333333333%; - } - .row > .off-1-xsmall { - margin-left: 8.3333333333%; - } - .row > .col-2-xsmall { - width: 16.6666666667%; - } - .row > .off-2-xsmall { - margin-left: 16.6666666667%; - } - .row > .col-3-xsmall { - width: 25%; - } - .row > .off-3-xsmall { - margin-left: 25%; - } - .row > .col-4-xsmall { - width: 33.3333333333%; - } - .row > .off-4-xsmall { - margin-left: 33.3333333333%; - } - .row > .col-5-xsmall { - width: 41.6666666667%; - } - .row > .off-5-xsmall { - margin-left: 41.6666666667%; - } - .row > .col-6-xsmall { - width: 50%; - } - .row > .off-6-xsmall { - margin-left: 50%; - } - .row > .col-7-xsmall { - width: 58.3333333333%; - } - .row > .off-7-xsmall { - margin-left: 58.3333333333%; - } - .row > .col-8-xsmall { - width: 66.6666666667%; - } - .row > .off-8-xsmall { - margin-left: 66.6666666667%; - } - .row > .col-9-xsmall { - width: 75%; - } - .row > .off-9-xsmall { - margin-left: 75%; - } - .row > .col-10-xsmall { - width: 83.3333333333%; - } - .row > .off-10-xsmall { - margin-left: 83.3333333333%; - } - .row > .col-11-xsmall { - width: 91.6666666667%; - } - .row > .off-11-xsmall { - margin-left: 91.6666666667%; - } - .row > .col-12-xsmall { - width: 100%; - } - .row > .off-12-xsmall { - margin-left: 100%; - } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; - } - .row.gtr-0 > * { - padding: 0 0 0 0em; - } - .row.gtr-0.gtr-uniform { - margin-top: 0em; - } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; - } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; - } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; - } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; - } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; - } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; - } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; - } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; - } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; - } - .row { - margin-top: 0; - margin-left: -1.5em; - } - .row > * { - padding: 0 0 0 1.5em; - } - .row.gtr-uniform { - margin-top: -1.5em; - } - .row.gtr-uniform > * { - padding-top: 1.5em; - } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; - } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; - } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; - } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; - } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; - } - .row.gtr-200 > * { - padding: 0 0 0 3em; - } - .row.gtr-200.gtr-uniform { - margin-top: -3em; - } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; - } -} - -/* Section/Article */ -section.special, article.special { - text-align: center; -} - -header p { - font-family: "Roboto Slab", serif; - font-size: 1em; - font-weight: 400; - letter-spacing: 0.075em; - margin-top: -0.5em; - text-transform: uppercase; -} -header.major > :last-child { - border-bottom: solid 3px #f56a6a; - display: inline-block; - margin: 0 0 2em 0; - padding: 0 0.75em 0.5em 0; -} -header.main > :last-child { - margin: 0 0 1em 0; -} - -/* Form */ -form { - margin: 0 0 2em 0; -} - -label { - color: #3d4449; - display: block; - font-size: 0.9em; - font-weight: 600; - margin: 0 0 1em 0; -} - -input[type=text], -input[type=password], -input[type=email], -input[type=tel], -input[type=search], -input[type=url], -select, -textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - background: #ffffff; - border-radius: 0.375em; - border: none; - border: solid 1px rgba(210, 215, 217, 0.75); - color: inherit; - display: block; - outline: 0; - padding: 0 1em; - text-decoration: none; - width: 100%; -} -input[type=text]:invalid, -input[type=password]:invalid, -input[type=email]:invalid, -input[type=tel]:invalid, -input[type=search]:invalid, -input[type=url]:invalid, -select:invalid, -textarea:invalid { - box-shadow: none; -} -input[type=text]:focus, -input[type=password]:focus, -input[type=email]:focus, -input[type=tel]:focus, -input[type=search]:focus, -input[type=url]:focus, -select:focus, -textarea:focus { - border-color: #f56a6a; - box-shadow: 0 0 0 1px #f56a6a; -} - -select { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(210, 215, 217, 0.75)' /%3E%3C/svg%3E"); - background-size: 1.25em; - background-repeat: no-repeat; - background-position: calc(100% - 1em) center; - height: 2.75em; - padding-right: 2.75em; - text-overflow: ellipsis; -} -select option { - color: #3d4449; - background: #ffffff; -} -select:focus::-ms-value { - background-color: transparent; -} -select::-ms-expand { - display: none; -} - -input[type=text], -input[type=password], -input[type=email], -input[type=tel], -input[type=search], -input[type=url], -select { - height: 2.75em; -} - -textarea { - padding: 0.75em 1em; -} - -input[type=checkbox], -input[type=radio] { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - display: block; - float: left; - margin-right: -2em; - opacity: 0; - width: 1em; - z-index: -1; -} -input[type=checkbox] + label, -input[type=radio] + label { - text-decoration: none; - color: #7f888f; - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: 400; - padding-left: 2.4em; - padding-right: 0.75em; - position: relative; -} -input[type=checkbox] + label:before, -input[type=radio] + label:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: "Font Awesome 5 Free"; - font-weight: 900; -} -input[type=checkbox] + label:before, -input[type=radio] + label:before { - background: #ffffff; - border-radius: 0.375em; - border: solid 1px rgba(210, 215, 217, 0.75); - content: ""; - display: inline-block; - font-size: 0.8em; - height: 2.0625em; - left: 0; - line-height: 2.0625em; - position: absolute; - text-align: center; - top: 0; - width: 2.0625em; -} -input[type=checkbox]:checked + label:before, -input[type=radio]:checked + label:before { - background: #3d4449; - border-color: #3d4449; - color: #ffffff; - content: "\f00c"; -} -input[type=checkbox]:focus + label:before, -input[type=radio]:focus + label:before { - border-color: #f56a6a; - box-shadow: 0 0 0 1px #f56a6a; -} - -input[type=checkbox] + label:before { - border-radius: 0.375em; -} - -input[type=radio] + label:before { - border-radius: 100%; -} - -::-webkit-input-placeholder { - color: #9fa3a6 !important; - opacity: 1; -} - -:-moz-placeholder { - color: #9fa3a6 !important; - opacity: 1; -} - -::-moz-placeholder { - color: #9fa3a6 !important; - opacity: 1; -} - -:-ms-input-placeholder { - color: #9fa3a6 !important; - opacity: 1; -} - -/* Box */ -.box { - border-radius: 0.375em; - border: solid 1px rgba(210, 215, 217, 0.75); - margin-bottom: 2em; - padding: 1.5em; -} -.box > :last-child, -.box > :last-child > :last-child, -.box > :last-child > :last-child > :last-child { - margin-bottom: 0; -} -.box.alt { - border: 0; - border-radius: 0; - padding: 0; -} - -/* Icon */ -.icon { - text-decoration: none; - border-bottom: none; - position: relative; -} -.icon:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: "Font Awesome 5 Free"; - font-weight: 400; -} -.icon > .label { - display: none; -} -.icon:before { - line-height: inherit; -} -.icon.solid:before { - font-weight: 900; -} -.icon.brands:before { - font-family: "Font Awesome 5 Brands"; -} - -/* Image */ -.image { - border-radius: 0.375em; - border: 0; - display: inline-block; - position: relative; -} -.image img { - border-radius: 0.375em; - display: block; -} -.image.left, .image.right { - max-width: 40%; -} -.image.left img, .image.right img { - width: 100%; -} -.image.left { - float: left; - padding: 0 1.5em 1em 0; - top: 0.25em; -} -.image.right { - float: right; - padding: 0 0 1em 1.5em; - top: 0.25em; -} -.image.fit { - display: block; - margin: 0 0 2em 0; - width: 100%; -} -.image.fit img { - width: 100%; -} -.image.main { - display: block; - margin: 0 0 3em 0; - width: 100%; -} -.image.main img { - width: 100%; -} - -a.image { - overflow: hidden; -} -a.image img { - -moz-transition: -moz-transform 0.2s ease; - -webkit-transition: -webkit-transform 0.2s ease; - -ms-transition: -ms-transform 0.2s ease; - transition: transform 0.2s ease; -} -a.image:hover img { - -moz-transform: scale(1.075); - -webkit-transform: scale(1.075); - -ms-transform: scale(1.075); - transform: scale(1.075); -} - -/* List */ -ol { - list-style: decimal; - margin: 0 0 2em 0; - padding-left: 1.25em; -} -ol li { - padding-left: 0.25em; -} - -ul { - list-style: disc; - margin: 0 0 2em 0; - padding-left: 1em; -} -ul li { - padding-left: 0.5em; -} -ul.alt { - list-style: none; - padding-left: 0; -} -ul.alt li { - border-top: solid 1px rgba(210, 215, 217, 0.75); - padding: 0.5em 0; -} -ul.alt li:first-child { - border-top: 0; - padding-top: 0; -} - -dl { - margin: 0 0 2em 0; -} -dl dt { - display: block; - font-weight: 600; - margin: 0 0 1em 0; -} -dl dd { - margin-left: 2em; -} - -/* Actions */ -ul.actions { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - cursor: default; - list-style: none; - margin-left: -1em; - padding-left: 0; -} -ul.actions li { - padding: 0 0 0 1em; - vertical-align: middle; -} -ul.actions.special { - -moz-justify-content: center; - -webkit-justify-content: center; - -ms-justify-content: center; - justify-content: center; - width: 100%; - margin-left: 0; -} -ul.actions.special li:first-child { - padding-left: 0; -} -ul.actions.stacked { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-left: 0; -} -ul.actions.stacked li { - padding: 1.3em 0 0 0; -} -ul.actions.stacked li:first-child { - padding-top: 0; -} -ul.actions.fit { - width: calc(100% + 1em); -} -ul.actions.fit li { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 100%; -} -ul.actions.fit li > * { - width: 100%; -} -ul.actions.fit.stacked { - width: 100%; -} - -/* Icons */ -ul.icons { - cursor: default; - list-style: none; - padding-left: 0; -} -ul.icons li { - display: inline-block; - padding: 0 1em 0 0; -} -ul.icons li:last-child { - padding-right: 0; -} -ul.icons li .icon { - color: inherit; -} -ul.icons li .icon:before { - font-size: 1.25em; -} - -/* Contact */ -ul.contact { - list-style: none; - padding: 0; -} -ul.contact li { - text-decoration: none; - border-top: solid 1px rgba(210, 215, 217, 0.75); - margin: 1.5em 0 0 0; - padding: 1.5em 0 0 3em; - position: relative; -} -ul.contact li:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: "Font Awesome 5 Free"; - font-weight: 400; -} -ul.contact li:before { - color: #f56a6a; - display: inline-block; - font-size: 1.5em; - height: 1.125em; - left: 0; - line-height: 1.125em; - position: absolute; - text-align: center; - top: 1em; - width: 1.5em; -} -ul.contact li:first-child { - border-top: 0; - margin-top: 0; - padding-top: 0; -} -ul.contact li:first-child:before { - top: 0; -} -ul.contact li a { - color: inherit; -} - -/* Pagination */ -ul.pagination { - cursor: default; - list-style: none; - padding-left: 0; -} -ul.pagination li { - display: inline-block; - padding-left: 0; - vertical-align: middle; -} -ul.pagination li > .page { - -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - border-bottom: 0; - border-radius: 0.375em; - display: inline-block; - font-size: 0.8em; - font-weight: 600; - height: 2em; - line-height: 2em; - margin: 0 0.125em; - min-width: 2em; - padding: 0 0.5em; - text-align: center; -} -ul.pagination li > .page.active { - background-color: #f56a6a; - color: #ffffff !important; -} -ul.pagination li > .page.active:hover { - background-color: rgb(245.9622641509, 120.3377358491, 120.3377358491); -} -ul.pagination li > .page.active:active { - background-color: rgb(244.0377358491, 91.6622641509, 91.6622641509); -} -ul.pagination li:first-child { - padding-right: 0.75em; -} -ul.pagination li:last-child { - padding-left: 0.75em; -} -@media screen and (max-width: 480px) { - ul.pagination li:nth-child(n+2):nth-last-child(n+2) { - display: none; - } - ul.pagination li:first-child { - padding-right: 0; - } -} - -/* Table */ -.table-wrapper { - -webkit-overflow-scrolling: touch; - overflow-x: auto; -} - -table { - margin: 0 0 2em 0; - width: 100%; -} -table tbody tr { - border: solid 1px rgba(210, 215, 217, 0.75); - border-left: 0; - border-right: 0; -} -table tbody tr:nth-child(2n+1) { - background-color: rgba(230, 235, 237, 0.25); -} -table td { - padding: 0.75em 0.75em; -} -table th { - color: #3d4449; - font-size: 0.9em; - font-weight: 600; - padding: 0 0.75em 0.75em 0.75em; - text-align: left; -} -table thead { - border-bottom: solid 2px rgba(210, 215, 217, 0.75); -} -table tfoot { - border-top: solid 2px rgba(210, 215, 217, 0.75); -} -table.alt { - border-collapse: separate; -} -table.alt tbody tr td { - border: solid 1px rgba(210, 215, 217, 0.75); - border-left-width: 0; - border-top-width: 0; -} -table.alt tbody tr td:first-child { - border-left-width: 1px; -} -table.alt tbody tr:first-child td { - border-top-width: 1px; -} -table.alt thead { - border-bottom: 0; -} -table.alt tfoot { - border-top: 0; -} - -/* Button */ -input[type=submit], -input[type=reset], -input[type=button], -button, -.button { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - background-color: transparent; - border-radius: 0.375em; - border: 0; - box-shadow: inset 0 0 0 2px #f56a6a; - color: #f56a6a !important; - cursor: pointer; - display: inline-block; - font-family: "Roboto Slab", serif; - font-size: 0.8em; - font-weight: 700; - height: 3.5em; - letter-spacing: 0.075em; - line-height: 3.5em; - padding: 0 2.25em; - text-align: center; - text-decoration: none; - text-transform: uppercase; - white-space: nowrap; -} -input[type=submit]:hover, -input[type=reset]:hover, -input[type=button]:hover, -button:hover, -.button:hover { - background-color: rgba(245, 106, 106, 0.05); -} -input[type=submit]:active, -input[type=reset]:active, -input[type=button]:active, -button:active, -.button:active { - background-color: rgba(245, 106, 106, 0.15); -} -input[type=submit].icon:before, -input[type=reset].icon:before, -input[type=button].icon:before, -button.icon:before, -.button.icon:before { - margin-right: 0.5em; -} -input[type=submit].fit, -input[type=reset].fit, -input[type=button].fit, -button.fit, -.button.fit { - width: 100%; -} -input[type=submit].small, -input[type=reset].small, -input[type=button].small, -button.small, -.button.small { - font-size: 0.6em; -} -input[type=submit].large, -input[type=reset].large, -input[type=button].large, -button.large, -.button.large { - font-size: 1em; - height: 3.65em; - line-height: 3.65em; -} -input[type=submit].primary, -input[type=reset].primary, -input[type=button].primary, -button.primary, -.button.primary { - background-color: #f56a6a; - box-shadow: none; - color: #ffffff !important; -} -input[type=submit].primary:hover, -input[type=reset].primary:hover, -input[type=button].primary:hover, -button.primary:hover, -.button.primary:hover { - background-color: rgb(245.9622641509, 120.3377358491, 120.3377358491); -} -input[type=submit].primary:active, -input[type=reset].primary:active, -input[type=button].primary:active, -button.primary:active, -.button.primary:active { - background-color: rgb(244.0377358491, 91.6622641509, 91.6622641509); -} -input[type=submit].disabled, input[type=submit]:disabled, -input[type=reset].disabled, -input[type=reset]:disabled, -input[type=button].disabled, -input[type=button]:disabled, -button.disabled, -button:disabled, -.button.disabled, -.button:disabled { - pointer-events: none; - opacity: 0.25; -} - -/* Mini Posts */ -.mini-posts article { - border-top: solid 1px rgba(210, 215, 217, 0.75); - margin-top: 2em; - padding-top: 2em; -} -.mini-posts article .image { - display: block; - margin: 0 0 1.5em 0; - width: unset; -} -.mini-posts article .image img { - display: block; - width: unset; -} -.mini-posts article a .fav-image { - max-width: 100%; /* Scale down if the container is smaller than the image */ - height: auto; /* Maintain aspect ratio */ - display: flex; - justify-content: center; /* Horisontal centrering */ - align-items: center; /* Vertikal centrering */ -} -.mini-posts article:first-child { - border-top: 0; - margin-top: 0; - padding-top: 0; -} - -/* Features */ -.features { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin: 0 0 2em -3em; - width: calc(100% + 3em); -} -.features article { - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - margin: 0 0 3em 3em; - position: relative; - width: calc(50% - 3em); -} -.features article:nth-child(2n-1) { - margin-right: 1.5em; -} -.features article:nth-child(2n) { - margin-left: 1.5em; -} -.features article:nth-last-child(1), .features article:nth-last-child(2) { - margin-bottom: 0; -} -.features article .icon { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - display: block; - height: 10em; - line-height: 10em; - margin: 0 2em 0 0; - text-align: center; - width: 10em; -} -.features article .icon:before { - color: #f56a6a; - font-size: 2.75rem; - position: relative; - top: 0.05em; -} -.features article .icon:after { - -moz-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - border-radius: 0.25rem; - border: solid 2px rgba(210, 215, 217, 0.75); - content: ""; - display: block; - height: 7em; - left: 50%; - margin: -3.5em 0 0 -3.5em; - position: absolute; - top: 50%; - width: 7em; -} -.features article .content { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 100%; -} -.features article .content > :last-child { - margin-bottom: 0; -} -@media screen and (max-width: 980px) { - .features { - margin: 0 0 2em 0; - width: 100%; - } - .features article { - margin: 0 0 3em 0; - width: 100%; - } - .features article:nth-child(2n-1) { - margin-right: 0; - } - .features article:nth-child(2n) { - margin-left: 0; - } - .features article:nth-last-child(1), .features article:nth-last-child(2) { - margin-bottom: 3em; - } - .features article:last-child { - margin-bottom: 0; - } - .features article .icon { - height: 8em; - line-height: 8em; - width: 8em; - } - .features article .icon:before { - font-size: 2.25rem; - } - .features article .icon:after { - height: 6em; - margin: -3em 0 0 -3em; - width: 6em; - } -} -@media screen and (max-width: 480px) { - .features article { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-align-items: -moz-flex-start; - -webkit-align-items: -webkit-flex-start; - -ms-align-items: -ms-flex-start; - align-items: flex-start; - } - .features article .icon { - height: 6em; - line-height: 6em; - margin: 0 0 1.5em 0; - width: 6em; - } - .features article .icon:before { - font-size: 1.5rem; - } - .features article .icon:after { - height: 4em; - margin: -2em 0 0 -2em; - width: 4em; - } -} -@media screen and (max-width: 480px) { - .features article .icon:before { - font-size: 1.25rem; - } -} - -/* Posts */ -.posts { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin: 0 0 2em -6em; - width: calc(100% + 6em); -} -.posts article { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - margin: 0 0 6em 6em; - position: relative; - width: calc(33.3333333333% - 6em); -} -.posts article:before { - background: rgba(210, 215, 217, 0.75); - content: ""; - display: block; - height: calc(100% + 6em); - left: -3em; - position: absolute; - top: 0; - width: 1px; -} -.posts article:after { - background: rgba(210, 215, 217, 0.75); - bottom: -3em; - content: ""; - display: block; - height: 1px; - position: absolute; - right: 0; - width: calc(100% + 6em); -} -.posts article > :last-child { - margin-bottom: 0; -} -.posts article .image { - display: block; - margin: 0 0 2em 0; -} -.posts article .image img { - display: block; - width: 100%; -} -@media screen and (min-width: 1681px) { - .posts article:nth-child(3n+1):before { - display: none; - } - .posts article:nth-child(3n+1):after { - width: 100%; - } - .posts article:nth-last-child(1), .posts article:nth-last-child(2), .posts article:nth-last-child(3) { - margin-bottom: 0; - } - .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before, .posts article:nth-last-child(3):before { - height: 100%; - } - .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after, .posts article:nth-last-child(3):after { - display: none; - } -} -@media screen and (max-width: 1680px) { - .posts article { - width: calc(50% - 6em); - } - .posts article:nth-last-child(3) { - margin-bottom: 6em; - } -} -@media screen and (min-width: 481px) and (max-width: 1680px) { - .posts article:nth-child(2n+1):before { - display: none; - } - .posts article:nth-child(2n+1):after { - width: 100%; - } - .posts article:nth-last-child(1), .posts article:nth-last-child(2) { - margin-bottom: 0; - } - .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before { - height: 100%; - } - .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after { - display: none; - } -} -@media screen and (max-width: 736px) { - .posts { - margin: 0 0 2em -4.5em; - width: calc(100% + 4.5em); - } - .posts article { - margin: 0 0 4.5em 4.5em; - width: calc(50% - 4.5em); - } - .posts article:before { - height: calc(100% + 4.5em); - left: -2.25em; - } - .posts article:after { - bottom: -2.25em; - width: calc(100% + 4.5em); - } - .posts article:nth-last-child(3) { - margin-bottom: 4.5em; - } -} -@media screen and (max-width: 480px) { - .posts { - margin: 0 0 2em 0; - width: 100%; - } - .posts article { - margin: 0 0 4.5em 0; - width: 100%; - } - .posts article:before { - display: none; - } - .posts article:after { - width: 100%; - } - .posts article:last-child { - margin-bottom: 0; - } - .posts article:last-child:after { - display: none; - } -} - -.open, -.open_inv { - all: unset; - display: inline-block; - padding: 10px 15px; - margin: 10px; - font-size: 16px; - color: #000; - text-align: center; - cursor: pointer; - transition: transform 0.3s ease, color 0.3s ease; -} -.open:hover, -.open_inv:hover { - transform: scale(1.05); - color: black; -} - -.open { - transform: rotate(10deg); -} - -.open_inv { - transform: rotate(-10deg); -} - -.modal { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.7); - backdrop-filter: blur(8px); - display: flex; - justify-content: center; - align-items: center; - z-index: 999999; -} - -.modal-content { - background-color: #fff; - padding: 5px; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - position: relative; - display: flex; - justify-content: center; /* Centrer horisontalt */ - align-items: center; /* Centrer vertikalt */ - flex-direction: column; /* Placer knapper under billedet */ - min-width: 70vw; - min-height: 70vh; - max-width: 95vw; - max-height: 95vh; - overflow: auto; -} -.modal-content img { - display: block; - height: auto !important; - max-width: 95%; /* Maks bredde på 90% af modalens bredde */ - max-height: 78vh; /* Maks højde på 80% af viewporten */ - margin-bottom: 20px; - object-fit: contain; /* Skaler billedet korrekt */ - border-radius: 15px; - margin: 0 auto; /* Som ekstra sikkerhed */ -} -.modal-content .modal-buttons { - position: absolute; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - display: flex; - gap: 15vh; - background-color: #ffffff; -} -.modal-content .modal-buttons button { - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease, transform 0.2s ease; -} -.modal-content .modal-buttons button:hover { - transform: scale(1.05); -} -.modal-content .close-btn { - transform: translateX(-50%); - cursor: pointer; - margin-left: 5vw; -} - -.next-btn { - cursor: pointer; - transition: background-color 0.3s ease; -} - -.thumbnail { - width: 150px; - height: 100px; - object-fit: cover; - border-radius: 5px; - cursor: pointer; - transition: transform 0.3s ease; -} -.thumbnail:hover { - transform: scale(1.05); -} - -.button-stack { - display: flex; - flex-direction: column-reverse; - position: relative; - align-items: center; - margin-bottom: 120px; -} - -.stacked-button { - all: unset; - position: absolute; /* Absolut position for overlap */ - top: 50%; - left: 50%; - transform-origin: center; - width: 100px; /* Standardbredde */ - height: 50px; /* Standardhøjde */ - background-color: transparent; - cursor: pointer; - transition: transform 0.3s ease, z-index 0.3s ease; -} -.stacked-button:hover { - transform: translate(-50%, -50%) scale(1.1); /* Zoom ved hover */ - z-index: 10; /* Hover sætter knappen øverst */ -} - -.stacked-button:nth-child(1) { - z-index: 100; /* Højeste z-index for at sikre, at den altid ligger øverst */ - transform: translate(-50%, -50%) scale(1.2); /* Gør knappen lidt større */ -} - -.stacked-button:nth-child(2) { - transform: translate(-50%, -60%) rotate(-15deg); - z-index: 2; -} - -.stacked-button:nth-child(3) { - transform: translate(-50%, -50%) rotate(10deg); - z-index: 3; -} - -.stacked-button:nth-child(4) { - transform: translate(-50%, -40%) rotate(-10deg); - z-index: 4; -} - -.stacked-button:nth-child(5) { - transform: translate(-50%, -30%) rotate(15deg); - z-index: 5; -} - -/* Wrapper */ -#wrapper { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: row-reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; - min-height: 100vh; -} - -/* Main */ -#main { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 100%; -} -#main > .inner { - padding: 0 6em 0.1em 6em; - margin: 0 auto; - max-width: 110em; -} -#main > .inner > section { - padding: 6em 0 4em 0; - border-top: solid 2px rgba(210, 215, 217, 0.75); -} -#main > .inner > section:first-of-type { - border-top: 0 !important; -} -@media screen and (max-width: 1680px) { - #main > .inner { - padding: 0 5em 0.1em 5em; - } - #main > .inner > section { - padding: 5em 0 3em 0; - } -} -@media screen and (max-width: 1280px) { - #main > .inner { - padding: 0 4em 0.1em 4em; - } - #main > .inner > section { - padding: 4em 0 2em 0; - } -} -@media screen and (max-width: 736px) { - #main > .inner { - padding: 0 2em 0.1em 2em; - } - #main > .inner > section { - padding: 3em 0 1em 0; - } -} - -/* Sidebar */ -#search form { - text-decoration: none; - position: relative; -} -#search form:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: "Font Awesome 5 Free"; - font-weight: 900; -} -#search form:before { - -moz-transform: scaleX(-1); - -webkit-transform: scaleX(-1); - -ms-transform: scaleX(-1); - transform: scaleX(-1); - color: #7f888f; - content: "\f002"; - cursor: default; - display: block; - font-size: 1.5em; - height: 2em; - line-height: 2em; - opacity: 0.325; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 2em; -} -#search form input[type=text] { - padding-right: 2.75em; -} - -#sidebar { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - -moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease; - -webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease; - -ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease; - transition: margin-left 0.5s ease, box-shadow 0.5s ease; - background-color: #f5f6f7; - font-size: 0.9em; - position: relative; - width: 22em; -} -#sidebar h2 { - font-size: 1.3888888889em; -} -#sidebar > .inner { - padding: 2.2222222222em 2.2222222222em 2.4444444444em 2.2222222222em; - position: relative; - width: 22em; -} -#sidebar > .inner > * { - border-bottom: solid 2px rgba(210, 215, 217, 0.75); - margin: 0 0 3.5em 0; - padding: 0 0 3.5em 0; -} -#sidebar > .inner > * > :last-child { - margin-bottom: 0; -} -#sidebar > .inner > *:last-child { - border-bottom: 0; - margin-bottom: 0; - padding-bottom: 0; -} -#sidebar > .inner > .alt { - background-color: rgb(239.3333333333, 240.9, 242.4666666667); - border-bottom: 0; - margin: -2.2222222222em 0 4.4444444444em -2.2222222222em; - padding: 2.2222222222em; - width: calc(100% + 4.4444444444em); -} -#sidebar .toggle { - text-decoration: none; - -moz-transition: left 0.5s ease; - -webkit-transition: left 0.5s ease; - -ms-transition: left 0.5s ease; - transition: left 0.5s ease; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - border: 0; - display: block; - height: 7.5em; - left: 22em; - line-height: 7.5em; - outline: 0; - overflow: hidden; - position: absolute; - text-align: center; - text-indent: -15em; - white-space: nowrap; - top: 0; - width: 6em; - z-index: 10000; -} -#sidebar .toggle:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: "Font Awesome 5 Free"; - font-weight: 900; -} -#sidebar .toggle:before { - content: "\f0c9"; - font-size: 2rem; - height: inherit; - left: 0; - line-height: inherit; - position: absolute; - text-indent: 0; - top: 0; - width: inherit; -} -#sidebar.inactive { - margin-left: -22em; -} -@media screen and (max-width: 1680px) { - #sidebar { - width: 18em; - } - #sidebar > .inner { - padding: 1.6666666667em 1.6666666667em 1.3333333333em 1.6666666667em; - width: 18em; - } - #sidebar > .inner > .alt { - margin: -1.6666666667em 0 3.3333333333em -1.6666666667em; - padding: 1.6666666667em; - width: calc(100% + 3.3333333333em); - } - #sidebar .toggle { - height: 6.25em; - left: 18em; - line-height: 6.25em; - text-indent: 5em; - width: 5em; - } - #sidebar .toggle:before { - font-size: 1.5rem; - } - #sidebar.inactive { - margin-left: -18em; - } -} -@media screen and (max-width: 1280px) { - #sidebar { - box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175); - height: 100%; - left: 0; - position: fixed; - top: 0; - z-index: 10000; - } - #sidebar.inactive { - box-shadow: none; - } - #sidebar > .inner { - -webkit-overflow-scrolling: touch; - height: 100%; - left: 0; - overflow-x: hidden; - overflow-y: auto; - position: absolute; - top: 0; - } - #sidebar > .inner:after { - content: ""; - display: block; - height: 4em; - width: 100%; - } - #sidebar .toggle { - text-indent: 6em; - width: 6em; - } - #sidebar .toggle:before { - font-size: 1.5rem; - margin-left: -0.4375em; - } - body.is-preload #sidebar { - display: none; - } -} -@media screen and (max-width: 736px) { - #sidebar .toggle { - text-indent: 7.25em; - width: 4.25em; - } - #sidebar .toggle:before { - color: #7f888f; - margin-left: -0.0625em; - margin-top: -0.25em; - font-size: 1.1rem; - z-index: 1; - } - #sidebar .toggle:after { - background: rgba(222.2, 224.50625, 226.3, 0.75); - border-radius: 0.375em; - content: ""; - height: 3.5em; - left: 1em; - position: absolute; - top: 1em; - width: 3em; - } -} - -/* Header */ -#header { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - border-bottom: solid 5px #f56a6a; - padding: 6em 0 1em 0; - position: relative; -} -#header > * { - -moz-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - margin-bottom: 0; -} -#header .logo { - border-bottom: 0; - color: inherit; - font-family: "Roboto Slab", serif; - font-size: 1.125em; -} -#header .icons { - text-align: right; -} -@media screen and (max-width: 1680px) { - #header { - padding-top: 5em; - } -} -@media screen and (max-width: 736px) { - #header { - padding-top: 6.5em; - } - #header .logo { - font-size: 1.25em; - margin: 0; - } - #header .icons { - height: 5em; - line-height: 5em; - position: absolute; - right: -0.5em; - top: 0; - } -} - -/* Banner */ -#banner { - padding: 6em 0 4em 0; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; -} -#banner h1 { - margin-top: -0.125em; -} -#banner .content { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 50%; -} -#banner .image { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - display: block; - margin: 0 0 2em 4em; - width: 50%; -} -#banner .image img { - height: 100%; - -moz-object-fit: cover; - -webkit-object-fit: cover; - -ms-object-fit: cover; - object-fit: cover; - -moz-object-position: center; - -webkit-object-position: center; - -ms-object-position: center; - object-position: center; - width: 100%; -} -@media screen and (orientation: portrait) { - #banner { - -moz-flex-direction: column-reverse; - -webkit-flex-direction: column-reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - } - #banner h1 br { - display: none; - } - #banner .content { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - width: 100%; - } - #banner .image { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - margin: 0 0 4em 0; - height: 25em; - max-height: 50vh; - min-height: 18em; - width: 100%; - } -} -@media screen and (orientation: portrait) and (max-width: 480px) { - #banner .image { - max-height: 35vh; - } -} - -/* Footer */ -#footer .copyright { - color: #9fa3a6; - font-size: 0.9em; -} -#footer .copyright a { - color: inherit; -} - -.footer-link { - font-size: 0.7rem; /* Reduceret skriftstørrelse */ - font-weight: normal; /* Normal vægt, ikke fed */ - text-decoration: none; /* Fjerner understregning */ - display: inline-block; /* Bedre layoutjustering */ - margin: 8px 0; /* Lidt luft omkring linket */ - text-align: center; /* Centreret, hvis relevant */ - transition: color 0.3s ease; /* Glidende farveskift ved hover */ - border-bottom: none; -} -.footer-link:hover { - color: #000; /* Mørkere farve ved hover */ - text-decoration: none; /* Understregning ved hover */ - transition: color 0.5s ease; /* Glidende farveskift ved hover */ -} - -/* Menu */ -#menu ul { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - color: #3d4449; - font-family: "Roboto Slab", serif; - font-weight: 400; - letter-spacing: 0.075em; - list-style: none; - margin-bottom: 0; - padding: 0; - text-transform: uppercase; -} -#menu ul a, #menu ul span { - border-bottom: 0; - color: inherit; - cursor: pointer; - display: block; - font-size: 0.9em; - padding: 0.625em 0; -} -#menu ul a:hover, #menu ul span:hover { - color: #f56a6a; -} -#menu ul a.opener, #menu ul span.opener { - -moz-transition: color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out; - transition: color 0.2s ease-in-out; - text-decoration: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - position: relative; -} -#menu ul a.opener:before, #menu ul span.opener:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: "Font Awesome 5 Free"; - font-weight: 900; -} -#menu ul a.opener:before, #menu ul span.opener:before { - -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out; - transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; - color: #9fa3a6; - content: "\f078"; - position: absolute; - right: 0; -} -#menu ul a.opener:hover:before, #menu ul span.opener:hover:before { - color: #f56a6a; -} -#menu ul a.opener.active + ul, #menu ul span.opener.active + ul { - display: block; -} -#menu ul a.opener.active:before, #menu ul span.opener.active:before { - -moz-transform: rotate(-180deg); - -webkit-transform: rotate(-180deg); - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); -} -#menu > ul > li { - border-top: solid 1px rgba(210, 215, 217, 0.75); - margin: 0.5em 0 0 0; - padding: 0.5em 0 0 0; -} -#menu > ul > li > ul { - color: #9fa3a6; - display: none; - margin: 0.5em 0 1.5em 0; - padding-left: 1em; -} -#menu > ul > li > ul a, #menu > ul > li > ul span { - font-size: 0.8em; -} -#menu > ul > li > ul > li { - margin: 0.125em 0 0 0; - padding: 0.125em 0 0 0; -} -#menu > ul > li:first-child { - border-top: 0; - margin-top: 0; - padding-top: 0; -} - -/*# sourceMappingURL=main.css.map */