/*---------------------*/
/*   GENERAL ELEMENTS  */
/*---------------------*/
body {
  color: black;
  font-family: Arial, serif;
  font-size: 1rem;
}

/*---------------------*/
/*   GENERAL CLASSES   */
/*---------------------*/
.cf:before,
.cf:after {
  content: '';
  display: table;
}
.cf:after {
  clear: both;
}
@font-face {
  font-family: PoetsenOne;
  src: url(../fonts/PoetsenOne-Regular.ttf);
}
body > div {
  width: 100%;
}
article {
  width: 1120px;
  padding: 40px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 50px;
}
h2 {
  font-size: 1.5rem;
  font-family: 'PoetsenOne';
  text-decoration: none;
  color: #993333;
}
h3 {
  font-weight: bold;
  font-size: 1.2rem;
}
p {
  line-height: 30px;
  margin-top: 15px;
  width: 100%;
}
a {
  color: #993333;
  text-decoration: dotted;
  font-weight: bold;
}
.none {
  display: none;
}
/*---------------------*/
/* CONTAINING ELEMENTS */
/*---------------------*/
body > div {
  position: relative;
  padding: 100px 0 100px 0;
}

/*------------------------*/
/* PAGE SPECIFIC ELEMENTS */
/*------------------------*/

/*---elementen--*/
#logoOj {
  width: 120px;
  right: 2%;
  top: 5%;
  position: absolute;
}

#fruitsap {
  left: 10%;
  bottom: 330px;
}
#koffie {
  right: 5%;
  bottom: 320px;
}
#bestek {
  left: -50px;
  bottom: -200px;
  z-index: -1;
}
#koek1 {
  right: 8%;
  bottom: -100px;
}
#eitje {
  left: 5%;
  bottom: -100px;
}
#koek2 {
  right: 5%;
  bottom: -120px;
}
#koek3 {
  left: 5%;
  bottom: -120px;
}
#koek4 {
  right: 2%;
  bottom: -120px;
}
.elementen {
  position: absolute;
}

/* --- Homepage --- */
#home {
  background-image: url(../media/BackGroundHome_plaks2.jpg),
    url(../media/BackGroundHomeSingle.jpg);
  background-repeat: no-repeat, repeat;
  background-position: center bottom, top left;
  height: 1000px;
  z-index: 40;
  padding: 0;
  box-shadow: 0px 5px 50px #050505;
}
#home article {
  width: 846px;
  position: relative;
  padding: 0;
  padding-top: 20px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  /*border: 1px solid black;*/
}
#home article h1 {
  /*width:846px;*/
  /*padding-top:50px;*/
  font-family: PoetsenOne;
  font-size: 4rem;
  color: #f37375;
  text-align: center;
}
#home article img {
  display: block;
  width: 424px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
}
#home .begin ul li {
  position: absolute;
}
#home .begin ul li a {
  display: block;
  background-image: url(../media/hartje.png);
  width: 175px;
  padding-top: 60px;
  height: 101px;
  text-align: center;
  font-size: 1.7rem;
  background-size: cover;
  color: white;
  text-decoration: none;
}
#home .begin ul #hartje5 a {
  padding-top: 50px;
  height: 111px;
}
#home .begin ul li a:hover {
  background-image: url(../media/hartje_hover.png);
}
#home .begin ul li#hartje1 {
  left: 0;
  top: 440px;
}
#home .begin ul li#hartje2 {
  left: 672px;
  top: 440px;
}
#home .begin ul li#hartje3 {
  left: 342px;
  top: 700px;
}
#home .begin ul li#hartje4 {
  left: 160px;
  top: 580px;
}
#home .begin ul li#hartje5 {
  left: 525px;
  top: 580px;
}
/*---als nav niet zicht baar is ---*/
#home .rest {
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  background-color: #f37375;
  z-index: 1000;
}
#home .rest ul {
  float: right;
}
#home .rest ul li {
  display: inline-block;
  margin: 0;
  width: 170px;
}
#home .rest ul li a {
  display: block;
  text-align: center;
  height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 1.3rem;
  color: white;
  text-decoration: none;
}
#home .rest ul li a:hover {
  background-color: #993333;
}
/* --- info --- */
#info {
  background-color: #f37375;

  height: auto;
  z-index: 30;
  /*display:none;*/
}
#info article img {
  margin-top: 20px;
  width: 385px;
  display: block;
  float: left;
}
#info article div {
  margin-left: 80px;
  margin-top: 20px;
  float: left;
  max-width: 635px;
}

/* --- Bestellen --- */
#bestel {
  background-image: url(../media/BackGroundHomeSingle02.jpg);
  background-repeat: repeat;
  background-position: left top;
  padding: 100px 0 100px 0;
  z-index: 20;
}

#bestel #aantalLuxeOntbijt {
  color: #bd1b1b;
  font-size: 1.4em;
}

/*---Vorige edities*/
#edities {
  background-color: #ffeccc;
  z-index: 0;
}
#edities article div {
  max-width: 635px;
  float: left;
}
#edities article img {
  float: left;
  width: 385px;
  margin-left: 100px;
}
/*---privacy---*/
#privacy {
  background-color: #f37375;
  z-index: -1;
}
#privacy article div {
  max-width: 635px;
  float: left;
}
#privacy h2 {
  text-align: center;
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
#privacy p {
  margin-top: 2px;
  margin-left: 20px;
  margin-bottom: 20px;
}
#privacy dl {
  margin-left: 20px;
}
#privacy dt {
  padding-bottom: 2px;
}
#privacy dd {
  padding-bottom: 10px;
  padding-left: 50px;
  line-height: 1.6;
}

/* --- Sponsors --- */
#sponsors {
  background-color: #993333;
  z-index: 10;
  text-align: center;
}
#sponsors ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#sponsors ul li {
  display: block;
  flex-basis: auto;
  max-width: 230px;
  margin: 20px;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}
#sponsors li img {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}

#sponsors .nologo {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  width: 190px;
  height: auto;
  margin-bottom: 120px;
}
.aanboden {
  line-height: 1.5em;
  width: 100%;
  list-style-type: circle;
}
#inhoud {
  margin: 0;
  margin-bottom: 1rem;
  width: 100%;
  display: flex;
  flex-direction: row;
}

/*---------------*/
/*Tabled portred */
/*---------------*/
@media (max-width: 1200px) {
  article {
    width: auto;
    margin: 0;
    border-radius: 0;
  }
  .elementen {
    display: none;
  }
  #logoOj {
    width: 10%;
  }
  #home article {
    width: 846px;
    position: relative;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
  }
  #info article img {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    float: none;
  }
  #info article div {
    float: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  #edities article div {
    max-width: 635px;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  #edities article img {
    float: none;
    display: block;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
  }
}
/*--- kleiner dan 845px ---*/
@media (max-width: 846px) {
  #sponsors ul {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

#home article h1.klein {
  margin-top: 10px;
  font-size: 45px;
}