/*
Name: Default
URL: http://github.com/Darklg/CSSCommon
Version: 2.7.12
License: MIT
*/
/* ----------------------------------------------------------
  Reset
---------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
audio, canvas, datagrid, datalist, details, dialog, figure, footer, header,
menu, nav, section, video, abbr, eventsource, mark, meter, time, progress, output, bb {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent no-repeat top left; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: ''; }

a,
ins {
  text-decoration: none; }

/* ----------------------------------------------------------
  Normalize
---------------------------------------------------------- */
/* HTML5 Default behavior
-------------------------- */
article,
aside,
audio,
canvas,
datagrid,
datalist,
details,
dialog,
figure,
figcaption,
footer,
header,
hgroup,
menu,
main,
nav,
section,
video {
  display: block; }

abbr,
eventsource,
mark,
meter,
time,
progress,
output,
bb {
  display: inline; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; }

nav ul {
  list-style: none; }

/* Forms
-------------------------- */
input,
button,
select {
  vertical-align: middle; }

input[type="radio"],
input[type="checkbox"] {
  margin: 0;
  vertical-align: text-bottom; }

textarea {
  resize: vertical; }

input:focus {
  outline: 0; }

input:-webkit-autofill {
  background-color: #ccc !important; }

/* Bug with Firefox and buttons */
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
  margin: 0;
  padding: 0;
  border: 0; }

/* Better cursor for buttons */
input[type="submit"],
input[type="image"],
button {
  cursor: pointer; }

/* Medias
-------------------------- */
video,
img {
  height: auto;
  max-width: 100%; }

object {
  max-width: 100%; }

iframe {
  border: 0; }

/* Inline images are aligned on text */
img,
input[type=image] {
  vertical-align: bottom; }

p img {
  vertical-align: baseline; }

/* Common elements
-------------------------- */
html {
  min-height: 100%;
  background: #fff; }

body {
  position: relative;
  min-height: 100%;
  -webkit-text-size-adjust: none; }

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  line-height: 1.3; }

h1, .h1 {
  margin-bottom: 10px;
  font-size: 25px; }

h2, .h2 {
  margin-bottom: 7px;
  font-size: 20px; }

h3, .h3 {
  font-size: 15px; }

h4, .h4 {
  font-size: 13px; }

h5, .h5 {
  font-size: 12px; }

h6, .h6 {
  font-size: 11px; }

p,
dl,
li {
  font-size: 13px;
  line-height: 1.4; }

p {
  margin-bottom: 18px; }

blockquote p:last-child,
p:last-child {
  margin-bottom: 0; }

em {
  font-style: italic; }

strong {
  font-weight: bold; }

blockquote {
  display: block;
  padding: 5px 0 5px 10px;
  border-left: 5px solid #DDD;
  border-color: rgba(0, 0, 0, 0.1);
  font-size: 12px; }

blockquote p {
  margin-bottom: 4px; }

