.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

 body {
     font-family: 'Didact Gothic';
     font-size: 16px;
 }

 #food_calc_game_6 {
     width: 100%;
     max-width: 900px;
     margin: auto;
 }

 #header-image {
     width: 100%;
 }

 .back {
     background: #fff931;
     padding: 20px;
     cursor: pointer;
     font-size: 24px;
     float: left;
     min-width: 100px;
     text-align: center;
     font-weight: bold;
 }

 .next {
     background: #20ba24;
     padding: 20px;
     cursor: pointer;
     color: #fff;
     font-size: 24px;
     min-width: 100px;
     text-align: center;
     float: right;
     font-weight: bold;
 }

 .btns-box {
     padding: 10px 0;
 }

 #slide-2,
 #slide-3,
 #slide-4,
 #slide-5,
 #slide-6,
 #slide-7 {
     display: none;
 }

 #slide-1 > .title,
 #slide-2 > .title,
 #slide-3 > .title,
 #slide-4 > .title,
 #slide-5 > .title,
 #slide-6 > .title,
 #slide-7 > .title {
     background: #EEE;
     color: #555;
     font-size: 25px;
     padding: 15px;
     text-align: center;
     text-transform: uppercase;
     font-weight: bold;
     margin: 10px 0;
 }

 #slide-1 > .title > div,
 #slide-2 > .title > div,
 #slide-3 > .title > div,
 #slide-4 > .title > div,
 #slide-5 > .title > div,
 #slide-6 > .title > div,
 #slide-7 > .title > div {
      margin: -15px -15px 15px -15px;
      background: rgba(0, 0, 0, 0.05);
      font-size: 30px;
      padding: 10px;
      text-align: left;
 }

 .category-list {
     background: #eee;
     padding: 10px 0;
     margin: 0;
 }

 .category-list li,
 .recipe-list li {
     list-style: none;
     padding: 12px;
     font-size: 18px;
     border-left: 8px solid rgba(0, 0, 0, 0.2);
     border-right: 8px solid rgba(0, 0, 0, 0.2);
     text-align: center;
     cursor: pointer;
     color: #555;
     text-transform: lowercase;
 }

 .category-list li:nth-child(odd),
 .recipe-list li:nth-child(odd) {
      background: rgba(0, 0, 0, 0.1);
 }

 .category-list li:hover,
 .recipe-list li:hover {
     background: rgba(0, 0, 0, 0.2);
 }

  .category-list li i,
  .recipe-list li i {
      margin-left: 10px;
      font-size: 23px;
      position: relative;
      top: 1px;
  }

  .recipe-list {
      background: #77dd77;
      padding: 10px 0;
      margin: 0;
      display: none;
  }

  .recipe-list li {
      color: #555;
  }

  .category-list li.active,
  .recipe-list li.active {
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
  }

  .slide-3-tbl,
  .slide-4-tbl,
  .slide-5-tbl,
  .slide-6-tbl{
      width: 100%;
      display: table;
      min-height: 400px;
      background: #91c8ff;
  }

  .slide-3-tbl > div,
  .slide-4-tbl >div {
      display: table-cell;
      vertical-align: middle;
  }

  .slide-3-tbl-left,
  .slide-4-tbl-left {
      width: 40%;
  }

  .slide-3-tbl-left span,
  .slide-4-tbl-left span {
      display: block;
      margin: 25px;
      font-size: 30px;
      color: #fff;
      text-align: center;
  }

  span.mostly-grams,
  span.mostly-calories {
      font-size: 50px;
      text-transform: uppercase;
  }

  #slide-3-chart,
  #slide-4-chart {
      margin-top: 40px;
  }

  .legend {
      background: #fff;
      text-align: center;
      max-width: 300px;
      margin: 40px auto;
  }

  .legend-title {
      font-weight:bold;
      line-height: 40px;
      font-size: 18px;
      margin-bottom: 10px;
      text-align: center;
      border-bottom: 1px solid #ccc;
  }

  .legend-content {
      padding: 0 0 20px 0;
  }

  .legend-content div {
      min-width: 90px;
      display: inline-block;
      text-align: center;
      min-height: 75px;
      margin-bottom: 20px;
      vertical-align: top;
  }

  .legend-content div span:first-child {
      display: block;
      width: 75%;
      margin: 0 auto 10px auto;
      height: 20px;
      border: 1px solid #555;
  }

  .legend-content div span:last-child {
      font-size: 18px;
      font-weight: bold;
      line-height: 18px;
      display: block;
      margin-top: 6px;
  }

  .legend-fat span:first-child {
      background: #d5001d;
  }

  .legend-protein span:first-child {
      background: #8e5ea2;
  }

  .legend-carb-sugar span:first-child {
      background: #60bf81;
  }

  .legend-carb-starch span:first-child,
  .legend-carbs span:first-child {
      background: #2c9254;
  }

  .legend-carb-fiber span:first-child {
      background: #4d912b;
  }

  .slide-5-tbl,
  .slide-6-tbl {
      padding: 100px 0;
      min-height: 100px;
  }

  .slide-5-tbl > div,
  .slide-6-tbl > div {
      display: table-row;
      height: 80px;
  }

  .slide-5-tbl > div > div,
  .slide-6-tbl > div > div {
      display: table-cell;
      text-align: center;
      font-size: 40px;
      vertical-align: middle;
      border: 1px dashed rgba(0, 0, 0, 0.1);
      color: #fff;
  }

  .slide-5-tbl > div > div:first-child,
  .slide-6-tbl > div > div:first-child {
      text-align: right;
      padding-right: 20px;
  }

  .slide-5-tbl .title,
  .slide-6-tbl .title {
      font-weight: bold;
      color: rgba(0,0,0,0.6);
      text-transform: lowercase;
  }

  .slide-5-tbl .mostly {
      color: #c60001;
      font-weight: bold;
      font-size: 45px;
  }

  .slide-7-box{
      width: 100%;
      min-height: 400px;
      background: #91c8ff;
  }

  .glucose-1, .glucose-2, .glucose-3, .glucose-4{
      font-size: 30px;
      text-align: center;
      color: #fff;
  }

  #please_wait{
      background: rgba(255,255,255,0.75);
      position:fixed;
      width: 100%;
      height: 100%;
      top:0;
      left:0;
  }

  #please_wait div{
      margin-top: 75px;
      font-size: 40px;
      font-weight: bold;
      background: #fff;
      display: block;
      padding: 50px 25px;
      border: 1px solid #000;
      text-align: center;
      margin: 75px auto;
      width: 300px;
  }

