/*
2024 © Monoforom
http://www.monoform.no
*/

/* RESET */

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;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

video {
  display: block;
  width: 100%;
  height: auto;
}

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;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* CLEARFIX */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
 
.clearfix {
  display: inline-block;
}
 
html[xmlns] .clearfix {
  display: block;
}
 
* html .clearfix {
  height: 1%;
}

:root {
  --color-primary: #d04620;
  --color-text: #5C5C5C;
}

/* TAB-NAVIGERING HOPP TIL HOVEDINNHOLD
----------------------------------------------- */

.snarvei {
  position: absolute;
  left: -2000px;
  top: 0px;
  font-size: 16px;
  background-color: var(--color-primary);
  color: #fff;
  padding: 5px 10px;
  z-index: 9999;
  text-decoration: none;
}

.snarvei:focus {
  left: 0px;
}

main:focus {
  outline: 0;
}

/* GENERELL STYLING og SKJERM
----------------------------------------------- */

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body { 
  background: #ffffff;
  color: #5C5C5C;
  font-family: 'Titillium Web', sans-serif; /* 400, 600, 700 */
  font-size: 28px;
  font-weight: 400;
  line-height: 1.35em;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

/* MARGER, PADDING OG STØRRELSER */

.fluidwrapper {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.mainpadding {
  padding-left: 150px;
  padding-right: 150px;
}

.fullwidth, img {
  display: block;
  width: 100%;
}

hr {
  border: 0;
  height: 0;
  border-top: 1px solid black;
}

.skjemastyle hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgb(204, 204, 204);
}

/* FARGEPALLETT */

.bg-lightgrey {
  background: #f1f1f1;
}

.bg-darkgrey {
  background: #a2a2a2;
}

.bg-yellow {
  background: yellow;
}

.bg-green {
  background: green;
}

/* TEKSTSTYLING */

h1 {font-size: 60px;}
h2 {font-size: 48px;}
h3 {font-size: 28px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  line-height: 1.1em;
  font-weight: 600;
}

.textstyle h3 {
  margin-bottom: 0.10em;
}

blockquote p {
  line-height: 1.1em;
  font-size: 40px;
  font-weight: 600;
  color: var(--color-primary);
}

p {
  line-height: 1.35em;
}

a {
  color: #4a4a4a;
  text-decoration: underline;
}

a:hover {
  color: #000000;
}

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

strong, .ingress {
  font-weight: 600;
}

em {
  font-style: italic;
}

.textstyle ol, .textstyle ul, .textstyle li {
	margin-left: 0;
	padding-left: 0;
}

.textstyle ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.textstyle ul li {
  list-style-type: square;
  margin-left: 1.15em;
}

.textstyle ol {
  list-style: decimal;
}

.textstyle ol li {
  list-style-position: outside;
  margin-left: 1.35em;
}

.textstyle p+p, .textstyle ul+p, .textstyle ol+p, .textstyle p+ul, .textstyle p+ol, .textstyle ol+ul, .textstyle ul+ol, .textstyle p+h3, .textstyle h3+h3, .textstyle ul+h3, .textstyle ol+h3,
.textstyle p+blockquote, .textstyle blockquote+p, .textstyle blockquote+blockquote, .textstyle ul+blockquote, .textstyle ol+blockquote {
  margin-top: 1.35em;
}

/* RESET FORM */

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search],
input[type=submit],
input[type=password],
textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance:none;
  border: 0;
  border-radius: 0;
}

::-webkit-input-placeholder {
   color: #232327;
}

:-moz-placeholder { /* Firefox 18- */
   color: #232327;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #232327;
}

:-ms-input-placeholder {  
   color: #232327;
}

/* SKJEMASTYLING */

.skjemastyle {
  position: relative;
  z-index: 200;
}

.skjemastyle ::-webkit-input-placeholder {
   color: #bdbdbd;
}

.skjemastyle :-moz-placeholder { /* Firefox 18- */
   color: #bdbdbd;
}

.skjemastyle ::-moz-placeholder {  /* Firefox 19+ */
   color: #bdbdbd;
}

.skjemastyle :-ms-input-placeholder {  
    color: #bdbdbd;
} 

.skjemastyle input,
.skjemastyle textarea,
.skjemastyle select[multiple] {
  color: var(--color-text);
  border: 1px solid var(--color-text);
  line-height: 1.3em;
  padding: 8px 0.7em;
  font-size: 85%;
}

.skjemastyle h4 {
  color: var(--color-primary);
}

.skjemastyle .freeform-label {
  font-size: 85%;
  font-weight: 600 !important;
  color: var(--color-primary);
  margin-bottom: 0.25em;
}

.skjemastyle .freeform-label.checkboxcontainer {
  color: var(--color-text);
  font-weight: 400 !important;
}

.skjemastyle .freeform-column {
  margin-bottom: 0;
}

