/* Text Elements */

h2 {
  margin-bottom: 0;
  color: #fb6266;
  font-size: 24px;
  font-weight: bold;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}

h1.home-subsection-heading {
  margin-bottom: .5rem;
  color: #000080;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

h2.home-subsection-heading {
  margin-bottom: .5rem;
  color: #000080;
  text-align: center;
}

h2.all-caps {
  text-transform: uppercase;
}

h2#math-games-list-heading {
  font-size: 48px;
}

h3.home-news-item-name {
  margin-bottom: 0;
  color: #000080;
  font-size: 20px;
}

h4.home-card-game-name {
  margin-bottom: 0;
  width: 100%;
  color: #00f;
  font-size: 26px;
}

p.paragraph.footer-text {
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

p.paragraph.section-subtitle {
  color: #000080;
  text-align: center;
  font-size: 24px;
}

p.paragraph.all-caps {
  text-transform: uppercase;
}

p.paragraph.home-card-description {
  margin-bottom: 1px;
  color: #000080;
}

p.paragraph.home-skills-list-item {
  margin-bottom: 8px;
  color: #000080;
  font-weight: 700;
}

span.text-element#header-search-text {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  line-height: 27px;
}

span.text-element.home-card-skill-level {
  width: 100%;
  color: #bf0021;
  font-size: 18px;
}

a.link-text.footer-link {
  margin: 8px 16px;
  padding: 8px 16px;
  color: #87c4f4;
  text-align: center;
  font-size: 16px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1.5;
}

a.link-text {
  display: block;
  color: #03315e;
}

a.link-text.section-navigation-link {
  margin-right: 8px;
  margin-left: 8px;
  padding: 4px 8px;
  color: #fff;
  font-size: 18px;
}

a.link-text.home-grades-link {
  margin-right: 8px;
  margin-left: 8px;
  padding-right: 8px;
  padding-left: 8px;
  color: #00f;
  text-decoration: underline;
  font-weight: 700;
  font-size: 20px;
}

a.link-text.page-break-link {
  color: #fff;
  text-align: right;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
}

a.link-text.page-break-link2 {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 48px;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}

/* Interaction Elements */

form.form-container#google-custom-search-form {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;

  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}

input[type=text]#cse-input {
  margin-right: 6px;
  margin-bottom: 0;
}

/* Layout Elements */

body {
  background-color: #03315e;
  background-image: url('../img/backgrounds/plus-sign-background.png');
  background-attachment: scroll;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  background-repeat: repeat-x;

  background-blend-mode: normal;
}

.container.credits {
  padding-top: 40px;
  padding-bottom: 60px;
}

.container#top-nav-shade {
  padding-top: 4px;
  padding-right: 16px;
  padding-left: 16px;
  height: 60px;
  background-image: url('../img/backgrounds/mathnook-topband.png');
  background-attachment: scroll;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  background-repeat: repeat-x;

  background-blend-mode: normal;
}

.container#section-header {
  background-image: url('../img/backgrounds/bg-cityscape-full.jpg');
  background-attachment: scroll;
  background-position: left -72px;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  background-repeat: repeat-x;

  background-blend-mode: normal;
}

.container#header-mid-container {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: justify;
  -ms-flex-align: end;
  height: 192px;

  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
          align-items: flex-end;
}

.container#navigation-section {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: distribute;
  clear: both;
  -ms-flex-align: center;
  margin-top: 34px;
  padding-right: 16px;
  padding-left: 16px;
  min-height: 50px;
  background-color: #7a4d15;

  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.container#section-ad1 {
  padding: 16px;
  background-color: #fffde9;
}

.container#cse-branding-right {
  padding: 8px 4px 0;
  background-color: #fff;
  color: #000;
}

.container#searchleft {
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;
}

.container#section-featured-games {
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: #fffde9;
}

.container#featured-games-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.container#section-main-games {
  padding: 16px;
  border-top: .3125rem solid #7c110f;
  background-color: #fffde9;
}

.container#main-games-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.container#grade-levels-container {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: distribute;
  -ms-flex-align: center;

  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.container#grade-levels-container2 {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: distribute;
  -ms-flex-align: center;

  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.container.home-category-container {
  margin-bottom: 32px;
}

.container#page-break-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.container#mid-lower-ad {
  padding: 16px;
  background-color: #fffde9;
}

.container#popular-games-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.container#popular-math-games-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: distribute;
  -ms-flex-align: center;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
          justify-content: space-around;
}

