@import url("https://use.typekit.net/phx2elh.css");
:root {
  --space-xxl: 128px;
  --space-xl: 50px;
  --space-l: 40px;
  --space-m: 27px;
  --space-s: 16px;
  --space-xs: 10px;
  --space-xxs: 4px;
  --size-xxxxl: 50px;
  --size-xxxl: 40px;
  --size-xxl: 32px;
  --size-xl: 25px;
  --size-l: 20px;
  --size-m: 18px;
  --size-s: 16px;
  --size-xs: 12px;
  --size-xxxxl-mobile: 30px;
  --size-xxxl-mobile: 25px;
  --size-xxl-mobile: 22px;
  --size-xl-mobile: 20px;
  --size-l-mobile: 18.5px;
  --size-m-mobile: 16px;
  --size-s-mobile: 14px;
  --size-xs-mobile: 12px;
  --max-content-width: 1250px;
  --max-post-content-width: 700px;
  --grid-gap: 20px;
  --header-mobile-height: 75px;
  --section-vertical-padding: 4rem;
  --section-horizontal-padding: 6rem;
  --base-font-size: 1.8rem;
  --post-spacing: var(--space-l); }

:root {
  --blue-sky: #eceef7;
  --blue-mymaths: #172e50;
  --grey-light: #f7f7f7;
  --amber: #fea800;
  --color-pink: #db0066;
  --white: #ffffff;
  --aquamarine: #84fab0;
  --blue-electric: #89f7fe;
  --blue-baby: #6db5ff;
  --periwinkle: #d1c4fc;
  --color-lime: #c4f683;
  --azure: #caeded;
  --cream: #f6f588;
  --dark-blue: #172e50;
  --light-blue: #9bcfe7;
  --color-blue-pastel: #d6edf7;
  --color-lime: rgb(142, 196, 121);
  --color-green: rgb(77, 172, 143);
  --blue-royal: rgb(75, 137, 198);
  --color-yellow: rgb(252, 191, 32);
  --color-yellow-lighter: #fde4a9;
  --red: rgb(231, 45, 66);
  --redAA: rgb(231, 28, 66);
  --dark-red: #c0172b;
  --purple: #942a86;
  --purple-light: rgba(148, 42, 134, 0.18);
  --color-pink: #e387b7;
  --color-green--lighter: #e0efdb;
  --home-banner-bg-colour: var(--light-blue);
  --secondary-banner-bg-colour: var(--color-blue-pastel);
  --primary-banner-bg-colour: var(--color-yellow-lighter);
  --banner-bg-colour-green: var(--color-green);
  --banner-bg-colour-yellow: var(--color-yellow-lighter);
  --banner-bg-colour-pink: var(--color-pink);
  --banner-bg-colour-purple: var(--purple);
  --banner-bg-colour-lime: var(--color-lime);
  --banner-bg-colour-purple--light: var(--purple-light);
  --primary-color: var(--amber);
  --secondary-color: var(--color-lime);
  --parents-color: var(--color-green);
  --blog-whats-new-color: var(--color-green);
  --blog-primary-color: var(--purple);
  --blog-secondary-color: var(--color-lime);
  --blog-the-team-color: var(--color-lime);
  --blog-everyone-color: var(--color-blue-pastel);
  --tip-bg-color: var(--light-blue);
  --tip-color: white;
  --note-bg-color: var(--color-yellow);
  --note-color: white;
  --heading-divider-height-xs: 7px;
  --heading-divider-height-m: 12px;
  --radius-default: 15px; }

@media (max-width: 1023px) {
  :root {
    --section-vertical-padding: 2rem;
    --base-font-size: 1.6rem; } }
@media (max-width: 700px) {
  :root {
    --section-vertical-padding: 2rem;
    --section-horizontal-padding: 2rem;
    --base-font-size: 1.5rem;
    --post-spacing: 2rem; } }
.blog-index__article, .try-mymaths-content-block {
  position: relative;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
  box-shadow: 0 0px 2px #cecece;
  transition: all 0.5s ease; }
  .blog-index__article:hover, .try-mymaths-content-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 0px 8px #cecece; }

.posts-text-container, .try-text-container {
  background-color: white; }

.blog-index__article h2, .try-text-container h2 {
  position: relative;
  margin-bottom: 4rem;
  font-size: 2rem; }
  .blog-index__article h2:after, .try-text-container h2:after {
    content: " ";
    left: 0;
    bottom: -25px;
    position: absolute;
    width: 70px;
    height: 12px;
    border-radius: 30px; }
.blog-index__article p:not(.stylised), .try-text-container p:not(.stylised) {
  font-size: 1.6rem; }
.blog-index__article p:not(.stylised), .try-text-container p:not(.stylised) {
  margin-bottom: 2em; }

.posts-image-container {
  margin-bottom: 2rem;
  display: block;
  background-image: url("/images/mymaths-logo-circle-black.svg");
  background-repeat: no-repeat;
  background-size: 50px 50px;
  background-position: center center;
  border-radius: var(--radius-default); }

@media (max-width: 700px) {
  .blog-index__article, .try-mymaths-content-block {
    border: 0;
    position: relative;
    border-radius: 0; } }
* {
  margin: 0;
  box-sizing: border-box; }

::selection {
  background: var(--amber); }

body {
  min-width: 320px; }

html {
  font-size: 10px;
  line-height: 1.9;
  font-family: museo-sans-rounded, sans-serif; }

#wrapper {
  overflow: auto; }

.content-container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  width: 100%; }

#oupcookiepolicy_message {
  font-size: 14px; }

#maintenance {
  font-size: 1.6rem; }
  #maintenance.maintenance--red {
    background-color: #e71c42;
    background-color: var(--redAA);
    color: #ffffff; }
  #maintenance.maintenance--amber {
    background-color: #fcbf20;
    background-color: var(--color-yellow);
    color: #172e50;
    color: var(--dark-blue); }
  #maintenance.maintenance--color-green {
    background-color: #4dac8f;
    background-color: var(--color-green);
    color: #172e50;
    color: var(--dark-blue); }

p,
li,
blockquote,
a.button,
blockquote cite {
  font-size: var(--base-font-size);
  max-width: 600px;
  font-weight: 300;
  line-height: 1.6; }

cite {
  display: block;
  font-style: normal;
  opacity: 0.8; }

p {
  margin-bottom: 1em; }

h1 {
  font-size: calc(var(--base-font-size) * 1.8);
  margin-bottom: 0.2em;
  line-height: 1.3;
  font-weight: 500; }

h2 {
  margin-bottom: 0.7em;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.5; }

h3 {
  font-size: 3rem;
  line-height: 1.5; }

h4 {
  font-size: 2rem;
  margin-bottom: 1em; }

.stylised {
  margin-bottom: 1.5em;
  letter-spacing: 1.5px;
  font-size: 1.5rem;
  max-width: 600px;
  font-weight: 300; }

a {
  color: inherit; }
  a:focus {
    background-color: var(--amber);
    outline: 3px solid var(--amber);
    color: var(--blue-mymaths); }

small {
  opacity: 0.7; }

