/* ||||||||||||| MAIN ||||||||||||| */
/* ====== Font ====== */
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700');
/* ====== Wrapper ====== */
.xpanda { font-family: 'Nunito Sans', sans-serif; }
/* ====== Item Row Wrapper ====== */
.x-item-wrap { z-index: 0; }

/* ====== Item - Defaults ====== */
.x-item { background: #232629; }
.x-item > a .x-thumbnail-content { position: absolute; top: 50%; left: 50%; text-align: center; margin: 0; cursor: pointer; color: #ffffff; font-weight: 200;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/* ====== Item - Javascript Enabled ====== */
.x-initiated .x-item { overflow: hidden;
    -webkit-transition: background 0.2s ease-in-out 0s;
    -moz-transition: background 0.2s ease-in-out 0s;
    -ms-transition: background 0.2s ease-in-out 0s;
    -o-transition: background 0.2s ease-in-out 0s;
    transition: background 0.2s ease-in-out 0s;
}
.x-initiated .x-item > a img { backface-visibility: hidden; width: 101%;
    -webkit-transition: opacity 0.2s ease-in-out 0s;
    -moz-transition: opacity 0.2s ease-in-out 0s;
    -ms-transition: opacity 0.2s ease-in-out 0s;
    -o-transition: opacity 0.2s ease-in-out 0s;
    transition: opacity 0.2s ease-in-out 0s;
}
.x-initiated .x-item > a .x-thumbnail-content { opacity: 0; top: 150%; width: 100%; padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}

/* - Item - Hover - */
@media (min-width: 769px) {
    .x-initiated .x-item:hover > a img { opacity: 0.2; }
    .x-initiated .x-item:hover > a .x-thumbnail-content { opacity: 1; top: 50%; }
}

/* - Item - Is Active - */
.x-initiated .x-item.x-is-active > a img { opacity: 0.2; }
.x-initiated .x-item.x-is-active > a .x-thumbnail-content { opacity: 1; top: 50%; }

/* - Item - Is Active - Hover - */
@media (min-width: 769px) {
    .x-initiated .x-item.x-is-active:hover > a .x-thumbnail-content { top: 50%; }
}

/* - Item - Is Not Active - */
.x-initiated .x-item.x-is-not-active { background: #ffffff; }
.x-initiated .x-item.x-is-not-active > a img { opacity: 0.5; }

/* - Item - Is Not Active - Hover - */
@media (min-width: 769px) {
    .x-initiated .x-item.x-is-not-active:hover { background: #232629; }
    .x-initiated .x-item.x-is-not-active:hover > a img { opacity: 0.2; }
    .x-initiated .x-item.x-is-not-active:hover > a .x-thumbnail-content { opacity: 1; top: 50%; }
}

/* ---------------------------------------------------------------- */

/* ||||||||||||| BUTTON ||||||||||||| */
/* ====== Button Global ====== */
.x-button { text-decoration: none; height: 32px; line-height: 32px; padding: 0 16px; color: #ffffff; display: inline-block; opacity: 1; background: #131619; font-size: 12px; font-weight: 700; margin: 0 0 5px 0;
    -webkit-transition: background 0.2s ease-in-out 0s;
    -moz-transition: background 0.2s ease-in-out 0s;
    -ms-transition: background 0.2s ease-in-out 0s;
    -o-transition: background 0.2s ease-in-out 0s;
    transition: background 0.2s ease-in-out 0s;
}
.x-button i { margin-right: 6px; }
/* - Button - Hover - */
@media (min-width: 769px) {
    .x-button:hover { opacity: 0.8; }
}

/* ---------------------------------------------------------------- */

/* ||||||||||||| SPACER ||||||||||||| */
/* ====== Spacer (Outside) - Javascript Disabled ====== */
.x-spacer-outside { background: #232629; position: relative; height: 160px; }
/* ====== Spacer (Outside) - Javascript Enabled ====== */
.x-spacer-outside.x-initiated { }

/* ====== Spacer (Inline) - Javascript Enabled ====== */
.x-spacer-inside { position: relative; background: #232629; }
/* - Spacer (Inline) - Is Empty - */
.x-spacer-inside.x-spacer-empty { }

.x-spacer-outside .x-button,
.x-spacer-inside .x-button { position: absolute; top: 50%; left: 50%; font-size: 18px; height: 44px; line-height: 44px; padding: 0 20px; margin: 0;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------- */

/* ||||||||||||| PLACEHOLDER ||||||||||||| */
/* ====== Placeholder ====== */
.x-placeholder { overflow: visible; }
.x-indicator { width: 28px; height: 14px; }
.x-indicator:after { border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #ffffff; }
/* - Placeholder - Is Expanded - */
.x-placeholder.x-is-expanded { z-index: 1; }
.x-placeholder.x-is-expanded .x-placeholder-inner { background: #232629; }

/* ====== Placeholder Contents - Defaults ====== */
/* - Asset - Default */
.x-placeholder.x-is-expanded .x-asset { }
.x-placeholder.x-is-expanded .x-asset.x-asset-left { }
.x-placeholder.x-is-expanded .x-asset img { }
@media (min-width: 992px) {
    .x-placeholder.x-is-expanded .x-asset.x-asset-left { width: auto; flex: none; }
    .x-placeholder.x-is-expanded .x-asset.x-asset-left img { max-height: calc(100vh - 100px); width: auto; max-width: 700px; float: left; }
}
@media (min-width: 1200px) {
    .x-placeholder.x-is-expanded .x-asset.x-asset-left img { max-width: 900px; }
}

/* - Info - */
.x-placeholder.x-is-expanded .x-info .x-info-content { color: #ffffff; margin: 20px 0 0 0; }
.x-placeholder.x-is-expanded .x-info .x-info-content h3 { font-weight: 200; font-size: 24px; margin-bottom: 0; }
.x-placeholder.x-is-expanded .x-info .x-info-content small { font-weight: 300; font-size: 12px; }
.x-placeholder.x-is-expanded .x-info .x-info-content p { font-weight: 300; font-size: 16px; line-height: 1.6em; }
.x-placeholder.x-is-expanded .x-info .x-info-content a { color: #ffffff; }
@media (min-width: 992px) {
    .x-placeholder.x-is-expanded .x-info.x-info-right { position: relative; }
    .x-placeholder.x-is-expanded .x-info .x-info-content { position: absolute; top: 50%; left: auto; margin: 0; font-size: 18px; width: calc(100% - 40px);
        -moz-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
}
@media (min-width: 1200px) {
    .x-placeholder.x-is-expanded .x-info .x-info-content { }
}

/* ====== Placeholder Controls ====== */
/* - Control - Previous - */
.x-placeholder .x-prev { background-color: #131619; }
/* - Control - Next - */
.x-placeholder .x-next { background-color: #131619; }
/* - Control - Close - */
.x-placeholder .x-close { background-color: #131619; }

/* ---------------------------------------------------------------- */