/* Variables */
/* Grayscale colors */
/* Mixins */
/* Examlple
@include linearGradient(#cccccc, #666666);
*/
/* Fonts */
@font-face {
  font-family: 'GothamBook';
  src: url("../fonts/GothamBook/gotham-book.eot");
  src: url("../fonts/GothamBook/gotham-book.eot") format("embedded-opentype"), url("../fonts/GothamBook/gotham-book.woff") format("woff"), url("../fonts/GothamBook/gotham-book.ttf") format("truetype"), url("../fonts/GothamBook/gotham-book.svg#GothamBook") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'GothamMedium';
  src: url("../fonts/GothamMedium/gotham-medium.eot");
  src: url("../fonts/GothamMedium/gotham-medium.eot") format("embedded-opentype"), url("../fonts/GothamMedium/gotham-medium.woff") format("woff"), url("../fonts/GothamMedium/gotham-medium.ttf") format("truetype"), url("../fonts/GothamMedium/gotham-medium.svg#GothamMedium") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'GothamBold';
  src: url("../fonts/GothamBold/gotham-bold.eot");
  src: url("../fonts/GothamBold/gotham-bold.eot") format("embedded-opentype"), url("../fonts/GothamBold/gotham-bold.woff") format("woff"), url("../fonts/GothamBold/gotham-bold.ttf") format("truetype"), url("../fonts/GothamBold/gotham-bold.svg#GothamBold") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Extends */
.bodyFont {
  font-family: 'GothamBook', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6em; }

.btn {
  -webkit-transition: all 100ms linear;
  -moz-transition: all 100ms linear;
  -ms-transition: all 100ms linear;
  -o-transition: all 100ms linear;
  transition: all 100ms linear;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  padding: 5px 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: #f29924;
  border: 0;
  cursor: pointer; }
  .btn:hover {
    color: #fff;
    background-color: #e94c29; }

.btnMobileNav,
.mobileContainer {
  display: none; }

@media screen and (max-width: 1300px) {
  .scrollLeft {
    left: 0;
    background-position: right center; }

  .scrollRight {
    right: 0;
    background-position: left center; } }
@media screen and (max-width: 1100px) {
  .navigation > li a {
    font-size: 16px; } }
@media screen and (max-width: 1024px) {
  /* Titles */
  .title {
    font-size: 16px; }

  .subTitle {
    font-size: 14px; }

  /* Navigation */
  .navigation > li > a {
    padding: 10px 15px;
    font-size: 15px; }

  /* News widget */
  .newsItemTitel a {
    font-size: 16px; } }
@media screen and (max-width: 1020px) {
  /* Buttons widget */
  .widget.buttons {
    background: -moz-radial-gradient(center, circle cover, #ffd300 0%, #e94c29 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffd300), color-stop(100%, #e94c29));
    background: -webkit-radial-gradient(center, circle cover, #ffd300 0%, #e94c29 100%);
    background: -o-radial-gradient(center, circle cover, #ffd300 0%, #e94c29 100%);
    background: -ms-radial-gradient(center, circle cover, #ffd300 0%, #e94c29 100%);
    background: radial-gradient(center, circle cover, #ffd300 0%, #e94c29 100%);
    background-color: #ffd300;
    margin-bottom: 0;
    background-size: 260% auto;
    background-position: 20% 0; }
    .widget.buttons .button {
      float: none;
      display: block;
      width: auto;
      padding: 30px 20px 30px 60px;
      color: #fff;
      background-color: transparent; }
      .widget.buttons .button:before {
        display: none; }
      .widget.buttons .button.guide {
        background-image: url("../img/icons/tv-white.svg");
        border: 0;
        border-bottom: solid 1px rgba(255, 255, 255, 0.25); }
      .widget.buttons .button.news {
        background-image: url("../img/icons/pen-white.svg");
        border: 0; }
      .widget.buttons .button.missed {
        background-image: url("../img/icons/history-white.svg");
        border: 0;
        border-bottom: solid 1px rgba(255, 255, 255, 0.25); }

  .container.coloredBackground {
    padding: 40px 0;
    border: 0; } }
@media screen and (max-width: 900px) {
  /* Top */
  .top {
    display: none; }

  /* Header */
  .header > .container {
    padding: 0; }

  .logo {
    width: 50px;
    margin: 5px 20px; }

  .btnSearch {
    position: absolute;
    top: 0;
    right: 60px;
    float: none; }

  /* MobileContainer */
  .mobileContainer {
    display: none; }

  /* Navigation */
  .btnMobileNav {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 60px;
    height: 60px;
    background: url("../img/icons/hamburger.svg") no-repeat center center;
    cursor: pointer;
    z-index: 100; }

  .navigation {
    display: block;
    float: none;
    margin: 0;
    background: #f8f8f8;
    border-top: solid 1px #dfdfdf; }
    .navigation > li {
      float: none; }
      .navigation > li > a {
        font-family: 'GothamBook', sans-serif;
        padding: 10px 20px;
        line-height: 30px; }
        .navigation > li > a:hover {
          color: #e94c29; }
        .navigation > li > a:before {
          display: none; }

  /* Top navigation */
  .topNavigation {
    display: block;
    float: none;
    background: #f8f8f8; }
    .topNavigation > li {
      float: none; }
      .topNavigation > li > a {
        padding: 10px 20px;
        font-family: 'GothamBook', sans-serif;
        font-size: 15px;
        text-transform: uppercase;
        line-height: 30px;
        color: #303030; }
        .topNavigation > li > a:hover {
          color: #e94c29; }

  /* Social media */
  .socialmediaContainer {
    position: relative;
    float: none;
    margin: 0 0 20px 0;
    padding: 30px 20px 0 20px;
    background-color: #f8f8f8;
    border-bottom: solid 1px #dfdfdf; }
    .socialmediaContainer:before {
      position: absolute;
      top: 10px;
      left: 20px;
      display: block;
      width: 100%;
      font-family: 'GothamBold', sans-serif;
      content: 'Volg ons op:';
      z-index: 1; }

  .socialmediaItem {
    width: 40px;
    height: 40px;
    margin: 10px 5px;
    background-color: #fff;
    border-radius: 8px;
    border: solid 1px #dfdfdf; }
    .socialmediaItem:first-of-type {
      margin-left: 0; }
    .socialmediaItem.facebook {
      background-image: url("../img/socialmedia/facebook-active.svg"); }
    .socialmediaItem.twitter {
      background-image: url("../img/socialmedia/twitter-active.svg"); }
    .socialmediaItem.youtube {
      background-image: url("../img/socialmedia/youtube-active.svg"); }

  /* Search widget */
  /* Framework */
  .side {
    float: none;
    width: auto;
    padding: 0 0 20px 0;
    margin: 0 20px;
    border: 0; }
    .side .widget {
      margin: 20px 0;
      background-color: #fff;
      /* Tips */ }
      .side .widget:last-of-type {
        border: 0; }
      .side .widget.tips .tipsItem:nth-of-type(odd), .side .widget.tips .tipsItem:nth-of-type(even) {
        margin-right: 20px; }

  /* News slider */
  .newsSliderItemCaption {
    right: 0;
    top: auto;
    bottom: 0;
    max-width: 100%;
    width: 100%;
    padding: 20px 20px 50px 20px;
    background: rgba(0, 0, 0, 0.5); }

  .bx-controls-direction {
    display: none; }

  .bx-wrapper .bx-pager {
    bottom: 10px; }

  .bx-wrapper .bx-pager.bx-default-pager a {
    width: 10px;
    height: 10px; } }
@media screen and (max-width: 768px) {
  /* Slider */
  .widget.newsSlider li {
    height: 360px; }

  .newsSliderItemCaptionTitle,
  .newsSliderItemCaptionIntro {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

  /* TV gids page */
  .guideNav .guideNavItemLink {
    padding: 2px 10px;
    height: 36px; }

  .guideListingItem,
  .guideListingItemIntro {
    font-size: 1em; }

  .guideListingItemTime {
    width: 60px; }

  /* Homepage */
  .homePage .container > .left,
  .homePage .container > .right {
    float: none;
    width: 100%; }

  /* Timeline */
  .timelineControlsContainer {
    position: relative;
    top: auto;
    left: auto; }
    .timelineControlsContainer:before, .timelineControlsContainer:after {
      content: "";
      display: table; }
    .timelineControlsContainer:after {
      clear: both; }

  .scrollLeft,
  .scrollRight {
    position: relative;
    top: auto;
    left: auto;
    width: 120px;
    height: 40px;
    margin: 20px 10px 0 10px;
    background-repeat: no-repeat;
    opacity: 1; }
    .scrollLeft:after,
    .scrollRight:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 14px;
      text-transform: uppercase;
      line-height: 40px;
      color: #999;
      z-index: 1; }
    .scrollLeft:hover:after,
    .scrollRight:hover:after {
      color: #303030; }

  .scrollLeft {
    float: left;
    background-image: url("../img/timeline/timeline-arrow-left-small.svg");
    background-position: 10px center; }
    .scrollLeft:hover {
      background-image: url("../img/timeline/timeline-arrow-left-small-active.svg"); }
    .scrollLeft:after {
      padding-left: 40px;
      content: 'Terug'; }

  .scrollRight {
    float: right;
    text-align: right;
    background-image: url("../img/timeline/timeline-arrow-right-small.svg");
    background-position: 94px center; }
    .scrollRight:hover {
      background-image: url("../img/timeline/timeline-arrow-right-small-active.svg"); }
    .scrollRight:after {
      padding-right: 40px;
      content: 'verder'; }

  /* Widgets recommentend */
  .widget.recommended .widgetItem {
    float: none;
    width: auto;
    margin-bottom: 40px; }

  /* Program detail */
  .scheduleItem > ul {
    width: 50%;
    margin-bottom: 20px; }

  /* Footer */
  .footerWidget {
    width: 50%;
    margin-top: 40px; }
    .footerWidget:nth-of-type(1), .footerWidget:nth-of-type(2) {
      margin-top: 0; } }
@media screen and (max-width: 640px) {
  body {
    background: #fff; }

  .container.wide {
    background: #f8f8f8;
    border-bottom: solid 1px #dfdfdf; }

  /* Content */
  .content {
    margin: 0;
    box-shadow: none; }

  /* Side/widgets */
  .side {
    padding: 20px 0;
    margin: 0;
    background: #f8f8f8;
    border-top: solid 1px #dfdfdf; }
    .side .widget {
      background: transparent;
      box-shadow: none; }
      .side .widget .content {
        padding: 0 20px;
        background-color: transparent; }

  .right .widget.tips .content {
    padding: 0 20px; }

  /* TV gemist page */
  .clipItem {
    width: 48%;
    margin-left: 4%; }
    .clipItem:nth-of-type(3n+1) {
      margin-left: 4%; }
    .clipItem:nth-of-type(2n+1) {
      margin-left: 0; } }
@media screen and (max-width: 560px) {
  /* Buttons widget */
  .widget.buttons .button {
    padding: 20px 20px 20px 60px; }

  /* Filters */
  .filterSelect,
  .filterInput {
    display: block;
    width: 100%; }

  /* Content/news */
  .articleListingItemImage {
    position: relative;
    float: none;
    display: block;
    width: 100%;
    height: 0;
    padding: 0 0 66.666% 0;
    margin: 0 0 20px 0;
    overflow: hidden;
    border-radius: 6.5% / 10%; }
    .articleListingItemImage:before, .articleListingItemImage:after {
      display: none; }
    .articleListingItemImage img {
      position: absolute;
      top: 50%;
      left: 0;
      width: 120%;
      height: auto;
      margin-top: -50%; }

  /* TV gemist page */
  .clipItem {
    width: 100%;
    margin-left: 0 !important; } }
@media screen and (max-width: 480px) {
  /* Program detail page */
  .programItemImage {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0; }
    .programItemImage img {
      width: 100%; }

  /* Footer */
  .footerWidget {
    float: none;
    width: auto;
    margin-top: 40px; }
    .footerWidget:nth-of-type(2) {
      margin-top: 40px; } }
@media screen and (max-width: 420px) {
  /* Widget news */
  .newsItemImage {
    position: relative;
    float: none;
    display: block;
    width: 100%;
    height: 0;
    padding: 0 0 66.666% 0;
    margin: 0 0 20px 0;
    overflow: hidden;
    border-radius: 6.5% / 10%; }
    .newsItemImage:before, .newsItemImage:after {
      display: none; }
    .newsItemImage img {
      position: absolute;
      top: 50%;
      left: 0;
      width: 120%;
      height: auto;
      margin-top: -50%; }

  /* Program detail */
  .scheduleItem > ul {
    width: 100%; }

  /* Side */
  .side .widget.tips .tipsItem:nth-of-type(even) {
    margin-right: 0; } }

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