@charset "UTF-8";

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

.fullwidth,
.fullwidth-tile,
.headlines-white .cover-pad img {
    width: 100% !important;
}

@media screen and (min-width: 768px) .fig-caption-r:after {
    content: "\e618";
    left: auto;
    right: 0.75em;
}


/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}


/**
 * Remove default margin.
 */

body {
    margin: 0;
}


/* HTML5 display definitions
========================================================================== */


/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}


/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}


/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

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


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

[hidden],
template {
    display: none;
}


/* Links
========================================================================== */


/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background: transparent;
}


/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

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


/* Text-level semantics
========================================================================== */


/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}


/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
    font-weight: bold;
}


/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
    font-style: italic;
}


/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}


/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}


/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}


/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* Embedded content
========================================================================== */


/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
    border: 0;
}


/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
    overflow: hidden;
}


/* Grouping content
========================================================================== */


/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
    margin: 0;
}


/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}


/**
 * Contain overflow in all browsers.
 */

pre {
    overflow: auto;
}


/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}


/* Forms
========================================================================== */


/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */


/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    /* 1 */
    font: inherit;
    /* 2 */
    margin: 0;
    /* 3 */
}


/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
    overflow: visible;
}


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

button,
select {
    text-transform: none;
}


/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
}


/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}


/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


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

input {
    line-height: normal;
}


/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}


/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}


/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    /* 2 */
    box-sizing: content-box;
}


/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}


/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}


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

legend {
    border: 0;
    /* 1 */
    padding: 0;
    /* 2 */
}


/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
    overflow: auto;
}


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

optgroup {
    font-weight: bold;
}


/* Tables
========================================================================== */


/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}


/* Lists
========================================================================== */


/**
 * No padding or bullets as defaults
 */

ul,
ol {
    padding: 0;
}

ul li,
ol li {
    list-style-type: none;
}


/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */


/**
 * Gridpak Beta SCSS 
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */


/* Reusable column setup */

.col,
.container,
.feature-tile,
.extra-box-31,
.extra-box-32,
#content,
footer nav,
footer nav>div>div,
#footer-form {
    float: left;
    border: 0px solid transparent;
    padding: 1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}


/* a container with columns as the sole content */

.container {
    padding: 0;
}


/* a row of columns placed inside a column
   cancels the containing column's padding using negative margins */

.sub-row {
    margin-left: -1em;
    margin-right: -1em;
    padding: 0;
    /* fight the space between inline-blocks */
    letter-spacing: -0.31em;
    /* webkit */
    word-spacing: -0.43em;
}

.span-1 {
    margin-left: 0;
    width: 50%;
}

.span-1-when-2,
.small-tile,
.span-1-when-4,
.small-tile,
.span-1-when-6,
.small-tile {
    margin-left: 0;
    width: 50%;
}


/* keep one-col boxes from being ridiculously big on narrow screens */

@media screen and (min-width: 360px) {
    .span-third,
    .small-tile {
        width: 33.33333%;
    }
}

.span-2,
.extra-box-32,
footer nav,
#footer-form,
.span-3,
.span-4,
.extra-box-31,
.span-5,
.span-6,
.spot-item,
#content,
.span-7,
.span-8,
.spot-item-full {
    margin-left: 0;
    width: 100%;
}

