/*
 * A partial implementation of the Ruby list functions from Compass:
 * https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb
 */
/*
 * A partial implementation of the Ruby constants functions from Compass:
 * https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/constants.rb
 */
/*
 * A partial implementation of the Ruby display functions from Compass:
 * https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/display.rb
 */
/**
 * @name font-size
 * @description
 *
 * Apply font-size with rem
 * Not all browsers support rem, IE8 doesn't
 * @usage
 * p {
 *  @include font-size(12px);
 * }
 */
/**
 * @name Background image with png and svg for retina fallback
 * @description
 *
 * Depends on modernizr.
 * When using this mix you must upload both default extension and svg
 *
 */
/*
 * @usage
 * @include keyframes(slide-down) {
 *  0% { opacity: 1; }
 *  90% { opacity: 0; }
 * }
 *
 * .element {
 *  width: 100px;
 *  height: 100px;
 *  background: black;
 *  @include animation('slide-down 5s 3');
 * }
 */
/**
 * @name Transition
 * @usage
 * a {
 *  @include transition(color .3s ease);
 * }
 */
/**
 * @name Opacity
 * @description
 *
 * Compatible with IE5+ usinf the alpha filter
 * @usage
 * p {
 *  @include opacity(0.8);
 * }
 */
/**
 * @name Clearfix
 * @description
 *
 * Implementation from Nicolas Gallagher https://twitter.com/necolas
 * @usage
 * .row {
 *  @extend %clearfix;
 * }
 */
.wrapper,
.row {
  *zoom: 1; }
  .wrapper:before,
  .row:before,
  .wrapper:after,
  .row:after {
    content: " ";
    display: table; }
  .wrapper:after,
  .row:after {
    clear: both; }

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

/*
 * Modules
 *
 * Global modules
 */
/*
 * Compass
 */
/*
* Screen devices
*/
/*
 * Colors
 */
/*
 * Brand colors */
/*
 * Table
 */
/*
 * Anchors
 */
/*
 * Typhography
 */
/*
 * Form
 */
/*
 * z-index
 */
/** Global background color for active items (e.g., navs or dropdowns) */
/**
 * Pi form
 */
/**
 * Reset
 */
/**
 * @description
 * 
 * Define the box-sizing rule to all elements
 * It's needed to ensure that the padding of elements is added withing their calculated dimensions
 */
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-size: 100%;
  color: #000000;
  font-family: "Source Sans Pro", sans-serif; }

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5; }

#page {
  font-size: 1em;
  /* equivalent to 16px */
  line-height: 1.25;
  /* equivalent to 20px */ }

@media (min-width: 43.75em) {
  #page {
    font-size: 1em;
    /* equivalent to 16px */
    line-height: 1.375;
    /* equivalent to 22px */ } }

h1 {
  font-size: 2em;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */ }

@media (min-width: 43.75em) {
  h1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    line-height: 1.125; } }

@media (min-width: 56.25em) {
  h1 {
    font-size: 3em;
    /* 3x body copy size = 48px */
    line-height: 1.05;
    /* keep to a multiple of the 20px line height and something more appropriate for display headings */ } }

h2 {
  font-size: 1.625em;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615;
  /* 30px / 26px */ }

@media (min-width: 43.75em) {
  h2 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    line-height: 1.25; } }

@media (min-width: 56.25em) {
  h2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25; } }

h3 {
  font-size: 1.375em;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364;
  /* 25px / 22px */ }

@media (min-width: 43.75em) {
  h3 {
    font-size: 1.5em;
    /* 1.5x body copy size = 24px */
    line-height: 1.25; } }

@media (min-width: 56.25em) {
  h3 {
    font-size: 1.75em;
    /* 1.75x body copy size = 28px */
    line-height: 1.25; } }

h4 {
  font-size: 1.125em;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111; }

@media (min-width: 43.75em) {
  h4 {
    line-height: 1.22222222;
    /* (22px / 18px */ } }

blockquote {
  font-size: 1.25em;
  /* 20px / 16px */
  line-height: 1.25;
  /* 25px / 20px */ }

@media (min-width: 43.75em) {
  blockquote {
    font-size: 1.5em;
    /* 24px / 16px = */
    line-height: 1.45833333;
    /* 35px / 24px */ } }

p {
  margin: 0 0 10px; }

