@charset "UTF-8";
/* That's 16.75px, having set font size on HTML element below */
/* That's 18px, having set font size on HTML element below */
/* That's 24px */
footer {
  padding: 2.4rem 1.2rem; }
  footer dd {
    margin-bottom: 1.2rem; }
  footer dl, footer dl * {
    font-family: clone-rounded-latin, sans-serif;
    font-weight: 300;
    font-style: normal; }
  footer dl {
    margin-bottom: 2.4rem; }
  footer h4 {
    line-height: 1.2rem;
    margin-bottom: 1.2rem;
    font-family: clone-rounded-latin, sans-serif;
    font-weight: 700;
    font-style: normal; }

@media only screen and (min-width: 576px) {
  footer {
    padding: 2.4rem 0; } }
button {
  background: #ff0066;
  cursor: pointer;
  display: block;
  height: 3.6rem;
  padding: 0 1.2rem;
  font-family: clone-rounded-latin, sans-serif;
  font-weight: 700;
  font-style: normal;
  transition: color 0.5s linear; }

button:hover {
  color: #d7d2cb; }

form button {
  margin-top: 2.4rem; }

input:disabled, textarea:disabled, #grid-item-contact-form textarea:disabled {
  background: #49ebe1; }

input, textarea {
  background: white;
  border-radius: 0;
  /* Stops iOS rounding textarea corners */
  height: 2.4rem 1.5;
  padding: 0.6rem;
  width: 100%;
  font-family: clone-rounded-latin, sans-serif;
  font-weight: 300;
  font-style: normal;
  transition: border 0.5s linear; }

input:focus:invalid, textarea:focus:invalid, input:focus:required:invalid, textarea:focus:required:invalid {
  /* Focus stops validation pseudo-classes being applied before user has entered anything */
  color: #ff0066;
  /* Using border so as not to interfere with browser autofill styling */ }

input::placeholder, textarea::placeholder {
  color: #06223b; }

input:required:valid, textarea:required:valid {
  color: #009648;
  /* Using border so as not to interfere with browser autofill styling */ }

label {
  display: block;
  font-size: 1.675rem;
  padding: 1.8rem 0 0.6rem 0;
  font-family: clone-rounded-latin, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.25625rem;
  letter-spacing: 0.3rem;
  text-transform: uppercase; }

textarea {
  height: 14.4rem; }

@media only screen and (min-width: 576px) {
  #contact {
    max-width: 36rem; }

  form button {
    margin-top: 0; }

  input, textarea, textarea {
    margin-bottom: 1.2rem;
    width: 75%; }

  label {
    clear: both;
    float: left;
    padding: 0;
    width: 25%; }

  p {
    margin-bottom: 2.4rem; } }
* {
  border: 0;
  box-sizing: border-box;
  /* Border box ensures padding and border are included in width and height of elements */
  margin: 0;
  -webkit-text-size-adjust: none; }

::selection {
  background-color: rgba(20, 186, 175, 0.625); }

body {
  background: #d7d2cb; }

#wrap {
  overflow: hidden; }

.grid-container {
  align-content: start;
  display: grid;
  grid-gap: 0 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* That's 12 equally sized columns */
  margin: 0 auto; }

.grid-container > div {
  grid-column: 1 / span 12; }

#grid-item-contact-form {
  background: #14baaf;
  padding: 2.4rem; }

@media only screen and (min-width: 576px) {
  #grid-item-byline, #grid-item-s2-title, #grid-item-s1-title, #grid-item-splash-01 {
    grid-column: 1 / span 2; }

  #grid-item-strapline {
    grid-column: 3 / span 5; }

  #grid-item-s2-e1 {
    grid-column: 3 / span 10; }

  #grid-item-s1-e5 {
    grid-column: 3 / span 10; }

  #grid-item-s1-e4 {
    grid-column: 3 / span 5; }

  #grid-item-s1-e3 {
    grid-column: 8 / span 5; }

  #grid-item-s1-e2 {
    grid-column: 3 / span 5; }

  #grid-item-s1-e1 {
    grid-column: 8 / span 5; }

  #grid-item-contact-title {
    grid-column: 1 / span 2; }

  #grid-item-contact-form {
    grid-column: 3 / span 10; }

  #grid-item-footer {
    grid-column: 3 / span 10; } }
@media only screen and (min-width: 768px) {
  #grid-item-strapline {
    grid-column: 3 / span 6; } }
header {
  background-image: url("../../images/photos/44991156171_fb0a4dca59_k.png");
  background-position: 90% bottom;
  background-repeat: no-repeat;
  background-size: 9.6rem;
  padding: 0 1.2rem 7.2rem 1.2rem; }
  header h1 {
    font-size: 3.15rem;
    height: 6rem;
    line-height: 6rem;
    margin-bottom: 1.2rem;
    text-transform: lowercase;
    font-family: arek, serif;
    font-weight: 800;
    font-style: normal; }
    header h1 span {
      font-size: 3.15rem;
      font-family: arek, serif;
      font-weight: 800;
      font-style: italic; }
  header h2 {
    margin-bottom: 1.2rem; }
  header h2, header h2 span {
    color: #ff0066;
    font-family: clone-rounded-latin, sans-serif;
    font-weight: 300;
    font-style: normal; }
  header p {
    font-size: 2.25rem;
    line-height: 3rem;
    font-family: arek, serif;
    font-weight: 400;
    font-style: italic; }
    header p span {
      font-size: 100%;
      text-transform: lowercase;
      font-family: arek, serif;
      font-weight: 800;
      font-style: normal; }
      header p span span {
        font-family: arek, serif;
        font-weight: 800;
        font-style: italic; }

