*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 55%;
  }
}
@media only screen and (max-width: 62.5em) {
  html {
    font-size: 55%;
  }
}
@media only screen and (max-width: 56.25em) {
  html {
    font-size: 53%;
  }
}
@media only screen and (max-width: 50em) {
  html {
    font-size: 45%;
  }
}
@media only screen and (max-width: 37.5em) {
  html {
    font-size: 40%;
  }
}
@media only screen and (max-width: 25em) {
  html {
    font-size: 35%;
  }
}

body {
  font-family: "Roboto", sans-serif;
}

.page-introduction {
  padding: 5rem 0;
  display: grid;
  grid-template-rows: repeat(2, min-content);
  grid-template-columns: 1fr;
  grid-column: full-start/full-end;
  grid-row: page-intro-start/page-intro-end;
  justify-items: center;
  grid-gap: 3rem;
  border-bottom: 2px solid black;
}
.page-introduction__logo {
  width: 25%;
}
.page-introduction__link {
  display: grid;
  grid-template-columns: min-content 1fr;
  text-decoration: none;
  text-transform: uppercase;
  align-items: center;
  grid-gap: 1rem;
  font-size: 2rem;
  transition: 0.2s;
}
.page-introduction__link:link, .page-introduction__link:visited {
  color: #5f482f;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 2.5rem;
}
.page-introduction__link:hover, .page-introduction__link:active {
  color: #977e43;
  transform: translateY(-1px);
}
.page-introduction__icon {
  fill: #5f482f;
  width: 3rem;
  height: 3rem;
}
.page-introduction__icon:hover, .page-introduction__icon:active {
  color: #977e43;
}
.section-title {
  padding: 7rem 0rem;
  grid-row: title-start/title-end;
  grid-column: center-start/center-end;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  justify-items: center;
  text-align: center;
}
.section-title__paragraph {
  width: 60%;
}