/*
h1 {
    @include adjust-font-size-to( $h1-font-size );
    @include leader(1, $h1-font-size);
    @include trailer(1, $h1-font-size);
}

h2 {
    @include adjust-font-size-to( $h2-font-size );
    @include leader(1, $h2-font-size);
    @include trailer(1, $h2-font-size);
}

h3 {
    @include adjust-font-size-to( $h3-font-size );
    @include leader(1, $h3-font-size);
    @include trailer(1, $h3-font-size);
}

h4 {
    @include adjust-font-size-to( $h4-font-size );
    @include leader(1, $h4-font-size);
    @include trailer(1, $h4-font-size);
}

h5 {
    @include adjust-font-size-to( $h5-font-size );
    @include leader(1, $h5-font-size);
    @include trailer(1, $h5-font-size);
}

h6 {
    @include adjust-font-size-to( $h6-font-size );
    @include leader(1, $h6-font-size);
    @include trailer(1, $h6-font-size);
}
*/
b,
strong {
  font-weight: bold; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

small {
  font-size: 80%; }

/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }

/**
 * 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 Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none; }

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

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

a.pi-link--active {
  color: #fff;
  background-color: #0e57c8; }

/**
 * @name Responsive
 *
 * @description
 * 
 * Responsive utilties that grid use
 */
img {
  width: auto;
  max-width: 100%;
  height: auto;
  /* !important */ }

/**
 * @name Grid
 *
 * @description
 * 
 * The grid implementation used in pi applications.
 * Classes related with this may be found in responsive.sass
 *
 * This grid implementation was based on a tutsplus tutorial
 * @url http://webdesign.tutsplus.com/tutorials/a-simple-responsive-grid-made-even-better-with-sass--cms-21540
 */
/*
 * Pi is mobile first, so 100% is applied to mobiles and largers screens are modified
 */
.wrapper {
  width: 100%;
  margin: 0 auto; }

/*
 * All rows elements contain columns, even it's a button instead of a regular div
 * This rule is applied to clear classes and wrapper 
 */
.wrapper:after,
.row:after {
  content: "";
  display: table;
  clear: both; }

/*
 * All columns have a padding of 1 to form the gutter and some vertical space
 */
[class*='column-'] {
  float: left;
  padding: 1em;
  width: 100%;
  min-height: 1px;
  /* in cases when the column doesn't have any content, don't ask how but it's covered */ }

button::-moz-focus-inner {
  /* remove extra button spacing for Mozilla Firefox */
  border: 0;
  padding: 0; }

/*
 *Button states theme  */