@media only screen and (min-width: 576px) {
  header {
    background-size: 24rem;
    height: 50vh;
    padding: 7.2rem 0 2.4rem 0; }
    header h1 {
      left: -7.2rem;
      position: fixed;
      bottom: 7.2rem;
      transform: rotate(-90deg); }
    header h1, header h1 span {
      font-size: 3.6rem; }
    header h2 {
      padding-top: 0.8rem;
      text-align: right; }
      header h2 span {
        display: block; }
    header h3 {
      padding: 0; }
    header p {
      font-size: 2.7rem;
      line-height: 3.6rem;
      padding-left: 2.4rem; } }
@media only screen and (min-width: 1200px) {
  header h2 {
    padding-top: 1.2rem; }
  header p {
    font-size: 3.15rem;
    line-height: 4.2rem; } }
a {
  text-decoration-color: #ff80b3;
  text-underline-offset: 0.3rem;
  transition: color 0.5s linear; }

a:link {
  color: #ff0066; }

a:hover {
  color: #b30047; }

a:visited {
  color: #ff0066; }

a:active {
  color: #b30047; }

.episode {
  background-blend-mode: saturation;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh; }
  .episode figure + button {
    background: transparent;
    border: 0.15rem solid #ff0066;
    color: #ff0066;
    display: inline-block;
    height: 3.6rem;
    position: relative;
    text-decoration: none !important;
    z-index: 1;
    font-family: clone-rounded-latin, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.25625rem;
    letter-spacing: 0.3rem;
    text-transform: uppercase; }
  .episode figure + button:after {
    content: "▶";
    margin-left: 0.6rem; }
  .episode figure + button:hover, .episode figure + button:active {
    background: rgba(255, 0, 102, 0.25);
    color: #ff0066;
    transition: background 0.5s linear; }
  .episode div:first-of-type {
    background: rgba(215, 210, 203, 0.75);
    padding: 2.4rem;
    width: 80%; }
  .episode dt {
    font-family: arek, serif;
    font-weight: 400;
    font-style: italic; }
  .episode h4 span {
    display: block;
    font-family: clone-rounded-latin, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.25625rem;
    letter-spacing: 0.3rem;
    text-transform: uppercase; }
  .episode p {
    margin-bottom: 1.2rem; }
  .episode figcaption, .episode figcaption * {
    position: relative;
    left: 1.2rem;
    text-align: end;
    top: 4.2rem;
    font-family: clone-rounded-latin, sans-serif;
    font-weight: 300;
    font-style: normal; }
    .episode figcaption a, .episode figcaption * a {
      color: rgba(255, 255, 255, 0.75);
      text-decoration-color: rgba(255, 255, 255, 0.75); }
  .episode figure img {
    position: absolute;
    top: -1000000px; }

#grid-item-s2-e1 {
  background-image: linear-gradient(black, black), url("../../images/photos/30457706561_c969365b8c_k.jpg"); }

#grid-item-s1-e5 {
  background-image: linear-gradient(black, black), url("../../images/photos/Fans_before_Brazil_&_Portugal_match_at_World_Cup_2010-06-25_6.jpg"); }

#grid-item-s1-e4 {
  background-image: linear-gradient(black, black), url("../../images/photos/8615762590_b2306a6885_h.jpg"); }

#grid-item-s1-e3 {
  background-image: linear-gradient(black, black), url("../../images/photos/3491856921_1903f876ea_k.jpg"); }

#grid-item-s1-e2 {
  background-image: linear-gradient(black, black), url("../../images/photos/26421803437_1862375fe5_k.jpg"); }

#grid-item-s1-e1 {
  background-image: linear-gradient(black, black), url("../../images/photos/1748421335_9cafd41c67_k.jpg"); }

@media only screen and (min-width: 576px) {
  .episode div:first-of-type {
    width: 60%; } }
body.overlay-navigation header h1, body.overlay-navigation header h2, body.overlay-navigation header p, body.overlay-navigation #splash, body.overlay-navigation main, body.overlay-navigation footer {
  filter: blur(10px); }

body.overlay-navigation header {
  background-image: none; }

#nav-primary-button:before, #nav-primary-button:after, #nav-primary-button span {
  background-color: #06223b;
  content: '';
  display: block;
  height: 0.3rem;
  left: 0;
  margin: 0 1.2rem;
  position: absolute;
  top: 1.44rem;
  transition: all 0.5s ease-in-out;
  width: 3.6rem; }

