* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Alef", sans-serif;
    scroll-behavior: smooth;
    list-style: none;
    text-decoration: none;
}
/*Farve definationer*/
:root { 
    --red: #c7352a;
    --gul: rgba(243, 236, 134, 0.847);
    /* --gul: #f3ec86; */
    --lilla: #ded7ff;
    --background: #f3f5dd;
    --contrastbackground:#DDDFC7;
    --dark: #3d0200;
}

/*Body styling*/
body{
  background-color: var(--background);
}


/*Font styling*/
  h3{
    display: flex;
    color: var(--dark);
    font-family: "Alef", sans-serif;
  }

  h4{
    display: flex;
    color: var(--dark);
    font-family: "Alef", sans-serif;
    margin-bottom: 2%;
  }

  p{
    color: var(--dark);
    font-family: "Alef", sans-serif;
    font-size: 0.8em;
  }

  /*Rød stor font - bliver brugt x4*/
  .alefred{
    color: var(--red);
    font-size: 1.5em;
    font-family: "Alef", sans-serif;
  }

  /*Almindelig font mørk*/
  .alefdark{
  color: var(--dark);
  font-family: "Alef", sans-serif;
  font-size: 1.3em;
  font-weight: 300;
  }

  /*Håndskrevet font - citater*/
  .annielille{
  color: var(--dark);
  font-size: 1.4em;
  font-weight: 200;
  font-family: "Annie Use Your Telescope", cursive;
  }
  
  /*Håndskrevet font - overskrifter*/
  .anniestor{
  color: var(--dark);
  font-size: 2em;
  font-family: "Annie Use Your Telescope", cursive;
  }

/*gennemgående knapper*/
/* .alefdarkknap{
  color: var(--dark);
  font-family: "Alef", sans-serif;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 2px solid var(--red);
  margin-top: 7%;
  margin-bottom: 7%;
} */



/* Navbar */
  header{
    position: sticky; 
    width: 100%;
    top: 0;
    z-index: 10;
    background-color: var(--contrastbackground);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    overflow: auto;
  }

  .logo img {
    width: 100px;
    height: auto;
  }

  nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }

  nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 5px 10px;
  }

  nav li {
    height: 50px;
  }

  nav a {
    height: 100%;
    padding: 0 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    font-family: "Alef", sans-serif;
    font-size: 1.1rem;
  }

  .hideOnMobile nav a {
    color: var(--red);
  }

  /*Hover effect på navbar*/
  nav a:hover {
    color:var(--red);
  }

  /* Nav bar faste farver på givne sider */
  .behindnav a, .contactnav  a{
  color: var(--red);
  }

  /*burgermenu indhold*/
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    background-color: var(--gul);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    list-style: none;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 170px;
    gap: 20px;
    z-index: 200;
  }

  .sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .sidebar li {
    width: 100%;
  }

  .sidebar a {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    text-decoration: none;
    color: var(--dark);
  }

  .menu-button {
    display: none;
  }

  .krys {
    position: absolute;
    left: 140px;
    top: 40px;
  }

  .kigop {
    position: absolute;
    bottom: 0;
    width: 200px;
    right: 10px;
    margin-bottom: 40px;
  }

  .bue1{
    position: absolute;
    top: 135px;

  }

  .bue2{
    position: absolute;
    top: 270px;
  }

/*Menukort - slide out*/
  /* Menukort */
  #menucard {
    display: flex;
    flex-direction: column;
  }

  .menuheader{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: sticky;    
    height: 50px;
    top: 0;
    z-index: 1000;
  }

  #morewordsmenu {
    margin-block-start: 0;
    margin-block-end: 1em;
    position: relative;
  }

  #tekstmenu {
    line-height: 110%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
    font-size: 1.1em;
  }

  #menusandwich {
    display: grid;
    grid-template-columns: 10% 1% 65% 20%;
    grid-row-gap: 50px;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 10%;
  }

  #menusandwich li {
    gap: 50px;
  }

  #prismenu {
    font-size: 1em;
    margin-bottom: 5%;
    font-weight: 600;
    font-family: "alef", cursive;
  }

  /* vegetar icon */
  .bladiconrow{
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /* Billeder på menukort*/
  #menukortsandwichimg, #menukortkaffeimg {
    width: 70%;
    grid-column-start: 1;
    grid-column-end: 7;
    justify-self: center;
  }

  /*Bestil knap på menukort*/
  #bestilknapmenu{
    width: 40%;
    padding-top: 2%;
    padding-bottom: 2%;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 10%;
    margin-top: 10%;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  } 


  #bestilknapmenu:hover {
    background-color: var(--contrastbackground); 
    box-shadow: 0 4px 15px #c7352a(0, 0, 0, 0.2);
    transform: scale(1.05);
    border-color: var(--red);
  }

  #andimg {
    position: relative;
  }

  #andimg h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-block-start: 1em;
    margin-block-end: 1em;
    font-size: 3.2em;
    z-index: 0;
  }

  #andimg img {
    position: absolute;
    width: 200px;
    z-index: 1;
    left: 60%;
    top: 10%;
    transform: translateX(-50%);
  }

  /*Styling af tekst lodret tekst*/
  aside{
    grid-column: 1;
  }

  #lodretskrift, #lodretskrift2, #lodretskrift3{
    transform: rotate(90deg);
    font-size: 2em;
    font-weight: 100;
    margin-top: 20%;
    display: flex;
  }
  
  /*lodret linje*/
  hr{
    grid-column: 2;
    background-color: var(--red);
    width: 60%;
    margin-block-start: 0;
    margin-block-end: 0;
    border-width: 0;
  }

  /*Menu elementer styling*/
  #sandwichul, #sodtul, #drikkeul{
    grid-column-start: 3;
    grid-column-end: 5; 
    margin-left: 5%;
  }

  #sandwichul li, #sodtul li, #drikkeul li{
    margin-block-end: 1.5em;
    margin-block-start: 0em;
  }

  .menuitemname{
    font-weight: 400;
  }

  /*Styler sandwich ord med vegetar icon*/
  #provencal{
    margin-bottom: 0;
  }

  /* Vegetar icon */
  .menuitemcontainer {
    display: flex;
    align-items: center; /* Justerer elementer vertikalt i midten */
  }