.span-2-when-4,
.fig-float-r img,
.fig-float-l img,
.content-tile,
.show-tile,
.landing-tile,
.content-tile-half,
.span-2-when-6,
.fig-float-r img,
.fig-float-l img,
.fig-caption-r,
.fig-caption-l,
.content-tile,
.show-tile,
.landing-tile,
.span-2-when-8,
.calendar-box,
.side-tools,
.side-tools-no-pad,
nav#sub-menu,
#filters,
.span-4-when-4,
.fig-float-r-big img,
.fig-float-l-big img,
.fig-float-r-2 img,
.fig-float-l-2 img,
.content-tile-2,
.landing-tile-2,
.span-4-when-6,
.fig-float-r-big img,
.fig-float-l-big img,
.fig-float-r-2 img,
.fig-float-l-2 img,
.content-tile-2,
.landing-tile-2,
.span-6-when-6 {
    width: 100%;
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 480px) {
    /*
  .col {
      margin-left:0.5%;
      padding:0 0.5%;
  }
  */
    /* --- Gridpak variables ---*/
    /*
  .row .col:first-child {
      @include span_first;
  }
  */
    .span-1,
    .span-1-when-4,
    .small-tile {
        width: 25%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-2,
    .extra-box-32,
    footer nav,
    #footer-form,
    .span-2-when-4,
    .fig-float-r img,
    .fig-float-l img,
    .content-tile,
    .show-tile,
    .landing-tile,
    .content-tile-half {
        width: 50%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-3 {
        width: 75%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-4,
    .extra-box-31,
    .span-4-when-4,
    .fig-float-r-big img,
    .fig-float-l-big img,
    .fig-float-r-2 img,
    .fig-float-l-2 img,
    .content-tile-2,
    .landing-tile-2,
    .span-5,
    .span-6,
    .spot-item,
    #content,
    .span-7,
    .span-8,
    .spot-item-full {
        margin-left: 0;
        width: 100%;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 768px) {
    .span-1,
    .span-1-when-6,
    .small-tile {
        width: 16.66667%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-2,
    .extra-box-32,
    footer nav,
    #footer-form,
    .span-2-when-6,
    .fig-float-r img,
    .fig-float-l img,
    .fig-caption-r,
    .fig-caption-l,
    .content-tile,
    .show-tile,
    .landing-tile {
        width: 33.33333%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-3 {
        width: 50%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-4,
    .extra-box-31,
    .span-4-when-6,
    .fig-float-r-big img,
    .fig-float-l-big img,
    .fig-float-r-2 img,
    .fig-float-l-2 img,
    .content-tile-2,
    .landing-tile-2 {
        width: 66.66667%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-5 {
        width: 83.33333%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-6,
    .spot-item,
    #content,
    .span-7,
    .span-8,
    .spot-item-full {
        margin-left: 0;
        width: 100%;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1024px) {
    .span-1 {
        width: 12.5%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-2,
    .extra-box-32,
    footer nav,
    #footer-form,
    .span-2-when-8,
    .calendar-box,
    .side-tools,
    .side-tools-no-pad,
    nav#sub-menu,
    #filters {
        width: 25%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-3 {
        width: 37.5%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-4,
    .extra-box-31 {
        width: 50%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-5 {
        width: 62.5%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-6,
    .spot-item,
    #content {
        width: 75%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-7 {
        width: 87.5%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    .span-8,
    .spot-item-full {
        margin-left: 0;
        width: 100%;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1470px) {
    .col-when-10,
    .container-when-10,
    #page-body,
    header {
        float: left;
        border: 0px solid transparent;
        padding: 1em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -moz-background-clip: padding-box;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
    .container-when-10,
    #page-body {
        padding: 0;
    }
    .span-8-when-10,
    #page-body {
        width: 80%;
        border-left-width: 0;
        /*padding: $padding;*/
        margin-left: 0;
    }
    /*
  .span-1 {
      @include span(1, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span-2, .span-2-when-8, .span-2-when-10 {
      @include span(2, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span-3 {
      @include span(3, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span-4 {
      @include span(4, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span-5 {
      @include span(5, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span-6 {
      @include span(6, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span-7 {
      @include span(7, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span-8, .span-8-when-10 {
      @include span(8, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span-9 {
      @include span(9, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span-10 {
      @include span_first;
      width: 100%;
  }
  */
}

@font-face {
    font-family: 'ScalaSansPro';
    src: url("../assets/fonts/ScalaSansWebPro.eot");
    src: url("../assets/fonts/ScalaSansWebPro.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/ScalaSansWebPro.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ScalaSansPro';
    src: url("../assets/fonts/ScalaSansWebPro-Bold.eot");
    src: url("../assets/fonts/ScalaSansWebPro-Bold.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/ScalaSansWebPro-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ScalaSansPro';
    src: url("../assets/fonts/ScalaSansWebPro-Ita.eot");
    src: url("../assets/fonts/ScalaSansWebPro-Ita.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/ScalaSansWebPro-Ita.woff") format("woff");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'ScalaSansPro';
    src: url("../assets/fonts/ScalaSansWebPro-BoldIta.eot");
    src: url("../assets/fonts/ScalaSansWebPro-BoldIta.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/ScalaSansWebPro-BoldIta.woff") format("woff");
    font-weight: bold;
    font-style: italic;
}

html {
    font-family: ScalaSansPro, Arial, sans-serif;
    font-size: 100%;
    line-height: 1.467;
}

body {
    font-size: 0.9375em;
}


/* ==========================================================================
   Notes
   ========================================================================== */


/*
#header #header-menu-top li a
*/

.x-small {
    font-size: 12px;
}


/*
.calendar-box .days span
#footer ul li a
*/

.small {
    font-size: 14px;
}


/*
.calendar-box .month
#headlines-1 h2
*/

.larger-1 {
    font-size: 17px;
}


/*
#menu li.m a.m
*/

.larger-2 {
    font-size: 18px;
}


/*
nagłówki w stopce
#footer ul li strong
*/

.larger-2 {
    font-size: 19px;
}


/* + custom style: w headlines */


/*
BLOCKQUOTE[0].style -- w headlinach
.larger-3 {
    font-size: 19px;
}
*/


/*
lead spektaklu
#page .article .xx-large
*/

.larger-3 {
    font-size: 24px;
    /* 1.6em */
}


/* ==========================================================================
   End Notes
   ========================================================================== */

.x-small {
    font-size: 0.733em;
}

.x-small-b,
.story-date {
    font-size: 0.733em;
    font-weight: bold;
}

.small {
    font-size: 0.8em;
}

.small-b,
.kal-info {
    font-size: 0.8em;
    font-weight: bold;
}

.smaller,
#breadcrumbs li,
footer ul li {
    font-size: 0.933em;
}

.smaller-b {
    font-size: 0.933em;
    font-weight: bold;
}

.normal {
    font-size: 1em;
}

.normal-b,
h4,
h4.no-pad {
    font-size: 1em;
    font-weight: bold;
}

.larger {
    font-size: 1.133em;
}

.larger-b {
    font-size: 1.133em;
    font-weight: bold;
}

.large,
.kal-month-nav {
    font-size: 1.4em;
}

.large-b,
.kal-day {
    font-size: 1.4em;
    font-weight: bold;
}

.xx-large,
.query,
.art-lead,
blockquote {
    font-size: 1.6em;
}

.xx-large-b,
.kal-also-on {
    font-size: 1.6em;
    font-weight: bold;
}

.head-ss {
    font-size: 1.133em;
    font-weight: normal;
}

.head-ss-b,
.story-head,
.story-head-icon-above,
footer p.second {
    font-size: 1.133em;
    font-weight: bold;
}

.head-s,
h3 {
    font-size: 1.4em;
    font-weight: normal;
}

.head-s-b,
.show-tile h3,
footer p {
    font-size: 1.4em;
    font-weight: bold;
}

.head,
.sub-menu-select label,
#sub-menu-select-1 label,
#sub-menu-select-2 label,
#kal-show-select label,
h2 {
    font-size: 1.4em;
    font-weight: normal;
}

.head-b,
h1 {
    font-size: 1.6em;
    font-weight: bold;
}

.icon-arrow-5-16px-l,
.icon-arrow-5-16px-r,
.icon-arrowhead-6-16px-l,
.icon-arrowhead-6-16px-r {
    font-size: 16px;
}


/* ==========================================================================
   Colours
   ========================================================================== */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
svg,
video {
    vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

ul.bulleted {
    padding-left: 1em;
}

ul.bulleted li {
    list-style-type: disc;
}

a {
    color: #222;
    text-decoration: none;
}

a:hover {
    color: #d21242;
}

a:focus,
a:active {
    /*outline: none;*/
}

a.cont {
    display: block;
}

.icon-link {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    overflow: hidden;
    font-size: 0.6em;
    color: white;
    background: #575757;
    border-radius: 2px;
}

.icon-link:before {
    display: block;
    width: 100%;
    height: 150%;
    /* w IE8 :before najwyrazniej nie dziedziczy text-align */
    text-align: center;
}

.icon-link:hover {
    background: #d21242;
    color: white;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .icon-link {
        line-height: 20px;
    }
}

img {
    max-width: 100%;
}

.fullwidth,
.fullwidth-tile,
.headlines-white .cover-pad img {
    width: 100%;
}

.fullwidth-tile {
    display: block;
}

.block,
.block-c,
.block-rel {
    display: block;
}

.block-c {
    margin: 0 auto;
}

.block-rel {
    position: relative;
}

.cover,
.cover-pad {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

.cover-pad {
    padding: 0.6em 1em;
}

.cover-pad.center-both {
    padding: 0.5625rem 0.9375rem;
}

.multicol-2,
.multicol-3 {
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 480px) {
    .multicol-2,
    .multicol-3 {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        -moz-column-gap: 2em;
        -webkit-column-gap: 2em;
        column-gap: 2em;
    }
    .multicol-2>*,
    .multicol-3>* {
        display: inline-block;
        border-top: 1px solid transparent;
        width: 100%;
    }
}

.multicol-3 {
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 768px) {
    .multicol-3 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

.apart {
    margin-top: 1.467em;
}

.apart-2 {
    margin-top: 2em;
}

.space-below {
    margin-bottom: 1em;
}

.space-below-2 {
    margin-bottom: 2em;
}

.space-below-5 {
    margin-bottom: 5em;
}

#results-search {
    margin-top: -0.6em;
}

.query {
    margin-top: -0.6em;
}

.search-results {
    padding-top: 1em;
}

.result-title {
    display: inline-block;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #bdbdbd;
    line-height: 1;
}

.four-col-only,
.six-col-only,
.eight-col-only,
.ten-col-only {
    display: none;
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 480px) {
    .four-col-only {
        display: block;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 768px) {
    .six-col-only {
        display: block;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1024px) {
    .eight-col-only {
        display: block;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1470px) {
    .ten-col-only {
        display: block;
    }
}


/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   General box model
   ========================================================================== */

body {
    padding: 0 1em;
}

div,
figure {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul.box,
.headline-list {
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   Dummy content
   ========================================================================== */

.fake-xtall {
    height: 25em;
}

.fake-tall {
    height: 18em;
}

.fake-medium {
    height: 12em;
}


/* ==========================================================================
   Grid layout
   ========================================================================== */

#page {
    position: relative;
    margin: 0 auto;
    max-width: 1320px;
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1470px) {
    #page {
        max-width: 1555px;
    }
    #page-body {
        width: 79.74277%;
        margin-left: 20.25723%;
    }
}


/* ==========================================================================
   Header
   ========================================================================== */

header {
    padding-top: 2em;
    padding-bottom: 3em;
    text-align: center;
}

#main-logo {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding-top: 11px;
    width: 311px;
    max-width: 82.75862%;
}

#main-logo a {
    display: block;
    position: relative;
    height: 0;
    padding-bottom: 43.1%;
}

#main-logo div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/teatr-narodowy.png");
    background-size: contain;
    background-repeat: no-repeat;
}

#main-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    text-align: left;
}

#menu-btn,
#menu-btn-close {
    display: block;
    float: right;
    margin-top: 0.2619em;
    font-size: 2.8em;
}

#menu-btn {
    position: relative;
    z-index: 5;
}

#menu-body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 1px solid #bdbdbd;
    height: 38em;
    width: 100%;
    z-index: 10;
    background: white;
}

#menu-body.visible {
    display: block;
}

.main-nav,
#quicklinks,
#social,
#head-form {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0.55em 0;
    border-top: 1px solid #bdbdbd;
}

.main-nav {
    clear: both;
    margin-top: 2.7827em;
    padding: 0.3913em 0;
    font-size: 1.5333em;
    line-height: 1.5218;
}

.sub-nav {
    display: none;
}

#quicklinks {
    padding: 0.5883em 0;
    font-size: 1.1333em;
    line-height: 1.4118;
}

#social {
    height: 2.2308em;
    padding: 0.5769em 0 0;
    font-size: 26px;
}

#social li {
    display: inline-block;
}

#head-form {
    position: relative;
    font-size: 1.1333em;
    line-height: 1.7648;
}

#head-form div {
    position: absolute;
    top: 0.55em;
    right: 0px;
    width: 100%;
    padding-left: 3.5em;
}

#head-form input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #bdbdbd;
    padding: 0 0.6em;
    width: 80%;
    background: white;
    line-height: 1.7648;
}

#head-form #head-button {
    position: absolute;
    background-color: white;
    top: 0;
    right: 0;
    width: 2em;
    border: none;
    font-size: 1.1333em;
    line-height: 1.7648;
}

#text-size {
    display: none;
}

#high-contrast {
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,<svg id='b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99 99'><g id='c'><circle cx='49.5' cy='49.5' r='48.5' style='fill:none; stroke:%23000; stroke-miterlimit:10; stroke-width:2px;'/><path d='M49.5,7C26.03,7,7,26.03,7,49.5s19.03,42.5,42.5,42.5c.5,0,1-.02,1.5-.04V7.04c-.5-.02-1-.04-1.5-.04Z' style='fill:none; stroke:%23000; stroke-miterlimit:10; stroke-width:2px;'/><path d='M92,49.5c0-22.97-18.22-41.67-41-42.46v84.92c22.78-.79,41-19.49,41-42.46Z' style='stroke:%23000; stroke-miterlimit:10; stroke-width:2px;'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 23px !important;
    height: 23px !important;
}

@media screen and (min-width: 924px) and (max-width: 1469px) {
    header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 4.6em;
        padding-left: 1.6em;
        height: 17.26667em;
        text-align: left;
    }
    .fix-header header {
        position: fixed;
        top: -9.6rem;
        left: 0;
        width: 100%;
        border-left: 1em solid transparent;
        border-right: 1em solid transparent;
        padding-bottom: 0;
        height: 13.8em;
        z-index: 10;
        background: white;
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.22);
    }
    .fix-header #page-body {
        padding-top: 17.26667em;
    }
    #menu-btn,
    #menu-btn-close {
        display: none;
    }
    #main-logo {
        display: block;
        float: left;
        z-index: 15;
    }
    .fix-header #main-logo {
        height: 128px;
        overflow: hidden;
    }
    .fix-header #main-logo div {
        background-image: url("../assets/images/teatr-narodowy-fixed.png");
    }
    #menu-body {
        display: block;
        border: none;
        border-top: 2.6em solid #f2f2f2;
        height: auto;
        background: transparent;
    }
    .main-nav,
    #quicklinks,
    #social,
    #head-form {
        padding: 0;
    }
    .main-nav,
    #quicklinks,
    #social {
        border: none;
    }
    .main-nav li,
    #quicklinks li,
    #social li {
        display: inline-block;
        padding: 0 0.66em;
    }
    .main-nav {
        margin-top: 6.577em;
        padding-right: 0.5em;
        font-size: 1.267em;
        line-height: 1.467;
        text-align: right;
    }
    .main-nav li {
        position: relative;
        padding: 0;
    }
    .main-nav li a {
        display: block;
        padding: 0.158em 0.66em 0.079em;
    }
    .main-nav li.current>a {
        color: #d21242;
    }
    .main-nav li.hover {
        background: #e5e5e5;
    }
    .main-nav a {
        color: #222;
    }
    .sub-nav {
        display: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: #e5e5e5;
        font-size: 0.789em;
        text-align: left;
    }
    .sub-nav.visible {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 0.434em;
        width: 12em;
    }
    li:last-child .sub-nav {
        left: auto;
        right: 0;
    }
    .sub-nav li {
        display: block;
        padding: 0;
    }
    .sub-nav li a {
        display: block;
        padding: 0.46682em 0.434em 0.33345em;
        line-height: 1.2em;
    }
    .sub-nav li a:hover {
        background: white;
    }
    #quicklinks {
        position: absolute;
        padding: 0.15em 0;
        /* TODO this is .smaller */
        font-size: 0.93333em;
        line-height: 1.467;
        top: -2.07143em;
        left: 6px;
    }
    #quicklinks li {
        padding: 0 0.64286em;
    }
    #social {
        position: absolute;
        top: -1.31818em;
        right: 0.90909em;
        padding: 0;
        height: auto;
        font-size: 22px;
        line-height: 1;
    }
    #social li {
        padding: 0;
    }
    #head-form {
        position: absolute;
        top: -2.6em;
        right: 17em;
        border: none;
        /* TODO this is .smaller */
        font-size: 1em;
    }
    #head-form div {
        display: inline;
        position: static;
        padding: 0;
        width: auto;
    }
    #head-form input {
        display: inline-block;
        height: 2.6em;
        width: 8.2em;
        background: #e6e6e6;
        border: none;
        color: #333;
        outline: none;
    }
    #head-form #head-button {
        background-color: #f2f2f2;
        position: absolute;
        right: -2em;
        height: 2.2em;
        line-height: normal;
    }
    #head-label {
        display: inline-block;
        position: relative;
        top: 0.13333em;
        width: 3.5em;
    }
    #text-size {
        display: block;
        position: absolute;
        top: -1.42857em;
        right: 25.04762em;
        font-size: 1.4em;
        letter-spacing: 0.15em;
    }
    #language {
        position: absolute;
        padding: 0.15em 0;
        /* TODO this is .smaller */
        font-size: 0.93333em;
        line-height: 1.467;
        top: -2.07143em;
        right: 32em;
        margin: 0px;
    }
    #text-normal,
    #text-larger,
    #text-large,
    #high-contrast  {
        cursor: pointer;
    }
    
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1470px) {
    header {
        position: fixed;
        z-index: 100;
        padding: 1em;
        width: 288px;
    }
    #main-logo {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    #menu-btn,
    #menu-btn-close {
        display: none;
    }
    #main-menu {
        position: static;
        padding: 3em 0 0;
    }
    #menu-body {
        display: block;
        position: static;
        border: none;
        height: auto;
    }
    .main-nav {
        margin-top: 0;
    }
    .main-nav li {
        position: relative;
    }
    .main-nav li.hover {
        background: #e5e5e5;
    }
    .main-nav a {
        color: #222;
    }
    .sub-nav {
        display: none;
        position: absolute;
        top: 0;
        left: 128px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0.434em;
        width: 12em;
        z-index: 10;
        background: #e5e5e5;
        font-size: 0.789em;
        text-align: left;
    }
    .sub-nav.visible {
        display: block;
    }
    .sub-nav li {
        display: block;
        padding: 0;
    }
    .sub-nav li a {
        display: block;
        padding: 0.46682em 0.434em 0.33345em;
        line-height: 1.2em;
    }
    .sub-nav li a:hover {
        background: white;
    }
    #head-label {
        position: relative;
        top: 3px;
    }
    #text-size {
        display: block;
        margin-top: 1em;
        font-size: 1.4em;
        letter-spacing: 0.15em;
    }
    #text-normal,
    #text-larger,
    #text-large,
    #high-contrast  {
        cursor: pointer;
    }

}


