@charset "UTF-8";
/* line 25, global/scss/t3_modules/video-mode/video-mode.scss */
.video-mode {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none; }

/* compass imports */
/* background image --------------------------------- */
/* font families ------------------------------------ */
/*
$fontfamilyBold:'HelveticaNeue-75-Bold', 'Helvetica', Arial,  sans-serif !default;
$fontfamilyItalic:'HelveticaNeue-56-Italic', 'Helvetica', Arial, sans-serif !default;
$fontfamilyBoldItalic:'HelveticaNeue-76-Bold-Italic', 'Helvetica', Arial, sans-serif !default;

$fontfamilyLight:'HelveticaNeue-45-Light', 'Helvetica', Arial, sans-serif !default;
$fontfamilyLightBold: $fontfamilyBold;
$fontfamilyLightItalic:'HelveticaNeue-46-Light-Italic', 'Helvetica', Arial, sans-serif !default;
$fontfamilyLightBoldItalic: $fontfamilyBoldItalic;
*/
/* 404 & 403 error pages ------------------------------------ */
/* SBS colours ---------------------------------------- */
/* generic colours ------------------------------------ */
/* spacing ------------------------------------------ */
/* configuration ------------------------------------ */
/* grid variables ------------------------------------ */
/* Used in print */
/* preset image sizes ------------------------------------ */
/* ==========
  Scrollers
========== */
/* ==============
  Theme folder names
=================*/
/* categorised mixins */
/* Overlay mixins */
/**
** Misc mixins
*/
/* line 389, global/scss/mixins/_icons.scss */
.video-mode__close-btn:after {
  *margin-right: .3em;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  font-family: "FontAwesome" !important;
  font-weight: normal !important;
  font-style: normal !important;
  display: inline-block;
  speak: none; }

/* ====
mobile mix ins
==== */
/* ====
Tablet mix ins
==== */
/* use placeholders whenever possible for more efficient CSS! */
/* line 10, global/scss/t3_modules/video-mode/_video-mode__header.scss */
.video-mode__header {
  height: 40px;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2020;
  animation-name: video-mode__header-animate-in;
  animation-duration: 400ms;
  animation-delay: 1200ms;
  animation-fill-mode: both;
  animation-direction: alternate; }
  /* line 28, global/scss/t3_modules/video-mode/_video-mode__header.scss */
  .video-mode__header--is-dormant {
    background-color: black;
    opacity: 0.9; }

/* line 35, global/scss/t3_modules/video-mode/_video-mode__header.scss */
.video-mode__header-heading {
  font-size: 14px;
  line-height: 1;
  padding: 13px 20px;
  text-align: center;
  color: white;
  font-weight: normal; }

@keyframes video-mode__header-animate-in {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0); } }

/* line 55, global/scss/t3_modules/video-mode/_video-mode__header.scss */
.video-mode__close-btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2011;
  color: white;
  font-size: 0;
  padding: 10px;
  margin: 0;
  width: 20px;
  height: 20px;
  line-height: 1;
  vertical-align: middle; }
  /* line 455, global/scss/mixins/_icons.scss */
  .video-mode__close-btn:after {
    color: white;
    content: "";
    font-size: 20px !important; }
  /* line 480, global/scss/mixins/_icons.scss */
  .video-mode__close-btn.disabled:after {
    color: white !important; }

/* line 5, global/scss/t3_modules/video-mode/_video_mode__overlay.scss */
.video-mode__overlay {
  background: #1b2024;
  opacity: 1;
  z-index: 2000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation-name: video-mode__overlay-animate-in;
  animation-duration: 600ms;
  animation-fill-mode: forwards; }

@keyframes video-mode__overlay-animate-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/**
 * This mixin is re-used by the video player container div, the video player
 * placeholder image and the iframe VOD player element.
 */
/* line 16, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__modal {
  z-index: 2001;
  margin: 60px auto 0 auto;
  width: 900px;
  max-width: calc(100% - 40px);
  position: fixed;
  left: 0;
  right: 0;
  top: 20px; }

/* line 32, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__video-player {
  width: 100%;
  height: calc((100vw / 16) * 9);
  max-height: 506.25px;
  position: relative;
  z-index: 2002;
  overflow: hidden; }

/* line 39, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__iframe,
.video-mode__placeholder {
  width: 100%;
  height: calc((100vw / 16) * 9);
  max-height: 506.25px;
  position: relative;
  background-color: black;
  z-index: 2003; }

/* line 47, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__placeholder {
  z-index: 2000;
  background-color: rgba(40, 40, 40, 0.2);
  opacity: 0; }
  /* line 52, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
  .video-mode__placeholder--cover-video {
    z-index: 2003;
    opacity: 1;
    filter: blur(0);
    transform: scale(1); }
  /* line 59, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
  .video-mode__placeholder--fade-out {
    opacity: 0;
    transition: opacity 1s ease-in-out, filter 1s ease-in-out, transform 1s ease-in-out;
    filter: blur(4px);
    transform: scale(1.05); }

/* line 70, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__placeholder {
  transform: translateY(-100%); }

/* line 74, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__video-info {
  position: relative;
  z-index: 2003;
  padding: 0; }

/* line 80, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__video-description,
.video-mode__video-title {
  color: whitesmoke;
  margin: 11px 0; }

/* line 86, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__video-title {
  font-family: "Museo-Slab-500";
  font-size: 22px;
  letter-spacing: -0.5px;
  line-height: 1;
  font-weight: normal; }
  @media only screen and (min-width: 1px) and (max-width: 782px) {
    /* line 86, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
    .video-mode__video-title {
      font-size: 18px;
      margin-top: 20px; } }

/* line 99, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__video-description {
  font-family: "Roboto";
  font-size: 14px;
  line-height: 1.25;
  color: #5F6D81; }

/* line 106, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__duration {
  display: inline-block;
  margin: 0;
  color: #5F6D81;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.4px;
  vertical-align: middle;
  text-transform: uppercase; }

/* line 120, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__links {
  margin: 22px 0 0 0; }

/* line 124, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__share-links {
  display: inline-block;
  float: right; }

/* line 129, global/scss/t3_modules/video-mode/_video-mode__modal.scss */
.video-mode__share-link {
  border: none;
  overflow: hidden; }

/* line 49, global/scss/t3_modules/video-mode/video-mode.scss */
body.video-mode--is-active {
  overflow-y: scroll;
  position: fixed; }
  /* line 53, global/scss/t3_modules/video-mode/video-mode.scss */
  body.video-mode--is-active .video-mode {
    display: block; }