.menuitemname {
    margin-right: 5px; /* Tilføjer lidt mellemrum mellem navnet og ikonet */
}

.bladicon {
    width: 25px;
    height: 25px;
    margin-left: 10px;
    margin-bottom: 7px;
}


  /*Styling af menukort animation*/
  .hidden{
    opacity: 0;
    transform: translateX(+100%);
    transition: all 1.5s;
  }

  .hidden2{
    opacity: 0;
    transform: translateX(+100%);
    transition: all 1.5s;
  }

  .show{
    opacity: 1;
    transform: translateX(0);
  }

  /* popud menu */
  .menu-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 20000;
    }
    
    .btn {
      display: inline-block;
      margin: 10px;
      color: var(--gul);
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      transform: rotate(-90deg);
      position: fixed;
      top: 200px;
      right: -80px;
      z-index: 9;
    }

    .sticky {
      position: fixed;
      top: 10px;
      right: 10px;
    }
    
    .open-btn {
      font-size: 1.3rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: 1rem 1.8rem;
      cursor: pointer;
    }
    
    .popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--background); /* Semi-transparent overlay */
      z-index: 999;
      overflow-y: auto; /* Enable vertical scrolling */
    }
    
    .main-popup {
      position: absolute;
      height: 100%;
      width: 100%; /* Juster bredden efter behov */
      z-index: 999; /* Juster z-indekset efter behov */
      background: var(--background);
      padding-left: 20px;
      padding-right: 20px;
      line-height: 1rem;
      max-width: none; /* Fjerner fast maksimal bredde */
      overflow-x: hidden; /* Forhindrer vandret rulning */
      transform: translateX(100%);
    }

    
    .popup-overlay {
      background-color: var(--gul);
      height: 100vh;
      width: 100%;
      right: 0;
      position: absolute; /* Ændrer position til relativ */
      overflow-x: hidden; /* Forhindrer vandret rulning på overlay */
      max-width: 100%;
    }
    

    .main-popup.slide-in {
      animation: slide-in 0.5s ease forwards;
    }
    
    .main-popup.slide-out {
      animation: slide-out 0.5s ease forwards;
    }
    
    .close-btn {
      padding: 10px;
      display: flex;
      justify-content: flex-end;
      position: sticky;
      top: 1rem;
      right: 1rem;
      font-size: 2rem;
      cursor: pointer;
      transition: .5s ease all;
      z-index: 100;
    }
    
    .popup-content p {
      font-size: 1.5rem;
      line-height: 2rem;
    }

    .logomenukort{
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 10%;
    }

    .logomenukort img{
      max-width: 100%;
      height: 80px;
      padding: 2%;
    }

    .logomenukort2{
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    
    .logomenukort2 img{
      max-width: 100%;
      height: 300px;
      padding: 2%;
    }
    
    @keyframes slide-in {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0);
      }
    }
    
    @keyframes slide-out {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(100%);
      }
    }
    
    
/**************************************************/
/********************* Forside ********************/
  /* video forside */
    .forside1 {
      height: 93vh;
      position: relative; /* Tilføjer position: relative; til forældreelementet */
    }

    .forside-video {
      width: 100%;
      height: 100%; /* Sætter videoens højde til 100% af forældreelementets højde */
      position: absolute;
      top: 0;
      left: 0;
      object-fit: cover; /* Sikrer, at videoen fylder hele forældreelementet uden at miste proportioner */
    }

  /* scrool pil */
    .pil{
      position: absolute;
      top: 85%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .pil div{
      display: block;
      width: 25px;
      height: 25px;
      border-bottom: 5px solid var(--gul);
      border-right: 5px solid var(--gul);
      transform: rotate(45deg);
      margin: -5px;
      animation: animate 2s infinite;
    }

    .pil div:nth-child(2){
      animation-delay: -0.2s;
    }

    .pil div:nth-child(3){
      animation-delay: -0.4s;
    }

    @keyframes animate{
      0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
      }
    }

  /* multiwords(dingse)*/
    .firexdingse {
      margin-top: -10%;
      margin-left: 30%;
    }

    .firexdingse h3 {
      opacity: 0;
      transform: translateY(20px); /* Startposition under deres endelige destination */
      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
      font-size: 3rem;

    }

    .firexdingse h3.visible {
      opacity: 1;
      transform: translateY(0); /* Endelig position */
    }

  /*bestilknap forside + alle knapper på sider*/

  
  .callknap{
    background-color: var(--background);
    border-radius: 1em;
    border: 1.5px solid var(--red);
    width: 18%;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 1%;
    padding-right: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 2%;
    margin-bottom: 8%;
  }

  .callknap1{
    background-color: var(--background);
    border-radius: 1em;
    border: 1.5px solid var(--red);
    width: 10%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    padding-right: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 2%;
    margin-bottom: 8%;
  }

  .callknap2{
    background-color: var(--background);
    border-radius: 1em;
    border: 1.5px solid var(--red);
    width: 8%;
    padding-top: 0.7%;
    padding-bottom: 0.7%;
    padding-left: 1%;
    padding-right: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 2%;
    margin-bottom: 8%;
  }

  .knap1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: #3d0200;
    font-weight: 500;
    font-family: "Alef", sans-serif;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  }



   .callknap:hover, .callknap1:hover, .callknap2:hover {
      background-color: var(--contrastbackground); 
      box-shadow: 0 4px 15px #c7352a(0, 0, 0, 0.2); 
      transform: scale(1.05);
      border-color: var(--red);
    }

  /*gennemgående knapper*/
