body {
  background-color: #000000;
  margin: 10px;
  font-family: "Josefin Sans", serif;
  color: #ffffff;
}

.fbdiv {
  background-color: #bf9b7a;
  color: #000000;
  padding: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

mark {
  background-color: #bf4a30;
}

.wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
      grid-template-areas: "logo"
 "video"
 "contact" 
 "content"
 "items";
}

.items {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: items;
  display: -ms-grid;
  display: grid;
  grid-gap: 20px;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

.items img {
  width: 100%;
}

.box {
  padding: 10px;
}

.box a {
  color: #bf4a30;
}

.logo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: logo;
  text-align: center;
  font-size: 3.5vw;
}

.logo img {
  width: 100%;
}

.intro {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  grid-area: content;
}

.video {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: video;
}

.lead {
  font-size: 120%;
}

.center-text {
  text-align: center;
}

@media only screen and (min-width: 1000px) {
  body {
    margin: 20px;
  }
  .wrapper {
    display: -ms-grid;
    display: grid;
    grid-gap: 0px;
    -ms-grid-columns: 1fr 4fr 1fr;
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas: ". logo ."
 ". video ."
 ". contact ."
 ". content ."
 ". items .";
  }
  .video {
    width: 75%;
    margin: auto;
  }
  .items {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0px;
    margin: 0px;
    padding: 0px;
  }
  .item {
    margin: 0px;
    padding: 0px;
  }
  .item img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
}
/*# sourceMappingURL=css.css.map */