/* ----------------------------------------------------------------- */
/* this section is styling the thumb container and the actual thumbnails */
#navbar {
    border-bottom: 1px solid #180976;
}

.glyphicon-menu-right {
	display: inline-block;
	position: absolute;
	top: 50%;
}

.img {
	height: 15vw;
	width: auto;
}

.iconContainer{
    display: flex;
    margin: 0 7.5% 25% 7.5%;		
    width: 12.5vw;
    height: 12.5vw;
    z-index: 0;
    border: 1px solid #180976;
    background-color: #fff;
    justify-content: center;
    align-items: center;
}

.iconContainer:hover {
	border: 1px solid #000;
}

.iconContainer > .iconTitle {
	width: 75%;
	color: #7f7cb8;
	font-size: 1.75vw;
	text-align: center;
	display: block;
	margin: auto;
}

.iconContainer:hover .img{
	display: none;
}

#galleryDetailContainer {
	height: 80vh;  
	margin-top: 5vh;
}

#galleryIconContainer {
	overflow: scroll;
	height: 80vh;
	margin-top: 5vh;
}

#carouselContainer > #carousel-example-generic {
	max-height: 80vh;  
	max-width: 100%; 
	position: absolute;  
	top: 0;  
	bottom: 0;  
	left: 0;  
	right: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.carousel-inner {
	max-height: 80vh;  
	margin: auto;
}

.carousel-inner > .item {
	height: 75vh;
	margin: auto;  
}

.carousel-inner > .item img {
	max-width: 55vw;
	max-height: 62.5vh;  
	display: block;
	margin-left: auto;
  	margin-right: auto;
}

.carousel-caption {
	color: #070422;
	font-size: 2.75vh;
}

#cc0, #cc1, #cc2, #cc3 {
	position: absolute;  
	top: 0;  
	bottom: 0;  
	left: 0;  
	right: 0;
	max-width: 60%;
	max-height: 60%;
	margin: auto;
}

.descriptionItems {
	height: 80vh;
}

.descriptionTitle {
	font-style: italic;
	font-size: 38px;
}

.seeGallery {
	font-size: 27.5px;
	color: #7f7cb8;
}

#closeImageCarousel{
	display: none;
	font-size: 27.5px;
	color: #7f7cb8;
	position: absolute;
	right: 3vw;
	z-index: 2;
}

.carousel-control.left, .carousel-control.right {
	background-image: none;
	color: #7f7cb8;
}

@media (max-width: 991.98px) {

	.iconContainer {
		display: inline-block;
		color: #070422;		
		width: 10vh;
		height: 10vh;
		z-index: 0;
		border: 1px solid #180976;
		background-color: #dbddec;
		margin: 2.5vh 7.5vw;
	}

	.iconContainer > .iconTitle {
		width: 75%;
		color: #180976;
		font-size: 2.25vh;
		text-align: center;
		display: flex;
	  	justify-content: center;
	  	align-items: center;
		text-wrap: wrap;
		line-height: 3vh;
	}

	#galleryDetailContainer {
		height: 75vh;
		margin-top: 0vh;
	}

	.carousel-inner {
		max-height: 60vh;  
		margin: auto;
	}

	.carousel-inner > .item {
		height: 60vh;
		margin: auto;  
	}

	.carousel-inner > .item img {
		max-width: 70vw;
		max-height: 60vh;  
		display: block;
		margin-left: auto;
  		margin-right: auto;
	}
	
	#galleryIconContainer {
		overflow: auto;
		white-space: nowrap;
		height: 15vh;
		position: absolute;
		bottom: 0vh;
		background-color: #dbddec;
	}

	.carousel-caption {
		color: #070422;
		font-size: 2.25vh;
	}

	#cc0, #cc1, #cc2, #cc3, .img-fluid {
		position: absolute;  
		top: 0;  
		bottom: 0;  
		left: 0;  
		right: 0;
		max-width: 75%;
		max-height: 100%;
		margin: auto;
	}
	
}