/**
 * 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;


}




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


.tekster1 h2 {
  width: 80vw;
  margin-top: 10vw;
  margin-left: 10vw;

  font-size: 7vw;
}



.svarmuligheder h2 {
  width: 70vw;
  margin-left: 15vw;
  text-align: center;
  opacity: 0.5;
  font-size: 6vw;
}

.svar1 {
  margin-top: 40vw;
  text-align: center;
}

.svar2 {
  margin-top: 50vw;
  text-align: center;
}

.svar3 {
  margin-top: 60vw;
  text-align: center;
}

.svar1:hover, .svar2:hover, .svar3:hover {
  opacity: 1;
}


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

}


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

  }




/* _________Footer_____________ */

.baggrundfootermobile img {
  width: 100vw;
  position: absolute;
  margin-top: 119vw;
  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 ---------_____________ */



.tekster1 h2 {
  width: 80vw;
  margin-top: 9vw;
  margin-left: 10vw;

  font-size: 5vw;
}



.svarmuligheder h2 {
  width: 70vw;
  margin-left: 15vw;
  text-align: center;
  opacity: 0.5;
  font-size: 4vw;
}

.svar1 {
  margin-top: 25vw;
  text-align: center;
}

.svar2 {
  margin-top: 32vw;
  text-align: center;
}

.svar3 {
  margin-top: 39vw;
  text-align: center;
}

.svar1:hover, .svar2:hover, .svar3:hover {
  opacity: 1;
}


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

}


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

  }


  /*_________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 */