/* ==========================================================================
   Forms
   ========================================================================== */

#email-input,
#res-search-input {
    border: 1px solid #bdbdbd;
    background: white;
}

#email-submit,
#res-search-submit {
    border: none;
    background: white;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-buy-r {
    display: inline-block;
    position: relative;
    padding-right: 0.5em;
    background: #d21242;
    color: white;
    font-weight: bold;
    line-height: 28px;
    height: 26px;
}

.btn-buy-r:after {
    content: "";
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid #d21242;
    position: absolute;
    right: -13px;
    top: 0;
}

.btn-buy-r [class^="icon-"],
.btn-buy-r [class*=" icon-"] {
    position: relative;
    float: left;
    font-size: 26px;
    margin: 0 8px;
    z-index: 1;
}

.btn-buy-r:hover {
    color: white;
    background-color: #f64370;
}

.btn-buy-r:hover:after {
    border-left: 13px solid #f64370;
}

.btn-buy-l,
.btn-buy-l-l,
.btn-buy-l-kal {
    display: inline-block;
    position: relative;
    padding-right: 0.5em;
    background: #d21242;
    color: white;
    font-weight: bold;
    line-height: 28px;
    height: 26px;
}

.btn-buy-l:after,
.btn-buy-l-l:after,
.btn-buy-l-kal:after {
    content: "";
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 13px solid #d21242;
    position: absolute;
    left: -13px;
    top: 0;
}

.btn-buy-l [class^="icon-"],
.btn-buy-l-l [class^="icon-"],
.btn-buy-l-kal [class^="icon-"],
.btn-buy-l [class*=" icon-"],
.btn-buy-l-l [class*=" icon-"],
.btn-buy-l-kal [class*=" icon-"] {
    position: relative;
    float: left;
    font-size: 26px;
    margin: 0 8px 0 5px;
    z-index: 1;
}

.btn-buy-l:hover,
.btn-buy-l-l:hover,
.btn-buy-l-kal:hover {
    color: white;
    background: #f64370;
}

.btn-buy-l:hover:after,
.btn-buy-l-l:hover:after,
.btn-buy-l-kal:hover:after {
    border-right: 13px solid #f64370;
}

.btn-buy-l-l {
    height: 40px;
    font-size: 21px;
    line-height: 44px;
}

.btn-buy-l-l:after {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #d21242;
    left: -20px;
}

.btn-buy-l-l:hover:after {
    border-right: 20px solid #f64370;
}

.btn-buy-l-l [class^="icon-"],
.btn-buy-l-l [class*=" icon-"] {
    font-size: 40px;
    margin-left: 10px;
    margin-right: 14px;
}

.btn-buy-2 {
    display: block;
    text-indent: -10000px;
    overflow: hidden;
    background: url("../assets/images/ui/bt-kup-bilet-2-red.png") left center no-repeat;
    height: 39px;
    width: 160px;
}

.btn-booking {
    display: block;
    height: 25px;
    /*width: 94px;*/
    line-height: 28px;
}