.container#math-games-list-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.container#section-math-games-list {
  padding: 16px;
  background-color: #fffde9;
}

.container#section-popular-games {
  padding: 16px;
  background-color: #fffde9;
}

.container#section-page-break {
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: #7c110f;
}

.container#section-google-search {
  padding: 16px;
  background-color: #fff;
}

.container#section-share {
  padding: 16px;
  background-color: #fffde9;
}

.container#section-share-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.container#section-page-break-2 {
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: #7c110f;
}

.container#page-break-content-2 {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.container#lower-ad {
  padding: 16px;
}

.container#section-skills-key {
  padding: 16px;
  background-color: #fffde9;
}

.container#skills-key-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.container#section-mathnook-news {
  padding: 16px;
  background-color: #fffde9;
}

.container#mathnook-news-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.container#section-sidebar-ad {
  display: none;
  padding: 16px;
  background-color: #fffde9;
}

.container.home-game-card-img-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  margin-bottom: 8px;
  max-width: 100px;
  width: 100%;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.home-layout-section {
  clear: both;
}

.container#section-footer-content {
  padding: 16px 16px 10px;
  background-color: #001529;
  background-attachment: scroll;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  background-repeat: repeat-x;

  background-blend-mode: normal;
}

.container.footer-section {
  margin-bottom: 16px;
}

.container#footer-links {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: distribute;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
          justify-content: space-around;
}

.container#section-main-content-wrapper {
  background-color: #fffde9;
}

.link-container#search-container {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;

  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}

.link-container.home-game-card {
  margin-top: 3px;
  margin-bottom: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  max-width: 100%;
  width: 100%;
  border-bottom: .125rem solid #000;
}

div.responsive-picture.site-name {
  margin-right: auto;
  margin-left: auto;
  max-width: 322px;
}

div.responsive-picture.mascot-dog {
  display: none;
}

div.responsive-picture.director-image {
  display: none;
}

button.button {
  margin-bottom: 0;
  padding: .5em .75em;
  border-width: .0625rem;
  border-color: #21a4e7;
  border-radius: 6px;
  background-color: #03315e;
}

span.glyph#header-search-icon {
  margin-right: 6px;
  color: #fff;
  font-size: 19px;
}

.html-element#ad-top {
  min-height: 90px;
}


p.paragraph.ad-notice {
  margin-top: 1px;
  margin-bottom: 4px;
  color: #989a9c;
  text-align: center;
  font-size: 10px;
  font-family: Verdana, Geneva, sans-serif;
}

.html-element#cse-style-element {
  height: 0;
}

.html-element.home-category-container {
  margin-bottom: 32px;
}

.html-element#mid-lower-ad-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

a.responsive-picture.home-popular-game-img-link {
  margin-right: 8px;
  margin-bottom: 16px;
  margin-left: 8px;
  border-radius: 8px;
}

.html-element#lower-ad-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.html-element#popular-games{
  margin-right: 20px;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.html-element#sidebar-ad-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

div.responsive-picture#footer-logo {
  margin-right: auto;
  margin-bottom: 16px;
  margin-left: auto;
  max-width: 143px;
}

@supports (display: grid) {
  /* Text Elements */

  h4.home-card-game-name {
    grid-area: home-card-name;
  }

  span.text-element.home-card-skill-level {
    padding-top: 6px;
    text-align: right;
  }

  a.link-text {
    margin-bottom: 1rem;
  }

  a.link-text.footer-link {
    margin-bottom: .25rem;
  }

  /* Layout Elements */

  .container.credits {
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    width: 100%;
  }

  .container#section-header {
    grid-area: home-header;
  }

  .container.layout-section {
    grid-area: home-2-footer;
  }

  .container#section-footer-content {
    grid-area: home-footer;
  }

  .container#home-2-grid {
    display: grid;

    grid-template-columns: auto;
    grid-template-rows: repeat(3 , auto);
    grid-template-areas: 'home-header' 'home-main' 'home-footer';
  }

  .container.grid-parent-2 {
    grid-area: home-footer;
  }

  .container#section-pre-content {
    grid-area: home-main-pre;
  }

  .container#section-top-content {
    grid-area: home-main-top;
  }

  .container#section-mid-content {
    grid-area: home-main-mid;
  }

  .container#section-low-content {
    grid-area: home-main-low;
  }

  .container#section-main-content {
    grid-area: home-main;
  }

  .container.home-game-card-img-wrapper {
    margin-right: 8px;

    grid-area: home-card-img;
  }

  .container.home-game-card-desc-wrapper {
    grid-area: home-card-desc;
  }

  .link-container.home-game-card {
    display: grid;

    grid-template-columns: repeat(3 , auto);
    grid-template-rows: repeat(2 , auto);
    grid-template-areas: 'home-card-name home-card-name home-card-name' 'home-card-img home-card-desc home-card-desc';
  }

  div.responsive-picture.home-card-img {
    max-width: 100px;
  }
}