.button-primary {
  -webkit-border-radius: first-value-of(4px) first-value-of(4px);
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  text-align: center;
  border: "none";
  padding: 6px 12px;
  border: 0;
  cursor: pointer;
  background-color: #0e57c8;
  color: #000000; }
  .button-primary:active, .button-primary:focus {
    outline: 0; }
  .button-primary:hover {
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
    cursor: pointer; }

.button-secondary {
  -webkit-border-radius: first-value-of(4px) first-value-of(4px);
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  text-align: center;
  border: "none";
  padding: 6px 12px;
  border: 0;
  cursor: pointer;
  background-color: #01a1c5;
  color: #000000; }
  .button-secondary:active, .button-secondary:focus {
    outline: 0; }
  .button-secondary:hover {
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
    cursor: pointer; }

.button-danger {
  -webkit-border-radius: first-value-of(4px) first-value-of(4px);
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  text-align: center;
  border: "none";
  padding: 6px 12px;
  border: 0;
  cursor: pointer;
  background-color: #da3826;
  color: #000000; }
  .button-danger:active, .button-danger:focus {
    outline: 0; }
  .button-danger:hover {
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
    cursor: pointer; }

.button-info {
  -webkit-border-radius: first-value-of(4px) first-value-of(4px);
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  text-align: center;
  border: "none";
  padding: 6px 12px;
  border: 0;
  cursor: pointer;
  background-color: yellow;
  color: #000000; }
  .button-info:active, .button-info:focus {
    outline: 0; }
  .button-info:hover {
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
    cursor: pointer; }

.button-highlight {
  -webkit-border-radius: first-value-of(4px) first-value-of(4px);
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  text-align: center;
  border: "none";
  padding: 6px 12px;
  border: 0;
  cursor: pointer;
  background-color: #da3826;
  color: #000000; }
  .button-highlight:active, .button-highlight:focus {
    outline: 0; }
  .button-highlight:hover {
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
    cursor: pointer; }

.button-default {
  -webkit-border-radius: first-value-of(4px) first-value-of(4px);
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  text-align: center;
  border: "none";
  padding: 6px 12px;
  border: 0;
  cursor: pointer;
  background-color: #f6f6f6;
  color: #000000; }
  .button-default:active, .button-default:focus {
    outline: 0; }
  .button-default:hover {
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
    cursor: pointer; }

.button-block {
  display: block;
  width: 100%; }

/*
 * Form controls
 */
.pi-range {
  -webkit-appearance: none;
  width: 160px;
  height: 20px;
  margin: 10px 50px;
  background: linear-gradient(to right, #31b674 0%, #16a085 100%);
  background-size: 150px 10px;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: none;
  zoom: 130%;
  display: block;
  margin: auto;
  margin-bottom: 30px; }

input[type="text"], input[type="email"], input[type="password"] {
  max-width: 100%; }

/**
 * @name Form
 *
 * @example
 *
 * <form class="form">
 *  <div class="form-group">
 *    <input type="text" class="form-control" />
 *  </div>
 *  <div class="form-footer">
 *    <button class="form-control">Ok</button>
 *  </div>
 * </form>
 *
 * .form {
 *    @include pi-form();
 * }
 * .form-group {
 *    @include pi-form-group();
 * }
 * .form-footer {
 *    @include pi-form-footer();
 * }
 * .form-control {
 *    @include pi-form-control();
 * }
 */
/**
 * @name Form group
 *
 * @description
 * A group represents a line or a column
 *
 */
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0; }

legend {
  display: block;
  width: 100%;
  padding: 0;
  /* margin-bottom: $line-height-computed; */
  font-size: 24px;
  line-height: inherit;
  color: #000000;
  border: 0;
  border-bottom: 1px solid #000000; }

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold; }

input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

input[type="radio"],
input[type="checkbox"] {
  /*margin: 4px 0 0;*/
  margin-top: 1px \9;
  line-height: normal; }

input[type="file"] {
  display: block; }

input[type="range"] {
  display: block;
  width: 100%; }

select[multiple],
select[size] {
  height: auto; }

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }

.pi-form-group-btn {
  display: flex; }
  .pi-form-group-btn > .pi-form__group, .pi-form-group-btn > .pi-form__btn-group {
    flex: 1; }
  .pi-form-group-btn input[type="text"], .pi-form-group-btn input[type="email"], .pi-form-group-btn input[type="date"], .pi-form-group-btn input[type="password"], .pi-form-group-btn .pi-form__control, .pi-form-group-btn .ui-select-container {
    border: 0;
    min-width: 100%; }
    .pi-form-group-btn input[type="text"]:focus, .pi-form-group-btn input[type="email"]:focus, .pi-form-group-btn input[type="date"]:focus, .pi-form-group-btn input[type="password"]:focus, .pi-form-group-btn .pi-form__control:focus, .pi-form-group-btn .ui-select-container:focus {
      outline: 0; }
  .pi-form-group-btn button {
    overflow: visible;
    position: relative;
    min-width: 100%; }

select {
  -webkit-border-radius: first-value-of(4px) first-value-of(4px);
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  border: solid 1px #ffffff;
  background-color: #31b674;
  color: #ffffff; }

h1 {
  font-size: 32px; }

h2 {
  font-size: 24px; }

h3 {
  font-size: 18.72px; }

a {
  color: #0e57c8;
  text-decoration: none; }
  a:hover {
    color: #093881;
    text-decoration: none; }

.select-wrapper select {
  padding: 5px;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none; }

.select-wrapper {
  overflow: hidden; }

input[type="text"], input[type="email"], input[type="password"], input[type="button"], input[type="submit"], button, select, textarea {
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
  line-height: 20px; }

.pi-form__group {
  z-index: 9;
  color: #666666;
  margin-bottom: 15px; }
  .pi-form__group::-webkit-input-placeholder {
    color: #666666;
    font-style: "italic"; }
  .pi-form__group:-moz-placeholder {
    color: #666666;
    font-style: "italic"; }
  .pi-form__group::-moz-placeholder {
    color: #666666;
    font-style: "italic"; }
  .pi-form__group:-ms-input-placeholder {
    color: #666666;
    font-style: "italic"; }

.pi-form__footer {
  z-index: 9;
  color: #666666;
  margin-bottom: 15px; }
  .pi-form__footer::-webkit-input-placeholder {
    color: #666666;
    font-style: "italic"; }
  .pi-form__footer:-moz-placeholder {
    color: #666666;
    font-style: "italic"; }
  .pi-form__footer::-moz-placeholder {
    color: #666666;
    font-style: "italic"; }
  .pi-form__footer:-ms-input-placeholder {
    color: #666666;
    font-style: "italic"; }

.pi-form__btn-group, .pi-form__groups {
  display: flex; }
  .pi-form__btn-group > .pi-form__group, .pi-form__btn-group > .pi-form__btn-group, .pi-form__groups > .pi-form__group, .pi-form__groups > .pi-form__btn-group {
    flex: 1; }
  .pi-form__btn-group input[type="text"], .pi-form__btn-group input[type="email"], .pi-form__btn-group input[type="date"], .pi-form__btn-group input[type="password"], .pi-form__btn-group .pi-form__control, .pi-form__btn-group .ui-select-container, .pi-form__groups input[type="text"], .pi-form__groups input[type="email"], .pi-form__groups input[type="date"], .pi-form__groups input[type="password"], .pi-form__groups .pi-form__control, .pi-form__groups .ui-select-container {
    border: 0;
    min-width: 100%; }
    .pi-form__btn-group input[type="text"]:focus, .pi-form__btn-group input[type="email"]:focus, .pi-form__btn-group input[type="date"]:focus, .pi-form__btn-group input[type="password"]:focus, .pi-form__btn-group .pi-form__control:focus, .pi-form__btn-group .ui-select-container:focus, .pi-form__groups input[type="text"]:focus, .pi-form__groups input[type="email"]:focus, .pi-form__groups input[type="date"]:focus, .pi-form__groups input[type="password"]:focus, .pi-form__groups .pi-form__control:focus, .pi-form__groups .ui-select-container:focus {
      outline: 0; }
  .pi-form__btn-group button, .pi-form__groups button {
    overflow: visible;
    position: relative;
    min-width: 100%; }

.pi-form__control {
  width: 100%;
  padding: 6px 12px;
  background-color: transparent;
  color: #666666;
  border: solid 1px #8d8f9c;
  z-index: 8; }
  .pi-form__control:focus {
    background-color: #f6f6f6;
    outline-color: #ffffff; }

.modal-open {
  overflow: hidden; }

.modal {
  display: none;
  overflow: auto;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0; }
  .modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -moz-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transform: "0.3s ease-out";
    -moz-transform: "0.3s ease-out";
    -ms-transform: "0.3s ease-out";
    -o-transform: "0.3s ease-out";
    transform: "0.3s ease-out"; }
  .modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); }

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px; }

.modal-content {
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 37px;
  -webkit-box-shadow: compact(0 3px 9px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false, false);
  -moz-box-shadow: compact(0 3px 9px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false, false);
  box-shadow: compact(0 3px 9px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false, false);
  background-clip: padding-box;
  outline: none; }

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000; }
  .modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0); }
  .modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=50); }

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 16.42857px; }

