/**
 * fil: css/style.css
 **/
/* Variabler: genbruges og gør designvalg enkle */
:root {
  /* farver */
  --brun: #481A00;
  --brun2: #210100;
  --white: #ffffff;
  --gra: #949599;
  --gra2: #b3b3b3;

  /* fonte */

    /*Fairplex Narrow OT Med*/
  --brod: fairplex-narrow, serif;


  }
  /* fonte */
  /*
        Fairplex Narrow OT Bold
        font-family: fairplex-narrow, serif;
        font-weight: 700;
        font-style: normal;

        Fairplex Narrow OT Bold Italic
        font-family: fairplex-narrow, serif;
        font-weight: 700;
        font-style: italic;

        Fairplex Narrow OT Book
        font-family: fairplex-narrow, serif;
        font-weight: 400;
        font-style: normal;

        Fairplex Narrow OT Book Italic
        font-family: fairplex-narrow, serif;
        font-weight: 400;
        font-style: italic;

        Fairplex Narrow OT Med
        font-family: fairplex-narrow, serif;
        font-weight: 500;
        font-style: normal;

        Fairplex Narrow OT Med Italic
        font-family: fairplex-narrow, serif;
        font-weight: 500;
        font-style: italic;

  */

    /*  320px — 480px: Mobile devices.
      481px — 768px: iPads, Tablets.
      769px — 1024px: Small screens, laptops.
      1025px — 1200px: Desktops, large screens.
      1201px and more — Extra large screens, TV. */

/* __________ Mobile First deign start __________ */
@media only screen and (max-width: 480px){

  html {
    padding: 0px;
    margin: 0;
    height: 100%;
  }

  * {
    padding: 0px;
    margin: 0;
  }

  h2 {
    position: absolute;
    color: var(--white);
    cursor: pointer;
    text-decoration: none;
    font-family: var(--brod);
    text-align: center;
  }

  p {
    position: absolute;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--brod);
    text-align: center;
  }


/* ---- Skjul Web menuen  ----  */

.navmenupunkter{
  display: none;
}

/* ---- Vis Burgermenuen i stedet for  ----  */
.burgermenulogo img {
  position: absolute;
  /*background: red;*/
  width: 10vw;
  margin-left: 84vw;
  margin-top: 2.7vw;
  z-index: 5;
}


/* ---- Logo i navigationsbaren  ----  */
.logo img {
  position: absolute;
  /*background: #FFD9EC;*/
  width: 20vw;
  margin-top: 2.5vw;
  z-index: 5;
  margin-left: 4.5vw;
}

/* ---- sortebaggrund i navigationsbaren  ----  */
.sort img {
  position: relative;
 height: 20vw;
 top: 0;
 left: 0;
 z-index: 1;
 width: 100vw;
 height: 17vw;
 opacity: 0.7;
}

/* ---- rødbaggrund  ---- */
.rodbaggrund img {
  margin-top: 0;
  top: 0;
  width: 100vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
position: absolute;
opacity: 1;
height: 155vw;


}

.rod div{
  background-image: url("../images2/rodbaggrund.jpg");
  margin-top: 0;
  top: 0;
  width: 100vw;
  height: 140vw;
  position: absolute;
}




/* _________--------Section 1 ---------_____________ */

.insert {
  margin-top: 20vw;
}

.section1 {
  display: none;
}

.teaser11 h2 {
  width: 70vw;
  margin-top: 5vw;
  margin-left: 15vw;
}


.informationer input {
  width: 65vw;
  height: 5vw;
  margin-left: 15vw;
  margin-top: 28vw;

  position: absolute;
    border-radius: 2vw;
  border-color: solid var(--white);

}

.informationer .email{
  margin-top: 44vw;
}

.navn {
  font-size: 4vw;
  margin-left: 3vw;
  padding-left: 5vw;
}

.email {
  font-size: 4vw;
  margin-top: 55vw;
  padding-left: 5vw;
}

