/*!
 _________   ________   ________   _______-+-
/\* ______\ /\* ____ \ /\* ____ \ /\* ____ \
\ \ \_____/ \ \ \__/\ \\ \ \__/\ \\ \ \__/\ \
 \ \ \   ____\ \ \_\_\ \\ \ \_\_\ \\ \ \_\_\ \
  \ \ \ /\__ \\ \  __  _\\ \  __  _\\ \  __  _\
   \ \ \_/_/\ \\ \ \/\ \/_\ \ \/\ \/_\ \ \/\ \/_
    \ \________\\ \_\ \___\\ \_\ \___\\ \_\ \___\
     \/________/ \/_/\/___/ \/_/\/___/ \/_/\/___/.nl -->

      Author: Grrr.nl
*/
/* ==========================================================================
   CONTENTS
   ==========================================================================

 * Imports.............Import external stylesheets
 * Primary styles......Non module styles  (e.g. basic typography)
 * Specific styles.....Common styles used througout the site
 * Layout..............General layout stuff
 * Modules.............Modules based on SMACSS
 * Print styles........Styles for printing
 */
/* import order is important */
/* ==========================================================================
   functions
   ========================================================================== */
/**
 * For converting pixels to ems
 * Based on a 10px font-size on the html
 * Usage:
 * div { width: pxToEm(300); }
 * Returns:
 * div { width: 30em; }
 */
/**
 * Color mixins (other than lighten or darken)
 */
/**
 * z-index function
 * For dynamically determining the stacking order of elements
 *
 * Usage:
 * .module { z-index: z('module'); }
 * .module__child { z-index: z('child'); }
 *
 * See $z-index variable in _variables.scss for stacking order
 */
/* ==========================================================================
   mixins
   ========================================================================== */
/**
 * Font smoothing
 */
/**
 * Shortcut for :hover, :active, and :focus styles.
 *
 * Usage:
 * a {
 *   color: blue;
 *   @include hover { color: red; }
 * }
 */
/**
 * Shortcut for :active styles.
 * Used for specifiying a explicit active style (overwrites hover() for example).
 *
 * Usage:
 * a {
 *   color: blue;
 *   @include active { color: red; }
 * }
 */
/**
 * Clearfix
 * Actually an @extend, but we don't want to depend on inclusion order
 *
 * Usage:
 * section { @include cleafix(); }
 */
/*
 * Bare list
 * Author: Mattijs Bliek
 *
 * Get rid of list-style and padding
 */
/**
 * Sprite
 * Author: Mattijs Bliek
 *
 * Use a background sprite for text-replacement or icons
 *
 * Usage:
 * .icon { @include sprite(icons, 300px 200px): }
 *
 * It is recommended to replace the size of the sprite with a variable
 */
/**
 * For image replacement
 */
/**
 * For using breakpoints
 * Usage:
 * div { width: 60px;
 *	@include breakpoint-min($small) { width: 80px; }
 * }
 *
 * Pass true as a second parameter to toggle high dpi screens
 */
/**
 * For targetting high dpi screens
 * Usage:
 * div {
 *	width: 30px; height: 30px; background: url('img.jpg');
 *	@include high-dpi() { background: url('image-2x.jpg'); @include background-size(30px 30px); }
 * }
 */
/**
 * For targeting old-IE
 * Usage:
 * div {
 *  @include old-ie { zoom: 1; }
 * }
 */
/**
 * Calculate fluid ratio based on two dimensions (width/height)
 * @see http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
 * Usage:
 * .header { @include fluid-ratio(800px 200px, 300px 150px); background-image: url('img/branding.png'); }
 */
/* ==========================================================================
   variables
   ========================================================================== */
/*
 * z-index
 * for stacking stuff
 *
 * define the stacking order for modules here
 * within a module you should define it via
 * the $module-z-index variable
 */
/* ==|== html5 boilerplate normalize ======================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none; }

[hidden] {
  display: none; }

html {
  overflow-y: scroll;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* style color on img differently to easily spot alt-text and thus a missing image */
