/* spinners */
#spinwrap {
    position: fixed;
    width: 100%;
    height:100%;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.91);
    top: 0;
}
.spindiv {
    display: flex;
    margin: 0 auto;
	font-size:1.5em;
}
.spindiv .btn-default {
  background-color: #080808;
  color:#FFFFFF;
  font-size:1.5em;
	padding-left:10px;
	padding-right:10px;
	border:none;
	vertical-align:middle;
}
.gly-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* carousels */
.carousel-wrapper {
 display:none;
}
.vhelper {
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
.img-wrap {
  width:100%;
  height:100%;
  text-align:center;
  white-space: nowrap;
}
.item img {
  display:inline;
  margin:auto;
}
.item .carousel-caption img {
  display:inline;
  margin:0;
}
.item .carousel-caption .img-wrap img {
  vertical-align:middle;
}
.gi-lg {
  font-size: 2em;
}
#carouselButtons, #details {
  padding-right:28px;
}
#details {
  color:#FFFFFF;
  position:fixed;
	bottom:6px;
	right:0;
	z-index:3;
	visibility:hidden;
}
#captionButtons {
  padding-left:8px;
	position:relative;
	bottom:2px;
	line-height:105%;
	margin-bottom:0;
}
#carouselButtons {
	opacity:0.5;
  position:fixed;
	bottom:4px;
	left:4px;
	z-index:12;
}
#carouselButtons a {
  color:#FFFFFF;
  position:fixed;
	bottom:4px;
	z-index:13;
	padding-left:15px;
}

#carouselButtons a#pauseButton {
  left:45px;
}
#carouselButtons a#playButton {
  left:85px;
} 
.carousel-indicators {
 position:relative;
 padding-top:10px;
 opacity: 0;
} /*
 position:absolute;
 */
.carousel-control {
  opacity:0.8;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
  font-size:36px;
}

.carousel-control a:hover,
.carousel-control a:focus
 {
  opacity:1.0;
}
.carousel-caption {
 top:-30px;
 padding-top:3px;
 left:5%;
 right:5%;
}
.carousel-caption h2 {
/* background-color:rgba(34,34,34,0.4); */
 margin-top:0px;
 font-size:18px;
 font-weight:normal;
/*  padding-left:10px;
  padding_right:10px; */
 flex: 1 1 100%; 
}
.ronayne {
 background-color:rgba(34,34,34,0.4);
/*  background-image : linear-gradient(to right, 
                    rgba(34,34,34,0) 5%, 
                    rgba(34,34,34,0.4) 90%,
                    rgba(34,34,34,0) 5% 
					); */
/*    background: -moz-linear-gradient(left,  rgba(34,34,34,1) 1%, rgba(34,34,34,0) 53%, rgba(34,34,34,1) 100%); /* FF3.6+ */
/*    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(34,34,34,0)), color-stop(53%,rgba(34,34,34,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
/*    background: -webkit-linear-gradient(left,  rgba(34,34,34,1) 1%,rgba(34,34,34,1) 53%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
 
 display: flex;
}
/* .ronayne:after {
  background-image : linear-gradient(to bottom, 
                    rgba(34,34,34,0.4), 
                    rgba(34,34,34,0) 90%);
  width    : 100%;
  height   : 0.5em;
  content :'';
  position: absolute;
    left: 0; right: 0;
  top: 0; bottom: 0;
} */
.description {
  background-color:#222;
  background-color:rgba(34,34,34,0.9);
	text-align:justify;
	font-size:16px;
}
.carousel-inner {
 overflow:visible;
 height:100%;
}
 /* */
/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  height:100%;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 11;
}
.carousel-inner > .next,
.carousel-inner > .prev,
.carousel-inner > .active.left,
.carousel-inner > .active.right {
    left: 0;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}