hr {
  clear: both;
  border: 0;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #f0f0f0; }

/* ----------------------------------------------------------
  Clearfix
---------------------------------------------------------- */
.clearfix,
.cssc-grid:before,
.cssc-grid:after,
.clearfix:after,
.subfloat:after {
  content: " ";
  display: block;
  visibility: hidden;
  clear: both;
  max-height: 0;
  overflow: hidden; }

hr.clearfix {
  height: 0;
  border: 0;
  outline: 0;
  background: transparent; }

/* ----------------------------------------------------------
  Selection style
---------------------------------------------------------- */
::-moz-selection {
  color: #000;
  background: rgba(51, 102, 153, 0.3); }

::selection {
  color: #000;
  background: rgba(51, 102, 153, 0.3); }

/* ----------------------------------------------------------
   Links
---------------------------------------------------------- */
a {
  color: #69C; }

a:focus,
a:hover {
  color: #369; }

a:active {
  color: #000; }

/* .99 Opacity avoids a nasty effect on Webkit */
/* ----------------------------------------------------------
  Transitions
---------------------------------------------------------- */
a,
.trans-col {
  transition: color 0.3s ease; }

.cssc-btn,
.trans-opa {
  transition: opacity 0.3s ease; }

.trans-all {
  transition: all 0.3s ease; }

input,
button,
textarea,
.cssc-pagination a,
.cssc-button,
.trans-button {
  transition: border 0.3s ease,background 0.3s ease,color 0.3s ease; }

/* ----------------------------------------------------------
  Block Media : Floating block
---------------------------------------------------------- */
/* By @Stubbornella : http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ */
.bmedia,
.bmedia-right,
.bm-cont {
  display: block;
  z-index: 1;
  position: relative;
  zoom: 1;
  overflow: hidden; }

.bmedia > :first-child {
  float: left;
  margin-right: 10px; }

.bmedia-right > :first-child {
  float: right;
  margin-left: 10px; }

.bmedia-right > .bm-cont:first-child,
.bmedia > .bm-cont:first-child {
  float: none;
  margin-right: 0;
  margin-left: 0; }

/* ----------------------------------------------------------
  Tags
---------------------------------------------------------- */
.cssc-tags a,
.cssc-tag {
  display: inline-block;
  z-index: 1;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  *display: inline;
  *zoom: 1; }

.cssc-tags a:before,
.cssc-tag:before {
  margin-right: 3px;
  vertical-align: baseline; }

/*
Name: Grids
URL: http://github.com/Darklg/CSSCommon
Version: 3.2.1
License: MIT
*/
.cssc-grid {
  clear: both;
  display: block;
  max-width: 100%; }

.cssc-grid:after {
  content: " ";
  display: block;
  visibility: hidden;
  clear: both;
  max-height: 0;
  overflow: hidden; }

.cssc-grid > * {
  display: block;
  float: left;
  zoom: 1;
  min-height: 1px; }

/* ----------------------------------------------------------
  Grille fluide
---------------------------------------------------------- */
.cssc-grid.fluid-grid {
  z-index: 1;
  position: relative;
  width: auto;
  margin: 0 -10px;
  max-width: none; }

.cssc-grid.fluid-grid > * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px; }

/* Colonnes
-------------------------- */
.fluid-grid .col-10p {
  width: 10%; }

.fluid-grid .col-20p {
  width: 20%; }

.fluid-grid .col-25p {
  width: 25%; }

.fluid-grid .col-30p {
  width: 30%; }

.fluid-grid .col-33p {
  width: 33.333%; }

.fluid-grid .col-40p {
  width: 40%; }

.fluid-grid .col-50p {
  width: 50%; }

.fluid-grid .col-60p {
  width: 60%; }

.fluid-grid .col-66p {
  width: 66.666%; }

.fluid-grid .col-75p {
  width: 75%; }

.fluid-grid .col-80p {
  width: 80%; }

/* Responsive
-------------------------- */
@media (max-width: 860px) {
  .fluid-grid.fluid-grid--responsive > .col-80p,
  .fluid-grid.fluid-grid--responsive > .col-75p,
  .fluid-grid.fluid-grid--responsive > .col-66p,
  .fluid-grid.fluid-grid--responsive > .col-60p,
  .fluid-grid.fluid-grid--responsive > .col-50p {
    float: none !important;
    width: 100% !important; }
  .fluid-grid.fluid-grid--responsive > * {
    width: 50%; } }

@media (max-width: 520px) {
  .fluid-grid.fluid-grid--responsive > * {
    float: none !important;
    width: 100% !important; } }

/* ----------------------------------------------------------
  Menu Principal
---------------------------------------------------------- */
.cssc-mainnav {
  z-index: 100;
  position: relative;
  min-height: 10px;
  vertical-align: middle; }

.cssc-mainnav:hover {
  z-index: 101; }

.cssc-mainmenu {
  height: 100%; }

.cssc-mainmenuplus {
  z-index: 102;
  float: right;
  position: relative; }

.cssc-mainmenuplus > li > a,
.cssc-mainmenuplus > li,
.cssc-mainmenu > li > a,
.cssc-mainmenu > li {
  float: left; }

.cssc-mainmenuplus > li > a,
.cssc-mainmenu > li > a {
  display: block;
  vertical-align: middle; }

/* Gestion sous-menu */
.cssc-mainmenu:hover,
.cssc-mainmenu:hover > li {
  z-index: 3;
  position: relative; }

/* ----------------------------------------------------------
  Responsive menu
---------------------------------------------------------- */
.cssc-responsive-menu {
  z-index: 1;
  position: relative; }

.cssc-responsive-menu__button,
.cssc-responsive-menu__links {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0; }

.cssc-responsive-menu__title {
  margin: 0;
  line-height: inherit; }

.cssc-responsive-menu__links a,
.cssc-responsive-menu__links li,
.cssc-responsive-menu__links {
  display: block;
  line-height: inherit; }

.cssc-responsive-menu__links li {
  float: left; }

.cssc-responsive-menu__button {
  display: none; }

@media (max-width: 720px) {
  .cssc-responsive-menu__button {
    display: block; }
  .cssc-responsive-menu__links {
    visibility: hidden;
    opacity: 0; }
  .is-open .cssc-responsive-menu__links {
    visibility: visible;
    opacity: 0.99; } }

/* Default theme
-------------------------- */
.cssc-responsive-menu--default {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  line-height: 40px; }

.cssc-responsive-menu__title {
  margin-left: 10px;
  font-size: 16px; }

.cssc-responsive-menu__button {
  top: 50%;
  right: 5px;
  height: 30px;
  margin-top: -15px;
  border: 1px solid #ccc;
  font-size: 15px;
  line-height: 20px;
  background-color: #fff; }

.cssc-responsive-menu__button .icon {
  display: inline-block;
  font-size: 25px;
  vertical-align: -1px; }

.cssc-responsive-menu__links li {
  margin-right: 10px; }

@media (max-width: 720px) {
  .cssc-responsive-menu__links {
    top: 100%;
    right: -1px;
    left: -1px;
    margin: 0;
    border: 1px solid #ccc;
    background-color: #fff; }
  .cssc-responsive-menu__links li + li {
    border-top: 1px solid #ccc; }
  .cssc-responsive-menu__links li {
    float: none;
    margin-right: 0;
    padding: 0 10px; } }

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?-b3atqm");
  src: url("../fonts/icomoon.eot?#iefix-b3atqm") format("embedded-opentype"), url("../fonts/icomoon.woff?-b3atqm") format("woff"), url("../fonts/icomoon.ttf?-b3atqm") format("truetype"), url("../fonts/icomoon.svg?-b3atqm#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-pause:before {
  content: "\e610"; }

.icon-play:before {
  content: "\e611"; }

.icon-youtube:before {
  content: "\e612"; }

.icon-soundcloud-logo:before {
  content: "\e613"; }

.icon-burger:before {
  content: "\e614"; }

.icon-google:before {
  content: "\e615"; }

.icon-tumblr:before {
  content: "\e616"; }

.icon-arrow-left:before {
  content: "\e601"; }

.icon-arrow-right:before {
  content: "\e602"; }

.icon-chat:before {
  content: "\e603"; }

.icon-chrono:before {
  content: "\e604"; }

.icon-cross:before {
  content: "\e605"; }

.icon-fb-logo:before {
  content: "\e606"; }

.icon-glass:before {
  content: "\e607"; }

.icon-heart:before {
  content: "\e608"; }

.icon-instagram-logo:before {
  content: "\e609"; }

.icon-reply:before {
  content: "\e60a"; }

.icon-rt:before {
  content: "\e60b"; }

.icon-share:before {
  content: "\e60c"; }

.icon-star:before {
  content: "\e60d"; }

.icon-twitter-logo:before {
  content: "\e60e"; }

.icon-wtf:before {
  content: "\e60f"; }

.icon-mail:before {
  content: "\e600"; }

.cssc-mainnav {
  height: 60px;
  padding: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  position: fixed;
  z-index: 10;
  top: 0px;
  left: 0px;
  right: 0px;
  transition: background .1s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform; }
  .cssc-mainnav.is-full, .menu-open .cssc-mainnav {
    background: #FFF; }
    .cssc-mainnav.is-full a, .menu-open .cssc-mainnav a {
      color: #282828; }
      .cssc-mainnav.is-full a:hover, .cssc-mainnav.is-full a.hover, .menu-open .cssc-mainnav a:hover, .menu-open .cssc-mainnav a.hover {
        color: #FFF;
        background: #282828; }
    .cssc-mainnav.is-full span.js-toggle-menu, .menu-open .cssc-mainnav span.js-toggle-menu {
      color: #282828; }
  .cssc-mainnav a {
    font-size: 16px;
    font-weight: 600;
    color: #FFF;
    line-height: 60px;
    padding: 0 18px;
    transition: color .06s linear, background .06s linear; }
    .cssc-mainnav a .icon-youtube {
      position: relative;
      top: -1px; }
    .cssc-mainnav a:hover, .cssc-mainnav a.hover {
      color: #000;
      background: #FFF; }
  .cssc-mainnav span.js-toggle-menu {
    font-size: 16px;
    font-weight: 600;
    color: #FFF;
    line-height: 60px;
    padding: 0 18px; }
  .cssc-mainnav .logo-header a {
    padding: 0px; }
  @media screen and (max-width: 850px) {
    .cssc-mainnav .js-radio {
      display: none; } }
  .cssc-mainnav .js-toggle-menu {
    display: none; }
    @media screen and (max-width: 600px) {
      .cssc-mainnav .js-toggle-menu {
        display: block; } }
  .cssc-mainnav.is-full #lang_sel_list a {
    color: #000; }
  .menu-open .cssc-mainnav #lang_sel_list a {
    color: #000; }
  .cssc-mainnav #lang_sel_list {
    height: auto; }
    .cssc-mainnav #lang_sel_list ul {
      width: 60px;
      max-height: 60px;
      overflow: hidden;
      transition: max-height .08s linear, background .08s linear; }
      .cssc-mainnav #lang_sel_list ul:hover {
        max-height: 140px;
        background: #FFF; }
        .cssc-mainnav #lang_sel_list ul:hover a {
          color: #CDCDCD; }
          .cssc-mainnav #lang_sel_list ul:hover a:hover {
            color: #000; }
      .cssc-mainnav #lang_sel_list ul li {
        display: block;
        float: none; }
    .cssc-mainnav #lang_sel_list a {
      display: block;
      font-size: 21px;
      font-family: "Lato", sans-serif;
      font-weight: 600;
      color: #FFF;
      line-height: 60px;
      padding: 0 18px;
      transition: color 0.06s linear, background 0.06s linear;
      background: transparent; }

.is-playing .js-radio {
  position: relative; }
  .is-playing .js-radio:before {
    content: '';
    position: absolute;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABTCAMAAADgFQouAAAAGFBMVEUAAAD///////////////////////////8jfp1fAAAAB3RSTlMAE1zitpE02Y78WAAAAYNJREFUeNrtmM0SwjAIhEP4e/839uBopsHZGsCbnJ2vy7K2JCNVJqOriL0NJu5dMHXvgk33Lpj5q7TB93fNulkAVmC5NcKYUohLuir+G/vuPrYMR+qailWUsCikNRNZehrUEYzJHljEmVkuCddZJGZJKwAgZfZlFCIrdimnEd9tjMJwf4A1gjDcH2RNENj4042FhCnuby/4NIb9RRYUNmF/9yzd3XdUmGWb+0lWfCvONCt6oUUWbZNMsuIkKc2Kk7Q0K05yplnRME2zomGSZsWEcZ4Vza+y5o9Y9GfdsqzRe/vNHLmRJY2518b/46yyuO9dSI3vaEt/O7D1VZb0fWspvwPgpPbsE3hn4uM9h+BaeM9SsPxiacj52CKWhmQxREVptQsBEsRS6DyWhtaS2jltCJaFpeFVdRxJ243H51osDW7j40waPgqdSRurrHalQ7KZ1XQJJg6Nr9+A1VFavXlcxUWzCjPEx5Ziad2smC7pu/cVGg2lK6T1kj7UIFmoen1EPQCZq0L8XZVfUgAAAABJRU5ErkJggg==") center center no-repeat;
    background-size: auto 100%;
    top: 50%;
    margin-top: -5.5px;
    right: 2px;
    width: 10px;
    height: 11px; }

.is-playing .is-full .js-radio:before {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABUCAQAAACCGxlWAAABtklEQVR4Ae2a0ZEDMQhD1QOtuByaohkX5Ea478zejW6isJCZhQZeQChebNwYCxsDw3CQE9E2EjkPLZDIeWiORM5DW8hLxhTRX9NHqEtAawBLrKloB3Yjxt8e1jcECwdJBkBQmuhWxDKuaXcpiZvsbXZrLyoaYxz+qiBitcJ0qmZwDa60KGshAePtXB82BwL2/3buej9niuQ101v4BhhIzdQWCmBeY7WOJIm3axZaC0kKP+6ILSQJoWautVAHCz4A+fEkQf4DrAeMHx69DEyURnSDGZnMGjBpMq0QTJrMVQgmTaaXgYkqizIwUWW7FEzwslMGJsu/Hcy/DcxUsAfsASPej/lgo1p5poLtqc4fU/8rferpYk09j1k32Jr6MRINn2+69PvAbOqKwDuWKnojhWuGmm2P6ftEDSxIIyvqJgjf9VW6BhbCBlaom/yuoKpuLEIQvlQ3aZXSdfsGbKFeYt2kzWth3YjshRtetW7CCr20blU3SHrdfo/V+8LHsLm6Jr0k2/xhw/OGjGPpbay5qj7N6uqcRuFipjNiirq4h+2ZL4c3DGMiBEstjj0TCzDsciwB7vvjB0zmjR9fICa1AAAAAElFTkSuQmCC") center center no-repeat;
  background-size: auto 100%; }

@media screen and (max-width: 600px) {
  .cssc-mainmenu > li > a {
    display: none; } }

.logo-header {
  width: 64px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -27px 0 0 -32px;
  -webkit-transform: scale3d(0, 0, 0);
          transform: scale3d(0, 0, 0);
  opacity: 0;
  transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
  transition: transform .2s ease-in-out, opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  z-index: 10; }
  .is-full .logo-header, .menu-open .logo-header {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    opacity: 1; }
  .logo-visible:not(.is-full) .logo-header {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    opacity: 1; }
    .logo-visible:not(.is-full) .logo-header #clique-logo {
      fill: #FFF; }
  .logo-header a {
    transition: opacity .1s linear;
    display: block;
    height: 60px; }
    .logo-header a:hover {
      opacity: .8;
      color: #000;
      background: transparent !important; }
  .logo-header svg {
    width: 64px; }

.menu-open .logo-visible:not(.is-full) .logo-header #clique-logo {
  fill: #000; }

.cssc-mainnav .icon-wtf, .cssc-mainnav .icon-glass, .cssc-mainnav .icon-fb-logo, .cssc-mainnav .icon-twitter-logo, .cssc-mainnav .icon-youtube, .cssc-mainnav .icon-instagram-logo {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  font-size: 24px; }

.cssc-mainnav .icon-glass, .cssc-mainnav .icon-fb-logo, .cssc-mainnav .icon-twitter-logo, .cssc-mainnav .icon-youtube, .cssc-mainnav .icon-instagram-logo {
  font-size: 20px;
  line-height: 24px;
  text-align: center; }

.cssc-mainnav .js-search {
  position: relative; }
  .cssc-mainnav .js-search:before {
    content: "";
    position: absolute;
    bottom: -3px;
    background: transparent;
    width: 0px;
    height: 0px;
    border: 12px solid transparent;
    border-bottom-color: #FFF;
    opacity: 0;
    transition: none; }

.search-open .js-search:before {
  opacity: 1; }

@media screen and (max-width: 750px) {
  .cssc-mainmenuplus li > a {
    display: none; }
  .cssc-mainmenuplus #lang_sel_list {
    display: block; }
  .cssc-mainmenuplus .js-search {
    display: block; } }

.cl-mobile-menu {
  position: fixed;
  top: 60px;
  background: #FFF;
  z-index: 10;
  width: 100%;
  overflow: hidden;
  visibility: hidden;
  max-height: 0px;
  transition: max-height .4s ease-in-out, visibility .4s ease-in-out; }
  @media screen and (min-width: 600px) {
    .cl-mobile-menu {
      display: none; } }
  .menu-open .cl-mobile-menu {
    visibility: visible;
    max-height: 90%;
    overflow-y: scroll; }
  .cl-mobile-menu a {
    color: #282828; }
  .cl-mobile-menu .js-radio {
    display: none; }

.mobile-menu__links li {
  display: block;
  text-align: center;
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #F1F1F1;
  transition: border-color .06s; }
  .mobile-menu__links li:hover {
    border-color: #282828; }
  .mobile-menu__links li:first-child {
    border-top: 1px solid #F1F1F1; }
  .mobile-menu__links li a {
    display: block;
    font-size: 20px;
    transition: background .06s, color .06s; }
    .mobile-menu__links li a:hover, .mobile-menu__links li a:active {
      background-color: #282828;
      color: #FFF; }
  .mobile-menu__links li .icon-wtf {
    font-size: 28px;
    position: relative;
    top: 2px; }

.mobile-menu__socials {
  list-style: none; }
  .mobile-menu__socials.only-3 li {
    width: 33%; }
  .mobile-menu__socials li {
    border-right: 1px solid #F1F1F1;
    display: block;
    float: left;
    width: 25%;
    text-align: center; }
    .mobile-menu__socials li:last-child {
      border-right: none; }
  .mobile-menu__socials a {
    height: 70px;
    display: block;
    font-size: 20px;
    line-height: 70px;
    transition: background .06s, color .06s, border-color .06s; }
    .mobile-menu__socials a:hover, .mobile-menu__socials a:active {
      background-color: #282828;
      color: #FFF;
      border-color: #282828; }

.js-toggle-menu {
  width: 60px; }
  .js-toggle-menu .icon-cross {
    display: none; }
  .menu-open .js-toggle-menu .icon-burger {
    display: none; }
  .menu-open .js-toggle-menu .icon-cross {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: 2px;
    left: 1px; }

.cssc-mainmenu .menu-item-has-children .sub-menu {
  visibility: hidden;
  display: none; }

#cat-menu {
  overflow: hidden;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: max-height .1s linear;
  max-height: 0px;
  position: fixed;
  top: 60px;
  width: 100%;
  left: 0px;
  right: 0px;
  padding: 0px;
  bottom: 0px;
  background: #FFF;
  z-index: 1000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow-y: scroll;
  opacity: 0; }
  .sub-menu-open #cat-menu {
    max-height: 100%;
    padding: 20px 10px;
    opacity: 1; }
    .sub-menu-open #cat-menu a {
      display: block;
      visibility: visible; }
  #cat-menu a {
    display: none;
    visibility: hidden; }
  #cat-menu .close {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 11;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    width: 34px;
    height: 34px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #D3D3D3;
    color: #D3D3D3;
    display: inline-block;
    transition: color .06s, background .06s, border-color .06s; }
    #cat-menu .close:hover {
      background: #282828;
      color: #FFF;
      border-color: #282828; }
    #cat-menu .close i {
      line-height: 34px;
      font-size: 12px; }
  @media screen and (max-width: 720px) {
    #cat-menu .close {
      right: 20px;
      cursor: pointer;
      font-size: 12px;
      width: 28px;
      height: 28px; }
      #cat-menu .close i {
        line-height: 28px;
        font-size: 10px; } }

#cat-menu > .sub-menu > .menu-item-has-children > a {
  display: block;
  width: 100%;
  color: #282828;
  text-align: left;
  font-size: 20px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  cursor: normal;
  pointer-events: none;
  margin-left: 10px; }
  #cat-menu > .sub-menu > .menu-item-has-children > a:hover {
    color: #282828;
    background-color: transparent; }

#cat-menu > .sub-menu > .menu-item-has-children + li {
  margin-top: 30px; }

