@import url("https://use.typekit.net/tuk3ozz.css");
@import url("https://use.typekit.net/tuk3ozz.css");
.right {
  text-align: right; }

.center {
  text-align: center; }

h1, h1, h3, h4, h5, h6, p {
  color: #222; }

.bg-white {
  background: #fff; }

.bg-lgrey {
  background: #f5f5f5; }

.bg-grey {
  background: #c5cfd6; }

.bg-mint {
  background: #89c6cd; }

.bg-red {
  background: #ef4639; }

.bg-yellow {
  background: #f99b26; }

.bg-black {
  background: #222; }

.bg-purple {
  background: #762c80; }

.bg-navy {
  background: #2f3776; }

.bg-black h1, .bg-black h1, .bg-black h3, .bg-black h4, .bg-black h5, .bg-black h6, .bg-black p, .bg-black ul, .bg-navy h1, .bg-navy h1, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6, .bg-navy p, .bg-navy ul {
  color: #f5f5f5; }

.right {
  text-align: right; }

.center {
  text-align: center; }

h1, h1, h3, h4, h5, h6, p {
  color: #222; }

.bg-white {
  background: #fff; }

.bg-lgrey {
  background: #f5f5f5; }

.bg-grey {
  background: #c5cfd6; }

.bg-mint {
  background: #89c6cd; }

.bg-red {
  background: #ef4639; }

.bg-yellow {
  background: #f99b26; }

.bg-black {
  background: #222; }

.bg-purple {
  background: #762c80; }

.bg-navy {
  background: #2f3776; }

.bg-black h1, .bg-black h1, .bg-black h3, .bg-black h4, .bg-black h5, .bg-black h6, .bg-black p, .bg-black ul, .bg-navy h1, .bg-navy h1, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6, .bg-navy p, .bg-navy ul {
  color: #f5f5f5; }

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 1rem;
  width: calc(100vw - 2rem);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed; }
  header a {
    font-family: poynter-oldstyle-display, serif;
    color: #65b5be;
    text-decoration: none;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    font-size: 1.15rem;
    letter-spacing: 1px;
    background: #fff;
    padding: 1.3rem  1.5rem;
    border-radius: 2rem; }
    header a:hover {
      color: #c5cfd6;
      text-shadow: none; }
    header a:hover i {
      color: #c5cfd6; }
    header a i {
      color: #f99b26;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s; }

#nav-bump {
  padding-top: 12rem; }

.nav-bump {
  padding-top: 12rem; }

footer {
  width: 100%;
  background: #222;
  padding: 7rem 0;
  color: #fff;
  text-align: center; }
  footer p {
    color: #c5cfd6;
    opacity: 0.5;
    font-family: poynter-oldstyle-display, serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
    font-style: italic;
    text-transform: lowercase; }
  footer .links {
    margin: 1.5rem 0 2rem; }
    footer .links a {
      color: #89c6cd;
      font-family: ff-basic-gothic-pro, sans-serif;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 0.9rem;
      margin: 2rem 0.5rem;
      letter-spacing: 2px;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s; }
      footer .links a:hover {
        color: #fff; }
  footer .social a {
    color: #fff;
    margin: 2rem 0.5rem;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    font-size: 0.9rem; }
    footer .social a:hover {
      color: #89c6cd; }

html {
  scroll-behavior: smooth; }

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

p {
  font-family: ff-basic-gothic-pro, sans-serif;
  font-size: calc(17px + 0.25vw);
  line-height: 1.8;
  letter-spacing: -1px;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
  text-align: center; }
  p a {
    color: #222;
    text-decoration: none;
    font-weight: 600;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
    p a:hover {
      color: #fff;
      border-bottom: solid 3px #fff; }

h2 {
  font-family: poynter-oldstyle-display, serif;
  font-weight: 700;
  font-style: italic;
  font-size: calc(40px + 1vw);
  letter-spacing: 0.5px;
  text-align: center;
  border-bottom: solid 3px #fff;
  padding: 0 3rem 1.75rem;
  margin-bottom: 3rem; }

hr {
  border: solid 2px #f5f5f5;
  margin: 3.25rem 0 4rem; }

a.button {
  text-decoration: none;
  text-align: center;
  font-family: ff-basic-gothic-pro, sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }
  a.button:hover {
    padding-top: 0.5rem; }
  a.button i {
    padding-top: 0.5rem; }

#intro {
  background: #c5cfd6;
  height: 100vh;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 4rem; }
  #intro .wrapper {
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 90%;
    margin: 0 auto; }
    #intro .wrapper img {
      padding-bottom: 3rem;
      max-width: 90%;
      margin: 0 auto; }
    #intro .wrapper h1 {
      font-family: poynter-oldstyle-display, serif;
      font-weight: 700;
      font-size: calc(40px + 1vw);
      letter-spacing: 0.5px;
      text-align: center;
      padding-bottom: 1rem; }
    #intro .wrapper p {
      line-height: 1.5;
      padding-bottom: 2rem; }

@media (min-width: 1000px) {
  #intro {
    background: #c5cfd6;
    height: 100vh;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 4rem; }
    #intro .wrapper {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 2fr 2.5fr;
      grid-template-columns: 2fr 2.5fr;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      grid-gap: 1rem;
      width: 85%;
      margin: 0 auto; }
      #intro .wrapper img {
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        grid-row: 1/3;
        max-width: 100%; }
      #intro .wrapper h1 {
        font-size: calc(40px + 4vw);
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1/2;
        text-align: left; }
      #intro .wrapper p {
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1/2;
        text-align: left;
        padding-bottom: 4rem; }
      #intro .wrapper a {
        -ms-grid-column-span: 2;
        grid-column-end: span 2; }
      #intro .wrapper .button {
        font-size: 1rem; } }

#aeiou-intro {
  padding: 12rem 0; }
  #aeiou-intro .wrapper {
    width: 80%;
    margin: 0 auto; }

#aeiou .wrapper {
  width: 100%; }

#aeiou .bg-lgrey {
  background: #f5f5f5; }
  #aeiou .bg-lgrey h4 {
    border-bottom: solid 3px #fff; }

#aeiou .bg-white {
  background: #fff; }
  #aeiou .bg-white h4 {
    border-bottom: solid 3px #f5f5f5; }

#aeiou .cell {
  padding: 4rem 2.1rem; }
  #aeiou .cell p {
    text-align: left; }
  #aeiou .cell p.intro {
    font-style: italic;
    font-size: 0.95rem; }
  #aeiou .cell h4 {
    font-family: poynter-oldstyle-display, serif;
    font-weight: 600;
    font-style: italic;
    font-size: 1.9rem;
    color: #222;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem; }
  #aeiou .cell p, #aeiou .cell ul {
    font-size: 1.1rem;
    color: #222;
    letter-spacing: -0.5px;
    line-height: 1.3; }
    #aeiou .cell p a, #aeiou .cell ul a {
      color: #2f3776;
      font-weight: 600;
      text-decoration: none;
      border-bottom: solid 3px #2f3776;
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s; }
      #aeiou .cell p a:hover, #aeiou .cell ul a:hover {
        color: #636ec1;
        border-color: #636ec1; }
    #aeiou .cell p span, #aeiou .cell ul span {
      font-weight: 600; }
  #aeiou .cell p + ul {
    padding-top: 1rem; }
  #aeiou .cell ul {
    margin-left: 1.2rem; }
  #aeiou .cell ul + h4 {
    margin-top: 2rem; }
  #aeiou .cell li {
    font-family: ff-basic-gothic-pro, sans-serif;
    padding-right: 0.25rem;
    list-style-type: disc;
    margin-bottom: 0.5rem; }

@media (min-width: 1000px) {
  #aeiou .wrapper {
    display: -ms-grid;
    display: grid;
    width: 80%;
    margin: 10rem auto;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem; }
  #aeiou .bg-lgrey, #aeiou .bg-white {
    background: #f5f5f5; }
    #aeiou .bg-lgrey h4, #aeiou .bg-white h4 {
      border-bottom: solid 3px #fff; }
  #aeiou #users {
    -ms-grid-column-span: 4;
    grid-column-end: span 4; } }