/* .alefdarkknap{
  color: var(--dark);
  font-family: "Alef", sans-serif;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 2px solid var(--red);
  margin-top: 7%;
  margin-bottom: 7%;
} */

    /* .bestilknapforside2{
      width: 40%;
      padding-top: 1%;
      padding-bottom: 1%;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      margin-bottom: 10%;
      margin-top: 2%;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }

   

  /* dingsedame */
    .dingseukop {
      width: 60%;
      margin-top: 10%;
    }

  /* midtersection */
  .midtersection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    text-align: center;
    margin-left: 12%;
    margin-right: 12%;
    margin-top: 8%;
  }

  /* Fjerner noget af teksten fra mobil version */
    .responsivetekst {
      display: none;
    }

    #responsivetekst {
      display: none;
    }
    
    #responsivetekst1 {
      display: flex;
      justify-content: center;
    }

    #responsivetekst2 {
      display: flex;
      justify-content: center;
    }
    
  /* tekst til midtersection */
    /* .knap {
      border: 2px solid #c7352a; 
      margin-left: 20px;
      margin-right: 20px;
      padding-bottom: 2px; 
    } */

  /* billeder på midtersection */
    .udefraillustration {
      width: 80%;
      height: 80%;
      margin-top: 5%;
      margin-bottom: 5%;
    }

    .broedforside{
      width: 100%;
      height: 100%;
      margin-top: 0;
      object-fit: cover;
    }

  /* instagram sektion */

    .instagram {
      margin-top: 20%;
      gap: 5%;
    }

    .foelgtekst {
      text-align: center;
      align-items: center;
      display: flex;
      flex-direction: column;
      margin: 8% 10%;
    }
    
    .foelgtekst h3, .foelgtekst h2, .foelgtekst a{
    margin-bottom: 5%;
    }

    .foelgbilleder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 60%;
    flex-direction: column;
    margin-top: 8%;
    }

    .billedeserie1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 4% 20%;
    }

    .instagram-media {
      height: 38vh;
      width: 33vh;
      margin: 2% 30%;
      padding: 5% 5%;
    }


    .desktopbilleder {
      display: none;
    }

    .desktopbilleder img {
      display: none;
    }

    /*Instgram følg os knap*/
    /* .foelgknap {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10%;
      border-radius: 5px;
    }

    .foelgknap .fold_btn {
      margin-right: 0;
    } */


/**************************************************/
/******************* Kontakt os *******************/ 
/* Styling af font med ID for at størrelserne passer */

  .openhours h2{
    font-size: 1.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    margin-bottom: 2%;
  }

  .openhoursul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 3%;
  }

  #times-list{
    font-family: "Alef", sans-serif;
    font-size: 0.8em;
  }

  #vibor, #adressekontakt{
    font-size: 2em;
  }

  /* Styling af billeder på kontakt siden */

  .coverbillede {
    height: 40vh;
    position: relative;
  }

  .coverkontakt {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0;
  }

  .kort-kontakt {
    width: 100%;
    padding: 7%;
    height: auto;
  }

  /* Tilføjet padding for at give luft mellem teksten på siden. Tilføjet i % for at være responsiv */
  .kontakt-sektion {
    margin-top: 10%;
  }

  .adresse-kontakt {
    margin-top: 10%;
    text-align: center;
  }

  .telefon-nummer-kontakt {
    margin-top: 1%; 
    margin: 0 3%;   
    text-align: center;
  }

  .telefon-nummer-kontakt h2 {
    margin-top: 14%;
  }

  /* Styling af ring tekst + dingsedame med telefon. Da dette er en lidt anden styling end en colum bruges inline grid */
    .ringx4container {
      display: grid;
      grid-template-columns: 35% 65%;
      padding: 17% 10%;
      margin: auto;
      box-sizing: border-box;
      width: fit-content;
    }

    .ringx4 h3 {
      text-align: center;
      padding: 5%;
      color: #c7352a;
      font-size: 2.5em;
    }

     .ringx4 h3 {
      opacity: 0;
      transform: translateY(20px); /* Startposition under deres endelige destination */
      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    } 

    .ringx4 h3.visible {
      opacity: 1;
      transform: translateY(0); /* Endelig position */
     }  

    .dingsetelefon-div img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
    }
    
    .openhours-section p {
      margin-bottom: 1%;
      text-align: center;
    }

    .openhours-section h1 {
      margin-bottom: 3%;
    }

    .openhours-section {
      padding: 2%;
      margin-top: 10%;
    }

    .ekstra-tekst {
      margin-top: 5%;
    }

    #openhours{
      display: flex;
      justify-content: center;
      text-align: center;
    }


/**************************************************/
/***************** Menukort i html ****************/

  .menukort_main{
    display: flex;
    min-height: 100vh;
  }

  #menucard2 {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  #morewordsmenu2 {
    margin-block-start: 0;
    margin-block-end: 1em;
  }

  #andimg2 {
    position: relative;
    margin-top: 50px;
  }

  #andimg2 h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 3.7em;
    z-index: 0;
  }

  #andimg2 img {
    position: absolute;
    width: 250px;
    z-index: 1;
    top: 10%;
    left: 60%;
    transform: translateX(-50%);
  }

  #tekstmenu2 {
    line-height: 110%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
    margin-bottom: 10%;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 1.1em;
  }

  .krysmenuhtml{
    position: absolute;
    right: 20px;
    margin-top: 10px;
  }
 
