*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#oomhbody{
  background-color: #fff9ee;
}
#oomhdkbody{
  background-color: #fed8ec;
}
#returbody{
  background-color: #fdd6ea;
}
#bestillingbody{
  background-color: #f5faeb;
}
#minprocesbody{
  background-color: #f4ecf2;
}

/*-----------css til js-----*/
#overdelsudfyld{
  display: none;
}
#overdelfyld{
  display: none;
}
#buksefyld{
  display: none;
}
button{
  margin-left: 20%;
  height: 30px;
  width: 100px;
  background-color: #f7e3ed;
  border-radius: 10%;
  font-size: 9pt;
}
input{
  display: block;
  margin-left: 20%;
  background-color: #faf5f8;
  border-radius: 10%;
  font-family: 'Raleway', sans-serif;
  font-size: 9pt;
}
#knap{
  margin-bottom: 50px;
  margin-top: 100px;
}
/*---------------css uden js---------------*/

.laptop{
    display: block;
}
.mobil{
    display: none;
}
h1{
    font-size: 100pt;
    color: black;
    font-family: 'Prata', serif;
    text-align: center;
}
h2{
  font-size: 45pt;
  color: black;
  font-family: 'Prata', serif;
  text-align: center;
}
p{
  font-family: 'Raleway', sans-serif;
}
body a{
  text-decoration: none;
}
body a:hover{
  color: deeppink;
  text-decoration: underline;
  text-decoration-color: deeppink;
}
.oomhboks{
  width: 80%;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  border-color: black;
  border-style: solid;
  border-width: 4px;
  background-color: white;
  margin: auto;
  opacity: 70%;
}
.kasseløsp{
  margin-left: 10%;
  margin-top: 50px;
}
.fritekst{
  margin-left: 20%;
  margin-right: 20%;
  font-size: 14pt;
  margin-top: 50px;
}
.streg{
  min-height: 3px;
  width: 10%;
  margin-left: 45%;
  background-color: black;
  margin-top: 70px;
}
.stregmargintop{
  margin-top: 0px;
}
#burgermenu{
    display: none; /*dækker over den ekstra menu - burgermenuen - der ikke skal vises på laptop*/
}

header{
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 90px;
    z-index: 999;
    display: block;
    background-color: #ffecf5;
}

header nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 50px;
}

header nav a{
    padding-left: 35px;
    padding-right: 35px;
    text-decoration:none;
    color: black;
    font-family: 'Prata', serif;
}
#oomhlogo{
  width: 30px;
  height: auto;
}
/*dropdown------------------------------------------*/
.dropdown{
    position: relative;
    display: inline-block;
  }
  
.dropdown-content{
    display:none;
    color: black;
    position: absolute;
    z-index: 1;
    min-width: 300px;
    background-color: #ffecf5;
    text-align: left;
    font-size: 15px;
    padding: 10px;
}

.dropdown-content a:hover{
    text-decoration: none;
    color: #fb6ec7;
    text-decoration: underline;
}
.dropdown:hover .dropdown-content{
    display: block;   
}

/*burgerikon---------------------------------*/
.burgerikon .checkbox {
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    top: 20px;
    right: 20px;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
  }
  
.burgerikon .hamburger-lines {
    display: block;
    height: 26px;
    width: 32px;
    position: absolute;
    top: 17px;
    right: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
.burgerikon .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #0e2431;
  }
.burgerikon .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }
  
.burgerikon .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }
  
.burgerikon .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }
.burgerikon{
    display: none;
    
}
.burgerikon input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
  }
  
.burgerikon input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
  }
.burgerikon input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }
  
.burgerikon input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
  }
  
.burgerikon input[type="checkbox"]:checked ~ .logo{
    display: none;
  }