.text-string-1{
    text-align: center!important;
    background: rgba(0,0,0,0.1);
    font-weight: bold
}

.text-string-2{
    text-align: center!important;
    background: rgba(0,0,0,0.2);
}

.glucose-1{
    margin: 10px;
    padding: 10px;
    background: rgba(0,0,0,0.1);
}
.glucose-2{
    margin: 10px;
    padding: 10px;
    background: rgba(0,0,0,0.2);
}
.glucose-3{
    margin: 10px;
    padding: 10px;
    background: rgba(0,0,0,0.3);
}
.glucose-4{
    margin: 10px;
    padding: 10px;
    background: rgba(0,0,0,0.4);
}


.glucose-1 span,
.glucose-2 span,
.glucose-3 span,
.glucose-4 span{
    background: #d5001d;
    padding: 10px 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.slide-7-box{
    padding: 10px 0;
    min-height:auto;
}

.food_desc_slide{
    display: none;
}

.food_desc_slide ul{
    margin: 0;
    padding: 0;
}

.food_desc_slide ul li{
    list-style: none;
}

.recipe-name > div {
    float: right;
    font-size: 14px;
    color: #c60001;
}

.recipe-name > div span{
    display: block;
}


.extra-btns {
    width: 100%;
    max-width: 900px;
    margin: auto;
    font-family: 'Bangers';
    text-align: right;
}

.extra-btns a {
    display: inline-block;
    color: #fff931;
    background: #c60001;
    padding: 15px 20px;
    margin: 0 0 5px 0;
    line-height: 30px;
    font-size: 30px;
    font-weight: normal !important;
    text-decoration: none;
}


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

    #slide-1 > .title > div, #slide-2 > .title > div, #slide-3 > .title > div, #slide-4 > .title > div, #slide-5 > .title > div, #slide-6 > .title > div, #slide-7 > .title > div {
        font-size: 20px;
        text-align: center;
    }

    .slide-3-tbl-left, .slide-4-tbl-left,
    .slide-3-tbl-right, .slide-4-tbl-right {
        width: 100%;
        display: block!important;
    }

    .recipe-name > div {
        float: none;
        text-align: right;
        margin: 10px 0;
    }

    .slide-5-tbl > div:first-child {
        display: none;
    }

    .slide-5-tbl, .slide-6-tbl {
        padding: 0;
    }

    .slide-5-tbl > div, .slide-6-tbl > div {
        display: block;
        height: auto;
        margin: 15px;
    }

    .slide-5-tbl > div > div, .slide-6-tbl > div > div {
        display: block;
        font-size: 30px;
    }

    span.mostly-grams, span.mostly-calories {
        font-size: 30px;
        text-transform: uppercase;
    }

    .slide-5-tbl .mostly {
        font-size: 30px;
    }

    .slide-5-tbl > div > div:first-child, .slide-6-tbl > div > div:first-child{
        text-align: center;
    }

    .glucose-1, .glucose-2, .glucose-3, .glucose-4 {
        font-size: 24px;
    }

    .glucose-1 span, .glucose-2 span, .glucose-3 span, .glucose-4 span {
        padding: 0 10px;
        font-size: 20px;
    }

    .slide-3-tbl-left span, .slide-4-tbl-left span{
        font-size: 25px;
    }
}