#cat-menu > .sub-menu > .menu-item-has-children > .sub-menu {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }

#cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li {
  -webkit-flex: 0 0 100%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  padding: 10px;
  position: relative; }
  @media screen and (min-width: 650px) {
    #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li {
      -webkit-flex: 0 0 50%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%; } }
  @media screen and (min-width: 1060px) {
    #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li {
      -webkit-flex: 0 0 33%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 33%;
              flex: 0 0 33%; } }
  @media screen and (min-width: 1420px) {
    #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li {
      -webkit-flex: 0 0 25%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 25%;
              flex: 0 0 25%; } }
  @media screen and (min-width: 1800px) {
    #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li {
      -webkit-flex: 0 0 25%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 25%;
              flex: 0 0 25%; } }
  @media screen and (min-width: 2200px) {
    #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li {
      -webkit-flex: 0 0 16.666666667%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 16.666666667%;
              flex: 0 0 16.666666667%; } }
  #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li a {
    padding: 0px;
    margin: 0;
    line-height: 1;
    display: block;
    width: 100%;
    height: 235px;
    opacity: .93;
    transition: opacity .1s linear;
    position: relative;
    background-size: cover; }
    #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li a:hover {
      opacity: 1; }
    #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li a:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      top: 0;
      left: 0; }
  #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li img {
    width: 100%;
    height: 100%;
    padding: 0px; }
  #cat-menu > .sub-menu > .menu-item-has-children > .sub-menu > li span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    font-size: 32px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    width: 100%; }

.cl-mobile-menu .mobile-menu__title, .mobile-sub-menu .menu-item-has-children > a {
  display: block;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #474747;
  background-color: #ECECEC;
  padding: 0px;
  font-weight: 300; }
  .cl-mobile-menu .mobile-menu__title:hover, .mobile-sub-menu .menu-item-has-children > a:hover {
    color: #474747;
    background-color: #ECECEC; }

.mobile-sub-menu, .mobile-sub-menu > .sub-menu > li {
  height: auto !important;
  line-height: 1 !important; }

.mobile-sub-menu > .sub-menu > li > .sub-menu > li {
  height: 70px;
  position: relative;
  overflow: hidden;
  border-bottom: none; }
  .mobile-sub-menu > .sub-menu > li > .sub-menu > li a {
    position: relative;
    display: block;
    height: 70px; }
    .mobile-sub-menu > .sub-menu > li > .sub-menu > li a:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      top: 0;
      left: 0;
      z-index: 2; }
  .mobile-sub-menu > .sub-menu > li > .sub-menu > li img {
    position: absolute;
    top: 50%;
    left: 0px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 100%;
    height: 225px; }
  .mobile-sub-menu > .sub-menu > li > .sub-menu > li span {
    position: absolute;
    top: 50%;
    left: 0px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #FFF;
    z-index: 3; }

.strate-article {
  padding: 35px 0 0;
  background: #FFF;
  position: relative; }

.article {
  width: calc(100% - 50px);
  max-width: 900px;
  margin: 0 auto;
  position: relative; }

