/*
 * Styles for glossary page
 */
body.alias-glossary #block-digitalid-page-title h1{
  background: url(/themes/custom/digitalid/images/photo_glossary.svg) no-repeat center top;
  padding-top: 2em;
  background-size: 2em;
} 

/*
 * Styles for teaser views of articles
 */
article.node--type-article.node--view-mode-teaser .field--name-title h2 {
  margin: 1em 0;
  font: normal normal 500 18px/24px Noto Sans;
  color: #202020;
  max-height: 2lh;
  min-height: 2lh;
  overflow: hidden;
}

article.node--type-article.node--view-mode-teaser .field--name-field-summary {
  margin: 1em 0;
  height: 3em;
  /* fallback for 2lh below */
  height: 2lh;
  overflow: hidden;
  color: #474747;
}

article.node--type-article.node--view-mode-teaser .node__links ul li,
article.node--type-article.node--view-mode-teaser .field--name-field-category {
  padding: 0 0.5em 0 0;
}

article.node--type-article.node--view-mode-teaser .node__links a,
article.node--type-article.node--view-mode-teaser .field--name-field-category a {
  padding: 0.5em 0.75em;
  border-radius: 0.5em;
  color: #ffffff;
  background-color: #009EDB;
  display: inline-block;
}

/*
 * Styles for full view of articles and videos
 */
.page-node-type-article #block-digitalid-page-title {
  text-align: center;
}

.page-node-type-article #block-digitalid-page-title h1 span {
  font-size: 48px;
  font-weight: bold;
}
.page-node-type-page #block-digitalid-page-title h1 span {
  font-size: 48px;
  font-weight: bold;
}

.page-node-type-article .field--name-field-category .field__item a,
.page-node-type-article .field--name-field-audience .field__item a,
.view-node-tags .field-content a {
  background: var(--unnamed-color-009edb) 0% 0% no-repeat padding-box;
  color: #FFFFFF;
  padding: 5px 15px;
  border-radius: 10px;
  opacity: 1;
}

.view-node-tags .field-content {
  text-align: center;
}

.page-node-type-article .field--name-field-category .field__item,
.page-node-type-article .field--name-field-audience .field__item {
  text-align: center;
}

/*
 * Styles for teaser views of videos
 */
article.node--type-video.node--view-mode-teaser .field--name-title h2 {
  margin: 1em 0;
  font: normal normal 500 18px/24px Noto Sans;
  color: #202020;
}

article.node--type-video.node--view-mode-teaser .field--name-field-body {
  margin: 1em 0;
  height: 3em;
  /* fallback for 2lh below */
  height: 2lh;
  overflow: hidden;
  color: #474747;
}

article.node--type-video.node--view-mode-teaser .node__links ul li,
article.node--type-video.node--view-mode-teaser .field--name-field-category {
  padding: 0 0.5em 0 0;
}

article.node--type-video.node--view-mode-teaser .node__links a,
article.node--type-video.node--view-mode-teaser .field--name-field-category a {
  padding: 0.5em 0.75em;
  border-radius: 0.5em;
  color: #ffffff;
  background-color: #009EDB;
  display: inline-block;
}

/*
 * Styles for full view of articles and videos
 */
.page-node-type-video #block-digitalid-page-title {
  text-align: center;
}

.page-node-type-video #block-digitalid-page-title h1 span {
  font-size: 48px;
  font-weight: bold;
}

article.node--type-video.node--view-mode-full .field--name-field-video .field__item {
  text-align: center;
}

/*
 * Styles for teaser views of faqs
 */
article.node--type-faq.node--view-mode-teaser .node__content {
  border-bottom: 2px solid #009EDB;
}
article.node--type-faq.node--view-mode-teaser .field--name-title h2 {
  padding: 1em 0;
  color: #202020;
  background: url(/themes/custom/digitalid/images/icon_plus.svg) no-repeat 97% center;
  padding-right: 45px;
  font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-18)/var(--unnamed-line-spacing-24) var(--unnamed-font-family-noto-sans);
  padding-left: 15px;
  margin: 0px;
}
article.node--type-faq.node--view-mode-teaser .collapse  , article.node--type-faq.node--view-mode-teaser .collapsing{
  padding-left: 30px;
  padding-right: 45px;
}
article.node--type-faq.node--view-mode-teaser div[aria-expanded="true"] .field--name-title h2 {
  background-image: url(/themes/custom/digitalid/images/icon_minus.svg);
}

