/* NAME: bs-responsive-gallery.css */
/* LOCATION: http://luc.edu/media/home/stylesheets/ */

/* == thumb slider - thumbs == */

.es-carousel-wrapper {
	position: relative;
	display: block;
	margin-top: 15px;
	margin-bottom: 0px;
	padding: 0px 20px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background: transparent;
}
.es-carousel {
	overflow: hidden;
	background: transparent;
}
.es-carousel ul li {
	display: block;
	float: left;
	height: 100%;
	margin-right: 6px;
	background: #525252;
}
.es-carousel ul li a {
	display: block;
	border: solid 3px #DDD;
	opacity: 0.5;
	-webkit-touch-callout:none;
	/*
		-o-transition: .4s;
		-ms-transition: .4s;
		-moz-transition: .4s;
		-webkit-transition: .4s;
		transition: .4s;
	*/
}
.es-carousel ul li a:hover {
	opacity: 1;
}
.es-carousel ul li.selected a {
	border-color: #EEB111;
	opacity: 1.0;
}
.es-carousel ul li a img {
	display: block;
	max-height: 100%;
	max-width: 100%;
	border: none;
}
.es-nav span {
	position: absolute;
	top: 50%;
	left: 0px;
	margin-top: -13px;
	width: 14px;
	height: 26px;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.35;
	background: url('/media/home/images/nav-thumbs.png') no-repeat top left transparent;
}
.es-nav span.es-nav-next {
	right: 0px;
	left: auto;
	background-position: top right;
}
.es-nav span:hover {
	opacity: 0.5;
}

/* == thumbnail - aspect ratio lock == */

.es-carousel ul #element {
	margin: 0 auto;
}
.es-carousel ul li #element {
    position: relative;
    height: 0;
    padding: 52% 0 0 0;
}
.es-carousel ul li a {
	display: block;
	position: relative;
	height: 0;
	padding: 52% 0 0 0;
	overflow: hidden;
}
.es-carousel ul li a img {
	position: absolute;
	display: block;
	max-width: 100%;
	max-height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.rg-gallery:before { padding-top: 56.5%; height: 300px; max-height: 300px; }

/* == image == */

.rg-image-wrapper {
	position: relative;
	padding: 0px 0px;
	background: url(/media/home/stylesheets/'') repeat top left #272727;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	min-height: 20px;
	display: block;	
}
/*
.rg-image img {
	max-height: 100%;
	max-width: 100%;
	background-color: #272727;
}
.rg-image {
	position: relative;
	text-align: center;
	line-height: 0px;
	min-height: 95%;
	background-color: #272727;
}
*/
.rg-image {
    position: relative;
    height: 0;
    padding: 56.25% 0 0 0;
	background-color: #525252;
	background: url(/media/home/stylesheets/'') repeat #525252;
	background-size: 200px 200px;
}
.rg-image img {
	position: absolute;
	display: block;
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

/* == thumbnail - aspect ratio lock == */



/* == nav == */

.rg-image-nav a { 
	position: absolute;
	top: 0px;
	left: 0px;
	background: url('/media/home/images/nav.png') no-repeat -20% 50% transparent;
	width: 42px;
	height: 100%;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.5;
	outline: none;
	/*
	-moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
	*/
		-o-transition: .4s;
		-ms-transition: .4s;
		-moz-transition: .4s;
		-webkit-transition: .4s;
		transition: .4s;
}
.rg-image-nav a.rg-image-nav-next {
	right: 0px;
	left: auto;
	top: 40%;
	height: 40px;
	background-color: rgba(0,0,0,1);
	background-position: -25px center;
	-moz-border-radius: 4px 0px 0px 4px;
	-webkit-border-radius: 4px 0px 0px 4px;
	border-radius: 4px 0px 0px 4px;
	z-index: 300;
}
.rg-image-nav a.rg-image-nav-prev {
	top: 40%;
	height: 40px;
	background-color: rgba(0,0,0,1);
    background-position: 10px center;
	/*
	left: 0px;
	left: auto;
	*/
	-moz-border-radius: 0px 4px 4px 0px;
	-webkit-border-radius: 0px 4px 4px 0px;
	border-radius: 0px 4px 4px 0px;
	z-index: 600;
}
.rg-image-nav a:hover {
	opacity: 0.7;
}

/* == loader == */

.gallery .rg-gallery .rg-image-wrapper .rg-loading, .rg-gallery .rg-image-wrapper .rg-loading {
	width: 13.1%; /* originally 46px */
	height: 23%; /* originally 46px */
	position: absolute;
	top: 38%;
	left: 43.45%;
	opacity: .65;
	background: url('/media/home/images/ajax-loader.gif') no-repeat center center rgba(0,0,0,0);
	z-index: 100;
}

#gallery-shallow.gallery .rg-gallery .rg-image-wrapper .rg-loading { height: 29.15% !important; }

/* == new loader == */

#outer-preload {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	opacity:1;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 3px solid white;
	z-index:4;
}

#loader-back {
	position:absolute;
	width: 100%;
	height: 100%;
	background: black;
	opacity:0.5;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	top:0;
	left:0;
	z-index:-1;
}