.btn-booking:before {
    content: "\e62b";
    display: inline-block;
    position: relative;
    top: -1px;
    margin-right: -4px;
    vertical-align: middle;
    font-family: 'icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 31px;
    line-height: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   Box types
   ========================================================================== */

.spotlight-box {
    position: relative;
    overflow: hidden;
}

.spotlight {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    z-index: 1;
    /*@if $layout == one-col {

    }*/
}

.spotlight .arch-head {
    border-top: 1px solid #ad0111;
    padding-left: 1.2em;
    height: 8.33333em;
    background: #d21242;
}

.spotlight .item-arch {
    height: 23.33333em;
}

@media screen and (min-width: 1024px) {
    .spotlight {
        padding: 0;
        height: 420px;
        z-index: 0;
    }
}

.spotlight .switch-nav li a {
    color: white;
}

.spot-list {
    position: absolute;
    margin: 0;
    height: 100%;
    width: 100%;
    white-space: nowrap;
    font-size: 0;
}

.spot-item {
    display: inline-block;
    position: relative;
    float: none;
    height: 100%;
    background: white;
    background-size: cover;
    background-position: 50% 50%;
    white-space: normal;
    font-size: 15px;
    font-size: 0.9375rem;
}

.spot-item img {
    width: 100%;
}

.spot-item .btn-buy-l-l {
    position: absolute;
    bottom: 1em;
    right: 1em;
}

.spot-item-full {
    display: inline-block;
    position: relative;
    float: none;
    height: 100%;
    background: white;
    background-size: cover;
    background-position: 50% 50%;
}

.spot-item-full img {
    width: 100%;
}

.spot-item-full .btn-buy-l-l {
    position: absolute;
    bottom: 1em;
    right: 1em;
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 768px) {
    .spot-item .btn-buy-l-l,
    .spot-item-full .btn-buy-l-l {
        display: none;
    }
    .spot-item {
        border-bottom: 105px solid #373737;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1024px) {
    .spot-item {
        border-bottom: none;
    }
}

.spotlight-head,
.spotlight-subhead {
    color: white;
}

.spotlight-head {
    margin-bottom: 0;
    font-size: 2.375em;
    font-weight: normal;
}

.spotlight-subhead {
    margin-top: 0;
    line-height: 1;
}

.calendar-box {
    display: none;
    position: relative;
    height: 25.5em;
    z-index: 0;
    background: #373737;
    color: white;
}

.calendar-box .clndr {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background: #373737;
}

.calendar-box .month {
    padding: 35px 20px 0;
    font-size: 17px;
    height: 80px;
}

.calendar-box .btn-prev,
.calendar-box .btn-next {
    display: block;
    position: absolute;
    left: 20px;
    top: 35px;
    width: 15px;
    height: 20px;
    overflow: hidden;
    cursor: pointer;
}

.calendar-box .btn-prev .icon-arrow-5-16px-l,
.calendar-box .btn-next .icon-arrow-5-16px-l {
    display: block;
    height: 150%;
    text-align: left;
}

.calendar-box .btn-next {
    left: auto;
    right: 20px;
}

.calendar-box .btn-next .icon-arrow-5-16px-r {
    display: block;
    height: 150%;
    text-align: right;
}

.calendar-box .month-text {
    text-align: center;
    width: 100%;
    text-transform: capitalize;
}

.calendar-box .month-text span {
    display: block;
    font-style: italic;
}

.calendar-box .cal-year {
    font-size: 12px;
}

.calendar-box a {
    color: white;
}

.calendar-box .days {
    padding: 1rem 0.5rem 0;
    zoom: 1;
}

.calendar-box .day {
    display: block;
    float: left;
    width: 14.2857%;
    height: 0px;
    padding-top: 4%;
    padding-bottom: 10%;
    position: relative;
    z-index: 0;
    text-align: center;
    font-size: 14px;
}

.calendar-box .event:before {
    z-index: -1;
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -14px;
    left: 50%;
    margin-left: -14px;
    border-radius: 50px;
    background-color: #d01845;
    border: 2px solid transparent;
}

.calendar-box .today:before {
    border: 2px solid #666;
}

.calendar-box .last-month,
.calendar-box .next-month {
    position: relative;
    z-index: -1;
    opacity: 0;
}

.calendar-box .btn-booking {
    position: absolute;
    right: 0;
    bottom: 48px;
}

.calendar-box .btn-buy-l-l {
    position: absolute;
    left: 0px;
    bottom: 40px;
    z-index: 5;
}

.calendar-box.visible {
    display: block;
}

.calendar-box.visible.switched {
    display: none;
}

@media screen and (min-width: 23em) {
    .calendar-box {
        height: 28em;
    }
}

@media screen and (max-width: 1023px) {
    .calendar-box .btn-buy-l-l {
        top: 10px;
        bottom: auto;
        left: auto;
        right: 140px;
    }
}

@media screen and (max-width: 767px) {
    .calendar-box .clndr {
        max-width: 320px;
    }
    .calendar-box .btn-buy-l-l {
        top: auto;
        left: -20px;
        bottom: 40px;
        right: auto;
    }
}

@media screen and (max-width: 480px) {
    .calendar-box .clndr {
        width: 80%;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 768px) {
    .calendar-box {
        height: 105px;
    }
    .calendar-box .month {
        padding-top: 15px;
        height: 60px;
    }
    .calendar-box .btn-prev,
    .calendar-box .btn-next {
        display: block;
        position: static;
        float: left;
    }
    .calendar-box .month-text {
        float: left;
        width: 8em;
    }
    .calendar-box .month-text span {
        display: inline;
    }
    .calendar-box .days {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0;
        margin: 0 auto;
        width: 98%;
    }
    .calendar-box .day {
        width: 3.2%;
        height: 3.2%;
        padding-top: 6px;
        padding-bottom: 3px;
    }
    .calendar-box .last-month,
    .calendar-box .next-month {
        display: none;
    }
    .calendar-box .btn-booking {
        position: absolute;
        top: 17px;
        right: 16px;
        bottom: auto;
    }
    .calendar-box.visible {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        z-index: 2;
    }
    .calendar-box.visible.switched {
        display: block;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1024px) {
    .calendar-box {
        position: absolute;
        top: 0;
        right: 0;
        height: 420px;
    }
    .calendar-box .clndr {
        width: 100%;
        height: 100%;
    }
    .calendar-box .month {
        padding-top: 35px;
        height: 80px;
    }
    .calendar-box .btn-prev,
    .calendar-box .btn-next {
        float: none;
        position: absolute;
    }
    .calendar-box .month-text {
        float: none;
        text-align: center;
        width: 100%;
    }
    .calendar-box .month-text span {
        display: block;
    }
    .calendar-box .days {
        /*padding-left: 15px;*/
        padding-top: 1rem;
        max-width: 18.75rem;
        height: 267px;
    }
    .calendar-box .day {
        width: 14.28571%;
        height: 0px;
        padding-top: 4%;
        padding-bottom: 10%;
    }
    .calendar-box .last-month,
    .calendar-box .next-month {
        display: block;
    }
    .calendar-box .booking-box {
        margin: 0 auto;
        padding-left: 98px;
        width: 98%;
        max-width: 18.75rem;
    }
    .calendar-box .booking-box:before,
    .calendar-box .booking-box:after {
        content: " ";
        display: table;
    }
    .calendar-box .booking-box:after {
        clear: both;
    }
    .calendar-box .btn-booking {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: static;
        float: right;
        padding-right: 7.14286%;
        text-align: right;
    }
    .calendar-box .btn-buy-l-l {
        position: absolute;
        top: auto;
        bottom: 40px;
        left: -1px;
        z-index: 5;
    }
    .calendar-box.visible {
        width: 25%;
    }
    .calendar-box:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;
        height: 100%;
        width: 1px;
        background: #373737;
    }
}

.switch-nav {
    position: absolute;
    bottom: 1em;
    left: 2em;
    margin: 0;
    font-size: 1rem;
    -webkit-transition: bottom 0.4s;
    transition: bottom 0.4s;
}

.switch-nav.displaced {
    bottom: 7.5em;
}

.switch-nav li {
    display: inline-block;
    padding: 0.1333em;
    font-size: 0.9375em;
    line-height: 1;
    vertical-align: middle;
}

.switch-nav li a {
    display: block;
}

.switch-nav li a.active:before {
    content: "\e654";
}

.switch-nav li a:hover {
    color: #d21242;
}

#breadcrumbs {
    padding: 0 1em;
    background: #d21242;
}

#breadcrumbs ul {
    margin: 0;
}

#breadcrumbs a {
    color: white;
}

#breadcrumbs a:hover {
    color: white;
    text-decoration: underline;
}

#breadcrumbs li {
    display: inline-block;
    position: relative;
    top: -1px;
    line-height: 2.3;
}

#breadcrumbs li:before {
    content: "\e616";
    position: relative;
    top: 2px;
    color: white;
    margin-right: 4px;
    font-family: 'icons';
    font-size: 16px;
    line-height: 2.125;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#breadcrumbs li:first-child:before {
    display: none;
}

#breadcrumbs li:last-child a {
    color: white;
}

.headline-nav-box {
    position: relative;
}

.headlines,
.headlines-white {
    position: relative;
    height: 28em;
    overflow: hidden;
}

.headlines.first-row,
.first-row.headlines-white {
    border-top: 1px solid #bdbdbd;
}

.headlines-white:before,
.headlines-white:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
    border-left: 1px solid #bdbdbd;
}

.headlines-white:after {
    left: auto;
    right: 0;
}

.headline-wrap {
    width: 100%;
}

.headline-list {
    position: relative;
    white-space: nowrap;
    font-size: 0;
}

.headlines-prev,
.headlines-next {
    display: none;
    position: absolute;
    left: -0.8rem;
    top: 43.8%;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(197, 197, 197, 0.898);
    border-radius: 50%;
    background: rgba(197, 197, 197, 0.898);
    font-size: 23px;
    line-height: 52px;
    text-align: center;
    cursor: pointer;
}

.headlines-prev:before,
.headlines-next:before {
    display: inline-block;
    position: relative;
    left: -2px;
}

