/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/** 1. Set default font family to sans-serif. 2. Prevent iOS and IE text size adjust after device orientation change, without disabling user zoom. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability of focused elements when they are also in an active/hover state. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

/* Spinner
------------------------- */

@keyframes spinner { 0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes pop { 0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); } }

body { background: #dedede; }

p { margin: 0; }

.link:hover, .link:focus { text-decoration: underline; }

#page-container { margin: 0 auto; min-width: 320px; }

header { background-color: #fff; }

.accessibility { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

body, button { font-family: 'c4.text.lowercase','c4.text.uppercase','c4.text.numbers','c4.text.punctuation','c4.text.currency','c4.text.maths',"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans", Arial,sans-serif; }

body { font-size: .875em; line-height: 20px; }

.h1, .dateChannelPicker-title, .h2, .h3, .h4, .ep-title, .h5, .epIndicatorLabel, .h6 { font-family: 'c4.headline.lowercase','c4.headline.uppercase','c4.headline.numbers','c4.headline.currency','c4.headline.maths',"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif; margin: 0; font-weight: bold; }

.h1, .dateChannelPicker-title { font-size: 32px; }

.f2, .h2 { font-size: 24px; }

.f3, .reminderModal-title, .reminderModalBtn, .h3 { font-size: 18px; }

.f4, .notification-label, .h4, .ep-title { font-size: 16px; }

.f5, .reminderModal-close, .ep-time, .ep-summary, .h5, .epIndicatorLabel { font-size: 14px; }

a { text-decoration: none; color: inherit; }

ol, ul, li { margin: 0; padding: 0; list-style: none; }

button { border: 0; font-size: inherit; }

abbr { border: 0; cursor: help; }

/* Global Four Icons Style Rules */
/* Fonts can be used in 2 ways 1. Adding the relevant class to your HTML eg <div class="icon-accept"></div> 2. Extending your class in less eg my-element { &:extend(.icon-arrow-down all) }; */
@font-face { font-family: "fouricons"; src: url("../fonts/fouricons.eot"); src: url("../fonts/fouricons.eot?#iefix") format("embedded-opentype"), url("../fonts/fouricons.woff") format("woff"), url("../fonts/fouricons.ttf") format("truetype"), url("../fonts/fouricons.svg#fouricons") format("svg"); font-weight: normal; font-style: normal; }

@media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: 'fouricons'; src: url("fonts/fouricons.svg#fouricons") format("svg"); } }

.icon-accept:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "a"; }

.icon-arrow-down:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "b"; }

.icon-arrow-up:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "e"; }

.icon-audio-description:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "3"; }

.icon-calendar:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "f"; }

.icon-camera:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "g"; }

.icon-cancel:before, .reminderModal-close:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "h"; }

.icon-chevron-down:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "2"; }

.icon-chevron-left:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "c"; }

.icon-chevron-right:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "d"; }

.icon-chevron-up:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "1"; }

.icon-clock:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "4"; }

.icon-devices:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "i"; }

.icon-discover:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "j"; }

.icon-download:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "k"; }

.icon-edit:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "l"; }

.icon-email:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "W"; }

.icon-exit-full-screen:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "m"; }

.icon-facebook:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "n"; }

.icon-first:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "o"; }

.icon-follow:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "p"; }

.icon-full-screen:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "q"; }

.icon-google:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "r"; }

.icon-guidance:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "5"; }

.icon-guide:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "s"; }

.icon-history:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "t"; }

.icon-information:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "6"; }

.icon-repeat:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "9"; }

.icon-last:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "u"; }

.icon-locked:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "v"; }

.icon-menu:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "7"; }

.icon-notification-empty:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "w"; }

.icon-notification-new:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "x"; }

.icon-overflow:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "X"; }

.icon-overflow-vertical:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "Z"; }

.icon-paper:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "y"; }

.icon-pause:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "z"; }

.icon-pinterest:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "A"; }

.icon-play:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "B"; }

.icon-pop-out:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "D"; }

.icon-reminder-off:before, .reminderModalBtn.reminderModalBtn--set:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "E"; }

.icon-reminder-set:before, .reminderModalBtn.reminderModalBtn--cancel:before, .ep-reminder:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "F"; }

.icon-replay:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "G"; }

.icon-resume:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "H"; }

.icon-search:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "I"; }

.icon-settings:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "J"; }

.icon-sign-in:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "Y"; }

.icon-sign-out:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "K"; }

.icon-stop:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "L"; }

.icon-subtitles:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "8"; }

.icon-tumblr:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "M"; }

.icon-twitter:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "N"; }

.icon-unfollow:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "O"; }

.icon-unlocked:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "P"; }

.icon-user:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "Q"; }

.icon-view-as-grid:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "R"; }

.icon-volume-muted:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "S"; }

.icon-volume-on:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "T"; }

.icon-warning:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "U"; }

.icon-watching:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "V"; }

/* Module Styling */
.skipLink-container { position: absolute; left: 0; top: 0; margin-left: 0; list-style: outside none; }

