#mainButton {
   display: none;
}

.credit img {
   display: inline-block;
   margin-bottom: 20px;
}

.nav-btn {
   position: absolute;
   right: 0;
}

/* small phone*/
@media all and (min-width: 500px) {
   #modelNav.venn {
      display: flex;
   }
   #modelList.venn li.hide {
      display: none;
   }

   .calendar-table li b {
      padding: 0 20px 0 0;
      display: inline;
   }

   .prompt.activity .toggle .act-title {
      display: inline-block;
      margin-bottom: 0;
   }
}

/* Tablet menu */

@media all and (min-width: 768px) {
   nav {
      width: 250px;
      max-width: 250px;
      height: 100%;
      display: block;
      flex: 1 auto;
   }
   nav .menu {
      height: 600px;
   }

   #index .banner .group {
      height: 133px;
      flex-direction: row;
   }

   #index .banner .sprite1 {
      margin-left: 10px;
   }

   #index .banner .sprite1,
   #index .banner .sprite2 {
      display: block;
   }
   #index .banner #heading {
      text-align: left;
   }
   .main-breadcrumb {
      display: block;
   }
   #mobileBreadcrumb {
      display: none;
   }
   #mobileNav {
      display: none;
   }
   #menu .toggle {
      display: none;
   }
   #closeBox {
      display: none;
   }
   #content {
      flex: 1 auto;
      width: calc(100% - 250px);
   }
   #content.index {
      left: 0;
      width: 100%;
   }

   .index-buttons-cont {
      margin: 30px auto;
   }
   #index .index-buttons-cont a.plans {
      grid-column: 2;
      grid-row: 1 / 3;
   }
   #index .index-buttons-cont a.about {
      grid-column: 1;
      grid-row: 1;
   }
   #index .index-buttons-cont a.prep {
      grid-column: 1;
      grid-row: 2;
   }

   #about #content .flex-container .button {
      width: 40%;
      max-width: 250px;
   }
   .logo {
      flex: 1;
   }
   #content .plan {
      width: 50%;
   }
   #content .model-list-content ul {
      clear: none;
   }
   .collapsible-content img {
      float: left;
      margin-right: 20px;
   }
   #lessons #sidebar {
      width: 30%;
      padding-right: 20px;
   }
   #lessons #actContainer {
      width: 70%;
      padding-left: 30%;
   }
   #lesson .gallery {
      width: 70%;
   }
   #activityContainer {
      flex: 1 calc(100% - 270px);
      background: #fff;
      order: 2;
   }
   .activity-label.header {
      display: none;
   }
   #mobileDetails .activity-label {
      display: block;
   }
   #info {
      flex: 1 270px;
      order: 1;
      display: block;
   }
   #mobileVocab,
   .vocabHr {
      display: none;
   }
   #footer {
      order: 3;
   }
   #details {
      display: block;
   }
   #mobileDetails {
      display: none;
   }
   .prompt.activity .item {
      flex: 1 50%;
   }
   .prompt.activity .item.img {
      flex: 0 0 250px;
   }
   #lessonHeader {
      flex-flow: row wrap;
   }
   img.investigation-icon,
   #lessonHeader #heading {
      flex: 1 0 0;
   }
   #content #modelNav:not(.venn) {
      display: flex;
   }
   #content #modelList,
   #content #modelList.number {
      padding: 20px 0;
   }
   #modelList.number .icon {
      display: none;
   }
   #content .model-list-content ul {
      display: table;
   }
   #modelList li .model-list-content li {
      margin-left: 1em;
   }

   #modelList img {
      float: left;
      margin-bottom: 20px;
   }
   #modelList .model-list-item:not(.active) {
      display: none;
   }
   #modelList li,
   #modelList li.hide {
      margin: 10px auto;
   }
   #modelList li.hide {
      position: absolute;
      top: -9999px;
      left: -9999px;
   }
   #modelList li {
      position: relative;
   }

   #modelList.circle .model-list-item {
      border: 3px solid #6db8ec;
      padding: 20px;
   }

   #modelList.circle .model-list-item hr {
      display: block;
   }

   #modelList.number li,
   #modelList.number li.hide {
      width: 100%;
      padding: 20px;
      margin: 10px auto;
   }
   #modelNav.arrow {
      position: relative;
   }

   img.investigation-icon {
      margin: 0 20px 0 0;
   }
   #footer .group {
      display: flex;
   }

   #footer .credit  {
      flex: 0 0 68%;
   }
   .credit p {
      margin-top:0;
   }
   #footer ul {
      flex: 0 0 30%;
   }

   .logo {
      order: 0;
   }
   .item.active {
      order: 1;
   }
   #menu .toggle {
      display: none;
   }
   #content #lessons.about .plan {
      width: 33%;
   }
}