.headlines-prev:hover,
.headlines-next:hover {
    color: #222;
}

.headline-nav-box:hover .headlines-prev.enabled,
.headline-nav-box:hover .enabled.headlines-next {
    display: block;
}

.headlines-next {
    left: auto;
    right: -0.8rem;
}

.headlines-next:before {
    left: 2px;
}

.feature-tile {
    display: inline-block;
    float: none;
    position: relative;
    width: 100%;
    border-right: 1px solid #bdbdbd;
    padding: 0.6em 1em;
    height: 28em;
    background: black;
    white-space: normal;
    font-size: 15px;
    font-size: 0.9375rem;
    /*@if $layout == one-col {

    }*/
    /*@if $layout == one-col {

    }*/
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 480px) {
    .feature-tile {
        width: 50%;
    }
}

@media screen and (min-width: 768px) {
    .feature-tile {
        width: 33.33333%;
    }
}

@media screen and (min-width: 1024px) {
    .feature-tile {
        width: 25%;
    }
}

.feature-tile:first-child {
    border-left: 1px solid #bdbdbd;
}

.feature-tile.borderless {
    border: none;
}

.feature-tile .story-head,
.feature-tile .story-head-icon-above {
    margin-top: 0.2942em;
    margin-bottom: 1.1768em;
    padding-top: 0.3em;
    min-height: 2.4em;
}

.feature-tile .cover-pad {
    background: white;
    color: #222;
}

.feature-tile .cover-pad:hover {
    opacity: 0.95;
}

.headlines-white .cover-pad img {
    display: block;
}

.feature-right div:nth-of-type(2) {
    float: right;
}

.bt-rt-corner {
    position: absolute;
    bottom: 0.7em;
    right: 1.7em;
}

.overlay-thumb {
    position: relative;
}

.vid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../assets/images/ui/mask-play.png") 50% 50% no-repeat;
}

.center-both {
    font-size: 0;
    text-align: center;
}

.center-both:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -0.25em;
}

.vert-centered {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9375rem;
    text-align: left;
}

.feat-fill,
.feat-fill-0,
.feat-fill-1,
.feat-fill-2,
.feat-fill-3 {
    position: relative;
    border: none;
    background: white;
}

.feat-fill:first-child,
.feat-fill-0:first-child,
.feat-fill-1:first-child,
.feat-fill-2:first-child,
.feat-fill-3:first-child {
    border: 0;
}

.feat-fill-0 .cover-pad {
    background: black;
    color: white;
}

.feat-fill-0 .cover-pad:hover {
    opacity: 0.9;
}

.feat-fill-1 .cover-pad {
    background: #292929;
    color: white;
}

.feat-fill-1 .cover-pad:hover {
    opacity: 0.935;
}

.feat-fill-2 .cover-pad {
    background: #424242;
    color: white;
}

.feat-fill-2 .cover-pad:hover {
    opacity: 0.955;
}

.feat-fill-3 .cover-pad {
    background: #525252;
    color: white;
}

.feat-fill-3 .cover-pad:hover {
    opacity: 0.96;
}


/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.gallery-wrap figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    font-size: 0;
}

.gallery-wrap figure:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.gallery-wrap figure img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.gallery .switch-nav {
    position: static;
    padding: 0.75em 0;
    text-align: center;
}

.gallery-caption {
    margin-top: -0.4667em;
    text-align: center;
}

.arrow {
    position: fixed;
    top: 0px;
    width: 40px;
    height: 40px;
    z-index: 10;
    opacity: 1;
    display: none;
    pointer-events: none;
}

.arrow:before,
.arrow:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    width: 20px;
    height: 1px;
    background-color: #fff;
}

.arrow:before {
    margin-top: -7px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=45);
}

.arrow:after {
    margin-top: 7px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=-45);
}


/* ==========================================================================
   Video
   ========================================================================== */

.video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.video-wrap .video,
.video-wrap video,
.video-wrap object,
.video-wrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   Home page extra boxes
   ========================================================================== */

.extra-box-1 {
    height: 13.4em;
    background-size: cover;
    background-position: 50% 50%;
    color: white;
}

.extra-box-1 .wrap {
    display: inline-block;
    position: relative;
    padding: 0 3em;
    vertical-align: middle;
    max-width: 94%;
    width: 50em;
}

.extra-link-1 {
    display: block;
    height: 100%;
    color: white;
    text-align: center;
}

.extra-link-1:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

.extra-link-1:hover {
    color: white;
}

.extra-head-1,
.extra-subhead-1 {
    margin: 0;
    font-size: 1.6em;
    line-height: 1.1;
}

.extra-head-1 {
    font-weight: bold;
}

.extra-cross-arrow-r,
.extra-cross-arrow-l {
    position: absolute;
    top: 0;
    width: 31px;
    height: 51px;
}

.extra-cross-arrow-r {
    left: 0;
}

.extra-cross-arrow-l {
    right: 0;
}

.extra-box-2 {
    position: relative;
    margin-top: -1px;
    border: 1px solid transparent;
    background-size: cover;
    background-position: 50% 50%;
}

.extra-item-2,
.extra-item-21,
.extra-item-22,
.extra-item-23,
.extra-item-24 {
    position: relative;
    margin: 1em auto;
    border: 5px solid rgba(0, 0, 0, 0.2);
    padding: 1em 2em;
    width: 17em;
    line-height: 1.3;
    text-align: center;
}

.extra-deco-2,
.extra-deco-21,
.extra-deco-22,
.extra-deco-23,
.extra-deco-24 {
    display: none;
    position: absolute;
}

.extra-deco-2 img,
.extra-deco-21 img,
.extra-deco-22 img,
.extra-deco-23 img,
.extra-deco-24 img {
    position: relative;
    left: -13px;
    width: 27px;
    height: 27px;
}

.extra-deco-24 img {
    left: 0;
    top: -13px;
}

@media screen and (min-width: 31em) {
    .extra-item-21 {
        left: 19%;
    }
    .extra-item-22 {
        right: 7%;
    }
    .extra-item-23 {
        right: -3%;
    }
    .extra-item-24 {
        right: 13%;
    }
}

@media screen and (min-width: 40em) {
    .extra-box-2 {
        height: 31.87em;
    }
    .extra-item-2,
    .extra-item-21,
    .extra-item-22,
    .extra-item-23,
    .extra-item-24 {
        position: absolute;
    }
    .extra-item-21 {
        left: 4%;
        top: 12%;
    }
    .extra-item-22 {
        top: 11%;
        right: 7%;
    }
    .extra-item-23 {
        bottom: 10%;
        right: 50%;
    }
    .extra-item-24 {
        bottom: 8%;
        right: 3%;
    }
    .extra-deco-2,
    .extra-deco-21,
    .extra-deco-22,
    .extra-deco-23,
    .extra-deco-24 {
        display: block;
    }
    .extra-deco-21 {
        top: -50px;
        left: 50%;
    }
    .extra-deco-22 {
        bottom: -38px;
        left: 50%;
    }
    .extra-deco-23 {
        bottom: -48px;
        left: 50%;
    }
    .extra-deco-24 {
        right: -50px;
        top: 50%;
    }
}

@media screen and (min-width: 50em) {
    .extra-item-21 {
        left: 5%;
    }
    .extra-item-22 {
        right: 15%;
    }
    .extra-item-23 {
        right: 50%;
    }
    .extra-item-24 {
        right: 5%;
    }
}

.extra-box-3 {
    background-position: 100% 50%;
}

.extra-box-31 .line-icon,
.extra-box-31 .line-icon-2,
.extra-box-31 .line-icon-l {
    margin-top: 0.1em;
    font-size: 5.4em;
    line-height: 1.5;
}

.extra-box-31 p {
    line-height: 1.2;
}

.extra-box-32 p {
    margin-top: 1.2em;
    line-height: 1.3;
    text-align: center;
}

.nekro-box {
    padding: 0 1em 0 3.5em;
    color: white;
    background-image: url("../assets/images/nekrolog.png");
    background-position: 0% 50%;
}

.nekro-box p {
    padding: 1.2665em 0;
}


/* ==========================================================================
   Side/top bar
   ========================================================================== */

.side-tools,
.side-tools-no-pad,
nav#sub-menu,
#filters {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1em;
}

.side-tools-no-pad {
    padding: 0;
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1024px) {
    .side-tools,
    .side-tools-no-pad,
    nav#sub-menu,
    #filters {
        clear: both;
        float: right;
    }
    .full-width-page .side-tools,
    .full-width-page .side-tools-no-pad,
    .full-width-page nav#sub-menu,
    .full-width-page #filters {
        float: none;
    }
}


/* ==========================================================================
   Section nav
   ========================================================================== */

.sub-menu-select,
#sub-menu-select-1,
#sub-menu-select-2,
#kal-show-select {
    position: relative;
    margin-top: 2em;
    background: #dbdbdb;
}

.sub-menu-select label,
#sub-menu-select-1 label,
#sub-menu-select-2 label,
#kal-show-select label {
    padding-left: 1em;
    line-height: 1.875;
}

