/* ||||||||||||| MAIN ||||||||||||| */
/* ====== Font ====== */
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,700,900');
/* ====== Wrapper ====== */
.xpanda { font-family: 'Nunito Sans', sans-serif; max-width: 992px; }

/* ====== Item - Javascript Enabled ====== */
.x-initiated .x-item > a img { margin-bottom: 40px; }
.x-initiated .x-item > a .x-thumbnail-content { position: absolute; bottom: -40px; width: 100%; height: 40px; }
.x-initiated .x-item > a .x-thumbnail-content h3 { font-size: 20px; font-weight: 700; line-height: 40px; color: #000000; text-decoration: none; margin: 0; }
.x-initiated .x-item > a .x-thumbnail-content .icon { font-size: 20px; line-height: 40px; text-align: center; position: absolute; background: #71c852; color: #ffffff; width: 40px; height: 40px; display: block; top:0; right: 0; }
.x-initiated .x-item > a .x-thumbnail-content .icon:after { content: '\f067'; font-family: 'FontAwesome'; }

/* - Item - Is Active - */
.x-initiated .x-item.x-is-active:after { left: calc(50% - 20px); bottom: -32px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #000000; }
.x-initiated .x-item.x-item.x-is-active > a .x-thumbnail-content .icon:after { content: '\f00d'; }

/* - Item - Is Not Active - */
.x-initiated .x-item.x-is-not-active { opacity: 0.3; }
.x-initiated .x-item.x-is-not-active > a .x-thumbnail-content .icon { background: rgba(113,200,82, 0.6); }

/* - Item - Lazyloader Enabled - */
.x-initiated.x-lazyload-thumbnail .x-item > a:before { background: rgba(113,200,82, 0.85); }

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

/* ||||||||||||| BUTTON ||||||||||||| */
/* ====== Button Global ====== */
.x-button { font-family: 'Nunito Sans', serif; text-decoration: none; padding: 0 16px; line-height: 1.2em; position: absolute; text-transform: uppercase; width: 100%; top: 50%; left: 50%; color: #ffffff; display: inline-block; font-size: 20px; font-weight: 900; margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -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;
}
/* - Button - Hover - */
@media (min-width: 769px) {
    .x-button:hover { opacity: 0.8; }
}

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

/* ||||||||||||| SPACER ||||||||||||| */
/* ====== Spacer (Outside) - Javascript Disabled ====== */
.x-spacer-outside { background: #71c852; height: 260px; position: relative; }
/* ====== Spacer (Inline) - Javascript Enabled ====== */
.x-spacer-inside { background: #71c852; position: relative; }

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

/* ||||||||||||| PLACEHOLDER ||||||||||||| */
/* ====== Placeholder ====== */
.x-placeholder { background: #000000; }

/* ====== Placeholder Contents - Defaults ====== */
/* - Info - */
.x-placeholder.x-is-expanded .x-info { color: #ffffff; font-weight: 200; }
.x-placeholder.x-is-expanded .x-info h4 { font-weight: 700; color: #71c852; margin-top: 0; font-size: 18px; }
.x-placeholder.x-is-expanded .x-info a { color: #71c852; }
.x-placeholder.x-is-expanded .x-info.x-info-center { padding: 30px; }

/* - Info - Social Links */
.x-placeholder.x-is-expanded .x-info ul.social-links { margin: 30px 0 0 0; padding: 0; list-style: none; }
.x-placeholder.x-is-expanded .x-info ul.social-links li { display: inline-block; width: 42px; height: 42px; margin: 0 10px 10px 0; background: #71c852; line-height: 42px; text-decoration: none; text-align: center;
    -webkit-transition: opacity 0.4s ease-in-out 0s;
    -moz-transition: opacity 0.4s ease-in-out 0s;
    -ms-transition: opacity 0.4s ease-in-out 0s;
    -o-transition: opacity 0.4s ease-in-out 0s;
    transition: opacity 0.4s ease-in-out 0s;
}
.x-placeholder.x-is-expanded .x-info ul.social-links li a { color: #ffffff; display: block; }
.x-placeholder.x-is-expanded .x-info ul.social-links i { color: #ffffff; }
.x-placeholder.x-is-expanded .x-info ul.social-links li:hover { opacity: 0.8; }

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