@charset "utf-8";

.container-fluid {
	width: 90%;
}
.collectionTitle {
	text-align: center;
	padding-top: 2em;
}
.col-sm-3 , .col-sm-4 , .col-sm-5 , .col-sm-6, .col-sm-7, .col-sm-12 {
	padding-left:  .25em;
	padding-right: .25em;
}
.myMajorCol         {
	padding-left:  1.5em;
	padding-right: 1.5em;
}

/*This forces images smaller than their container to grow full size*/
.img-responsive {
	width: 100%;
}

img {
	padding-bottom: .5em;
}
.modal-header {
	padding:0;
}
button.close {
	font-size: 2em;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=70);
    opacity: .7;
	margin-right: 1em;
}
h2.modal-title {
	font-size: 1.5em;
	text-indent: 1em;
}
/* forces lightbox image to fill parent (must set height and width) but will maintain aspect ratio (only working well in landscape mode)
so now an image will be not be too huge when viewed (esp portrait images). it will olny expand to the height of the window more or less
but VH units not working on iOS so used media queries below to fix this*/
/*85vh will make height 90% of viewport*/
.bwMaintainRatio {
	width:  100%;
	height: 90vh;
	object-fit: contain;
}
.modal-footer {
	padding:0;
	margin: 0;
}
.modal-footer p{
	font-size: 1em;
	padding: 0;
	margin: 0;
	text-align:center;
}
.modal-footer a {
	font-size: 1em;
}

/*lightbox images appear too small with this in portrait mode so turned it off*/
@media (orientation:portrait){
	.bwMaintainRatio {
		height: inherit;
	}
}
/* iphone 4 - ipad Landscape */
@media (min-device-width: 320px) and (max-device-width: 1024px) and (orientation: landscape) {
	/*since VH units don't work on iOS*/
	.bwMaintainRatio {
		height: inherit;/* lightbox image will be very large unfortunately but have no choice*/
	}
	.modal-dialog {
		margin: 10px auto !important;/*reduce size of top margin*/
	}
	h2.modal-title {
		font-size: 1em;/*reduce font size*/
	}
}