/* ******************************************************************************** */
/*                                                                                  */
/*                            Mehr Visionen fuer Kinder                             */
/* v2                                                                               */
/* ******************************************************************************** */

/*
* dasdasda
*/

/* FONTS                                                                            */
/* ******************************************************************************** */
@font-face {
  font-family: "Daxline-W01-Bold";
  src: url("../fonts/5764634/34afceea-0ea1-4b60-8638-903f6da87a6f.woff2")
      format("woff2"),
    url("../fonts/5764634/fe2da1f8-8be5-44dd-ac81-edc4fc5564d6.woff")
      format("woff");
}
@font-face {
  font-family: "Daxline-W01-Medium";
  src: url("../fonts/5764758/65f4a7aa-54a0-49ad-a4f8-0564c50cd412.woff2")
      format("woff2"),
    url("../fonts/5764758/a906d807-f478-4c1a-9894-32a6515238d7.woff")
      format("woff");
}
@font-face {
  font-family: "Daxline-W01-Regular";
  src: url("../fonts/5764790/fe6beaac-8ff7-4fed-80ae-8fda1128d1c9.woff2")
      format("woff2"),
    url("../fonts/5764790/bbfcf1aa-d115-47af-9a17-20cd6809531d.woff")
      format("woff");
}
@font-face {
  font-family: "FF-Marker-Pro";
  src: url("../fonts/5558954/a81d02c8-4502-4be1-8cf8-d0b5c63edaaf.woff2")
      format("woff2"),
    url("../fonts/5558954/80073cd5-7968-4575-9616-1e66765adbc6.woff")
      format("woff");
}

body {
  background-image: url(../img/body_background.jpg);
  background-repeat: repeat-y;
  background-size: cover;
}

#header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 116px;
  background-image: url(../img/header-background.svg);
  background-position-y: -30px;
  background-repeat: no-repeat;
  background-size: cover;
}

#header nav {
  display: flex;
  justify-content: flex-end;
  gap: 0px 30px;
}

#header a,
a:hover,
a:visited,
a:active {
  font-family: "Daxline-W01-Bold";
  color: black;
  text-decoration: none;
}

#intro {
  margin-top: -40px;
  margin-bottom: 40px;
  margin-left: 16px;
  margin-right: 16px;
}

h2 {
  text-align: center;
  font-family: "FF-Marker-Pro";
  font-size: 32px;
}

#intro h2 {
  color: #afca0b;
}

#intro h3 {
  text-align: center;
  font-family: "Daxline-W01-Regular";
  font-size: 20px;
}

.preboxes,
.afterboxes {
  display: none;
}

#boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
  flex-flow: column;
}

.box {
  margin: 50px 10px;
  text-align: center;
}

.mobile {
  margin: 16px 0px;
}

.mobile h2 {
  font-size: 24px;
}

.mobile.kitaverband {
  margin-top: 40px;
}

.mobile.kitaverband > h2 {
  margin-left: 50px;
}

.mobile.kitaverband > img {
  width: 50%;
  margin-top: -66px;
  margin-left: -79px;
}

.buttons1, .buttons2 {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-end;
}

.buttons1 {
  margin-bottom: -4px;
  padding-top: 8px;
}

.buttons1 img, .buttons2 img {
  height: 64px;
}

.button_info {
margin-right: -10px;
}

.button_website {
}

.button_instagram {
margin-right: -6px;
}

.button_facebook {

}

#box_vfk .button_info, #box_vfk .button_website {
margin-top: 20px;
}

/* SM devices - Small devices (landscape phones, 576px and up)                      */
/* ******************************************************************************** */
@media (min-width: 576px) {
  .mobile.kitaverband {
    margin-top: 80px;
  }
  .mobile.kitaverband > img {
    margin-top: -88px;
  }

  #box_vfk .button_info, #box_vfk .button_website {
    margin-top: 0px;
    }
}

/* MD devices - Medium devices (tablets, 768px and up)                              */
/* We switch to the three row layout                                                */
/* ******************************************************************************** */

@media (min-width: 768px) {
  #header nav {
    margin-top: 0px;
  }
  .preboxes {
    display: flex;
    flex-wrap: nowrap;
    margin: auto;
    align-items: center;
    margin-bottom: 20px;
  }

  .preboxes__left {
    width: 66%;
    background-image: url(../img/pfeil-a.svg), url(../img/pfeil-b.svg);
    background-position-x: 20%, 80%;
    background-position-y: 100%;
    background-repeat: no-repeat;
    background-size: 4em;
  }

  .preboxes__right {
    width: 33%;
    background-image: url(../img/pfeil-c.svg);
    background-position-x: 0%;
    background-position-y: 52%;
    background-repeat: no-repeat;
    background-size: 4em;
  }

  .preboxes__left h2,
  .preboxes__right h2,
  .afterboxes__left h2 {
    font-size: 24px;
  }

  .afterboxes {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .afterboxes__left {
    width: 66%;
    text-align: center;
    padding-top: 80px;
    background-image: url(../img/pfeil-b.svg), url(../img/pfeil-a.svg);
    background-position-x: 50%, 70%;
    background-position-y: 10%;
    background-repeat: no-repeat;
    background-size: 4em;
  }

  .kitaverband img {
    width: 250px;
    margin-top: -70px;
  }

  .kitaverband h2 {
    margin-left: 225px;
  }

  #boxes {
    flex-wrap: nowrap;
    flex-flow: row;
  }

  .box {
    width: 30%;
    margin: 0px 10px;
  }

  .mobile {
    display: none;
  }

  .buttons1 {
    margin-top: -30px;
  }

  #box_vfk .button_info, #box_vfk .button_website {
    margin-top: 12px;
    }
}

/* LG devices - Large devices (desktops, 992px and up)                              */
/* We add background images to the top left and bottom right                        */
/* ******************************************************************************** */
@media (min-width: 992px) {
  .preboxes__left {
    background-position-x: 25%, 75%;
  }

  .preboxes__right {
    background-position-x: 1%;
  }

  .buttons1 {
    margin-top: -40px;
  }

  #box_vfk .button_info, #box_vfk .button_website {
    margin-top: 15px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
/* ******************************************************************************** */
@media (min-width: 1200px) {
  #header {
    background-position-y: -30px;
  }

  .preboxes__left {
    background-position-x: 30%, 70%;
  }

  .buttons1 {
    margin-top: -40px;
  }

  #box_vfk .button_info, #box_vfk .button_website {
    margin-top: 15px;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
/* ******************************************************************************** */
@media (min-width: 1400px) {
  #header {
    background-position-y: -30px;
  }

  .buttons1 {
    margin-top: -40px;
  }
}