.article__content {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px; }
  @media screen and (max-width: 480px) {
    .article__content {
      font-size: 16px; } }
  .article__content > * {
    width: 100%;
    max-width: 650px;
    display: block;
    margin: 0 auto; }
  .article__content img {
    width: 100%;
    cursor: pointer; }
  .article__content p, .article__content ul {
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 54px; }
  .article__content li {
    font-size: 20px; }
  .article__content blockquote {
    max-width: 80%;
    margin: 0 auto 54px;
    margin-left: 30px;
    border-left: 1px solid #b4b4b4;
    padding-left: 29px; }
    @media screen and (max-width: 650px) {
      .article__content blockquote {
        margin-left: 0px; } }
    .article__content blockquote p {
      font-size: 22px;
      font-weight: bold;
      font-family: "Lato", sans-serif; }
  .article__content a:not(.cssc-tag) {
    text-decoration: underline; }
  .article__content strong, .article__content b {
    font-weight: bold; }
  .article__content em, .article__content i {
    font-style: italic; }
  .article__content ul {
    list-style-type: disc;
    padding-left: 15px; }
  .article__content h2 {
    font-family: "Lato", sans-serif;
    font-size: 32px;
    margin-bottom: 54px; }
    @media screen and (max-width: 600px) {
      .article__content h2 {
        font-size: 24px;
        margin-bottom: 40px; } }
  .article__content a {
    color: #282828; }

@media screen and (min-width: 1000px) {
  .post__large {
    margin-left: -50px;
    margin-right: -50px; }
    .post__large iframe {
      width: 100%; } }

.has-contributor {
  position: relative; }
  .has-contributor .wp-post-image {
    width: 80px;
    height: 80px;
    position: absolute;
    left: -100px; }
    @media screen and (max-width: 870px) {
      .has-contributor .wp-post-image {
        display: none; } }
  .has-contributor a {
    color: #b4b4b4;
    font-size: 12px;
    font-style: italic; }

.article__meta {
  color: #b4b4b4;
  font-size: 12px;
  font-style: italic; }

.article__title {
  font-family: "Lato", sans-serif;
  font-size: 40px;
  margin-bottom: 54px; }

.article__excerpt p {
  font-style: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px; }

.article__comments {
  text-align: center;
  position: relative;
  width: 100%; }
  .article__comments:before {
    content: "";
    position: absolute;
    width: 98%;
    max-width: 600px;
    height: 1px;
    background-color: #f5f5f5;
    top: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
  .article__comments a.js-comments {
    height: 95px;
    line-height: 95px;
    display: block;
    text-decoration: none;
    transition: background .08s linear; }
    .article__comments a.js-comments:hover {
      background-color: #FBFBFB; }
  .article__comments .icon-chat {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    margin-right: 6px; }
  .article__comments a {
    color: #282828;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: bold; }

.article__navigation {
  display: none; }
  .article__navigation .direction-left, .article__navigation .direction-right {
    font-size: 26px;
    color: #bfbfbf;
    display: inline-block;
    padding: 20px 20px 20px 15px;
    border-radius: 0 3px 3px 0;
    opacity: 0;
    cursor: pointer;
    transition: background .06s, color .06s, opacity .06s; }
    .article__navigation .direction-left:hover, .article__navigation .direction-right:hover {
      background: #3d3d3d;
      color: #FFF; }
  .article__navigation .direction-right {
    right: 0px;
    padding: 20px 15px 20px 20px;
    border-radius: 3px 0 0 3px; }
  .article__navigation.is-fixed {
    display: block; }
    .article__navigation.is-fixed .direction-left, .article__navigation.is-fixed .direction-right {
      position: fixed;
      top: 40%;
      opacity: 1; }
  @media screen and (max-width: 900px) {
    .article__navigation {
      display: none !important; } }

.article__contributor-strate {
  position: relative;
  padding: 30px 0;
  color: #B4B4B4;
  overflow: hidden; }
  .article__contributor-strate:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #f5f5f5;
    top: 0px;
    left: 0px; }
  .article__contributor-strate .wrapper {
    width: 90%;
    max-width: 600px;
    display: block;
    margin: 0 auto; }

.contributor__picture {
  vertical-align: middle;
  margin-right: 10px;
  float: left; }
  .contributor__picture img {
    width: 80px;
    height: 80px; }

.contributor__content {
  float: left;
  width: 310px;
  vertical-align: middle; }
  @media screen and (max-width: 600px) {
    .contributor__content {
      width: 195px; } }

.contributor__name {
  font-size: 36px; }
  @media screen and (max-width: 600px) {
    .contributor__name {
      font-size: 24px; } }

.contributor__desc {
  font-size: 17px;
  font-style: italic;
  font-weight: 300; }
  @media screen and (max-width: 600px) {
    .contributor__desc {
      font-size: 15px; } }

.contributor__button {
  display: inline-block;
  font-size: 20px;
  color: #B4B4B4;
  border: 1px solid #B4B4B4;
  border-radius: 4px;
  width: 200px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  position: relative;
  top: 20px;
  transition: background .12s linear, color .12s linear, border .12s linear; }
  .contributor__button:hover {
    background: #282828;
    color: #FFF;
    border-color: #282828; }
  @media screen and (max-width: 600px) {
    .contributor__button {
      display: block;
      width: 90%;
      max-width: 300px;
      margin: 10px auto;
      clear: both; } }

.gallery .gallery-item:first-child {
  width: 96%;
  float: none;
  margin: 1% 2%; }

.gallery .gallery-item {
  margin: 1%;
  width: 48%;
  float: left; }

.article__share {
  position: absolute;
  width: 920px;
  left: 50%;
  margin-left: -450px;
  top: 0px;
  text-align: right;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none; }
  .article__share ul {
    float: right;
    pointer-events: visible; }
  @media screen and (max-width: 920px) {
    .article__share {
      display: none !important; } }
  .article__share.is-fixed {
    position: fixed;
    top: 120px; }
  .article__share a {
    position: relative;
    color: #282828;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
    border: 1px solid #282828;
    border-radius: 50%;
    transition: background .06s, color .06s;
    display: inline-block;
    margin-bottom: 10px; }
    .article__share a:hover {
      background: #282828;
      color: #FFF; }
      .article__share a:hover .share__counter {
        color: #282828; }
    .article__share a .share__counter {
      position: absolute;
      top: 0;
      left: auto;
      right: 110%;
      text-align: right;
      font-size: 16px; }
  .article__share .icon-twitter-logo {
    font-size: 14px; }
  .article__share .js-article-share {
    font-size: 29px; }
  .article__share.visible .js-article-share {
    font-size: 23px;
    line-height: 37px; }

.article__share--mobile {
  display: none; }
  @media screen and (max-width: 900px) {
    .article__share--mobile {
      display: block;
      width: 98%;
      max-width: 320px;
      margin: -20px auto 20px;
      text-align: center; } }
  .article__share--mobile ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .article__share--mobile li {
    display: inline-block;
    margin-right: 5px; }
  .article__share--mobile a {
    position: relative;
    color: #282828;
    text-decoration: none !important;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    border: 1px solid #282828;
    border-radius: 50%;
    transition: background .06s, color .06s;
    display: inline-block; }
    .article__share--mobile a i {
      font-style: normal; }
    .article__share--mobile a:hover {
      background: #282828;
      color: #FFF; }
  .article__share--mobile .icon-twitter-logo {
    font-size: 14px; }

.article__share-hide {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .08s linear; }
  .visible .article__share-hide {
    max-height: 200px; }

@media screen and (min-width: 1650px) {
  .strate--instagram .cssc-grid, .strate--twitter .cssc-grid, .strate--twitter .cssc-grid {
    max-width: 1650px;
    margin: 0 auto; } }

@media screen and (max-width: 980px) {
  .strate--instagram, .strate--twitter, .strate--twitter {
    display: none; } }

@media screen and (max-width: 500px) {
  .strate--instagram, .strate--twitter, .strate--twitter {
    display: block; }
    .strate--instagram .col-33p, .strate--twitter .col-33p, .strate--twitter .col-33p {
      width: 100%;
      float: none;
      margin: 40px auto; } }

.strate--instagram, .strate--twitter {
  position: relative;
  padding: 40px 20px;
  background: #F0F0F0; }

.strate--twitter {
  background: #FFF;
  position: relative; }
  .strate--twitter:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #f5f5f5;
    top: 0px;
    left: 0px; }

.strate-social__title {
  font-family: "Lato", sans-serif;
  font-size: 40px;
  text-align: center;
  margin-bottom: 70px; }
  @media screen and (max-width: 600px) {
    .strate-social__title {
      font-size: 26px;
      margin-bottom: 0px; } }
  .strate-social__title img {
    vertical-align: middle;
    margin-left: 10px; }
    @media screen and (max-width: 600px) {
      .strate-social__title img {
        width: 140px; } }

.strate__subscribe {
  display: inline-block;
  position: absolute;
  top: 46px;
  right: 30px;
  height: 40px;
  border: 1px solid #282828;
  color: #282828;
  font-size: 18px;
  padding: 0 14px;
  line-height: 38px;
  border-radius: 4px;
  transition: background .12s, color .12s; }
  @media screen and (max-width: 780px) {
    .strate__subscribe {
      display: none; } }
  .strate__subscribe i {
    margin-right: 8px;
    font-size: 16px; }
  .strate__subscribe:hover {
    background: #282828;
    color: #FFF; }

.instagram-meta {
  margin-top: 10px; }
  .instagram-meta > div:first-child {
    margin-right: 40px; }
  .instagram-meta > div {
    display: inline-block;
    font-size: 14px; }
  .instagram-meta i {
    vertical-align: middle;
    font-size: 16px; }
  .instagram-meta .count {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px; }

.tweet-item {
  text-align: center;
  position: relative;
  overflow: hidden; }
  .tweet-item .tweet__wrapper {
    border: 1px solid #F0F0F0;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px; }
  .tweet-item .tweet-share {
    position: absolute; }
  .tweet-item:before {
    content: "";
    display: block;
    padding-top: 100%; }

.tweet__content {
  padding-top: 45px; }

.tweet__author {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: left;
  height: 45px; }

.tweet__avatar {
  vertical-align: middle;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 4px;
  width: 25px; }

.tweet__name {
  font-size: 15px;
  font-weight: 500; }

.tweet__author-name {
  display: inline-block;
  text-align: left; }

.tweet__media {
  background-position: center top;
  padding-top: 50%;
  max-height: 220px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 10px; }
  @media screen and (max-width: 1250px) {
    .tweet__media {
      padding-top: 40%; } }
  @media screen and (max-width: 1080px) {
    .tweet__media {
      padding-top: 35%; } }

.tweet__post {
  font-size: 16px;
  font-weight: bold;
  font-family: "Lato", sans-serif;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto; }
  .tweet__post a {
    color: #282828;
    transition: color .08s linear 0s; }
    .tweet__post a:hover {
      opacity: .8; }
  @media screen and (max-width: 1080px) {
    .tweet__post {
      font-size: 14px; } }
  .tweet__post.is-big {
    padding: 0 30px;
    font-size: 22px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
    @media screen and (max-width: 1080px) {
      .tweet__post.is-big {
        font-size: 18px; } }
  .tweet__post a {
    text-decoration: underline; }

.tweet__username {
  font-size: 12px;
  color: #B4B4B4;
  margin-left: 6px; }

.tweet-share {
  bottom: 20px;
  width: 100%; }
  @media screen and (max-width: 1080px) {
    .tweet-share {
      bottom: 10px; } }
  .tweet-share a {
    display: inline-block;
    margin: 0 10px;
    font-size: 13px;
    color: #B4B4B4;
    transition: color .12s; }
    .tweet-share a .icon-star {
      font-size: 14px; }
    .tweet-share a:hover {
      color: #000; }

.related-posts {
  background: #F8F8F8;
  padding: 40px 20px; }
  .related-posts.yarpp-related-none {
    display: none; }
  .related-posts > h2 {
    font-family: "Lato", sans-serif;
    font-size: 40px;
    text-align: center;
    margin-bottom: 70px; }
  @media screen and (max-width: 640px) {
    .related-posts > h2 {
      font-size: 30px; } }
  .related-posts .post {
    width: 100%;
    margin-bottom: 40px; }
    @media screen and (min-width: 480px) {
      .related-posts .post {
        width: calc(50% - 10px);
        margin-bottom: 40px; } }
    @media screen and (min-width: 640px) {
      .related-posts .post {
        width: calc(33.3333333% - 15px); } }
    @media screen and (min-width: 1020px) {
      .related-posts .post {
        width: calc(25% - 20px); } }

.wtf-post-type {
  padding: 130px 0; }

.wtf-posts {
  width: 94%;
  max-width: 610px;
  display: block;
  margin: 75px auto 0; }
  .wtf-posts > .post {
    margin: 0 0 100px;
    display: block;
    width: 100%; }

.wtf__media {
  text-align: center;
  margin-bottom: 5px; }
  .wtf__media img {
    width: 100%; }
  .wtf__media > * {
    display: inline-block; }

.wtf__title {
  font-family: "Lato", sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px; }

.wtf__content {
  margin-bottom: 15px; }
  .wtf__content img {
    opacity: 1 !important; }
  .wtf__content a {
    color: #282828;
    text-decoration: underline; }
  .wtf__content p {
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px; }
  .wtf__content iframe {
    margin: 10px auto;
    display: block; }

.wtf__media .gapplayer-wrapper {
  max-width: 100%;
  height: auto; }

.instagram-media {
  width: 580px; }

.about-page {
  text-align: center; }
  .about-page .cssc-grid {
    padding: 50px 20px 80px;
    margin: 0; }
  .about-page .col-33p {
    margin-bottom: 75px; }
    .about-page .col-33p a {
      max-width: 300px;
      display: block;
      margin: 0 auto; }
    @media screen and (max-width: 700px) {
      .about-page .col-33p {
        width: 50%; } }
    @media screen and (max-width: 500px) {
      .about-page .col-33p {
        width: 100%;
        float: none; } }
  .about-page h2 {
    font-size: 36px;
    margin-bottom: 80px; }
    @media screen and (max-width: 600px) {
      .about-page h2 {
        margin-bottom: 2px; } }

.top--about {
  background: #282828;
  position: relative;
  top: -5%;
  color: #FFF; }
  .top--about .wrapper {
    width: 90%;
    max-width: 590px;
    margin: 0 auto;
    padding: 40px 0;
    position: relative; }
  .top--about h1 {
    font-size: 37px;
    margin-bottom: 40px; }
    @media screen and (max-width: 600px) {
      .top--about h1 {
        margin-bottom: 30px;
        font-size: 32px; } }
  .top--about p {
    font-size: 16px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.65;
    font-weight: 300; }

.about__pic {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding-top: 100%;
  max-width: 300px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block; }

.about__name {
  color: #282828;
  font-size: 20px;
  margin-top: 15px;
  display: inline-block; }

.about__catch-phrase {
  font-style: italic;
  margin-bottom: 48px; }
  @media screen and (max-width: 600px) {
    .about__catch-phrase {
      margin-bottom: 40px; } }

.about__social {
  position: absolute;
  top: 45px;
  right: 0px; }
  @media screen and (max-width: 600px) {
    .about__social {
      top: auto;
      bottom: 0px;
      left: 50%;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      right: auto;
      width: 90%;
      max-width: 300px;
      text-align: center; } }

.about__button {
  display: inline-block;
  float: left;
  width: 42px;
  height: 42px;
  color: #FFF;
  margin-left: 0px;
  text-align: center;
  padding: 0;
  transition: background .06s linear 0s, color .06s linear 0s; }
  @media screen and (max-width: 600px) {
    .about__button {
      display: inline-block;
      float: none; } }
  .about__button i {
    font-size: 20px;
    line-height: 40px; }
  .about__button.about__button--soundcloud i {
    font-size: 16px; }
  .about__button:hover {
    background: #FFF;
    color: #282828; }

.cookies {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 18px;
  color: #FFF;
  position: fixed;
  bottom: 40px;
  width: 90%;
  max-width: 680px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1000;
  display: none; }
  .cookies.is-visible {
    display: block; }
  .cookies h4 {
    font-size: 22px;
    font-family: "Lato", sans-serif;
    margin-bottom: 10px; }
  .cookies p {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.3; }
  .cookies__close {
    font-size: 6px;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    border: 1px solid #FFF;
    background: transparent;
    cursor: pointer;
    transition: background .06s, color .06s;
    border-radius: 50%;
    position: absolute;
    top: 18px;
    right: 18px; }
    .cookies__close:hover {
      background: #FFF;
      color: #282828; }
  @media screen and (max-width: 600px) {
    .cookies {
      bottom: 0px;
      width: 100%;
      padding: 8px 55px 8px 10px;
      background-color: rgba(0, 0, 0, 0.85); }
      .cookies h4 {
        font-size: 18px; }
      .cookies p {
        font-size: 11px; }
      .cookies .cookies__close {
        top: 0px;
        bottom: 0px;
        width: 50px;
        right: 0px;
        left: auto;
        height: auto;
        border-radius: 0px;
        background: #000;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        font-size: 20px;
        border: none;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer; } }

/* Make clicks pass-through */
#nprogress {
  pointer-events: none; }

#nprogress .bar {
  background: #282828;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; }

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px; }

#nprogress .spinner-icon {
  display: none; }

.nprogress-custom-parent {
  overflow: hidden;
  position: relative; }

.nprogress-custom-parent #nprogress .bar {
  position: absolute; }

.err404 {
  margin: 70px 0; }
  .err404 .strate-main__title {
    margin-bottom: 35px; }

.err404__message {
  text-align: center; }
  .err404__message p {
    font-size: 18px; }

.posts-cats-filters {
  height: 100px;
  text-align: center;
  margin: 50px auto;
  display: table;
  border-collapse: collapse; }
  @media screen and (max-width: 740px) {
    .posts-cats-filters {
      display: none; } }

.smartphone-only {
  display: none; }
  @media screen and (max-width: 740px) {
    .smartphone-only {
      display: block;
      padding: 0;
      margin: 0;
      border: 1px solid #ccc;
      width: 100%;
      border-radius: 3px;
      overflow: hidden;
      background-color: #fff;
      background: #fff;
      position: relative; }
      .smartphone-only:after {
        top: 50%;
        left: 91%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: transparent;
        border-top-color: #000000;
        border-width: 7px;
        margin-top: -2px;
        z-index: 100; } }

#videos-cat-select {
  padding: 12px;
  font-size: 15px;
  width: 130%;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
  #videos-cat-select:focus {
    outline: none; }

.posts-cats-filter {
  color: #BEBDBE;
  font-size: 16px;
  display: table-cell;
  margin: 0;
  transition: color .1s linear 0s, background .1s linear 0s;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  width: 240px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.1;
  font-weight: 600;
  font-family: "Lato", sans-serif; }
  .posts-cats-filter span {
    display: inline-block;
    vertical-align: middle; }
  .posts-cats-filter i {
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
    margin-right: 5px; }
  .posts-cats-filter.is-active, .posts-cats-filter:hover, .posts-cats-filter:active {
    color: #282828;
    background: #F8F8F8; }

.videos {
  position: relative;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
  -webkit-align-items: flex-start;
     -moz-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }
  .videos:before {
    opacity: 0;
    transition: opacity .1s linear; }
  .videos.is-loading:before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    opacity: 1;
    z-index: 1000; }

.videos-no-element {
  text-align: center;
  padding: 40px 0; }
  .videos-no-element p {
    font-size: 22px;
    font-weight: bold;
    color: #B4B4B4; }

.videos__item {
  padding: 10px;
  max-width: 400px;
  margin-bottom: 30px; }
  .videos__item h2 {
    color: #282828; }
  @media screen and (max-width: 2820px) {
    .videos__item {
      -webkit-flex: 0 0 14.285714286%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 14.285714286%;
              flex: 0 0 14.285714286%; } }
  @media screen and (max-width: 2420px) {
    .videos__item {
      -webkit-flex: 0 0 16.666666667%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 16.666666667%;
              flex: 0 0 16.666666667%; } }
  @media screen and (max-width: 2020px) {
    .videos__item {
      -webkit-flex: 0 0 20%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 20%;
              flex: 0 0 20%; } }
  @media screen and (max-width: 1620px) {
    .videos__item {
      -webkit-flex: 0 0 25%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 25%;
              flex: 0 0 25%; } }
  @media screen and (max-width: 1220px) {
    .videos__item {
      -webkit-flex: 0 0 33.3333333%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 33.3333333%;
              flex: 0 0 33.3333333%; } }
  @media screen and (max-width: 820px) {
    .videos__item {
      -webkit-flex: 0 0 50%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%; } }
  @media screen and (max-width: 480px) {
    .videos__item {
      -webkit-flex: 0 0 100%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 100%;
              flex: 0 0 100%; } }

@media screen and (max-width: 700px) {
  .hero--video__navigation {
    display: none; } }

.hero--video__navigation .direction-left, .hero--video__navigation .direction-right {
  position: absolute;
  top: 50%;
  margin-top: -36px;
  font-size: 26px;
  color: #bfbfbf;
  display: inline-block;
  padding: 20px 20px 20px 15px;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  transition: background .06s, color .06s, opacity .06s; }
  .hero--video__navigation .direction-left:hover, .hero--video__navigation .direction-right:hover {
    background: #FFF;
    color: #282828; }

.hero--video__navigation .direction-left {
  left: 0; }

.hero--video__navigation .direction-right {
  right: 0;
  padding: 20px 15px 20px 20px;
  border-radius: 3px 0 0 3px; }

@media screen and (max-device-width: 480px) {
  html {
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%; } }

input::-moz-focus-inner {
  border: 0; }

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000; }

a, a:hover, a:active, a:focus {
  outline: 0; }

html,
body,
#page-wrap {
  height: 100%; }

body {
  background: #FFFFFF;
  font-family: "Lato", sans-serif;
  color: #282828;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  font-weight: 400; }
  body.search-open, body.gallery-overlay, body.radio-open, body.sub-menu-open, body.menu-open {
    overflow: hidden;
    max-height: 100%;
    height: 100%; }
    @media (max-height: 650px) {
      body.search-open, body.gallery-overlay, body.radio-open, body.sub-menu-open, body.menu-open {
        position: fixed; } }

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
       box-sizing: border-box; }

#logo-main {
  will-change: transform; }
  #logo-main #clique-logo {
    fill: #FFF; }
  @media screen and (max-width: 600px) {
    #logo-main svg {
      width: 160px; } }

.hero, .hero--about {
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  height: 70%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  background-repeat: no-repeat;
  color: #FFF;
  text-align: center;
  background-position: center center;
  background-size: cover; }
  @media (min-height: 900px) and (orientation: portrait) {
    .hero, .hero--about {
      height: 65%; } }
  @media (max-height: 650px) {
    .hero, .hero--about {
      height: 55%; } }

.is-clickable {
  cursor: pointer; }

.hero--about {
  height: auto;
  min-height: 620px;
  padding-top: 620px;
  background-position: center top;
  background-size: cover; }
  @media screen and (max-width: 850px) {
    .hero--about {
      min-height: 350px;
      padding-top: 350px; } }
  @media screen and (max-width: 500px) {
    .hero--about {
      min-height: 250px;
      padding-top: 250px; } }

.hero--video {
  position: relative;
  padding: 75px 0 15px;
  background: #FFF; }
  .hero--video.hero--cliquetv {
    background-color: #282828;
    color: #FFF; }
    .hero--video.hero--cliquetv .hero__share .share {
      color: #FFF; }
      .hero--video.hero--cliquetv .hero__share .share .icon-share {
        border-color: #FFF; }
      .hero--video.hero--cliquetv .hero__share .share:hover .icon-share {
        background-color: #FFF;
        color: #282828; }
  .hero--video__container {
    width: auto;
    max-width: 80%;
    margin: 0 auto;
    text-align: center; }
  .hero--video h1 {
    text-align: left;
    margin: 15px 0 6px; }

.hero--video.hero--home {
  padding: 0;
  display: block; }

.hero--video .hero__container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.canal-player-wrapper,
.hero__meta {
  margin: 0 auto; }

.hero__share {
  float: right; }
  .hero__share .share {
    color: #000;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer; }
    .hero__share .share .icon-share {
      border-color: #000; }
    .hero__share .share:hover .icon-share {
      background-color: #282828;
      color: #000; }

@media screen and (max-height: 700px) {
  .hero--video h1 {
    font-size: 15px; }
  .hero--read {
    font-size: 13px; } }

.hero__player {
  min-height: 600px; }
  @media screen and (max-height: 980px), screen and (max-width: 1350px) {
    .hero__player {
      min-height: 500px; } }
  @media screen and (max-height: 820px), screen and (max-width: 1100px) {
    .hero__player {
      min-height: 400px; } }
  @media screen and (max-height: 680px), screen and (max-width: 890px) {
    .hero__player {
      min-height: 300px; } }
  @media screen and (max-height: 540px), screen and (max-width: 680px) {
    .hero__player {
      min-height: 200px; } }
  @media screen and (max-height: 400px), screen and (max-width: 420px) {
    .hero__player {
      min-height: 0; } }
  .hero__player img {
    display: block; }

.is-hidden {
  display: none !important; }

.hero__read {
  text-align: left; }
  .hero__read a {
    text-decoration: underline;
    color: #8D8D8D; }

.hero--smallpic {
  padding: 100px 0 20px;
  text-align: center; }
  .hero--smallpic__container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto; }

.hero__container {
  min-height: 100%;
  position: relative; }
  .hero__container .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%); }
    @media screen and (max-width: 400px) {
      .hero__container .logo {
        top: 30%;
        -webkit-transform: translate3d(-50%, -30%, 0);
                transform: translate3d(-50%, -30%, 0); } }

.hero__post-meta {
  position: absolute;
  bottom: 0px;
  padding: 14px 20px;
  width: 100%;
  text-align: left;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.08) 0%, transparent 100%); }
  .hero__post-meta * {
    display: inline-block;
    vertical-align: middle; }
  .hero__post-meta h2 {
    font-weight: 500;
    font-size: 26px;
    margin-right: 25px;
    margin-bottom: 0px;
    position: relative; }
    .hero__post-meta h2 a {
      color: #FFF; }
      .hero__post-meta h2 a:hover {
        opacity: .85; }
  .hero__post-meta .cssc-tag {
    color: #FFF;
    font-size: 14px;
    font-weight: 300;
    border: 1px solid #FFF;
    border-radius: 2px;
    padding: 0px .5em;
    margin-right: .6em;
    background: transparent;
    transition: background .06s linear, border .06s linear;
    height: 24px;
    line-height: 22px; }
    .hero__post-meta .cssc-tag:hover {
      background: #FFF;
      border-color: #FFF;
      color: #282828; }
  .hero__post-meta .share {
    color: #FFF;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer; }
    .hero__post-meta .share .icon-share {
      border-color: #FFF; }
    .hero__post-meta .share:hover .icon-share {
      background-color: #282828;
      color: #FFF;
      border-color: #282828; }
  .hero__post-meta .is-visible .icon-share {
    background-color: #282828;
    color: #FFF;
    border-color: #282828; }
  @media screen and (max-width: 600px) {
    .hero__post-meta {
      display: none; } }

.hero__post-meta--mobile {
  padding: 15px 10px 20px;
  background: #282828;
  text-align: left; }
  .hero__post-meta--mobile h2 {
    font-size: 22px;
    margin: 0;
    text-align: left;
    display: block; }
  .hero__post-meta--mobile * {
    display: inline-block;
    vertical-align: middle; }
  .hero__post-meta--mobile h2 {
    font-weight: 500;
    font-size: 22px;
    position: relative; }
    .hero__post-meta--mobile h2 a {
      color: #FFF; }
      .hero__post-meta--mobile h2 a:hover {
        opacity: .85; }
  .hero__post-meta--mobile .cssc-tag {
    color: #FFF;
    font-size: 14px;
    font-weight: 300;
    border: 1px solid #FFF;
    border-radius: 2px;
    padding: 0px .5em;
    margin-right: .6em;
    background: transparent;
    transition: background .06s linear, border .06s linear;
    height: 24px;
    line-height: 22px; }
    .hero__post-meta--mobile .cssc-tag:hover {
      background: #FFF;
      border-color: #FFF;
      color: #282828; }
  .hero__post-meta--mobile .share {
    color: #FFF;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer; }
    .hero__post-meta--mobile .share .icon-share {
      border-color: #FFF; }
    .hero__post-meta--mobile .share:hover .icon-share {
      background-color: #FFF;
      color: #282828; }
  .hero__post-meta--mobile .js-share {
    margin-left: 0px !important; }
  .hero__post-meta--mobile .is-visible .icon-share {
    background-color: #FFF;
    color: #282828; }
  .hero__post-meta--mobile .cssc-tag, .hero__post-meta--mobile .js-share {
    margin-top: 10px; }
  @media screen and (min-width: 600px) {
    .hero__post-meta--mobile {
      display: none; } }

.strate-main {
  padding: 10px 20px; }

.strate-main__title {
  font-family: "Lato", sans-serif;
  font-size: 40px;
  text-align: center;
  margin-bottom: 60px; }
  @media screen and (max-width: 600px) {
    .strate-main__title {
      font-size: 32px;
      margin-bottom: 30px; } }

.with-top-offset {
  margin-top: 110px; }
  .wtf-post-type .with-top-offset {
    margin-top: 15px; }

.posts-filters {
  height: 70px;
  text-align: center;
  line-height: 70px;
  margin-bottom: 10px; }

.posts-filter {
  color: #BEBDBE;
  font-size: 16px;
  display: inline-block;
  margin: 0;
  transition: color .1s linear 0s, background .1s linear 0s;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  border: 1px solid #F1F1F1;
  border-radius: 0 2px 2px 0;
  line-height: 38px;
  width: 240px;
  max-width: 50%;
  text-align: center; }
  .posts-filter span {
    display: inline-block;
    vertical-align: middle; }
  .posts-filter.first {
    border-right: none;
    border-radius: 2px 0 0 2px; }
  .posts-filter i {
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
    margin-right: 5px; }
  .posts-filter.is-active, .posts-filter:hover, .posts-filter:active {
    color: #282828;
    background: #F8F8F8; }

.posts {
  position: relative; }

.post {
  width: 100%;
  margin-bottom: 50px; }
  @media screen and (min-width: 600px) {
    .post {
      width: 50%;
      padding: 0 15px; } }
  @media screen and (min-width: 1300px) {
    .post {
      width: 33.3333333%; } }
  @media screen and (min-width: 1700px) {
    .post {
      width: 25%; } }
  .post .share {
    color: #282828;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer; }
    .post .share .icon-share {
      border-color: #282828; }
    .post .share:hover .icon-share {
      background-color: #282828;
      color: #FFF; }
  .post .is-visible .share .icon-share {
    background-color: #282828;
    color: #FFF;
    border-color: #282828; }
  .post img {
    width: auto;
    height: auto;
    opacity: 0;
    transition: opacity .1s linear; }

.post__thumbnail--video {
  position: relative; }
  .post__thumbnail--video.is-playing:before, .post__thumbnail--video.is-playing:after {
    display: none !important; }
  .post__thumbnail--video.is-playing .videos__item__playing {
    display: block; }
  .post__thumbnail--video:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    margin: -50px 0 0 -50px;
    top: 50%;
    left: 50%;
    z-index: 2;
    pointer-events: none;
    display: none; }
  .post__thumbnail--video:after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 0 20px 34.6px;
    border-color: transparent transparent transparent #FFF;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -16px;
    z-index: 3;
    pointer-events: none;
    display: none; }
  .post__thumbnail--video:hover:before, .post__thumbnail--video:hover:after {
    display: inline-block; }
  @media screen and (max-width: 600px) {
    .post__thumbnail--video:before {
      width: 80px;
      height: 80px;
      margin: -40px 0 0 -40px; }
    .post__thumbnail--video:after {
      border-width: 15px 0 15px 27.6px;
      margin: -15px 0 0 -12px; } }
  @media screen and (max-width: 750px) {
    .post__thumbnail--video:before, .post__thumbnail--video:after {
      display: inline-block; } }

.videos__item__playing {
  display: block;
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 3;
  display: none; }
  .videos__item__playing span {
    font-weight: 500;
    color: #FFF;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    letter-spacing: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%); }

.hero--video .post__thumbnail--video:before, .hero--video .post__thumbnail--video:after {
  display: inline-block; }

@media screen and (min-width: 600px) {
  .post__link:hover .post__thumbnail, .post__link:hover .post__title a {
    opacity: .8; } }

.post__thumbnail {
  display: block;
  margin-bottom: 10px;
  transition: opacity .08s linear;
  position: relative; }
  .post__thumbnail:hover img {
    opacity: 1; }
  .post__thumbnail img {
    width: 100%; }

.post__original {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  background-image: url("../img/clique-original.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  max-width: 291px;
  max-height: 323px;
  width: 100%;
  height: 100%;
  pointer-events: none; }

.post__title {
  margin-bottom: 0px;
  font-weight: 400;
  font-size: 22px; }

.post__title a {
  color: #282828;
  position: relative;
  transition: opacity .08s linear; }
  .post__title a:hover {
    opacity: .8; }

.post__meta > * {
  margin-top: 7px; }

.post__meta * {
  display: inline-block;
  vertical-align: middle; }

.posts-load, .posts-load-video, .posts-load-wtf, .posts-load-contributor {
  text-align: center;
  padding: 60px 0; }
  .posts-load a, .posts-load-video a, .posts-load-wtf a, .posts-load-contributor a {
    color: #282828;
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    border: 1px solid #282828;
    border-radius: 20px;
    height: 40px;
    line-height: 38px;
    width: 250px;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .3s, color .3s, width .3s linear;
    text-align: center;
    position: relative;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
    .posts-load a span, .posts-load-video a span, .posts-load-wtf a span, .posts-load-contributor a span {
      opacity: 1;
      transition: opacity .2s linear .1s; }
    .posts-load a.animate, .posts-load-video a.animate, .posts-load-wtf a.animate, .posts-load-contributor a.animate {
      width: 40px; }
      .posts-load a.animate span, .posts-load-video a.animate span, .posts-load-wtf a.animate span, .posts-load-contributor a.animate span {
        visibility: hidden;
        opacity: 0; }
    .posts-load a:not(.animate):hover, .posts-load-video a:not(.animate):hover, .posts-load-wtf a:not(.animate):hover, .posts-load-contributor a:not(.animate):hover {
      background: #282828;
      color: #FFF; }
    .posts-load a:focus, .posts-load-video a:focus, .posts-load-wtf a:focus, .posts-load-contributor a:focus {
      outline: none; }
    .posts-load a.animate:before, .posts-load-video a.animate:before, .posts-load-wtf a.animate:before, .posts-load-contributor a.animate:before {
      content: "";
      opacity: 0;
      position: absolute;
      width: 8px;
      height: 12px;
      background: #FFF;
      top: 40px;
      margin-top: -6px;
      left: 50%;
      margin-left: -4px;
      -webkit-transform-origin: center -110%;
          -ms-transform-origin: center -110%;
              transform-origin: center -110%;
      -webkit-animation: circle .6s infinite linear, appear .225s 1 linear forwards;
              animation: circle .6s infinite linear, appear .225s 1 linear forwards;
      -webkit-animation-delay: .4s;
              animation-delay: .4s; }

@-webkit-keyframes circle {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn); } }

@keyframes circle {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn); } }

@-webkit-keyframes appear {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes appear {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.strate-wtf {
  height: 390px;
  font-size: 220px;
  width: 100%;
  background-image: url("../img/wtf-hero.gif");
  background-size: 60% auto;
  background-position: center center;
  background-repeat: repeat-x;
  position: relative;
  text-align: center;
  transition: opacity .06s linear;
  cursor: pointer;
  display: block; }
  .strate-wtf:hover {
    opacity: .9; }
  .strate-wtf span {
    color: #FFF;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 30%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
  @media screen and (max-width: 600px) {
    .strate-wtf {
      height: 250px;
      font-size: 140px; }
      .strate-wtf span {
        left: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
                transform: translate3d(-50%, -50%, 0); } }
  @media screen and (max-width: 780px) {
    .strate-wtf {
      background-size: cover; } }

.footer {
  background-color: #f8f8f8; }
  .footer .cssc-grid {
    padding: 50px 20px 10px;
    margin: 0 auto; }
    .footer .cssc-grid .js-revealscroll-footer {
      display: none; }
    @media screen and (max-width: 860px) {
      .footer .cssc-grid {
        padding: 40px 0px; } }
    @media screen and (min-width: 1400px) {
      .footer .cssc-grid {
        max-width: 1400px; } }
  .footer .col-33p {
    text-align: center;
    padding: 0 25px; }
    @media screen and (max-width: 860px) {
      .footer .col-33p {
        padding: 0 5px; } }
    @media screen and (max-width: 820px) {
      .footer .col-33p {
        float: none;
        width: 100%;
        margin: 50px 0; } }
    .footer .col-33p h3 {
      font-size: 32px;
      line-height: 1;
      margin-bottom: 24px; }
    .footer .col-33p p {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      font-weight: 400;
      color: #282828;
      -webkit-font-smoothing: antialiased; }
      .footer .col-33p p a {
        color: #282828;
        text-decoration: underline; }
    .footer .col-33p form {
      margin-bottom: 15px; }
    .footer .col-33p label {
      font-size: 12px;
      color: #b4b4b4;
      display: inline-block;
      width: 200px;
      vertical-align: middle;
      text-align: left;
      margin-left: 15px;
      position: relative;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
      .footer .col-33p label i {
        display: none; }
    .footer .col-33p input[type="checkbox"] {
      display: none; }
    .footer .col-33p .checkbox:before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      position: absolute;
      left: -35px;
      top: 50%;
      margin-top: -10px;
      background-color: #F8F8F8;
      border: 1px solid #C9C9C9;
      border-radius: 1px;
      cursor: pointer; }
    .footer .col-33p .checkbox:hover:before {
      background-color: whitesmoke; }
    .footer .col-33p input[type=checkbox]:checked + label i {
      color: #B4B4B4;
      font-size: 10px;
      position: absolute;
      left: -35px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      display: inline-block;
      top: 50%;
      margin-top: -9px; }
    .footer .col-33p input[type="email"] {
      background: #FFF;
      color: #282828;
      border: none;
      height: 46px;
      line-height: 20px;
      width: 280px;
      text-align: center;
      font-size: 16px;
      padding: 10px;
      border: 1px solid transparent;
      transition: border .08s linear; }
      .footer .col-33p input[type="email"]:focus {
        border-color: rgba(0, 0, 0, 0.2); }
    .footer .col-33p strong {
      font-weight: bold; }

#mce-responses .response {
  text-align: left;
  font-size: 13px;
  color: #FFF;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px;
  line-height: 1.5;
  font-weight: 300; }
  #mce-responses .response a {
    text-decoration: underline;
    color: #FFF; }

.footer-thumbnail--rounded {
  width: 120px;
  height: 120px;
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  border-radius: 50%;
  background-position: center top;
  background-size: cover;
  margin-bottom: 30px; }

.footer__credits {
  background: #282828;
  min-height: 84px;
  padding: 0 40px;
  overflow: hidden; }
  @media screen and (max-width: 600px) {
    .footer__credits {
      padding: 0; } }
  .footer__credits .canal-copyright {
    display: inline-block;
    margin-right: 10px; }
  .footer__credits .canal-logo {
    display: inline-block;
    line-height: 84px; }
    @media screen and (max-width: 600px) {
      .footer__credits .canal-logo {
        display: block;
        width: 100%;
        float: right;
        line-height: 68px;
        text-align: center; } }
    .footer__credits .canal-logo img {
      vertical-align: middle; }
  .footer__credits .footer__credits-links {
    float: right;
    line-height: 84px; }
    .footer__credits .footer__credits-links li {
      display: inline-block;
      margin: 0 45px; }
    .footer__credits .footer__credits-links .lang-footer {
      display: none; }
      @media screen and (max-width: 600px) {
        .footer__credits .footer__credits-links .lang-footer {
          display: block; } }
    .footer__credits .footer__credits-links a {
      color: #FFF;
      font-weight: 300;
      font-size: 14px;
      display: block;
      transition: opacity .1s linear; }
      .footer__credits .footer__credits-links a:hover {
        opacity: .8; }
    @media screen and (max-width: 600px) {
      .footer__credits .footer__credits-links {
        display: block;
        width: 100%;
        float: left;
        text-align: center; }
        .footer__credits .footer__credits-links li {
          margin: 0;
          display: block;
          line-height: 68px;
          border-bottom: 1px solid #1F1F1F; }
        .footer__credits .footer__credits-links a {
          font-size: 18px;
          display: inline-block; } }

::-webkit-input-placeholder {
  color: #b4b4b4; }

::-moz-placeholder {
  color: #b4b4b4; }

:-ms-input-placeholder {
  color: #b4b4b4; }

::placeholder {
  color: #b4b4b4; }

.search {
  width: 100%;
  background: #FFF;
  position: absolute;
  left: 0px;
  height: 110px;
  max-height: 0px;
  text-align: center;
  top: 60px;
  overflow: hidden;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: max-height .1s linear; }
  .search-open .search {
    max-height: 110px; }
    .search-open .search input[type="text"] {
      opacity: 1; }
  .search input[type="text"] {
    font-size: 34px;
    height: 110px;
    width: 100%;
    font-family: "Lato", sans-serif;
    font-weight: bold;
    border: none;
    color: #282828;
    opacity: 0;
    transition: opacity .12s linear;
    display: inline-block;
    text-align: center;
    -moz-box-sizing: content-box;
         box-sizing: content-box; }
  .search .close {
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: -17px;
    z-index: 11;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    width: 34px;
    height: 34px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #E9E9E9;
    color: #E9E9E9;
    display: inline-block;
    transition: color .06s, background .06s, border-color .06s; }
    .search .close:hover {
      background: #282828;
      color: #FFF;
      border-color: #282828; }
    .search .close i {
      line-height: 34px;
      font-size: 12px; }
  @media screen and (max-width: 720px) {
    .search input[type="text"] {
      font-size: 22px; }
    .search .close {
      right: 20px;
      margin-top: -14px;
      cursor: pointer;
      font-size: 12px;
      width: 28px;
      height: 28px; }
      .search .close i {
        line-height: 28px;
        font-size: 10px; } }
  @media screen and (max-width: 380px) {
    .search input[type="text"] {
      font-size: 18px;
      font-weight: 500; } }

#search-result {
  position: fixed;
  width: 100%;
  background: #FFF;
  z-index: 103;
  top: 170px;
  bottom: 0px;
  padding: 20px;
  overflow-y: scroll;
  display: none; }
  #search-result .no-result {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    font-family: "Lato", sans-serif;
    margin: 20px 0;
    color: #5b5b5b;
    display: none; }
  #search-result.has-no-result .no-result {
    display: block; }
  #search-result .post {
    width: 100%;
    margin-bottom: 40px; }
    @media screen and (min-width: 480px) {
      #search-result .post {
        width: 50%;
        margin-bottom: 40px; } }
    @media screen and (min-width: 640px) {
      #search-result .post {
        width: 33.3333333%; } }
    @media screen and (min-width: 1020px) {
      #search-result .post {
        width: 25%; } }
  #search-result.is-visible {
    display: block;
    opacity: 1; }

#search-result-wrapper {
  transition: opacity .1s linear;
  overflow: hidden;
  position: relative; }

.cssc-tag {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  color: #282828;
  font-size: 14px;
  font-weight: 300;
  border: 1px solid #282828;
  border-radius: 2px;
  padding: 0px .5em;
  margin-right: .6em;
  background: transparent;
  transition: background .05s linear 0s, color .05s linear 0s;
  height: 24px;
  line-height: 22px; }
  .cssc-tag:hover {
    color: #FFF;
    background: black; }
  .cssc-tag + .js-share {
    margin-left: 15px; }
  @media screen and (max-width: 600px) {
    .cssc-tag + .js-share {
      margin-left: 0px !important; } }

.js-share {
  position: relative; }

.share .icon-share {
  font-size: 9px;
  line-height: 24px;
  text-align: center;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: background .12s, border .12s, color .12s; }

.share-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: transparent;
  z-index: 9;
  display: none; }
  .js-share.is-visible .share-overlay {
    display: block; }

.share-hud {
  position: absolute;
  width: 42px;
  height: 140px;
  background: rgba(0, 0, 0, 0.7);
  top: -155px;
  left: -10px;
  transition: opacity .18s ease-in-out, -webkit-transform .18s ease-in-out;
  transition: transform .18s ease-in-out, opacity .18s ease-in-out;
  transition: transform .18s ease-in-out, opacity .18s ease-in-out, -webkit-transform .18s ease-in-out;
  opacity: 0;
  -webkit-transform: scale3d(0, 0, 0);
          transform: scale3d(0, 0, 0);
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
  z-index: 10; }
  .is-visible .share-hud {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  .share-hud:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -16px;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.7); }
  .share-hud a {
    display: block;
    height: 33.3333%;
    color: #FFF;
    font-size: 16px;
    text-align: center; }
    .share-hud a span {
      line-height: 46.666666667px; }
    .share-hud a .icon-twitter-logo {
      font-size: 15px; }

.bmedia__thumbnail--rounded {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  overflow: hidden; }

.btn {
  display: inline-block;
  color: #282828;
  font-size: 16px;
  min-width: 180px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  background-color: transparent;
  border: 1px solid #282828;
  border-radius: 2px;
  transition: background .06s linear 0s, color .06s linear 0s; }
  .btn:hover {
    background: #282828;
    color: #FFF; }

button.btn {
  padding: 0px; }

.text--center {
  text-align: center; }

.fb-comments {
  opacity: 0;
  max-height: 0px;
  padding: 0px;
  overflow: hidden;
  display: block !important;
  transition: opacity .15s linear, max-height .15s linear, padding .15s linear; }
  .fb-comments.is-visible {
    opacity: 1;
    max-height: 2000px;
    overflow-y: scroll;
    padding: 10px 0 0; }

#article-gallery {
  background: #FFF;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale3d(0, 0, 0);
          transform: scale3d(0, 0, 0);
  transition: -webkit-transform .3s ease-in-out .1s;
  transition: transform .3s ease-in-out .1s;
  transition: transform .3s ease-in-out .1s, -webkit-transform .3s ease-in-out .1s;
  z-index: 1000;
  padding: 0px; }
  #article-gallery > * {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
  #article-gallery .gallery-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  .gallery-visible #article-gallery {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  #article-gallery .close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    border: 1px solid #EBEBEB;
    border-radius: 50%;
    display: inline-block;
    font-size: 14px;
    color: #EBEBEB;
    line-height: 40px;
    text-align: center;
    transition: background .06s, color .06s, border-color .06s;
    cursor: pointer; }
    #article-gallery .close:hover {
      background: #282828;
      color: #FFF;
      border-color: #282828; }

.cl-gallery-slider {
  overflow: hidden;
  height: 100%; }

.cl-gallery-image {
  max-height: 84%;
  max-width: 80%;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  visibility: hidden; }
  .cl-gallery-image.is-visible {
    visibility: visible;
    opacity: 1; }

#article-gallery.is-single .cl-gallery-nav {
  display: none; }

.cl-gallery-nav span {
  font-size: 26px;
  color: #bfbfbf;
  display: inline-block;
  padding: 20px 20px 20px 15px;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  transition: background .06s, color .06s;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  position: fixed; }
  .cl-gallery-nav span:hover {
    background: #3d3d3d;
    color: #FFF; }

.cl-gallery-nav span:nth-of-type(2) {
  right: 0px;
  padding: 20px 15px 20px 20px;
  border-radius: 3px 0 0 3px; }

.cl-gallery-dots {
  position: absolute;
  bottom: 2%;
  width: 100%;
  left: 0px;
  text-align: center; }

.cl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px;
  background: #FFF;
  border: 1px solid #E9E9E9; }
  .cl-dot.is-active {
    background: #E9E9E9; }

.gapplayer-wrapper {
  width: 100%;
  height: auto; }

.gapplayer-wrapper img {
  width: 100%;
  height: auto; }

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: none; }
  .radio-open .overlay, .search-open .overlay {
    display: block; }
  .menu-open .overlay {
    display: block;
    background: rgba(0, 0, 0, 0.6); }
  .sub-menu-open .overlay {
    display: block;
    background: rgba(0, 0, 0, 0.6); }

.player-responsive {
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 59.25%; }

.player-inner {
  position: absolute;
  width: 100%;
  height: 100%; }

.browserupgrade__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  /* IE 5-7 */
  filter: alpha(opacity=70);
  opacity: .7;
  z-index: 9999; }

.browserupgrade__text {
  position: fixed;
  width: 100%;
  max-width: 500px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -200px;
  background: #000;
  padding: 20px;
  color: #FFF;
  font-size: 16px;
  z-index: 10000;
  text-align: center; }
  .browserupgrade__text img {
    margin: 30px 0; }
  .browserupgrade__text span {
    line-height: 1.8; }
  .browserupgrade__text a {
    color: #FFF;
    text-decoration: underline; }

.dgd_stb_box {
  background: #FFF;
  box-shadow: 0 0 60px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 50px 20px 10px !important; }
  .dgd_stb_box p {
    margin-bottom: 0px; }
  @media screen and (max-width: 500px) {
    .dgd_stb_box {
      max-width: 98%;
      left: 5px !important; } }
  .dgd_stb_box h5 {
    font-size: 28px; }
  .dgd_stb_box .dgd_stb_box_x::before {
    color: #222; }