.sub-menu-select .arrow-down,
#sub-menu-select-1 .arrow-down,
#sub-menu-select-2 .arrow-down,
#kal-show-select .arrow-down {
    position: absolute;
    top: 25%;
    right: 1em;
}

.sub-menu-select select,
#sub-menu-select-1 select,
#sub-menu-select-2 select,
#kal-show-select select {
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

#sub-menu-select-1 {
    z-index: 1;
}

#sub-menu-select-1:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -24px;
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #dbdbdb;
}

#sub-menu-select-1.sub-menu-select-last:after,
#sub-menu-select-2.sub-menu-select-last:after {
    display: none;
}

#sub-menu-select-2 {
    margin-top: 0.667em;
    background: #eaeaea;
}

nav#sub-menu h2 {
    margin-top: 0;
    padding-top: 0.8em;
}

.subpage-nav {
    display: none;
}

.main-list a.current,
.filter-list a.current,
.sub-list a.current,
.main-list a:hover,
.filter-list a:hover,
.sub-list a:hover {
    color: #d21242;
}

@media screen and (min-width: 768px) {
    .sub-menu-select,
    #sub-menu-select-1,
    #sub-menu-select-2,
    #kal-show-select {
        display: none;
    }
    nav#sub-menu {
        display: block;
        padding: 0 1em;
        background: #dbdbdb;
    }
    .subpage-nav {
        display: block;
    }
    .main-list,
    .filter-list,
    .sub-list {
        margin: 0;
    }
    .main-list,
    .filter-list {
        margin-left: -0.6em;
    }
    .subpage-nav {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
    .main-list a,
    .filter-list a {
        display: block;
        padding: 0.5em 0.6em;
        line-height: 1.2;
        color: #000;
    }
    .nav-item-l1 {
        display: inline-block;
        vertical-align: top;
    }
    .nav-item-l1.apart {
        margin-top: 0;
    }
    .sub-list {
        width: 1em;
    }
    .sub-list li {
        width: 14em;
    }
    .sub-list a {
        color: #575757;
    }
    .main-list a.current,
    .filter-list a.current,
    .sub-list a.current {
        color: #d21242;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1024px) {
    nav#sub-menu {
        position: relative;
        max-width: 250px;
        background: white;
    }
    nav#sub-menu:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;
        height: 100%;
        width: 1px;
        background: #bdbdbd;
    }
    .main-list,
    .filter-list {
        margin-left: 0;
    }
    .nav-item-l1 {
        display: block;
    }
    .nav-item-l1.apart {
        margin-top: 1.467em;
    }
    .nav-item-l2 {
        padding-left: 1.2em;
    }
    /* and now... revert all these changes */
    .full-width-page nav#sub-menu {
        border: none;
        width: 100%;
        max-width: 100%;
        background: #dbdbdb;
    }
    .full-width-page nav#sub-menu:before {
        display: none;
    }
    .full-width-page .main-list,
    .full-width-page .filter-list {
        margin-left: -0.6em;
    }
    .full-width-page .nav-item-l1 {
        display: inline-block;
    }
    .full-width-page .nav-item-l2 {
        padding-left: 0;
    }
}


/* ==========================================================================
   Filters
   ========================================================================== */

.filter-list [class^="icon-"],
.filter-list [class*=" icon-"] {
    display: inline-block;
    width: 1.355em;
    margin-right: 10px;
    font-size: 1.9333em;
    position: relative;
    top: 0.2414em;
}

@media screen and (min-width: 768px) {
    #filters {
        padding: 0.5em 1em;
        background: #dbdbdb;
    }
    .filter-list {
        padding-bottom: 0.5em;
    }
    .filter-list [class^="icon-"],
    .filter-list [class*=" icon-"] {
        display: none;
    }
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1024px) {
    #filters {
        border-left: 1px solid #bdbdbd;
        background: white;
    }
    .filter-list a {
        padding: 0.2667em 0;
    }
    .filter-list [class^="icon-"],
    .filter-list [class*=" icon-"] {
        display: inline-block;
    }
}


/* ==========================================================================
   Main content
   ========================================================================== */

.larger-text {
    font-size: 1.1em;
}

.large-text {
    font-size: 1.2em;
}

.show-info {
    padding: 1em;
    background: #828282;
    color: white;
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 1024px) {
    .show-info {
        position: relative;
    }
    .show-info:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;
        height: 100%;
        width: 1px;
        background: #828282;
    }
}

.misc-aside {
    padding: 1em;
}

.misc-aside .head-icon {
    position: relative;
    left: -0.25em;
}

#content {
    padding: 0 0 1em;
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 480px) {
    #content {
        padding: 0 1em 1em;
    }
    .full-width-page #content {
        width: 100%;
    }
}

h4 {
    margin: 1em 0;
}

h4.no-pad {
    margin-top: 0;
}

.no-mrg {
    margin: 0;
}

.rule-above,
.search-results {
    border-top: 1px solid #bdbdbd;
}

.rule-around {
    border-bottom: 1px solid #bdbdbd;
}

.rule-around:first-child {
    border-top: 1px solid #bdbdbd;
}

.head-icon {
    font-size: 3.8em;
}

.head-icon+h1,
.head-icon+h2,
.head-icon+h3 {
    margin-top: 0;
}

.item-icon {
    font-size: 3.8em;
}

.line-icon,
.line-icon-2,
.line-icon-l {
    font-size: 2.2em;
    float: left;
    margin-right: 0.25em;
}

.line-icon-2 {
    line-height: 1.4;
}

.line-icon-l {
    font-size: 3.4667em;
}

.line-icon-l+.file-name {
    line-height: 3.5;
}

.file-name {
    font-weight: bold;
    text-decoration: underline;
}

.head-stick {
    margin-top: -1em;
}

.story-head,
.story-head-icon-above {
    line-height: 1.2em;
}

.story-head-icon-above {
    margin-top: 0.6em;
}

.story-date {
    margin-top: -1.818em;
}

.art-lead {
    margin-top: -0.5em;
    line-height: 1.2;
}

.downloads-container {
    padding-bottom: 40px;
}

.icon {
    width: 45px;
}

blockquote {
    font-style: italic;
}

.highlight {
    color: #d21242;
    font-weight: bold;
}

.highlight-n,
.query {
    color: #d21242;
}

.inv {
    color: white;
}

.fig-float-r,
.fig-float-l {
    margin: 0 -1em;
    clear: right;
}

.fig-float-r img,
.fig-float-l img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    margin: 0 0 0 1em;
    padding: 0 1em 1em;
}

.fig-float-l {
    clear: left;
}

.fig-float-l img {
    float: left;
    margin: 0 1em 0 0;
}

.fig-float-r-big,
.fig-float-l-big {
    margin: 0 -1em;
    clear: right;
}

.fig-float-r-big img,
.fig-float-l-big img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    margin: 0 0 0 1em;
    padding: 0 1em 1em;
}

.fig-float-l-big {
    clear: left;
}

.fig-float-l-big img {
    float: left;
    margin: 0 1em 0 0;
}

.fig-float-r-2,
.fig-float-l-2 {
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 768px) {
    .fig-float-r-2,
    .fig-float-l-2 {
        margin: 0 -1em;
    }
    .fig-float-r-2 img,
    .fig-float-l-2 img {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: right;
        padding: 0 1em 1em;
    }
}

.fig-float-l-2 {
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 768px) {
    .fig-float-l-2 img {
        float: left;
    }
}

figure img {
    width: 100%;
}

.fig-caption-r,
.fig-caption-l {
    font-style: italic;
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 768px) {
    .fig-caption-r,
    .fig-caption-l {
        position: relative;
        float: right;
        padding: 0 1em 1em 4em;
    }
    /* .fig-caption-r:before, .fig-caption-l:before {
        content: "\e617";
        position: absolute;
        top: 0;
        left: 0.75em;
        font-family: 'icons';
        font-size: 32px;
        font-weight: normal;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
      */
}