@media only screen and (min-width: 500px) { .leaderboard { width: 728px; height: 90px; margin: 1em auto; background-color: #e4a11f; display: -ms-flexbox; display: flex; } }

.all4NavHeader { width: 100%; margin: auto; background: #fff; }

.all4nav .all4nav-header-navigation { max-width: 1160px; }

.skipLink { position: absolute; left: -99999px; top: 0; padding: 3px; }

.skipLink:focus, .skipLink:active { position: relative; left: 0; z-index: 100; outline: none; background: white; color: #000; }

.skipLinksMain { position: absolute; left: 0; top: 0; }

.accessibilityLabel { position: absolute; left: -99999px; top: 0; padding: 3px; }

.dateChannelPicker { width: 100%; height: 190px; background-color: #454d58; position: relative; }

.dateChannelPicker-title-wrapper { width: 100%; overflow: hidden; line-height: 70px; }

.dateChannelPicker-title { padding: 0; margin: 0 0 0 10px; color: #fff; }

.dateChannelPicker-sticky-ghost { top: 0; position: relative; height: 120px; width: 100%; }

.dateChannelPicker-sticky-wrapper { width: 100%; position: absolute; bottom: 0; height: 122px; z-index: 1; transform: translateZ(0); -ms-transform: translateZ(0); backface-visibility: hidden; }

.dateChannelPicker-sticky-wrapper.sticky-nav { position: fixed; backface-visibility: hidden; top: 0; z-index: 1; }

@media only screen and (min-width: 500px) { .dateChannelPicker { height: 70px; width: 100%; }
  .dateChannelPicker-title-wrapper { float: left; width: 230px; }
  .dateChannelPicker-sticky-wrapper { -ms-transform: none; transform: none; position: static; width: auto; overflow: hidden; margin-right: 15px; }
  .dateChannelPicker-sticky-ghost { display: none; }
  .dateChannelPicker-title { margin: 0 0 0 15px; } }

@media only screen and (min-width: 1625px) { .dateChannelPicker-title-wrapper { position: absolute; width: 230px; }
  .dateCarousel { margin: auto; } }

.channelPicker { width: 100%; height: 52px; }

.channelPicker-channelBar { width: 100%; position: absolute; bottom: 0; left: 0; height: 10px; background-color: #f4f3f4; }

.channelBar { background-color: #000; }

@media only screen and (min-width: 500px) { .channelPicker { top: 120px; width: 70px; height: 695px; position: absolute; z-index: 1; left: 0; display: block; }
  .channelPicker-channelBar { display: none; } }

@media only screen and (min-width: 500px) { .channelPicker { width: 50px; } }

@media only screen and (min-width: 760px) { .channelPicker { width: 60px; } }

@media only screen and (min-width: 1000px) { .channelPicker { width: 80px; } }

.channelPickerItem { display: block; position: relative; text-align: center; outline: 0; width: 16.6666666666%; height: 52px; float: left; }

.channelPickerItem.isSelected { background: #f4f3f4; }

.channelPickerItem.isSelected:before { background: #f4f3f4; }

.channelPickerItem.isSelected [id^="digit"] { fill: #192d48 !important; }

.channelPickerItem #LogoChannel4, .channelPickerItem #LogoE4, .channelPickerItem #LogoMore4, .channelPickerItem #LogoSeven4, .channelPickerItem #LogoMusic4, .channelPickerItem #LogoFilm4 { height: 30px; fill-rule: evenodd; }

.channelPickerItem #LogoChannel4, .channelPickerItem #LogoE4 { width: 21.6px; }

.channelPickerItem #LogoMore4 { width: 40px; }

.channelPickerItem #LogoSeven4 { width: 22.5px; }

.channelPickerItem #LogoMusic4 { width: 47.5px; }

.channelPickerItem #LogoFilm4 { width: 31.6px; }

.channelPickerItem--wrapper:not(.isSelected) .channelPickerItem { border-left: 2px solid #444d58; }

.channelPickerItem--wrapper.isSelected + .channelPickerItem--wrapper .channelPickerItem { border-left: 2px solid #000; }

.channelPickerItem--outer { display: block; margin: 9px auto 0 auto; }

.channelPickerItem--tooltip { display: none; }

.channelPickerItem:focus { background: #fff; }

.channelPickerItem-image { margin: 0 auto; height: 30px; display: block; }

.channelPickerItem:focus:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; }

.channelPickerItem.isSelected:before, .channelPickerItem:focus:before { content: ""; width: 100%; height: 5px; position: absolute; left: 0; top: -4px; }

.channelPickerItem, .channelPickerItem:before { background-color: #000; }

@media only screen and (min-width: 500px) { .channelPickerItem { width: 60px; display: table; height: 112px; margin-bottom: 5px; cursor: default; transition: height 0.3s ease; pointer-events: none; }
  .channelPickerItem:focus .channelPickerItem--tooltip { display: block; }
  .channelPickerItem--tooltip { background: #fff; border: 1px solid #000; height: 23px; line-height: 23px; z-index: 10; padding-left: 0.75em; padding-right: 0.75em; outline: none; display: none; position: absolute; color: #2C3238; left: 0; bottom: 0; width: auto; }
  .channelPickerItem--tooltip--C4 { width: 180px; }
  .channelPickerItem--tooltip--E4 { width: 140px; }
  .channelPickerItem--tooltip--M4 { width: 162px; }
  .channelPickerItem--tooltip--4S { width: 168px; }
  .channelPickerItem--tooltip--F4 { width: 160px; }
  .channelPickerItem--tooltip--4M { width: 168px; }
  .channelPickerItem--expanded { height: 271px; }
  .channelPickerItem--outer { display: table-cell; vertical-align: middle; }
  .channelPickerItem:focus:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); }
  .channelPickerItem.channelPicker--fm { margin-bottom: 0; }
  .channelPickerItem.isSelected:before { display: none; }
  .channelPickerItem:hover:before { display: none; } }

@media only screen and (min-width: 500px) { .channelPickerItem { width: 50px; text-align: left; padding-left: 9px; }
  .channelPickerItem #LogoChannel4, .channelPickerItem #LogoE4, .channelPickerItem #LogoMore4, .channelPickerItem #LogoSeven4, .channelPickerItem #LogoMusic4, .channelPickerItem #LogoFilm4 { height: 24px; }
  .channelPickerItem #LogoChannel4, .channelPickerItem #LogoE4 { width: 17px; }
  .channelPickerItem #LogoMore4 { width: 32px; }
  .channelPickerItem #LogoSeven4 { width: 18px; }
  .channelPickerItem #LogoMusic4 { width: 38px; }
  .channelPickerItem #LogoFilm4 { width: 25px; }
  .channelPickerItem--wrapper:not(.isSelected) .channelPickerItem { border: 0; }
  .channelPickerItem--wrapper.isSelected + .channelPickerItem--wrapper .channelPickerItem { border: 0; }
  .channelPickerItem--expanded { height: 399px; } }

@media only screen and (min-width: 670px) { .channelPickerItem { width: 60px; }
  .channelPickerItem #LogoChannel4, .channelPickerItem #LogoE4, .channelPickerItem #LogoMore4, .channelPickerItem #LogoSeven4, .channelPickerItem #LogoMusic4, .channelPickerItem #LogoFilm4 { height: 30px; }
  .channelPickerItem #LogoChannel4, .channelPickerItem #LogoE4 { width: 21.6px; }
  .channelPickerItem #LogoMore4 { width: 40px; }
  .channelPickerItem #LogoSeven4 { width: 22.5px; }
  .channelPickerItem #LogoMusic4 { width: 47.5px; }
  .channelPickerItem #LogoFilm4 { width: 31.6px; }
  .channelPickerItem--expanded { height: 323px; } }

@media only screen and (min-width: 760px) { .channelPickerItem { width: 60px; }
  .channelPickerItem--expanded { height: 323px; } }

@media only screen and (min-width: 1000px) { .channelPickerItem-image { height: 45px; }
  .channelPickerItem { width: 80px; }
  .channelPickerItem #LogoChannel4, .channelPickerItem #LogoE4, .channelPickerItem #LogoMore4, .channelPickerItem #LogoSeven4, .channelPickerItem #LogoMusic4, .channelPickerItem #LogoFilm4 { height: 40px; }
  .channelPickerItem #LogoChannel4, .channelPickerItem #LogoE4 { width: 28.8px; }
  .channelPickerItem #LogoMore4 { width: 53px; }
  .channelPickerItem #LogoSeven4 { width: 30px; }
  .channelPickerItem #LogoMusic4 { width: 63px; }
  .channelPickerItem #LogoFilm4 { width: 42px; }
  .channelPickerItem--expanded { height: 271px; } }

.dateCarousel { -ms-flex-align: center; align-items: center; width: 100%; height: 60px; position: relative; background: #373e46; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.dateCarousel-right-handle-wrapper, .dateCarousel-left-handle-wrapper { position: absolute; width: 30px; height: 100%; left: 0; top: 0; font-size: 25px; }

.dateCarousel-right-handle-wrapper { left: auto; right: 0; }

.dateCarousel-left-handle, .dateCarousel-right-handle { background: #2C3238; width: 100%; height: 100%; border: none; outline: 0; color: #fff; padding: 0; opacity: 1; position: absolute; }

.dateCarousel-left-handle:hover, .dateCarousel-right-handle:hover { background-color: #21252a; }

.dateCarousel-handle--focus { background-color: #ffffff; color: #565656; outline: none; }

.dateCarousel-handle--disabled { pointer-events: none; }

.dateCarousel-handle--disabled:after { color: #454d58; }

.dateCarousel-handle--disabled:focus { background-color: #2C3238; }

.dateCarousel-right-handle:after, .dateCarousel-left-handle:after { transition: color .4s; font-family: "fouricons"; display: block; height: 60px; line-height: 60px; font-size: 25px; }

.dateCarousel-left-handle:after { content: "c"; }

.dateCarousel-right-handle:after { content: "d"; }

.dateCarousel-wrapper { height: 100%; margin: 0 30px; overflow-y: hidden; }

.dateCarousel-container { white-space: nowrap; overflow-x: scroll; overflow-y: hidden; height: 90px; -webkit-overflow-scrolling: touch; }

.dateCarousel-scroll-hide { height: 60px; }

@media only screen and (min-width: 500px) { .dateCarousel { height: 70px; background: transparent; max-width: 1286px; }
  .dateCarousel-scroll-hide { height: 70px; }
  .dateCarousel-left-handle, .dateCarousel-right-handle { width: 30px; height: 30px; border-radius: 50%; margin-top: -15px; top: 50%; }
  .dateCarousel-wrapper { margin: 0 45px; }
  .dateCarousel-right-handle:after, .dateCarousel-left-handle:after { height: 30px; line-height: 32px; font-size: 17px; } }

.dateItem { width: 100px; height: 100%; display: inline-block; }

.dateItem-link { border-radius: 20px; display: block; width: 90px; text-align: center; line-height: 29px; cursor: pointer; color: #fff; background: #2C3238; position: absolute; top: 50%; margin-top: -15px; left: 5px; }

.dateItem-link:hover { background-color: #21252a; }

.dateItem-link:focus { background-color: #ffffff; color: #565656; outline: none; }

.filterNav-dateItem-link { opacity: 1; /* Safari */ transition: opacity .4s, background .4s .2s; }

.dateItem-loading { opacity: 0; /* Safari */ transition: opacity .4s; position: absolute; left: 50%; margin-left: -32px; }

.dateItem--is-loading .filterNav-dateItem-link { opacity: 0; }

.dateItem--is-loading .dateItem-loading { opacity: 1; }

.dateItem-wrapper { position: relative; width: 100%; height: 100%; }

.dateItem--is-selected .dateItem-link { background: #fff; color: #565656; }

@media only screen and (min-width: 500px) { .dateItem-link { background: #2C3238; } }

.reminderModal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; opacity: 1; transition: opacity 0.2s ease-out; }

.reminderModal.anim-enter, .reminderModal.anim-leave { opacity: 0; }

.reminderModal-overlay { position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.5; }

.reminderModal-container { position: absolute; background: #fff; width: 100%; padding: 15px 25px; left: 0; right: 0; margin-left: 0; margin-top: 0; bottom: 0; top: auto; height: auto; opacity: 1; transition: bottom 0.2s ease-out; }

.anim-enter .reminderModal-container, .anim-leave .reminderModal-container { bottom: -30px; }

.reminderModal-close { color: #426688; position: absolute; right: 25px; top: 15px; background: transparent; padding-right: 25px; }

.reminderModal-close.icon-cancel:before, .reminderModal-close:before { right: 0; top: 1px; font-size: 20px; display: inline-block; position: absolute; }

.reminderModal-title { color: #426688; margin-top: 40px; }

.reminderModal-content { overflow: hidden; margin-bottom: 85px; padding-bottom: 40px; position: relative; }

.reminderModal--actionCancel .reminderModal-content { margin-bottom: 0px; }

.reminderModal-imageOuter { display: none; float: left; width: 220px; height: 123px; margin-right: 15px; margin-top: 2px; background-color: #dedede; }

.reminderModal-image { max-width: 100%; }

.reminderModal-synopsis { display: block; width: auto; }

.reminderModal--actionCancel .reminderModal-synopsis { min-height: initial; }

.reminderModal--noImage .reminderModal-synopsis { width: 100%; }

.reminderModal-p { font-size: 15px; margin-bottom: 10px; }

.reminderModal-link { color: #426688; }

.reminderModal-link:hover, .reminderModal-link:focus { text-decoration: underline; }

.reminderModal-cbx { vertical-align: middle; }

.reminderModal--actionSet .reminderModal-action { border-top: 2px solid #cfcfcf; padding-top: 20px; position: absolute; bottom: 55px; left: 25px; right: 25px; }

.reminderModalBtn { background-color: #426688; color: #fff; height: 45px; line-height: 45px; padding: 0 20px; min-width: 170px; position: relative; }

.reminderModalBtn:hover, .reminderModalBtn:focus { background-color: #3a5977; }

.reminderModalBtn.reminderModalBtn--set { padding-left: 60px; }

.reminderModalBtn.reminderModalBtn--cancel { padding-left: 60px; bottom: 0; margin-top: 10px; }

.reminderModalBtn.reminderModalBtn--set:before, .reminderModalBtn.reminderModalBtn--cancel:before { font-size: 30px; background-color: #3a5977; color: #fff; position: absolute; display: inline-block; left: 0; bottom: 0; height: 45px; width: 40px; line-height: 45px; }

.reminderModalBtn.reminderModalBtn--login { width: 100%; }

@media only screen and (min-width: 500px) { .reminderModal-container { padding: 15px; }
  .reminderModal-close { right: 15px; top: 29px; }
  .reminderModal-title { margin-top: 15px; }
  .reminderModal-imageOuter { display: block; width: 220px; height: 123px; }
  .reminderModal-content .reminderModalBtn { position: absolute; bottom: 40px; left: 235px; }
  .reminderModalBtn.reminderModalBtn--login { width: auto; }
  .reminderModal--actionSet .reminderModal-action { left: 15px; right: 15px; } }

@media only screen and (min-width: 760px) { .reminderModal-imageOuter { width: 280px; height: 157px; }
  .reminderModal-content .reminderModalBtn { left: 295px; } }

@media only screen and (min-width: 1000px) { .reminderModal-container { width: 500px; left: 50%; top: 50%; bottom: auto; margin-left: -250px; transition: margin-top 0.2s ease-out; }
  .anim-enter .reminderModal-container, .anim-leave .reminderModal-container { bottom: auto; }
  .reminderModal--actionSet .reminderModal-container { min-height: 294px; margin-top: -147px; }
  .anim-enter.reminderModal--actionSet .reminderModal-container, .anim-leave.reminderModal--actionSet .reminderModal-container { margin-top: -117px; }
  .reminderModal--actionCancel .reminderModal-container { min-height: 228px; margin-top: -114px; }
  .anim-enter.reminderModal--actionCancel .reminderModal-container, .anim-leave.reminderModal--actionCancel .reminderModal-container { margin-top: -84px; }
  .reminderModal--loggedOut .reminderModal-container { min-height: 390px; margin-top: -195px; }
  .anim-enter.reminderModal--loggedOut .reminderModal-container, .anim-leave.reminderModal--loggedOut .reminderModal-container { margin-top: -165px; }
  .reminderModal-content { padding-bottom: 0px; }
  .reminderModal-imageOuter { width: 220px; height: 123px; }
  .reminderModal-synopsis { float: left; width: 235px; }
  .reminderModal-content .reminderModalBtn { left: 235px; bottom: 0; }
  .reminderModal--actionSet .reminderModal-action { bottom: 20px; } }

.notification { display: block; padding: 20px 50px 20px 20px; min-height: 45px; position: fixed; background: #fff; z-index: 1; left: 5px; right: 5px; bottom: 25px; text-align: left; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4); opacity: 1; transition: opacity 0.2s ease-out, bottom 0.2s ease-out; }

.notification.anim-enter, .notification.anim-leave { opacity: 0; bottom: 5px; }

.notification--success { background: #34841A; }

.notification--warning { background: #F3C63F; }

.notification--error { background: #CA0003; }

.notification-label { font-size: 15px; color: #fff; }

.notification-label a { text-decoration: underline; }

.notification-label--hasIcon.icon-accept:before { margin-right: 10px; vertical-align: middle; }

.notification-cancel { position: absolute; right: 10px; color: #fff; cursor: pointer; top: 10px; padding: 10px; }

.notification-cancel:before { font-size: 18px; }

.notification--warning .notification-label, .notification--warning .notification-cancel { color: #222222; }

@media only screen and (min-width: 1000px) { .notification { max-width: 1000px; left: 50%; bottom: 5px; margin-left: -500px; text-align: center; }
  .notification.anim-enter, .notification.anim-leave { bottom: -15px; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

/* Spinner
------------------------- */

@keyframes spinner { 0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes pop { 0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); } }

.now { display: none; }

@media only screen and (min-width: 500px) { .now { position: absolute; z-index: 7; top: 0; width: 44px; height: 100%; transform: translateX(-44px); -ms-transform: translateX(-44px); pointer-events: none; }
  .csstransitions .now { -moz-opacity: 0; -moz-animation-name: fadeIn; -moz-animation-duration: 0.4s; -moz-animation-fill-mode: forwards; -moz-animation-delay: 0s; -webkit-opacity: 0; -webkit-animation-name: fadeIn; -webkit-animation-duration: 0.4s; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: 0s; -o-opacity: 0; -o-animation-name: fadeIn; -o-animation-duration: 0.4s; -o-animation-fill-mode: forwards; -o-animation-delay: 0s; -ms-opacity: 0; -ms-animation-name: fadeIn; -ms-animation-duration: 0.4s; -ms-animation-fill-mode: forwards; -ms-animation-delay: 0s; opacity: 0; animation-name: fadeIn; animation-duration: 0.4s; animation-fill-mode: forwards; animation-delay: 0s; }
  .now.now--visible { display: block; }
  .now-line { margin-bottom: 5px; display: block; position: relative; height: 112px; transition: height .2s; }
  .now-line:before { content: ""; width: 2px; margin-left: -1px; height: 100%; background: #a3abb3; position: absolute; left: 50%; top: 0; transition: opacity .2s; }
  .now-wrapper { margin-bottom: 15px; margin-top: 10px; width: 44px; height: 25px; display: table; background: #fff; text-align: center; z-index: 2; position: relative; }
  .now-wrapper:before { content: ""; width: 8px; height: 8px; position: absolute; bottom: -4px; background: #fff; -ms-transform: rotate(45deg); transform: rotate(45deg); left: 50%; margin-left: -4px; }
  .now-label { display: table-cell; vertical-align: middle; text-transform: uppercase; font-size: 10px; }
  .now-line--mask { height: 399px; }
  .now-line--mask:before { opacity: 0; } }

@media only screen and (min-width: 760px) { .now-line--mask { height: 323px; } }

@media only screen and (min-width: 1000px) { .now-line--mask { height: 271px; } }

.schedule { overflow-x: hidden; overflow-y: hidden; position: relative; transform: translateZ(0); -ms-transform: translateZ(0); backface-visibility: hidden; }

.keyboardInstructions-schedulePagination { background: #fff; border: 1px solid #000; height: 23px; line-height: 23px; z-index: 10; padding-left: 0.75em; padding-right: 0.75em; outline: none; position: absolute; bottom: 0; left: -999px; display: block; }

.keyboardInstructions-schedulePagination:focus { left: 0; }

.epg-container * { box-sizing: border-box; }

.schedule-handle { display: none; }

.schedule--left-handle:after, .schedule--right-handle:after { transition: color .4s; font-family: "fouricons"; font-size: 25px; height: 45px; width: 100%; line-height: 45px; }

.schedule--left-handle:after { content: "c"; }

.schedule--right-handle:after { content: "d"; }

.schedule-handle--disabled:after { color: #454d58; }

.schedule-scrollpane { -ms-transform: translateX(-100%); transform: translateX(-100%); }

.epg-container--mobileExpanded .schedule-scrollpane { margin-bottom: 500px; }

@media only screen and (min-width: 500px) { #EPG { position: relative; }
  .epg-container--mobileExpanded .schedule-scrollpane { margin-bottom: 0; }
  .schedule-scrollpane { -ms-transform: none; transform: none; overflow-x: visible; overflow-y: hidden; position: relative; padding-bottom: 20px; transition: height 0s .3s; }
  .schedule-handle { display: block; position: absolute; top: 70px; left: 0; height: 45px; outline: none; border: 0; padding: 0; margin: 0; width: 30px; z-index: 1; background-color: #2C3238; color: #fff; }
  .schedule-handle:hover { background-color: #21252a; }
  .schedule-handle:focus { background-color: #ffffff; transition: background-color .2s .1s; color: #2C3238; }
  .schedule--left-handle:before { z-index: -1; content: ""; background: #383F47; width: 55px; height: 45px; position: absolute; top: 0; left: 30px; }
  .schedule--right-handle { left: auto; right: 0; } }

@media only screen and (min-width: 500px) { .schedule { height: 100%; }
  .schedule-scrollpane { height: 100%; }
  .schedule { margin-left: 55px; }
  .schedule--left-handle:before { width: 25px; } }

@media only screen and (min-width: 760px) { .schedule { margin-left: 65px; }
  .schedule--left-handle:before { width: 35px; } }

@media only screen and (min-width: 1000px) { .schedule { margin-left: 85px; }
  .schedule--left-handle:before { width: 55px; } }

.timeSlots { display: none; }

@media only screen and (min-width: 500px) { .timeSlots { display: block; white-space: nowrap; font-size: 0; height: 45px; }
  .timeSlot { width: 240px; height: 100%; display: inline-block; background: #383F47; }
  .timeSlots-wrapper { display: table; width: 100%; height: 100%; }
  .timeSlots-label { font-size: 15px; color: #fff; display: table-cell; vertical-align: middle; text-indent: 15px; position: relative; }
  .timeSlots-label:before { content: ""; position: absolute; width: 2px; height: 15px; background: #60656c; left: 0; top: 50%; margin-top: -8px; } }

.channelItem { padding: 5px 10px; position: relative; display: none; }

.channelItem--isSelected { display: block; z-index: 1; }

@media only screen and (min-width: 500px) { .channelItem { display: block; white-space: nowrap; padding: 5px 0 0 0; }
  .channelItem:first-child { border: 21px solid green; margin-top: 154px; }
  .channelItem-wrapper { transition: transform .3s; transform: translateY(0); -ms-transform: translateY(0); } }

@media only screen and (min-width: 500px) { .channelItem { height: 404px; margin-top: -287px; }
  .channelItem.channel-C4 { margin-top: 0; z-index: 1; }
  .channelItem.channel-E4 { z-index: 2; }
  .channelItem.channel-M4 { z-index: 3; }
  .channelItem.channel-4S { z-index: 4; }
  .channelItem.channel-F4 { z-index: 5; }
  .channelItem.channel-4M { z-index: 6; }
  .channelItem.channelItem--isExpanded { z-index: 7; }
  .channelItem.channelItem--isExpanded ~ .channelItem.channel-E4 { z-index: 5; }
  .channelItem.channelItem--isExpanded ~ .channelItem.channel-M4 { z-index: 4; }
  .channelItem.channelItem--isExpanded ~ .channelItem.channel-4S { z-index: 3; }
  .channelItem.channelItem--isExpanded ~ .channelItem.channel-F4 { z-index: 2; }
  .channelItem.channelItem--isExpanded ~ .channelItem.channel-4M { z-index: 1; }
  .channelItem.channelItem--isExpanded ~ .channelItem .channelItem-wrapper { transform: translateY(287px); -ms-transform: translateY(287px); } }

@media only screen and (min-width: 760px) { .channelItem { height: 328px; margin-top: -211px; }
  .channelItem.channelItem--isExpanded ~ .channelItem .channelItem-wrapper { transform: translateY(211px); -ms-transform: translateY(211px); } }

@media only screen and (min-width: 1000px) { .channelItem { height: 276px; margin-top: -159px; }
  .channelItem.channelItem--isExpanded ~ .channelItem .channelItem-wrapper { transform: translateY(159px); -ms-transform: translateY(159px); } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

/* Spinner
------------------------- */

@keyframes spinner { 0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes pop { 0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); } }

.ep { display: block; width: calc(100% - 15px); margin: 0 0 5px 0; }

.ep-offair, .ep.ep-offair:hover { cursor: default; }

.ep-offair .ep-wrapper, .ep.ep-offair:hover .ep-wrapper { background-color: #d5d5d5; }

.ep-offair .ep-title, .ep-offair .ep-time { color: #666666; }

.ep-wrapper { outline: 0; display: block; padding: 15px; transition: background-color .3s linear, box-shadow 0s 0s; background-color: #f6f6f6; -webkit-user-drag: none; -moz-user-select: none; }

.epg-container--accessible-focus .ep-wrapper:focus { background: #fff; }

.epg-container--accessible-focus .ep-wrapper:focus .ep-info .ep-title { text-decoration: underline; }

.ep-info { position: relative; }

.ep-info img { display: none; width: 100%; }

.ep--isSelected .epClose { font-size: 20px; position: absolute; top: 0; right: 0; color: #979797; }

.ep-time { color: #565656; }

.ep-timeEnd { display: none; }

.ep-title { color: #426688; padding-bottom: 5px; }

.epMore .ep-title { color: #565656; }

.ep-epSubtitle { font-style: italic; }

.ep-reminder { display: inline-block; margin-left: -5px; position: relative; line-height: 1em; color: #565656; }

.ep-reminder:before { color: #979797; }

.ep-summary { display: none; line-height: 18px; color: #565656; }

@media only screen and (min-width: 500px) { .csstransitions .epMore { -moz-opacity: 0; -moz-animation-name: fadeIn; -moz-animation-duration: 0.3s; -moz-animation-fill-mode: forwards; -moz-animation-delay: 0.3s; -webkit-opacity: 0; -webkit-animation-name: fadeIn; -webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: 0.3s; -o-opacity: 0; -o-animation-name: fadeIn; -o-animation-duration: 0.3s; -o-animation-fill-mode: forwards; -o-animation-delay: 0.3s; -ms-opacity: 0; -ms-animation-name: fadeIn; -ms-animation-duration: 0.3s; -ms-animation-fill-mode: forwards; -ms-animation-delay: 0.3s; opacity: 0; animation-name: fadeIn; animation-duration: 0.3s; animation-fill-mode: forwards; animation-delay: 0.3s; } }

@media only screen and (min-width: 500px) { .csstransitions .ep-wrpper { transition: height 0.3s ease; } }

.ep-imageWrapper { line-height: 0; position: relative; float: left; }

.ep-imageWrapper:hover:before { background-color: rgba(0, 0, 0, 0.2); content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media only screen and (max-width: 499px) { .ep { width: 100% !important; transform: translateZ(0); -ms-transform: translateZ(0); -ms-backface-visibility: hidden; backface-visibility: hidden; }
  .ep--shortEpisode .ep-wrapper:before { content: ""; }
  .ep-imageWrapper { margin-bottom: 4px; }
  .ep-image { width: 100%; }
  .ep-title { padding-bottom: 10px; }
  .ep-reminder { margin-left: 0; }
  .ep--isSelected .ep-summary { display: block; margin-bottom: 1em; }
  .ep--isSelected .ep-wrapper { background: #fff; padding-bottom: 0; }
  .ep--isSelected .ep-timeEnd { display: inline; }
  .ep--isSelected .ep-reminder { margin-bottom: 10px; }
  .ep--isSelected .ep-info .epIndicatorIcon--schedule { display: none; } }

@media only screen and (min-width: 500px) { .ep { display: inline-block; height: 112px; margin-bottom: 0; vertical-align: top; }
  .ep:not(.ep--isSelected):hover, .ep:not(.ep-offair):hover { animation-duration: 0s; animation-delay: 0.5s; }
  .ep:not(.ep--isSelected):hover .ep-wrapper, .ep:not(.ep-offair):hover .ep-wrapper { transition-duration: 0s; background: #fff; }
  .ep:focus .ep-wrapper { box-shadow: 0 5px 0 #fff; background-color: #ffffff; transition: background-color 0.3s linear, box-shadow 0.0s 0.3s; }
  .ep-offair, .ep.ep-offair:hover { cursor: default; }
  .ep-offair .ep-wrapper, .ep.ep-offair:hover .ep-wrapper { background-color: #d5d5d5; }
  .ep--shortEpisode .ep-wrapper { padding: 9px; }
  .ep--shortEpisode .ep-wrapper:before { font-family: "fouricons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "Z"; }
  .ep--shortEpisode .ep-wrapper .ep-info .ep-title, .ep--shortEpisode .ep-wrapper .ep-info .ep-time { display: none; }
  .ep--shortEpisode .ep-wrapper:before { position: absolute; top: 55px; font-size: 20px; color: #426688; }
  .ep--shortEpisode.ep--isSelected .ep-wrapper:before { display: none; }
  .ep--shortEpisode .icon-chevron-up { top: 6px; right: -2px; }
  .ep--shortEpisode .epIndicatorIcon--schedule { display: none; }
  .ep--noChevron .epClose { display: none; }
  .ep-wrapper { margin: 0 2px; height: 100%; }
  .ep-info { height: 100%; }
  .ep-info .ep-title { overflow: hidden; }
  .epIndicatorIcon--schedule { position: absolute; bottom: -7px; left: -5px; }
  .ep-summary { clear: left; display: block; overflow: hidden; padding-top: 1.25rem; max-height: 93px; margin-top: 4px; }
  .ep--isSelected .ep-wrapper { box-shadow: 0 5px 0 #fff; background-color: #ffffff; transition: background-color .3s linear, box-shadow .2s .3s; }
  .ep-imageWrapper, .ep-image { width: 220px; height: 124px; margin-right: 20px; }
  .ep-image { display: inline-block; float: left; background-color: #dedede; }
  .epIndicators { margin-top: 10px; position: relative; left: -4px; }
  .ep-image ~ .epIndicators, .ep-imageWrapper ~ .epIndicators { position: absolute; top: 94px; left: 236px; margin-top: 0; } }

@media only screen and (min-width: 760px) { .ep-imageWrapper, .ep-image { width: 280px; height: 157px; }
  .ep-image ~ .epIndicators, .ep-imageWrapper ~ .epIndicators { position: relative; top: auto; left: -4px; }
  .ep-summary { clear: none; padding-top: 0; max-height: 73px; } }

@media only screen and (min-width: 1000px) { .epMore-wrapper { min-height: 124px; }
  .ep-imageWrapper, .ep-image { width: 220px; height: 124px; }
  .epMore-wrapper .epIndicators { position: absolute; left: initial; right: 0; bottom: 0; top: auto; text-align: right; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

/* Spinner
------------------------- */

@keyframes spinner { 0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes pop { 0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); } }

.epMore { background-color: #ffffff; }

@media only screen and (max-width: 499px) { .epMore { -ms-transform: initial !important; transform: initial !important; -webkit-transform: initial !important; left: auto !important; position: relative; bottom: 0; padding: 0 15px 15px 15px; }
  .epMore .ep-time, .epMore .ep-title { display: none; } }

@media only screen and (min-width: 500px) { .ep--isSelected .epMore, .ep--isSelected .epMore-wrapper { display: inline-block; }
  .ep--isSelected .epMore:after { content: ""; height: 3px; width: 100px; background: red; }
  .ep--isSelected .epMore .ep-timeEnd { display: inline; }
  .ep--isSelected .epMore .ep-title { font-family: 'c4.headline.lowercase','c4.headline.uppercase','c4.headline.numbers','c4.headline.currency','c4.headline.maths',"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif; margin: 0; font-weight: bold; font-size: 18px; }
  .epMore { position: absolute; z-index: 1; width: 100%; height: 282px; white-space: initial; display: none; padding: 15px; left: 0; top: 117px; transform: translateZ(0); -ms-transform: translateZ(0); backface-visibility: hidden; }
  .epMore-wrapper { position: relative; padding: 1px; display: none; width: 100%; } }

@media only screen and (min-width: 760px) { .epMore { height: 206px; } }

@media only screen and (min-width: 1000px) { .epMore { height: 154px; } }

.episodeInteractions { display: -ms-flexbox; display: flex; margin: 0; padding-top: 10px; border-top: 2px solid #cfcfcf; overflow: hidden; }

.episodeInteractions-item { color: #426688; background: transparent; cursor: pointer; display: -ms-flexbox; display: flex; -ms-flex: 1; flex: 1; position: relative; }

.episodeInteractions-item.episodeInteractions-item--reminder:hover, .episodeInteractions-item.episodeInteractions-item--reminder:focus, .episodeInteractions-item--reminder.episodeInteractions-item--reminderProcessing { background: #e7f3ef; }

.episodeInteractions-text { padding: 35px 0 0 0; text-align: center; display: inline-block; }

.episodeInteractions-spinner { display: inline-block; font-size: 6px; margin: 6px 3px; text-indent: -9999em; width: 2em; height: 2em; border-radius: 50%; background: #426688; background: linear-gradient(to right, #426688 10%, rgba(231, 243, 239, 0) 42%); position: relative; animation: spinner 1.4s infinite linear; -ms-transform: translateZ(0); transform: translateZ(0); }

.episodeInteractions-spinner:before { width: 50%; height: 50%; background: #426688; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; }

.episodeInteractions-spinner:after { background: #e7f3ef; width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

@media only screen and (max-width: 499px) { .episodeInteractions .icon-play:before { font-size: 26px; margin-left: -13px; }
  .episodeInteractions .icon-information:before { font-size: 30px; margin-left: -15px; }
  .episodeInteractions .icon-reminder-set:before, .episodeInteractions .reminderModalBtn.reminderModalBtn--cancel:before, .episodeInteractions .ep-reminder:before { font-size: 30px; margin-left: -15px; }
  .episodeInteractions .icon-reminder-off:before, .episodeInteractions .reminderModalBtn.reminderModalBtn--set:before { font-size: 30px; margin-left: -15px; }
  .epIndicatorIcon.episodeInteractions-text:before { position: absolute; left: 50%; } }

@media only screen and (max-width: 499px) { .episodeInteractions-spinner { display: inline-block; font-size: 10px; margin: 10px 5px; text-indent: -9999em; width: 2em; height: 2em; border-radius: 50%; background: #426688; background: linear-gradient(to right, #426688 10%, rgba(231, 243, 239, 0) 42%); position: relative; animation: spinner 1.4s infinite linear; -ms-transform: translateZ(0); transform: translateZ(0); position: absolute; left: 50%; margin-left: -1.1em; top: -5px; }
  .episodeInteractions-spinner:before { width: 50%; height: 50%; background: #426688; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; }
  .episodeInteractions-spinner:after { background: #e7f3ef; width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } }

@media only screen and (min-width: 500px) { .episodeInteractions { border: none; }
  .episodeInteractions-item { display: inline-block; -ms-flex: initial; flex: initial; margin-right: 10px; padding: 5px 10px 5px 5px; }
  .epIndicatorIcon.episodeInteractions-text { padding: 0; width: auto; }
  .episodeInteractions-spinner { margin-right: 5px; } }

@media only screen and (min-width: 760px) { .episodeInteractions { padding-top: 0; } }

@media only screen and (min-width: 1000px) { .episodeInteractions { display: block; } }

.epIndicatorRoundel { color: #666666; line-height: 0; font-size: 30px; }

.epIndicatorRoundel--warning { color: #E33918; }

.epIndicatorIcon { width: 100%; }

.epIndicatorIcon:before { font-size: 1.2em; position: relative; top: 0.2em; display: inline-block; margin-right: 5px; }

.epIndicatorIcon--schedule { color: #565656; }

.epIndicatorIcon--schedule:before { color: #979797; }

.epIndicators { font-size: 2rem; line-height: 1em; }

.epMore .epIndicatorLabel { position: absolute; bottom: 1em; left: 0; }

.epIndicatorLabel { background-color: rgba(55, 61, 70, 0.8); color: #fff; height: 35px; padding-top: 1.25em; padding-left: 3.07em; padding-right: 0.7em; display: inline-block; line-height: 0; }

.epIndicatorLabel:before { display: inline-block; height: 35px; padding-left: 0.2em; padding-right: 0.2em; position: absolute; top: 0; left: 0; background-color: #2C3238; color: #fff; font-size: 25px; line-height: 1.5em; }

a:hover .epIndicatorLabel, a:focus .epIndicatorLabel, a:active .epIndicatorLabel { background-color: #fff; color: #373d46; }

@media only screen and (max-width: 499px) { .ep .epIndicators { position: absolute; line-height: 1.5rem; bottom: 20px; }
  .ep .ep-image ~ .epIndicators { bottom: -40px; }
  .ep .epIndicators.hasInteractions { bottom: 90px; }
  .epIndicators + .ep-summary { margin-bottom: 55px; } }

@media only screen and (min-width: 500px) { .epIndicators { display: inline-block; }
  .epMore .epIndicatorLabel { bottom: 0.73em; }
  .epIndicatorLabel { height: 28px; padding-top: 1.0em; padding-left: 2.5em; }
  .epIndicatorLabel:before { height: 28px; font-size: 20px; line-height: 1.5em; } }

@media only screen and (min-width: 500px) { .epg-container { height: 852px; transition: height 0s .3s; overflow: hidden; }
  .epg-container--expanded { height: 1140px; transition: height 0s 0s; }
  .all4NavFooter--expand { animation-name: expand-footer-bp1; animation-duration: .3s; animation-fill-mode: forwards; }
  .all4NavFooter--collapse { animation-name: collapse-footer-bp1; animation-duration: .3s; }
  @keyframes expand-footer-bp1 { 0% { transform: translateY(-290px); }
    100% { transform: translateY(0); } }
  @keyframes collapse-footer-bp1 { 0% { transform: translateY(0); }
    100% { transform: translateY(-290px); } }
  .all4NavFooter { background: #383f47; }
  #all4nav-footer { margin-top: -30px; } }

@media only screen and (min-width: 760px) { .epg-container--expanded { height: 1063px; transition: height 0s 0s; }
  .all4NavFooter--expand { animation-name: expand-footer-bp4; animation-duration: .3s; animation-fill-mode: forwards; }
  .all4NavFooter--collapse { animation-name: collapse-footer-bp4; animation-duration: .3s; }
  @keyframes expand-footer-bp4 { 0% { transform: translateY(-210px); }
    100% { transform: translateY(0); } }
  @keyframes collapse-footer-bp4 { 0% { transform: translateY(0); }
    100% { transform: translateY(-210px); } } }

@media only screen and (min-width: 1000px) { .epg-container--expanded { height: 1013px; transition: height 0s 0s; }
  .all4NavFooter--expand { animation-name: expand-footer-bp7; animation-duration: .3s; animation-fill-mode: forwards; }
  .all4NavFooter--collapse { animation-name: collapse-footer-bp7; animation-duration: .3s; }
  @keyframes expand-footer-bp7 { 0% { transform: translateY(-160px); }
    100% { transform: translateY(0); } }
  @keyframes collapse-footer-bp7 { 0% { transform: translateY(0); }
    100% { transform: translateY(-160px); } } }

.default-layer { z-index: 0; }

.one-layer { z-index: 10; }

.two-layer { z-index: 20; }

.three-layer { z-index: 30; }

.four-layer { z-index: 40; }

.overlay-layer { z-index: 9999; }

#LogoMore4 .negative #digitMore4 { fill: #ffffff; }

#LogoMore4 .positive #digitMore4 { fill: #192d48; }

#LogoMore4 .tinted #digitMore4 { fill: #706e6e; }

@media (min-width: 320px) { #LogoMore4 { width: 53px; height: 40px; } }

@media (min-width: 1160px) { #LogoMore4 { width: 66.6px; height: 50px; } }

#LogoE4 .negative #digitE4 { fill: #ffffff; }

#LogoE4 .positive #digitE4 { fill: #192d48; }

#LogoE4 .tinted #digitE4 { fill: #706e6e; }

@media (min-width: 320px) { #LogoE4 { width: 28.8px; height: 40px; } }

@media (min-width: 1160px) { #LogoE4 { width: 36px; height: 50px; } }

#LogoFilm4 .negative #digitFilm4 { fill: #ffffff; }

#LogoFilm4 .positive #digitFilm4 { fill: #192d48; }

#LogoFilm4 .tinted #digitFilm4 { fill: #706e6e; }

@media (min-width: 320px) { #LogoFilm4 { width: 42px; height: 40px; } }

@media (min-width: 1160px) { #LogoFilm4 { width: 52.7px; height: 50px; } }

#LogoMusic4 .negative #digitMusic4 { fill: #ffffff; }

#LogoMusic4 .positive #digitMusic4 { fill: #192d48; }

#LogoMusic4 .tinted #digitMusic4 { fill: #706e6e; }

@media (min-width: 320px) { #LogoMusic4 { width: 63px; height: 40px; } }

@media (min-width: 1160px) { #LogoMusic4 { width: 79px; height: 50px; } }

#LogoChannel4 .negative #digitChannel4 { fill: #ffffff; }

#LogoChannel4 .positive #digitChannel4 { fill: #192d48; }

#LogoChannel4 .tinted #digitChannel4 { fill: #706e6e; }

@media (min-width: 320px) { #LogoChannel4 { width: 28.8px; height: 40px; } }

@media (min-width: 1160px) { #LogoChannel4 { width: 36px; height: 50px; } }

#LogoSeven4 .negative #digitSeven4 { fill: #ffffff; }

#LogoSeven4 .positive #digitSeven4 { fill: #192d48; }

#LogoSeven4 .tinted #digitSeven4 { fill: #706e6e; }

@media (min-width: 320px) { #LogoSeven4 { width: 30px; height: 40px; } }

@media (min-width: 1160px) { #LogoSeven4 { width: 37.5px; height: 50px; } }

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers. */
body { margin: 0; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10. */
img { border-style: none; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Misc ========================================================================== */
/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

.default-layer { z-index: 0; }

.one-layer { z-index: 10; }

.two-layer { z-index: 20; }

.three-layer { z-index: 30; }

.four-layer { z-index: 40; }

.overlay-layer { z-index: 9999; }

.block { font-family: "c4.text.punctuation", "c4.text.currency", "c4.text.maths", "c4.text.lowercase", "c4.text.uppercase", "c4.text.numbers", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; display: inline-block; list-style: none; margin: 3px; width: calc(50% - 6px); }

@media (min-width: 600px) { .block { margin: 6px; width: calc(50% - 12px); } }

@media (min-width: 768px) { .block { width: calc(25% - 12px); } }

.block .block__header { background-color: #000; color: #fff; min-height: 52px; padding: 8px; transition: background-color 0.15s, color 0.2s; }

@media (min-width: 600px) { .block .block__header { min-height: 57px; } }

@media (min-width: 1160px) { .block .block__header { min-height: 64px; } }

.block .block__header .block__title { font-family: "c4.headline.punctuation", "c4.headline.currency", "c4.headline.maths", "c4.headline.lowercase", "c4.headline.uppercase", "c4.headline.numbers", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; font-size: 16px; margin: 0; }

@media (min-width: 600px) { .block .block__header .block__title { font-size: 18px; } }

.block .block__header .block__subtitle { font-size: 16px; opacity: .7; }

.block .block__image-wrapper { display: block; position: relative; }

.block .block__image-wrapper .block__summary { background-color: #fff; color: #000; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: 0.15s ease-in-out 0.02s; width: 100%; }

.block .block__image-wrapper .block__summary p { font-size: 14px; margin: 0; padding: 4px; }

@media (min-width: 600px) { .block .block__image-wrapper .block__summary p { font-size: 16px; } }

.block .block__image-wrapper img { display: block; width: 100%; }

.block .block__link { text-decoration: none; }

.block .block__link:hover .block__header { background-color: #fff; color: #444d57; }

.block .block__link:hover .block__subtitle { opacity: 1; }

.block .block__link:hover .block__summary { opacity: .8; }

/*# sourceMappingURL=style.css.map */