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

/* ====== Item - Javascript Enabled ====== */
.x-initiated .x-item > a { overflow: hidden; z-index: 1;
	-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%;
}
.x-initiated .x-item > a img { backface-visibility: hidden; position: relative; z-index: 1; }
.x-initiated .x-item > a .x-thumbnail-content { opacity: 0; position: absolute; z-index: 2; width: 100%; top: 50%; left: 50%; padding: 0 16px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transform: translate(-50%, 100%);
    -o-transform: translate(-50%, 100%);
    -ms-transform: translate(-50%, 100%);
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    -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;
}
.x-initiated .x-item > a .x-thumbnail-content h5 { color: #000000; text-align: center; text-transform: uppercase; }

/* - Item - Hover - */
@media (min-width: 769px) {
	.x-initiated .x-item:hover > a img { opacity: 0.4;
		-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:hover > a .x-thumbnail-content { opacity: 1;
		-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 - Is Active - */
.x-initiated .x-item.x-is-active > a img { opacity: 0.4; }
.x-initiated .x-item.x-is-active > a .x-thumbnail-content { opacity: 1;
	-moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.x-initiated .x-item.x-is-active > a .x-thumbnail-content h5 { color: #ffffff; }
.x-initiated .x-item.x-is-active:after { content: ''; display: block; position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); background: #232323; z-index: 0;
	-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%;
}

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

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

/* - Item - Lazyloader Enabled - */
.x-initiated.x-lazyload-thumbnail .x-item > a:before {
	-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%;
}

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

/* ||||||||||||| 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 Enabled ====== */
.x-spacer-outside { padding: 80px 40px 200px 40px; position: relative; height: 250px; background: none; }
.x-spacer-outside > * { position: relative; z-index: 1; }
.x-spacer-outside:after { content: ''; width: 250px; height: 250px; display: block; position: absolute; z-index: 0; top: 0; left: calc(50% - 125px); background: #000000;
	-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%;
}

/* ====== Spacer (Inline) - Javascript Enabled ====== */
.x-spacer-inside { position: relative;
	-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%;
}

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

/* ||||||||||||| PLACEHOLDER ||||||||||||| */
/* ====== Placeholder ====== */
.x-indicator { display: none; }
/* - Placeholder - Is Expanded - */
.x-placeholder.x-is-expanded .x-placeholder-inner { background: none; }

/* ====== Placeholder Contents ====== */
/* - Asset - */
.x-placeholder.x-is-expanded .x-asset { overflow: hidden; position: relative; z-index: 0; border: 12px solid #232323; background: #232323;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	-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%;
}
.x-placeholder.x-is-expanded .x-asset.x-asset-left { top: 24px; }
.x-placeholder.x-is-expanded .x-asset:after { content: ''; display: block; padding-bottom: 100%; }
.x-placeholder.x-is-expanded .x-asset img { position: absolute; width: auto; height: 100%; }
@media (min-width: 992px) {
    .x-placeholder.x-is-expanded .x-asset.x-asset-left,
    .x-placeholder.x-is-expanded .x-asset.x-asset-right { top: 24px; width: 40%; margin-bottom: 40px; }
    /*.x-placeholder.x-is-expanded .x-asset.x-asset-left { top: auto; }*/
}
/* - Info - */
.x-placeholder.x-is-expanded .x-info { background: none; z-index: 1; text-align: center;
	-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%;
}
.x-placeholder.x-is-expanded .x-info.x-info-right { padding: 20px 40px; }
.x-placeholder.x-is-expanded .x-info.x-info-left { padding: 40px 40px 20px 40px; }
.x-placeholder.x-is-expanded .x-info * { color: #232323; }
.x-placeholder.x-is-expanded .x-info h3 { font-weight: 900; font-size: 28px; text-transform: uppercase; margin-bottom: 10px; }
.x-placeholder.x-is-expanded .x-info small { font-weight: 200; font-size: 20px; color: #979797; }
.x-placeholder.x-is-expanded .x-info p { font-weight: 300; font-size: 16px; margin: 30px 0; }
@media (min-width: 576px) {
	.x-placeholder.x-is-expanded .x-info h3 { font-size: 34px; }
	.x-placeholder.x-is-expanded .x-info small { font-size: 22px; }
	.x-placeholder.x-is-expanded .x-info p { font-size: 18px; }
}
@media (min-width: 992px) {
    .x-placeholder.x-is-expanded .x-info.x-info-right,
    .x-placeholder.x-is-expanded .x-info.x-info-left { width: 60%; padding: 40px; }
}

/* - Info - Social Links */
.x-placeholder.x-is-expanded .x-info ul.social-links { margin: 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: rgba(35, 35, 35, 1); line-height: 42px; text-decoration: none; text-align: center;
	-webkit-transition: background 0.4s ease-in-out 0s;
    -moz-transition: background 0.4s ease-in-out 0s;
    -ms-transition: background 0.4s ease-in-out 0s;
    -o-transition: background 0.4s ease-in-out 0s;
    transition: background 0.4s ease-in-out 0s;
    -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%;
}
.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 { background: rgba(35, 35, 35, 0.8); }

/* ====== Placeholder Controls ====== */
/* - Controls - */
.x-placeholder .x-prev,
.x-placeholder .x-next,
.x-placeholder .x-close { top: 0;
	-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%;
}