#preloader {
	position:absolute;
	top:0;
	left:0;
    width: 100%;
	height: 100%;
	z-index:2;
}

#outer-preload img {
	position:absolute;

	width:80%;
	top:9.25%;
	left:10%;
	z-index:3;
}
	
#spinner {
	position:absolute;
	top:0;
	left:40.91%;
	width: 18.18%;
	height: 100%;
	animation:1s rotateRight infinite linear; 
	z-index:0;
}

#color {
	background-color:#a02051;
	display:inline-block;
	width:100%;
	height:50%;
}

#other-half {
	background-color:yellow;
}

@keyframes rotateRight{
    0%{ transform:rotate(0deg); transform-origin:50% 50%; }
    100%{ transform:rotate(360deg); }
}

@media all and (max-width: 735px) { #outer-preload { border: 2px solid white; }}





/* == GENERALLY NOT USED == */

/*
.rg-view {
	height: 30px;
	display: none;
}
.rg-view a {
	display: block;
	float: right;
	width: 16px;
	height: 16px;
	margin-right: 3px;
	background: url('/media/home/images/views.png') no-repeat top left #464646;
	background: url(/media/home/images/views.png) no-repeat top left #464646;
	border: 3px solid #464646;
	opacity: 0.8;
}
.rg-view a:hover {
	opacity:1.0;
}
.rg-view a.rg-view-full {
	background-position:0px 0px;
}
.rg-view a.rg-view-selected {
	background-color: #FFF;
	border-color: #6F6F6F;
}
.rg-view a.rg-view-thumbs {
	background-position: 0px -16px;
}
*/

/* == RESPONSIVE GALLERY ELEMENTS POSITION Title - Counter - Shadowbox Link - Description == */

/* == caption == */

.rg-caption-wrapper {
    position: absolute;
    bottom: 0;
    display: block;
	margin: 0;
	padding: 0;
    width: 100%;
	height: auto;
	font-family: 'Arial',sans-serif;
	font-weight: regular;
	text-align: left;
	background: rgba(0,0,0,.7);
	overflow: hidden;
	z-index: 650;
}
.rg-caption-wrapper.expanded {
    -webkit-animation: growIt .5s;
    animation: growIt .5s;
    height: 19%;
}
.rg-caption-wrapper.shrunk {
    -webkit-animation: shrinkIt .5s;
    animation: shrinkIt .5s;
}
@-webkit-keyframes growIt {
    from {height: 38px;}
    to {height: 19%; }
}
@keyframes growIt {
    from {height: 38px;}
    to {height: 19%; }
}
@-webkit-keyframes shrinkIt {
    from {height: 19%;}
    to {height: 38px; }
}
@keyframes shrinkIt {
    from {height: 19%;}
    to {height: 38px; }
}
.rg-caption-wrapper .text-expander {
    display: block;
    position: absolute;
    top: 33.5%;
    right: 70px;
    width: 16px;
    height: 12px;
}
.rg-caption-wrapper.expanded .text-expander {
	top: 12px;
}
.rg-caption-wrapper a.text-expander {
    background: url('/media/home/images/caret-up.png') transparent no-repeat;
	background-size: 95% 95%;
    opacity: .7;
}
.rg-caption-wrapper.expanded a.text-expander {
    background: url('/media/home/images/caret-down.png') transparent no-repeat;
	background-size: 95% 95%;
    opacity: .7;
}
.rg-caption-wrapper a.text-expander:hover, .rg-caption-wrapper.expanded a.text-expander:hover {
	opacity: .85;
		-o-transition: .4s;
		-ms-transition: .4s;
		-moz-transition: .4s;
		-webkit-transition: .4s;
		transition: .4s;
}
.rg-caption {
    position: relative;
    top: 0;
    left: 10px;
	width: 80%;
	height: 100%;
	text-align: left;
	overflow: hidden;    
}
.rg-caption-wrapper.expanded .rg-caption p,
.rg-caption-wrapper.expanded .rg-caption div {
    white-space: normal;
}
.rg-caption p,
.rg-caption div {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rg-captioncount {
	position: absolute;
	right: 30px;
	width: 35px;
	height: 20px;
	text-align: center;
}

/* == shadowbox == */

.rg-captionshadowbox {
	float: right;
	position: relative;
	bottom: -10px;
	right: 10px;
	height: 20px;
	z-index: 400;
}
p.carousel-caption-shadowbox {
	height: 1px;
	text-align: right;
	z-index: 400;/*Place above Main Image Next Div Button*/
	-webkit-transform: scale(1.0); 
	opacity: .8;
		-o-transition: .4s;
		-ms-transition: .4s;
		-moz-transition: .4s;
		-webkit-transition: .4s;
		transition: .4s;
}
p.carousel-caption-shadowbox:hover {
	height: 1px;
	text-align: right;
	z-index: 400;/*Place above Main Image Next Div Button*/
	-webkit-transform: scale(1.0);
	opacity: 1;
}
p.carousel-caption-shadowbox a img {
	float: right;
	width: 55%;
}


/* == typography == */

/* == bring title back == */
/*
#page-content p.carousel-caption-title {
	position: relative;
	top: -20px;
	margin-bottom: 5px;
	font-family: 'Arial',sans-serif;
	font-size: 20px;
	text-align: left;
}
*/
#page-content p.carousel-caption-title {
	display: none;
}
#page-content p.carousel-caption-description,
#page-content p.carousel-caption-counter {
	margin: 6px 0;
	padding: 2px 0;
	font-family: 'Arial',sans-serif;
	font-size: 14px;
	line-height: 1.25;
	color: #CCCCCC;
	opacity: 1;
}
#page-content p.carousel-caption-description {
	height: auto;