/************************************************* */
/************ Bag om Dingse ************/

  /* Styling af første del af bagom */
    .bagom1{
      display: grid;
    }

    .bagom1 h1 {
      text-align: center;
      padding: 5%; 
    }

    .bagom1 p {
      padding: 5%;
      text-align: justify;
    }

  /* Styler så billedet er 100% på telefon */
    .bagom1 img{
      width: 100%;
    }

    .read-more img{
      width: 100%;
    }
    
  /* Styler søren og olivia teksten til mobil */
    .bagom-ordx4 {
      padding: 5% 3%;
      margin-left: 20px;
    }

    .bagom-ordx4 h3 {
      opacity: 0;
      transform: translateY(20px); /* Startposition under deres endelige destination */
      animation: pop 0.2s forwards;
      font-size: 2.5em;
    }

    .bagom-ordx4 h3:nth-child(1) {
      animation-delay: 0s;
    }

    .bagom-ordx4 h3:nth-child(2) {
      animation-delay: 0.2s;
    }

    .bagom-ordx4 h3:nth-child(3) {
      animation-delay: 0.4s;
    }

    .bagom-ordx4 h3:nth-child(4) {
      animation-delay: 0.6s;
    }

    @keyframes pop {
      to {
          opacity: 1;
          transform: translateY(0); /* Endelig position */
      }
    }

  /* tekst til bagom */
    .tekst_container_bagom {
      margin-top: 1%;
      margin-bottom: 2%;
    }

    .broedtekst-desktop {
      display: flex;
      justify-content: center;
      text-align: justify;
      align-items: center;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 1%;
      line-height: 2rem;
    }

    .broedtekst-mobil {
      display: none;
    }
    .foer-læs-mere-mobil {
      display: none;
    }

    @media (max-width: 800px) {
      .broedtekst-mobil, .foer-læs-mere-mobil {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .broedtekst-desktop {
        display: none;
      }
    }

    #mere {
      margin-left: 10%;
    }

    .bagom-ordx4 {
      padding: 5% 3%;
      margin-left: 20px;
    }


  /* Bag om undersider */

  /* om søren og olivia */
    #tekst_container_bagom {
      display: flex;
      flex-direction: column;
      align-items: center; /* Center items horizontally */
    }

    .skjult {
      display: none;
    }

    #laesMereKnap, #lukKnap {
      border: 2px solid var(--contrastbackground); 
      padding-bottom: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 40% 70px 40%;
      font-size: 1em;
      border-radius: 5px;
      cursor: pointer;
      font-family: "Alef", sans-serif;
      color: var(--dark);
    }

  

    #lukKnap {
      display: none;  /* Initially hide the "Luk" button */
    }

  /* Mere om */
    .read-more {
      margin: 60px 0;
    }

    .faqer {
      margin-bottom: 8%;
      margin-left: 10%;
      margin-right: 10%;
    }

    .read-more-content {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    /* Styling af tekst kasserne på fold ud siden */
    .text {
      background-color: var(--background);
      width: 50%;
      color: #FFFFFF;
      padding: 20px;
      box-sizing: border-box;
      line-height: 2rem;
    }

    .tekst_foldud_bagom h1{
      text-align: center;
      padding-top: 4%;
    }
    
    .tekst_foldud_bagom h2 {
      text-align: center;
      text-transform: uppercase;
      padding-bottom: 5%;
      margin: 2% 3%;
    }

    .text {
      padding: 1%;
      line-height: 2rem;
      text-align: center;
      justify-content: center;
      align-items: center;
      text-align: justify;
    }

    @media (min-width: 800px) {
      .read-more-content {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
    
      .text {
        flex: 0 0 60%; /* This item will take up 60% of the container's width */
      }
    
      
    }
    

    .mobil_broed {
      display: none;
    }

    .img {
      background-color: var(--background);
      padding: 20px;
      box-sizing: border-box;
    }

  /*læs mere knap bag om*/
    .fold_reply {
      display: flex;
      cursor: pointer; 
      text-align: center;
      justify-content: center;
      align-items: center;
    }

    .in{
      margin-left: 0;
    }

    .fold_btn {
      padding: 5px 10px;
      margin: 10px 0;
      background-color: var(--contrastbackground);
      color: var(--dark);
      font-family: "Alef", sans-serif;
      text-align: center;
      cursor: pointer;
      width: 8em;
      margin-right: 53%;
      border-radius: 10px;
      margin-top: -15%;
    }

    .fold_btn_dingse {
      padding: 5px 10px;
      margin: 10px 0;
      background-color: var(--contrastbackground);
      color: var(--dark);
      font-family: "Alef", sans-serif;
      text-align: center;
      cursor: pointer;
      width: 8em;
      margin-left: 50%;
      border-radius: 5px;
      margin-top: -15%;
    }

    /* Ekstra dingse foto til mobil vs desktop styling */

    @media (min-width: 800px) {
    .dingsevandmobil-foto {
      display: none;
    }
  }

    /* Styler til mobil - gjort omvendt pga design til desktop flere funktioner */

    @media (max-width: 800px) {

      /* Styling af læs mere centreret */

      .fold_btn {
        padding: 5px 10px;
        margin: 10px 0;
        background-color: var(--contrastbackground);
        color: var(--dark);
        font-family: "Alef", sans-serif;
        text-align: center;
        cursor: pointer;
        width: 8em;
        border-radius: 10px;
      }

      .fold_btn_dingse {
        padding: 5px 10px;
        margin: 10px 0;
        background-color: var(--contrastbackground);
        color: var(--dark);
        font-family: "Alef", sans-serif;
        text-align: center;
        cursor: pointer;
        width: 8em;
        border-radius: 10px;
      }

      /* Fjerner dingsevand billede på mobil og indsætter det under teksten */

      .read-more4 {
        display: none;
      }

    }

    .fold_in_btn {
      display: block;
      width: 25px;
      height: 25px;
      border-bottom: 5px solid var(--red);
      border-right: 5px solid var(--red);
      transform: rotate(225deg);
      margin-top: 220px;
      margin-left: 0;
      animation: hop 1s ease-in-out infinite;
    }

    @keyframes hop {
      0% { transform: translateY(0) rotate(225deg); }
      50% { transform: translateY(-10px) rotate(225deg); }
      100% { transform: translateY(0) rotate(225deg); }
    }

    .reply {
      display: none; /* Hide the reply content initially */
      background-color: var(--contrastbackground);
      margin: 0% 5% 7% 5%;
      padding: 0% 0% 3% 0%;
    }

  /* Styling af fold ud siderne */
    .content {
      display: none;
      overflow: hidden;
    }

  /* Styler alle p i "content" fold ud sektionerne */

  /* surdej foldud side */
    /* tekst til foldud surdej */

      #h1_foldud {
        font-weight: 100;
        margin-bottom: 2%;
      }

      #h3_foldud {
      font-size: 2rem;
      color: var(--red);
      margin-left: 22%;
      margin-bottom: 1%;
      }

      #h3_foldud_siden {
        font-size: 2rem;
        color: var(--red);
        margin-left: 58%;
        margin-top: -5%;
        }

      #p_foldud {
        text-align: center;
        margin: 2% 3%;
      }

      .p_foldud_info {
        margin-left: 25%;
        margin-right: 55%;
        margin-top: 2%;
      }

      .p_foldud_info_side {
      margin-left: 60%;
      margin-right: 20%;
      }

    /* billeder foldud bagom surdej */
      .surdej5 {
        object-fit: cover;
        height: 40vh;
        width: 35vh;
      }

      #fermentering_af_surdej {
      width: 20%;
      margin-left: 25%;
      margin-top: -2%;
      }

      #straek_og_fold_surdej {
      width: 20%;
      margin-left: 60%;
      margin-top: -5;
      }

      #bages_ved_hoej_varme {
      width: 20%;
      margin-left: 25%;
      margin-top: -2%;
      }

      .laesmere_hover:hover {
        background-color: var(--gul); /* Change background color on hover */
        box-shadow: 0 4px 15px #c7352a(0, 0, 0, 0.2); /* Add box shadow on hover */
        transform: scale(1.05); /* Slightly enlarge the button on hover */
      }

  /* dingsevand foldud side */

  /* Styling af første del med tekst + figur */

  .dingsevand-figur-og-tekst {
    display: grid;
    grid-template-rows: 20% 80%;

  }

  #dingsevand_figur {
    justify-self: center;
    align-self: center;
    width: 50vh;
    padding: 5%;
  } 

  #dingsevandtekst5 {
    text-align: center;
  }

  .dingsedrik_titel {
    display: flex;
    flex-direction: column;

  }

    /* tekst til folud dingsevand */

      #h2_hjemmelavet {
        padding-top: 5%;
        padding-bottom: 2%;
        text-align: center;
      }

      .p_foldud_dingsevand {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-left: 20.5%;
        margin-right: 20.5%;
        margin-top: 5%;
      }

      #h3_foldud_dingsevand {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-left: 22.5%;
        margin-right: 20.5%;
        margin-top: 5%;
        padding: 1%;
      }


    /* billeder foldud dingsevand */

      .dingsevand-fotocontainer {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px; 
      }

      .dingsevand-fotocontainer img {
        object-fit: cover;
        width: 50vh;
        height: 50vh;
      }


      .dingsevand_illustration {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #dingsevand_illustration {
        width: 30%;
        height: auto;
        margin-top: 3%;
      }

    /* smagsvarianter */
      .smagsvarianter {
        display: flex;
        justify-content: center; 
        align-items: center;     
        gap: 40px;  
        margin-top: 5%; 
        margin-bottom: 3%;            
      }

      .smagsvarianter > div {
        text-align: center;      
      }

      .smagsvarianter img {
        width: 120px;            
        height: auto;
      }

  /* råvarer foldud side */
    /* tekst i folud råvare */
      #h2_foldud_raevare {
        text-align: center;
        padding-top: 5%;
        padding-bottom: 5%;
      }

      .p_foldud_raevare_mobil {
        display: none;
      }

      .p_foldud_raevare {
        margin-top: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: justify;
        margin-left: 20%;
        margin-right: 20%;
      }

      .p_foldud_raevare_desk {
        margin-top: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: justify;
        margin-left: 20%;
        margin-right: 20%;
      }

    /* billeder/video i foldud råvare */
      .bagom-raevare {
        display: flex;
        align-content: center;
        justify-content: center;
      }
      .raevare-video {
        width: 60%;
      }

      .platte_container {
        display: flex;
        justify-content: center; 
        align-items: center;  
        margin-top: 5%;
        margin-bottom: 5%;
      }

      .platte {
        width: 80%;             
        max-width: 600px;       
        height: auto;            
      }

    /* olivien oliecontainer */
      .oliven_container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10%;
        margin-top: 10%;
        margin-bottom: 10%;
      }

      .olivenolie_og_smoer {
        max-width: 300px;
      }



  /* Gallery section styling */
    .galleri {
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 2em 1em;
      margin-bottom: 5%;
      margin-top: -5%;
      margin-left: 7%;
      margin-right: 7%;
    }

    #galleri_tekst {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #galleri_tekst1 {
      margin-bottom: 3%;
    }

    .insta-container {
      display: flex;
      justify-content: center;
      text-align: center;
      align-items: center;
      flex-direction: column;
      margin-top: 7%;
    }

    .insta-container a{
      font-size: 1.2em;
    }

    .icongalleri {
      width: 2.5rem;
      margin-right: 1rem; 
    } 

    .iconergalleri a{
      display: flex;
      flex-direction: row;
      align-items: center;
      text-decoration: none;
      color: var(--dark);
    }


    /* Image container styling */
    .foto-container {
      display: flex;
      flex-wrap: wrap;
      gap: 1em; 
      justify-content: center;
    }

    /* Mobile image styling */
    .fotomobil {
      width: 100%;
      height: auto;
    }

    .fotodesktop {
      width: 80%;
      height: auto;
    }

    /* Hide desktop image by default */
    .fotodesktop {
      display: none;
    }

