/* OVERRIDES */
.markdown-section{
  font-size: 1.7rem;
  line-height: 1.5;
}

.markdown-section blockquote{
  color: auto;
}

/* VIDEO */

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* IMAGES */

.img-left{
  float: left;
  margin-right: 1em;
  clear: both;
}

.img-right{
  float: right;
  margin-left: 1em;
  clear: both;
}

.img-150px{ width: 150px; }
.img-200px{ width: 200px; }
.img-250px{ width: 250px; }
.img-300px{ width: 300px; }
.img-50pc{ width: 50%; }

.img-round{ border-radius: 50%}

hr{clear: both;}

.mobile-visible{
  display: none;
}
.mobile-hidden{
  display: inherit;
}

/*
  These rules only apply to screens less than 600px wide.
  They override rules placed earlier in this file.
*/
@media only screen and (max-width: 600px) {
  .img-50pc, .img-250px, .img-300px, .img-500px{
    width: 100%;
  }
  .img-left, .img-right{
    clear: both;
    float: none;
  }
  .mobile-visible{
    display: inherit;
  }
  .mobile-hidden{
    display: none;
  }
}