.banner--home {
  background-color: var(--home-banner-bg-colour);
  background-image: url(/assets/artwork/2020/home-banner-bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 var(--section-horizontal-padding);
  color: var(--dark-blue); }
  .banner--home .content-container {
    height: 100%; }
  .banner--home .banner__inner {
    display: grid;
    grid-template-columns: minmax(300px, 2fr) minmax(100px, 1fr);
    grid-template-rows: 100%;
    grid-column-gap: 40px;
    min-height: 75vmin; }
  .banner--home .banner__column {
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
    padding: 4rem 0; }
  .banner--home .banner__column__text h3,
  .banner--home .banner__column__text p,
  .banner--home .banner__column__text .button-secondary {
    background-color: var(--home-banner-bg-colour); }
  .banner--home .banner-robot__container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: end;
    overflow: hidden; }
    .banner--home .banner-robot__container img.banner-robot {
      height: 90%;
      max-height: 40vh;
      min-height: 300px;
      width: 100%; }
  .banner--home h1 {
    font-size: 4.5rem;
    max-width: 800px; }

.home-banner-buttons {
  padding-top: 3rem;
  display: flex; }
  .home-banner-buttons .button {
    margin-right: 2rem; }

@media (max-width: 700px) {
  .banner--home {
    height: auto;
    padding: 4rem 2rem;
    background-image: none; }
    .banner--home h1 {
      font-size: var(--size-xxl); }
    .banner--home .button {
      display: inline; }
    .banner--home .banner__inner {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto; }
    .banner--home .banner__column__left {
      order: 2;
      padding: 0;
      margin: auto; }
    .banner--home .banner__column__right {
      order: 1;
      padding: 0;
      margin: auto; }
    .banner--home .banner-robot__container {
      position: relative;
      margin: 0 auto 2rem;
      display: flex;
      justify-content: end;
      overflow: hidden;
      background-color: white;
      width: 120px;
      height: 120px;
      border: 3px solid;
      border-radius: 50%; }
      .banner--home .banner-robot__container img.banner-robot {
        top: -58px;
        position: absolute;
        left: -11px;
        width: auto;
        width: 100%; }

  .home-banner-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem; }
    .home-banner-buttons .button {
      margin-right: 0; } }
@media (max-width: 360px) {
  .home-banner-buttons {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 2rem; }
    .home-banner-buttons .button {
      margin-right: 0; } }
.banner-content__inner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center; }

.banner-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: left;
  text-align: left;
  min-height: 75vmin;
  margin: 0 var(--section-horizontal-padding); }
  .banner-container--grey {
    background-color: var(--grey-light); }
  .banner-container--blue {
    background-color: var(--blue-mymaths);
    color: white; }
  .banner-container h3 {
    position: relative;
    margin-bottom: 3em; }
    .banner-container h3:before {
      content: "";
      position: absolute;
      top: 3em;
      height: var(--heading-divider-height-m);
      width: var(--heading-divider-height-m);
      border-radius: 50%;
      background-color: #00000059;
      left: 48px;
      z-index: 2; }
    .banner-container h3:after {
      content: " ";
      background-color: white;
      left: 0;
      top: 3em;
      position: absolute;
      width: 60px;
      height: var(--heading-divider-height-m);
      border-radius: 20px;
      right: 0; }