.skjemastyle .freeform-form-has-errors {
  background: var(--color-primary);
  color: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

.skjemastyle .freeform-errors li {
  font-size: 16px;
  background: var(--color-primary);
  color: #fff !important;
  padding: 8px 15px;
  margin: 0;
  width: auto;
  display: inline-block;
  position: relative;
  top: -5px;
}

/* ----- Popup-error */

.freeform-form-popup-errors {
  z-index: 190;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opacity-errors {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-primary);
  opacity: 1;
}

.error-popup-box {
  z-index: 195;
  background: var(--color-primary);
  padding: 40px;
  width: 90%;
  max-width: 800px;
}

.error-popup-box p {
  color: #fff;
  margin-bottom: 40px;
  text-align: center;
}

.knapp.knapp-error {
  color: #fff;
  max-width: none;
  display: block;
  width: 60px;
  border: 2px solid #fff;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.hideerror {
  display: none;
}

body.form-error .logoheader,
body.form-error .breadcrumb,
body.form-error form a,
body.form-error form input,
body.form-error form textarea,
body.form-error form label,
body.form-error .g-recaptcha,
body.form-error button,
body.form-error .footer,
body.form-error .menubutton-open,
body.form-error .snarvei {
  visibility: hidden;
}

body.form-error .error-popup-box a {
  visibility: unset;
}

/* ----- Select */

.skjemastyle .select-style {
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-text);
    width: 100%;
    max-width: 525px;
    overflow: hidden;
    background-color: #fff;
    background: #fff;
    position: relative;
}

.skjemastyle .select-style:after {
    top: 50%;
    right: 20px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: var(--color-text);
    border-width: 8px;
    margin-top: -4px;
    z-index: 100;
}