/*----karusel*/
.containerkarusel {
    position: relative;
    display: block;
    width: 100%;
    height: 940px;
    margin: 0 auto;
    margin-top: 90px;
}
    .pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-animation: fade 45s infinite;
    animation: fade 45s infinite;
  }
  #pic1 {
    animation-delay: 0s;
    background-image: url(images/forside1.jpg);
  }
  #pic2 {
    animation-delay: 5s;
    background-image: url(images/Lforside2.jpg);
  }
  #pic3 {
    animation-delay: 10s;
    background-image: url(images/Lforside3.jpg);
  }
  #pic4 {
    animation-delay: 15s;
    background-image: url(images/Lforside4.jpg);
  }
  #pic5 {
    animation-delay: 20s;
    background-image: url(images/Lforside55.jpg);
  }
  #pic6 {
    animation-delay: 25s;
    background-image: url(images/Lforside6.jpg);
  }
  #pic7 {
    animation-delay: 30s;
    background-image: url(images/Lforside7.jpg);
  }
  #pic8 {
    animation-delay: 35s;
    background-image: url(images/Lforside8.jpg);
  }
  #pic9 {
    animation-delay: 40s;
    background-image: url(images/Lforside99.jpg);
  } 

  @-webkit-keyframes fade {
    0% {
      opacity: 1;
    }
    6% {
      opacity: 1;
    }
    11% {
      opacity: 0;
    }
    95% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade {
    0% {
      opacity: 1;
    }
    6% {
      opacity: 1;
    }
    11% {
      opacity: 0;
    }
    95% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

.pic{
    text-align: center;
    padding-top: 20%;
}
/*-----------galleri----------------------*/
/*-----baggrunde------*/
.fuldfarve{
    display: block;
    width: 100%;
    height: auto;
    margin-top: 90px;
    padding-top: 100px;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 120px;
  }
  .margintop{
    margin-top: 150px;
  }

/*-------flexbokse------*/
.flextorækker{
    display: flex;
    width: 100%;
    height: auto;
    margin-bottom: 90px;
    justify-content: space-between;
    gap: inherit;
    z-index: 2;
}
.marginbottom{
    margin-bottom: 0px;
}
.flextorækkeruf{
    display: flex;
    width: 80%;
    height: auto;
    margin: auto;
    margin-bottom: 90px;
    margin-top: 150px;
    justify-content: space-between;
    gap: inherit;
    z-index: 2;
}
.alignbottom{
    vertical-align: bottom;
}
.flexbilledebytekst{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: auto;
    margin-top: 90px;
    margin-bottom: 90px;
}
  
.flextstorb{
    display: flex;
    width: 100%;
    height: auto;
    position: relative;
}
.tokvadrater{
  width: 80%;
  height: auto;
  display: flex;
  justify-content: space-between;
  gap: inherit;
  margin: auto;
  margin-bottom: 50px;
  margin-top: 50px;
}
/*----bokse uden flex----*/
.farvecontainer{
    width: 100%;
    height: auto;
    position: relative;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 100px;
    padding-bottom: 150px;
    margin-top: 150px;
}
.farvehøjre{
    width: 80%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.v{
    left: 0;
}
.billedetekst{
    width: 45%;
    height: auto;
    justify-content: space-between;
    gap: 5%;
    z-index: 2;
}
.tekstbredbillede{
  width: 60%;
  height: inherit;
  justify-content: space-between;
  gap: inherit;
  margin-top: 50px;
}
/*-----farver----*/
.blå{
    background-color: #ecfafe;
  }
.lyserød{
    background-color: #fff6fb;
}
.grøn{
    background-color: #e6fedb;
}
.gul{
    background-color: #fff9ee;
}
/*----billeder-----*/
.højhøjre{
    width: 45%;
    height: auto;
    z-index: 2;
}
.lavvenstre{
    width: 100%;
    height: auto;
    padding-bottom: 5%;
    z-index: 2;
}
.fuldsize{
    width: 100%;
    height: auto;
    z-index: 4;
    position: relative;
}
.storb{
    width:70%;
    height: auto;
    position: relative;
    z-index: 2;
}
.billedeby{
    width: 80%;
    height: auto;
}
.bredbillede{
  width: 100%;
  height: auto;
  margin-top: 20%;
}
.tyndtbillede{
  width: 30%;
  height: auto;
  margin-top: 50px;
}
.billedetop{
  width: 35%;
  height: auto;
  margin-left: 32%;
  margin-top: 120px;
  margin-bottom: 90px;
}
.instalogo{
  width: 40px;
  height: auto;
}
.kvadrat1{
  width: 47%;
  height: auto;
}
/*----ad ons----*/
.uflex{
    width: 45%;
}
.firs{
  width: 80%;
  margin: auto;
  margin-top: 150px;
}
.firsum{
  width: 80%;
  margin: auto;
  margin-top: 50px;
}
.firs50{
  width: 80%;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 200px;
}
.tredive{
    width: 35%;
}
.tres{
    width: 55%;
}
.posrel{
  position: relative;
  z-index: 2;
}
.marginbottom-20{
  margin-bottom: 20px;
}
.marginbottom150{
  margin-bottom: 150px;
}
/*-----footer----*/

footer{
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: space-between;
  gap: inherit;
  padding-top: 50px;
  padding-left: 10%;
  padding-right: 10%;
  background-color: #ffecf5;
}
#footerdiv{
  display: flex;
  width: 80%;
  margin-left: 10%;
  justify-content: space-between;
  gap: inherit;
}
.heartemoji{
  width: 50px;
  height: 50px;
}
@media screen and (max-width: 900px){
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    h1{
      font-size: 75pt;
    }
    h2{
      font-size: 30pt;
    }
    p{
      font-size: 11pt;
    }
    .kasseløsp{
      margin-left: 5%;
    }
    .marginleft{
      margin-left: 20%;
    }
    .laptop{
        display: none;
    }
    .mobil{
        display: block;
    }
    header nav{
        display: none;
    }
    

    #oomhlogo{
      position: absolute;
        top: 25px;
        left: 30px;
        width: 30px;
        height: auto; 
        margin-top: 20px;
    }
    #burgermenu{
        margin-top: -25px;
        display: block; /*burgermenu vises*/
    }
    .menu-items {
        margin-top:-25px; /*for at få menu-items kassen til at gå helt op til toppen af skærmen - ellers vistes lidt af billedet i toppen*/
    }
    .container {
        width: 100%;
        margin: auto;
    }
    .burgerlogo{
        padding-top: 70px;
        padding-left: 30px;
    } 
    .navbar {
        width: 100%;
    }
          
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 62px;
            /*margin-top: 20px;*/
    }
          
    .navbar .menu-items {
        display: flex;
    }
          
    .navbar .nav-container li { /*for at alle punkter ikke får en prik foran sig (fordi <li>)*/
        list-style: none;
    }
          
    .navbar .nav-container a {
        text-decoration: none;
        color: black;
        font-weight: 500;
        font-size: 1.2rem;
        padding: 0.7rem;
    }
          
    .nav-container {
        display: block;
        position: relative;
        height: 60px;
    }
          
    .nav-container .checkbox { /*styling af den usynlige chechbox, der ligger under burgerikonet, så det virker når man klikker på det - ellers er det bare et billede*/
        position: absolute;
        display: block;
        height: 32px;
        width: 32px;
        top: 40px;
        right: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }
          
    .nav-container .hamburger-lines { /*ja - burgerlinjernes styling så de ses som burger*/
        display: block;
        height: 26px;
        width: 32px;
        position: absolute;
        top: 40px;
        right: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
          
    .nav-container .hamburger-lines .line { /*styling af den enkelte linje i burgeren*/
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: black;
    }
          
    .nav-container .hamburger-lines .line1 { 
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
    }
          
    .nav-container .hamburger-lines .line2 { 
        transition: transform 0.2s ease-in-out;
    }
          
    .nav-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
    }
          
    .navbar .menu-items { /*styling til hvordan linksene er placeret og transformeres*/
        padding-top: 120px;
        background-color: #ffecf5;
        height: 110vh;
        width: 100%;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        padding-left: 50px;
        transition: transform 0.5s ease-in-out;
        text-align: center;
        line-height: 10PX;
    }
       
    .navbar .menu-items li { /*tekststørrelse, -type og den slags*/
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
        font-weight: 500;
        text-align: left;
        padding-left: 30%;
    }
    .navbar .menu-items .ddc { /*det samme, men til de punkter, der var dropdown content (derfor ddc) i laptopnaven*/
        margin-bottom: 1.2rem;
        font-size: 1rem;
        font-weight: 400;
        text-align: left;
    }
    #burgerlogo {
        position: absolute;
        top: 5px;
        left: 15px;
        width: 10%;
        height: auto; 
        margin-top: 20px;
    }
          
    .nav-container input[type="checkbox"]:checked ~ .menu-items { /* hvad der sker når den usynlige checkbox er checket af*/
        transform: translateX(0);
    }
          
    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 { /*øverste burgerlinje drejer højre ende ned*/
        transform: rotate(45deg);
    }
          
    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 { /*midterste linje forsvinder*/
        transform: scaleY(0);
    }
          
    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {/*nederste burgerlinje drejer højre ende op*/
        transform: rotate(45deg);
        transform: rotate(-45deg);
    }
        
    .nav-container input[type="checkbox"]:checked ~ .logo{
        display: block;
    }

    /*----karusel----*/
    #pic1 {
        animation-delay: 0s;
        background-image: url(images/Mforside1.jpg);
      }
      #pic2 {
        animation-delay: 5s;
        background-image: url(images/Mforside2.jpg);
      }
      #pic3 {
        animation-delay: 10s;
        background-image: url(images/Mforside3.jpg);
      }
      #pic4 {
        animation-delay: 15s;
        background-image: url(images/Mforside4.jpg);
      }
      #pic5 {
        animation-delay: 20s;
        background-image: url(images/Mforside5.jpg);
      }
      #pic6 {
        animation-delay: 25s;
        background-image: url(images/Mforside6.jpg);
      }
      #pic7 {
        animation-delay: 30s;
        background-image: url(images/Mforside7.jpg);
      }
      #pic8 {
        animation-delay: 35s;
        background-image: url(images/Mforside8.jpg);
      }
      #pic9 {
        animation-delay: 40s;
        background-image: url(images/Mforside9.jpg);
      }
    /*-----GALLERI-----------------*/
    /*-----baggrund---*/
   
    .fuldfarve{
        margin-top: 90px;
        padding-top: 70px;
        padding-left: 5%;
        padding-bottom: 90px;
        padding-right: 5%;
        margin-bottom: 20px;
    }

    .blå{
        background-color: #ecfafe;
    }
   
    /*-------flexbokse------*/
    .flextorækker{
        display: flex;
        width: 100%;
        height: auto;
        margin-bottom: 60px;
    }
    .billedetekst{
        width: 45%;
        height: auto;
        justify-content: space-between;
        gap: 10px;
    }
    .flextorækkeruf{
        flex-direction: column-reverse;
        width: 90%;
    }
    .tekstbredbillede{
      width: 70%;
    }
    .column{
      flex-direction: column;
    }
    .mobilflex{
      display: flex;
      width: 90%;
      height: auto;
      margin-bottom: 50px;
      margin-top: 50px;
    }
    .tokvadrater{
      flex-direction: column;
      width: 70%;
    }
    /*----bokse uden flex---*/

    .farvecontainer{
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 100px;
        padding-bottom: 50px;
        margin-top: 90px;
        margin-bottom: 20px;
    }
    .farvehøjre{
        width: 85%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }
    .flexbilledebytekst{
      width: 100%;
      justify-content: space-around;
      gap: 10px;
    }
    /*----billeder-----*/
    .højhøjre{
        width: 45%;
        height: auto;
        right: 0;
    }
    .lavvenstre{
        width: 100%;
        height: auto;
    }
    .fuldsize{
        width: 100%;
        height: auto;
    }
    .billedeby{
      width: 70%;
    }
    .bredbillede{
      margin-top: 0%;
      width: 70%;
    }
    .tyndtbillede{
      width: 40%;
      margin-top: 0px;
      margin-right: 5%;
    }
    .billedetop{
      width: 60%;
      margin-left: 20%;
    }
    .kvadrat1{
      width: 80%;
      margin: auto;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .firs{
        width: 90%;
        flex-direction: column-reverse;
    }
    .firsum{
      width: 90%;
      flex-direction: column;
      margin-top: 50px;
    } 
    .tres{
        width: 100%;
        margin-bottom: 50px;
    }
    .tredive{
        width: 70%;
        left: 0;
        margin-top: 50px;
    }
    .firs50{
      width: 90%;
    }
    footer{
      width: 100%;
      height: 250px;
      padding-top: 50px;
    }
    footer p{
      margin-left: 5%;
    }
}