article.node--type-faq.node--view-mode-teaser .field--name-body {
  font-weight: bold;
  margin: 1em 0;
  color: #474747;
}

article.node--type-faq.node--view-mode-teaser .node__links ul li {
  padding: 0 0.5em 0 0;
}

article.node--type-faq.node--view-mode-teaser .node__links a {
  padding: 0.5em 0.75em;
  border-radius: 0.5em;
  color: #ffffff;
  background-color: #009EDB;
  display: inline-block;
}

#block-digitalid-content .field--name-field-category .field__item {
  margin-bottom: 2em !important;
}

.page-node-type-article .region.region-content {
  margin-bottom: 4em;
}
.path-node div#block-digitalid-page-title h1 {
  margin-bottom: 0.3em !important;
  margin-top: 0.3em !important;
}
.addtoany_list.a2a_kit_size_32 > a {
  font-size: unset !important;
  padding: 0px;
  margin-right: 7px;
  margin-left: 7px;
}
.path-node.page-node-type-article li {
  font: normal normal normal 16px/26px Noto Sans !important;
}
.page-node-type-article .field.field--name-field-title.field--type-string.field--label-hidden.field__item {
  font: normal normal 500 18px/24px Noto Sans;
}
.page-node-type-article article .field--name-field-category .field__item {
  text-align: left !important;
}
.page-node-type-article article .field.field--name-field-media.field--type-entity-reference.field--label-hidden.field__item {
  margin-top: 20px;
}
.page-node-type-article .field.field--name-field-counter.field--type-string.field--label-hidden.field__item {
  margin-left: 15px;
}
.page-node-type-article article .paragraph .field--name-field-body ol {
  padding-left: 0;
}
.field.field--name-field-summary.field--type-string-long.field--label-hidden.field__item{
    min-height: 2lh;
    max-height: 2lh;
    overflow: hidden;
}
.page-node-type-video .field--name-field-video img.img-fluid.image-style-large-wide {
  cursor: pointer;
}
.page-node-type-video article.node--type-video.node--view-mode-full .field--name-field-video .field__item {
  position: relative;
  display: inline-block;
}
.page-node-type-video article.node--type-video.node--view-mode-full .field--name-field-video .field__item img.img-fluid.image-style-large-wide {
  width: 100%;
  height: auto;
}
.page-node-type-video article.node--type-video.node--view-mode-full .field--name-field-video .field__item .overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50px, -50px);
  z-index: 1;
  cursor: pointer;
}
.page-node-type-video article.node--type-video.node--view-mode-full .field--name-field-video .field__item .overlay img.img-o {
  width: 100px;
}
.page-node-type-video article.node--type-video.node--view-mode-full .field.field--name-field-video.field--type-entity-reference.field--label-visually_hidden {
  display: flex;
  justify-content: center;
}
/* Extra large devices (larger desktops) */
@media only screen and (min-width: 1280px) {
  /* CSS styles for extra large devices */
} 

/* Large devices (laptops and larger desktops) */
@media only screen and (min-width: 992px) and (max-width: 1280px) {
}

/* Medium devices (landscape tablets and medium-sized desktops) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .views-view-responsive-grid.views-view-responsive-grid--horizontal {
      --views-responsive-grid--column-count: 2 !important;
  }

}

/* Small devices (portrait tablets and small desktops) */
@media only screen and (max-width: 1200px) {
  .paragraph .field--name-field-title {
      width: 85% !important;
  }
}

/* Extra small devices (phones) @media only screen and (max-width: 575px) */

@media only screen and (max-width: 767px) {
  article.node--type-article.node--view-mode-teaser .field--name-title h2 {
    min-height: auto;
  }
  .row.col-6.paragraph.paragraph--type--media-and-text.paragraph--view-mode--default {
    width: 100%;
  }
  .paragraph .field--name-field-title{
    width: 80% !important;
  }
  .views-view-responsive-grid.views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 1 !important;
  }
  .page-node-type-article #block-digitalid-page-title h1 span {
    font-size: 24px;
  }
  .block-views-blockrelated-articles-block-1 > h2, .block-views-blockrelated-articles-block-2 > h2 {
      font-size: 24px;
  }
}