#persona {
  padding: 12rem 0; }
  #persona .wrapper {
    width: 80%;
    margin: 0 auto; }

.persona {
  padding: 5rem 0 10rem; }
  .persona h4 {
    font-family: poynter-oldstyle-display, serif;
    font-weight: 600;
    font-style: italic;
    font-size: 1.4rem;
    color: #222;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem; }
  .persona p, .persona ul {
    font-size: 1.1rem;
    color: #222;
    letter-spacing: -0.5px;
    line-height: 1.3; }
    .persona p a, .persona ul a {
      color: #2f3776;
      font-weight: 600;
      text-decoration: none;
      border-bottom: solid 3px #2f3776;
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s; }
      .persona p a:hover, .persona ul a:hover {
        color: #636ec1;
        border-color: #636ec1; }
    .persona p span, .persona ul span {
      font-weight: 600; }
  .persona ul {
    margin-left: 1.2rem; }
  .persona ul + h4 {
    margin-top: 2rem; }
  .persona li {
    font-family: ff-basic-gothic-pro, sans-serif;
    padding-right: 0.25rem;
    list-style-type: disc;
    margin-bottom: 0.5rem; }
  .persona .wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr; }
    .persona .wrapper .cell {
      padding: 2rem 2.1rem;
      height: auto;
      margin-bottom: 1.5rem; }
    .persona .wrapper .bg-lgrey {
      background: #f5f5f5; }
      .persona .wrapper .bg-lgrey h4 {
        border-bottom: solid 3px #fff; }
    .persona .wrapper .bg-white {
      background: #fff; }
      .persona .wrapper .bg-white h4 {
        border-bottom: solid 3px #f5f5f5; }
    .persona .wrapper img {
      margin: 2rem;
      max-height: 70vw; }
    .persona .wrapper .about {
      text-align: center;
      padding: 2rem 2.1rem; }
      .persona .wrapper .about h3 {
        font-family: poynter-oldstyle-display, serif;
        font-size: calc(40px + 1vw);
        font-weight: 700;
        margin-bottom: 0.75rem; }
      .persona .wrapper .about p {
        font-family: poynter-oldstyle-display, serif;
        font-style: italic;
        font-size: 1.3rem;
        font-weight: 600;
        line-height: 1.4;
        margin-top: 1rem;
        color: #222; }
        .persona .wrapper .about p i {
          font-size: 1.1rem;
          color: #c5cfd6; }
      .persona .wrapper .about .identities span {
        background: #c5cfd6;
        font-weight: 600;
        font-style: regular; }
      .persona .wrapper .about .identities span, .persona .wrapper .about .identities a {
        font-weight: 600;
        font-style: regular;
        border-radius: 1rem;
        font-size: 1rem;
        color: #fff;
        padding: 0.25rem 0.7rem;
        line-height: 2.1; }
      .persona .wrapper .about .identities a {
        background: #2f3776;
        text-decoration: none;
        color: #fff;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s; }
        .persona .wrapper .about .identities a:hover {
          background: #4551ad; }

@media (min-width: 1300px) {
  .persona {
    padding: 10rem 0 10rem; }
    .persona .wrapper {
      width: 80%;
      margin: 0 auto;
      -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
      -ms-grid-rows: 1fr 2fr 1.25fr 2fr;
      grid-template-rows: 1fr 2fr 1.25fr 2fr;
      grid-gap: 2rem; }
      .persona .wrapper img {
        -ms-grid-row-span: 2;
        grid-row-end: span 2; }
      .persona .wrapper .about {
        text-align: left;
        padding: 0;
        -ms-grid-column-span: 2;
        grid-column-end: span 2; }
        .persona .wrapper .about p {
          text-align: left; }
      .persona .wrapper .other-stuff {
        -ms-grid-column-span: 3;
        grid-column-end: span 3;
        text-align: center;
        color: white;
        display: -ms-grid;
        display: grid;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .persona .wrapper .other-stuff p {
          font-style: italic;
          margin-bottom: 0;
          font-size: 1.2rem; }
        .persona .wrapper .other-stuff h4 {
          margin-bottom: 0.5rem;
          font-size: 1.8rem; } }

#behaviour {
  padding: 12rem 0; }
  #behaviour .wrapper {
    width: 80%;
    margin: 0 auto; }

#behaviour-map {
  padding: 7rem 0; }
  #behaviour-map .wrapper {
    width: 80%;
    margin: 0 auto; }
  #behaviour-map .row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3fr 1fr;
    grid-template-columns: 1fr 3fr 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-column-gap: 0.5rem;
    grid-row-gap: 1rem; }
  #behaviour-map .label {
    font-family: poynter-oldstyle-display, serif;
    font-style: italic;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #222; }
  #behaviour-map img {
    max-width: 100%; }
  #behaviour-map .legend {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
    grid-gap: 1rem;
    text-align: center;
    padding-top: 2.5rem; }
    #behaviour-map .legend a {
      font-family: poynter-oldstyle-display, serif;
      font-style: italic;
      font-size: 0.8rem;
      line-height: 1.3;
      color: #c5cfd6;
      text-decoration: none;
      padding: 1rem 0;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      border-radius: 1rem; }
      #behaviour-map .legend a:hover {
        color: #222;
        background: #c5cfd6; }
    #behaviour-map .legend img {
      padding-top: 0.5rem;
      height: calc(0.5rem + 3vw); }

@media (min-width: 1000px) {
  #behaviour-map .row {
    grid-column-gap: 1rem;
    grid-row-gap: 3rem; }
  #behaviour-map .label {
    font-size: 1.4rem; }
  #behaviour-map .legend {
    padding-top: 4rem; }
    #behaviour-map .legend a {
      font-size: 1.4rem; } }

