/* ||||||||||||| MAIN ||||||||||||| */
/* ====== Font ====== */
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rye&display=swap');
/* ====== Wrapper ====== */
.xpanda { font-family: 'Nunito Sans', sans-serif; }
/* ====== Item Row Wrapper ====== */
.x-item-wrap { z-index: 0; }

/* ====== Item - Defaults ====== */
.x-item { background: #232629; }
.x-item > a .x-thumbnail-content { position: absolute; top: 50%; left: 50%; text-align: center; margin: 0; cursor: pointer; color: #ffffff; font-weight: 200;
    -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 - Javascript Enabled ====== */
.x-initiated .x-item { overflow: hidden;
    -webkit-transition: background 0.2s ease-in-out 0s;
    -moz-transition: background 0.2s ease-in-out 0s;
    -ms-transition: background 0.2s ease-in-out 0s;
    -o-transition: background 0.2s ease-in-out 0s;
    transition: background 0.2s ease-in-out 0s;
	box-shadow: 5px 5px 15px;
	border: 4px ridge;
	border-image-source: url(../img/goldborder.png);
	border-image-slice: 60 30;
	height: 260px;
	width: auto;
	float: left;
}
.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;
}
.x-initiated .x-item > a .x-thumbnail-content { opacity: 0; top: 50%; width: 100%; padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.7s ease-in-out 0s;
    -moz-transition: all 0.7s ease-in-out 0s;
    -ms-transition: all 0.7s ease-in-out 0s;
    -o-transition: all 0.7s ease-in-out 0s;
    transition: all 0.7s ease-in-out 0s;
}

.x-thumbnail-content h5 {
letter-spacing: 3pt;
	font-size: 1.5vw;
	font-family: 'Rye', cursive;
	color: white;
	text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #e2b007, 0 0 7px #e2b007, 0 0 8px #e2b007, 0 0 10px #e2b007, 0 0 15px #e2b007;
	text-transform: uppercase;

}

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

/* - Item - Is Active - */
.x-initiated .x-item.x-is-active > a img { opacity: 0.2; }
.x-initiated .x-item.x-is-active > a .x-thumbnail-content { opacity: 1; top: 50%; }

/* - Item - Is Active - Hover - */
@media (min-width: 769px) {
    .x-initiated .x-item.x-is-active:hover > a .x-thumbnail-content { top: 50%; }
}

@media (max-width: 990px) {
.x-asset{
	height:50vw;
	background-size: cover;
	background-position: center;
	border-bottom: 4px ridge; border-image-source: url(../img/goldborder.png); border-image-slice: 60 30;
}
.x-asset-custom-gallery-picture {
width: 100%;
height: 10vh;
}

}

/* - Item - Is Not Active - */
.x-initiated .x-item.x-is-not-active { background: #ffffff; }
.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 { background: #232629; }
    .x-initiated .x-item.x-is-not-active:hover > a img { opacity: 0.2; }
    .x-initiated .x-item.x-is-not-active:hover > a .x-thumbnail-content { opacity: 1; top: 50%; }
}

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

/* ||||||||||||| BUTTON ||||||||||||| */
/* ====== Button Global ====== */
.x-button { text-decoration: none; height: 32px; line-height: 32px; padding: 0 16px; color: #ffffff; display: inline-block; opacity: 1; background: #131619; font-size: 12px; font-weight: 700; margin: 0 0 5px 0;
    -webkit-transition: background 0.2s ease-in-out 0s;
    -moz-transition: background 0.2s ease-in-out 0s;
    -ms-transition: background 0.2s ease-in-out 0s;
    -o-transition: background 0.2s ease-in-out 0s;
    transition: background 0.2s ease-in-out 0s;
}
.x-button i { margin-right: 6px; }
/* - Button - Hover - */
@media (min-width: 769px) {
    .x-button:hover { opacity: 0.8; }
}

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

/* ||||||||||||| SPACER ||||||||||||| */
/* ====== Spacer (Outside) - Javascript Disabled ====== */
.x-spacer-outside { background: #232629; position: relative; height: 160px; }
/* ====== Spacer (Outside) - Javascript Enabled ====== */
.x-spacer-outside.x-initiated { }

/* ====== Spacer (Inline) - Javascript Enabled ====== */
.x-spacer-inside { position: relative; background: #232629; }
/* - Spacer (Inline) - Is Empty - */
.x-spacer-inside.x-spacer-empty { }

.x-spacer-outside .x-button,
.x-spacer-inside .x-button { position: absolute; top: 50%; left: 50%; font-size: 18px; height: 44px; line-height: 44px; padding: 0 20px; margin: 0;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

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

/* ||||||||||||| PLACEHOLDER ||||||||||||| */
/* ====== Placeholder ====== */
.x-placeholder { overflow: visible; }
.x-indicator { width: 28px; height: 14px; }
.x-indicator:after { border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #e2b007; }
/* - Placeholder - Is Expanded - */
.x-placeholder.x-is-expanded { z-index: 1; }
.x-placeholder.x-is-expanded .x-placeholder-inner { background: #232629; border: 7px ridge; border-image-source: url(../img/goldborder.png); border-image-slice: 60 30; }

/* ====== Placeholder Contents - Defaults ====== */
/* - Asset - Default */
.x-placeholder.x-is-expanded .x-asset { }
.x-placeholder.x-is-expanded .x-asset.x-asset-left { }
.x-placeholder.x-is-expanded .x-asset img { }
@media (min-width: 992px) {
    .x-placeholder.x-is-expanded .x-asset.x-asset-left { /*width: auto;*/ flex: none; background-size: cover; background-repeat: no-repeat; background-position: center center; border-right: 2px ridge; border-image-source: url(../img/goldborder.png); border-image-slice: 60 30;  border-left: 2px ridge; border-image-source: url(../img/goldborder.png); border-image-slice: 60 30;}
    .x-placeholder.x-is-expanded .x-asset.x-asset-left img { max-height: calc(100vh - 100px); width: auto; max-width: 700px; float: left; }
}
@media (min-width: 1200px) {
    .x-placeholder.x-is-expanded .x-asset.x-asset-left img { max-width: 900px; } 
}

/* - Info - */
.x-placeholder.x-is-expanded .x-info .x-info-content { color: #ffffff; margin: 20px 0 0 0; }
.x-placeholder.x-is-expanded .x-info .x-info-content h3 { font-weight: 200; font-size: 24px; margin-bottom: 0; }
.x-placeholder.x-is-expanded .x-info .x-info-content small { font-weight: 300; font-size: 12px; }
.x-placeholder.x-is-expanded .x-info .x-info-content p { font-weight: 300; font-size: 16px; line-height: 1.6em; }
.x-placeholder.x-is-expanded .x-info .x-info-content a { color: #ffffff; }
@media (min-width: 992px) {
    .x-placeholder.x-is-expanded .x-info.x-info-right { position: relative; }
    .x-placeholder.x-is-expanded .x-info .x-info-content { position: absolute; top: 50%; left: auto; margin: 0; font-size: 18px; width: calc(100% - 40px);
        -moz-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
}
@media (min-width: 1200px) {
    .x-placeholder.x-is-expanded .x-info .x-info-content { }
}

/* ====== Placeholder Controls ====== */
/* - Control - Previous - */
.x-placeholder .x-prev { background-color: #131619; color: #e2b007;}
/* - Control - Next - */
.x-placeholder .x-next { background-color: #131619;color: #e2b007; }
/* - Control - Close - */
.x-placeholder .x-close { background-color: #131619; color: #e2b007;}

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