/* Changing default bootstrap modal styles */

.modal.and.carousel {
  position: fixed; /*Needed because the carousel overrides the position property*/
}

.modal {
    text-align:center;
}
div.modal div.modal-dialog {
    display: inline-block;
    width: auto;
	max-width: 97vw;
}

.carousel-inner div.item img {
	min-height: 70vh;
	max-height: calc(100vh - 100px);
}

div.carousel-caption p {
	background-color: #000000;
	padding: 7px;
	border-radius: 6px;
}

div.carousel-inner div.carousel-caption {
	top: 95%;
	transition: all 0.5s ease-out;
}

div.carousel-inner:hover .carousel-caption {
	top: 83%;
}

div.carousel-inner div.carousel-caption p {
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease-in;
}

div.carousel-inner:hover .carousel-caption p {
	visibility: visible;
	opacity: 0.7;
}

.left span.glyphicon-chevron-left {
	background-image: url("/earthshots/sites/all/themes/eros_theme/images/chevron-left-white.png");
	background-repeat: no-repeat;
}

.right span.glyphicon-chevron-right {
	background-image: url("/earthshots/sites/all/themes/eros_theme/images/chevron-right-white.png");
	background-repeat: no-repeat;
}

.left span.glyphicon-chevron-left:before {
	content: none;
}

.right span.glyphicon-chevron-right:before {
	content: none;
}