@charset "UTF-8";
/*! sass-mixins - v0.11.0 - 2014-10-20 */
                                        /**
* @description
* Generates keyframe animations
*
* @author drublic
*
* @link caniuse http://caniuse.com/#feat=css-animation
* @link spec http://www.w3.org/TR/css3-animations/
*
* @param values
* @returns
*   -webkit-animation: <values>;
*           animation: <values>;
*
* @example
*   .selector {
*     @include x-animation(jump 1s ease-out);
*   }
*/
/*
 * @example
 *    @include x-keyframes(jump) {
 *      from { top: 0; }
 *      to { top: -10px; }
 *   }
 */
/**
 * @description
 * Generates `appearance` for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
 * @link css-tricks http://css-tricks.com/almanac/properties/a/appearance/
 * @link spec http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance
 *
 * @param value
 * @returns
 *   -webkit-appearance: <value>;
 *      -moz-appearance: <value>;
 *           appearance: <value>;
 *
 * @example
 *   .selector {
 *     @include x-appearance(button);
 *   }
 */
/**
 * @description
 * Generates `background-size` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/background-img-opts
 * @link spec http://www.w3.org/TR/css3-background/
 *
 * @param value
 * @returns
 *   -webkit-background-size: $args;
 *           background-size: $args;
 *
 * @example
 *   .selector {
 *     @include x-background-size(100% auto);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `border-radius` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/border-radius
 * @link spec http://www.w3.org/TR/css3-background/#corners
 *
 * @param values
 * @returns
 *   -webkit-border-radius: <values>;
 *           border-radius: <values>;
 *
 * @example
 *   .selector {
 *     @include x-border-radius(20px 10px);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `box-shadow` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-boxshadow
 * @link spec http://www.w3.org/TR/css3-background/#the-box-shadow
 *
 * @param values
 * @returns
 *   -webkit-box-shadow: <values>;
 *           box-shadow: <values>;
 *
 * @example
 *   .selector {
 *     @include x-box-shadow(5px 5px 10px 5px #aaa);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `box-sizing` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @param type
 * @returns
 *   -webkit-box-sizing: <type>;
 *      -moz-box-sizing: <type>;
 *           box-sizing: <type>;
 *
 * @example
 *   .selector {
 *     @include x-box-sizing;
 *   }
 */
/**
 * @description
 * These mixins generates Media Queries
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/#feat=css-mediaqueries
 * @link spec http://www.w3.org/TR/css3-mediaqueries/
 *
 * Note: Please use the CSS unit `em` for device-width in order to stay
 * responsive.
 */
/**
 * @param device-width {number}
 * @content
 * @returns
 *   @media screen and (min-width: <device-width>) {
 *      <content>
 *   }
 *
 * @example
 *   .selector {
 *     x-at-least(40em) { width: 60%; }
 *   }
 */
/**
 * @param device-width {number}
 * @content
 * @returns
 *   @media screen and (max-width: <device-width - 0.01>) {
 *      <content>
 *   }
 *
 * @example
 *   .selector {
 *     x-until(40em) { width: 100%; }
 *   }
 */
/**
 * @author romamatusevich
 *
 * @param point{string}, bp-mobile-width{number}, bp-tablet-width{number} 
 * @content
 * @returns
 *   @media (max-width: <bp-mobile-width>) {
 *      <content>
 *   }
 *
 * @example
 *   .selector {
 *     x-breakpoints(mobile,  320px) { width: 100%; }
 *   }
 */
/**
 * @description
 * Generates `calc` function which allows mathematical expressions for a given property
 *
 * @author romamatusevich
 *
 * @link spec http://www.w3.org/TR/css3-values/#calc
 * @link caniuse http://caniuse.com/calc
 *
 * @param property
 * @param expression
 *
 * @returns
 *    <property>: -webkit-calc(<expression>);
 *    <property>: calc(<expression>);
 *
 * @example
 *   .selector {
 *     @include x-calc(width, "600px - 2em");
 *   }
 */
/**
 * @description
 * Generates flexbox properties for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
 * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/
 * @link spec http://www.w3.org/TR/css3-flexbox/
 */
/**
 * @returns
 *   display: -webkit-box;
 *   display: -moz-box;
 *   display: -ms-flexbox;
 *   display: -webkit-flex;
 *   display: flex;
 *
 * @example
 *   .selector {
 *     @include x-display-flex;
 *   }
 */
/**
 * @param values
 * @returns
 *   -webkit-box-flex: <values>;
 *      -moz-box-flex: <values>;
 *       -webkit-flex: <values>;
 *           -ms-flex: <values>;
 *               flex: <values>;
 *
 * @example
 *   .selector {
 *     @include x-flex(1 1 auto);
 *   }
 */
/**
 * @param value
 * @returns
 *   -webkit-box-ordinal-group: <value>;
 *      -moz-box-ordinal-group: <value>;
 *              -ms-flex-order: <value>;
 *               -webkit-order: <value>;
 *                       order: <value>;
 *
 * @example
 *   .selector {
 *     @include x-order(1);
 *   }
 */
/**
 * @param value
 * @returns
 *    -webkit-flex-wrap: <value>;
 *        -ms-flex-wrap: <value>;
 *            flex-wrap: <value>;
 *
 * @example
 *   .selector {
 *     @include x-flex-wrap(wrap);
 *   }
 */
/**
 * @param value
 * @returns
 *   -webkit-align-content: <value>;
 *      -moz-align-content: <value>;
 *      -ms-flex-line-pack: <value>;
 *           align-content: <value>;
 * @example
 *   .selector {
 *     @include x-align-content(center);
 *   }
 */
/**
 * @param value
 * @returns
 *	  -webkit-box-direction: <value>;
 *		 -moz-box-direction: <value>;
 *       -webkit-box-orient: <value>;
 *		    -moz-box-orient: <value>;
 *   -webkit-flex-direction: <value>;
 *      -moz-flex-direction: <value>;
 *       -ms-flex-direction: <value>;
 *           flex-direction: <value>;
 * @example
 *   .selector {
 *     @include x-flex-direction(row-reverse);
 *   }
 */