.fig-caption-l {
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 768px) {
    .fig-caption-l {
        float: left;
        padding: 0 4em 1em 1em;
    }
    .fig-caption-l:before {
        content: url(http://narodowy.pl/assets/media/aktorzy/arrow_left.png);
        left: auto;
        right: 0.75em;
    }
}

.content-tile-base,
.content-tile,
.show-tile,
.landing-tile,
.content-tile-2,
.landing-tile-2,
.content-tile-half {
    display: inline-block;
    position: relative;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1em;
    letter-spacing: normal;
    word-spacing: normal;
}

.content-tile-half {
    padding: 0 1em;
}

.content-tile-full {
    margin-top: 1em;
}

.content-tile-full:first-child {
    margin-top: 0;
}

.tile-img-head {
    position: relative;
}

.tile-img-head h3 {
    position: absolute;
    top: 1em;
    left: 2em;
    margin: 0;
}

.corner-stick {
    position: absolute;
    top: 1em;
    left: 2em;
    margin: 0;
}

.category {
    font-style: italic;
}

.show-tile h3 {
    margin: 0.684em 0 0;
}

.show-tile p,
.show-tile ul {
    margin: 0;
}

.show-tile .category {
    margin-bottom: 0.734em;
    border-bottom: 1px solid #bdbdbd;
    padding-bottom: 0.733em;
}

.show-tile .btn-buy-r {
    margin-top: 0.75em;
}

.icon-info {
    font-size: 2em;
}

.icon-info-big {
    display: inline-block;
    margin-bottom: 0.2em;
    font-size: 6em;
}

.show-icon {
    display: block;
    float: right;
    margin-top: 0.75em;
    font-size: 1.8em;
}

.show-date {
    position: relative;
}

.show-date .btn-buy-l,
.show-date .btn-buy-l-l,
.show-date .btn-buy-l-kal {
    position: absolute;
    top: 0;
    right: 0;
}

.bullet-head {
    position: relative;
    padding-left: 1em;
}

.bullet-head:before {
    content: "•";
    position: absolute;
    top: -0.1481em;
    left: 0;
    font-size: 1.8em;
    line-height: 1;
    color: #d21242;
}

.tile-group {
    margin-top: -1px;
    border-top: 1px solid transparent;
    background: #f1f1f1;
    background-clip: content-box;
}

.framed {
    height: 100%;
    border: 1px solid #bdbdbd;
    padding: 1em;
}

.centered {
    text-align: center;
}

.landing-tile-base,
.landing-tile,
.landing-tile-2 {
    background: #f1f1f1;
    background-clip: content-box;
}

.landing-tile-base>h3,
.landing-tile>h3,
.landing-tile-2>h3 {
    margin-top: 0;
    padding-bottom: 1em;
    background: white;
}

.tile-body,
.tile-body-half {
    padding: 0 1em 1em;
}

.landing-tile-2 figure {
    margin-left: -1em;
}

.landing-tile-2 figure img {
    width: 100%;
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 480px) {
    .tile-body-half {
        float: left;
        width: 50%;
    }
}

#current-shows {
    position: relative;
    min-height: 38em;
}

#current-shows .switch-nav {
    bottom: 1.5em;
}

.current-shows-slide {
    display: none;
}

.current-shows-slide[data-index="0"] {
    display: block;
}

.title-img {
    float: left;
    margin-right: 2em;
}

.small-tile {
    display: inline-block;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1em;
    letter-spacing: normal;
    word-spacing: normal;
}

.small-tile img {
    width: 100%;
    padding-bottom: 7px;
}

.paging {
    clear: both;
}

.paging li {
    border-left: 1px solid #bdbdbd;
    display: inline-block;
}

.paging li:first-child,
.paging li.next,
.paging li.prev+li {
    border: none;
}

.paging a {
    display: block;
    padding-left: 0.2em;
    width: 1.3em;
    color: #222;
    font-size: 1.2em;
    line-height: 1.333em;
    text-align: center;
}

.paging a:hover {
    color: #d21242;
}

.field-def {
    display: inline-block;
    width: 3.5em;
}

.map-canvas {
    height: 28em;
}


/* ==========================================================================
   Kalendarium
   ========================================================================== */

#kal-show-select {
    /*@if $layout == one-col {

    }*/
}

@media screen and (min-width: 480px) {
    #kal-show-select {
        margin: 0.667em -1em;
    }
}

#kal-show-select-wide {
    display: none;
}

.kal-also-on {
    margin-bottom: 0;
}

.kal-also-months {
    margin-top: 0;
}

.kal-also-months li {
    display: inline-block;
}

.kal-month-nav {
    float: left;
    margin-top: 0;
    margin-right: 1em;
}

.kal-m-prev,
.kal-m-next {
    display: inline-block;
    margin-right: 1em;
    vertical-align: middle;
    height: 1.467em;
    width: 1em;
    overflow: hidden;
    text-align: center;
}

.kal-m-prev .icon-arrow-5-16px-l,
.kal-m-next .icon-arrow-5-16px-l {
    display: inline-block;
    height: 150%;
}

.kal-m-next {
    margin-left: 1em;
    margin-right: 0;
}

.kal-m-next .icon-arrow-5-16px-r {
    display: inline-block;
    height: 150%;
}

.kal-by-week {
    float: left;
    margin-top: 0;
    line-height: 2.0538;
}

.kalendarium {
    clear: both;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
}

.kal-row-wrap {
    position: relative;
    z-index: 0;
    border-bottom: 1px solid #bdbdbd;
}

.kal-row-wrap:nth-of-type(odd) {
    background: #f7f7f7;
}

.kal-row-wrap:nth-of-type(odd) .kal-row-span {
    background: #f7f7f7;
}

.kal-row-wrap:nth-of-type(even) {
    background: #e6e6e6;
}

.kal-row-wrap:nth-of-type(even) .kal-row-span {
    background: #e6e6e6;
}

.kal-head-row-wrap {
    background: #595959;
    color: white;
}

.kal-head-row-wrap .kal-kol,
.kal-head-row-wrap .kal-1,
.kal-head-row-wrap .kal-2,
.kal-head-row-wrap .kal-3 {
    position: relative;
}

.kal-head-row-wrap select {
    display: block;
    color: #000;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.kal-stage-link {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0.83333em;
    right: 0.83333em;
    color: white;
}

.kal-stage-link:hover {
    color: white;
}

.kal-stage-link .icon-triangle-down {
    display: inline-block;
    padding-bottom: 2em;
    font-size: 0.5em;
}

.kal-stage {
    margin: 0 0 0.11111em;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1;
}

.kal-stage-sub {
    font-size: 0.77778em;
}

.kal-head {
    float: left;
    width: 5em;
    text-align: center;
}

.kal-row {
    position: relative;
    margin-left: 5em;
}

.kal-kol,
.kal-1,
.kal-2,
.kal-3 {
    float: left;
    padding: 0.4em 1em;
    min-height: 5.86667em;
    width: 100%;
}

.kal-kol:before,
.kal-1:before,
.kal-2:before,
.kal-3:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-left: 1px solid #bdbdbd;
    z-index: -1;
}

.kal-head-row-wrap .kal-kol:before,
.kal-head-row-wrap .kal-1:before,
.kal-head-row-wrap .kal-2:before,
.kal-head-row-wrap .kal-3:before {
    display: none;
}

.kal-2 {
    display: none;
}

.kal-3 {
    display: none;
}

.kal-row-span {
    clear: both;
    margin-left: -1em;
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    padding: 0.66667em 1em;
    box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.2);
}

.kal-row-span p {
    position: relative;
    float: left;
    margin: 0px 40px 0px 0px;
    padding-right: 80px;
}

.kal-row-span .btn-buy-l-kal {
    top: -2px;
}

.kal-day {
    display: inline-block;
    padding-top: 0.80952em;
}

.kal-date {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 0;
    padding: 0.1333em 4.5em 0.1333em 0;
    line-height: 1.1333;
}

.btn-buy-l-kal {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: normal;
    font-size: 11px;
    line-height: 11px;
    vertical-align: middle;
    width: 45px;
    background: #424242;
}

.btn-buy-l-kal span {
    display: inline-block;
    padding-top: 3px;
    width: 20px;
    float: left;
}

.btn-buy-l-kal [class^="icon-"] {
    padding-top: 2px;
    margin: 0 2px;
    padding-top: 0;
}

.btn-buy-l-kal:after {
    border-right: 13px solid #424242;
}

.kal-info {
    font-style: italic;
}

.kal-special-day {
    background: #d21242 !important;
    border-bottom: 1px solid #d21242;
    color: white !important;
    width: calc( 100% + 1px);
}

.kal-special-day:before {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc( 100% + 2px);
    height: 1px;
    line-height: 1px;
    content: "";
    background: #d21242;
}

.kal-special-day:after {
    position: absolute;
    top: -1px;
    left: -1px;
    height: calc( 100% + 2px);
    width: 1px;
    line-height: 1px;
    content: "";
    background: #d21242;
}

.kal-special-day a {
    color: white !important;
}

.kal-special-day .highlight-n,
.kal-special-day .query {
    color: white !important;
}

.kal-special-day .kal-1:before,
.kal-special-day .kal-2:before,
.kal-special-day .kal-3:before {
    border-left-color: #d21242;
}

.kal-special-day .kal-special-text {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0.4em 1em;
    width: 100%;
    height: 100%;
    line-height: 1.2em;
}

.kal-special-day .kal-special-text p {
    display: inline-block;
    margin: 0px;
    vertical-align: middle;
}

