:root {


  /* Colors: */
  --color-darkblue: #1F406D;
  --color-lightgrey : #F0F0F0;
  --color-lightgreen : #E2F1E2;
  --color-greyishblue : #C0D2D6;
  --color-yellowpastel : #FCF1DE;
  --color-sandgrey : #F2F1EE;
  --color-lightblue : #2da1d6;
  --color-black : #191919;


  /* Font/text values */
  --font-family-ibm-plex-sans: IBM Plex Sans;
  --font-family-sans-serif: sans-serif;
  --font-style-normal: normal;
  --font-weight-300: 300px;
  --font-weight-600: 600px;
  --font-weight-bold: bold;
  --font-weight-normal: normal;
  --font-size-12: 0.75rem;
  --font-size-14: 0.85rem;
  --font-size-16: 1rem;
  --font-size-20: 1.25rem;
  --font-size-25: 1.55rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.9rem;
  --font-size-45: 2.8rem;
  --line-height-58: 3.65rem;
  --character-spacing-1: 0.07rem;
  --line-spacing-20: 1.25rem;
  --line-spacing-27: 1.7rem;
  --line-spacing-32: 2rem;
  --page-margin-H : 32px;
  --content-padding: 8px;
  --content-padding_s: 4px;
  --page-margin-v : 10px;
}

html{
  font-size: 100%;
  font-family: 'IBM Plex Sans', sans-serif;
}

body {
  padding: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-x: hidden;
  margin: 0;
  box-sizing: border-box;
  color: var(--color-darkblue);
}

form {
  padding: 0;
  margin: 0;
  width: unset;
  height: unset;
  box-sizing: border-box;
}

dialog{
  border: none;
  box-shadow: 0px 3px 6px #00000029;
}

dialog::backdrop{
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

h1 {
  font: var(--font-weight-bold) var(--font-size-25) var(--font-family-ibm-plex-sans);
  line-height: var(--line-spacing-32);
  margin: 0;
}

h2 {
  font: var(--font-weight-bold) var(--font-size-20) var(--font-family-ibm-plex-sans);
  line-height: var(--line-spacing-37);
  margin: 0;
}

h3 {
  font: var(--font-weight-bold) var(--font-size-20) var(--font-family-ibm-plex-sans);
  line-height: var(--line-spacing-27);
  color: var(--color-darkblue);
  margin: 0;
}

a {
  font-size: var(--font-size-16);
  font-family: var(--font-family-ibm-plex-sans);
  text-decoration: unset;
  color: var(--color-lightblue);
  font-size: revert;
}

a.discrete, h3 > a,h1 > a,h2 > a{
  color: unset;
}

a:hover {
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.pointer{
  cursor:pointer;
}

.bold {
  font-weight: bold;
}

.enlargeText :first-child{
  transition: all 0.3s ease-in-out;
}

a.no_hover:hover {
  font-weight: normal;
}

.inline-block {
  display: inline-block;
}

.fit_image{
  width: 100%;
  height: auto;
  object-fit: cover;
}

.image_to_white{
  filter: brightness(1000%) saturate(0%);
}

body .idx_button.only_desktop, body .only_desktop{
  display: none;
}

body .idx_button.only_mobile, body .only_mobile{
  display: unset;
}

body .dont_display{
  display:none;
}

.infront1{
  z-index: 1;
}

.large_italic_text {
  font: italic var(--font-size-25)/var(--line-spacing-32) var(--font-family-ibm-plex-sans);
}

.small_text{
  font-size: var(--font-size-12);
}

.small_bold{
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-14);
}

.text_white {
  color: #FFFFFF;
}


.text_no_wrap{
  white-space: nowrap; 
}

.text_darkblue{
  color: var(--color-darkblue);
}

.text_right{
  text-align: right;
}

.max_content_width{
  width: max-content;
}

.bg_white{
  background: white;
}

.bg_white_blur{
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding-left: 6px;
  padding-right: 6px;
}

.bg_lightgrey {
  background: var(--color-lightgrey);
}

.bg_sandgrey{
  background: var(--color-sandgrey);
}

.bg_lightgreen {
  background: var(--color-lightgreen);
}

.bg_yellowpastel {
  background: var(--color-yellowpastel);
}

.bg_greyishblue {
  background:var(--color-greyishblue);
}

.idx_content_section{
  padding-top: calc(var(--page-margin-v) * 8);
  padding-bottom: calc(var(--page-margin-v) * 8);
}


.idx_small_content_section{
  padding-top: calc(var(--page-margin-v) * 2);
  padding-bottom: calc(var(--page-margin-v) * 2);
}

.content_pad{
  padding-right: var(--content-padding);
  padding-left: var(--content-padding);
}

.text_size_1{
  font-size: var(--font-size-20);
}

.idx_content{
  overflow-x:hidden;
  font: var(--font-style-normal) normal var(--font-weight-600) var(--font-size-16)/var(--line-spacing-20) var(--font-family-ibm-plex-sans);
  background-color: white;
  min-width: 0;
}

.idx_content:nth-child(2){
  padding-top:56px;
} 

.idx_content > div, .idx_content > footer {
  padding-left: var(--page-margin-H);
  padding-right: var(--page-margin-H);
}

.idx_content > div.idx_content_margin {
  margin-left: var(--page-margin-H);
  margin-right: var(--page-margin-H);
}

.idx_content > div.no_pad_H, html .no_pad_H{
  padding-left: 0;
  padding-right: 0;
}

html .no_pad_V{
  padding-top: 0;
  padding-bottom: 0;
}

.idx_flex_list {
  display: flex;
  row-gap: 32px;
  flex-direction:column;
}

.idx_col100{
  width: 100%;
}

.idx_col100_mobile{
  width: 100%;
}

.framed_image {
  border: 2px solid var(--color-lightgrey);
  width : 100%;
  height: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
  padding:10px;
  box-sizing: border-box;
}

.idx_img_grid {
  display: grid;
  grid-template-areas:
    "box box box"
    "box box box";
  place-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/*---------- signup form ----------*/

.idx_signup_container {
  display:grid;
  gap: 12px;
}

.idx_signup_container > div input {
  width: 100%
}

.idx_signup_container > div{
  display: flex; 
  flex-direction: column;
  gap: 6px;
  align-content: start;
}

.idx_signup_container > div > div{
  display: flex; 
  flex-direction: column;
  gap: 6px;
}

.idx_signup_container label{
  font: var(--font-weight-bold) var(--font-size-16)/var(--line-spacing-20) var(--font-family-ibm-plex-sans);
  color: var(--color-darkblue);
}

.idx_signup_container > div.flexRow{
  flex-direction: row;
}

.idx_signup_container div #postnr{
  flex : 1;
}

.idx_signup_container div #city{
  flex : 3;
}