.checkboxes {
  color: var(--white);
  position: absolute;
  width: 90vw;
}

.laes {
  margin-top: 45vw;
  margin-left: 21vw;
}

.jatak {
  margin-top: 54vw;
  margin-left: 17vw;
}

.button {
  background-color: var(--gra);
  position: absolute;
  color: white;
  border: none;
  width: 70vw;
  height: 10vw;
  margin-left: 15vw;
  margin-top: 80vw;
  border-radius: 10vw;

}

.button a {
    text-decoration: none;
    color: var(--white);
    position: absolute;
    font-family: var(--brod);
    font-weight: 500;
    text-align: center;
    margin-top: 2vw;
    margin-left: 25vw;

  }

  label {
    color: var(--white);
  }


/* _________Footer_____________ */

.baggrundfootermobile img {
  width: 100vw;
  position: absolute;
  margin-top: 117vw;
  z-index: 17;


}

.baggrundfooter img {
  display: none;
}


.tekster {
  z-index: 18;
  position: absolute;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--brod);
  text-align: center;
}



.jolly h2 {
  color: var(--white);
  width: 90vw;
  font-style: italic;
  font-weight: 500;
  font-size: 7vw;
  margin-left: 5vw;
  margin-top: 146vw;
}

.jolly p {
  color: var(--white);
  font-weight: 500;
  font-style: normal;
  width: 90vw;
  font-size: 5vw;
  margin-left: 5vw;
  margin-top: 159vw;
}

.support h2 {
  color: var(--white);
  font-style: normal;
  width: 90vw;
  font-weight: 500;
  font-size: 7vw;
  margin-left: 5vw;
  margin-top: 181vw;
}

.support p {
  color: var(--white);
  font-weight: 500;
  font-style: normal;
  width: 90vw;
  font-size: 5vw;
  margin-left: 5vw;
  margin-top: 194vw;
}
.some img {
  position: absolute;
  width: 15vw;
  margin-top: 226vw;
  z-index: 17; }

.insta {
  margin-left: 32vw;
}
.facebook {
  margin-left: 55vw;
}

.logofooter img {
  position: absolute;
  width: 30vw;
  margin-top: 256vw;
  margin-left: 35vw;
  z-index: 17; }



} /* slut på Mobil First design ____ end tag */