.banner-page-layout--in-primary-schools .banner {
  background-color: var(--primary-banner-bg-colour);
  color: var(--blue-mymaths);
  background-image: url(/assets/artwork/2020/primary-banner-bg.svg);
  background-repeat: no-repeat;
  background-size: cover; }
  .banner-page-layout--in-primary-schools .banner .banner-content__inner h3 span,
  .banner-page-layout--in-primary-schools .banner .banner-content__inner p,
  .banner-page-layout--in-primary-schools .banner .banner-content__inner .button-secondary {
    background-color: var(--primary-banner-bg-colour); }
  .banner-page-layout--in-primary-schools .banner h3:before {
    background-color: #e14a3a; }
  .banner-page-layout--in-primary-schools .banner h3:after {
    content: " ";
    background: var(--amber);
    background: linear-gradient(90deg, #fcbf20 0%, #e77719 100%); }

.banner-page-layout--in-secondary-schools .banner,
.banner-page-layout--overview .banner {
  background-color: var(--secondary-banner-bg-colour);
  color: var(--blue-mymaths);
  background-image: url(/assets/artwork/2020/secondary-banner-bg.svg);
  background-repeat: no-repeat;
  background-size: cover; }
  .banner-page-layout--in-secondary-schools .banner .banner-content__inner h3 span,
  .banner-page-layout--in-secondary-schools .banner .banner-content__inner p,
  .banner-page-layout--in-secondary-schools .banner .banner-content__inner .button-secondary,
  .banner-page-layout--overview .banner .banner-content__inner h3 span,
  .banner-page-layout--overview .banner .banner-content__inner p,
  .banner-page-layout--overview .banner .banner-content__inner .button-secondary {
    background-color: var(--secondary-banner-bg-colour); }
  .banner-page-layout--in-secondary-schools .banner h3:after,
  .banner-page-layout--overview .banner h3:after {
    content: " ";
    background: var(--color-green);
    background: linear-gradient(90deg, #9bcfe7 0%, #52ae93 100%); }

.try-mymaths .banner,
.try-myimaths .banner,
.parents .banner {
  background-color: var(--home-banner-bg-colour);
  background-image: url(/assets/artwork/2020/home-banner-bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--blue-mymaths); }
  .try-mymaths .banner .banner-content__inner h3 span,
  .try-mymaths .banner .banner-content__inner p,
  .try-mymaths .banner .banner-content__inner .button-secondary,
  .try-myimaths .banner .banner-content__inner h3 span,
  .try-myimaths .banner .banner-content__inner p,
  .try-myimaths .banner .banner-content__inner .button-secondary,
  .parents .banner .banner-content__inner h3 span,
  .parents .banner .banner-content__inner p,
  .parents .banner .banner-content__inner .button-secondary {
    background-color: var(--home-banner-bg-colour); }

.testimonials-layout .banner {
  background-color: var(--home-banner-bg-colour);
  background-image: url(/assets/artwork/2020/home-banner-bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--blue-mymaths); }

.campaign.campaign-green .site-header {
  background-color: var(--banner-bg-colour-green); }
.campaign.campaign-green .banner {
  background-color: var(--banner-bg-colour-green);
  color: var(--blue-mymaths); }

.campaign.campaign-pink .site-header {
  background-color: var(--banner-bg-colour-pink); }
.campaign.campaign-pink .banner {
  background-color: var(--banner-bg-colour-pink);
  color: var(--blue-mymaths); }
  .campaign.campaign-pink .banner h3:after {
    background-color: var(--dark-red); }

.campaign.campaign-lime .site-header {
  background-color: var(--banner-bg-colour-lime); }
.campaign.campaign-lime .banner {
  background-color: var(--banner-bg-colour-lime);
  color: var(--blue-mymaths); }
  .campaign.campaign-lime .banner h3:after {
    background-color: var(--blue-royal); }

.campaign.campaign-purple .site-header {
  background-color: var(--banner-bg-colour-purple); }
  .campaign.campaign-purple .site-header__inner a:not(.button) {
    color: #ffffff; }
  .campaign.campaign-purple .site-header .button-secondary {
    --fg-color: white;
    --bg-color: transparent;
    border: 2px solid;
    color: var(--fg-color);
    background-color: var(--bg-color); }
.campaign.campaign-purple .banner {
  background-color: var(--banner-bg-colour-purple);
  color: white; }
  .campaign.campaign-purple .banner h3:after {
    background-color: var(--red); }
.campaign.campaign-purple .section--copy-image--odd {
  background-color: var(--banner-bg-colour-purple--light); }

.campaign.campaign-yellow .site-header {
  background-color: var(--banner-bg-colour-yellow); }
.campaign.campaign-yellow .banner {
  background-color: var(--banner-bg-colour-yellow);
  color: var(--blue-mymaths); }
  .campaign.campaign-yellow .banner h3:after {
    background-color: var(--color-yellow); }

.campaign .banner-image {
  display: flex;
  justify-content: flex-end; }
  .campaign .banner-image img {
    width: 75%; }

.banner-page-layout--parents .banner h3:after {
  content: " ";
  background-color: var(--parents-color); }

.banner-skinny .banner-container {
  min-height: 40vmin; }
.banner-skinny .banner-content__inner h3,
.banner-skinny .banner-content__inner p,
.banner-skinny .banner-content__inner .button-secondary {
  background-color: var(--home-banner-bg-colour); }

.campaign .banner-content-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px; }

@media (min-width: 1023px) {
  h1 {
    font-size: 4.5rem;
    max-width: 800px; } }
@media (max-width: 700px) {
  .banner-page-layout--in-secondary-schools .banner,
  .banner-page-layout--in-primary-schools .banner,
  .testimonials-layout .banner,
  .parents .banner {
    background-image: none; }

  .campaign .banner-content-container {
    grid-template-columns: 1fr; }
  .campaign .banner-image {
    display: none; } }
.site-header {
  padding: 0 var(--section-horizontal-padding);
  z-index: 2;
  position: relative;
  background-color: white; }

.homepage .site-header,
.subscribe .site-header,
.testimonials-layout .site-header,
.try-mymaths .site-header,
.try-myimaths .site-header,
.parents .site-header {
  background-color: var(--home-banner-bg-colour); }

.primary-design .site-header {
  background-color: var(--primary-banner-bg-colour); }

.secondary-design .site-header {
  background-color: var(--secondary-banner-bg-colour); }

.site-header__inner {
  height: 160px;
  display: grid;
  grid-template-columns: minmax(100px, 300px) minmax(600px, auto) max-content;
  grid-gap: 5rem; }
  .site-header__inner .logo-container,
  .site-header__inner .login-button-container {
    display: flex;
    align-items: center; }
  .site-header__inner .login-button-container {
    justify-content: flex-end; }
  .site-header__inner a:not(.button) {
    color: var(--blue-mymaths); }

.logo {
  width: 100%; }

.logo-mobile,
.nav-primary--mobile {
  display: none; }

.campaign-purple #navHamburger span {
  background-color: white; }
.campaign-purple .logo .st0 {
  fill: #ffffff; }

@media (max-width: 1023px) {
  .logo {
    height: 50px; }

  .logo-mobile {
    display: block;
    height: 100%; }

  .logo-desktop {
    display: none; }

  .logo-container {
    padding: 0; }

  .site-header__inner {
    height: 100px;
    display: grid;
    grid-template-columns: minmax(40px, 50px) minmax(200px, 700px) auto;
    grid-gap: 3rem; } }
@media (max-width: 700px) {
  .site-header__inner {
    height: var(--header-mobile-height);
    grid-template-columns: 1fr 4fr 1fr; }
    .site-header__inner .login-button-container {
      justify-content: center; }

  .nav-primary {
    display: none; }

  .nav-primary--mobile {
    display: block; } }
.nav-primary {
  height: 100%; }
  .nav-primary ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0;
    padding-left: 0;
    height: 100%; }
    .nav-primary ul li {
      display: inline; }
      .nav-primary ul li.active {
        --active-border-height: 2px;
        margin-top: var(--active-border-height);
        border-bottom: var(--active-border-height) solid var(--color-pink); }
    .nav-primary ul a {
      text-decoration: none; }

@media (max-width: 700px) {
  .nav-primary ul {
    display: none; } }
.button {
  padding: 0.6em 1.5em;
  border-radius: 30px;
  text-decoration: none;
  font-size: var(--base-font-size);
  white-space: nowrap;
  text-align: center;
  line-height: 1.5; }

.button-primary {
  --fg-color: white;
  --bg-color: var(--blue-mymaths);
  border: 2px solid var(--blue-mymaths);
  background-color: var(--blue-mymaths);
  color: white; }
  .button-primary:focus {
    background-color: var(--amber);
    outline: 0;
    color: var(--blue-mymaths); }

.button-secondary {
  --fg-color: var(--blue-mymaths);
  --bg-color: transparent;
  border: 2px solid;
  color: var(--fg-color);
  background-color: var(--bg-color); }
  .button-secondary:focus {
    background-color: var(--amber);
    color: var(--fg-color);
    border-color: var(--fg-color); }

@media (max-width: 700px) {
  .button {
    display: block; }
    .button--not-mobile {
      border: 0;
      display: inline;
      white-space: normal;
      text-decoration: underline; } }
.logo a:focus {
  background-color: transparent; }

.using-mouse .logo a:focus {
  outline: none; }

.sixteen-by-nine {
  width: 100%; }

.posts-image-container {
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  width: 100%;
  position: relative;
  overflow: hidden; }
  .error404-page .posts-image-container {
    background-image: none;
    padding-top: 100%; }
  .posts-image-container img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    top: 0;
    position: absolute; }

img.contain {
  object-fit: contain;
  padding: 10px; }

img.cover {
  object-fit: cover; }

img.fill {
  object-fit: fill; }

img.scale-down {
  object-fit: scale-down; }

img.none {
  object-fit: none; }

@media (max-width: 700px) {
  .posts-image-container {
    margin-bottom: 0; }
    .error404-page .posts-image-container {
      padding-top: 56.25%; } }
.label-heading {
  font-size: var(--base-font-size);
  display: block;
  color: var(--blue-mymaths); }

.label-text-field__help {
  display: block;
  opacity: 0.8;
  color: black;
  margin-bottom: 0.5rem; }

.text-field-input {
  display: block;
  padding: 1rem;
  border: 2px solid var(--blue-mymaths);
  border-radius: 0;
  font-size: var(--base-font-size);
  width: 100%;
  -webkit-appearance: none; }
  .text-field-input:focus {
    outline: 3px solid var(--amber);
    transition: none;
    box-shadow: none;
    border: 2px solid; }

.input-container--error .text-field-input {
  display: block;
  padding: 1rem;
  border: 2px solid #FF0000; }

.error-message--login {
  border: 1px solid #FF0000;
  background-color: #FF000020;
  color: var(--blue-mymaths);
  margin-bottom: 2rem; }
  .error-message--login p {
    font-size: 1.6rem;
    padding: 1rem; }
    .error-message--login p:last-of-type {
      margin-bottom: 0; }

ul.check-list {
  padding-left: 0; }
  ul.check-list li {
    list-style: none;
    margin-bottom: 1em;
    margin-left: 4rem;
    position: relative; }
    ul.check-list li:before {
      content: " ";
      width: 21px;
      height: 21px;
      background-image: url(/images/tick.svg);
      position: absolute;
      top: 0.6rem;
      margin-left: -4rem; }

@media (max-width: 700px) {
  ul.check-list li:before {
    width: 20px;
    height: 20px; } }
.accordion {
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 2rem;
  background-color: var(--grey-light);
  border: 1px solid var(--blue-mymaths); }

.accordion:focus {
  outline: 2px solid var(--amber); }

.panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  margin-bottom: 2rem; }
  .panel.active-panel {
    border: 1px solid var(--blue-mymaths);
    border-top: 0;
    padding: 2rem; }

.testimonial-block {
  padding: 4rem;
  border-radius: 15px;
  background-color: var(--light-blue); }
  .testimonial-block--text-size-2 blockquote p {
    font-size: 120%; }
  .testimonial-block p:last-of-type {
    margin-bottom: 0; }
  .testimonial-block cite {
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: 2rem;
    align-items: center;
    font-weight: 600; }
  .testimonial-block .cite-image {
    border-radius: 50%;
    height: 60px;
    width: 60px;
    border: 1px solid #000000;
    object-fit: cover;
    object-position: -4px 9px;
    /* background-size: 202px 200px; */ }

@media (max-width: 700px) {
  .testimonial-block {
    border-radius: 0;
    padding: 2rem; }
    .testimonial-block--text-size-2 blockquote p {
      font-size: 100%; } }
table {
  width: 100%;
  margin-bottom: var(--post-spacing);
  border-spacing: 1; }

thead {
  background-color: var(--blue-mymaths);
  color: white;
  font-size: calc(10px + 1vmin); }
  thead th {
    font-weight: 100;
    padding: calc(10px + 2vmin); }

table.new-content tbody {
  font-size: calc(24px + 8vmin);
  background-color: var(--blog-whats-new-color);
  font-weight: 600; }

header .post-meta {
  margin-bottom: var(--post-spacing);
  border-bottom: 1px solid #dadada;
  padding-bottom: var(--post-spacing); }
  header .post-meta .stylised {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0;
    margin: 0; }

.post-meta {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr;
  grid-gap: 2rem; }
  .post-meta p {
    margin-bottom: 0;
    opacity: 0.8; }

.author-image {
  border-radius: 50%;
  height: 100px;
  width: 100px;
  border: 1px solid #dadada; }

.posts-text-container .post-meta {
  display: block;
  margin-bottom: 1rem; }
.posts-text-container .author-image {
  display: none; }

@media (max-width: 700px) {
  header .post-meta .stylised {
    justify-content: center;
    align-items: baseline;
    padding: 0;
    margin: 0;
    flex-direction: column;
    align-content: center; }

  .post-meta {
    display: grid;
    grid-template-columns: 75px 1fr;
    grid-template-rows: 1fr;
    grid-gap: 2rem; }
    .post-meta p {
      margin-bottom: 0;
      opacity: 0.8; }

  .author-image {
    border-radius: 50%;
    height: 75px;
    width: 75px;
    border: 1px solid #dadada; } }
.four-columns-container {
  margin: 0 var(--section-horizontal-padding); }

.four-columns-with-icons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  max-width: var(--max-content-width);
  margin: 0 auto;
  grid-column-gap: var(--section-horizontal-padding);
  padding: 10vmin 0; }
  .four-columns-with-icons__column {
    grid-template-rows: 1fr 1fr;
    margin-bottom: 2rem; }
    .four-columns-with-icons__column .icon {
      margin-bottom: 16px;
      width: 100px;
      height: 118px;
      display: flex; }
    .four-columns-with-icons__column h3 {
      font-size: 2rem;
      font-weight: 400;
      color: var(--blue-mymaths);
      margin-bottom: 0.5em; }
    .four-columns-with-icons__column p {
      font-size: var(--size-s); }

@media (max-width: 1023px) {
  .four-columns-with-icons {
    grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .four-columns-with-icons {
    grid-template-columns: 1fr; } }
.nav-primary--mobile-button {
  display: none; }

@media (max-width: 700px) {
  .nav-primary--mobile-button {
    display: inline; } }
.mobile-menu {
  width: 100vw;
  height: 100%;
  background-color: var(--blue-mymaths);
  z-index: 1;
  top: 0;
  display: none;
  position: fixed; }
  .mobile-menu a {
    color: white; }
    .mobile-menu a:focus {
      color: var(--blue-mymaths); }
  .mobile-menu .primary-mobile {
    display: grid;
    grid-auto-rows: auto;
    padding-top: var(--header-mobile-height);
    height: 100%; }
    .mobile-menu .primary-mobile li {
      border-bottom: 1px solid #ffffff21;
      display: flex;
      align-items: center;
      font-size: 5vmin;
      padding: 2vmin;
      max-width: 100%; }
      .mobile-menu .primary-mobile li:last-of-type {
        border-bottom: 0; }
      .mobile-menu .primary-mobile li a {
        text-decoration: none;
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center; }

.mobile-menu--open {
  display: block; }

.mobile-header--sticky {
  width: 100%;
  position: fixed;
  top: 0; }

.hamburger-container {
  justify-content: flex-end;
  align-items: center;
  display: none; }

#navHamburger {
  background-color: transparent;
  border: 0;
  width: 30px;
  height: 24px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  right: 0;
  z-index: 4; }
  #navHamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #000066;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out; }
    #navHamburger span:nth-child(1) {
      top: 0px; }
    #navHamburger span:nth-child(2), #navHamburger span:nth-child(3) {
      top: 10px; }
    #navHamburger span:nth-child(4) {
      top: 20px; }
  #navHamburger.open span {
    background-color: black; }
    #navHamburger.open span:nth-child(1) {
      top: 18px;
      width: 0%;
      left: 50%; }
    #navHamburger.open span:nth-child(2) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg); }
    #navHamburger.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    #navHamburger.open span:nth-child(4) {
      top: 18px;
      width: 0%;
      left: 50%; }