#nav-primary-button:after {
  top: 4.32rem; }

#nav-primary-button {
  background-color: transparent;
  cursor: pointer;
  height: 6rem;
  position: fixed;
  right: 0;
  top: 0;
  width: 6rem;
  z-index: 2; }
  #nav-primary-button span {
    position: absolute;
    text-indent: -1000000px;
    top: 2.88rem; }

#nav-primary-button:focus {
  outline: 0; }

body.overlay-navigation #nav-primary-button:before, body.overlay-navigation #nav-primary-button:after, body.overlay-navigation #nav-primary-button span, #nav-primary-button body.overlay-navigation span {
  transform: translateY(15px) rotate(45deg); }

body.overlay-navigation #nav-primary-button:after {
  transform: translateY(-14px) rotate(-45deg); }

body.overlay-navigation #nav-primary-button span {
  transform: scale(0); }

#nav-primary {
  background: rgba(255, 0, 102, 0.625);
  height: 100%;
  left: -100%;
  opacity: 0;
  padding: 7.2rem 1.2rem 2.4rem 0;
  position: absolute;
  width: 100% !important;
  z-index: 1;
  transition: opacity 0.5s linear; }
  #nav-primary a {
    color: #06223b;
    font-size: 3.6rem;
    display: block;
    padding: 2.4rem;
    text-decoration: none; }
  #nav-primary li {
    list-style: none; }

body.overlay-navigation #nav-primary {
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0; }

body.overlay-player #nav-primary-button {
  display: none; }

.player {
  background-blend-mode: saturation;
  background-color: rgba(20, 186, 175, 0.625) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: 100%;
  left: -100%;
  opacity: 0;
  padding: 7.2rem 1.2rem 2.4rem 0;
  position: absolute;
  width: 100% !important;
  z-index: 1;
  transition: opacity 0.5s linear; }

.play .player {
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  z-index: 2; }

.play .player:before {
  background: rgba(20, 186, 175, 0.625);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; }

.player button {
  margin-top: 2.4rem; }

#grid-item-splash-02.play .player {
  background-image: linear-gradient(black, black), url("../../images/photos/30248321871_f87554685a_k.jpg"); }

#grid-item-s2-e1.play .player {
  background-image: linear-gradient(black, black), url("../../images/photos/30457706561_c969365b8c_k.jpg"); }

#grid-item-s1-e5.play .player {
  background-image: linear-gradient(black, black), url("../../images/photos/Fans_before_Brazil_&_Portugal_match_at_World_Cup_2010-06-25_6.jpg"); }

#grid-item-s1-e4.play .player {
  background-image: linear-gradient(black, black), url("../../images/photos/8615762590_b2306a6885_h.jpg"); }

#grid-item-s1-e3.play .player {
  background-image: linear-gradient(black, black), url("../../images/photos/3491856921_1903f876ea_k.jpg"); }

#grid-item-s1-e2.play .player {
  background-image: linear-gradient(black, black), url("../../images/photos/26421803437_1862375fe5_k.jpg"); }

#grid-item-s1-e1.play .player {
  background-image: linear-gradient(black, black), url("../../images/photos/1748421335_9cafd41c67_k.jpg"); }

#splash {
  background-blend-mode: saturation;
  background-image: linear-gradient(black, black), url("../../images/photos/30248321871_f87554685a_k.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%; }

#grid-item-splash-01 h3 {
  background: #ff0066;
  border-left-color: #06223b;
  color: #d7d2cb; }

@media only screen and (min-width: 576px) {
  #splash #grid-item-splash-01 h3 {
    background: none;
    border: none;
    color: #ff0066; }
  #splash #grid-item-splash-02 {
    grid-column: 3 / span 10; } }
html {
  font-size: 62.5%;
  /* That's 10px, since default size for most browsers is 16px (100%) */ }

* {
  color: #06223b;
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-family: arek, serif;
  font-weight: 400;
  font-style: normal; }

b, strong {
  font-family: arek, serif;
  font-weight: 700;
  font-style: normal; }

em, italic {
  font-family: arek, serif;
  font-weight: 400;
  font-style: italic; }

b em, b italic, strong em, strong italic, em b, em strong, italic b, italic strong {
  font-family: arek, serif;
  font-weight: 700;
  font-style: italic; }

h3 {
  background: #06223b;
  border-left: 1.2rem solid #ff0066;
  color: #d7d2cb;
  padding: 0.6rem 1.2rem;
  padding: 0.3rem 1.2rem 0.9rem 1.2rem;
  font-family: arek, serif;
  font-weight: 700;
  font-style: normal; }

h4 {
  font-size: 3.6rem;
  line-height: 3.6rem;
  margin-bottom: 1.2rem; }

small, footer dl, footer dl *, footer h4, figcaption, figcaption * {
  font-size: 1.465625rem; }

@media only screen and (min-width: 576px) {
  h2, h3 {
    background: none;
    border: none;
    color: #06223b;
    padding: 2.4rem 2.4rem 0 1.2rem;
    text-align: right; } }