.section__underline {
  width: 5% !important;
}
@media only screen and (max-width: 56.25em) {
  .section__underline {
    width: 4.5% !important;
  }
}
@media only screen and (max-width: 50em) {
  .section__underline {
    width: 4% !important;
  }
}
.section__list {
  margin-left: 2rem;
  color: #5f482f;
  font-size: 2rem;
  margin-top: 2rem;
}
.section__list li {
  margin-bottom: 0.5rem;
}
.section__split {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  grid-gap: 10rem;
  align-items: center;
}
@media only screen and (max-width: 56.25em) {
  .section__split {
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
  }
}
.section__img {
  width: 45rem;
  height: 100%;
  margin-top: 6rem;
}
.section__img-box {
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 56.25em) {
  .section__img {
    width: 40rem;
  }
}
@media only screen and (max-width: 50em) {
  .section__img {
    width: 37rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .section__img {
    width: 34rem;
  }
}
@media only screen and (max-width: 25em) {
  .section__img {
    width: 30rem;
  }
}
.section-one {
  grid-column: center-start/center-end;
  grid-row: section-start 1/section-end 1;
  margin: 3rem 0;
}
.section-two {
  grid-column: center-start/center-end;
  grid-row: section-start 2/section-end 2;
  margin: 3rem 0;
}
.section-three {
  grid-column: center-start/center-end;
  grid-row: section-start 3/section-end 3;
  margin: 3rem 0;
}
.section-four {
  grid-column: center-start/center-end;
  grid-row: section-start 4/section-end 4;
  margin: 3rem 0;
}
.section-five {
  grid-column: center-start/center-end;
  grid-row: section-start 5/section-end 5;
  margin: 3rem 0;
}
.section-six {
  grid-column: center-start/center-end;
  grid-row: section-start 6/section-end 6;
  margin: 3rem 0;
}
.section-seven {
  grid-column: center-start/center-end;
  grid-row: section-start 7/section-end 7;
  margin: 3rem 0;
}
.section-eight {
  grid-column: center-start/center-end;
  grid-row: section-start 8/section-end 8;
  margin: 3rem 0;
}
.section-nine {
  grid-column: center-start/center-end;
  grid-row: section-start 9/section-end 9;
  margin: 3rem 0;
}
.section-ten {
  grid-column: center-start/center-end;
  grid-row: section-start 9/section-end 9;
  margin: 3rem 0;
}
.section-eleven {
  grid-column: center-start/center-end;
  grid-row: section-start 9/section-end 9;
  margin: 3rem 0;
}
.section-twelve {
  grid-column: center-start/center-end;
  grid-row: section-start 9/section-end 9;
  margin: 3rem 0;
}
.section-source {
  grid-column: center-start/center-end;
  grid-row: section-start 9/section-end 9;
  margin: 10rem 0;
  margin-bottom: 6rem;
  font-size: 2rem;
  justify-self: center;
}
.section-source__link:link, .section-source__link:visited {
  color: #5f482f;
  text-decoration: none;
}
.section-source__link:hover, .section-source__link:active {
  color: #977e43;
  transform: translateY(-1px);
}
.video {
  grid-column: full-start/full-end;
  grid-row: video-start/video-end;
  display: grid;
  padding: 12rem 5rem;
  justify-items: center;
}
.video h2 {
  font-size: 3rem;
}
.video hr {
  width: 30%;
}
.video__clip {
  width: 80%;
  height: 67.5rem;
  border: 1px #5f482f solid;
  outline-style: solid;
  outline-color: #5f482f;
  outline-width: 3px;
}
@media only screen and (max-width: 62.5em) {
  .video__clip {
    height: 60rem;
    width: 90%;
  }
}
@media only screen and (max-width: 50em) {
  .video__clip {
    height: 57rem;
    width: 90%;
  }
}
@media only screen and (max-width: 37.5em) {
  .video__clip {
    height: 50rem;
    width: 90%;
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  80% {
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  80% {
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
.heading-4, .heading-3, .heading-2, .heading-1 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #5f482f;
}

.heading-1 {
  font-size: 4.5rem;
}

.heading-2 {
  font-size: 4rem;
}

.heading-3 {
  font-size: 1.6rem;
}

.heading-4 {
  font-size: 1.5rem;
}

.paragraph-1 {
  color: #5f482f;
  font-size: 2.3rem;
  font-weight: 400;
}

.paragraph-2 {
  color: #5a5a5a;
}

.underline__heading {
  width: 21rem;
  height: 0.3rem;
  display: block;
  background-color: #5f482f;
}

.u-center-text {
  text-align: center !important;
}

.u-margin-top-huge {
  margin-top: 10rem !important;
}

.u-margin-top-large {
  margin-top: 8rem !important;
}

.u-margin-top-medium {
  margin-top: 4rem !important;
}

.u-margin-top-small {
  margin-top: 1.5rem !important;
}

.u-margin-bottom-huge {
  margin-bottom: 10rem !important;
}

.u-margin-bottom-large {
  margin-bottom: 8rem !important;
}

.u-margin-bottom-medium {
  margin-bottom: 4rem !important;
}

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important;
}

.btn, .btn:link, .btn:visited {
  text-decoration: none;
  display: inline-block;
  border-radius: 10rem;
  transition: all 0.3s;
  font-size: 2rem;
  cursor: pointer;
}
.btn--brown {
  color: #5f482f;
  border: 1px solid #5f482f;
  padding: 2.5rem 12rem;
  transition: all 0.3s;
  transform: translateY(0);
}
.btn--brown:hover, .btn--brown:active {
  color: #977e43;
  border: 1px solid #977e43;
  transform: scale(1.03) translateY(-0.3rem);
}
.btn--brown:active, .btn--brown:focus {
  transform: translateY(0.3rem);
}

.header {
  grid-column: full-start/full-end;
  grid-row: header-start/header-end;
  background-color: #282828;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 100%;
}

.footer {
  grid-column: full-start/full-end;
  grid-row: footer-start/footer-end;
  background-color: #282828;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, max-content);
  padding: 5rem 6rem;
  grid-gap: 4rem;
}
.footer__icon {
  fill: #fff;
  width: 2.1rem;
  height: 2.1rem;
  display: block;
}
.footer__icon:not(last-child) {
  margin-right: 20px;
}
.footer__icon--link svg:hover, .footer__icon--link svg:active {
  fill: #977e43;
}
.footer__navigation--list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  list-style: none;
  justify-items: center;
  grid-gap: 4rem;
  justify-content: space-between;
}
.footer__navigation--link {
  border: 1px solid transparent;
}
.footer__navigation--link:link, .footer__navigation--link:visited {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  width: 100%;
  text-transform: uppercase;
  font-size: 1.5rem;
  padding: 1rem 1.3rem;
  transition: all 0.3s;
}
.footer__navigation--link:hover, .footer__navigation--link:active {
  border: 1px solid #977e43;
  transform: rotate(2deg) translateY(-2px);
}
.footer__contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
  grid-template-rows: max-content;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 4rem;
}
@media only screen and (max-width: 56.25em) {
  .footer__contact {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    align-content: center;
    text-align: center;
  }
}
.footer__contact--social {
  justify-self: start;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 56.25em) {
  .footer__contact--social {
    display: flex;
    justify-self: center;
  }
}
.footer__contact--logo {
  transition: all 0.3s;
  justify-self: center;
  width: 20rem;
}
.footer__contact--mail {
  justify-self: end;
}
@media only screen and (max-width: 56.25em) {
  .footer__contact--mail {
    display: flex;
    justify-self: center;
  }
}
.footer__contact--mail--link {
  display: flex;
  grid-template-columns: repeat(2, max-content);
  text-decoration: none !important;
}
.footer__contact--mail--text {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 400;
}
@media only screen and (max-width: 25em) {
  .footer__contact--mail--text {
    font-size: 2rem;
  }
}
.footer__copy {
  padding-top: 2rem;
  display: flex;
  justify-content: center;
}
.footer .copyright {
  color: ghostwhite;
  font-size: 1.2rem;
}

.navigation__checkbox {
  display: none;
}
.navigation__button {
  display: none;
  position: absolute;
  left: 5rem;
  top: 1.2rem;
  height: min-content;
}
@media only screen and (max-width: 62.5em) {
  .navigation__button {
    display: block;
  }
}
.navigation__icon {
  fill: #5f482f;
  width: 7rem;
  height: 7rem;
  line-height: 100%;
}
.navigation__icon--menu {
  width: 7rem;
  height: 7rem;
}
.navigation__icon--cross {
  width: 5rem;
  height: 5rem;
  display: none;
}
.navigation__mobile--nav {
  margin-top: 4rem;
  z-index: 1000;
  display: none;
  justify-self: center;
  margin-right: auto;
  height: 100vh;
}
.navigation__mobile--list {
  list-style: none;
  width: 100%;
  display: grid;
  grid-gap: 1rem;
  grid-template-rows: repeat(7, max-content);
}
.navigation__mobile--item {
  text-align: center;
  border-radius: 10px;
  padding: 2rem 7rem;
  background-color: #5f482f;
}
.navigation__mobile--link:link, .navigation__mobile--link:visited {
  font-size: 3rem;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
}
.navigation__background {
  display: none;
  width: 100%;
  background-color: white;
}
@media only screen and (max-width: 62.5em) {
  .navigation__nav {
    display: none;
  }
}
.navigation__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, max-content);
}
.navigation__item {
  margin: 1rem 3rem;
}
.navigation__link {
  border: 2px solid transparent;
  padding: 1rem 3rem;
  font-size: 1.5rem;
}
.navigation__link:link, .navigation__link:visited {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  width: 100%;
}
.navigation__link:hover, .navigation__link:active {
  border: 2px solid #977e43;
}