@media (max-width: 700px) {
  .hamburger-container {
    display: flex; } }
.section--copy-image {
  padding: 0 var(--section-horizontal-padding); }
  .section--copy-image:nth-of-type(even) {
    background-color: white; }
  .section--copy-image__text {
    position: relative; }
    .section--copy-image__text h1,
    .section--copy-image__text h2,
    .section--copy-image__text a {
      color: var(--blue-mymaths); }
    .section--copy-image__text h3 {
      margin-bottom: 3em;
      letter-spacing: 1.5px;
      font-weight: 100;
      font-size: 1.5rem; }
      .section--copy-image__text h3:before {
        content: "";
        position: absolute;
        top: 35px;
        height: var(--heading-divider-height-xs);
        width: var(--heading-divider-height-xs);
        border-radius: 50%;
        background-color: #00000059;
        left: 53px;
        z-index: 2; }
      .section--copy-image__text h3:after {
        content: " ";
        background-color: var(--blue-mymaths);
        left: 0;
        top: 35px;
        position: absolute;
        width: 60px;
        height: var(--heading-divider-height-xs);
        border-radius: 20px; }
    .section--copy-image__text ul {
      margin-bottom: 27px; }
  .section--copy-image__no-underline h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 1em;
    letter-spacing: 0; }
  .section--copy-image__no-underline h3:before {
    background-color: transparent;
    background: transparent; }
  .section--copy-image__no-underline h3:after {
    background-color: transparent; }

.section-copy-image__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--section-horizontal-padding);
  max-width: var(--max-content-width);
  margin: 0 auto;
  min-height: 35vmax;
  align-items: center;
  padding: var(--section-vertical-padding) 0; }
  .section-copy-image__container.error404-page {
    grid-template-columns: 1fr 2fr;
    min-height: 29vmax; }