/*---------- contact form ----------*/

.idx_contactform {
  display:grid;
  gap: 12px;
  grid-template-areas: 
  "name name"
  "email phone"
  "message message"
  "button button";
}

.idx_contactform input, .idx_contactform textarea{
  border-color: var(--color-darkblue);
  border-width: 1px;
  border-radius: 0.55rem;
}


.idx_contactform > div input {
  width: 100%
}

.idx_contactform > div{
  display: flex; 
  flex-direction: column;
  gap: 6px;
  align-content: start;
}

.idx_contactform label {
	font: var(--font-weight-normal) var(--font-size-16)/var(--line-spacing-20) var(--font-family-ibm-plex-sans);
	color: var(--color-darkblue);
	top: 15px;
	position: relative;
	width: fit-content;
	left: 14px;
  padding-left: 5px;
  padding-right: 5px;
}

.idx_contactform > div.flexRow{
  flex-direction: row;
}

.idx_contactform div.name{
  grid-area: name;
}

.idx_contactform div.email{
  grid-area: email;
}

.idx_contactform div.phone{
  grid-area: phone;
}

.idx_contactform div.message{
  grid-area: message;
}

.idx_contactform button{
  grid-area: button;
  justify-self: start;
}

/*----------------------------------*/
html body .faq_div{
  box-shadow: 0px 3px 6px #00000029;
  padding-bottom: 16px;
  padding-top: 16px;
}
details.faq {
  padding-bottom:0.3rem;
  list-style: none;
  list-style-type: none;
  cursor: pointer;
  border-radius: 0.2rem;
  padding-left: var(--content-padding_s);
  padding-right: var(--content-padding);
}

details.faq > summary > h3{
  width: 93%;
}

details.faq > summary {
  display: block;
  position: relative;
  flex-direction: column; 
}

.faq summary::marker{
  content:'';
  visibility: hidden;
  display: none;
  height: 0;
  width: 0;
  transform: scale(0);
}