.activated__desktop {
  border-bottom: 2px solid #977e43;
}
.dropdown {
  position: relative;
}
.dropdown:hover .dropdown__box {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
}
.dropdown__box {
  display: none;
}
.dropdown__list {
  display: grid;
  grid-template-columns: max-content;
  position: absolute;
  background-color: #282828;
  list-style: none;
  left: -2.2rem;
}

.navigation__checkbox:checked ~ .navigation__background {
  display: block;
}

.welcome {
  grid-column: full-start/full-end;
  grid-row: header-start/welcome-end;
  background-image: url("../img/choco intro.jpg");
  background-size: cover;
  position: relative;
}
@media only screen and (max-width: 62.5em) {
  .welcome {
    background-color: #ede8ec;
    background-image: none;
  }
}
.welcome__text {
  display: grid;
  grid-template-columns: minmax(min-content, max-content);
  grid-template-rows: 1fr min-content 1fr;
  justify-items: center;
  position: absolute;
  top: 30%;
  left: 8%;
}
@media only screen and (max-width: 62.5em) {
  .welcome__text {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    padding: 5rem 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr min-content 1fr;
    align-items: center;
  }
}
.welcome__logo {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
  margin-top: 4rem;
}
@media only screen and (max-width: 50em) {
  .welcome__logo {
    max-width: 70%;
  }
}
@media only screen and (max-width: 37.5em) {
  .welcome__logo {
    max-width: 60%;
  }
}
.welcome__logo--box {
  text-align: center;
}
.welcome__intro {
  font-size: 3.2rem;
}
.welcome__btn {
  align-self: center;
  align-self: start;
  margin-top: 6rem;
}

