/* ||||||||||||| RESET ||||||||||||| */
/* ====== Body ====== */
body { margin: 0; }

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

/* ||||||||||||| MAIN ||||||||||||| */
/* ====== Wrapper ====== */
.xpanda { width: 100%; margin: auto; clear: left; }
/* - Wrapper - Preloader - */
.xpanda.x-preloader { position: relative; height: 400px; overflow: hidden; }
.xpanda.x-preloader:before { content: ''; position: absolute; background: #ffffff url(../assets/spinner.gif) no-repeat 50% 50%; background-size: 34px; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; }

/* ====== Item Row Wrapper ====== */
.x-item-wrap { display: flex; clear: left; position: relative; }

/* ====== Item - Defaults ====== */
.x-item { float: left; position: relative; }
.x-item > a { display: block; position: relative; }
.x-item > a img { height: 200px; width: auto; display: block; }
/* ====== Item - Javascript Enabled ====== */
.x-initiated .x-item { width: auto; float: none; }
.x-initiated .x-item > a img { width: 100%; height: auto; opacity: 1; }

/* - Item - Hover - */
@media (min-width: 769px) {
    .x-initiated .x-item:hover > a img { opacity: 0.8; }
}

/* - Item - Is Active - */
.x-initiated .x-item.x-is-active > a img { opacity: 1; }

/* - Item - Is Not Active - */
.x-initiated .x-item.x-is-not-active { }

/* - Item - Lazyloader Enabled - */
.x-initiated.x-lazyload-thumbnail .x-item > a:before { content: ''; position: absolute; background: rgba(0, 0, 0, 0.5) url(../assets/spinner.gif) no-repeat 50% 50%; background-size: 34px; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; opacity: 1;
    -webkit-transition: opacity 0.4s ease-in-out 0.1s;
    -moz-transition: opacity 0.4s ease-in-out 0.1s;
    -ms-transition: opacity 0.4s ease-in-out 0.1s;
    -o-transition: opacity 0.4s ease-in-out 0.1s;
    transition: opacity 0.4s ease-in-out 0.1s;
}
.x-initiated.x-lazyload-thumbnail .x-item.x-is-loaded > a:before { opacity: 0; }

/* ====== Item Content ====== */
.x-item .x-content { display: none; }

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

/* ||||||||||||| SPACER ||||||||||||| */
/* ====== Spacer (Outside) - Javascript Disabled ====== */
.x-spacer-outside { float: left; width: 100%; background: #000000; color: #ffffff; text-align: center; padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* ====== Spacer (Outside) - Javascript Enabled ====== */
.x-spacer-outside.x-initiated { display: none; }

/* ====== Spacer (Inline) - Javascript Enabled ====== */
.x-spacer-inside { background: #000000; color: #ffffff; text-align: center; }
/* - Spacer (Inline) - Is Empty - */
.x-spacer-inside.x-spacer-empty { background: none; }

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

/* ||||||||||||| PLACEHOLDER ||||||||||||| */
/* ====== Placeholder ====== */
.x-placeholder { flex: 0 0 100%; position: relative; overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.x-placeholder-inner { position: relative; opacity: 0; }
/* - Placeholder - Is Expanded - */
.x-placeholder.x-is-expanded { height: 0; }
.x-placeholder.x-is-expanded .x-placeholder-inner { width: 100%; background: #CCCCCC; }
@media (min-width: 992px) {
    .x-placeholder.x-is-expanded .x-placeholder-inner { display: flex; }
    .x-placeholder.x-is-expanded .x-placeholder-inner .x-updated-content { flex: 1 0 auto; width: 100%; display: flex; }
}

/* ====== Placeholder Contents - Defaults ====== */
/* - Asset - Default */
.x-placeholder.x-is-expanded .x-asset { margin: 0; width: 100%; position: relative; }
.x-placeholder.x-is-expanded .x-asset.x-asset-left { width: 100%; order: 1; }
.x-placeholder.x-is-expanded .x-asset.x-asset-right { width: 100%; order: 2; }
.x-placeholder.x-is-expanded .x-asset img { width: 100%; height: auto; display: block; margin: 0 auto; position: relative; z-index: 0; }
@media (min-width: 992px) {
    .x-placeholder.x-is-expanded .x-asset.x-asset-left { width: 50%; flex: 1 0 auto; }
    .x-placeholder.x-is-expanded .x-asset.x-asset-right { width: 50%; flex: 1 0 auto; }
    .x-placeholder.x-is-expanded .x-asset.x-asset-center { width: 75%; margin-left: 12.5%; }
}
@media (min-width: 1200px) {
    .x-placeholder.x-is-expanded .x-asset.x-asset-center { width: 60%; margin-left: 20%; }
}
@media (min-width: 1400px) {
    .x-placeholder.x-is-expanded .x-asset.x-asset-center { width: 66.66667%; margin-left: 16.66667%; }
}
/* - Asset - Lazyloader Enabled */
.x-initiated.x-lazyload-asset .x-placeholder.x-is-expanded .x-asset:before { content: ''; display: block; position: absolute; opacity: 1; z-index: 10; width: 100%; height: 100%; top: 0; left: 0; background: url(../assets/spinner.gif) no-repeat 50% 50%; background-size: 34px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: opacity 0.4s ease-in-out 0.1s;
    -moz-transition: opacity 0.4s ease-in-out 0.1s;
    -ms-transition: opacity 0.4s ease-in-out 0.1s;
    -o-transition: opacity 0.4s ease-in-out 0.1s;
    transition: opacity 0.4s ease-in-out 0.1s;
}
.x-initiated.x-lazyload-asset .x-placeholder.x-is-expanded .x-asset.x-is-loaded:before { opacity: 0; }
.x-initiated.x-lazyload-asset .x-placeholder.x-is-expanded .x-asset.x-was-loaded:before { opacity: 0; }

/* - Info - */
.x-placeholder.x-is-expanded .x-info { padding-left: 20px; padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.x-placeholder.x-is-expanded .x-info img { width: 100%; height: auto; display: block; }
.x-placeholder.x-is-expanded .x-info.x-info-left { width: 100%; padding: 40px 20px 20px 20px; order: 1; }
.x-placeholder.x-is-expanded .x-info.x-info-right { width: 100%; padding: 0 20px 20px 20px; order: 2; }
.x-placeholder.x-is-expanded .x-info.x-info-center { width: 100%; margin: auto; padding: 40px 60px 40px 60px; }
@media (min-width: 768px) {
    .x-placeholder.x-is-expanded .x-info.x-info-center { padding: 60px 80px 60px 80px; }
}
@media (min-width: 992px) {
    .x-placeholder.x-is-expanded .x-info.x-info-left { width: 50%; }
    .x-placeholder.x-is-expanded .x-info.x-info-right { width: 50%; padding-top: 40px; }
}

/* ====== Placeholder Controls ====== */


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