.faq summary::-webkit-details-marker{
  content:'';
  visibility: hidden;
  display: none;
  height: 0;
  width: 0;
  transform: scale(0);
}

.faq summary::after{
  right: 0;
  cursor: pointer;
  position: absolute;
  content: url(../grafik/expand-32.png);
  display: inline-block;
  filter: brightness(40%);
  transform : translateY(0px) scale(1);
  transition: transform 0.3s ease-in-out;
  height: 25px;
  width: 25px;
}

details.faq + div{
  max-height : 0;
  transition: max-height 0.5s ease-in-out;
  overflow: hidden;
  padding: 0;
  transition-delay: 0;
  padding-left: var(--content-padding_s);
  padding-right: var(--content-padding);
}

details[open].faq>summary::after{
  transform : translateY(8px) translateX(6px) scale(1) rotate(180deg) ;
}

details[open].faq + div{
  max-height : 100vh;
}

input{
  font: var(--font-style-normal) normal var(--font-weight-300) var(--font-size-16)/19px Fira Sans;
  border:2px solid #D5D5D5;
  border-radius: 0.4rem;
  padding: 3px 6px;
  line-height: 16px;
  min-height: 43;
  min-width : 0;
}

textarea{
  font: var(--font-style-normal) normal var(--font-weight-300) var(--font-size-16)/19px Fira Sans;
  border:2px solid #D5D5D5;
  border-radius: 0.4rem;
  padding: 3px 6px;
  line-height: 16px;
  min-height: 95;
  min-width : 0;
  resize: vertical;
  padding : 10px;
}

.login_grid{
  justify-self: end;
  align-self: end;
  gap: 12px 6px;
  display: grid;
  grid-template-areas:
      "line0 line01"
      "line1 line1"
      "line2 line2";
  grid-template-columns: repeat(2, 1fr);
}

.idx_button{
  display: grid;
  gap: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font:  var(--font-weight-600) var(--font-size-16)/var(--line-spacing-20) var(--font-family-ibm-plex-sans);
  background: #7EBE7E 0% 0% no-repeat padding-box;
  border-radius: 0.4rem;
  border: solid;
  border-color: #7EBE7E;
  padding: 11px 16px;
  font-weight: bold;
  text-align: center;
  white-space: break-spaces;
  line-height: 1.2rem;
  color: #FFFFFF;
  min-width: 86px;
  min-height: 43px;
  grid-auto-flow: column;
}

.idx_button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

.not_rounded {
  border-radius : 0;
}

.idx_button.no_opacity{
  background: rgba(0,0,0,0);
  border: 5px solid #739E73
}

.idx_button.medium_text{
  font-weight: normal;
}

.idx_button.large{
  letter-spacing: var(--character-spacing-1);
  min-width: 163px;
  min-height: 57px;
  font-weight: bold;
  padding: 16px 24px;
}

.idx_button.login_button{
  grid-column : 2/2;
  justify-self: end;
  width: auto;
}

.loginLine1{
  grid-area: line0;
  justify-self: start;
}

.loginLine2{
  grid-area: line01;
  justify-self: end;
}

.bg_lightgreen .idx_button.no_opacity{
  color: #739E73
}

/*------- CHECKBOX LIST -------*/
.idx_checkbox_list{
  margin:0;
  display:flex;
  flex-direction: column;
  color: var(--color-darkblue);
  gap : 12px;
}

.idx_checkbox_list > li::marker{
  content: "";
}

.idx_checkbox_list > li{
  font: var(--font-style-normal) var(--font-size-16)/var(--line-spacing-20) var(--font-family-ibm-plex-sans);
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-spacing-20);
}

.idx_checkbox_list > li::before{
  display: inline-block;
  content: url('../grafik/forside/svg/V.svg');
  width: 16px;
  transform : translateX(-34px) scale(1);
}

.idx_checkbox_list.smaller_list > li::before{
  width: 16px;
  transform : translateX(-34px) scale(0.9);
}

.idx_checkbox_list.smaller_list > li{
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  max-height: 2.2rem;
}

/*----------------------------------------*/

.roundedbox {
  border : 1px ;
  box-sizing: border-box;
  border-radius: 0.6rem;
  width: 100%;
  padding : calc(var(--content-padding) * 2);
}