.intro {
  grid-column: center-start/center-end;
  grid-row: intro-start/intro-end;
  display: grid;
  grid-template-columns: 60vw;
  justify-items: center;
  justify-content: center;
  padding: 18rem 10rem;
  text-align: center;
}
@media only screen and (max-width: 62.5em) {
  .intro {
    padding: 10rem 8rem;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 37.5em) {
  .intro {
    padding: 8rem 2rem;
    grid-template-columns: 1fr;
  }
}
.intro__titel {
  margin-bottom: 2rem;
  display: table;
  position: relative;
}
.intro__paragraph {
  line-height: 5rem;
  font-weight: 400;
}
@media only screen and (max-width: 25em) {
  .intro__paragraph {
    font-size: 3rem;
  }
}

.center-menu {
  grid-column: full-start/full-end;
  grid-row: center-menu-start/center-menu-end;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 0.8fr));
  grid-gap: 2rem;
  padding: 5rem 10%;
  display: grid;
  background-color: whitesmoke;
  justify-content: center;
}
.center-menu__image {
  width: 100%;
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.center-menu__text {
  color: #fff;
  grid-column: 1/-1;
  grid-row: 1/2;
  display: none;
  padding: 3rem;
  text-align: center;
  justify-self: center;
  align-self: center;
  z-index: 20;
}
.center-menu__link {
  justify-self: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 80% 20%;
  transition: all 0.3s;
}
.center-menu__link:link, .center-menu__link:visited {
  text-decoration: none !important;
}
.center-menu__link:hover .center-menu__text {
  display: block;
}
.center-menu__link:hover .center-menu__image {
  filter: blur(3px) brightness(40%);
  transition: all 0.25s;
}
.center-menu__heading--box {
  grid-column: 1/-1;
  grid-row: 2/3;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-menu__heading--text {
  color: #fff;
  z-index: 10;
  font-size: 2.3rem !important;
}
.center-menu__heading--background {
  background-color: #5f482f;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 80%;
}

.container-homepage {
  display: grid;
  grid-template-rows: [header-start] max-content [header-end welcome-start] calc(100vh - 8rem) [welcome-end intro-start] min-content [intro-end center-menu-start] min-content [center-menu-end video-start] min-content [video-end footer-start] min-content [footer-end];
  grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 10rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
}
@media only screen and (max-width: 62.5em) {
  .container-homepage {
    grid-template-rows: [header-start] max-content [header-end welcome-start] calc( 75rem) [welcome-end intro-start] min-content [intro-end center-menu-start] min-content [center-menu-end video-start] min-content [video-end footer-start] min-content [footer-end];
  }
}

.container-geschiedenis {
  display: grid;
  grid-template-rows: [header-start] max-content [header-end page-intro-start] min-content [page-intro-end title-start] min-content [title-end] repeat(9, [section-start] min-content [section-end]) [footer-start] min-content [footer-end];
  grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 10rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
}

.container-gezondheid {
  display: grid;
  grid-template-rows: [header-start] max-content [header-end page-intro-start] min-content [page-intro-end title-start] min-content [title-end] repeat(9, [section-start] min-content [section-end]) [footer-start] min-content [footer-end];
  grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 10rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
}

.container-hoe-bewaren {
  display: grid;
  grid-template-rows: [header-start] max-content [header-end page-intro-start] min-content [page-intro-end title-start] min-content [title-end] repeat(3, [section-start] min-content [section-end]) [footer-start] min-content [footer-end];
  grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 10rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
}

.container-hoe-gemaakt {
  display: grid;
  grid-template-rows: [header-start] max-content [header-end page-intro-start] min-content [page-intro-end title-start] min-content [title-end] repeat(9, [section-start] min-content [section-end]) [footer-start] min-content [footer-end];
  grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 10rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
}

.hoe-gemaakt__video {
  grid-row: section-start 7/section-end 7;
  grid-column: center-start/center-end;
}

.container-recepten {
  display: grid;
  grid-template-rows: [header-start] max-content [header-end page-intro-start] min-content [page-intro-end title-start] min-content [title-end] repeat(6, [section-start] min-content [section-end]) [footer-start] min-content [footer-end];
  grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 10rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
}

.section__card {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0px 1px 2px black;
}
.section__card--box {
  display: grid;
  grid-template-rows: repeat(2, min-content);
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
}
.section__card--underline {
  width: 15rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  border: 1.5px solid #5f482f;
}
.section__card--title {
  font-size: 3rem;
}
.section__card--image {
  width: 100%;
}
.section__card--bottom {
  display: grid;
  justify-items: center;
  text-align: center;
  align-items: center;
  padding: 6rem 4rem;
}

/*# sourceMappingURL=style.css.map */