/*	max-height: 60px;*/
	overflow: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
#page-content p.carousel-caption-description span.tstamp {
	margin-right: 3px;
	font-family: 'Antenna Black', sans-serif !important;
	font-size: .875em;
	color: #eeb111;
	font-weight: bold;
}

p.carousel-caption-counter {
	font-family: 'Arial',sans-serif;
	font-size: 14px;
	height: 0px;
	text-align: center;
		-o-transition: .4s;
		-ms-transition: .4s;
		-moz-transition: .4s;
		-webkit-transition: .4s;
		transition: .4s;
}

/* == gallery span12 == */

#page-content.span12 .gallery { padding: 40px; }

#page-content.span12 .gallery .rg-image-nav a.rg-image-nav-prev,
#page-content.span12 .gallery .rg-image-nav a.rg-image-nav-next { top: 46%; }

#page-content.span12 .gallery .rg-captionshadowbox { bottom: -5px; }



/* == HIDE THE SHADOWBOX/LIGHTBOX OPTION WHEN BELOW DIMENSIONS 1024 == */

@media all and (max-width: 1024px) {

p.carousel-caption-shadowbox { opacity: 0; display:none; }

/* == SLIDE THE COUNTER OVER IN PLACE OF X WHEN BELOW DIMENSIONS 1024 == */

.rg-caption { width: 80%; }

.rg-captioncount {
	position: absolute; right: 0px;
	-o-transition: .4s;
	-ms-transition: .4s;
	-moz-transition: .4s;
	-webkit-transition: .4s;
	transition: .4s;
}
.rg-caption-wrapper .text-expander {
	right: 45px;
}

}

@media all and (max-width: 767px) {

.rg-caption {
	width: 75%;
}
.rg-captioncount {
	position: absolute;
	right: 10px;
}

}


@media all and (max-device-width: 568px) {

.rg-caption-wrapper.expanded {
    -webkit-animation: growIt .5s;
    animation: growIt .5s;
    height:100%;
}
.rg-caption-wrapper.shrunk {
    -webkit-animation: shrinkIt .5s;
    animation: shrinkIt .5s;
}
@-webkit-keyframes growIt {
    from {height: 30px;}
    to {height: 100%; }
}
@keyframes growIt {
    from {height: 30px;}
    to {height: 100%; }
}
@-webkit-keyframes shrinkIt {
    from {height: 100%;}
    to {height: 30px; }
}
@keyframes shrinkIt {
    from {height: 100%;}
    to {height: 30px; }
}

}

@media all and (max-width: 479px) {

.rg-image-nav a { 
	background: url('/media/home/images/nav.png') no-repeat -20% 50% transparent;
	width: 20px;
}
.rg-image-nav a.rg-image-nav-prev,
.rg-image-nav a.rg-image-nav-next {
	top: 35%;
	height: 30px;
	background-size: 150% 80%;
}
.rg-image-nav a.rg-image-nav-prev {
    background-position: 5px center;
	-moz-border-radius: 0px 3px 3px 0px;
	-webkit-border-radius: 0px 3px 3px 0px;
	border-radius: 0px 3px 3px 0px;
}
.rg-image-nav a.rg-image-nav-next {
    background-position: -14px center;
	-moz-border-radius: 3px 0px 0px 3px;
	-webkit-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px;
}
.rg-caption-wrapper {
	padding: 0;
}
.rg-caption {
	width: 70%;
	overflow-y: scroll;
}
.rg-caption p {
	width: 90%;
}
#page-content p.carousel-caption-description,
#page-content p.carousel-caption-counter {
	margin: 6px 0;
	padding: 0;
}
.rg-captioncount {
	right: 5px;
}
.rg-caption-wrapper .text-expander,
.rg-caption-wrapper.expanded .text-expander {
	top: 6px;
	right: 40px;
}

}