.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 93%;
}

.responsive-wrap iframe {
  max-width: 100%;
}

.markdown-section .button {
  cursor: pointer;
  color: white;
  height: 38px;
  padding: 8px;
  background-color: #0A75BD;
  text-decoration: none;
  border-radius: .25rem;
}

.markdown-section a.button {
  cursor: pointer;
  color: white;
  text-decoration: none;
}

.markdown-section .badge {
    color: #fff;
    background-color: #6c757d;
    display: inline-block;
    padding: .25em .4em .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none;
}

.markdown-section a.badge {
  cursor: pointer;
  color: white;
  text-decoration: none;
}

.markdown-section .banner-image {
  width: 100%;
  /* width of container */
  height: 200px;
  /* height of container */
  object-fit: cover;
  object-position: 50% 50%;
}

.pagination-item, .pagination-item-title {
  opacity: .9 !important;
}

.pagination-item:not(:last-child) a .pagination-item-label, .pagination-item:not(:last-child) a .pagination-item-subtitle, .pagination-item:not(:last-child) a .pagination-item-title {
  opacity: .9 !important;
  transition: all .2s;
}

.markdown-section blockquote {
    margin: 1em 0;
}

.markdown-section blockquote ul {
  list-style: none;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: .5em;
  padding-bottom: 0;
}

.markdown-section blockquote ul li {
  padding-left: 0em;
}

.markdown-section blockquote ul li:before {
  content: '\2713';
  padding-right: 5px;
}

.reminders {
  overflow: visible;
  margin: 2em 0;
  padding: 1.5em;
  border-width: var(--blockquote-border-width, 0);
  border-style: var(--blockquote-border-style);
  border-color: var(--blockquote-border-color);
  border-radius: var(--blockquote-border-radius);
  background: var(--blockquote-background);
  color: var(--blockquote-color);
  font-family: var(--blockquote-font-family);
  font-size: var(--blockquote-font-size);
  font-style: var(--blockquote-font-style);
  font-weight: var(--blockquote-font-weight);
  quotes: "“""”""‘""’";
}

.reminders ul {
  list-style: none;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: .5em;
  padding-bottom: 0;
}

.reminders ul li {
  padding-left: 0em;
}

.reminders ul li:before {
  content: '\2713';
  padding-right: 5px;
}

.markdown-section {
    padding: 1rem 15px;
}

.sidebar {
    left: unset;
    right: 0;
}

@media screen and (max-width: 768px) {
    left: unset;
    right: - $sidebar-width;
}

body.close {
  .sidebar
    transform: - translateX($sidebar-width) ;
}

.sidebar + .content {
    margin-left: unset;
    margin-right: var(--sidebar-width);
    transition: right 250ms ease;
}

.app-nav {
    margin: 25px 60px 0px 0px;
    right: unset;
    left: 0;
    text-align: left;
}