@font-face{
  font-family: sourcesans;
  src: url(../../css/fonts/SourceSansPro-Regular.ttf)
}

@font-face{
  font-family: sourceserif;
  src: url(../../css/fonts/source_serif_4/static/SourceSerif4/SourceSerif4-Bold.ttf)
}

/* Changes the body */
body{
  font-family: sourcesans;
  color: #000;
}

        .menuitem {
            width: 30%;
            display: inline-block;
            vertical-align: top;

            padding: 12px;
        }

        .second {
            width: 25%;
            display: inline-block;
            background-color: blue;
        }

        .third {
            width: 25%;
            display: inline-block;
            background-color: yellow;
        }

        @media screen and (max-width: 500px) {

            .menuitem,
            .second,
            .third {
                width: 80%;
                border-width: 0 0 1px 0;
                border-color: #ccc;
                border-style: solid;
            }
        }


        .menugroup-divider {
          height:1px;
          background: #f1bd68;
          margin-top: 12px;
          margin-bottom: 12px;
          margin-left:5%;
          margin-right:5%;
        }

.menugroup {
  text-align: center;
  padding:24px;
}

.menugroup-name{
  font-weight: 900;
  font-size: 2em;
  font-family: sourceserif;
  color: #f1bd68;
}

.menugroup-menuitems {
  width: 100%;
  /*
  display: flex;
  flex-direction: row;
  justify-content: center;
  */

  text-align: center;
}





.menuitem-name {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  padding:8px;
}

.menuitem-image-div{
  padding:16px;
}

.menuitem-description {
  font-size: 14px;
  padding-left: 5%;
  padding-right: 5%;
}

.menuitem-cost {
  font-size: 14px;
  margin-top:14px;
}

.menuitem-image{
  width: 80%;
  /* border: 5px solid #FFC425; */
      /* box-shadow: 0px 0px 20px rgb(59 59 59); */
      border-radius: 12px;
}