.modal-header .close {
  margin-top: -2px; }

.modal-title {
  margin: 0;
  line-height: 1.42857; }

.modal-body {
  position: relative;
  padding: 20px; }

.modal-footer {
  margin-top: 15px;
  padding: 19px 20px 20px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
  overflow: hidden;
  *zoom: 1; }
  .modal-footer .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0; }
  .modal-footer .btn-group .btn + .btn {
    margin-left: -1px; }
  .modal-footer .btn-block + .btn-block {
    margin-left: 0; }

@media (min-width: 500px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto; }
  .modal-content {
    -webkit-box-shadow: compact(0 5px 15px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false, false);
    -moz-box-shadow: compact(0 5px 15px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false, false);
    box-shadow: compact(0 5px 15px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false, false); }
  .modal-sm {
    width: 300px; }
  /*!important*/ }

@media (min-width: 1024px) {
  .modal-dialog {
    width: 900px; } }

.pi-footer__wrapper {
  overflow: hidden;
  *zoom: 1;
  background-color: #8d8f9c;
  color: #fff;
  padding: 15px; }

.pi-card__player {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0; }
  .pi-card__player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: solid 6px #e1e1e1; }

.pi-card {
  margin-bottom: 15px; }
  .pi-card .pi-card__content {
    display: none; }

.pi-card--hover .pi-card__content {
  display: block; }

.pi-card__photo-img {
  width: 100%;
  margin-bottom: 8px; }
  .pi-card__photo-img img {
    max-width: 100%; }

.pi-card__date {
  color: #4d4d4d;
  padding: 5px 5px;
  font-size: 0.6em; }

.pi-card__content {
  font-size: 0.8em;
  position: absolute;
  padding: 5px 5px;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(246, 246, 246, 0.86); }