/*  320px — 480px: Mobile devices.
  481px — 768px: iPads, Tablets.
  769px — 1024px: Small screens, laptops.
  1025px — 1200px: Desktops, large screens.
  1201px and more — Extra large screens, TV. */


  @media screen and (min-width: 481px){

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

    * {
      padding: 0;
      margin: 0;
    }

    h2 {
      position: absolute;
      color: var(--white);
      cursor: pointer;
      text-decoration: none;
      font-family: var(--brod);
      text-align: center;
    }

    p {
      position: absolute;
      cursor: pointer;
      text-decoration: none;
      font-family: var(--brod);
      text-align: center;
    }


    /* ---- Skjul burger menuen  ----  */

    .burgermenulogo{
      display: none;
    }

    /* ---- Vis menuen i stedet for  ----  */
    .navmenupunkter  img {
      position: fixed;
      /*background: red;*/
      z-index: 20;

    }


    /* ---- Logo i navigationsbaren  ----  */
    .logo img {
      position: fixed;
      /*background: #FFD9EC;*/
      width: 10vw;
      margin-top: 2.5vw;
      z-index: 20;
      margin-left: 4.5vw;
    }

    /* ---- sortebaggrund i navigationsbaren  ----  */
    .sort img {
      position: fixed;
     top: 0;
     left: 0;
     z-index: 15;
     width: 100vw;
     height: 10vw;
     opacity: 0.7;
    }





    /* --------------- Menupunkter --------------- */
    a {
      text-decoration: none;
      color: var(--white);
      font-family: var(--brod);
    }




        .navmenupunkter a {
          color: var(--white);
          font-size: 2.3vw;
          top: 4vw;
          border: none;
          background-color: transparent;
          font-family: var(--brod);
          font-weight: 700;
          font-style: normal;
        }
          .produkter {
            margin-left: 50vw;
            position: fixed;
            z-index: 20;  }


          .Kalender {
            margin-left: 63.5vw;
            position: fixed;
            display: inline-block;
            z-index: 20;  }

          .OmJolly {
            margin-left: 85vw;
            position: fixed;
            display: inline-block;
            z-index: 20;  }

  /* ---- rødbaggrund  ---- */
        .rodbaggrund img {
          margin-top: 0;
          top: 0;
          width: 100vw;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        position: absolute;
        opacity: 1;
        height: 65vw;


        }





  /* _________--------Section 1 ---------_____________ */


  .teaser11 h2 {
    width: 70vw;
    margin-top: 9vw;
    margin-left: 15vw;
    font-size: 6.5vw;
  }


  .informationer input {
    width: 65vw;
    height: 5vw;
    margin-left: 15vw;
    margin-top: 27vw;
    position: absolute;
      border-radius: 2vw;
    border-color: solid var(--white);

  }
/*____________________________________________________________________________________________*/
.informationer .email{
  margin-top: 34vw;
}
      .navn {
        font-size: 2vw;
        margin-left: 3vw;
        padding-left: 5vw;
      }

      .email {
        font-size: 2vw;
        padding-left: 5vw;
      }

  .laes {
    color: var(--white);
    margin-left: 21vw;
    margin-top: 42vw;
    font-size: 1.5vw;
  }

  .jatak {
    color: var(--white);
font-size: 1.5vw;
    margin-left: 21vw;
    margin-top: 44vw;
  }

  .button {
    background-color: var(--gra);
    position: absolute;
    color: white;
    border: none;
    width: 70vw;
    height: 7vw;
    margin-left: 15vw;
    margin-top: 48vw;
    border-radius: 10vw;

  }

  .button a {
      text-decoration: none;
      color: var(--white);
      position: absolute;
      font-family: var(--brod);
      font-size: 4vw;
      font-weight: 500;
      text-align: center;
      margin-top: 1.5vw;
      margin-left: 25vw;

    }

    label {
      color: var(--white);
      font-size: 1.5vw;
    }

     br {
      display: none;
    }





  /*_________Footer__Tablet___________*/

  .baggrundfootermobile img {
    display: none;
  }

  .baggrundfooter img {
    width: 100vw;
    position: absolute;
    margin-top: 63vw;
    height: 40vw;
  }



    .tekster {
      z-index: 18;
      position: absolute;
      cursor: pointer;
      text-decoration: none;
      font-family: var(--brod);
      text-align: center;

    }



    .jolly h2 {
      color: var(--white);
      width: 45vw;
      font-style: italic;
      font-weight: 500;
      font-size: 3vw;
      margin-left: 7vw;
      margin-top: 70vw;
    }

    .jolly p {
      color: var(--white);
      font-weight: 500;
      font-style: normal;
      width: 45vw;
      font-size: 2vw;
      margin-left: 7vw;
      margin-top: 76vw;
    }

    .support h2 {
      color: var(--white);
      font-style: normal;
      width: 45vw;
      font-weight: 500;
      font-size: 3vw;
      margin-left: 7vw;
      margin-top: 85vw;
    }

    .support p {
      color: var(--white);
      font-weight: 500;
      font-style: normal;
      width: 45vw;
      font-size: 2vw;
      margin-left: 7vw;
      margin-top: 90vw;
    }
    .some img {
      position: absolute;
      width: 8vw;
      margin-top: 70vw;
      z-index: 17; }

    .insta {
      margin-left: 62vw;
    }
    .facebook {
      margin-left: 74vw;
    }

    .logofooter img {
      position: absolute;
      width: 30vw;
      margin-top: 80vw;
      margin-left: 57vw;
      z-index: 17; }



    } /* slut på web design størelse ____ end tag */



/* CSS slut */