/**************************************************/
/************ Footer ************/
footer {
  background-color: var(--contrastbackground); 
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.8rem;
  color: var(--dark);
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
}


.kortcom a{
  text-decoration: none;
  color: var(--dark);
}
.info-container1,
.info-container2 {
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 0;
  grid-row: 3;
}

.besøg {
  margin-bottom: 5%;
}

.icon {
  width: 2.5rem;
  margin-top: 7%;
  margin-bottom: 7%;
  margin-left: 1rem; 
  margin-right: 1rem; 
} 

.footernames{
  font-size: 1.5em;
  font-weight: 400;
  font-family: "Alef", sans-serif;
  justify-content: center;
  margin-bottom: 0;
}

.footerheader{
  grid-row: 2;
}

.footername1{
  grid-column: 1;
  grid-row: 2;
}

.footername2{
  grid-column: 3;
  grid-row: 2;
}

iframe{
  width: 300px;
  height: 250px;
  padding-top: 23px;
  border: none;
}

#abenfooter{
  font-size: 1.5em;
  text-align: center;
  justify-content: center;
}

/* Mini nav i footer */
.mininav{
  text-align: center;
}

.mininav li{
  margin-top: 10px;
}

.mininav a{
  text-align: center;
  font-weight: 400;
  color: var(--dark);
  text-decoration: none;
}

