/* ||||||||||||| MAIN ||||||||||||| */
/* ====== Wrapper ====== */

/* ====== 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;
	background:no-repeat center center fixed; 
 	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.x-initiated .x-item.x-dairy {background-image: url("../img/assets/animalphotos/dairy.jpg")}
.x-initiated .x-item.x-beef {background-image: url("../img/assets/animalphotos/beef.jpg")}
.x-initiated .x-item.x-poultry {background-image: url("../img/assets/animalphotos/chicken.jpg")}
.x-initiated .x-item.x-canine {background-image: url("../img/assets/animalphotos/dog.jpg")}
.x-initiated .x-item.x-equine {background-image: url("../img/assets/animalphotos/horse.jpg")}
.x-initiated .x-item.x-swine {background-image: url("../img/assets/animalphotos/pig.jpg")}
.x-initiated .x-item.x-feline {background-image: url("../img/assets/animalphotos/cat.jpg")}
.x-initiated .x-item.x-aquatic {background-image: url("../img/assets/animalphotos/salmon.jpg")}
.x-initiated .x-item a { text-decoration: none; }

.x-initiated .x-item .x-thumbnail-content { text-align: center; padding: 100px 20px; }
.x-initiated .x-item .x-thumbnail-content * { color: #ffffff }
.x-initiated .x-item .x-thumbnail-content h5 { font-size: 24px; font-weight: bold !important; }

/* - Item - Hover - */
@media (min-width: 769px) {
	.x-initiated .x-item:hover { opacity: 0.75; }
	.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 var(--color-dark-2); }
/* - Placeholder - Is Expanded - */
.x-placeholder.x-is-expanded .x-placeholder-inner { background: var(--color-dark-2) }
/* ====== 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; color: white; margin-top: 40px }
.x-placeholder.x-is-expanded .x-info p { font-weight: 300; color: white; }

.x-placeholder .annotation a {font-size: 12px; color: var(--color-highlight);}
.x-placeholder .annotation a:hover {text-decoration: underline}


.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: 1px 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: 70px; top: 30px; border: 1px 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: 1px 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: 0px) {
    /* - Control - Previous - */
    .x-placeholder .x-prev { width: 30px; height: 30px; background-size: 8px; }
    /* - Control - Next - */
    .x-placeholder .x-next { width: 30px; height: 30px; background-size: 8px; }
    /* - Control - Close - */
    .x-placeholder .x-close { width: 30px; height: 30px; background-size: 10px; }
}