@media (max-width: 1500px) {

  .navigation ul li a i {
      width: 37px;
      height: 37px;
      margin: 0 auto 15px;
  }

  .navigation ul li a {
      padding: 20px 7px;
  }

  .container {
      max-width: 1190px;
  }

  .header .brand a img {
      max-width: 340px;
  }

  #puzzle-content h2:first-child, #midcolheader h2, #aboutcontent h2 {
      font-size: 2.9rem;
      line-height: 1.1;
  }

  main#page-wrapper #top .container .container.inline {
      -webkit-flex: 0 0 calc(100% - 450px);
      -ms-flex: 0 0 calc(100% - 450px);
      flex: 0 0 calc(100% - 450px);
      max-width: calc(100% - 450px);
  }
    #puzzle-content #grid #gridcol1, #puzzle-content #grid #gridcol2 {
        max-width: 250px;
    }

  #aboutcontent p + #grid {
      margin-top: 30px;
  }

  #puzzle-content #grid #gridcol2 table tr:nth-child(1) td a {
      font-size: 1.5rem;
  }

}

@media (max-width: 1280px) {



  .navigation ul li a i {
      width: 35px;
      height: 35px;
      margin: 0 auto 15px;
  }
  .navigation ul {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
      justify-content: flex-start;
  }


  .navigation ul li {
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .navigation ul li a {
      line-height: 1.1;
      display: block;
      width: 100%;
  }

  .container {
      max-width: 875px;
  }


    #puzzle-content #grid #gridcol1, #puzzle-content #grid #gridcol2 {
        max-width: 48%;
        -webkit-flex: 0 0 48%;
        -ms-flex: 0 0 48%;
        flex: 0 0 48%;
    }

    .header .container, .footer .container {
        display: block;
        text-align: center;
    }

    .header .ad-section div:first-child {
        margin: 0 auto !important;
    }

    .header {
        padding-bottom: 20px;
    }

    .header .brand {
        margin: -10px 0 10px;
    }

    main#page-wrapper #top .container .container.inline {display: block;}

    main#page-wrapper #top .container .container.inline ul.social {
        justify-content: flex-start;
        margin: 15px 0 0;
    }

    main#page-wrapper #top .container .container.inline ul.social li:first-child {
        margin: 0;
    }

}

@media (max-width: 950px) {
    #midcolheader h2 + p {
        margin-top: 0px;
    }

  .navigation ul li a {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
  }

.navigation ul li a i {
    margin: 0;
    width: 25px;
    height: 25px;
}

  main#page-wrapper .bg-white {
      padding: 40px 30px;
  }

  .breadcrumb {
      margin: -15px 0 30px;
  }
  .header {
    padding-bottom: 3px;
  }

  .header .brand {
    margin: -10px 0 0;
}
.the-sheet a img {
    max-width: 95%;
}
  .header .ad-section {
    display: none;
  }

div#gridcol3, div#sheet-downloadable,
  .navigation ul li {
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
  }

  .navigation ul li:last-child a {
      border-bottom: 0;
  }

  .navigation ul li a {
      padding: 15px;
      border-bottom: 1px solid rgba(255,255,255,0.125);
  }

  .navigation {
      height: 308px;
      overflow-y: scroll;
      display: none;
  }

  a.nav-open {
    background: var(--dark);
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 20px 13px 13px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 2.5rem;
}

a.nav-open i {
    position: relative;
    top: -3px;
    margin-right: 10px;
}


  main#page-wrapper #top .container .container.inline {
      order: -12;
      max-width: 100%;
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
  }

  main#page-wrapper #top .container {
      justify-content: center;
  }

  #puzzle-content #grid #gridcol1, #puzzle-content #grid #gridcol2 {
      margin: 0 0 30px;
  }

  main#page-wrapper #top .container .ads {
    margin: 0 5px;
  }

  .copyright .container {
      display: block;
      text-align: center;
  }

  .copyright .container ul.social {
      justify-content: center;
      margin: 25px 0 0;
  }

  .footer section p {
      font-size: 1.7rem;
  }

  .footer section {
      text-align: center;
  }

  .footer ul.menu {
      display: block;
      text-align: center;
  }

  .footer ul.menu li {
      padding: 0;
      margin: 0;
      display: block;
  }

  .footer ul.menu li a {
      display: block;
      text-align: center;
      margin: 10px 0 0;
      padding: 10px 0 0;
      border-top: 1px solid rgba(255,255,255,0.125);
  }

  .footer ul.menu li:first-child a {
      border: 0;
  }

  .footer ul.menu li:last-child {
      margin: 30px 0 0;
  }

  #aboutcontent > p {
      text-align: left;
      margin: 0;
  }

  main#page-wrapper #top .container section#puzzle-content {
      margin: 40px 0 0;
  }

  #midcolheader {
      margin: 35px 0 33px;
      padding: 35px 0 0;
  }

  #aboutcontent > p {
      text-align: left;
      margin: 0;
  }

  main#page-wrapper #top .container section#puzzle-content {
      margin: 40px 0 0;
  }

  #midcolheader {
      margin: 35px 0 33px;
      padding: 35px 0 0;
  }

  #puzzle-content h2:first-child, main#page-wrapper #top .container section#puzzle-content b:first-child, #midcolheader h2, #aboutcontent h2, #aboutcontent b {
      margin: 0 0 6px;
  }

  #midcolheader h2 + p {
      font-size: 1.5rem;
  }

}

@media (max-width: 500px) {
    #puzzle-content h1:first-child, #puzzle-content h2:first-child, #midcolheader h2, #aboutcontent h2, .worksheettextlink {
        font-size: 2.5rem;
        line-height: 1.3;
    }
    main#page-wrapper #top form input[name="q"] {
        width: calc(100% - 58px) !important;
    }
  #aboutcontent > p {
      text-align: left;
      margin: 0;
  }

  #puzzle-content #grid #gridcol1, #puzzle-content #grid #gridcol2 {
      max-width: 100%;
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
  }

  .header .brand a img {
      max-width: 230px;
  }

}