/* Setup page and font */
html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  margin: 0;
  padding: 0;
}

/* Don't do the bottom space on the last paragraph in a div */
div p:last-child {
  margin-block-end: 0;
}

/* The title */
.mdl-layout__title {
  width: 100%;
}
.mdl-layout__title a {
  text-decoration: none;
  color: white;
}

/* The horizontal nav, for large screens */
.horizontal-nav .mdl-navigation .mdl-navigation__link:first-child {
  padding-left: 0;
}
.horizontal-nav .mdl-navigation .mdl-navigation__link:last-child {
  padding-right: 0;
}
.horizontal-nav .mdl-navigation .mdl-navigation__link.is-active {
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: white;
  text-decoration-thickness: 3px;
}
.horizontal-nav .mdl-navigation .mdl-navigation__link:hover {
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: white;
  text-decoration-thickness: 3px;
}

/* The vertical nav, for small screens without JS */
.vertical-nav, .vertical-nav .mdl-navigation {
  height: auto;
}
.vertical-nav .mdl-navigation {
  flex-direction: column;
  width: 100%;
}
.vertical-nav .mdl-navigation .mdl-navigation__link {
  line-height: normal;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* full-bleed header, above the main content */
.ppt-header {
  width: 100%;
  height: 60vh;
}
.img-slideshow {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
}
.img-slideshow .slide-inner {
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}
.img-slideshow .slide-description {
  color: white;
  background-color: #671715;
  min-width: 300px;
  max-width: 30%;
  padding: 20px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 15px;
}
.img-slideshow .slide-inner .mdl-button {
  margin-top: 10px;
  background-color: white;
}

/* The main content, centered with a maximum width */
.ppt-main {
  max-width: 1200px;
  margin: auto;
}

/* The page content */
.mdl-layout__content .content {
  padding: 20px;
  align-self:flex-start;
}

/* The banner */
.mdl-layout__content .banner {
  border-radius: 4px;
  padding: 10px 20px;
  margin-bottom: 0px;
}
.mdl-layout__content .banner p {
  font-size: 14px;
  line-height: 24px;
}

/* image figures */
figure {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}
figure img {
  max-height: 100%;
  max-width: 100%;
}
figure figcaption {
  font-style: italic;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* The sidebar */
.right-sidebar > div {
  margin-top: 20px;
}
.right-sidebar > div:first-child {
  margin-top: 0;
}
.ppt-card {
  border-radius: 2px;
}

/* The author card */
.author-card.mdl-card {
  width: 100%;
}
.author-card.mdl-card .mdl-card__media {
  background-color: initial;
}
.author-card.mdl-card .mdl-card__media img {
  margin: 0;
  /* TODO: decide on the max image height for thumbnails */
  max-height: 200px;
  max-width: 100%;
}
.author-card.mdl-card .mdl-card__supporting-text {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* The footer */
.mdl-mega-footer {
  margin-top: 20px;
}
.mdl-mega-footer .mdl-mega-footer--heading {
  margin-top: 24px;
  margin-bottom: 16px;
}
.mdl-mega-footer .mdl-mega-footer--link-list {
  color: #DADADA;
}
.mdl-mega-footer .mdl-mega-footer--bottom-section {
  display: flex;
  margin-bottom: 0;
}
.mdl-mega-footer .mdl-mega-footer--bottom-section .mdl-layout-spacer {
  min-width: 20px;
}

.mdl-list__item {
  cursor: initial;
}


.mdl-list__item-text-body {
  height: initial!important;
}
.mdl-list__item-primary-content {
  height: initial!important;
}
.mdl-list__item--three-line {
  height: initial!important;
}

/* the related pages list */
.related-pages-list {
  margin-top: 0px;
  padding-top: 0px;
  align-items: start;
}
.related-pages-list a {
  text-decoration: none;
}
.related-pages-list li:not(:last-child) {
  padding-bottom: 20px;
}
.related-pages-list .mdl-list__item-primary-content .related-page-image img {
  max-width: 100%;
  max-height: 200px;
}
.related-pages-list .mdl-list__item-primary-content .related-page-title {
  padding: 8px 0;
  display: block;
  margin: 0;
  font-size: 18px;
}
.related-pages-list .mdl-list__item-primary-content a .related-page-title {
  text-decoration: underline;
}
.related-pages-list .mdl-list__item-primary-content .related-page-description {
  padding: 0;
}
.related-pages-list .mdl-list__item {
  padding: 0;
}
.related-pages-list .mdl-list__item-primary-content .mdl-list__item-text-body {
  text-decoration: none;
}

/* format the scorecards to be a row on desktop, column on mobile */
.dl-scorecards {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  max-height: 4em;
  margin-bottom: 40px;
}
.dl-scorecards dt {
  padding: 2px 4px;
  font-weight: normal;
  border-left: 1px solid #bdbdbd;
}
.dl-scorecards dt:first-of-type {
  border: 0;
}
.dl-scorecards dd {
  margin: 0;
  padding: 1px;
  min-height: 1em;
  font-weight: 700;
  font-size: 20px;
  border-left: 1px solid #bdbdbd;
}
.dl-scorecards dd:first-of-type {
  border: 0;
}

/* vertical scorecards */
.dl-scorecards--vertical {
  display: initial;
  max-height: initial;
}
.dl-scorecard--verticals dd {
  min-height: initial;
  margin-bottom: 1em;
}
.dl-scorecards--vertical dt,
.dl-scorecards--vertical dd {
  border: 0;
}
/* the divider between the elements */
.dl-scorecards--vertical dd:after {
  content: '';
  display: block;
  border-bottom: 1px solid #bdbdbd;
  max-width: 5em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}
.dl-scorecards--vertical dd:last-of-type:after {
  margin: 0;
  border: 0;
}

.view-more-row {
  display: flex;
}

/* related items */
.related-items {
  padding: 0!important;
}
.related-items h2 {
  padding: 16px 16px 0 16px;
}
.related-items .view-more-row {
  padding: 0 20px 20px 20px;
}
.related-items .related-pages-list li:not(:last-child) {
  padding-bottom: 0; /* override the gap in the related pages list */
}
.related-items .related-pages-list li {
  align-items: start;
}

/* to slightly darken all thumbnail images */
.image-treatment {
  position: relative;
}
.image-treatment::after {
  background: rgba(0,0,0,0.05);
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* badges on images, used to display the type of library item */
.image-badge {
  position: absolute;
  left: 0;
  top: 10px;
  text-align: center;
  color: white;
  padding: 2px 10px;
}

.with-bullets ul, .with-bullets ol {
  list-style: initial;
}
.with-bullets li {
  display: list-item;
  overflow: initial;
}

/* format the projection facilities list */
.compact-list li {
  padding: 0;
  height: auto;
}
.compact-list li .material-icons {
  font-size: 25px;
  padding: 7.5px;
}

/* a gap between the non-first heading of projection facilities */
.compact-list h2 {
  margin-top: 20px;
}
.compact-list h2:first-of-type {
  margin-top: 0;
}

/* make the last item of the list right-aligned */
.compact-list .mdl-list__item-secondary-info {
  text-align: right;
}

.compact-list .avatar-padding {
  padding: 6px;
}

.upload-sidebar h2 {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.upload-sidebar .mdl-button {
  width: 100%;
}
.upload-sidebar .button-spacing {
  height: 1.5em;
}

.material-textfield {
  position: relative;
}
.material-textfield:not(:last-child) {
  margin-bottom: 20px;
}

.material-textfield > label {
  position: absolute;
  font-size: 1rem;
  left: 0;
  background-color: white;
  padding: 0 0.3rem;
  margin: 0 0.5rem;
  transform-origin: left top;
  pointer-events: none;
  top: 0;
  transform: translateY(-50%) scale(1);
}
.material-textfield > input, .material-textfield > textarea {
  font-size: 1rem;
  outline: none;
  border: 1px solid gray;
  border-radius: 5px;  
  padding: 1rem 0.7rem;
  width: 100%;
  box-sizing: inherit;
  resize: none;
}
.material-textfield.error > input, .material-textfield.error > textarea {
  border-color: red;
}
.material-textfield.error > label, .material-textfield.error > label .material-textfield.error > .error-message {
  color: red;
}
.material-textfield > input:focus, .material-textfield > textarea:focus {
  border-color: #671715;  
}
.material-textfield > input:focus + label, .material-textfield > textarea:focus + label {
  color: #671715;
}

/* for icons - make them maximum 50x40, but the correct ratio */
.svg-icon {
  max-width: 50px;
  max-height: 40px;
  height: auto;
}

.mdl-grid.no-spacing {
  padding: 0;
  margin-top: 20px;
}

.paywall-fade-out {
  position: relative;
}
.paywall-fade-out:after {
  content: "";
  height: 120px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  /* fallback if the more complex gradient isn't supported */
  background: linear-gradient(to bottom, rgba(255,255,255,0), white);
  background: linear-gradient(180deg, rgb(100% 100% 100% / 0) 0%, rgb(100% 100% 100% / 0.2275238037109375) 6.25%, rgb(100% 100% 100% / 0.413818359375) 12.5%, rgb(100% 100% 100% / 0.5641937255859375) 18.75%, rgb(100% 100% 100% / 0.68359375) 25%, rgb(100% 100% 100% / 0.7765960693359375) 31.25%, rgb(100% 100% 100% / 0.847412109375) 37.5%, rgb(100% 100% 100% / 0.8998870849609375) 43.75%, rgb(100% 100% 100% / 0.9375) 50%, rgb(100% 100% 100% / 0.9633636474609375) 56.25%, rgb(100% 100% 100% / 0.980224609375) 62.5%, rgb(100% 100% 100% / 0.9904632568359375) 68.75%, rgb(100% 100% 100% / 0.99609375) 75%, rgb(100% 100% 100% / 0.9987640380859375) 81.25%, rgb(100% 100% 100% / 0.999755859375) 87.5%, rgb(100% 100% 100% / 0.9999847412109375) 93.75%, rgb(100% 100% 100%) 100% );
}

.article-paywall {
  margin-top: -20px;
  position: relative;
  z-index: 1;
  width: 100%;
}
.article-paywall p {
  color: #794a01;
}

/* for a11y reasons */
.mdl-typography--headline {
  line-height: 1.5;
}

.download-options .mdl-button:not(:first-of-type) {
  margin-top: 10px;
}
.download-options .mdl-button {
  padding: 0;
}

.join-card h2 {
  margin-top: 0;
  margin-bottom: 20px;
}
.join-card .price {
  margin-top: 24px;
}
.join-card ul {
  text-align: left;
}
.join-card li {
  padding-left: 0;
  padding-right: 0;
}

.rewind-hgroup > .mdl-typography--display-2 {
  margin-bottom: 10px;
}
.rewind-hgroup > .mdl-typography--headline {
  margin-bottom: 24px;
}


@media not (max-width: 1000px) {
  /* hide the drawer button if small (or noscript) */
  .mdl-layout__drawer-button {
    display: none;
  }
  .mdl-layout__header-row {
    padding-left: 40px;
  }
}

@media not (min-width: 768px) {
  .dl-scorecards {
    display: initial;
    max-height: initial;
  }
  .dl-scorecards dd {
    min-height: initial;
    margin-bottom: 1em;
  }
  .dl-scorecards dd:last-of-type {
    margin-bottom: 2em;
  }
  .dl-scorecards dt,
  .dl-scorecards dd {
    border: 0;
  }
}

.embed-responsive-item {
  width: 100%;
}

/* 400px = the 300px min-width + the 5% padding on either side */
@media (max-width: 400px) {
  .img-slideshow .slide-description {
    min-width: calc(100% - 60px);
  }
}