#gallery-intro {
  padding: 12rem 0; }
  #gallery-intro .wrapper {
    width: 80%;
    margin: 0 auto; }

#gallery {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr; }
  #gallery .cell {
    height: 100vw; }

#plants {
  background: url(images/plants.JPG) no-repeat center center;
  background-size: cover; }

#working {
  background: url(images/working.JPG) no-repeat center center;
  background-size: cover; }

#why {
  background: url(images/why.JPG) no-repeat center center;
  background-size: cover; }

#recess {
  background: url(images/recess.JPG) no-repeat center center;
  background-size: cover; }

#play {
  background: url(images/play.JPG) no-repeat center center;
  background-size: cover; }

#making {
  background: url(images/making.JPG) no-repeat center center;
  background-size: cover; }

#lecture {
  background: url(images/lecture.JPG) no-repeat center center;
  background-size: cover; }

#gather {
  background: url(images/gather.JPG) no-repeat center center;
  background-size: cover; }

#empty {
  background: url(images/empty.JPG) no-repeat center center;
  background-size: cover; }

#doodle {
  background: url(images/doodle.JPG) no-repeat center center;
  background-size: cover; }

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  z-index: 90; }
  .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

@media (min-width: 800px) {
  #gallery .cell {
    height: 70vw; } }

#index section {
  height: 100vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 11rem 10vw; }
  #index section h1 {
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
    color: #fff;
    font-family: poynter-oldstyle-display, serif;
    font-weight: 700;
    text-align: center;
    font-size: calc(30px + 5vw);
    line-height: 1.1;
    padding-bottom: 0;
    margin-bottom: 0; }
    #index section h1 span {
      color: #316c73; }
  #index section .bttns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 2rem; }
    #index section .bttns a {
      font-family: poynter-oldstyle-display, serif;
      font-style: italic;
      text-align: center;
      text-decoration: none;
      color: #89c6cd;
      font-size: 1.1rem;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      padding: 1.1rem 0 0.9rem;
      border-radius: 2rem;
      background: #408e97;
      width: 65%;
      -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
      margin-top: 1rem; }
      #index section .bttns a:hover {
        color: #fff;
        background: #53acb6;
        -webkit-transition: all 0.75s;
        -o-transition: all 0.75s;
        transition: all 0.75s; }
        #index section .bttns a:hover i {
          color: #f99b26; }
      #index section .bttns a i {
        padding-bottom: 0.5rem;
        -webkit-transition: all 0.75s;
        -o-transition: all 0.75s;
        transition: all 0.75s; }