.section--copy-image--primary h3:before {
  background-color: #e14a3a; }
.section--copy-image--primary h3:after {
  background: var(--amber);
  background: linear-gradient(90deg, #fcbf20 0%, #e77719 100%); }

.section--copy-image--secondary h3:before {
  background-color: #346e5a; }
.section--copy-image--secondary h3:after {
  background: var(--color-green);
  background: linear-gradient(90deg, #9bcfe7 0%, #52ae93 100%); }

.section--copy-image--impact h3:after {
  background-color: var(--blue-baby); }

.section--copy-image--case-study h3:after {
  background-color: var(--color-green); }

.section--copy-image__video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-bottom: 40px; }
  .section--copy-image__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

@media (min-width: 700px) {
  .section--copy-image--even .section--copy-image__image,
  .section--copy-image--even .section--copy-image__image {
    order: 2; }
  .section--copy-image--even .section--copy-image__text {
    order: 1; }

  .striped .section--copy-image--odd {
    background-color: var(--grey-light); }
  .striped.striped-alternate .section--copy-image--even {
    background-color: var(--grey-light); }
  .striped.striped-alternate .section--copy-image--odd {
    background-color: white; } }
@media (max-width: 700px) {
  .section-copy-image__container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-gap: 0; }
    .section-copy-image__container.error404-page {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr auto;
      grid-gap: 0; }

  .section--copy-image__image {
    margin-bottom: 2rem; } }
.section--copy-button {
  --fg-color: var(--blue-mymaths);
  --bg-color: var(--grey-light);
  color: var(--fg-color);
  background-color: var(--bg-color);
  text-align: center;
  min-height: 400px;
  padding: 6rem var(--section-horizontal-padding);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .section--copy-button blockquote p:not(cite) {
    font-size: 3rem;
    line-height: 1.5; }

.section--copy-button--blue {
  --fg-color: white;
  --bg-color: var(--blue-mymaths); }
  .section--copy-button--blue a.button {
    --fg-color: white;
    --bg-color: var(--blue-mymaths); }
    .section--copy-button--blue a.button:focus {
      background-color: var(--amber);
      color: var(--bg-color);
      border-color: white; }

@media (max-width: 700px) {
  .section--copy-button {
    min-height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem; }
    .section--copy-button blockquote p:not(cite) {
      font-size: 2rem; } }
.section-action {
  --fg-color: var(--blue-mymaths);
  --bg-color: var(--grey-light);
  color: var(--fg-color);
  background-color: var(--bg-color);
  text-align: center;
  min-height: 400px;
  padding: 2rem var(--section-horizontal-padding);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .section-action h2 {
    font-size: 4rem; }
  .section-action a.button {
    margin-bottom: 2rem; }

.section--copy-image--odd + .section-action {
  background-color: white; }

@media (max-width: 700px) {
  .section-action {
    min-height: auto;
    min-height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem; }
    .section-action h2 {
      font-size: 2rem; }
    .section-action a.button {
      margin-bottom: 2rem; } }
.blog-index {
  background-color: var(--grey-light); }

.articles-container-wrapper {
  margin: 0 var(--section-horizontal-padding); }

.articles-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--section-vertical-padding);
  max-width: var(--max-content-width);
  margin: 0 auto 5rem; }

.blog-heading-container {
  background-color: var(--blue-mymaths);
  text-align: center;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; }
  .blog-heading-container h1 {
    margin-bottom: 0; }

@media (min-width: 1023px) {
  a.post-link:first-of-type {
    grid-column: auto / span 2;
    grid-row: auto / span 1; } }
@media (max-width: 1023px) {
  .articles-container {
    grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .articles-container {
    display: grid;
    grid-template-columns: 1fr; }

  .articles-container-wrapper {
    margin: 0; } }
.pagination {
  background-color: var(--grey-light);
  font-size: 2rem;
  text-align: center;
  padding: 2rem; }

.page_number {
  padding: 2rem; }

.blog-index__article.whats-new .posts-image-container {
  background-color: var(--blog-whats-new-color); }
.blog-index__article.whats-new h2:after {
  content: " ";
  background-color: var(--blog-whats-new-color); }
.blog-index__article.primary .posts-image-container {
  background-color: var(--blog-primary-color); }
.blog-index__article.primary h2:after {
  content: " ";
  background-color: var(--blog-primary-color); }
.blog-index__article.secondary .posts-image-container {
  background-color: var(--blog-secondary-color); }
.blog-index__article.secondary h2:after {
  content: " ";
  background-color: var(--blog-secondary-color); }
.blog-index__article.the-myimaths-team .posts-image-container {
  background-color: var(--blog-the-team-color); }
.blog-index__article.the-myimaths-team h2:after {
  content: " ";
  background-color: var(--blog-the-team-color); }
.blog-index__article.everyone .posts-image-container {
  background-color: var(--blog-everyone-color); }
.blog-index__article.everyone h2:after {
  content: " ";
  background-color: var(--blog-everyone-color); }

.posts-image-container {
  display: block; }

a.post-link {
  text-decoration: none;
  display: block; }
  a.post-link:focus {
    background-color: transparent;
    color: inherit;
    outline: none; }
    a.post-link:focus article {
      box-shadow: 0 0px 8px var(--amber);
      transform: translateY(-2px); }

@media (min-width: 1200px) {
  .articles-container a.post-link:nth-of-type(1) h2 {
    font-size: 3rem;
    margin-bottom: 1.8em; } }
@media (max-width: 700px) {
  .posts-image-container {
    margin-bottom: 2rem; } }
.testimonials-wrapper {
  margin: 0 var(--section-horizontal-padding); }

.testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--max-content-width);
  margin: 0 auto;
  grid-gap: var(--section-horizontal-padding); }
  .testimonials .section--copy-button {
    margin-bottom: 5rem; }

.testimonials-heading {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding-top: var(--section-vertical-padding);
  color: var(--blue-mymaths, #172E50); }

.testimonials-layout .section--copy-button,
.testimonials-layout .testimonials {
  margin-bottom: var(--section-vertical-padding); }
.testimonials-layout .section--copy-button--white {
  background-color: white;
  min-height: auto; }

.testimonials-layout.testimonials-myimaths .testimonials-wrapper {
  padding-top: var(--section-vertical-padding); }

@media (max-width: 1023px) {
  .testimonials {
    grid-template-columns: 1fr;
    grid-gap: var(--section-vertical-padding); } }
@media (max-width: 700px) {
  .testimonials {
    grid-gap: 2rem;
    padding: 0;
    grid-template-columns: 1fr; } }
.blog-menu-container {
  background-color: #000066;
  background-color: var(--blue-mymaths);
  padding: 2rem;
  margin-bottom: var(--section-vertical-padding);
  color: white; }
  .blog-menu-container li a {
    padding: 2rem;
    border-bottom: 6px solid transparent; }
    .blog-menu-container li a:focus {
      outline: none; }
  .blog-menu-container.all-news li.all-news a {
    border-color: white; }
  .blog-menu-container.primary li.primary a {
    border-color: var(--blog-primary-color); }
  .blog-menu-container.secondary li.secondary a {
    border-color: var(--blog-secondary-color); }
  .blog-menu-container.whats-new li.whats-new a {
    border-color: var(--blog-whats-new-color); }
  .blog-menu-container.myimaths-team li.myimaths-team a {
    border-color: var(--blog-the-team-color); }

.blog-menu ul {
  padding: 0;
  display: grid;
  grid-gap: 1rem;
  max-width: var(--max-content-width);
  margin: 0 auto;
  grid-auto-flow: column dense; }
  .blog-menu ul li {
    list-style: none;
    text-align: center; }
    .blog-menu ul li a {
      text-decoration: none; }

@media (max-width: 700px) {
  .blog-menu {
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
    height: 50px; }

  .blog-menu-container {
    background-color: var(--blue-mymaths);
    padding: 0;
    background: linear-gradient(90deg, #172E50 0%, #172E50 0% 15%, #172E50 85%, #090031 100%); }
    .blog-menu-container li a {
      padding: 1rem;
      border-bottom: 6px solid transparent;
      height: 50px;
      display: flex;
      justify-content: center; }

  .articles-container {
    margin-bottom: 0; } }
.mymaths-footer,
.oxford-footer {
  padding: 0 var(--section-horizontal-padding); }

.mymaths-footer {
  background-color: var(--blue-mymaths); }

.mymaths-footer-container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr;
  color: white;
  padding: 10rem 0;
  max-width: var(--max-content-width);
  margin: 0 auto; }
  .mymaths-footer-container ul {
    margin: 0;
    padding: 0; }
  .mymaths-footer-container li {
    list-style: none;
    font-size: 1.5rem;
    margin-bottom: 1em;
    opacity: 0.8; }
  .mymaths-footer-container a {
    text-decoration: none; }

.mymaths-footer-container__logo__img {
  width: 50px;
  margin-top: 10px; }

.oxford-footer li {
  display: inline;
  font-size: 1.5rem;
  margin-left: 1.5rem; }
  .oxford-footer li a {
    text-decoration: none; }

.oxford-footer__right {
  justify-content: flex-end; }
  .oxford-footer__right ul {
    padding: 0; }

.oxford-footer__left,
.oxford-footer__right {
  display: flex;
  align-items: center; }

.oxford-footer-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 2rem 0;
  min-height: 125px; }
  .oxford-footer-container ~ div {
    margin-bottom: 20px; }

.oxford-footer__logo__img {
  width: 191px; }

.oxford-footer__logo {
  display: flex; }

@media (max-width: 1023px) {
  .mymaths-footer-container > div {
    margin-bottom: 2rem; }
    .mymaths-footer-container > div:last-of-type {
      margin-bottom: 0; }

  .mymaths-footer-container {
    grid-template-columns: 1fr 1fr; }

  .mymaths-footer-container__news {
    grid-column: span 3 / 4; }

  .mymaths-footer-container__logo {
    display: none; }

  .oxford-footer {
    padding: 2rem; }

  .oxford-footer-container {
    grid-template-columns: 1fr; }

  .oxford-footer ul {
    text-align: center; }

  .oxford-footer li {
    display: block;
    margin-left: 0; }

  .oxford-footer__right {
    justify-content: center; }

  .oxford-footer__left {
    order: 2;
    justify-content: center; }

  .oxford-footer__logo {
    margin: 3rem 3rem 0; } }
@media (max-width: 700px) {
  .mymaths-footer-container__news {
    grid-column: auto; }

  .mymaths-footer-container {
    grid-template-columns: 1fr;
    padding: 5rem 0; }

  .mymaths-footer-container__logo {
    display: none; } }
.login-layout {
  background-color: var(--blue-sky);
  padding: 6vmin; }

.login-form {
  max-width: 500px;
  margin: 0 auto;
  background-color: white;
  border-radius: 15px;
  grid-template-rows: 100px auto auto 100px auto;
  padding: 4rem; }

.input-login-button-container button.button {
  display: block;
  width: 100%; }

#log-in {
  color: var(--blue-mymaths);
  margin-bottom: 1rem; }

.input-container {
  margin-bottom: 2rem; }

.input-password-container {
  margin-bottom: 4rem; }

.input-login-button-container {
  margin-bottom: 3rem; }

.input-login-support-container {
  text-align: center; }
  .input-login-support-container p:last-of-type {
    margin-bottom: 0; }

@media (max-width: 700px) {
  .login-form {
    max-width: 500px;
    margin: 0 auto;
    background-color: white;
    border-radius: 15px;
    grid-template-rows: 100px auto auto 100px auto;
    padding: 2rem; }

  .input-password-container {
    margin-bottom: 2rem; } }
.our-plans-wrapper {
  background-color: var(--home-banner-bg-colour);
  background-image: url(/assets/artwork/2020/home-banner-bg.svg);
  background-repeat: no-repeat;
  background-size: cover; }

.our-plans-heading {
  min-height: 20vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 30vmin;
  min-height: 200px; }
  .our-plans-heading h1 {
    color: var(--blue-mymaths); }
  .our-plans-heading p {
    margin-bottom: 0; }

.our-plans-container {
  max-width: var(--max-content-width);
  margin: 0 auto var(--section-vertical-padding) auto;
  padding-bottom: var(--section-vertical-padding); }

.our-plans-column {
  border-radius: 15px;
  overflow: hidden;
  background-color: #ffffffb5; }
  .our-plans-column h2 {
    border-bottom: 1px solid;
    padding-bottom: 0.5em;
    font-size: 2.2rem; }
  .our-plans-column h3 {
    margin-bottom: 0;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0.3em 0; }
    .our-plans-column h3 span.small {
      font-size: 0.7em; }

.our-plans-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 4rem; }

.our-plans-column--blue .our-plans-column__heading {
  background-color: var(--blue-mymaths);
  color: white; }

.our-plans-column__content {
  padding: 4rem 2rem;
  position: relative;
  display: grid;
  grid-template-rows: minmax(350px, auto) auto auto;
  grid-gap: 2rem; }
  .our-plans-column__content p {
    text-align: center; }

.our-plans-column__heading {
  padding: 3rem 2rem; }

.our-plans-column--amber .our-plans-column__heading {
  background-color: var(--purple);
  color: white; }

.our-plans-column--pink .our-plans-column__heading {
  background-color: var(--color-green);
  color: white;
  color: var(--dark-blue); }

.our-plans-wrapper,
.subscriptions-faqs-wrapper {
  padding: 0 var(--section-horizontal-padding); }

:root {
  --gutter: 2rem; }

@media (min-width: 1023px) {
  .our-plans-column__content p,
  .our-plans-column__content li,
  .our-plans-column__content .button {
    font-size: 1.5rem; } }
@media (max-width: 1230px) {
  .our-plans-columns {
    grid-column-gap: 1rem; } }
@media (max-width: 1023px) {
  .our-plans-columns-container {
    display: grid;
    grid-gap: var(--gutter) 0;
    grid-template-columns: 0 var(--gutter) 1fr var(--gutter) 0;
    align-content: start;
    scroll-snap-type: mandatory;
    scroll-snap-type: x mandatory; }
    .our-plans-columns-container .button {
      padding: 1rem 1.5rem; }

  .our-plans-column {
    scroll-snap-align: start; }

  .our-plans-columns-container > * {
    grid-column: 2 / -2; }

  .our-plans-columns {
    display: grid;
    grid-column-gap: 1rem;
    grid-template-columns: 0 repeat(3, calc(49% - var(--gutter) * 2)) 0;
    overflow-x: scroll;
    scroll-snap-type: x proximity;
    padding-bottom: calc(0.75 * var(--gutter));
    margin-bottom: calc(-0.5 * var(--gutter)); }

  .our-plans-columns:before,
  .our-plans-columns:after {
    content: ""; } }
@media (max-width: 700px) {
  .our-plans-columns {
    display: grid;
    grid-gap: calc(var(--gutter) / 2);
    grid-template-columns: 0 repeat(3, calc(93% - var(--gutter) * 2)) 0;
    overflow-x: scroll;
    scroll-snap-type: x proximity;
    padding-bottom: calc(0.75 * var(--gutter));
    margin-bottom: calc(-0.5 * var(--gutter)); }
    .our-plans-columns .button {
      display: inline; }

  .our-plans-column__content {
    grid-template-rows: auto auto auto; } }
.subscriptions-faqs-wrapper {
  background-color: white; }

.subscriptions-faqs-container {
  padding: 5rem 0 10rem;
  max-width: var(--max-content-width);
  margin: 0 auto; }
  .subscriptions-faqs-container h2 {
    text-align: center;
    color: var(--blue-mymaths);
    margin-bottom: 3rem; }

.post article p:nth-child(2):not(.stylised) {
  font-size: calc(var(--base-font-size) * 1.4);
  line-height: 1.3; }

.post {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 2rem; }
  .post header,
  .post p,
  .post h2,
  .post h3,
  .post h4,
  .post li {
    max-width: var(--max-post-content-width);
    margin: 0 auto; }
  .post p img {
    width: 100%; }
  .post p {
    margin-bottom: var(--space-m); }
    .post p.note, .post p.tip {
      padding: calc(var(--section-vertical-padding)) var(--section-vertical-padding) calc(var(--section-vertical-padding)) calc(var(--section-vertical-padding) * 2.5);
      position: relative;
      border-radius: 15px;
      color: var(--dark-blue); }
      .post p.note::before, .post p.tip::before {
        content: " ";
        position: absolute;
        width: 40px;
        height: 100%;
        left: var(--section-vertical-padding);
        top: 0; }
    .post p.tip {
      background-color: var(--tip-bg-color); }
      .post p.tip::before {
        background: url(/assets/artwork/icons/streamline/tip.svg) no-repeat center center;
        background-size: 30px 30px; }
    .post p.note {
      background-color: var(--note-bg-color); }
      .post p.note::before {
        background: url(/assets/artwork/icons/streamline/note.svg) no-repeat center center;
        background-size: 30px 30px; }
  .post ul {
    margin-bottom: var(--post-spacing);
    margin-left: var(--space-m); }
  .post h2,
  .post h3,
  .post h4 {
    color: var(--blue-mymaths); }
  .post h2 {
    font-weight: 400;
    margin-bottom: 0.6em;
    font-size: 3.5rem; }
  .post h3 {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 1em; }
  .post h4 {
    font-size: var(--base-font-size);
    margin-bottom: 1em;
    font-weight: 400; }
  .post p + ul,
  .post p + ol {
    margin-top: var(--space-m); }
  .post p + figure {
    margin-top: var(--post-spacing); }
  .post figure {
    background-color: var(--grey-light);
    margin-bottom: var(--post-spacing);
    display: flex;
    flex-direction: column; }
    .post figure img {
      max-height: 800px; }
    .post figure a,
    .post figure picture {
      display: flex;
      flex-direction: column;
      text-decoration: none; }
    .post figure.--color-green {
      background-color: var(--color-green); }
    .post figure.--aquamarine {
      background-color: var(--aquamarine); }
    .post figure.--blue-electric {
      background-color: var(--blue-electric); }
    .post figure.--blue-baby {
      background-color: var(--blue-baby); }
    .post figure.--periwinkle {
      background-color: var(--periwinkle); }
    .post figure.--color-lime {
      background-color: var(--color-lime); }
    .post figure.--azure {
      background-color: var(--azure); }
    .post figure.--cream {
      background-color: var(--cream); }
    .post figure.--color-pink {
      background-color: var(--color-pink); }
    .post figure img {
      object-fit: contain;
      margin: 5vmin; }
  .post figcaption {
    background-color: var(--blue-mymaths);
    color: white;
    padding: 2rem; }
    .post figcaption p {
      max-width: 100%;
      font-size: initial; }
      .post figcaption p:last-of-type {
        margin-bottom: 0; }
  .post a figcaption p {
    text-decoration: underline; }

h1.post-title {
  font-size: 5rem;
  position: relative;
  margin-bottom: 8rem;
  padding-top: 2rem;
  line-height: 1.3; }
  h1.post-title:after {
    content: " ";
    background-color: black;
    left: 0;
    bottom: -39px;
    position: absolute;
    width: 80px;
    height: 14px;
    border-radius: 30px; }

.post .highlight-text {
  display: block;
  background-color: var(--blue-mymaths);
  color: white;
  padding: 16px; }

.post.secondary h1.post-title:after {
  background-color: var(--blog-secondary-color); }

.post.primary h1.post-title:after {
  background-color: var(--blog-primary-color); }

.post.whats-new h1.post-title:after {
  background-color: var(--blog-whats-new-color); }

.post.the-myimaths-team h1.post-title:after {
  background-color: var(--blog-the-team-color); }

.post.everyone h1.post-title:after {
  background-color: var(--blog-everyone-color); }

.post-video {
  max-width: var(--max-post-content-width);
  margin: 0 auto;
  margin-bottom: var(--post-spacing); }

@media (max-width: 1023px) {
  .post p {
    line-height: 1.8; }
    .post p.note {
      padding: calc(var(--section-vertical-padding)) var(--section-vertical-padding) calc(var(--section-vertical-padding)) calc(var(--section-vertical-padding) * 3.5); } }
@media (max-width: 700px) {
  h1.post-title {
    font-size: calc(12px + 4vmin);
    position: relative;
    margin-bottom: 8rem;
    padding-top: 2rem;
    line-height: 1.3; }
    h1.post-title:after {
      content: " ";
      background-color: black;
      left: 0;
      bottom: -39px;
      position: absolute;
      width: 80px;
      height: 14px;
      border-radius: 30px; }

  .post article p:nth-child(2):not(.stylised) {
    font-size: calc(var(--base-font-size) * 1.3); }
  .post figure img {
    max-height: 400px; }
  .post p {
    line-height: 1.8; }
    .post p.note, .post p.tip {
      padding: calc(var(--section-vertical-padding)) var(--section-vertical-padding) calc(var(--section-vertical-padding)) calc(var(--section-vertical-padding) * 3.5); }
  .post h2 {
    font-weight: 400;
    margin-bottom: 0.3em;
    font-size: 2.2rem; }
  .post h3 {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.3em; }
  .post h4 {
    margin-bottom: 0.3em;
    font-weight: 400; } }
.try-text-container h2 {
  margin-bottom: 1em; }

.try-mymaths-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5rem;
  max-width: var(--max-content-width);
  margin: 0 auto 5rem; }

.try-mymaths-content-block h3 {
  position: relative; }
  .try-mymaths-content-block h3:after {
    content: " ";
    left: 0;
    bottom: -25px;
    position: absolute;
    width: 70px;
    height: 7px;
    border-radius: 30px; }
.try-mymaths-content-block--primary h3:after {
  background-color: var(--primary-color); }
.try-mymaths-content-block--secondary h3:after {
  background-color: var(--secondary-color); }
.try-mymaths-content-block .stylised {
  margin-bottom: 2.5em; }

a.try-mymaths-link {
  text-decoration: none; }

@media (max-width: 700px) {
  .try-mymaths-content {
    grid-template-columns: 1fr; } }
.contact .contact-wrapper {
  background-color: var(--grey-light);
  padding: 0 var(--section-horizontal-padding); }

.two-column-wrapper {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 70vmin; }
  .two-column-wrapper .two-column--column-1,
  .two-column-wrapper .two-column--column-2 {
    display: flex;
    flex-direction: column;
    justify-content: center; }
  .two-column-wrapper h1 {
    color: var(--blue-mymaths);
    margin-bottom: 0.7em;
    font-size: 2.5rem;
    font-weight: 100; }

@media (max-width: 700px) {
  .two-column-wrapper {
    grid-template-columns: 1fr;
    padding: 0;
    height: 100%;
    padding: 20px 0; }
    .two-column-wrapper .two-column--column-1,
    .two-column-wrapper .two-column--column-2 {
      padding: 0; }
    .two-column-wrapper .two-column--column-2 {
      display: none; } }
@media all and (-ms-high-contrast: none) {
  .post p.note, .post p.tip {
    padding: 20px;
    margin: 20px; }
    .post p.note:before, .post p.tip:before {
      background: none; }

  .campaign .site-header {
    background-color: #9bcfe7; }
    .campaign .site-header__inner a:not(.button) {
      color: #172e50; }
    .campaign .site-header .button-secondary {
      --fg-color: white;
      --bg-color: transparent;
      border: 2px solid;
      color: #172e50;
      background-color: #9bcfe7; }
  .campaign .banner {
    background-color: #9bcfe7;
    color: #172e50;
    height: 400px; }
    .campaign .banner img {
      display: none; }
    .campaign .banner h3:after {
      background-color: var(--red); }
  .campaign .section--copy-image--odd {
    background-color: var(--banner-bg-colour-purple--light); }

  .section--copy-image__video {
    padding-bottom: 0;
    padding-top: 0;
    padding-right: 20px;
    height: 400px;
    overflow: visible; }

  .section--copy-image__video iframe {
    position: relative;
    top: auto;
    left: auto;
    width: 400px;
    height: 300px; }

  .logo-desktop {
    width: 200px;
    height: 150px; }

  .section--copy-button {
    background-color: #172e50;
    color: white; }

  .site-header__inner {
    display: -ms-grid; }
    .site-header__inner .logo-container {
      -ms-grid-column: 1; }
    .site-header__inner .nav-primary {
      width: 600px;
      margin: 0 20px;
      -ms-grid-column: 2; }
    .site-header__inner .login-button-container {
      -ms-grid-column: 3; }

  .blog-heading-container,
  .blog-menu-container {
    background-color: #172e50; }

  .content-container {
    max-width: 1200px; }

  .section-copy-image__container {
    max-width: 1200px; }

  .nav-primary li {
    font-size: 15px;
    color: #172e50; }

  .testimonials {
    width: 800px; }

  .posts-image-container {
    padding-top: 0;
    padding-right: 20px;
    max-height: 300px;
    position: relative; }
    .posts-image-container img {
      height: 100%;
      position: relative; }

  p,
  li,
  blockquote,
  a.button,
  blockquote cite,
  .tip,
  .note {
    font-size: 15px;
    max-width: 600px; }

  .banner--home {
    background-color: #9bcfe7;
    min-height: 40vmin;
    color: #172e50; }

  .homepage .site-header,
  .subscribe .site-header,
  .testimonials-layout .site-header,
  .try-mymaths .site-header {
    background-color: #9bcfe7;
    background-image: none; }

  .banner--home .banner__inner {
    display: -ms-grid; }

  .banner__column.banner__column__right {
    display: -ms-grid;
    -ms-grid-column: 2; }

  .button-primary {
    border: 2px solid #172e50;
    background-color: #172e50;
    color: white; }

  .section-copy-image__container {
    display: -ms-grid;
    max-width: 1200px; }
    .section-copy-image__container .section--copy-image__text {
      -ms-grid-column: 2; }

  .testimonials-heading {
    max-width: 1200px;
    margin: 0 auto; }

  .mymaths-footer {
    background-color: #172e50; }
    .mymaths-footer .mymaths-footer-container {
      display: -ms-grid;
      -ms-grid-columns: 1fr 2fr 2fr 2fr;
      max-width: 1200px; }
      .mymaths-footer .mymaths-footer-container div:first-of-type {
        -ms-grid-column: 1; }
      .mymaths-footer .mymaths-footer-container div:nth-of-type(2) {
        -ms-grid-column: 2; }
      .mymaths-footer .mymaths-footer-container div:nth-of-type(3) {
        -ms-grid-column: 3; }
      .mymaths-footer .mymaths-footer-container div:nth-of-type(4) {
        -ms-grid-column: 4; }

  .oxford-footer .oxford-footer-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 3fr;
    max-width: 1200px; }
  .oxford-footer .oxford-footer__left {
    -ms-grid-column: 1; }
  .oxford-footer .oxford-footer__right {
    -ms-grid-column: 2; }
  .oxford-footer .oxford-footer__logo__img {
    width: auto;
    height: 50px; }

  .banner--blue {
    background-color: #9bcfe7; }

  .banner-page-layout--in-primary-schools .banner,
  .banner-page-layout--in-secondary-schools .banner {
    background-image: none; }

  .site-header {
    background-color: #9bcfe7; }

  .four-columns-with-icons {
    display: -ms-grid;
    max-width: 1200px; }
    .four-columns-with-icons .four-columns-with-icons__column {
      padding: 10px; }
    .four-columns-with-icons .four-columns-with-icons__column:first-of-type {
      -ms-grid-column: 1; }
    .four-columns-with-icons .four-columns-with-icons__column:nth-of-type(2) {
      -ms-grid-column: 2; }
    .four-columns-with-icons .four-columns-with-icons__column:nth-of-type(3) {
      -ms-grid-column: 3; }
    .four-columns-with-icons .four-columns-with-icons__column:nth-of-type(4) {
      -ms-grid-column: 4; }

  .testimonials-layout .banner {
    background-color: #9bcfe7;
    background-image: none; }

  .our-plans-wrapper {
    background-color: #f7f7f7;
    background-image: none; }

  .our-plans-container {
    max-width: 1200px;
    margin: 0 auto; }

  .our-plans-columns {
    display: -ms-grid; }

  .our-plans-column--blue {
    -ms-grid-column: 1; }
    .our-plans-column--blue .our-plans-column__heading {
      background-color: #172e50; }

  .our-plans-column--pink {
    -ms-grid-column: 2; }
    .our-plans-column--pink .our-plans-column__heading {
      background-color: #db0066; }

  .our-plans-column--amber {
    -ms-grid-column: 3; }
    .our-plans-column--amber .our-plans-column__heading {
      background-color: #fea800; }

  .panel {
    max-height: none; }

  .blog-menu {
    display: table;
    margin: 0 auto; }
    .blog-menu ul {
      display: -ms-inline-flexbox; }
    .blog-menu li a {
      text-decoration: underline;
      border: 0; }

  .articles-container {
    display: table;
    max-width: 1200px; }

  .post {
    max-width: 1200px; }

  header .post-meta {
    margin-bottom: 20px;
    display: -ms-grid;
    padding-bottom: 20px; }
    header .post-meta .stylised {
      -ms-grid-column: 2;
      padding-left: 20px; }

  thead {
    background-color: #172e50; } }