.iconercomputer{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 25%;
}

.iconercomputer a{
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  color: var(--dark);
}

/*Hover effect på navbar i footer*/
.mininav a:hover, .kortcom a:hover, .info-container1 a:hover, .iconergalleri a:hover, .midtersection a:hover{
  color:var(--red);
}

/* Nav bar faste farver på givne sider */
.behindnav a, .contactnav a{
 color: var(--red);
}

/* ************************************************ */

/*/*Media Querey Computer*/


  /* Vi har stylet alt vores CSS mobile first og tilføjet media querys til desktop efter */

  /* STYLING AF FONT TIL COMPUTER */

  @media (min-width: 700px) {
      /*Font styling*/
      h3{
        display: flex;
        color: var(--dark);
        font-family: "Alef", sans-serif;
      }

      h4{
        display: flex;
        color: var(--dark);
        font-family: "Alef", sans-serif;
      }

      p{
        color: var(--dark);
        font-family: "Alef", sans-serif;
        font-size: 1.2em;
      }

      /*Rød stor font - bliver brugt x4*/
      .alefred{
        color: var(--red);
        font-family: "Alef", sans-serif;
        font-size: 2.5em;
      }

      .anniestor {
        color: var(--dark);
        font-size: 2em;
        font-family: "Annie Use Your Telescope", cursive;
      }
    }

  /* Menukort */
  @media (min-width: 525px) {
    /* Styling af menukort*/
      /* Sektion med ord og billede*/
      #morewordsmenu{
        font-size: 130%;
      }

      /* Øverste dingsedame på menukortet*/
      #andimg img{
        width: 250px;
      }

      /* Sandwich, sødt og drikkevare listerne på menukort*/
      #sandwichul, #sodtul, #drikkeul{
        font-size: 150%;
        line-height: 130%;
      }

      /*De lodrette skrifter i asiden på menukort*/
      #lodretskrift, #lodretskrift2, #lodretskrift3{
        font-size: 300%;
      }
      
      .bladicon {
        padding: 0;
      }
  }

  @media (min-width: 700px) {

    #andimg img{
      width: 270px;
    }

    #andimg h3 {
      margin-top: 40%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-block-start: 1em;
      margin-block-end: 1em;
      font-size: 3em;
    }

    #morewordsmenu{
      font-size: 150%;
    }

    #lodretskrift, #lodretskrift2, #lodretskrift3{
      margin-top: 36%;
    }

    #tekstmenu {
      font-size: 1.7em;
    }

    #tekstmenu2 { 
      font-size: 1.7em;
    }

    .menuitemname{
      font-size: 1em;
    }

    .menuitemtxt{
      font-size: 0.8em;
      text-align: left;
    }

    #bestilknapmenu{
      font-size: 1.2em;
    }

    #bestilknapforside{
      font-size: 1.2em;
    }

  h3{
      display: flex;
      color: var(--dark);
      font-family: "Alef", sans-serif;
      font-size: 2em;
    }

  .bladicon {
    width: 30px;
    height: 30px;
  }
      
  }
  /******STYLER MEDIA OVER 800PX******/ 
  @media(min-width: 800px) {
    
    .annielille{
      color: var(--dark);
      font-size: 2.4em;
      font-family: "Annie Use Your Telescope", cursive;
      }

    .main-popup {
      max-width: 50%; 
      width: 100%; 
      height: 100vh; 
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .popup-overlay {
      z-index: -1;
      overflow-x: auto; 
    }
   

    .menuitemname{
      font-size: 1em;
    }
    /*footer*/
    .hideOnLaptop{
      display: none;
    }

    footer{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }

    #abenfooter{
      grid-column: 2;
    }

    .logomenukort2{
      grid-column: 2;
      grid-row: 3;
    }

    .mininav{
      grid-column: 2;
      grid-row: 4;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
    .mininav a{
      font-size: 1.1em;
    }

    .menukortmininav{
      grid-column: 1;
    }
    .kontaktosmininav{
      grid-column: 2;
    }
    .bagommininav{
      grid-column: 3;
    }


    

  /******** forside *******/
  /* dingsefigur og multiwords på forside*/
    .dingseukop {
      width: 60%;
    }

    .multiwords{
      display: grid;
      grid-template-columns: 1fr 1fr;
      box-sizing: border-box;
      margin-top: 5%;
    }

    .firexdingse {
      margin-top: 25%;
    }

    .firexdingse h3{
      font-size: 5em;
    }

    .baggrunddingse {
      background-color: #c7352a;
    }

    .broedforside{
    display: none;
    }

    .brødforside {
      object-fit: cover;
      height: 600px;
      width: 100%;
    }

    #lodretskrift, #lodretskrift2, #lodretskrift3{
      font-size: 300%;
    }

    #sandwichul, #sodtul, #drikkeul{
      line-height: 130%;
    }

  /* Styling af ekstra billeder til forsiden til desktop */
    .desktopbilleder {
      display: flex;
      flex-direction: row;
      margin-top: 5%;
    }

    .desktopbilleder img {
      display: flex;
      width: 65vh;
      height: 45vh;
      object-fit: cover;
      overflow: hidden;
    }
    
    .brødforside {
      display: none;
    }
  

  /* midtersection på forside*/
    .responsivetekst {
      margin-left: 5%;
      margin-right: 5%;
      padding: 2%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .responsivetekst {
      display: flex;
    }

    #responsivetekst {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 2em;
      margin-bottom: 0;
    }

    #responsivetekst {
      display: flex;
    }

    #responsivetekst1 {
    display: none;
    }

    #responsivetekst2 {
      display: none;
    }

    .midtersection {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; 
      margin-top: 5%;
    }

    .alefdarkknap {
      margin-top: 5%;
    }

  /* tekst til midtersection forside*/


  /* instagram sektion forside */
    .instagram {
      margin-top: 10%;
      
    }

    .billedeserie1{
      flex-direction: row;
      gap: 20px;   
      padding: 5% 7%;
    }

    .instagram-media {
      height: 50vh;
      width: 20vh;
    }

    .foelgbilleder {
    display: flex;
    object-fit: cover;
    width: 250px;
    height: 250px;
    }

    .kursivtekst{
      margin-left: 23%;
      margin-right: 21%;
      font-size: 3em;
      text-align: center;
    }

  
  /* billeder på midtersection */
  .udefraillustration {
    width: 50%;
    height: 50%;
  }

  /* instagram sektion */
  .foelgtekst {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 0;
    margin-bottom: 0;
    }

    /* .foelgknap .fold_btn{
      margin-right: 0;
      font-size: 1.2em;
    }

    .fold_btn, .fold_btn_dingse{
      font-size: 1.2em;
    } */
    

  /******** kontakt os *******/
    .openhours h2 {
    font-size: 2.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    margin-bottom: 2%;
  }

  .openhours-section {
    padding: 2%;
    margin-top: 10%;
}