/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */
/**
 * @description
 * Generates a linear gradient for a given element with a fallback color.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @dependency helper-gradient-angle
 * @param direction {'to bottom'|'to right'|'to top'|'to left'|<degree>}
 * @param fallback {color}
 * @param from {color}
 * @param to {color}
 * @default 'to bottom', #ccc, #ccc, #aaa
 *
 * @returns
 *   background-color: <fallback>;
 *   background-image: -webkit-gradient(linear, <direction - old converted>, from(<from>), to(<to>));
 *   background-image: -webkit-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:         linear-gradient(<direction>, <from>, <to>);
 *
 * @example
 *   .selector {
 *     @include x-linear-gradient("to bottom", #ccc, #ddd, #bbb);
 *   }
 *
 * Note: By default this linear-gradient-mixin encourages people to use the
 * latest CSS-syntax for gradients.
 */
/**
 * @description
 * This mixin generates multiple backgrounds
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-gradients
 * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients
 */
/*
 * A function for prefixing gradients
 *
 * @param mode {'webkit-old'|'webkit'|''}
 * @param gradient
 * @returns
 *   -<mode>-linear-gradient(<gradient>);
 */
/*
 * Generates multiple backgrounds
 *
 * @param backgrounds {list}
 *
 * @example
 *   .selector {
 *     @include x-multiple-backgrounds(
 *       rgba(0, 0, 0, 0.3),
 *       url('../img/html5_logo.png') top right no-repeat,
 *       (linear-gradient, to bottom, #aaa, #ddd)
 *     );
 *   }
 */
/**
 * @description
 * This mixin creates (endless) multiple color stops in gradients just with one
 * call for the mixin.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-gradients
 * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients
 *
 * @param stops {list}
 * @returns
 *   background-image: -webkit-linear-gradient(top, <stops[1]>, <stops[2]>, ..., <stops[n]>);
 *   background-image:         linear-gradient(to bottom, <stops[1]>, <stops[2]>, ..., <stops[n]>);
 *
 * @example
 *   .selector {
 *     @include x-multiple-colored-gradient((
 *         "top",
 *         #f22 0%,
 *         #f2f 15%,
 *         #22f 30%,
 *         #2ff 45%,
 *         #2f2 60%,
 *         #2f2 75%,
 *         #ff2 90%,
 *         #f22 100%
 *     ));
 *   }
 *
 * Note: This mixis does not define a fallback-color for your background as it
 * is likely you want to add an image or something. Please specify one by
 * yourself.
 */
/**
 * @description
 * Generates `opacity` output for a given element and adds a filter for old IE.
 *
 * @author bartveneman
 *
 * @link caniuse http://caniuse.com/css-opacity
 * @link spec http://www.w3.org/TR/css3-color/#transparency
 *
 * @param value
 * @returns
 *   opacity: <value>;
 *    filter: alpha(opacity=<value * 100>);
 *
 * @example
 *   .selector {
 *     @include x-opacity(0.3);
 *   }
 */
/**
 * @description
 * Generates `placeholder` content for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
 * @link css-tricks http://css-tricks.com/snippets/css/style-placeholder-text/
 *
 * @returns
 *    &::-webkit-input-placeholder {
 *        <content property 1>: <content value 1>;
 *        ...
 *        <content property n>: <content value n>;
 *    }
 *    &::-moz-placeholder {
 *        <content property 1>: <content value 1>;
 *        ...
 *        <content property n>: <content value n>;
 *    }
 *    &:-ms-input-placeholder {
 *        <content property 1>: <content value 1>;
 *        ...
 *        <content property n>: <content value n>;
 *    }
 *
 * @example
 *   .selector {
 *     @include x-placeholder {
 *         color: #bada55;
 *         font-weight: bold;
 *     }
 *   }
 */
/**
 * @description
 * This mixin enables you to use the CSS3 value `rem`, which lets you define
 * property sizes based on the root element's font-size.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/rem
 * @link spec http://www.w3.org/TR/css3-values/#relative0
 *
 * Note: Depending on the font-size of the root-element `rem` calculates a
 * property of a current element. The fallback solution accepts a
 * `default-font-size`-argument which is 16px by default.
 */
/*
 * Returns a number without unit. E.g. 30px -> 30
 * Borrowed from https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss
 * 
 * @param value {String}
 * @returns
 *   <Number>
 */
/*
 * Outputs properties that use rem with a px fallback.
 * It also takes px values and converts them to rem.
 *
 * @param property
 * @param values
 * @param default-font-size int optional
 * @returns
 *   <property>: <parsed value>px;
 *   <property>: <parsed value>rem;
 *
 * @example
 *   .selector {
 *     @include x-rem(font-size, 1.3);
 *     @include x-rem(padding, 20px);
 *   }
 */
/**
 * @description
 * Sass-mixin for CSS property `tab-size`, generates cross-browser-compatible
 * `tab-size` output.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css3-tabsize
 * @link spec http://dev.w3.org/csswg/css-text/#tab-size1
 *
 * @param value int optional
 * @default 4
 * @returns
 *   -moz-tab-size: <value>;
 *        tab-size: <value>;
 *
 * @example
 *   .selector {
 *     @include x-tab-size(4);
 *    }
 */
/**
 * @description
 * Generates cross-browser-compatible `transform` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/transforms2d http://caniuse.com/transforms3d
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transform: <values>;
 *       -ms-transform: <values>;
 *           transform: <values>;
 *
 * @example
 *   .selector {
 *     @include x-transform(rotate(1deg));
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `transition` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-transitions
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transition: <values>;
 *           transition: <values>;
 *
 * @example
 *   .selector {
 *     @include x-transition(background 0.3s ease-in);
 *   }
 */