img {
  border: 0;
  color: #CCC;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle; }


/* ==========================================================================
	PRIMER
	========================================================================== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; }

html {
  box-sizing: border-box;
  font-size: 62.5%;
  line-height: 1.4; }

*, *:before, *:after {
  box-sizing: inherit; }

body, button, input, select, textarea {
  font-family: 'AvenirNextLTW01-Regular', 'Montserrat', sans-serif;
  font-weight: normal;
  font-size: 13px;
  font-size: 1.3rem;
  color: #2f2f2f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  letter-spacing: -.015em; }
  @media only screen and (min-width: 64em) {
    body, button, input, select, textarea {
      font-size: 15px;
      font-size: 1.5rem; } }

body {
  background-color: #000;
  color: #ffffff; }

.controller {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);
          transform: translateZ(0) translateX(-50%) translateY(-50%);
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.controller__tracks {
  margin: 0;
  padding: 0;
  list-style-type: none;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transition: -webkit-transform .15s ease;
          transition: transform .15s ease; }

.controller__track {
  position: relative;
  line-height: 0; }
  .controller__track + .controller__track {
    margin-top: 20px; }

.controller__track span {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  width: 100px;
  height: 100px;
  -webkit-transform: scale(.25);
      -ms-transform: scale(.25);
          transform: scale(.25);
  background: rgba(0, 0, 0, 0.08);
  border: 6px solid #ffffff;
  border-radius: 50%;
  -webkit-transition: all .15s ease;
          transition: all .15s ease;
  cursor: pointer; }

.controller[data-active-track="1"] .controller__tracks {
  -webkit-transform: translateY(35.2%);
      -ms-transform: translateY(35.2%);
          transform: translateY(35.2%); }
.controller[data-active-track="1"] .controller__track:nth-child(1) span {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  border-width: 2px; }
  .controller[data-active-track="1"] .controller__track:nth-child(1) span:before {
    opacity: 1; }

.controller[data-active-track="2"] .controller__track:nth-child(2) span {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  border-width: 2px; }
  .controller[data-active-track="2"] .controller__track:nth-child(2) span:before {
    opacity: 1; }

.controller[data-active-track="3"] .controller__tracks {
  -webkit-transform: translateY(-35.2%);
      -ms-transform: translateY(-35.2%);
          transform: translateY(-35.2%); }
.controller[data-active-track="3"] .controller__track:nth-child(3) span {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  border-width: 2px; }
  .controller[data-active-track="3"] .controller__track:nth-child(3) span:before {
    opacity: 1; }

/**
 * Wheel / Time
 */
.controller__wheel {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) translateZ(0);
          transform: translateY(-50%) translateZ(0);
  width: 100px;
  height: 100px;
  border-radius: 50%; }

.controller__handle {
  z-index: 10;
  position: relative;
  width: 100%;
  height: 100%; }

.controller__handle:before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px;
  -webkit-transition: opacity .15s ease;
          transition: opacity .15s ease; }

