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

/* ====== Item - Defaults ====== */
.x-item { background: #484b5f; }
/* ====== Item - Javascript Enabled ====== */
.x-initiated .x-item { }
.x-initiated .x-item > a img { backface-visibility: hidden;
    -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;
}

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

/* - Item - Is Active - */
.x-initiated .x-item.x-is-active:after { content: ''; display: block; position: absolute; bottom: -2px; left: 0; width: 100%; height: 42px; background: #484b5f; }
.x-initiated .x-item.x-is-active > a img { opacity: 1; }

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

/* - Item - Is Not Active - */
.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 > a img { opacity: 0.8; }
}

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

/* ||||||||||||| PLACEHOLDER ||||||||||||| */
/* ====== Placeholder ====== */
.x-placeholder { overflow: visible; }
.x-indicator { height: 30px; }
.x-indicator:after { content: '\f107'; color: #ffffff; font-family: 'FontAwesome'; font-size: 20px; text-align: center; border: none; width: 100%; height: 100%; }

/* - Placeholder - Is Expanded - */
.x-placeholder.x-is-expanded { z-index: 1; float: left; }
.x-placeholder.x-is-expanded .x-placeholder-inner { background: #484b5f; }

/* ====== Placeholder Contents - Defaults ====== */
/* - Info - */
.x-placeholder.x-is-expanded .x-info { color: #ffffff; }
.x-placeholder.x-is-expanded .x-info h3 { font-weight: 300; font-size: 32px; margin-bottom: 10px; }
.x-placeholder.x-is-expanded .x-info small { font-weight: 600; font-size: 13px; }
.x-placeholder.x-is-expanded .x-info p { font-weight: 300; font-size: 18px; line-height: 1.3em; }
.x-placeholder.x-is-expanded .x-info p a { color: #ffffff; }
.x-placeholder.x-is-expanded .x-info.x-info-center { padding: 20px 30px 0 30px; }

/* - Info - Social Links */
.x-placeholder.x-is-expanded .x-info ul.social-links { margin: 30px 0 0 0; padding: 20px 0; list-style: none; width: calc(100% + 60px); position: relative; left: -30px; text-align: center; background: rgba(0, 0, 0, 0.2); }
.x-placeholder.x-is-expanded .x-info ul.social-links li { display: inline-block; margin: 0 20px; }
.x-placeholder.x-is-expanded .x-info ul.social-links li a { position: relative; text-decoration: none; text-align: center; color: #ffffff; width: 100%; float: left; font-size: 30px; display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* ====== Placeholder Controls ====== */
/* - Control - Previous - */
.x-placeholder .x-prev { display: none; }
/* - Control - Next - */
.x-placeholder .x-next { display: none; }
/* - Control - Close - */
.x-placeholder .x-close { background-color: rgba(0, 0, 0, 0.2); right: 20px; top: 20px;
    -webkit-border-top-left-radius: 50%;
    -webkit-border-top-right-radius: 50%;
    -webkit-border-bottom-right-radius: 50%;
    -webkit-border-bottom-left-radius: 50%;
    -moz-border-radius-topleft: 50%;
    -moz-border-radius-topright: 50%;
    -moz-border-radius-bottomright: 50%;
    -moz-border-radius-bottomleft: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}
@media (min-width: 768px) {
    /* - Control - Close - */
    .x-placeholder .x-close { }
}

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