.openhoursul{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 17%;
  margin-top: 7%;
}

#times-list{
  font-family: "Alef", sans-serif;
  font-size: 1.2em;
}

    .kursivtekst{
      margin-left: 23%;
      margin-right: 21%;
      text-align: center;
    }

    .adresse-kontakt {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    .kort-kontakt {
      width: 55%;
    }

    .telefon-nummer-kontakt {
      margin: 0 17%;
    }

    .coverbillede {
      height: 60vh;
      position: relative;
    }

    .coverkontakt {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      left: 0;
    }

    .ringx4container {
      display: grid;
      width: 100%;
      justify-content: center;
      grid-template-columns: 1fr 1fr;
      padding: 5% 10%;

  }

  .dingsetelefon-div img {
    display: flex;
    max-width: 100%;
    /*ÆNDRE STØRELSE HER PÅ DINGSE FIGUR HVIS DEN SKAL VÆRE STØRRE PÅ COMPUTER*/
    padding: 10%;
    align-content: flex-end;
  }

  .ringx4 h3 {
    text-align: center;
    padding: 0%;
    margin-left: 30%;
    /*ÆNDRE STØRRELSE HER PÅ RINGx4*/
    font-size: 5em;
  }
  .ringx4 {
    padding: 10%;
  }

    .adresse-kontakt {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    .kort-kontakt {
      padding: 3% 5%;
    }

    .telefon-nummer-kontakt {
      margin-left: 15%;
      margin-right: 15%;
    }

  /***** Bagom *****/
  /* læs mere knap */
  
  #indhold {
    display: block !important;
  }

  #laesMereKnap, #lukKnap {
    display: none !important;
  }

  
  /* bagom siden i media */
  /* **** Styling af første del af bagom - Søren og olivia billede + tekst **** */
    .bagom1 {
      display: grid;
    }

    #mere {
      padding-left: 1%;
      margin-top: 2%;
    }
    
    .bagom-ordx4 {
      justify-self: center;
      align-self: center;
      font-size: 1.5rem;
    }

    .bagom1 h1 {
      text-align: center;
      padding-top: 3%; 
      padding-bottom: 1%;
    }
    .bagom1 p {
      padding: 1%;
      margin-bottom: 6vh;
    }

  /*  Styles med en anden class for at få korrekt opsætning */
    .bagom1-desktop{
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .bagom1 h1 {
      justify-self: center;
      align-self: center;
    }

  /* Styling af billedet af søren og olivia, billedet croppes til desktop*/
    .bagom1 img{
      width: 100%;
      height: 80vh;
      object-fit: cover;
      object-position: top;
    }

    .fotomobil {
      display: none;
    }

    .fotodesktop {
      display: flex;
    }
}