footer {
  display: grid;
  gap: 40px;
  grid-template-areas: 
    "logo logo"
    "contact contact"
    "product info"
    "copyright copyright";
  color: white;
}

footer #info{
  grid-area: info;
}

footer #contact{
  grid-area: contact;
}

footer #logo{
  grid-area: logo;
  display: flex;
  flex-direction: row;  
  gap: 4px;
  align-items: center;
}

footer #product{
  grid-area: product;
}

footer #copyright{
  grid-area: copyright;
  border-top: solid white 0.1rem;
  margin-top: 64px;
  margin-bottom: 128px;
}

footer #contact > div.grid{
  gap: 4px;
  display: grid;
  grid-auto-flow: column;
}

.grid_2_col_mobile{
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
}

.grid_2_col{
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
}

.grid_cols_2small_1larger{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap:12px;
  align-items: stretch;
}

.col_2_areas{
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.top-margin20{
  margin-top: 20px;
}

/*---------hamburger and nav----*/

#topNav {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
}

#topNav_over {
  display: none;
  visibility: hidden;
  width: 0px;
  height: 0px;
}

.navbar {
  width: 100%;
}

.nav-container {
  display: flex;
  flex-direction: row;
  height: 29px;
  justify-content: space-between;
  padding-top: calc(var(--page-margin-v) * 1.3);
  padding-bottom: calc(var(--page-margin-v) * 1.4);
  margin-left : var(--page-margin-H);
  margin-right: calc(var(--page-margin-H) * 2 + 32px);
}

.nav-container .bar-items{
  position: absolute;
  display: flex;
  flex-direction: row;
  column-gap: 8px;
  margin: 0;
  padding: 0;
}

.navbar .nav-container li {
  list-style: none;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 26px;
  width: 32px;
  left: calc(100vw - 32px - var(--page-margin-H));
  z-index: 15;
  opacity: 0;
  cursor: pointer;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  left: calc(100vw - 32px - var(--page-margin-H));
  z-index: 13;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position:absolute;
}

.nav-container .hamburger-lines .line {
  display: block;
  background: white;
  height: 4px;
  width: 100%;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.15s ease-in-out, background 0.15s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.navbar .menu-items {
  background : #E2F1E2;
  padding-top: 0;
  height: 100vh;
  width: 100%;
  transform: translate(+150vw,-13px);
  display: grid;
  flex-direction: column;
  transition: transform 0.3s ease-in-out;
  position: absolute;
  padding-right: 5%;
  padding-top: 0px;
  row-gap: 7px;
  grid-auto-rows: 1fr 1fr;
}

.navbar .menu-items > div{
  width: calc(100vw - 5%);
  /*width: 100%;*/
}

.navbar .menu-items #nav-list {
  display: grid;
  align-content: start;
  grid-auto-flow: row;
  gap: 27px;
  padding-top: 0px;
  overflow: scroll;
}


.navbar .menu-items #login_section{
  display: flex;
  align-content: center;
  justify-content: center;
  border-left: 1px white solid;
  gap: 30px;
  padding-top: 25px;
  padding-right: 9%;
  padding-left: 5%;
  box-sizing: border-box;
}

.back_darkBlue{
  background: #1F406D;
}

.navbar .menu-items li {
  margin-left: var(--font-size-30);
  margin-right: var(--font-size-30);
  font-size: 1.5rem;
  font-weight: 500;
  align-items: center;
  gap: 12px;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translate(2vw,-13px);
  display: grid;
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
  background: var(--color-darkblue);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
  background: var(--color-darkblue);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
  background: var(--color-darkblue);
}

#hamburgerSpan{
  display: flex;
}


/*-----FLEX STYLES----*/


.displayFlex{
  display: flex;
}

.flexRow{
  display:flex;
  flex-direction: row;
  gap: 6px;
}

.gap20{
  display:flex;
  flex-direction: row;
  gap: 20px;
}

html .alignItemsCenter{
  display: flex;
  align-items: center;
  column-gap : 6px;
}

html .gap16{
  display:flex;
  flex-direction: row;
  gap: 16px;
}

.flexCol{
  flex-direction: column;
  display: flex;
}

.flexEnd{
	display: flex;
	justify-content: flex-end;
}

.element_over_end50{
	position: absolute;
	display: inline-block;
	align-self: flex-end;
	justify-self: end;
	margin-bottom: var(--content-padding);
	transform: translateX(50%);
}