/**
 * @description
 * Disables selection of content of a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/user-select-none
 *
 * @param value none|auto optional
 * @default none
 * @returns
 *   -webkit-user-select: <value>;
 *      -moz-user-select: <value>;
 *       -ms-user-select: <value>;
 *           user-select: <value>;
 *
 * @example
 *   .selector {
 *     @include x-user-select;
 *   }
 */
@import url(../libs/bootstrap-grid-h/dist/bootstrap-grid-h.css);
.debug {
  border: 1px solid #f00; }

::selection {
  background: #B40010;
  color: #fff; }

::-moz-selection {
  background: #B40010;
  color: #fff; }

.text-brand {
  color: #B40010; }

body {
  background: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 1.5em; }

a {
  color: #B40010; }
  a:hover {
    color: #B40010; }
  a.more {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin: auto; }
  a[target="_blank"]::after {
    content: '\f08e';
    font-family: 'FontAwesome';
    display: inline-block;
    font-size: .8em;
    padding-left: 2px; }

h1 {
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 35px;
  text-align: center; }

h2 {
  color: #000;
  margin-top: 0;
  text-transform: uppercase;
  font-size: 26px;
  font-weight: 500;
  text-align: center; }

h3 {
  text-transform: lowercase;
  font-style: italic;
  font-size: 1.8rem;
  font-weight: 400;
  color: #888;
  font-family: 'Georgia';
  position: relative; }
  h3.wings {
    margin-bottom: 15px; }
    h3.wings::before {
      content: '';
      width: 100%;
      border-bottom: 1px solid #ddd;
      position: absolute;
      left: 0;
      top: 50%; }
    h3.wings span {
      position: relative;
      z-index: 1;
      background: #fff;
      display: inline-block;
      padding: 0 10px; }

h4 {
  font-size: 1em;
  font-weight: 700;
  margin-top: 40px; }

.mt80 {
  margin-top: 80px; }

nav.top {
  position: fixed;
  width: 100%;
  z-index: 100;
  -webkit-border-radius: 0;
  border-radius: 0;
  background: #B40010 url(../img/menu-bg.png);
  color: #B40010;
  padding: 0;
  margin: 0; }
  nav.top .navbar-brand {
    margin: 0;
    padding: 5px 10px;
    display: inline-block; }
    nav.top .navbar-brand .img {
      height: 40px;
      width: 100px;
      background: url(../brand/alla-polacca-logo-white.png) no-repeat 50% 50%;
      background-size: contain; }
  nav.top .navbar-toggle .icon-bar {
    background: #fff; }
  nav.top a {
    z-index: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: 'Oswald';
    font-size: 15px;
    font-weight: normal;
    color: #fff;
    text-transform: uppercase;
    -webkit-transition: all 0.5s;
    transition: all 0.5s; }
    nav.top a:hover {
      background-color: #ce0012;
      color: #fff; }
    nav.top a::after {
      display: none; }
  nav.top .dropdown .dropdown-menu {
    padding: 0;
    background: #B40010;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
    visibility: hidden;
    display: block;
    z-index: -1; }
  nav.top .dropdown.open > a {
    background-color: #ce0012; }
  nav.top .dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible; }
  nav.top .dropdown-search .dropdown-menu {
    padding: 15px;
    text-align: right; }
    nav.top .dropdown-search .dropdown-menu input {
      -webkit-border-radius: 0;
      border-radius: 0;
      border: none; }
    nav.top .dropdown-search .dropdown-menu button {
      margin-top: 5px;
      background-color: #B40010;
      border-color: #aa000f;
      text-transform: uppercase;
      -webkit-border-radius: 0;
      border-radius: 0; }

header.header-top {
  padding: 62px 0 0 0; }
  header.header-top .intro {
    margin: 0; }
    header.header-top .intro figure {
      margin: 155px 0 155px 0; }
      header.header-top .intro figure img {
        margin: auto; }
  header.header-top .motto {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    align-items: center;
    -webkit-align-items: center;
    margin-bottom: 155px; }
    header.header-top .motto .text-right {
      padding-right: 20px; }
    header.header-top .motto .text-left {
      padding-left: 20px; }
    header.header-top .motto::before {
      content: '';
      display: block;
      border-left: 1px solid #aaa;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 0; }
    header.header-top .motto blockquote {
      width: 50%;
      border: none;
      font-size: 14px;
      line-height: 2.25em;
      padding: 0;
      margin: 0; }
      header.header-top .motto blockquote small {
        font-size: 14px; }
    header.header-top .motto p {
      font-size: 14px;
      width: 50%;
      line-height: 1.3em;
      margin: 0; }
  header.header-top .featured {
    padding: 0;
    margin: 0 0 51.66667px 0;
    border-top: 1px solid #dddddd; }
    header.header-top .featured div {
      margin: 0;
      padding: 0;
      overflow: hidden;
      -webkit-box-shadow: 0 1px 1px 0 #dddddd;
      box-shadow: 0 1px 1px 0 #dddddd; }
      header.header-top .featured div h2 {
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 1; }
        header.header-top .featured div h2 a {
          -webkit-transition: all 0.5s;
          transition: all 0.5s;
          text-align: center;
          display: block;
          width: 100%;
          padding: 20px 0; }
          header.header-top .featured div h2 a strong {
            color: #000;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
            font-size: 20px;
            font-weight: 500;
            display: block; }
            header.header-top .featured div h2 a strong span {
              padding: 0 20px 15px 20px;
              display: inline-block;
              border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
          header.header-top .featured div h2 a small {
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
            display: block;
            font-size: 14px;
            margin: 15px 0 0 0; }
        header.header-top .featured div h2::after {
          -webkit-transition: all 0.5s;
          transition: all 0.5s;
          position: absolute;
          content: '';
          display: block;
          width: 0;
          height: 0;
          border: 20px solid transparent;
          border-left-width: 30px;
          border-right-width: 30px;
          border-top-color: #fff;
          bottom: -40px;
          left: 50%;
          margin-left: -30px; }
        header.header-top .featured div h2::before {
          -webkit-transition: all 0.5s;
          transition: all 0.5s;
          position: absolute;
          content: '';
          display: block;
          width: 0;
          height: 0;
          border: 20px solid transparent;
          border-left-width: 30px;
          border-right-width: 30px;
          bottom: -41px;
          left: 50%;
          margin-left: -30px; }
        header.header-top .featured div h2:hover a {
          text-decoration: none;
          background: #B40010; }
          header.header-top .featured div h2:hover a strong, header.header-top .featured div h2:hover a small {
            color: #fff; }
        header.header-top .featured div h2:hover::after {
          border-top-color: #B40010; }
      header.header-top .featured div figure {
        position: relative;
        z-index: 0; }
        header.header-top .featured div figure a {
          display: block; }
        header.header-top .featured div figure img {
          max-width: 100%; }

.box {
  padding: 25px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0; }
  .box figure {
    margin-bottom: 30px; }
  .box:last-child {
    border-bottom: none; }

.main {
  border-right: 1px solid #eee;
  padding-right: 25px !important; }
  .main .box {
    border-bottom: none; }
    .main .box:first-child {
      padding-top: 0; }
  .main table th, .main table td {
    padding: 5px; }
  .main h2 {
    text-align: center; }
  .main ul {
    list-style: none;
    padding: 0 0 0 25px;
    margin: 0; }
    .main ul li {
      position: relative;
      margin-bottom: 6px; }
      .main ul li::before {
        position: absolute;
        left: -20px;
        content: "• ";
        color: #B40010; }
  .main ul.covers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0;
    margin: 20px 0 30px 0; }
    .main ul.covers li {
      flex-basis: 50%;
      padding-left: 70px;
      padding-right: 10px;
      font-size: .9em;
      min-height: 80px; }
      .main ul.covers li::before {
        background: #aaa url(../img/cd-cover.png) no-repeat 50% 50%;
        background-size: contain;
        display: block;
        content: '';
        width: 60px;
        height: 60px;
        left: 0;
        top: 0;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        transform-origin: 0% 50%; }
      .main ul.covers li:hover::before {
        background-color: #bbb; }
  .main blockquote {
    border-left: none;
    padding-left: 50px;
    position: relative;
    margin: 40px 0;
    font-size: 1em; }
    .main blockquote::before {
      position: absolute;
      content: '”';
      font-family: 'Georgia';
      font-size: 6em;
      color: #ddd;
      top: 30px;
      left: 10px; }

aside {
  margin-left: -1px;
  border-left: 1px solid #eee;
  padding-left: 25px !important; }
  aside h2 {
    font-size: 24px; }

.btn-primary {
  background: #B40010;
  border-color: #9b000e; }
  .btn-primary:hover {
    background: #e70015;
    border-color: #B40010; }

.is-sm .content main {
  border-right: none; }
.is-sm .content aside {
  border-left: none; }

.news .items {
  margin-top: 20px; }
  .news .items .item {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px dashed #ddd;
    position: relative;
    -webkit-transition: all 0.5s;
    transition: all 0.5s; }
    .news .items .item:last-child {
      border-bottom: none; }
    .news .items .item > figure {
      margin-bottom: 15px;
      height: 250px;
      overflow: hidden;
      position: relative; }
      .news .items .item > figure img {
        position: absolute;
        width: 100%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
    .news .items .item time {
      color: #B40010;
      width: 100%;
      text-align: center;
      display: inline-block;
      padding: 3px 5px;
      font-size: 12px;
      z-index: 1; }
      .news .items .item time:before {
        position: absolute;
        content: '';
        display: none;
        border: 7px solid transparent;
        border-right: 10px solid #f00;
        left: -7px;
        top: -7px;
        z-index: 0; }
    .news .items .item header {
      margin: 0;
      text-align: left; }
      .news .items .item header h2 {
        text-align: center; }
.news .items-small {
  font-size: 16px; }

.team .team-member {
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  display: flex; }
  .team .team-member > figure {
    flex-basis: 150px;
    min-width: 150px; }
  .team .team-member > div {
    margin-left: 20px; }
    .team .team-member > div h4 {
      margin-top: 10px;
      font-size: 1.2em;
      text-transform: uppercase; }
      .team .team-member > div h4 small {
        text-transform: none; }

.person.person-circle {
  text-align: center; }
  .person.person-circle div {
    width: 150px;
    height: 150px;
    margin: auto;
    overflow: hidden;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    background: #eee; }
  .person.person-circle figcaption small {
    display: block;
    color: #aaa; }

.gallery .h {
  background-repeat: no-repeat;
  background-size: cover;
  outline: 10px solid #fff; }
.gallery.gallery-section {
  display: flex;
  flex-wrap: wrap; }
  .gallery.gallery-section figure {
    flex-basis: 50%;
    border: 5px solid #fff;
    height: 120px;
    margin-bottom: 0;
    overflow: hidden;
    position: relative; }
    .gallery.gallery-section figure img {
      position: absolute;
      min-width: 110%;
      max-width: 110%;
      top: 15%;
      left: 50%;
      -webkit-transform: translate(-50%, -15%);
      -ms-transform: translate(-50%, -15%);
      transform: translate(-50%, -15%);
      -webkit-transition: all 0.5s;
      transition: all 0.5s; }
    .gallery.gallery-section figure:hover img {
      -webkit-transform: translate(-50%, -20%) scale(1.1);
      -ms-transform: translate(-50%, -20%) scale(1.1);
      transform: translate(-50%, -20%) scale(1.1); }
    .gallery.gallery-section figure.cover {
      background-position: 50% 50%;
      background-size: cover; }
    .gallery.gallery-section figure.wide {
      flex-basis: 100%;
      height: 400px !important;
      border-left: none;
      border-right: none; }
    .gallery.gallery-section figure.left {
      border-left: none; }
    .gallery.gallery-section figure.right {
      border-right: none; }
  .gallery.gallery-section.in-page figure {
    height: 220px; }
  .gallery.gallery-section.side figure {
    height: 180px; }
    .gallery.gallery-section.side figure img {
      min-height: 180px;
      width: auto;
      min-width: 0;
      max-width: none; }
    .gallery.gallery-section.side figure:hover img {
      -webkit-transform: translate(-50%, -15%) scale(1.1);
      -ms-transform: translate(-50%, -15%) scale(1.1);
      transform: translate(-50%, -15%) scale(1.1); }
.gallery.gallery-inline {
  margin-bottom: 20px; }
  .gallery.gallery-inline figure {
    height: 220px; }
    .gallery.gallery-inline figure img {
      min-height: 110%;
      min-width: 0;
      width: auto;
      max-width: none; }
.gallery.gallery-list {
  display: flex;
  flex-wrap: wrap; }
  .gallery.gallery-list .gallery {
    flex-basis: 50%;
    width: 50%;
    padding: 10px;
    margin-bottom: 10px; }
    .gallery.gallery-list .gallery figure {
      height: 150px;
      width: 100%;
      overflow: hidden;
      position: relative; }
      .gallery.gallery-list .gallery figure img {
        min-width: 100%;
        top: 50%;
        left: 50%;
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: all 0.5s;
        transition: all 0.5s; }
      .gallery.gallery-list .gallery figure:hover img {
        -webkit-transform: translate(-50%, -50%) scale(1.1);
        -ms-transform: translate(-50%, -50%) scale(1.1);
        transform: translate(-50%, -50%) scale(1.1); }
      .gallery.gallery-list .gallery figure.align-top img {
        top: 0;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0); }
      .gallery.gallery-list .gallery figure.align-top:hover img {
        -webkit-transform: translate(-50%, 0) scale(1.1);
        -ms-transform: translate(-50%, 0) scale(1.1);
        transform: translate(-50%, 0) scale(1.1); }
      .gallery.gallery-list .gallery figure.align-bottom img {
        top: 100%;
        -webkit-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%); }
      .gallery.gallery-list .gallery figure.align-bottom:hover img {
        -webkit-transform: translate(-50%, -100%) scale(1.1);
        -ms-transform: translate(-50%, -100%) scale(1.1);
        transform: translate(-50%, -100%) scale(1.1); }
    .gallery.gallery-list .gallery header h4 {
      text-align: center;
      margin: 5px 0 0 0;
      font-weight: normal; }
      .gallery.gallery-list .gallery header h4 a {
        color: #000; }

.gallery-photos .photo, .gallery-photos .photo-sizer {
  width: 33%; }
.gallery-photos .photo {
  padding: 5px; }
.gallery-photos .photo-wide {
  width: 66%; }

.is-xs .gallery.gallery-section.in-page figure {
  height: 140px;
  border-width: 3px; }
  .is-xs .gallery.gallery-section.in-page figure.wide {
    height: 200px !important; }

#events {
  margin: auto; }
  #events .fc-toolbar h2 {
    text-transform: uppercase;
    font-size: 1.3rem;
    height: 30px;
    line-height: 30px;
    font-weight: 900;
    color: #aaa; }
  #events .fc-toolbar button {
    border: 1px solid #ccc;
    background: none;
    width: 30px;
    height: 30px;
    line-height: 30px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 0;
    text-align: center; }
    #events .fc-toolbar button span {
      color: #aaa; }
    #events .fc-toolbar button .fc-next-button {
      padding-left: 3px; }
    #events .fc-toolbar button:hover {
      background: #eee; }
  #events .fc-basic-view table {
    border-collapse: separate;
    border-spacing: 1px; }
  #events .fc-basic-view td, #events .fc-basic-view th {
    border-color: transparent;
    background: transparent;
    padding: 0; }
  #events .fc-basic-view .fc-body .fc-bgevent {
    opacity: 1;
    color: #fff;
    position: relative; }
    #events .fc-basic-view .fc-body .fc-bgevent::before {
      cursor: pointer;
      border: 2px solid #ce0012;
      position: absolute;
      margin-top: 1px;
      margin-left: -1px;
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-border-radius: 50%;
      border-radius: 50%; }
  #events .fc-basic-view .fc-body .fc-row {
    height: 40px;
    min-height: 40px; }
    #events .fc-basic-view .fc-body .fc-row .fc-day-number {
      text-align: center;
      height: 40px;
      line-height: 40px;
      padding: 0; }
    #events .fc-basic-view .fc-body .fc-row td {
      border-color: transparent;
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
      cursor: pointer; }

ul.timeline {
  list-style: none;
  position: relative;
  padding: 0; }
  ul.timeline::before {
    content: '';
    display: block;
    left: 25px;
    position: absolute;
    width: 3px;
    height: 100%;
    background: #eee;
    -webkit-border-radius: 3px;
    border-radius: 3px; }
  ul.timeline li {
    position: relative;
    padding: 25px 0 25px 80px;
    margin: 0;
    min-height: 50px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s; }
    ul.timeline li.is-hidden {
      opacity: 0;
      top: -30px; }
    ul.timeline li strong {
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -25px;
      display: block;
      width: 50px;
      height: 50px;
      background: #B40010;
      -webkit-border-radius: 30px;
      border-radius: 30px;
      line-height: 50px;
      text-align: center;
      font-size: 0.8em;
      font-weight: normal;
      color: #fff; }
    ul.timeline li::before {
      display: none; }
    ul.timeline li.in {
      opacity: 1;
      top: 0; }
    ul.timeline li.header {
      font-weight: 700;
      font-size: 1.5em;
      color: #B40010;
      text-transform: uppercase;
      padding: 15px 15px 5px 45px;
      margin: 20px 0; }
      ul.timeline li.header:before {
        content: '';
        display: block;
        position: absolute;
        width: 15px;
        height: 15px;
        background: #ccc;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        left: 19px;
        top: 50%;
        margin-top: -5px; }
    ul.timeline li.past {
      color: #ddd; }
      ul.timeline li.past strong {
        background: #ddd; }
      ul.timeline li.past header h2 {
        color: #ccc; }
  ul.timeline .event header h2 {
    font-size: 22px;
    text-align: left; }
  ul.timeline .event figure {
    max-height: 150px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 150px; }
    ul.timeline .event figure img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
  ul.timeline .event div {
    text-align: left !important; }

/*! sass-mixins - v0.11.0 - 2014-10-20 */
                                        /**
* @description
* Generates keyframe animations
*
* @author drublic
*
* @link caniuse http://caniuse.com/#feat=css-animation
* @link spec http://www.w3.org/TR/css3-animations/
*
* @param values
* @returns
*   -webkit-animation: <values>;
*           animation: <values>;
*
* @example
*   .selector {
*     @include x-animation(jump 1s ease-out);
*   }
*/
/*
 * @example
 *    @include x-keyframes(jump) {
 *      from { top: 0; }
 *      to { top: -10px; }
 *   }
 */
/**
 * @description
 * Generates `appearance` for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
 * @link css-tricks http://css-tricks.com/almanac/properties/a/appearance/
 * @link spec http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance
 *
 * @param value
 * @returns
 *   -webkit-appearance: <value>;
 *      -moz-appearance: <value>;
 *           appearance: <value>;
 *
 * @example
 *   .selector {
 *     @include x-appearance(button);
 *   }
 */
/**
 * @description
 * Generates `background-size` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/background-img-opts
 * @link spec http://www.w3.org/TR/css3-background/
 *
 * @param value
 * @returns
 *   -webkit-background-size: $args;
 *           background-size: $args;
 *
 * @example
 *   .selector {
 *     @include x-background-size(100% auto);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `border-radius` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/border-radius
 * @link spec http://www.w3.org/TR/css3-background/#corners
 *
 * @param values
 * @returns
 *   -webkit-border-radius: <values>;
 *           border-radius: <values>;
 *
 * @example
 *   .selector {
 *     @include x-border-radius(20px 10px);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `box-shadow` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-boxshadow
 * @link spec http://www.w3.org/TR/css3-background/#the-box-shadow
 *
 * @param values
 * @returns
 *   -webkit-box-shadow: <values>;
 *           box-shadow: <values>;
 *
 * @example
 *   .selector {
 *     @include x-box-shadow(5px 5px 10px 5px #aaa);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `box-sizing` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @param type
 * @returns
 *   -webkit-box-sizing: <type>;
 *      -moz-box-sizing: <type>;
 *           box-sizing: <type>;
 *
 * @example
 *   .selector {
 *     @include x-box-sizing;
 *   }
 */
/**
 * @description
 * These mixins generates Media Queries
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/#feat=css-mediaqueries
 * @link spec http://www.w3.org/TR/css3-mediaqueries/
 *
 * Note: Please use the CSS unit `em` for device-width in order to stay
 * responsive.
 */
/**
 * @param device-width {number}
 * @content
 * @returns
 *   @media screen and (min-width: <device-width>) {
 *      <content>
 *   }
 *
 * @example
 *   .selector {
 *     x-at-least(40em) { width: 60%; }
 *   }
 */
/**
 * @param device-width {number}
 * @content
 * @returns
 *   @media screen and (max-width: <device-width - 0.01>) {
 *      <content>
 *   }
 *
 * @example
 *   .selector {
 *     x-until(40em) { width: 100%; }
 *   }
 */
/**
 * @author romamatusevich
 *
 * @param point{string}, bp-mobile-width{number}, bp-tablet-width{number} 
 * @content
 * @returns
 *   @media (max-width: <bp-mobile-width>) {
 *      <content>
 *   }
 *
 * @example
 *   .selector {
 *     x-breakpoints(mobile,  320px) { width: 100%; }
 *   }
 */
/**
 * @description
 * Generates `calc` function which allows mathematical expressions for a given property
 *
 * @author romamatusevich
 *
 * @link spec http://www.w3.org/TR/css3-values/#calc
 * @link caniuse http://caniuse.com/calc
 *
 * @param property
 * @param expression
 *
 * @returns
 *    <property>: -webkit-calc(<expression>);
 *    <property>: calc(<expression>);
 *
 * @example
 *   .selector {
 *     @include x-calc(width, "600px - 2em");
 *   }
 */
/**
 * @description
 * Generates flexbox properties for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
 * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/
 * @link spec http://www.w3.org/TR/css3-flexbox/
 */
/**
 * @returns
 *   display: -webkit-box;
 *   display: -moz-box;
 *   display: -ms-flexbox;
 *   display: -webkit-flex;
 *   display: flex;
 *
 * @example
 *   .selector {
 *     @include x-display-flex;
 *   }
 */
/**
 * @param values
 * @returns
 *   -webkit-box-flex: <values>;
 *      -moz-box-flex: <values>;
 *       -webkit-flex: <values>;
 *           -ms-flex: <values>;
 *               flex: <values>;
 *
 * @example
 *   .selector {
 *     @include x-flex(1 1 auto);
 *   }
 */
/**
 * @param value
 * @returns
 *   -webkit-box-ordinal-group: <value>;
 *      -moz-box-ordinal-group: <value>;
 *              -ms-flex-order: <value>;
 *               -webkit-order: <value>;
 *                       order: <value>;
 *
 * @example
 *   .selector {
 *     @include x-order(1);
 *   }
 */
/**
 * @param value
 * @returns
 *    -webkit-flex-wrap: <value>;
 *        -ms-flex-wrap: <value>;
 *            flex-wrap: <value>;
 *
 * @example
 *   .selector {
 *     @include x-flex-wrap(wrap);
 *   }
 */
/**
 * @param value
 * @returns
 *   -webkit-align-content: <value>;
 *      -moz-align-content: <value>;
 *      -ms-flex-line-pack: <value>;
 *           align-content: <value>;
 * @example
 *   .selector {
 *     @include x-align-content(center);
 *   }
 */
/**
 * @param value
 * @returns
 *	  -webkit-box-direction: <value>;
 *		 -moz-box-direction: <value>;
 *       -webkit-box-orient: <value>;
 *		    -moz-box-orient: <value>;
 *   -webkit-flex-direction: <value>;
 *      -moz-flex-direction: <value>;
 *       -ms-flex-direction: <value>;
 *           flex-direction: <value>;
 * @example
 *   .selector {
 *     @include x-flex-direction(row-reverse);
 *   }
 */
/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */
/**
 * @description
 * Generates a linear gradient for a given element with a fallback color.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @dependency helper-gradient-angle
 * @param direction {'to bottom'|'to right'|'to top'|'to left'|<degree>}
 * @param fallback {color}
 * @param from {color}
 * @param to {color}
 * @default 'to bottom', #ccc, #ccc, #aaa
 *
 * @returns
 *   background-color: <fallback>;
 *   background-image: -webkit-gradient(linear, <direction - old converted>, from(<from>), to(<to>));
 *   background-image: -webkit-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:         linear-gradient(<direction>, <from>, <to>);
 *
 * @example
 *   .selector {
 *     @include x-linear-gradient("to bottom", #ccc, #ddd, #bbb);
 *   }
 *
 * Note: By default this linear-gradient-mixin encourages people to use the
 * latest CSS-syntax for gradients.
 */
/**
 * @description
 * This mixin generates multiple backgrounds
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-gradients
 * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients
 */
/*
 * A function for prefixing gradients
 *
 * @param mode {'webkit-old'|'webkit'|''}
 * @param gradient
 * @returns
 *   -<mode>-linear-gradient(<gradient>);
 */
/*
 * Generates multiple backgrounds
 *
 * @param backgrounds {list}
 *
 * @example
 *   .selector {
 *     @include x-multiple-backgrounds(
 *       rgba(0, 0, 0, 0.3),
 *       url('../img/html5_logo.png') top right no-repeat,
 *       (linear-gradient, to bottom, #aaa, #ddd)
 *     );
 *   }
 */
/**
 * @description
 * This mixin creates (endless) multiple color stops in gradients just with one
 * call for the mixin.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-gradients
 * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients
 *
 * @param stops {list}
 * @returns
 *   background-image: -webkit-linear-gradient(top, <stops[1]>, <stops[2]>, ..., <stops[n]>);
 *   background-image:         linear-gradient(to bottom, <stops[1]>, <stops[2]>, ..., <stops[n]>);
 *
 * @example
 *   .selector {
 *     @include x-multiple-colored-gradient((
 *         "top",
 *         #f22 0%,
 *         #f2f 15%,
 *         #22f 30%,
 *         #2ff 45%,
 *         #2f2 60%,
 *         #2f2 75%,
 *         #ff2 90%,
 *         #f22 100%
 *     ));
 *   }
 *
 * Note: This mixis does not define a fallback-color for your background as it
 * is likely you want to add an image or something. Please specify one by
 * yourself.
 */
/**
 * @description
 * Generates `opacity` output for a given element and adds a filter for old IE.
 *
 * @author bartveneman
 *
 * @link caniuse http://caniuse.com/css-opacity
 * @link spec http://www.w3.org/TR/css3-color/#transparency
 *
 * @param value
 * @returns
 *   opacity: <value>;
 *    filter: alpha(opacity=<value * 100>);
 *
 * @example
 *   .selector {
 *     @include x-opacity(0.3);
 *   }
 */
/**
 * @description
 * Generates `placeholder` content for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
 * @link css-tricks http://css-tricks.com/snippets/css/style-placeholder-text/
 *
 * @returns
 *    &::-webkit-input-placeholder {
 *        <content property 1>: <content value 1>;
 *        ...
 *        <content property n>: <content value n>;
 *    }
 *    &::-moz-placeholder {
 *        <content property 1>: <content value 1>;
 *        ...
 *        <content property n>: <content value n>;
 *    }
 *    &:-ms-input-placeholder {
 *        <content property 1>: <content value 1>;
 *        ...
 *        <content property n>: <content value n>;
 *    }
 *
 * @example
 *   .selector {
 *     @include x-placeholder {
 *         color: #bada55;
 *         font-weight: bold;
 *     }
 *   }
 */
/**
 * @description
 * This mixin enables you to use the CSS3 value `rem`, which lets you define
 * property sizes based on the root element's font-size.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/rem
 * @link spec http://www.w3.org/TR/css3-values/#relative0
 *
 * Note: Depending on the font-size of the root-element `rem` calculates a
 * property of a current element. The fallback solution accepts a
 * `default-font-size`-argument which is 16px by default.
 */
/*
 * Returns a number without unit. E.g. 30px -> 30
 * Borrowed from https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss
 * 
 * @param value {String}
 * @returns
 *   <Number>
 */
/*
 * Outputs properties that use rem with a px fallback.
 * It also takes px values and converts them to rem.
 *
 * @param property
 * @param values
 * @param default-font-size int optional
 * @returns
 *   <property>: <parsed value>px;
 *   <property>: <parsed value>rem;
 *
 * @example
 *   .selector {
 *     @include x-rem(font-size, 1.3);
 *     @include x-rem(padding, 20px);
 *   }
 */
/**
 * @description
 * Sass-mixin for CSS property `tab-size`, generates cross-browser-compatible
 * `tab-size` output.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css3-tabsize
 * @link spec http://dev.w3.org/csswg/css-text/#tab-size1
 *
 * @param value int optional
 * @default 4
 * @returns
 *   -moz-tab-size: <value>;
 *        tab-size: <value>;
 *
 * @example
 *   .selector {
 *     @include x-tab-size(4);
 *    }
 */
/**
 * @description
 * Generates cross-browser-compatible `transform` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/transforms2d http://caniuse.com/transforms3d
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transform: <values>;
 *       -ms-transform: <values>;
 *           transform: <values>;
 *
 * @example
 *   .selector {
 *     @include x-transform(rotate(1deg));
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `transition` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-transitions
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transition: <values>;
 *           transition: <values>;
 *
 * @example
 *   .selector {
 *     @include x-transition(background 0.3s ease-in);
 *   }
 */
/**
 * @description
 * Disables selection of content of a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/user-select-none
 *
 * @param value none|auto optional
 * @default none
 * @returns
 *   -webkit-user-select: <value>;
 *      -moz-user-select: <value>;
 *       -ms-user-select: <value>;
 *           user-select: <value>;
 *
 * @example
 *   .selector {
 *     @include x-user-select;
 *   }
 */
.spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: spin 2s infinite linear; }

.spin-slower, .music .music-section .music-tracks .music-track.playing .track-cover img {
  -webkit-animation: fa-spin 4s infinite linear;
  animation: spin 4s infinite linear; }

.pulse {
  -webkit-animation: spin 1s infinite steps(8);
  animation: spin 1s infinite steps(8); }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }
.music h2 {
  font-size: 22px;
  margin-bottom: 25px; }
.music .music-section {
  margin-bottom: 30px; }
  .music .music-section .music-tracks {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    .music .music-section .music-tracks .music-track {
      display: flex;
      margin-bottom: 10px;
      flex-basis: 100%;
      width: 100%;
      perspective: 1080px; }
      .music .music-section .music-tracks .music-track .track-cover {
        display: block;
        cursor: pointer;
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #eee;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        perspective: 350px;
        transform-origin: 50% 50%;
        overflow: hidden; }
        .music .music-section .music-tracks .music-track .track-cover .img-wrapper {
          position: absolute;
          width: 90px;
          height: 90px;
          top: 5px;
          left: 5px;
          overflow: hidden; }
          .music .music-section .music-tracks .music-track .track-cover .img-wrapper img {
            background-image: url(../img/menu-bg.png);
            background-size: cover;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0; }
        .music .music-section .music-tracks .music-track .track-cover::before {
          content: '';
          width: 100%;
          height: 100%;
          background: url(../img/cd-cover.png);
          background-size: cover;
          display: block;
          position: absolute;
          z-index: 1; }
        .music .music-section .music-tracks .music-track .track-cover::after {
          content: '';
          display: block;
          font-size: 26px;
          z-index: 3;
          position: absolute;
          bottom: 10px;
          right: 10px;
          height: 25px;
          width: 25px;
          margin-left: -5px;
          -webkit-transition: all 0.5s;
          transition: all 0.5s;
          background: url(../img/play.png) no-repeat 50% 50%;
          background-size: contain; }
        .music .music-section .music-tracks .music-track .track-cover:hover {
          -webkit-transform: rotateY(45deg);
          -ms-transform: rotateY(45deg);
          transform: rotateY(45deg); }
      .music .music-section .music-tracks .music-track .track-info {
        margin-left: 20px;
        flex: 1; }
        .music .music-section .music-tracks .music-track .track-info h4 {
          margin: 0 0 10px 0; }
      .music .music-section .music-tracks .music-track.playing .track-cover::after {
        background-image: url(../img/pause.png); }

.event {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee; }
  .event figure {
    margin-bottom: 20px; }
  .event:last-child {
    border-bottom: none; }

.videos .video {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee; }
  .videos .video h4 {
    margin-top: 0; }
  .videos .video .description {
    margin-bottom: 20px; }
  .videos .video:last-child {
    border-bottom: none; }

.directory-tree > ul {
  border: none !important; }
.directory-tree ul {
  list-style: none;
  padding: 0 0 0 20px;
  margin-left: 5px; }
  .directory-tree ul li {
    padding: 5px 0; }
    .directory-tree ul li::before {
      display: none; }
.directory-tree .directory-title {
  display: inline-block;
  width: 100%;
  padding: 5px 0;
  font-size: 20px;
  font-weight: 300;
  text-align: left; }
  .directory-tree .directory-title .fa {
    color: #ccc; }
.directory-tree .files {
  vertical-align: top; }
  .directory-tree .files li {
    vertical-align: top;
    display: inline-block;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    width: 200px;
    margin: 0 20px 20px 0;
    position: relative; }
    .directory-tree .files li h3 {
      margin-top: 10px;
      font-size: 12px;
      min-height: 30px; }
    .directory-tree .files li img {
      border: 1px solid #ccc;
      padding: 1px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      -webkit-transition: all 0.5s;
      transition: all 0.5s; }
    .directory-tree .files li h3 {
      -webkit-transition: all 0.5s;
      transition: all 0.5s; }
    .directory-tree .files li a {
      display: inline-block; }
      .directory-tree .files li a:hover {
        text-decoration: none; }
        .directory-tree .files li a:hover h3 {
          color: #B40010; }
        .directory-tree .files li a:hover img {
          border-color: #aaa; }

footer {
  background: #fff;
  padding: 30px 0;
  font-size: 14px;
  line-height: 1.5em; }
  footer .footer-header {
    font-weight: normal;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: 0 !important;
    color: #000;
    margin-bottom: 10px; }
    footer .footer-header:hover {
      background: transparent !important; }
  footer a {
    color: #aaa; }
  footer ul.nav {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    width: 100%; }
    footer ul.nav > li {
      flex-grow: 1;
      flex-basis: 0;
      padding: 0 20px; }
      footer ul.nav > li ul {
        list-style: none;
        padding: 0; }
      footer ul.nav > li.home {
        display: none; }
  footer .about {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    align-items: center; }
    footer .about address {
      margin: 0; }
    footer .about > div {
      margin-right: 50px; }

.is-md footer nav {
  width: 100%; }

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