/* Safari doesn't support cursors on pseudo elements */
.controller__handle,
.controller__handle:before {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

body.dragging,
.scrobbling .controller__handle,
.scrobbling .controller__handle:before {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.controller__play,
.controller__time {
  z-index: 11;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  color: #ffffff;
  letter-spacing: 0.03em;
  text-shadow: rgba(0, 0, 0, 0.1) 0 0 3px; }
/*
.playing .controller__play,
.seeking .controller__play,
.scrobbling .controller__play { display: none; }

.controller__time { display: none; }
.playing .controller__time,
.seeking .controller__time,
.scrobbling .controller__time { display: block; }
*/

.controller__play {
  z-index: 11; /* Above .controller__handle */

  cursor: pointer;
  background: rgab(255,255,255,.1);
  border-radius: 50%;
  -webkit-transition: 0.25s ease;
  -webkit-transition-property: transform, opacity;
  transition: 0.25s ease;
  transition-property: transform, opacity;
}
.controller__play:hover,
.controller__play:focus {
  -webkit-transform: translate(-50%, -50%) scale(1.1);
  transform: translate(-50%, -50%) scale(1.1);
}

.demoing .controller__play {
  opacity: 0;
}

.played .controller__play {
  display: none;
}
.controller__time { display: none; cursor: default; }
.played .controller__time { display: block; }

.controller__time {
  border-radius: 50%;
  den;
  /*background: lime;*/
  width: 75%;
  height: 75%;
  padding-top: 27%;
}
.controller__wheel:before, .controller__wheel:after {
  content: '';
  position: absolute;
  left: 49%;
  bottom: -45px;
  height: 33px;
  border-left: 1px dashed #ffffff;
  opacity: .7;
  -webkit-transition: opacity .5s ease;
          transition: opacity .5s ease; }
  .is-switching .controller__wheel:before, .is-switching .controller__wheel:after {
    opacity: .3;
    -webkit-transition: opacity 0s;
            transition: opacity 0s; }

.controller__wheel:before {
  top: -45px;
  bottom: 0; }
  [data-active-track="1"] .controller__wheel:before {
    height: 69px;
    bottom: -164px;
    top: auto; }
  [data-active-track="3"] .controller__wheel:before {
    height: 69px;
    top: -164px;
    bottom: auto; }

[data-active-track="3"] .controller__wheel:after {
  top: -45px;
  bottom: 0; }

.settings {
  position: absolute;
  bottom: 15px;
  right: 15px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.settings ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  zoom: 1;
  width: 100%; }
  .settings ul:after {
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    content: ''; }

.settings ul .settings__item, .settings__sub-item {
  float: left;
  position: relative;
  display: inline-block;
  padding: 2px;
  cursor: pointer; }
  .settings ul .settings__item span, .settings__sub-item span {
    display: block;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid #ffffff;
    border-radius: 50%;
  -webkit-transition: border-color .3s ease;
          transition: border-color .3s ease;
  }
    .settings ul .settings__item span:hover, 
    .settings__sub-item span:hover {
      background: rgba(255, 255, 255, 0.3); }
    .settings ul .settings__item[aria-selected=true] span,
    .settings__sub-item[aria-selected=true] span {
      background: rgba(255, 255, 255, 0.5) !important; }

    .settings ul .settings__item[aria-checked=true] span,
    .settings ul .settings__item[aria-selected=true] span
    {
      background: rgba(255, 255, 255, 0.5) !important;
    }
    .settings:hover ul .settings__item[aria-checked=true] span,
    .settings:hover ul .settings__item[aria-selected=true] span
    {
      border-color: #DC0F46;
    }
/*
@-webkit-keyframes glow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.settings ul .settings__item[aria-checked=true][aria-busy=true] span {
    -webkit-animation-name:             glow;
    -webkit-animation-duration:         1s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-in-out;
}
*/

.settings__item {
  -webkit-transition: all .15s ease;
          transition: all .15s ease; }

.settings__sub-item {
  position: absolute;
  top: -120%;
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
  opacity: 0;
  -webkit-transition: all .15s ease;
          transition: all .15s ease;
  visibility: hidden; }
  .is-open .settings__sub-item {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    visibility: visible; }

.settings__item > ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }

.settings__item[aria-checked='true']  .unchecked-icon,
.settings__item[aria-checked='false']   .checked-icon
{
  display: none;
}

.settings__item--3.is-open {
    top: 150%;
}

.settings__item--3.is-open span img[alt="Subtitles"] {
  opacity: 0;
}        

.settings__item--2 li:nth-child(1),
.settings__item--3 li:nth-child(1) {
  top: 0;
  left: 0;
  -webkit-transition-delay: 0s;
          transition-delay: 0s; 
}

.settings__item--2 li:nth-child(2),
.settings__item--3 li:nth-child(2) {
  top: -100%;
  left: 0;
  -webkit-transition-delay: .05s;
          transition-delay: .05s; 
}

.settings__item--3 li:nth-child(3) {
  top: -200%;
  left: 0;
  -webkit-transition-delay: .1s;
          transition-delay: .1s; }

#sponsors {
  width: 100%;
}

#sponsors .logos {
  text-align: center;
}

#sponsors .logos td {
  padding-right: 10px !important;
  vertical-align: bottom !important;
  padding: 5px;
  width: 13%;
}

#sponsors .logos img {
  width: 100%;
}

#sponsors .logo {
  text-align: center;
}

#sponsors #logo-hfestival {
  width: 27%;
}

#sponsors #logo-sfestival {
  width: 26%;
}

#sponsors #logo-space {
  width: 12.1%;
}

#sponsors .logos #logo-fpk {
  vertical-align: middle !important;
  width: 17.5%;
}




/* ==========================================================================
   HELPERS
   ========================================================================== */
@media only screen and (max-width: 39.9375em) {
  .hide-on-palm {
    display: none !important; } }

@media only screen and (min-width: 40em) {
  .hide-on-lap {
    display: none !important; } }

.show-only-on-palm {
  display: none; }

@media only screen and (max-width: 39.9375em) {
  .show-only-on-palm {
    display: block !important; } }

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

.offscreen {
  position: absolute !important;
  left: -999em !important; }

.invisible {
  visibility: hidden !important; }

.clearfix {
  zoom: 1; }
  .clearfix:after {
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    content: ''; }

/* Make sure Like buttons do not suffer from cut-off comment-box syndrome */
.fb_iframe_widget span {
  width: 450px !important; }

/* Hide form field that should be left empty */
form .hp {
  display: none; }

/* ==========================================================================
	HOVER - disable on scroll (see function disableHoverStylesOnScroll() in main.js)
	========================================================================== */
.disable-hover {
  pointer-events: none; }

/* ==========================================================================
	PRINT
	========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    text-shadow: none !important;
    -webkit-filter: none !important;
            filter: none !important;
    -ms-filter: none !important; }
  /* Black prints faster: h5bp.com/s */
  a, a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content: ""; }
  /* Don't show links for images, or javascript/internal links */
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  /* h5bp.com/t */
  tr, img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }

  p, h2, h3 {
    orphans: 3;
    widows: 3; }
  h2, h3 {
    page-break-after: avoid; } }