/*------------------------------------*\
:    Project:       ZAM Magazine
:    Project URI:   http://zammagazine.com
:    Author:        Thomas Duvigneau
:    Author URI:    http://thomasduvigneau.nl
:    Description:   ZAM Magazine 2016 January Update
:    Version:       1.3
\*------------------------------------*/
/*------------------------------------*\
:    Variables
\*------------------------------------*/
/*------------------------------------*\
:    Mixins
\*------------------------------------*/
/*------------------------------------*\
:    Media Queries
\*------------------------------------*/

.vaPlayerWrapper.avVideo .avPlayerContainer {
	width: auto !important;
}
#sbox-window {
	padding: 0 !important;
}

header.chronicle-big-header {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 50px 50px 30px 50px; }
  body.ie9 header.chronicle-big-header {
    *zoom: 1; }
    body.ie9 header.chronicle-big-header:after {
      content: "";
      display: table;
      clear: both; }
  @media (min-width: 0px) and (max-width: 800px) {
    header.chronicle-big-header {
      padding: 40px 30px 20px 30px; } }
  @media (min-width: 0px) and (max-width: 500px) {
    header.chronicle-big-header {
      padding: 20px 20px; } }
  header.chronicle-big-header .img-container {
    width: 50%;
    -webkit-align-self: flex-start;
    align-self: flex-start; }
    @media (min-width: 0px) and (max-width: 767px) {
      header.chronicle-big-header .img-container {
        width: 100%; } }
    header.chronicle-big-header .img-container img {
      width: 100%;
      display: block;
      float: none; }
    header.chronicle-big-header .img-container .itemImageCaption {
      font-size: 15px;
      font-size: 1.5rem;
      margin: 10px 0 0;
      font-family: "futura medium", verdana, sans-serif;
      color: #777;
      text-align: left; }
      @media (min-width: 0px) and (max-width: 767px) {
        header.chronicle-big-header .img-container .itemImageCaption {
          margin: 10px 0; } }
  header.chronicle-big-header .foto-title {
    width: 50%;
    padding: 0 0 60px 40px; }
    @media (min-width: 0px) and (max-width: 1023px) {
      header.chronicle-big-header .foto-title {
        padding: 0 0 0 30px; } }
    @media (min-width: 0px) and (max-width: 767px) {
      header.chronicle-big-header .foto-title {
        width: 100%;
        padding: 0; } }
    header.chronicle-big-header .foto-title h1 {
      font-size: 36px;
      font-size: 3.6rem;
      text-transform: uppercase;
      line-height: 1.4;
      margin: 0 0 15px; }
      @media (min-width: 0px) and (max-width: 1024px) {
        header.chronicle-big-header .foto-title h1 {
          font-size: 32px;
          font-size: 3.2rem; } }
      @media (min-width: 0px) and (max-width: 767px) {
        header.chronicle-big-header .foto-title h1 {
          font-size: 24px;
          font-size: 2.4rem; } }
      @media (min-width: 0px) and (max-width: 800px) {
        header.chronicle-big-header .foto-title h1 {
          font-size: 28px;
          font-size: 2.8rem; } }
      @media (min-width: 0px) and (max-width: 500px) {
        header.chronicle-big-header .foto-title h1 {
          font-size: 25px;
          font-size: 2.5rem; } }
  header.chronicle-big-header .category-name {
    color: #00aeef; }

.itemImageCaption {
  float: none; }

.chronicle-article {
  padding: 80px 50px; }
  .chronicle-article .sidebar {
    width: calc(100% - 330px - 760px); }
  .chronicle-article .main-content {
    width: 760px; }
    @media (min-width: 0px) and (max-width: 1279px) {
      .chronicle-article .main-content {
        width: calc(100% - 330px); } }
    @media (min-width: 0px) and (max-width: 1024px) {
      .chronicle-article .main-content {
        width: 70%; } }
  .chronicle-article .link-block {
    width: 330px; }
    @media (min-width: 0px) and (max-width: 1024px) {
      .chronicle-article .link-block {
        width: 30%; } }
    @media (min-width: 0px) and (max-width: 1023px) {
      .chronicle-article .link-block {
        position: static;
        width: 100%;
        max-width: 600px; } }

.main-content {
  font-size: 19px;
  font-size: 1.9rem;
  line-height: 1.6; }
  @media (min-width: 0px) and (max-width: 800px) {
    .main-content {
      font-size: 18px;
      font-size: 1.8rem; } }
  @media (min-width: 0px) and (max-width: 500px) {
    .main-content {
      font-size: 17px;
      font-size: 1.7rem; } }
  .main-content .video-container {
    position: relative;
    padding: 28.125% 0;
    height: 0;
    margin: 20px 0;
    background-size: cover;
    background-position: center center;
    -moz-transition: padding 0.5s ease-in-out;
    -o-transition: padding 0.5s ease-in-out;
    -webkit-transition: padding 0.5s ease-in-out;
    transition: padding 0.5s ease-in-out; }
    .main-content .video-container:last-child {
      margin-bottom: 0; }
    .main-content .video-container iframe,
    .main-content .video-container video,
    .main-content .video-container object,
    .main-content .video-container img {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

div.itemFullText {
  *zoom: 1;
  position: relative; }
  div.itemFullText:after {
    content: "";
    display: table;
    clear: both; }
  div.itemFullText h2 {
    font-size: 30px;
    font-size: 3rem;
    text-transform: none;
    margin: 50px 0 30px 0;
    line-height: 1.4; }
    @media (min-width: 0px) and (max-width: 1023px) {
      div.itemFullText h2 {
        font-size: 24px;
        font-size: 2.4rem; } }
    @media (min-width: 0px) and (max-width: 767px) {
      div.itemFullText h2 {
        font-size: 20px;
        font-size: 2rem; } }
    @media (min-width: 0px) and (max-width: 500px) {
      div.itemFullText h2 {
        font-size: 18px;
        font-size: 1.8rem; } }
    div.itemFullText h2:first-child {
      margin-top: 0; }
  div.itemFullText h2.streamer {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1.5; }
    @media (min-width: 0px) and (max-width: 800px) {
      div.itemFullText h2.streamer {
        width: 100%;
        float: none;
        text-align: center; } }
    @media (min-width: 0px) and (max-width: 500px) {
      div.itemFullText h2.streamer {
        font-size: 20px;
        font-size: 2rem;
        text-align: left; } }
    div.itemFullText h2.streamer.right {
      margin: 1.5em 0em 1.5em 1.5em; }
      @media (min-width: 0px) and (max-width: 800px) {
        div.itemFullText h2.streamer.right {
          margin: 40px 0; } }
      @media (min-width: 0px) and (max-width: 500px) {
        div.itemFullText h2.streamer.right {
          margin: 25px 0; } }
    div.itemFullText h2.streamer.left {
      margin: 1.5em 1.5em 1.5em 0em; }
      @media (min-width: 0px) and (max-width: 800px) {
        div.itemFullText h2.streamer.left {
          margin: 40px 0; } }
      @media (min-width: 0px) and (max-width: 500px) {
        div.itemFullText h2.streamer.left {
          margin: 25px 0; } }
  div.itemFullText h3 {
    font-size: 20px;
    font-size: 2rem;
    text-transform: none;
    margin: 50px 0 5px 0;
    padding: 0; }
    @media (min-width: 0px) and (max-width: 1023px) {
      div.itemFullText h3 {
        font-size: 18px;
        font-size: 1.8rem; } }
    div.itemFullText h3:first-child {
      margin-top: 0; }
  div.itemFullText p {
    margin: 0 0 20px; }
    div.itemFullText p:last-child {
      margin: 0; }

.link-block {
  position: absolute;
  right: 0;
  padding-left: 30px; }
  @media (min-width: 0px) and (max-width: 1023px) {
    .link-block {
      margin: 30px 0;
      padding-left: 0; } }
  .link-block .link-block__inner {
    display: block;
    padding: 20px 30px;
    background: #000000;
    color: #ffffff !important;
    font-size: 16px;
    font-size: 1.6rem; }
    @media (min-width: 0px) and (max-width: 500px) {
      .link-block .link-block__inner {
        padding: 20px; } }
    .link-block .link-block__inner:hover {
      text-decoration: none !important;
      color: #00aeef !important; }
  .link-block h3 ,
  .link-block span.h3 {
    font-size: 20px;
    font-size: 2rem;
    padding: 0 !important;
    margin: 0 0 5px;
    font-family: "futura bold", verdana, sans-serif;
    text-transform: uppercase;
    color: #00aeef; 
    display: block;
    }
  .link-block span.p {
	display: block;	
  }
    @media (min-width: 0px) and (max-width: 1023px) {
      .link-block h3 , .link-block span.h3 {
        font-size: 18px;
        font-size: 1.8rem;
	 } }
    .link-block h3:after , .link-block span.h3:after {
      content: '\00BB';
      padding-left: 5px; }

.js-explainer-trigger {
  cursor: pointer;
  padding-right: 38px;
  position: relative;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline; }
  .js-explainer-trigger span {
    border-bottom: 1px dotted #000000; }
  .js-explainer-trigger:before {
    content: '\25BE';
    position: absolute;
    top: 0px;
    right: 9.5px;
    color: #ffffff;
    font-size: 24px;
    font-size: 2.4rem;
    z-index: 2;
    line-height: 27px; }
  .js-explainer-trigger:after {
    content: '';
    width: 27px;
    height: 27px;
    background: #00aeef;
    position: absolute;
    top: -1px;
    right: 4px; }
  .js-explainer-trigger:hover {
    color: #00aeef; }
    .js-explainer-trigger:hover span {
      border-bottom: 1px dotted #00aeef; }
  .js-explainer-trigger.is-active:before {
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg); }

.explainer-body {
  display: none; }
  .explainer-body.is-active {
    display: block; }

.explainer-body__inner {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #def1f8;
  padding: 30px 50px;
  font-size: 16px;
  font-size: 1.6rem;
  position: relative;
  margin: 30px 0; }
  body.ie9 .explainer-body__inner {
    *zoom: 1; }
    body.ie9 .explainer-body__inner:after {
      content: "";
      display: table;
      clear: both; }
  @media (min-width: 0px) and (max-width: 800px) {
    .explainer-body__inner {
      padding: 20px 30px; } }
  @media (min-width: 0px) and (max-width: 500px) {
    .explainer-body__inner {
      padding: 45px 15px 15px 15px; } }

.explainer-body__img {
  width: 160px; }
  @media (min-width: 0px) and (max-width: 800px) {
    .explainer-body__img {
      width: 120px; } }
  @media (min-width: 0px) and (max-width: 500px) {
    .explainer-body__img {
      width: 100%;
      margin: 0 0 20px; } }

.explainer-body__close {
  position: absolute;
  top: 0;
  right: 20px;
  font-family: "futura bold", verdana, sans-serif;
  font-size: 30px;
  font-size: 3rem;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.explainer-body__text {
  width: calc(100% - 160px);
  padding-left: 40px; }
  @media (min-width: 0px) and (max-width: 800px) {
    .explainer-body__text {
      width: calc(100% - 120px); } }
  @media (min-width: 0px) and (max-width: 500px) {
    .explainer-body__text {
      width: 100%;
      padding-left: 0; } }
  .explainer-body__text:first-child {
    padding: 0 60px; }

.explainer-body__title {
  font-family: "futura bold", verdana, sans-serif;
  font-size: 20px;
  font-size: 2rem;
  margin: 0 0 5px;
  display: block; }
  @media (min-width: 0px) and (max-width: 800px) {
    .explainer-body__title {
      font-size: 18px;
      font-size: 1.8rem; } }

.source-list-container {
  padding-top: 40px;
  border-top: 4px solid #000000;
  margin: 40px 0 40px;
  font-size: 16px;
  font-size: 1.6rem; }
  @media (min-width: 0px) and (max-width: 800px) {
    .source-list-container {
      padding-top: 30px; } }
  .source-list-container ul {
    margin: 0;
    list-style: none;
    counter-reset: sourceNumber; }
  .source-list-container li {
    padding-left: 35px;
    position: relative;
    counter-increment: sourceNumber; }
    .source-list-container li:before {
      content: counters(sourceNumber,"(") ")";
      position: absolute;
      left: 5px;
      top: 0; }
    .source-list-container li:after {
      content: '(';
      position: absolute;
      top: 0px;
      left: 0; }

.secondary-link-blocks .link-block {
  position: static;
  width: 50%; }
  @media (min-width: 0px) and (max-width: 500px) {
    .secondary-link-blocks .link-block {
      width: 100%; } }
.secondary-link-blocks .link-block__inner {
  background: #00aeef;
  color: #ffffff;
  -webkit-flex: 1;
  flex: 1; }
  .secondary-link-blocks .link-block__inner:hover {
    color: #000000 !important; }
    .secondary-link-blocks .link-block__inner:hover h3 , .secondary-link-blocks .link-block__inner:hover span.h3 {
      color: #000000; }
.secondary-link-blocks h3 , .secondary-link-blocks span.h3 {
  color: #ffffff;
  text-transform: uppercase !important;
  display: block; }
.secondary-link-blocks ul {
  list-style: none;
  margin: 40px -20px 0;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }
  body.ie9 .secondary-link-blocks ul {
    *zoom: 1; }
    body.ie9 .secondary-link-blocks ul:after {
      content: "";
      display: table;
      clear: both; }
.secondary-link-blocks li {
  padding: 0 20px;
  margin: 0 0 20px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }
  body.ie9 .secondary-link-blocks li {
    *zoom: 1; }
    body.ie9 .secondary-link-blocks li:after {
      content: "";
      display: table;
      clear: both; }

.icon-close::before {
        content: "";
}