@font-face {
  font-family: "Source Sans Pro";
  src: url(fonts/SourceSansPro-Regular.ttf);
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(fonts/SourceSansPro-ExtraLight.ttf);
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(fonts/SourceSansPro-Light.ttf);
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(fonts/SourceSansPro-Regular.ttf);
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(fonts/SourceSansPro-Italic.ttf);
}
body {
 font-family: "Source Sans Pro", Arial, sans-serif;
 font-size: 12pt;
 font-weight: 400;
 margin: 0;
 min-height: 100%;
}
h1, h2, h3, h4 {
 margin: 0;
}
img, video {
 max-width: 100%;
}
a {
  color: var(--link);
}
a:hover {
  color: rgba(50, 200, 240, 1);
}
form {
  display: flex;
  flex-wrap: wrap;
}
label {
  display: block;
  width: 100%;
}
input:not([type]), input[type=text], input[type=email], input[type=number],
input[type=submit], textarea, button, .button {
  border-radius: 2px;
  border: 1px solid rgba(80, 80, 80, 0.4);
  box-shadow: 0 1px 4px rgba(20, 60, 70, 0.4);
  box-sizing: border-box;
  font-size: 20px;
  margin: 0.5rem 0;
  padding: 10px;
  transition: 100ms box-shadow;
  width: 100%;
}
input[type=submit], button, .button {
  background: linear-gradient(to top, rgb(30, 96, 113), rgb(80, 162, 183));
  border: none;
  color: white;
  padding: 10px 20px;
  width: auto;
}
.button {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}
input[type=submit]:hover, button:hover, .button:hover {
  background: linear-gradient(to top, rgb(50, 142, 143), rgb(80, 162, 183));
}
input:focus, .meld-deg-inn input:focus {
  box-shadow: 0 0 0 3px rgba(60, 140, 160, 0.5);
}
.bli-medlem-stor {
  background: linear-gradient(to top, #5d0811, #7c101c 5%, #ab2030);
  font-size: 28px;
  padding: 2rem 4rem;
}
.bli-medlem-stor:hover {
  background: linear-gradient(to top, #5d0811, #7c101c 5%, #ef2e44);
}
.bli-medlem-stor:active {
  background: linear-gradient(to top, #7f131f, #ef2e44);
}
main {
 background-color: var(--color-bg);
 flex: 1;
 padding-bottom: 5em;
}
footer.kolofon {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  background: rgba(100, 150, 165, 1);
  margin: 0;
  padding: 2em 0 3em 0;
  justify-content: center;
}
footer.kolofon a {
  color: rgba(255, 255, 255);
  text-decoration: none;
}
footer.kolofon a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}
footer.kolofon h2 {
  color: white;
  font-size: 20px;
  margin-bottom: 4px;
}
footer.kolofon > div {
  min-width: 9em;
  padding: 0 0 2em;
  margin: 0 30px;
}
footer.kolofon ul {
  margin: 0;
  padding: 0
}
footer.kolofon li {
  display: block;
  margin: 0
}
footer.kontakt {
  color: var(--color-fg);
  background: var(--color-bg);
  font-size: 0.8em;
  padding: 0.5em 0 3em 0;
  text-align: center;
}
.top-section {
 position: absolute;
 z-index: 10;
 /*
 background-color: rgba(0, 102, 128, 0.6);
 background: linear-gradient(to bottom,
                             rgba(0, 102, 128, 1) 3px,
                             rgba(0, 102, 128, 0.6) 3px,
                             rgba(0, 102, 128, 0.05) 85%,
                             rgba(0, 102, 128, 0.0));
 */
 height: 80px;
 width: 100%;
}
.main-title {
  bottom: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 3px;
}
.main-title h1 {
  height: 100%;
}
.main-title h1 a {
 background: url('nmu-logo.svg') no-repeat;
 background-size: contain;
 display: block;
 height: 100%;
 margin-right: 32px;
 max-width: 325px;
 text-indent: -9000em;
}
.top-section ul {
 padding: 0;
 margin: 0;
}
.wrapper {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

/* Hero */
.hero {
 color: white;
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
.hero a {
  color: white;
}
.hero--big {
 min-height: 50vh;
}
.hero--vbig {
 min-height: 90vh;
}
.hero--thin {
 width: 50vw;
 max-width: 800px;
}
.hero-bg, .hero-bg::before/*, .hero-content*/ {
 bottom: 0;
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
}
.hero-bg {
 overflow: hidden;
 background-color: rgba(100, 150, 165, 1);
}
.hero img, .hero video {
 height: 100%;
 object-fit: cover;
 width: 100%;
 transition: opacity 1s;
}
.hero .top { object-position: top; }
.hero .bottom { object-position: bottom; }
.hero-bg::before {
  content: '';
  display: block;
  z-index: 1;
  background-color: rgba(0, 102, 128, 0.3);
}
.hero-bg--top::before {
  background-image: linear-gradient(to bottom,
                                    rgba(0, 102, 128, 1) 3px,
                                    rgba(0, 102, 128, 0.6) 3px,
                                    rgba(0, 102, 128, 0.12) 90px,
                                    rgba(0, 102, 128, 0.1));
}
.hero-bg--transparent::before {
  background-color: rgba(0, 102, 128, 0.0);
}
.hero-content {
 align-items: center;
 display: flex;
 flex-direction: column;
 margin: 80px 0 40px;
 position: relative;
 z-index: 2;
}
.hero-big .hero-content {
 margin: 80px 0;
}
.hero-content h1 {
 font-size: 36px;
 font-weight: 200;
 margin: 0 0 20px;
}
.hero-content h1, .hero-content h2 {
 text-align: center;
 text-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);
}
.hero-summary {
 font-size: 20px;
 margin: 0 1rem;
 max-width: 38rem;
 text-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);
}
.success {
  background-color: rgba(80, 180, 120, 0.9);
  border-radius: 2px;
  color: white;
  font-size: 1.2em;
  left: 0;
  opacity: 1;
  padding: 1rem;
  position: absolute;
  right: 0;
  text-align: center;
  transition: opacity 500ms;
  transition-delay: 300ms;
  z-index: 3;
}
.success.hidden {
  opacity: 0;
}
.meld-deg-inn {
 display: flex;
 flex-direction: column;
 width: 270px;
}
.meld-deg-inn h2 {
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 1.5px;
 margin: 0 0 3px;
 text-transform: uppercase;
}
.meld-deg-inn .box {
 background: rgba(255, 255, 255, 0.9);
 border-radius: 1px;
 box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
 z-index: 2;
}
.meld-deg-inn input {
 background: transparent;
 border-top: 1px solid rgb(245, 245, 245);
 border: none;
 margin: 0;
 outline: none;
 box-shadow: none;
}
.meld-deg-inn label {
  width: initial;
}
.meld-deg-inn input:first-of-type {
  border-top: none;
}
.meld-deg-inn input[type=submit] {
  align-self: flex-end;
  background: rgba(0, 102, 128, 1);
  color: white;
  margin-bottom: 1rem;
  margin-right: 2px;
  position: relative;
  top: -2px;
  width: 50%;
  z-index: 1;
}
.meld-deg-inn .box > * {
  font-size: 20px;
  font-family: "Source Sans Pro";
  padding: 10px;
}
.meld-deg-inn .nyhendebrev div {
  display: flex;
  justify-content: space-evenly;
}
.meld-deg-inn .nyhendebrev input {
  width: initial;
}





.hpad { width: 80%; }
.bli-medlem a { font-size: 2.5em; }

.nav-button {
  color: white;
  display: none;
  font-size: 24px;
  order: 1;
  padding: 0.25em 0.5em;
  /*position: absolute;*/
  right: 0;
  top: 0;
  -webkit-user-select: none;
  z-index: 4;
}
.nav-button span {
  display: none;
}
#menu-checkbox {
  position: absolute;
  visibility: hidden;
}
.main-nav li {
  display: inline-block;
}
.main-nav {
  color: white;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.main-nav ul {
  display: inline-block;
}
.main-nav a, .main-nav .extra a {
  background: inherit;
  color: inherit;
  text-shadow: none;
  text-decoration: none;
  padding: 0 12px;
}
.main-nav .extra a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8em;
}

/*
.tag-line {
 font-weight: 100;
 font-style: light;
 font-size: 1.2em;
 background: #006680;
 padding: 20px;
 color: #fff;
}
.tag-line p {
 margin: 0;
}
.main-nav ul {
 padding: 0;
 margin: 0;
}
.main-nav li {
 margin: 0;
 display: block;
}
.main-nav a {
 display: block;
 padding: 10px 20px;
 background: #006680;
 color: #fff;
 text-decoration: none;
 margin-bottom: 1px;
 text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.main-nav .extra a {
 background: #5e818b;
}
img {
 max-width: 100%;
}
img.stretchy {
 width: 100%;
}

.button a, .bli-medlem a {
 text-decoration: none;
 color: #fff;
 background: #006680;
 padding: 30px 20px;
 text-align: center;
 font-size: 0.8em;
 display: block;
 margin: 20px 10%;
 border-radius: 5px;
 text-shadow: 0 0 2px #035;
}

h1 a {
  color: #006680;
  text-decoration: none;
}
h1 {
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  font-size: 2.5em;
}
h2 {
}

/*.hpad {
  margin: 0 auto;
  width: 95%;
}
.vmargin { margin-top: 1.5em; }

/* --- grid system --- */
/*
.section { clear: both; padding: 0px; margin: 0px; }
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }

.col { display: block; float:left; margin: 1% 0 1% 0; }
.span_3_of_3, .span_2_of_3, .span_1_of_3,
.span_8_of_8, .span_7_of_8, .span_6_of_8, .span_5_of_8,
.span_4_of_8, .span_3_of_8, .span_2_of_8, .span_1_of_8
{ width: 100%; }

*/
.content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.box, .big-box {
  background: var(--color-mg);
  box-shadow: 0 10px 24px -13px rgba(0, 0, 0, 0.5);
  color: var(--color-fg);
  margin: 2rem 20px 1rem;
  max-width: 18rem;
  min-width: 12rem;
  padding: 0.8rem 1.5rem;
}
.box > a {
  color: black;
  text-decoration: none;
}
.box h1 {
  font-weight: 200;
  font-size: 1.75em;
  margin-bottom: 0.25em;
}
.box h2, footer h2 {
  color: var(--color-fg);
  font-size: 1em;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-transform: uppercase;

}
.box h1 + p, .box h2 + p, .box h3 + p {
  /* Unngå mellomrom framfor fyrste paragraf etter overskrift */
  margin-top: 0;
}
.full {
  width: 100%;
  display: block;
}

.main-article, .big-box  {
  font-size: 1.2em;
  line-height: 1.5;
  max-width: 38rem;
}

.content ul {
  margin: 0.5em 0;
  padding: 0;
}
.content li {
  list-style-type: none;
  margin-left: 16px;
}
.content li:before {
  content: '–';
  float: left;
  margin-left: -16px;
}

.publiseringsdato, .avsendar { display: inline-block; }
.publiseringsdato + *, .avsendar + * { display: inline; }

.deploy {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.deploy button {
  background: linear-gradient(to top, #55cf55, #21e821);
  border-radius: 4px;
  border: 3px solid #3fb524;
  color: white;
  font-size: 16px;
  padding: 10px;
}
.deploy button:hover {
  border-color: #40ea1d;
}

@media only screen and (max-width: 1000px) {
  .nav-button {
    display: block;
  }
  .main-nav {
    /* position: fixed; */
  }
  .main-nav .items {
    background-color: rgb(0, 102, 128);
    bottom: 0;
    display: none;
    flex-direction: column;
    font-size: 2em;
    justify-content: space-around;
    left: 0;
    padding: 10% 3% 10% 6%;
    position: fixed;
    right: 0;
    top: 0;
  }
  .main-nav ul {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-around;
  }
  #menu-checkbox:checked + .items {
    display: flex;
  }
}

/*Testar mørkemodus*/

img:not([src*='.svg']) {
  filter: var(--image-gray);
  filter: var(--image-dark);
}

:root {
  --color-bg: #ffffff;
  --color-mg: #ffffff;
  --color-fg: #000000;
  --link: rgba(50, 150, 175, 1);
  --image-gray: grayscale(0%);
  --image-dark: brightness(100%);
}

@media (prefers-color-scheme: dark) {
  :root {
  --color-bg: #1c1e1f;
  --color-mg: #34383a;
  --color-fg: #dddddd;
  --link: rgb(47, 194, 231);
  --image-gray: grayscale(10%);
  --image-dark: brightness(85%);
  color-scheme: light dark;
  }
}
/* Cognito-form for reiserekningsskjema, CSS vibekoda av Sebastian, ikkje gjer som han!

/* ========================================================== */
/* GLOBALE STILAR (Gjeld for både lys og mørk modus)          */
/* ========================================================== */

/* Mjuke, avrunda hjørne for inndatafelt, knappar og signatur */
.cog-cognito .el-input__inner,
.cog-cognito .el-textarea__inner,
.cog-signature__pad,
.cog-button {
  border-radius: 8px !important;
}

/* Mjuke hjørne for sjølve hovudskjemaet */
.cog-form {
  border-radius: 12px !important;
  overflow: hidden; /* Syt for at innhaldet ikkje stikk utanfor ramma */
}


/* ========================================================== */
/* MØRK MODUS                                                 */
/* ========================================================== */
@media (prefers-color-scheme: dark) {
  
  /* 1. UNIVERSELLE BAKGRUNNAR */
  .cog-cognito, 
  .cog-form, 
  .cog-section, 
  .cog-page__header, 
  .cog-section__header {
    background-color: #34383a !important;
    background: #34383a !important;
    --form__background-color: #34383a !important;
    --header__background-color: #34383a !important;
    --header__color: #ffffff !important;
    border-color: #34383a !important;
  }

  /* 2. UNIVERSELL TEKST (Overskrifter, etikettar, instruksjonar) */
  .cog-cognito,
  .cog-page__title,
  .cog-section__heading,
  .cog-label,
  .cog-text,
  .cog-instruction,
  .cog-helptext,
  .cog-page__header *,
  .el-checkbox__label,
  .el-radio__label {
    color: #ffffff !important;
    --form__font-color: #ffffff !important;
    --label__font-color: #ffffff !important;
  }

  /* 3. INNDATAFELT & TEKSTBOKSAR (Mørk bakgrunn) */
  .el-input__inner,
  .el-textarea__inner {
    background-color: #2a2d2e !important;
    color: #ffffff !important;
    border: 1px solid #44484a !important;
  }

  /* 4. PLASSHALDARAR (Hjelpetekst inni boksane) */
  .cog-cognito ::placeholder {
    color: #aaaaaa !important;
    opacity: 1;
  }

  /* 5. H2 OVERSKRIFTER OG KNAPPAR */
  .cog-button {
    text-transform: none; /* Tek vare på store/små bokstavar */
  }
  
  .cog-cognito h2, 
  .cog-cognito .cog-section__heading,
  .cog-cognito .cog-section__header {
    color: #ffffff !important;
  }

  /* ========================================= */
  /* 6. SIGNATURFELTET I MØRK MODUS            */
  /* ========================================= */
  .cog-cognito .cog-signature__pad {
    background-color: #2a2d2e !important; /* Mørk bakgrunn */
    color: #ffffff !important;             /* KVITT blekk */
    border: 1px solid #44484a !important;
  }

  /* 7. TEKST OG KNAPPAR I SIGNATURFELTET ("tegne", "skrive inn", 'X') */
  .cog-signature button,
  .cog-signature .cog-button,
  .cog-signature .cog-button--link,
  .cog-signature__clear,
  .cog-signature button span,
  .cog-signature button .el-icon-close {
    color: #aaaaaa !important; /* Mjuk gråtekst */
  }
  
  /* Den aktive fanen (med blå strek under) vert heilt kvit */
  .cog-signature button.is-active span,
  .cog-signature button.is-active .el-icon-close {
    color: #ffffff !important;
  }
}


/* ========================================================== */
/* LYS MODUS (Skuddsikker låsing av signaturfeltet)           */
/* ========================================================== */
@media (prefers-color-scheme: light) {
  
  .cog-cognito .cog-signature__pad {
    background-color: #ffffff !important; /* Kvit bakgrunn */
    color: #000000 !important;             /* SVART blekk */
    border: 1px solid #cccccc !important;  /* Lys grå ramme */
  }
  
}