/* tekstcontainer bagom */
@media(max-width: 800px) {
  .firexdingse {
    font-size: 1rem;
    margin-top: 5%;
  }

  .read-more {
    display: flex;
    flex-direction: column; 
    gap: 20px; 
  }

  .text {
    text-align: justify;
  }

  .desktop_broed {
    display: none;
  }

  .mobil_broed {
    display: flex;
    text-align: center;
  }

  .read-more-content {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 20px; 
  }

  .read-more-content img {
    width: 20vh;
    height: auto;
    align-items: center;
    justify-content: center;
  }

  /* knapper foldud siden */
  .fold_reply {
   margin-left: 2%;
   margin-top: 2%;
   margin-bottom: 5%;
  }

  .reply {
    display: none; /* Hide the reply content initially */
    background-color: var(--contrastbackground);
    margin-bottom: 7%;
    padding: 30px 0;
  }

  .fold_in_btn {
    margin-top: 50px;
  }

  /* surdej foldud container */

  .surdej5 {
    object-fit: cover;
    height: 50vh;
    width: 35vh;
    margin-top: -90px;
  }
/* tekst til surdej foldud */

#proces-tekst {
  text-align: center;
}

  #p_foldud {
    text-align: justify;
    margin-right: 20%;
  }

  #h2_foldud {
    font-size: 2rem;
    margin-left: 20%;
  }

  #h3_foldud {
    font-size: 2rem;
  }

  #h3_foldud_siden {
    font-size: 2rem;
  }

  .p_foldud_info {
    text-align: center;
    margin-right: 50%;
    margin-left: 20%;
  }

  .p_foldud_info_side {
    text-align:center;
    margin-right: 11%;
    margin-left: 55%;
  }

/* billeder til surdej foldud */
  .surdej5 {
    object-fit: cover;
    width: 100vh;
    height: 20vh;
  }
  #fermentering_af_surdej {
    width: 35%;
    margin-left: 17%;
    margin-top: -2%;
  }
  
  #straek_og_fold_surdej {
    width: 35%;
    margin-left: 55%;
    margin-top: -5;
  }
  
  #bages_ved_hoej_varme {
    width: 35%;
    margin-left: 17%;
    margin-top: -2%;
  }

/* dingsevand foldud container */
/* tekst til dingsevand foldud */

#h2_hjemmelavet {
  padding-top: 5%;
}

.dingsedrik_titel p {
  font-size: 1rem;
}

    .dingsevand-fotocontainer {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px; 
    }
    
    .dingsevand-fotocontainer img {
      object-fit: cover;
      width: 20vh;
      height: 20vh;
    }
    
    #dingsevand_illustration {
      width: 50%;
      height: auto;
      margin-top: 3%;
    }

    .smagsvarianter {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px; 
    }

    .smagsvarianter div {
      margin-bottom: 10px;
    }

    /* råvare foldud container */
    /* tekst til foldud råvare */
    #h2_foldud_raevare{
      margin-top: 20%;
      text-align: center;
    }

    .p_foldud_raevare {
      font-size: 1rem;
    }

    .p_foldud_raevare_desk {
      display: none;
    }

    .p_foldud_raevare_mobil{
      margin-top: 5%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: justify;
      margin-left: 20%;
      margin-right: 20%;
    }
    
    /* billeder/video til foldud råvare */

  
    .oliven_container {
        display: flex;
        flex-direction: column; 
        align-items: center;
        gap: 10px;
    }

    .platte_container {
      width: 60%;
      margin-left: 20%;
    }

    .oliven_container img {
        width: 50%; 
        height: auto;
    }

    .tekstcontainer_olivenolie {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .instaicon {
      width: 14%;
      height: auto;
      margin-left: 2%;
    }
}

@media(min-width: 800px) {
  .instaicon {
    width: 5%;
    height: auto;
    margin-left: 2%;
  }
}

/******STYLER MEDIA OVER 1100PX******/ 
  @media (min-width: 1100px){
    /*forside kursiv tekst*/
    .kursivtekst{
      margin-left: 0;
      margin-right: 0;
    }


    .midtersection{
      margin-bottom: 0;
    }


    /* MENUKORT HTML */
    /* Opdeling af side */
    .leftside{
      width: 50%;
      background-color: var(--gul);
    }

    .rightside{
      width: 50%;
    }
  }

  /* forside knapper */
  @media(max-width: 800px) {
    .callknap1 {
      width: 40%;
      margin-top: 10%;
      margin-bottom: 30%;
    }

    .callknap2 {
      width: 30%;
      margin-top: 6%;
      margin-bottom: 15%;
    }

    .callknap {
      width: 30%;
      margin-top: 6%;
      margin-bottom: 15%;
    }
  }

  /******STYLER MEDIA OVER 1500PX******/ 

  @media (min-width: 1500px) {
    /*Forside*/
    .desktopbilleder {
      align-items: center;
      justify-content: center;
    }

    .foelgbilleder {
      width: 380px;
      height: 380px;
      }

    .billedeserie1{
      gap: 50px;
      padding-bottom: 0;
    }

    .kursivtekst{
      font-size: 3em;
    }

  }
    
/* STYLING TIL DET DER IKKE KUNNE LAVES I MOBILEFIRST*/
@media (max-width: 800px) {
  /*Forsidevideo*/
  .forside-video {
    width: 100vh; /* Brug viewportets højde */
    height: 100vw; /* Brug viewportets bredde */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg); /* Ret roteringsværdien */
  }

  .hideOnMobile {
    display: none;
  }
  
  /*Menuknap og side menukort*/
  .menu-button {
    display: block;
    font-size: 2em;
  }
  .sidebar {
    display: flex;
    display: none;
    gap: 100px;
    align-content: center;
    width: 100%;
  }

  .sidebar a {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    text-decoration: none;
    color: var(--red);
    font-size: 2.3em;
  }

  /*burgermenu ul*/
  .uller{
    display: flex;
    flex-direction: column;
    gap: 100px;
    text-align: center;
  }
}