/* It is recommended to place all your extra/additional CSS rules here */

#main-content .carousel .item-thumbnail {
  margin: 0 auto 10px auto;
  display: block;
  width: 70%;
  height: auto;
  max-height: 482px;
  max-width: 442px;
}

.leftalign {
  text-align: left;
}

.illustration {
  text-align: center;
  font-style: italic;
  margin: 20px;
}

.gradientbg {
  padding: 20pt;
  border-radius: 5pt;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.29) 0%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.29)), color-stop(78%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.29) 0%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.29) 0%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.29) 0%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.29) 0%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a000000', endColorstr='#00000000', GradientType=0);
}

@media (min-width: 992px) { 
  .widermodal .modal-dialog {
    width: 80%;
    max-width: 800pt;
  }
}

@media (min-width: 768px) { 
  .modal-dialog {
    margin-bottom: 200px !important;
  }
} 

.modal-dialog {
  margin-bottom: 200px;
}

.byline {
	text-align: center;
	margin: 1em 1em 3em;
	font-size: smaller;
}

.legend {
	text-align: center;
	margin: 0;
	padding: 0;
}

.caption {
	font-weight: bolder;
/*	text-align: center;
	font-size: smaller; */
}

.illustration {
	text-align: center;
	font-size: smaller;
	margin-top: 3em;
	margin-bottom: 2em;
}

.illustration img {
  max-width: 100%;
  height: auto;
}