p.pi-card__content {
  margin: 0; }

.pi-card__gallery {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto; }
  .pi-card__gallery:after {
    content: " ";
    display: block;
    clear: both; }

.pi-card__gallery-item {
  width: 21.05263%;
  float: left;
  margin-right: 5.26316%; }
  .pi-card__gallery-item:nth-child(4n) {
    width: 21.05263%;
    float: right;
    margin-right: 0; }

.pi-card__gallery-item-avatar {
  max-width: 100%; }

.pi-card__thumb {
  position: relative;
  min-height: 40px; }

.pi-card__thumb-anchor {
  display: block; }

.pi-card__title {
  padding: 5px 5px; }

a.pi-card__title {
  display: block; }

.panel {
  margin-bottom: 22px;
  border: 1px solid transparent;
  border-radius: 25px;
  -webkit-box-shadow: compact(0 1px 1px rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false, false);
  -moz-box-shadow: compact(0 1px 1px rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false, false);
  box-shadow: compact(0 1px 1px rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false, false); }

.panel-primary {
  border: solid 2px #0e57c8; }
  .panel-primary > .panel-heading {
    background-color: #0e57c8;
    color: #000000; }

.panel-secondary {
  border: solid 2px #01a1c5; }
  .panel-secondary > .panel-heading {
    background-color: #01a1c5;
    color: #000000; }

.panel-danger {
  border: solid 2px #da3826; }
  .panel-danger > .panel-heading {
    background-color: #da3826;
    color: #000000; }

.panel-info {
  border: solid 2px yellow; }
  .panel-info > .panel-heading {
    background-color: yellow;
    color: #000000; }

.panel-highlight {
  border: solid 2px #da3826; }
  .panel-highlight > .panel-heading {
    background-color: #da3826;
    color: #000000; }

.panel-default {
  border: solid 2px #f6f6f6; }
  .panel-default > .panel-heading {
    background-color: #f6f6f6;
    color: #000000; }

.panel-body {
  padding: 15px;
  overflow: hidden;
  *zoom: 1; }

.panel-heading {
  padding: 10px 15px;
  border: 1px solid transparent; }

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  color: inherit; }

.list-group, .list-group-primary, .list-group-secondary, .list-group-danger, .list-group-info, .list-group-highlight, .list-group-default {
  padding-left: 0px; }
  .list-group > li, .list-group-primary > li, .list-group-secondary > li, .list-group-danger > li, .list-group-info > li, .list-group-highlight > li, .list-group-default > li, .list-group > .list-group__item, .list-group-primary > .list-group__item, .list-group-secondary > .list-group__item, .list-group-danger > .list-group__item, .list-group-info > .list-group__item, .list-group-highlight > .list-group__item, .list-group-default > .list-group__item {
    overflow: hidden;
    *zoom: 1;
    padding: 15px;
    position: relative;
    display: block;
    margin-bottom: -1px;
    /* the border */
    border: solid 1px #f6f6f6;
    background-color: #fff; }
    .list-group > li > a, .list-group-primary > li > a, .list-group-secondary > li > a, .list-group-danger > li > a, .list-group-info > li > a, .list-group-highlight > li > a, .list-group-default > li > a, .list-group > .list-group__item > a, .list-group-primary > .list-group__item > a, .list-group-secondary > .list-group__item > a, .list-group-danger > .list-group__item > a, .list-group-info > .list-group__item > a, .list-group-highlight > .list-group__item > a, .list-group-default > .list-group__item > a {
      display: block; }
    .list-group > li:first-child, .list-group-primary > li:first-child, .list-group-secondary > li:first-child, .list-group-danger > li:first-child, .list-group-info > li:first-child, .list-group-highlight > li:first-child, .list-group-default > li:first-child, .list-group > .list-group__item:first-child, .list-group-primary > .list-group__item:first-child, .list-group-secondary > .list-group__item:first-child, .list-group-danger > .list-group__item:first-child, .list-group-info > .list-group__item:first-child, .list-group-highlight > .list-group__item:first-child, .list-group-default > .list-group__item:first-child {
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px; }
    .list-group > li:hover, .list-group-primary > li:hover, .list-group-secondary > li:hover, .list-group-danger > li:hover, .list-group-info > li:hover, .list-group-highlight > li:hover, .list-group-default > li:hover, .list-group > .list-group__item:hover, .list-group-primary > .list-group__item:hover, .list-group-secondary > .list-group__item:hover, .list-group-danger > .list-group__item:hover, .list-group-info > .list-group__item:hover, .list-group-highlight > .list-group__item:hover, .list-group-default > .list-group__item:hover {
      background-color: #f6f6f6;
      cursor: pointer; }
  .list-group > .list-group__item-primary, .list-group-primary > .list-group__item-primary, .list-group-secondary > .list-group__item-primary, .list-group-danger > .list-group__item-primary, .list-group-info > .list-group__item-primary, .list-group-highlight > .list-group__item-primary, .list-group-default > .list-group__item-primary {
    background-color: #0e57c8;
    color: #000000; }
    .list-group > .list-group__item-primary a, .list-group-primary > .list-group__item-primary a, .list-group-secondary > .list-group__item-primary a, .list-group-danger > .list-group__item-primary a, .list-group-info > .list-group__item-primary a, .list-group-highlight > .list-group__item-primary a, .list-group-default > .list-group__item-primary a {
      color: #000000; }
  .list-group > .list-group__item-secondary, .list-group-primary > .list-group__item-secondary, .list-group-secondary > .list-group__item-secondary, .list-group-danger > .list-group__item-secondary, .list-group-info > .list-group__item-secondary, .list-group-highlight > .list-group__item-secondary, .list-group-default > .list-group__item-secondary {
    background-color: #01a1c5;
    color: #000000; }
    .list-group > .list-group__item-secondary a, .list-group-primary > .list-group__item-secondary a, .list-group-secondary > .list-group__item-secondary a, .list-group-danger > .list-group__item-secondary a, .list-group-info > .list-group__item-secondary a, .list-group-highlight > .list-group__item-secondary a, .list-group-default > .list-group__item-secondary a {
      color: #000000; }
  .list-group > .list-group__item-danger, .list-group-primary > .list-group__item-danger, .list-group-secondary > .list-group__item-danger, .list-group-danger > .list-group__item-danger, .list-group-info > .list-group__item-danger, .list-group-highlight > .list-group__item-danger, .list-group-default > .list-group__item-danger {
    background-color: #da3826;
    color: #000000; }
    .list-group > .list-group__item-danger a, .list-group-primary > .list-group__item-danger a, .list-group-secondary > .list-group__item-danger a, .list-group-danger > .list-group__item-danger a, .list-group-info > .list-group__item-danger a, .list-group-highlight > .list-group__item-danger a, .list-group-default > .list-group__item-danger a {
      color: #000000; }
  .list-group > .list-group__item-info, .list-group-primary > .list-group__item-info, .list-group-secondary > .list-group__item-info, .list-group-danger > .list-group__item-info, .list-group-info > .list-group__item-info, .list-group-highlight > .list-group__item-info, .list-group-default > .list-group__item-info {
    background-color: yellow;
    color: #000000; }
    .list-group > .list-group__item-info a, .list-group-primary > .list-group__item-info a, .list-group-secondary > .list-group__item-info a, .list-group-danger > .list-group__item-info a, .list-group-info > .list-group__item-info a, .list-group-highlight > .list-group__item-info a, .list-group-default > .list-group__item-info a {
      color: #000000; }
  .list-group > .list-group__item-highlight, .list-group-primary > .list-group__item-highlight, .list-group-secondary > .list-group__item-highlight, .list-group-danger > .list-group__item-highlight, .list-group-info > .list-group__item-highlight, .list-group-highlight > .list-group__item-highlight, .list-group-default > .list-group__item-highlight {
    background-color: #da3826;
    color: #000000; }
    .list-group > .list-group__item-highlight a, .list-group-primary > .list-group__item-highlight a, .list-group-secondary > .list-group__item-highlight a, .list-group-danger > .list-group__item-highlight a, .list-group-info > .list-group__item-highlight a, .list-group-highlight > .list-group__item-highlight a, .list-group-default > .list-group__item-highlight a {
      color: #000000; }
  .list-group > .list-group__item-default, .list-group-primary > .list-group__item-default, .list-group-secondary > .list-group__item-default, .list-group-danger > .list-group__item-default, .list-group-info > .list-group__item-default, .list-group-highlight > .list-group__item-default, .list-group-default > .list-group__item-default {
    background-color: #f6f6f6;
    color: #000000; }
    .list-group > .list-group__item-default a, .list-group-primary > .list-group__item-default a, .list-group-secondary > .list-group__item-default a, .list-group-danger > .list-group__item-default a, .list-group-info > .list-group__item-default a, .list-group-highlight > .list-group__item-default a, .list-group-default > .list-group__item-default a {
      color: #000000; }
  .list-group > .list-group__item-active, .list-group-primary > .list-group__item-active, .list-group-secondary > .list-group__item-active, .list-group-danger > .list-group__item-active, .list-group-info > .list-group__item-active, .list-group-highlight > .list-group__item-active, .list-group-default > .list-group__item-active {
    background-color: #0e57c8;
    color: #000000;
    border: #0e57c8; }
    .list-group > .list-group__item-active a, .list-group-primary > .list-group__item-active a, .list-group-secondary > .list-group__item-active a, .list-group-danger > .list-group__item-active a, .list-group-info > .list-group__item-active a, .list-group-highlight > .list-group__item-active a, .list-group-default > .list-group__item-active a {
      color: #000000; }

.list-group-primary > li, .list-group-primary > .list-group__item {
  background-color: #0e57c8;
  color: #000000; }

.list-group-secondary > li, .list-group-secondary > .list-group__item {
  background-color: #01a1c5;
  color: #000000; }

.list-group-danger > li, .list-group-danger > .list-group__item {
  background-color: #da3826;
  color: #000000; }

.list-group-info > li, .list-group-info > .list-group__item {
  background-color: yellow;
  color: #000000; }

.list-group-highlight > li, .list-group-highlight > .list-group__item {
  background-color: #da3826;
  color: #000000; }

.list-group-default > li, .list-group-default > .list-group__item {
  background-color: #f6f6f6;
  color: #000000; }

.list-group__item > .avatar {
  max-width: 15%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: solid 1px #f6f6f6;
  float: left; }

.list-group__item > .button, .list-group__item > .badge {
  float: right; }

.page-view__wrapper {
  overflow: hidden;
  *zoom: 1; }

.page-view__side {
  overflow: hidden;
  *zoom: 1; }

.page-view__content {
  overflow: hidden;
  *zoom: 1; }

@media (min-width: 1200px) {
  .page-view__content.page-view__content--right-side {
    width: 47.36842%;
    float: left;
    margin-right: 5.26316%; } }

@media (min-width: 1200px) {
  .page-view__content--right-side + .page-view__side {
    width: 21.05263%;
    float: right;
    margin-right: 0; } }

.page-view__wrapper {
  max-width: 95%;
  margin-left: auto;
  margin-right: auto; }
  .page-view__wrapper:after {
    content: " ";
    display: block;
    clear: both; }

@media (min-width: 1200px) {
  .page-view__side {
    width: 21.05263%;
    float: left;
    margin-right: 5.26316%; } }

@media (min-width: 1200px) {
  .page-view__content {
    width: 73.68421%;
    float: right;
    margin-right: 0; } }

.page-list__wrapper {
  max-width: 95%;
  margin-left: auto;
  margin-right: auto; }
  .page-list__wrapper:after {
    content: " ";
    display: block;
    clear: both; }

.page-list__head {
  margin-bottom: 15px; }

@media (min-width: 1200px) {
  .page-list__side {
    width: 21.05263%;
    float: left;
    margin-right: 5.26316%; } }

@media (min-width: 1200px) {
  .page-list__content {
    width: 73.68421%;
    float: right;
    margin-right: 0; } }

@media (min-width: 1200px) {
  .page-list__content + .page-list__side {
    width: 47.36842%;
    float: right;
    margin-right: 0; } }

.pi-nav__brand {
  border: 0;
  float: left; }
  .pi-nav__brand > img {
    height: 40px; }

.pi-nav {
  font-weight: bold;
  font-sie: 16px;
  min-height: 40px;
  /*margin-bottom: $component-padding;*/
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  position: relative;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto; }
  .pi-nav ul.pi-nav__list-mobile, .pi-nav .pi-nav__brand {
    display: initial;
    -webkit-flex: 50% 1; }
  .pi-nav
ul {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    display: none;
    -webkit-flex: 100%; }
  .pi-nav.pi__nav--collapsed ul {
    display: block; }
  .pi-nav ul.pi-nav__list-mobile {
    display: block;
    float: right; }
  @media (min-width: 400px) {
    .pi-nav {
      webkit-flex-direction: none;
      -webkit-flex-wrap: nowrap; }
      .pi-nav ul.pi-nav__list-mobile {
        display: none; }
      .pi-nav ul {
        display: initial;
        -webkit-flex: none; }
      .pi-nav .pi-nav__brand {
        -webkit-flex: none; } }
  @media (min-width: 1200px) {
    .pi-nav {
      webkit-flex-direction: none;
      -webkit-flex-wrap: nowrap; }
      .pi-nav ul.pi-nav__list-mobile {
        display: none; }
      .pi-nav ul {
        display: initial;
        -webkit-flex: none; }
      .pi-nav .pi-nav__brand {
        -webkit-flex: none; } }
  .pi-nav li {
    font-size: 16px;
    line-height: 20px;
    display: block;
    width: 100%; }
    @media (min-width: 400px) {
      .pi-nav li {
        display: initial;
        width: initial; } }
    @media (min-width: 1200px) {
      .pi-nav li {
        display: initial;
        width: initial; } }
  .pi-nav
ul li:hover > ul {
    display: block; }
  .pi-nav
ul a {
    display: block;
    text-decoration: none;
    color: #0e57c8;
    padding: 0 15px; }
    .pi-nav
ul a:hover {
      color: #0e57c8; }
  .pi-nav
ul li {
    color: #0e57c8;
    position: relative;
    float: left;
    margin: 0;
    padding: 0; }
  .pi-nav
ul ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    padding: 0;
    z-index: 5000;
    background-color: #f6f6f6; }
  .pi-nav
ul ul li {
    float: none;
    width: 200px; }
  .pi-nav ul ul > li > a, .pi-nav
ul ul > li > span {
    line-height: 120%;
    padding: 10px 12px;
    display: block; }
    .pi-nav ul ul > li > a:hover, .pi-nav
ul ul > li > span:hover {
      background-color: white;
      color: #000; }
  .pi-nav
ul ul ul {
    top: 0;
    left: 100%; }

.pi-nav__wrapper {
  background-color: #f6f6f6;
  z-index: 10000; }

.pi-nav__link-active, a.pi-nav__link-active, ul li a.pi-nav__link-active {
  color: #000;
  background-color: transparent;
  font-weight: 400 !important; }

.pi-nav__wrapper--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; }

.pi-breadcrumb {
  background-color: #f6f6f6;
  color: #8d8f9c;
  /*min-height: $pi-breadcrumb-height;*/
  margin-bottom: 1em; }
  .pi-breadcrumb button, .pi-breadcrumb a {
    color: #8d8f9c; }

.pi-breadcrumb__wrapper {
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
  /*
   * responsive ($pi-breadcrumb-height / 2) - $base-font-size
   */ }
  .pi-breadcrumb__wrapper:after {
    content: " ";
    display: block;
    clear: both; }
  @media (min-width: 1200px) {
    .pi-breadcrumb__wrapper {
      padding-left: 7%; } }

.pi-breadcrumb__side {
  width: 37.5%;
  float: left;
  margin-right: 4.16667%; }

.pi-breadcrumb__feed {
  width: 16.66667%;
  float: left;
  margin-right: 4.16667%;
  text-align: center; }

.pi-breadcrumb__nav {
  margin: 5px 0px;
  width: 37.5%;
  float: right;
  margin-right: 0;
  text-align: right; }
  .pi-breadcrumb__nav button {
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    float: right;
    margin-left: 6px; }

.pi-breadcrumb__name {
  font-size: 1.3em; }

body {
  background: #fff;
  color: #333;
  font-family: Raleway;
  background-color: #F7EED6; }

.wrapper {
  margin: 2em auto;
  -webkit-border-radius: 3px;
  max-width: 1000px;
  box-sizing: border-box; }

.intro-text {
  text-align: center;
  color: #d3b15f;
  font-weight: bold; }

.intro-text > img {
  margin-bottom: 2em; }

a, a:active, a:hover, a:visited {
  color: #333; }

img {
  max-width: 100%; }

.logo {
  margin-top: 2em;
  color: #333;
  width: 100%; }

.logo img {
  margin-left: auto;
  margin-right: auto;
  display: block; }

.grid > div, .grid > .grid-col {
  padding: 1em;
  box-sizing: border-box;
  margin-right: 1%;
  text-align: center;
  display: block;
  margin-bottom: 1em; }

.grid-cold {
  text-decoration: none; }

@media screen and (min-width: 900px) {
  .grid > div, .grid > .grid-col {
    width: 24%;
    float: left;
    box-sizing: border-box;
    margin-bottom: 0px; } }

/**
 * 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 are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.cf:after {
  clear: both; }

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
  *zoom: 1; }

#footer {
  font-size: 0.8em;
  padding: 1em 10em;
  margin: auto;
  box-sizing: border-box;
  text-align: center; }