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

/* ====== Item - Javascript Enabled ====== */
.x-initiated .x-item {
	-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.x-blue { background: #1F63AB; }
.x-initiated .x-item.x-green { background: #71c852; }
.x-initiated .x-item.x-purple { background: #6A3684; }
.x-initiated .x-item.x-yellow { background: #FDD454; }
.x-initiated .x-item.x-red { background: #CF2434; }
.x-initiated .x-item.x-orange { background: #FD7E23; }
.x-initiated .x-item.x-pink { background: #FD8AB5; }
.x-initiated .x-item.x-brown { background: #7A4F2F; }
.x-initiated .x-item a { text-decoration: none; }

.x-initiated .x-item .x-thumbnail-content { text-align: center; padding: 40px 20px 30px 20px; }
.x-initiated .x-item .x-thumbnail-content * { color: #ffffff; }
.x-initiated .x-item .x-thumbnail-content i { font-size: 40px; border: 2px solid #ffffff; width: 80px; height: 80px; display: inline-block; line-height: 80px;
	-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 .x-thumbnail-content h5 { font-size: 24px; font-weight: 300; }
.x-initiated .x-item .x-thumbnail-content p { font-size: 16px; font-weight: 400; }

/* - Item - Hover - */
@media (min-width: 769px) {
	.x-initiated .x-item:hover { opacity: 0.8; }
	.x-initiated .x-item.x-blue:hover { background: #1F63AB; }
	.x-initiated .x-item.x-green:hover { background: #71c852; }
	.x-initiated .x-item.x-purple:hover { background: #6A3684; }
	.x-initiated .x-item.x-yellow:hover { background: #FDD454; }
	.x-initiated .x-item.x-red:hover { background: #CF2434; }
	.x-initiated .x-item.x-orange:hover { background: #FD7E23; }
	.x-initiated .x-item.x-pink:hover { background: #FD8AB5; }
	.x-initiated .x-item.x-brown:hover { background: #7A4F2F; }
}

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

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

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

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

/* ||||||||||||| PLACEHOLDER ||||||||||||| */
/* ====== Placeholder ====== */
.x-indicator { width: 24px; height: 14px; }
.x-indicator:after { border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #232323; }
/* - Placeholder - Is Expanded - */
.x-placeholder.x-is-expanded .x-placeholder-inner { background: #232323; }
/* ====== Placeholder Contents ====== */
/* - Info - */
.x-placeholder.x-is-expanded .x-info.x-info-center { padding: 60px 30px 40px 30px; }
@media (min-width: 768px) {
    .x-placeholder.x-is-expanded .x-info.x-info-center { padding: 60px 60px 40px 60px; }
}
.x-placeholder.x-is-expanded .x-info h3 { font-size: 32px; font-weight: 300; }
.x-placeholder.x-is-expanded .x-info p { font-size: 18px; font-weight: 300; color: #939393; }

.x-placeholder.x-is-expanded .x-info.x-blue { border-bottom: 10px solid #1F63AB; }
.x-placeholder.x-is-expanded .x-info.x-blue h3 { color: #1F63AB; }
.x-placeholder.x-is-expanded .x-info.x-green { border-bottom: 10px solid #71c852; }
.x-placeholder.x-is-expanded .x-info.x-green h3 { color: #71c852; }
.x-placeholder.x-is-expanded .x-info.x-purple { border-bottom: 10px solid #6A3684; }
.x-placeholder.x-is-expanded .x-info.x-purple h3 { color: #6A3684; }
.x-placeholder.x-is-expanded .x-info.x-yellow { border-bottom: 10px solid #FDD454; }
.x-placeholder.x-is-expanded .x-info.x-yellow h3 { color: #FDD454; }
.x-placeholder.x-is-expanded .x-info.x-red { border-bottom: 10px solid #CF2434; }
.x-placeholder.x-is-expanded .x-info.x-red h3 { color: #CF2434; }
.x-placeholder.x-is-expanded .x-info.x-orange { border-bottom: 10px solid #FD7E23; }
.x-placeholder.x-is-expanded .x-info.x-orange h3 { color: #FD7E23; }
.x-placeholder.x-is-expanded .x-info.x-pink { border-bottom: 10px solid #FD8AB5; }
.x-placeholder.x-is-expanded .x-info.x-pink h3 { color: #FD8AB5; }
.x-placeholder.x-is-expanded .x-info.x-brown { border-bottom: 10px solid #7A4F2F; }
.x-placeholder.x-is-expanded .x-info.x-brown h3 { color: #7A4F2F; }

/* ====== Placeholder Controls ====== */
/* - Control - Previous - */
.x-placeholder .x-prev { top: 30px; left: 30px; border: 2px solid #ffffff; background-color: transparent;
	-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%;
}
/* - Control - Next - */
.x-placeholder .x-next { right: auto; left: 90px; top: 30px; border: 2px solid #ffffff; background-color: transparent;
	-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%;
}
/* - Control - Close - */
.x-placeholder .x-close { top: 30px; right: 30px; border: 2px solid #ffffff; background-color: transparent;
	-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 - Previous - */
	.x-placeholder .x-prev { left: 60px; }
    /* - Control - Next - */
    .x-placeholder .x-next { left: 140px; }
    /* - Control - Close - */
	.x-placeholder .x-close { right: 60px; }
}