.skjemastyle .select-style select {
    font-size: 100%;
    color: var(--color-text);
    line-height: 1.5em;
    padding: 3px 0.7em;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* ----- Radiobuttons/Checkboxes */
.skjemastyle .radiocontainer,
.skjemastyle .checkboxcontainer {
  font-size: 85%;
  display: inline-block !important;
  position: relative;
  padding-left: 32px;
  margin-top: 0;
  margin-bottom: 6px;
  margin-right: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.skjemastyle .radiocontainer input,
.skjemastyle .checkboxcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.skjemastyle .checkboxcontainer input {
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.skjemastyle .checkmark {
  position: absolute;
  top: 7px;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #fff;
  border: 1px solid var(--color-text);
}

.skjemastyle .radiocontainer .checkmark {
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.skjemastyle .radiocontainer:hover input ~ .checkmark,
.skjemastyle .checkboxcontainer:hover input ~ .checkmark {
  background-color: #f2f2f2;
}

/* When the radio button is checked, add a red background */
.skjemastyle .radiocontainer input:checked ~ .checkmark,
.skjemastyle .checkboxcontainer input:checked ~ .checkmark {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.skjemastyle .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.skjemastyle .radiocontainer input:checked ~ .checkmark:after,
.skjemastyle .checkboxcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the radio indicator (dot/circle) */
.skjemastyle .radiocontainer .checkmark:after {
   top: 7px;
  left: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* Style the checkmark/indicator */
.skjemastyle .checkboxcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.radiocontainer input:focus + .checkmark,
.checkboxcontainer input:focus + .checkmark {
  box-shadow: 0 0 0 3px #95b2f5;
}

/* Submit-button */

.skjemastyle button,
.intranettbutton {
  font-size: 24px;
  font-weight: 700;
  background-color: var(--color-primary);
  border: none !important;
  color: #fff !important;
  padding: 16px 32px;
  text-decoration: none;
  margin: 0;
  margin-top: 10px;
  cursor: pointer;
}

.skjemastyle button:hover {
  opacity: 0.8;
}

/* Skjemabilder */

.skjemabilder {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.skjemabilder p {
  width: 100%;
  font-size: 16px;
}

.skjemaspace {
  margin-bottom: 15px;
}

@media only screen and (max-width: 1279px) { /* Tablet Horizontal */
  /* SKJEMASTYLING */
  
  .skjemastyle .freeform-label {
    margin-bottom: 0.5em;
  }
  
  .skjemastyle .select-style {
      max-width: 100%;
  }

  /* Create a custom radio button */
  .skjemastyle .checkmark {
    top: 2px;
  }
}

@media only screen and (max-width: 1023px) { /* Tablet Vertical */
  /* SKJEMASTYLING */
  
  .skjemastyle .freeform-column {
    width: 100% !important;
  }
  
  .skjemastyle button,
  .intranettbutton {
    font-size: 20px;
  }
}

/* BUTTON */

.button {
  display: inline-block;
  border: 0;
  border-radius: 0.25rem;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 1rem 2rem;
  margin: 0;
  margin-right: 20px;
  cursor: pointer;
}

.button-red {
  background: var(--color-primary);
  color: #fff;
}

.button-red:hover {
    background: #ce3800;
    color: #fff;
}

/* FLEXGRID */

.gridcontent {
  display: grid;
  grid-gap: 40px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Gode råd grid item */

.gridcontent .kategori-item {
  display: block;
  height: 320px;
  background-color: var(--color-primary);
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 52px;
  line-height: 1.1em;
  font-weight: 600;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  position: relative;
}

.gridcontent .kategori-item:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 1279px) {
  .gridcontent .kategori-item {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1023px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 567px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* GRID */

.grid {
  display: block;
  overflow: hidden;
  clear: both;
}

.grid .grid-item {
  float: left;
}

.grid-4-4-2-2-1 {
  width: 102.53623188%;
  margin-right: -2.53623188%;
  margin-bottom: -2.53623188%;
}

.grid-4-4-2-2-1 .grid-item {
  width: 22.4637681%;
  margin-right: 2.53623188%;
  margin-bottom: 2.53623188%;
}

.grid-3-3-3-2-1 {
  width: 102.53623188%;
  margin-right: -2.53623188%;
  margin-bottom: -2.53623188%;
}

.grid-3-3-3-2-1 .grid-item {
  width: 30.7971014%;
  margin-right: 2.53623188%;
  margin-bottom: 2.53623188%;
}

.grid-2-2-1-1-1 {
  width: 103.27613105%;
  margin-right: -3.27613105%;
  margin-bottom: -3.27613105%;
}

.grid-2-2-1-1-1 .grid-item {
  width: 46.7238689%;
  margin-right: 3.27613105%;
  margin-bottom: 3.27613105%;
}

/* ISOTOPEGRID MASONRY */

.isotopegrid {
  width: 100%;
  display: block;
  margin-bottom: -20px;
}

.isotopegrid .kategori-item, .grid-sizer {
  width: 48.5%;
}

.gutter-sizer {
  width: 3%;
}

.isotopegrid .kategori-item {
  margin-bottom: 3%;
  position: relative;
  
  text-decoration: none;
  color: #fff;
  font-size: 40px;
  line-height: 1.1em;
  font-weight: 600;
}

.isotopegrid .kategori-item:hover {
  opacity: 0.8;
}

.kategorifilter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
}

.kategori-item-navn {
  position: absolute;
  left: 30px;
  bottom: 30px;
  margin-right: 30px;
  max-width: 450px;
  z-index: 2;
}

@media only screen and (max-width: 1279px) {
  .isotopegrid .kategori-item {
    font-size: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .isotopegrid .kategori-item {
    font-size: 30px;
  }
  .kategori-item-navn {
    left: 20px;
    bottom: 20px;
    margin-right: 20px;
  }
}

@media only screen and (max-width: 567px) {
  .isotopegrid .kategori-item, .grid-sizer {
  width: 100%;
  }
  .isotopegrid .kategori-item {
    margin-bottom: 30px;
  }
  .gutter-sizer {
    width: 0;
  }
}

/* IMPORTANT MESSAGE */

.fixed-message {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.importantmessage {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1240px;
  background: #f9bd1d;
  padding: 80px 45px 45px 45px;
  margin: 0 150px;
  pointer-events: auto;
}

.hidemessage {
  display: none;
}

.importantmessage h2 {
  margin-bottom: 0.3em;
}

.importantmessage p {
  margin-bottom: 1em;
}

.closex {
  position: absolute;
  top: 20px;
  right: 20px;
}

.closex i{
  font-size: 3.0rem;
}

.importantmessage .lesmer {
  font-size: 20px;
}

/* fadin */

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation: fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;

  -webkit-animation-fill-mode: forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  -webkit-animation-duration: 0.6s;
  -moz-animation-duration: 0.6s;
  animation-duration: 0.6s;
  
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  animation-delay: 4s;
}

#cookie-popup {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f1f1f1;
  padding: 50px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 1000;
}

.popup-flex {
  display: flex;
  align-items: center;
  gap: 40px;
}

.cookie-info {
  font-size: 22px;
  margin-right: auto;
}

.cookie-info h3 {
  font-size: 26px;
  margin-bottom: 0.5em;
}

#cookie-popup button {
  font-size: 22px;
  font-weight: 700;
  background-color: var(--color-primary);
  border: none !important;
  color: #fff !important;
  padding: 14px 30px;
  text-decoration: none;
  margin: 0;
  margin-top: 10px;
  cursor: pointer;
  
  flex-shrink: 0;
}

#cookie-popup button:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 767px) { /* Mobile Horizontal */
  #cookie-popup {
    padding: 30px;
  }
  
  .popup-flex {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* LOGOHEADER */

.logoheader {
  height: 280px;
  position: relative;
  display: block;
  background: #fff;
}

.logoheader.whitemenu {
  background: transparent;
}

.logoheader a.logo {
  display: inline-block;
  width: 257px;
  float: right;
  margin-top: -62px;
  margin-right: -52px;
  position: relative;
  z-index: 200; 
}

.logoheader ul {
  float: left;
  margin-top: 70px;
  position: relative;
  z-index: 200;
}

.logoheader ul li {
  display: inline-block;
  margin-right: 40px;
}

.logoheader ul li a {
  text-decoration: none;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
}

.logoheader.whitemenu ul li a {
  color: #fff;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
}

.logoheader ul li a:hover {
  color: #5C5C5C;
}

.logoheader.whitemenu ul li a:hover {
  color: #c6c6c6;
}

.lukksiden {
  position: fixed;
  top: 50%;
  right: 0;
  margin-top: -45px;
  z-index: 998;
}

.lukksiden img {
  width: 68px;
}

.lukksiden:hover {
  opacity: 0.8;
}

/* HOVEDMENY */

.fixed-menutrigger {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  display: block;
  z-index: 100;
  height: 0;
}

.fixed-menutrigger .fluidwrapper {
  position: relative;
}

.menubutton {
  display: inline-block;
  margin-top: 65px;
  margin-left: -100px;
  overflow: hidden;
}

.menubutton:hover svg path,
.menubutton:hover svg rect {
  fill: #5C5C5C !important;
}

.midnightHeader.white .menubutton:hover svg path,
.midnightHeader.white .menubutton:hover svg rect {
  fill: #c6c6c6 !important;
}

.menubutton img {
  width: 51px;
}

.midnightHeader.default .menubutton svg path,
.midnightHeader.default .menubutton svg rect {
  fill: var(--color-primary);
}

.midnightHeader.white .menubutton svg path,
.midnightHeader.white .menubutton svg rect {
  fill: #fff;
}

.menucontent {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  background: var(--color-primary);
  padding: 0;
  padding-bottom: 80px;
  z-index: 900;
  
  -webkit-transition: -webkit-all 0.2s ease-in, -webkit-transform 0.2s ease-in;
  -moz-transition: -moz-all 0.2s ease-in, -moz-transform 0.2s ease-in;
  -o-transition: -o-all 0.2s ease-in, -o-transform 0.2s ease-in;
  transition: all 0.2s ease-in, transform 0.2s ease-in;
}

body.menu-visible {
  overflow: hidden; /* no scrollbar body when menu visible */
}

body.menu-visible .logoheader,
body.menu-visible #hovedinnhold,
body.menu-visible .footer,
body.menu-visible .menubutton-open,
body.menu-visible .snarvei {
  visibility: hidden;
}

body.menu-visible .menucontent {
  opacity: 1;
  visibility: visible;
  
  -webkit-transition: -webkit-all 0.2s ease-in, -webkit-transform 0.2s ease-in;
  -moz-transition: -moz-all 0.2s ease-in, -moz-transform 0.2s ease-in;
  -o-transition: -o-all 0.2s ease-in, -o-transform 0.2s ease-in;
  transition: all 0.2s ease-in, transform 0.2s ease-in;
}

.menubutton-close {
  margin-bottom: 80px;
}

.menubutton-close:hover {
  opacity: 0.6;
}

.menucontent a {
  color: #fff;
  text-decoration: none;
}

.menucontent a:hover {
  opacity: 0.6;
}

.menucolumn1 {
  float: left;
  padding-right: 40px;
  border-right: 2px solid #fff;
  width: 50%;
  max-width: 530px;
}

.mainpages {
  margin-bottom: 60px;
}

.mainpages a {
  font-size: 46px;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  line-height: 1.5em;
}

.subpages a {
  font-size: 40px;
  font-weight: 400;
  display: block;
  line-height: 1.6em;
}

.languages {
  float: left;
  padding-left: 8%;
  width: 50%;
  max-width: 470px;
}

.languages p {
  margin-top: 4px;
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 12px;  
}

.languages li {
  display: inline-block;
  width: 150px;
  padding-right: 40px;
}

.languages li a {
  font-size: 30px;
  display: block;
  line-height: 1.6em;
}

/* SØKEFELT */

.sokefelt {
  width: 100%;
  display: block;
  position: relative;
  margin-top: 60px;
  font-size: 25px;
  height: 50px;
}

.sokefelt i {
  position: absolute;
  top: 12px;
  left: 12px;
  color: var(--color-primary);
}

.sokefelt input {
  background: #fff;
  border-radius: 5px;
  padding-left: 50px;
  font-size: inherit;
  color: var(--color-primary) !important;
  height: 50px;
  width: 100%;
}

.sokefelt ::-webkit-input-placeholder {
   color: var(--color-primary);
}

.sokefelt :-moz-placeholder { /* Firefox 18- */
   color: var(--color-primary);
}

.sokefelt ::-moz-placeholder {  /* Firefox 19+ */
   color: var(--color-primary);
}

.sokefelt :-ms-input-placeholder {  
   color: var(--color-primary);
}
  

/* FORSIDE */
.forsidehero {
  position: relative; 
  display: block; 
  width: 100%; 
  height: 100%; 
  background: #000;
  background-position: center center !important;
  overflow: hidden;
}

.forsidehero-opacity {
  position: absolute; 
  display: block; 
  width: 100%; 
  height: 100%; 
  right: 0; 
  left: 0; 
  top: 0; 
  bottom: 0; 
  background: #000;
}

.forsidehero-payoff {
  z-index: 10;
  display: block;
  width: 100%;
  
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.forsidehero-payoff h1 {
  font-size: 85px;
  font-weight: 700;
  color: #fff;
  width: 100%;
  max-width: 570px;
  margin-bottom: 0.3em;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
}

.forsidehero-payoff p {
  font-size: 45px;
  font-weight: 600;
  color: #fff;
  width: 100%;
  max-width: 440px;
  line-height: 1.2em;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
}

.forsidehero-payoff p.barneverntekst {
  margin-top: 1.3em;
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  width: 100%;
  max-width: 440px;
  line-height: 1.2em;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
}

/* Heroscroll */
.forsidehero #scroll {
    position: fixed;
    left: 50%;
    margin-left: -13px;
    bottom: 0;
    -webkit-animation: fadeIn .5s 1s both;
    animation: fadeIn .5s 1s both;
    z-index: 3;
    
    -webkit-transition: -webkit-all 0.2s ease-in, -webkit-transform 0.2s ease-in;
    -moz-transition: -moz-all 0.2s ease-in, -moz-transform 0.2s ease-in;
    -o-transition: -o-all 0.2s ease-in, -o-transform 0.2s ease-in;
    transition: all 0.2s ease-in, transform 0.2s ease-in;
}

.page-scrolling .forsidehero #scroll {
    bottom: -200px;
    -webkit-transition: -webkit-all 0.2s ease-in, -webkit-transform 0.2s ease-in;
    -moz-transition: -moz-all 0.2s ease-in, -moz-transform 0.2s ease-in;
    -o-transition: -o-all 0.2s ease-in, -o-transform 0.2s ease-in;
    transition: all 0.2s ease-in, transform 0.2s ease-in;
}

.forsidehero #scroll svg {
    display: block;
    -webkit-animation: svgScroll 2s infinite;
    animation: svgScroll 2s infinite;
    -webkit-transform-origin: bottom;
    transform-origin: bottom
}

.forsidehero #scroll svg line, .forsidehero #scroll svg rect {
    stroke: #fff
}

.forsidehero #scroll svg rect {
    stroke-dasharray: 120;
    -webkit-animation: strokIn .7s cubic-bezier(.645, .045, .355, 1) 1s both;
    animation: strokIn .7s cubic-bezier(.645, .045, .355, 1) 1s both
}

.forsidehero #scroll svg line {
    -webkit-animation: lineIn .7s cubic-bezier(.645, .045, .355, 1) 1s both;
    animation: lineIn .7s cubic-bezier(.645, .045, .355, 1) 1s both
}

.forsidehero #scroll i {
    position: absolute;
    width: 4px;
    height: 13px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    left: 11px;
    top: 11px;
    -webkit-animation: dot 2s linear infinite;
    animation: dot 2s linear infinite
}

@-webkit-keyframes svgScroll {
    0%, 100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    50% {
        -webkit-transform: scale(1, .9);
        transform: scale(1, .9)
    }
}

@-moz-keyframes svgScroll {
    0%, 100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    50% {
        -webkit-transform: scale(1, .9);
        transform: scale(1, .9)
    }
}

@keyframes svgScroll {
    0%, 100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    50% {
        -webkit-transform: scale(1, .9);
        transform: scale(1, .9)
    }
}

@-webkit-keyframes strokIn {
    from {
        stroke-dashoffset: 121
    }

    to {
        stroke-dashoffset: 0
    }
}

@-moz-keyframes strokIn {
    from {
        stroke-dashoffset: 121
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes strokIn {
    from {
        stroke-dashoffset: 121
    }

    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes lineIn {
    from {
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-moz-keyframes lineIn {
    from {
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes lineIn {
    from {
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes dot {
    0%, 100% {
        -webkit-transform-origin: top;
        transform-origin: top;
        -webkit-transform: translateY(0) scale(1, 1);
        transform: translateY(0) scale(1, 1)
    }

    8% {
        -webkit-transform-origin: top;
        transform-origin: top;
        -webkit-transform: translateY(0) scale(1, .7);
        transform: translateY(0) scale(1, .7)
    }

    50% {
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        -webkit-transform: translateY(21px) scale(1, 1);
        transform: translateY(21px) scale(1, 1)
    }

    60% {
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        -webkit-transform: translateY(21px) scale(1, .7);
        transform: translateY(21px) scale(1, .7)
    }
}

@-moz-keyframes dot {
    0%, 100% {
        -webkit-transform-origin: top;
        transform-origin: top;
        -webkit-transform: translateY(0) scale(1, 1);
        transform: translateY(0) scale(1, 1)
    }

    8% {
        -webkit-transform-origin: top;
        transform-origin: top;
        -webkit-transform: translateY(0) scale(1, .7);
        transform: translateY(0) scale(1, .7)
    }

    50% {
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        -webkit-transform: translateY(21px) scale(1, 1);
        transform: translateY(21px) scale(1, 1)
    }

    60% {
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        -webkit-transform: translateY(21px) scale(1, .7);
        transform: translateY(21px) scale(1, .7)
    }
}

@keyframes dot {
    0%, 100% {
        -webkit-transform-origin: top;
        transform-origin: top;
        -webkit-transform: translateY(0) scale(1, 1);
        transform: translateY(0) scale(1, 1)
    }

    8% {
        -webkit-transform-origin: top;
        transform-origin: top;
        -webkit-transform: translateY(0) scale(1, .7);
        transform: translateY(0) scale(1, .7)
    }

    50% {
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        -webkit-transform: translateY(21px) scale(1, 1);
        transform: translateY(21px) scale(1, 1)
    }

    60% {
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        -webkit-transform: translateY(21px) scale(1, .7);
        transform: translateY(21px) scale(1, .7)
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: .001
    }

    100% {
        opacity: .999
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: .001
    }

    100% {
        opacity: .999
    }
}

@keyframes fadeIn {
    0% {
        opacity: .001
    }

    100% {
        opacity: .999
    }
}

/* Forsidetekst */
.forsidetekst {
  padding: 50px 0;
}

.forsidetekst p {
  font-size: 34px;
  color: var(--color-primary);
}

/* Råd og fakta  */
.raadogfakta-wrapper {
  background: #EDF6FA;
  padding-top: 80px;
  padding-bottom: 80px;
}

.raadutlisting .grid-item {
  background: #fff;
  padding: 45px;
  border: 2px solid var(--color-primary);
  text-align: center;
}

.raadutlisting .grid-item a:hover,
.raadutlisting .grid-item a:hover img {
  opacity: 0.6;
}

.raadutlisting .grid-item img {
  margin-bottom: 30px;
  max-width: 400px;
  margin: 0 auto 30px;
}

.raadutlisting .grid-item h3 {
  font-size: 34px;
  margin-bottom: 15px;
}

.raadutlisting .grid-item p {
  font-size: 22px;
  margin-bottom: 25px;
}

.raadutlisting .grid-item .faradlenke {
  font-size: 28px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  position: relative;
  padding-right: 65px;
}

.raadutlisting .grid-item .faradlenke img {
  width: 50px;
  position: absolute;
  top: -6px;
  right: 0;
}

.forsidefakta {
  margin-top: 40px;
  border: 2px solid var(--color-primary);
}

.faktaitem {
  float: left;
  width: 25%;
  background: #fff;
  padding: 35px;
  text-align: center;
  border-right: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.faktanr4 {
  border-right: 0;
}

.faktaitem img {
  width: 60%;
  max-width: 150px;
  margin: 0 auto 15px;
}

.faktaitem .symboltittel {
  font-size: 22px;
}

.faktaitem .symboldata {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2em;
}

/* Forsidevideo  */

.forsidevideo {
  margin-top: 50px;
  margin-bottom: 50px;
}

.bildetekst {
  font-size: 20px;
  font-style: italic;
  margin-top: 7px;
}

/* Aktuelt  */

.forsideaktuelt h2 {
  font-size: 40px;
  margin-bottom: 20px;
}

.aktueltutlisting img {
  margin-bottom: 15px;
}

.aktueltutlisting img:hover {
  opacity: 0.6;
}

.aktueltutlisting a {
  text-decoration: none;
}

.aktueltutlisting h3 {
  font-size: 28px;
  line-height: 1.25em;
  margin-bottom: 10px;
}

.aktueltutlisting p {
  line-height: 1.25em;
  margin-bottom: 5px;
  font-size: 22px;
}

.aktueltutlisting .lesmer {
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
}

.flereaktuelt {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 20px;
  font-weight: 700;
  margin-top: 20px;
}

/* MALSIDE */

.redbackground {
  background: var(--color-primary);
}

.whitebackground {
  background: #fff;
}

.malside .fluidmargin-bottom a {
  position: relative;
  z-index: 300;
}

.fluidmargin-bottom {
  margin-bottom: 45px;
}

.breadcrumb {
  margin-top: -70px;
  margin-bottom: 30px;
  position: relative;
  z-index: 200;
}

.breadcrumb,
.breadcrumb a {
  color: var(--color-primary);
  font-size: 16px;
}

.malside.righttoleft .breadcrumb {
  direction: rtl;
}

.breadcrumb a:hover {
  opacity: 0.8;
}

.malside h1 {
  margin-bottom: 0.6em;
  max-width: 930px;
  
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.malside.righttoleft h1 {
  direction: rtl;
  max-width: 100%;
  margin-top: 30px;
}

.fluid-brodtekst-stor,
.fluid-brodtekst-stor h3 {
  font-size: 34px;
}

.fluid-goderadboks .goderadboks-item {
  border: 2px solid var(--color-primary);
  margin: 80px auto;
  max-width: 800px;
  padding: 50px;
  color: var(--color-primary);
}

.fluid-goderadboks .goderadboks-item h3 {
  font-size: 60px;
  margin-bottom: 0.2em;
}

.fluid-goderadboks .goderadboks-item p {
  margin-bottom: 1.3em;
}

.fluid-goderadboks .goderadboks-item a {
  font-size: 28px;
  display: block;
  width: 100%;
  text-align: right;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding-right: 65px;
}

.fluid-goderadboks .goderadboks-item a img {
  width: 50px;
  position: absolute;
  top: -6px;
  right: 0;
}

.fluid-goderadboks .goderadboks-item a:hover {
  opacity: 0.8;
}

.fluid-tittelh2 h2 {
  color: #484848;
  margin-bottom: 0.7em;
}

/* Lenkeliste */

.mainpadding .lenkeliste .grid-item {
  margin-bottom: 0;
}

.mainpadding .lenkeliste.grid-2-2-1-1-1 {
  margin-bottom: 0;
}

.lenkeliste .grid-item {
  border-bottom: 2px solid var(--color-primary);
}

.lenkeliste a {
  font-size: 34px;
  text-decoration: none;
  color: var(--color-primary);
  display: block;
  width: 100%;
  line-height: 40px;
  padding: 15px 40px 15px 0px;
  position: relative;
}

.lenkeliste a:hover {
  color: #5C5C5C;
}

.lenkeliste a i {
  font-weight: 300;
  position: absolute;
  top: 15px;
  right: 0;
  font-size: 40px;
}

.fluid-lenkeliste .lenkeliste a i {
  font-size: 30px;
  line-height: 40px;
}

.redtop-liste1,
.grid-2-2-1-1-1 .redtop-liste2 {
  border-top: 2px solid var(--color-primary);
}

.lenkeliste-tekstinnhold {
  padding: 5px 30px 40px 30px;
}

.informasjonsmateriell .lenkeliste-tekstinnhold {
  padding: 5px 0 40px 0;
}

.hiddeninnhold {
  display: none;
}

/* Søkeliste */

.sok-item {
  width: 100%;
  text-decoration: none;
  padding: 1em 0;
  border-bottom: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
}

.sok-item h2 {
  font-size: 30px;
  margin-bottom: 0.3em;
  line-height: 1.25em;
}

.sok-item p {
  font-size: 25px
}

.sok-item i {
  margin-left: auto;
  padding-left: 30px;
  color: var(--color-primary);
  font-size: 30px;
}

/* Filliste */


.filliste a {
  color: #5C5C5C;
  font-size: 28px;
  border-bottom: 1px solid #5C5C5C;
}

.filliste a:hover {
  color: var(--color-primary);
}

.filliste a.last-filitem {
  border-bottom: 0;
  padding-bottom: 0;
}

.filliste a.first-filitem {
  border-top: 1px solid #5C5C5C;
}

.fluid-lenkeliste h2 {
  color: #484848;
  margin-bottom: 0.6em;
}

/* Slik opplever andre barn det */

.fluid-slikopplever {
  background: #EDF6FA;
  padding: 80px 0;
}

.slikopplever-boks {
  padding: 55px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  border: 2px solid var(--color-primary);
  background: #fff;
}

.slikopplever-boks h3 {
  font-size: 40px;
  margin-bottom: 35px;
}

.slikopplever-boks img {
  width: 341px;
  margin: 0 auto;
  margin-bottom: 15px;
}

.slikopplever-boks .barn-kilde {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 5px;
}

.slikopplever-boks .barn-sitat {
  font-size: 22px;
}

/* FOOTER */

.footer {
  background: var(--color-primary);
  color: #fff;
  display: block;
  width: 100%;
  margin-top: 80px;
}

.footercontent {
  padding: 36px 0 63px 0;
}

.footercontent a {
  color: #fff;
  text-decoration: none;
}

.footercontent a:hover {
  opacity: 0.6;
}

.footer-leftcontent {
  float: left;
}

.footer-adressefelt {
  font-size: 20px;
}

.footer-some {
  float: right;
  margin-bottom: 50px;
}

.footer-some a {
  display: inline-block;
  margin-left: 7px;
}


.footer-some img {
  width: 39px;
}

.footer-credits {
  float: right;
  font-size: 16px;
  clear: right;
  text-align: right;
}

.footer-credits strong a {
  text-decoration: underline;
  font-weight: 700;
}


/* TABLET HORISONTAL
----------------------------------------------- */
@media only screen and (max-width: 1279px) {
  
body {
  font-size: 22px;
}
  
h1 {font-size: 40px;}
h2 {font-size: 40px;}
h3 {font-size: 22px;}
h4 {font-size: 16px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}

blockquote p {
  font-size: 34px;
}
  
.mainpadding,
.mainpadding-big {
  padding-left: 60px;
  padding-right: 60px;
}

/* IMPORTANT MESSAGE */

.importantmessage {
  margin: 0 60px;
}

/* LOGOHEADER */

.logoheader {
  height: 190px;
}

.logoheader a.logo {
  width: 153px;
  margin-top: -50px;
  margin-right: 0;
}

.logoheader ul {
  display: none;
}

.lukksiden {
  margin-top: -38px;
}

.lukksiden img {
  width: 57px;
}

/* HOVEDMENY */

.fixed-menutrigger {
  z-index: 300;
  width: 130px;
}

.menubutton {
  margin-top: 20px;
  margin-left: 0;
  margin-bottom: 55px;
}

.menucolumn1 {
  padding-right: 0;
  border-right: 0;
  padding-bottom: 35px;
  border-bottom: 2px solid #fff;
  width: 100%;
  max-width: 100%;
}

.mainpages {
  margin-bottom: 30px;
}

.languages {
  padding-top: 45px;
  padding-left: 0;
  width: 100%;
  max-width: 330px;
}

.languages p {
  margin-top: 0;
  font-size: 28px;
}

.languages li {
  width: 130px;
}

.languages li a {
  font-size: 22px;
}

/* SØKEFELT */

.sokefelt {
  margin-top: 40px;
  font-size: 22px;
}


/* FORSIDE */

.forsidehero-payoff h1 {
  font-size: 70px;
  max-width: 450px;
}

.forsidehero-payoff p {
  font-size: 44px;
  max-width: 400px;
}

.forsidehero-payoff p.barneverntekst {
  margin-top: 1.1em;
  font-size: 22px;
  max-width: 400px;
}

/* Heroscroll */
#scroll {
  display: none;
}

/* Forsidetekst */

.forsidetekst p {
  font-size: 28px;
}

/* Råd og fakta  */
.raadogfakta-wrapper {
  padding-top: 60px;
  padding-bottom: 60px;
}

.raadutlisting .grid-item {
  padding: 35px;
}

.raadutlisting .grid-item img {
  margin-bottom: 20px;
}

.raadutlisting .grid-item h3 {
  font-size: 30px;
}

.raadutlisting .grid-item p {
  font-size: 22px;
}

.raadutlisting .grid-item .faradlenke {
  font-size: 22px;
  padding-right: 57px;
}

.raadutlisting .grid-item .faradlenke img {
  width: 45px;
  top: -7px;
}

.forsidefakta {
  margin-top: 30px;
}

.faktaitem {
  width: 50%;
  padding: 35px;
}

.faktanr1,
.faktanr2 {
  border-bottom: 2px solid var(--color-primary);
}

.faktanr2 {
  border-right: 0;
}

/* Forsidevideo  */

.bildetekst {
  font-size: 18px;
}

/* MALSIDE */

.malside h1 {
  margin-bottom: 0.4em;
}

.breadcrumb {
  margin-top: 0;
  margin-bottom: 20px;
}

.breadcrumb,
.breadcrumb a {
  font-size: 14px;
  line-height: 1.4em;
}

.fluid-brodtekst-stor,
.fluid-brodtekst-stor h3 {
  font-size: 28px;
}

.fluid-goderadboks .goderadboks-item {
  margin: 60px auto;
  padding: 30px;
}

.fluid-goderadboks .goderadboks-item h3 {
  font-size: 40px;
}

.fluid-goderadboks .goderadboks-item a {
  font-size: 22px;
  padding-right: 52px;
}

.fluid-goderadboks .goderadboks-item a img {
  width: 40px;
  top: -5px;
}

/* Lenkeliste */

.lenkeliste a {
  font-size: 28px;
  line-height: 35px;
  padding: 10px 40px 10px 0;
}

.lenkeliste a i {
  top: 10px;
  font-size: 35px;
}

.fluid-lenkeliste .lenkeliste a i {
  font-size: 25px;
  line-height: 35px;
}

.lenkeliste-tekstinnhold {
  padding: 5px 0 40px 0;
}

/* Søkeliste */

.sok-item h2 {
  font-size: 25px;
}

.sok-item p {
  font-size: 20px
}

.sok-item i {
  font-size: 25px;
}

/* Filliste */

.filliste a {
  font-size: 22px;
}

/* Slik opplever andre barn det */

.fluid-slikopplever {
  padding: 60px 0;
}

.slikopplever-boks {
  padding: 40px;
}

.slikopplever-boks h3 {
  font-size: 34px;
}

.slikopplever-boks img {
  width: 100%;
  max-width: 315px;
}

.slikopplever-boks .barn-kilde {
  font-size: 28px;
}

.slikopplever-boks .barn-sitat {
  font-size: 22px;
}

}

/* TABLET VERTICAL
----------------------------------------------- */
@media only screen and (max-width: 1023px) {
  

/* GRID */  

.grid-2-2-1-1-1 {
  width: 100%;
  margin-right: 0;
  margin-bottom: -30px;
}

.grid-2-2-1-1-1 .grid-item {
  width: 100%;
  margin-right: 0;
  margin-bottom: 30px;
}

.grid-4-4-2-2-1 {
  width: 103.14371257%;
  margin-right: -3.14371257%;
  margin-bottom: -3.14371257%;  
}

.grid-4-4-2-2-1 .grid-item {
  width: 46.8562874%;
  margin-right: 3.14371257%;
  margin-bottom: 3.14371257%;
}

/* FORSIDE */
.forsidehero {
  background-position: 75% 50% !important;
}

/* Lenkeliste */

.grid-2-2-1-1-1 .redtop-liste2 {
  border-top: 0;
}

/* Slik opplever andre barn det */

.slick-prev,
.slick-next {
  display: none !important;
}

/* FOOTER */

.footer-adressefelt {
  margin-bottom: 50px;
}

.footer-credits {
  float: left;
  text-align: left;
  clear: both;
}

}

/* MOBILE HORISONTAL
----------------------------------------------- */
@media only screen and (max-width: 767px) {

.mainpadding,
.mainpadding-big {
  padding-left: 30px;
  padding-right: 30px;
}

/* IMPORTANT MESSAGE */

.importantmessage {
  margin: 0;
  padding: 80px 30px 30px 30px;
}

.importantmessage h2 {
  font-size: 35px;;
}

.importantmessage p {
  font-size: 16px;
}

/* GRID */  

.grid-4-4-2-2-1 {
  width: 104.97237569%;
  margin-right: -4.97237569%;
  margin-bottom: -4.97237569%;
}

.grid-4-4-2-2-1 .grid-item {
  width: 45.0276243%;
  margin-right: 4.97237569%;
  margin-bottom: 4.97237569%;
}

/* LOGOHEADER */

.logoheader {
  height: 175px;
}

/* HOVEDMENY */

.menubutton-close {
  margin-bottom: 25px;
}

.mainpages {
  margin-bottom: 25px;
}

.mainpages a {
  font-size: 30px;
  line-height: 1.6em;
}

.subpages a {
  font-size: 26px;
  line-height: 1.6em;
}

.languages {
  padding-top: 35px;
  padding-left: 0;
  width: 100%;
  max-width: 330px;
}

.languages p {
  margin-top: 0;
  font-size: 28px;
}

.languages li {
  width: 130px;
}

/* FORSIDE */
.forsidehero-payoff h1 {
  font-size: 50px;
  max-width: 310px;
}

.forsidehero-payoff p {
  font-size: 30px;
  max-width: 295px;
}

.forsidehero {
  height: auto; 
}

.forsidehero-payoff {
  position: relative !important;
  top: 0;
  -webkit-transform: translate(0, 0) translate3d(0, 0, 0);
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: translate(0, 0) translate3d(0, 0, 0);
  margin-bottom: 100px;
}

/* FOOTER */

.footer {
  margin-top: 60px;
}

.footer-adressefelt {
  margin-bottom: 30px;
}

.footer-some {
  float: left;
  clear: both;
}

.footer-some a {
  margin-left: 0;
  margin-right: 7px;
}

}

/* MOBILE VERTICAL
----------------------------------------------- */
@media only screen and (max-width: 567px) {
  
/* GRID */  
  
.grid-4-4-2-2-1 {
  width: 100%;
  margin-right: 0;
  margin-bottom: -25px;
}

.grid-4-4-2-2-1 .grid-item {
  width: 100%;
  margin-right: 0;
  margin-bottom: 25px;
}


/* Råd og fakta  */

.faktaitem {
  width: 100%;
  padding: 50px 35px;
}

.faktanr3 {
  border-bottom: 2px solid var(--color-primary);
}

.faktanr1,
.faktanr3 {
  border-right: 0;
}

}