.kal-special-day .kal-special-text:before {
    content: "";
    margin-left: -0.25em;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.inline-button-big {
    display: inline-block;
    font-size: 2em;
    border: 1px solid #bbb;
    padding: 6px 80px 1px 10px;
    position: relative;
}

.inline-button-big:after {
    position: absolute;
    top: 14px;
    right: 15px;
    content: "\e61a";
    font: 16px "icons", monospace;
    color: #111;
}

.inline-button-big:hover {
    background-color: #d21242;
    border: 1px solid #d21242;
    color: #fff;
}

.inline-button-big:hover:after {
    color: #fff;
}

.teatr-select {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.teatr-select:after {
    content: "\e61a";
    font: 14px "icons", monospace;
    color: #111;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 4px;
    top: 6px;
    padding: 0 0 2px;
    position: absolute;
    pointer-events: none;
}

.teatr-select:before {
    content: '';
    right: 1px;
    top: 1px;
    width: 20px;
    height: 30px;
    background: #fff;
    position: absolute;
    pointer-events: none;
    display: block;
}

.teatr-select select {
    display: inline-block;
    box-sizing: border-box;
    padding: 6px 0px 6px 10px;
    margin: 0;
    line-height: 1em;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: #fff;
    color: #111;
    border: 1px solid #bbb;
    border-radius: 0px;
    box-sizing: border-box;
    height: 32px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
}

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

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .teatr-select:before {
        display: none;
    }
    .teatr-select:after {
        top: 8px;
    }
    .teatr-select select {
        padding: 8px 80px 6px 10px;
    }
    .inline-button-big:after {
        top: 17px;
    }
}

@media screen and (min-width: 768px) {
    #kal-show-select-wide {
        display: block;
        float: right;
        margin-top: 0;
        line-height: 2.0538;
    }
    .kal-kol,
    .kal-1,
    .kal-2,
    .kal-3 {
        width: 33.33333%;
    }
    .kal-kol:before,
    .kal-1:before,
    .kal-2:before,
    .kal-3:before {
        width: 33.33333%;
    }
    .kal-2 {
        display: block;
    }
    .kal-2:before {
        left: 33.33333%;
    }
    .kal-3 {
        display: block;
    }
    .kal-3:before {
        left: 66.66667%;
    }
    .kal-row-span .kal-date {
        float: left;
        width: 33.33333%;
    }
    .kal-head-row-wrap select {
        display: none;
    }
}

.kal-scene-label {
    display: none;
}
@media screen and (max-width: 767px) {
    .kal-head-row-wrap .kal-row {
        margin-left: 0px;
        padding: 5px;
    }
    .kal-head-row-wrap .kal-1,
    .kal-head-row-wrap .kal-2,
    .kal-head-row-wrap .kal-3 {
        border: 1px solid #999;
        background-color: #414141;
    }
    .kal-head-row-wrap .kal-1 a,
    .kal-head-row-wrap .kal-2 a,
    .kal-head-row-wrap .kal-3 a {
        position: absolute;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        padding: 10px;
    }
    .kal-head-row-wrap .kal-1 a:before,
    .kal-head-row-wrap .kal-2 a:before,
    .kal-head-row-wrap .kal-3 a:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .kal-head-row-wrap .kal-1 a p,
    .kal-head-row-wrap .kal-2 a p,
    .kal-head-row-wrap .kal-3 a p {
        display: inline-block;
        vertical-align: middle;
    }
    .kal-head-row-wrap .kal-1 span.icon-triangle-down,
    .kal-head-row-wrap .kal-2 span.icon-triangle-down,
    .kal-head-row-wrap .kal-3 span.icon-triangle-down {
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -16px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .kal-head-row-wrap .kal-1 span.icon-triangle-down:before,
    .kal-head-row-wrap .kal-2 span.icon-triangle-down:before,
    .kal-head-row-wrap .kal-3 span.icon-triangle-down:before {
        content: "\e61a";
        font-size: 16px;
    }
    #kal-scene-select,
    #kal-show-list,
    #sub-menu-list-1,
    #sub-menu-list-2 {
        display: inline-block;
        height: 100%;
        background: #fff;
        color: #111;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }
    .kal-scene-label {
        display: block;
        padding: 6px 0 0 6px;
    }
}


/* ==========================================================================
   Ikony w listach
   ========================================================================== */

.text-item .item-icon,
.news .item-icon {
    position: relative;
    left: -17px;
}


/* ==========================================================================
   Podstrony
   ========================================================================== */


/*.kontakt {
    h1 {
        @extend .head;
    }

    h2 {
        @extend .head-s-b;
    }

    h3 {
        @extend .normal-b;
    }
}*/


/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    clear: both;
    background: #828282;
    color: #efefef;
}

/* footer nav>div>div {
    padding: 0 0 0 1em;
    width: 50%;
}

footer nav>div>div:first-child {
    padding: 0 1em 0 0;
} */

footer ul {
    padding: 0;
}

footer ul li.sep {
    margin-top: 1em;
}

footer p {
    margin: 0.67em 0;
    color: white;
}

footer p.second {
    font-size: 1.133em;
    color: white;
}

footer .group {
    border-top: 1px solid #adadad;
}

footer a {
    color: #efefef;
}

#footer-form {
    display: none;
}


/*@if $layout == one-col {

    }*/

@media screen and (min-width: 1024px) {
    #footer-form {
        display: block;
        position: relative;
        font-size: 1.1333em;
        line-height: 1.7648;
    }
    #footer-input-wrap {
        position: absolute;
        top: 0.8em;
        right: 0px;
        width: 85%;
        padding-left: 2em;
        padding-right: 0.8826em;
    }
    #footer-search {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #adadad;
        padding: 0 0.6em;
        width: 85%;
        background: #828282;
        line-height: 1.7648;
    }
    #footer-button {
        position: absolute;
        top: 0;
        right: 0.8em;
        width: 15%;
        padding: 0.1em 0.2em;
        background: inherit;
        color: white;
        border: none;
        cursor: pointer;
    }
}


/* ==========================================================================
   404
   ========================================================================== */

#strona-404 {
    text-align: center;
}

#strona-404 div {
    display: inline-block;
    text-align: left;
    width: 360px;
    max-width: 95%;
}

#strona-404 div h1 {
    font-size: 4em;
    color: #d21242;
}

#strona-404 div ul li {
    padding-left: 15px;
    position: relative;
}

#strona-404 div ul li:before {
    content: "■ ";
    position: absolute;
    left: 0px;
    top: 4px;
    font-size: 8px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    color: #d21242;
}

#strona-404 div ul a {
    color: #d21242;
    text-decoration: underline;
}

#strona-404 div ul a:hover {
    color: #999;
}

@media screen and (min-width: 768px) {
    #strona-404 {
        height: 100vh;
    }
    #strona-404:before {
        content: "";
        display: inline-block;
        height: 100vh;
        vertical-align: middle;
    }
    #strona-404 div {
        vertical-align: middle;
    }
    #strona-404 div h1 {
        margin-top: 0;
    }
}


/* ==========================================================================
   Cookies
   ========================================================================== */

#cookies {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
    background-color: #8f8f8f;
    color: #d3d3d3;
}

#cookies a.close {
    position: absolute;
    top: 50%;
    left: 32px;
    margin-top: -2px;
    width: 30px;
    height: 30px;
}

#cookies a.close:before,
#cookies a.close:after {
    position: absolute;
    content: "";
    line-height: 1px;
    width: 26px;
    height: 1px;
    background-color: #d3d3d3;
}

#cookies a.close:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#cookies a.close:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#cookies a.close:hover:before,
#cookies a.close:hover:after {
    background-color: #fff;
}

#cookies p {
    padding-left: 90px;
    padding-right: 10px;
}

#cookies p.mb-0 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

#cookies p a {
    color: #d3d3d3;
    text-decoration: underline;
}

#cookies p a:hover {
    color: #fff;
}

#cookies .switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}
  
#cookies .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
  
#cookies .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
  
#cookies .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

#cookies input:checked + .slider {
    background-color: #2196F3;
}
  
#cookies input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
  
#cookies input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}
  
#cookies .slider.round {
    border-radius: 17px;
}
  
#cookies .slider.round:before {
    border-radius: 50%;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */


/*
 * Image replacement
 */

.ir,
#main-logo div {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before,
#main-logo div:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}


/*
 * Hide visually and from screen readers: h5bp.com/u
 */

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


/*
 * Hide only visually, but have it available for screen readers: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}


/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
header:before,
.extra-box-3:before,
#content-and-sidebar:before,
.fig-float-r-2:before,
.fig-float-l-2:before,
.kal-row:before,
.kal-row-span:before,
footer:before,
footer nav>div:before,
.clearfix:after,
header:after,
.extra-box-3:after,
#content-and-sidebar:after,
.fig-float-r-2:after,
.fig-float-l-2:after,
.kal-row:after,
.kal-row-span:after,
footer:after,
footer nav>div:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after,
header:after,
.extra-box-3:after,
#content-and-sidebar:after,
.fig-float-r-2:after,
.fig-float-l-2:after,
.kal-row:after,
.kal-row-span:after,
footer:after,
footer nav>div:after {
    clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */


/*
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    */


/* Style adjustments for high resolution devices */


/*
}
*/


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request: h5bp.com/r
   ========================================================================== */


/*
@media print {
    * {
        background: transparent !important;
        color: #000 !important; */


/* Black prints faster: h5bp.com/s */


/*
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    */


/*
 * Don't show links that are fragment identifiers,
 * or use the `javascript:` pseudo protocol
 */


/*
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    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;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
*/

@media screen and (min-width: 768px) {
    .content-tile-2columns {
        width: 50%;
        border-left-width: 0;
        margin-left: 0;
    }
}


@media (max-width: 600px) {
    .mobile-image-text{
        margin-top: 5px !important;
    }
  }

  /* skip link to main content */
  .skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

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