@media screen and (min-width: 40rem) {
  div.responsive-picture.mascot-dog {
    display: block;
    max-width: 70px;
  }

  div.responsive-picture.director-image {
    display: block;
    max-width: 90px;
  }

  div.responsive-picture.characters {
    margin-bottom: -13px;
  }

  @supports (display: grid) {
      /* Text Elements */

    a.link-text.footer-link {
      text-align: center;
    }
  }
}

@media screen and (min-width: 64rem) {
  /* Text Elements */

  h4.home-card-game-name {
    font-size: 20px;
  }

  p.paragraph.home-card-description {
    margin-bottom: 0;
  }

  span.text-element.home-card-skill-level {
    font-size: 14px;
  }

  /* Layout Elements */

  .container#section-sidebar-ad {
    display: block;
  }

  .container.sd-three-cols {
    grid-template-columns: repeat(3 , auto);
    grid-template-rows: auto;
  }

  .container#home-game-cards-list {
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
    -ms-flex-pack: justify;

    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
            justify-content: space-between;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }

  .link-container.home-game-card {
    padding-top: 0;
    padding-bottom: 0;
    max-width: 48.4%;
  }

  @supports (display: grid) {
      /* Text Elements */

    p.paragraph.home-card-description {
      grid-area: home-card-desc;
    }

    span.text-element.home-card-skill-level {
      padding-top: 5px;
      font-size: 16px;

      grid-area: home-card-skill;
    }

    a.link-text.page-break-link {
      margin-bottom: 0;
    }

    a.link-text.page-break-link2 {
      margin-bottom: 0;
    }

    a.link-text.section-navigation-link {
      margin-bottom: 0;
    }

    /* Layout Elements */

    .container#section-page-break-2 {
      display: -webkit-box;
      display: -webkit-flex;
      display:    -moz-box;
      display: -ms-flexbox;
      display:         flex;
      -ms-flex-align: center;
      margin-right: 32px;
      margin-left: 32px;
      padding: 24px 16px;
      border-radius: 40px;

      -webkit-box-align: center;
      -webkit-align-items: center;
         -moz-box-align: center;
              align-items: center;
    }

    .container#section-page-break {
      display: -webkit-box;
      display: -webkit-flex;
      display:    -moz-box;
      display: -ms-flexbox;
      display:         flex;
      -ms-flex-align: center;
      margin-right: 32px;
      margin-left: 32px;
      padding: 24px 16px;
      border-radius: 40px;

      -webkit-box-align: center;
      -webkit-align-items: center;
         -moz-box-align: center;
              align-items: center;
    }

    .container#section-main-content {
      display: grid;
      width: 100%;

      grid-template-columns: auto 1000px auto;
      grid-template-rows: auto;
      grid-template-areas: '. main-content .';
    }

    .container#section-main-content-wrapper {
      display: grid;

      grid-area: main-content;
      grid-template-columns: auto 250px;
      grid-template-rows: repeat(4 , auto);
      grid-column-gap: 8px;
      grid-template-areas: 'main-content-pre main-content-post' 'main-content-top main-content-post' 'main-content-mid main-content-post' 'main-content-low main-content-post';
    }

    .container#section-pre-content {
      grid-area: main-content-pre;
    }

    .container#section-top-content {
      grid-area: main-content-top;
    }

    .container#section-mid-content {
      grid-area: main-content-mid;
    }

    .container#section-low-content {
      grid-area: main-content-low;
    }

    .container#section-post-content {
      grid-area: main-content-post;
    }

    .link-container.home-game-card {
      grid-template-rows: 30px auto;
    }

    button.button {
      display: block;
      margin-right: auto;
      margin-left: auto;
    }
  }
}

@media screen and (min-width: 75.0625rem) {
  @supports (display: grid) {
      /* Layout Elements */

    .container#section-main-content {
      grid-template-columns: auto 1200px auto;
    }
  }
}