/*.bothAxisCenter{
display: flex;
justify-content:center;
align-items: center;
}*/


html .selfAlignEnd{
  align-self: end;
}


/* ----------ARROW ----------*/
 

.arrow {
	border: solid 0.07em;
  background: currentColor;
	width: 1.95em;
	height: 0;
	transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
	display: inline-block;
	border-radius: 4em 0 0 4em;
	font-size: inherit;
}

.arrow::before {
	content: "";
	border: solid 0.13em;
	width: 0.3em;
	height: 0.3em;
	transition: transform 0.3s ease-in-out;
	background: none;
	transform: translate(1.58em,-0.21em) rotate(45deg);
	border-bottom: 0;
	border-left: 0;
	display: flex;
}


/* --------------------------*/

.hide_smallScreen {
  display: none;
}

.gaz {
  font-size: 1.5em;
  line-height: 1em;
  float: left;
  margin-right: 35px;
  margin-top: 0px;
}

.ordgaz {
  font-weight: bold;
}

.gaz2 {
  font-family: serif;
}

.diggaz {
  color: red;
  font-weight: bold;
  font-style: italic;
}


@media only screen and (min-width: 510px) {
  :root {
    --content-padding: 32px;
    --content-padding_s: 16px;
  }


  h1 {
    font: var(--font-weight-bold) var(--font-size-28) var(--font-family-ibm-plex-sans);
  }

  h2 {
    font: var(--font-weight-bold) var(--font-size-25) var(--font-family-ibm-plex-sans);
  }
}

@media only screen and (min-height: 510px) {

  .navbar .menu-items {
    padding-top: 15px;
    grid-auto-rows: 1.75fr 1fr;
  }

}

@media only screen and (min-height: 730px) {
  .navbar .menu-items {
    padding-top: 60px;
    row-gap: 27px;
    grid-auto-rows: 2fr 1fr;
  }

}

/*-------media queries for larger than 1200px 
 */
 
