.figure {
    float: left;
    margin: 10px;
    width: auto;
    height: 220px;
}

.figure.minigallery {
    height: auto;
}

.figure img {
    display: inline;
    padding:1px;
    border:1px solid #DDDDDD;
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

.figure img:hover {
    border:1px solid #EEEEEE;
    opacity: 0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}

.figure .caption {
    width: 200px;
    text-align: center !important;
}

.figure p {
    margin-top: 0;
}

div.section h2 {
   padding-top: 30px;
   border-bottom: 1px solid #cccccc;
}

div.bottomnav {
    clear: left;
}

/* Front-page Example Showcase */
#showcase {
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin-bottom: 10px;
}
#showcase:after,
#showcase:before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  background: white;
  height: 16px;
  z-index: 2;
}
#showcase:before {
  bottom: -16px;
  box-shadow: 0px -8px 16px rgba(0,0,0,0.3);
}
#showcase:after {
  top: -16px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
}
#showcase .examples {
  margin: 0 auto;
  height: 300px;
  line-height: 0;
  /* Width and padding settings give the example showcase the same width
  as the page header on a big screen. On smaller screens, they both will
  have the same width anyway as the title header is responsive and gets narrower
  and the example showcase gets clipped by the overflow: hidden setting. */
  width: 88rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
#showcase .preview {
  /* Value is chosen through trial and error so that the examples fill out the 
  whole width which is defined in #showcase .examples */
  width: 172px;
  height: 100px;
  padding: 0;
  outline: 1px solid #ddd;
  background-position: left top;
  background-size: cover;
  overflow: hidden;
  position: relative;
  z-index: 0;
  transition: background-position 2s;
  display: block;
  float: left
}
#showcase .preview:hover {
  background-position: right bottom;
  outline: 2px solid #4682B4;
  z-index: 1;
}

/* Example Gallery */

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}
.gallery .imagegroup {
  display: inline-block;
  position: relative;
  /* Show 4 images per row, each image has 18px horizontal margin */
  width: calc(25% - 36px);
  margin: 12px 18px;
  /* For small screens */
  min-width: 140px;
}

.gallery .imagegroup:hover {
  text-decoration: none;
}
.gallery .image {
  background-size: cover;
  display: block;
  width: 100%;
  /* hack to make height depend on width, golden ratio*/
  padding-bottom: 75%;
  background-repeat: no-repeat;
  margin-bottom: 5px;
  overflow: hidden;
  transition: background-position 2s;
}
.gallery .image:hover {
  background-position: right bottom;
}

.gallery .image-title {
  font-size: .95em;
  display: block;
  line-height: 22px;
}