style.css

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
.header .active {
  font-weight: 900;
  outline: none; }

.header .navbar-brand {
  font-size: 1.75em;
  font-weight: 900;
  outline: none;
  font-family: 'Varela Round', sans-serif; }

.image-detail .panel-body {
  text-align: center; }

.image-detail img, .image-detail video {
  max-width: 100%; }

.image-preview {
  display: inline-block;
  position: relative; }
  .image-preview .inset {
    position: absolute;
    bottom: 5px;
    left: 0px;
    width: 100%;
    background-color: #fff;
    text-align: center;
    opacity: .7; }
  .image-preview .glyphicon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    opacity: .6;
    color: #fff; }
  .image-preview img {
    height: 250px;
    width: 250px;
    display: inline-block; }
  .image-preview video {
    height: 250px;
    width: 250px;
    vertical-align: middle;
    background-color: #000; }

@media (min-width: 990px) {
  .image-preview img {
    height: 250px;
    width: 250px; }
  .image-preview video {
    height: 250px;
    width: 250px; } }

.black {
  color: black; }

.list-group-item a:active {
  outline: none; }

.container {
  background-color: #9BC43A; }

.topic {
  text-align: center; }
  .topic .image-preview {
    animation: fadein .65s ease-out; }

@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1.0; } }