@media only screen and (min-width: 1024px) {


:root {
  --page-margin-H : 32px;
}

  .navbar .menu-items {
    padding-top: 0px;
    row-gap: 27px;
    grid-auto-rows: 2fr 1fr;
  }

  h1 {
    font-size: var(--font-size-45);
    line-height: var(--line-height-58);
  }

  h2 {
    font-size: var(--font-size-30);
  }

  #topNav {
    box-shadow: 0px 3px 6px #00000029;
    width: 100%;
  }

  #topNav_over {
    visibility: visible;
    height: 0px;
    width: revert;
    position: absolute;
    display: inline-block;
    top: 0;
    z-index: 15;
    width: 100%;
  }

  .desktop_white{
    background: white;
  }

  .desktop_text_darkblue{
    color: var(--color-darkblue);
  }

  .idx_content:nth-child(2){
    padding-top:79px;
  } 

  .idx_checkbox_list.max3 {
    display: grid;
    grid-template-columns: repeat( 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
    row-gap: 24px;
    column-gap: 34px;
  }

  .idx_img_grid {
    gap: 24px;
  }

  .idx_signup_container{
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: 16px 32px;
  }

  .large_top_padding > div {
    padding-top: 128px;
  }

  .grid_3_col{
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    display: grid;
  }
  
  .grid_4_col{
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    display: grid;
  }

  .idx_content div.desktop_page_margin{
    padding-right:var(--page-margin-H);
    padding-left:var(--page-margin-H);
  }

  .navbar .menu-items {
    grid-template-columns: 16fr 9fr;
    align-content: center;
    background: revert;
    padding-top: 0;
    height: revert;
    display: grid;
    flex-direction: row;
    transition: transform 0.3s ease-in-out;
    transform: translate(0,0);
    padding-right: 0;
    position: relative;
    width: revert;
  }

  .navbar .menu-items #nav-list {
    display: flex;
    flex-direction: row;
    padding-top: 0;
    gap:8px;
    align-items: center;
    overflow: visible;
  }

  .navbar .menu-items #nav-list li{
    color: white;
  }

  .navbar .menu-items > div{
    width: 100%;
  }

  .navbar .menu-items li {
    margin-left: 1px;
    margin-right: 1px;
    font-size: 1rem;
    font-weight: 500;
    align-items: center;
    gap: 12px;
  }

  .nav-container {
    padding-top: calc(var(--page-margin-v) * 3);
    padding-bottom: calc(var(--page-margin-v) * 3);
    margin-right: var(--page-margin-H);
    margin-left: var(--page-margin-H);
  }

  #topNav .nav-container {
    padding-bottom: calc(var(--page-margin-v) * 2.5);
  }

  .nav-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translate(0,0);
    display: grid;
  }

  .navbar .menu-items #login_section {
    display: flex;
    border-left: 0px;
    width: unset;
    padding-top: unset;
    padding-right: 0px;
  }

  #topNav .navbar .menu-items #login_section {
    padding-top: calc(var(--page-margin-v) * 3);
    margin-bottom: calc(var(--page-margin-v) * 3);
  }

  .login_grid{
    display:grid;
    grid-template-columns: 4fr 4fr auto;
    grid-template-areas:
        "line0 line1 line2";
  }

  .nav-container .hamburger-lines .line{
    display: none;
    height: 0;
    width: 0;
  }

  .nav-container .checkbox{
    display: none;
    height: 0px;
    width: 0px;
    cursor: unset;
  }

  .nav-container .hamburger-lines{
    display:none;
  }

  .idx_button.login_button{
    grid-column : unset;
    justify-self: unset;
    width: unset;
  }



  footer {
    padding-top: 153px;
    display: grid;
    grid-template-areas: 
      "logo contact product info"
      "copyright copyright copyright copyright";
    gap: 4px;
    color: white;
  }

  footer #contact, footer #logo, footer #info, footer #product{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    row-gap: 20px;
  }

  footer #contact > div.grid{
    grid-auto-flow: row;
    row-gap: 20px;
  }

  .col_2_areas{
    display: grid;
    align-items: stretch;
    justify-content: center;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "area1 area2";
    column-gap: 43px;
  }

  .col_2_areas.center_align_areas{
    align-items: center;
  }

  .col_2_areas.half_area1{
    grid-template-columns: 1fr 1.5fr;
  }

  .col_2_areas.half_area2{
    grid-template-columns: 1.5fr 1fr;
  }

  .col_2_areas.smaller_area1{
    grid-template-columns: 1fr 2fr;
  }

  .col_2_areas > #area1{
    grid-area: area1;
  }

  .col_2_areas > #area2{
    grid-area: area2;
  }

  .col_2_areas > #area2.offset_top, col_2_areas > #area1.offset_top{
    top: var(--content-padding);
    position: relative
  }


  .col_2_areas > #area2.offset_top_1_7, col_2_areas > #area1.offset_top_1_7{
    top: calc(var(--content-padding) * 1.7);
    position: relative
  }

  .idx_col100_mobile{
    width: unset;
  }

  .grid_2_col_mobile{
    display: flex;
    flex-direction: column;
  }

  .idx_content_section.bottom_only{
    padding-top: 0;
    padding-left: unset;
    padding-right: unset;
    padding-bottom: calc(var(--page-margin-v) * 8);
  }

  body .idx_button.only_desktop, body .only_desktop{
    display:revert;
  }

  body .idx_button.only_mobile, body .only_mobile{
    display: none;
  }


  .grid_cols_2small_1larger{
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 8fr 9fr 20fr;
    column-gap: var(--content-padding_s);
  }

  .idx_contactform button{
    justify-self: end;
  }
  
  .hide_smallScreen {
    display: block;
  }
}

@media only screen and (min-width: 1200px) {
  .idx_checkbox_list.max3 {
    grid-template-rows: repeat(4, 1fr);
  }
}

@media only screen and (min-width: 1300px) {
  :root {
    --page-margin-H : 100px;
  }
}


@media only screen and (min-width: 1500px) {
  :root {
    --page-margin-H : 277px;
  }

  .navbar .menu-items #nav-list {
    gap:23px;
    align-items: center;
  }
}

.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}


@media (hover: hover) {
  .enlargeText:hover :first-child{
    transform: scale(112%) translateX(5%);
  }
  .animatearrow{
    width: fit-content;
  }
 
  .animatearrow:hover .arrow { /*the line of the arrow*/
    width: calc(1.95em - 1em);
    transform: translateX(1em);
  }

  .animatearrow:hover .arrow::before { /*arrow head*/
    width: calc(1em - 0.7em);
    height: calc(1em - 0.7em);
    transform: translate(0.58em,-0.21em) rotate(45deg);
  }

  .idx_button:hover {
    filter: grayscale(20%) brightness(98%);
  }
}