.newsroom {

  .slider .swiper-wrapper .swiper-slide .slider-image {
    width: 20rem;
    height: 35rem;

    @media screen and (orientation: portrait) and (max-width: 640px) {
      width: 13rem;
      height: 30rem;
    }
  }

  .slider .swiper-wrapper .swiper-slide .slider-image .overlay {
    background-color: unset;
    opacity: unset;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slider-image svg {
    /*filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.6));*/
    opacity: 0.6;
    fill: #fff;
    width: 10rem;
    height: auto;
    transition: opacity 500ms;
  }

  .slider-image:hover .image svg, .slider-image:hover .overlay svg {
    opacity: 0.9 !important;
  }

  .slider-image {
    .blog {
      display: initial;
      height: 100%;

      div.image {
        background-color: var(--blogColor);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        height: 100%;
        width: 100%;
        @media screen and (orientation: portrait) and (max-width: 640px) {
          display: flex;
        }


        >.lead {
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            margin-inline: 40px;
            @media screen and (max-width: 640px) {
              margin-inline: 20px;
            }
          }

          p {
            font-size: 1.5rem;
            line-height: 2.1rem;
          }
        }

        >:not(.lead) {
          position: absolute;
          margin-top: 50px;
          margin-bottom: 50px;
          @media screen and (max-width: 640px) {
            margin-top: 20px;
            margin-bottom: 20px;

          }
        }

        svg {
          opacity: 0.6;
          position: absolute;
          bottom: 0;
          width: 70px;
          left: 50%;
          transform: translateX(-50%);

          @media screen and (max-width: 640px) {
            width: 50px;
          }
        }
      }

      .img-overlay {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;


        img {
          /*height: 100%;*/
          height: 70%;
          opacity: 0.1;
          right: -5px;
          position: absolute;
        }

        svg {
          height: 100%;
          width: 100%;
          opacity: 0.2;
          right: -35px;
          position: relative;
        }
      }

    }
  }
}


body.show-overlay {
  overflow: hidden;
}

.yt-overlay {
  overscroll-behavior: contain;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(125, 132, 162, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 11;
  overflow: auto;
}

.overlay-content {
  position: relative;
  width: 90%;
  max-width: 800px;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.video-container {
  position: relative;
  max-width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

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

/* Media query for landscape orientation */
@media (orientation: landscape) and (max-height: 500px) {
  .video-container {
    padding-bottom: 50%; /* This ratio can be adjusted for better fit */
  }
}

#closeYTOverlayBtn {
  width: 40px;
  align-self: center;
  color: #fff;
  cursor: pointer;
  fill: #ffffff;
}

.bloglist {
  ul {
    li {
      padding-top: 10px;
      padding-left: 0;


      div.image {
        max-width: 150px;
        max-height: 300px;
        @media screen and (orientation: portrait) and (max-width: 640px) {
          display: flex;
        }
      }

      &::before {
        content:"";
      }
    }
  }


  .blog {
      & .content-section {
      @media screen and (orientation: portrait) and (max-width: 640px) {
        word-break: break-word;
      }
    }
      
    & div.content-section {
      @media screen and (orientation: portrait) and (max-width: 640px) {
        text-align: left;
    
      }
    }

    div.blog-date {
      padding: 0 1.25rem;
      transform: unset;
      width: unset;
    }

    div.image {
      background-color: var(--blogColor);
      width: 250px;
      aspect-ratio: 4 / 7;
      display: flex;
      flex-direction: column;
      align-items: end;
      position: relative;

      img {
        height: 70%;
        opacity: 0.1;
        position: absolute;
        right: -5px;
      }

      .lead span {
        -webkit-line-clamp: 5;
      }
    }

    div:not(.image) {
      flex: 1;
    }
  }
}

.blog {
  --grey: #5e6f7f;
  --blogColorOpacity: 1;

  --blue: rgba(76, 105, 133, var(--blogColorOpacity));
  --maroon: rgba(142, 42, 65,  var(--blogColorOpacity));
  --orange: rgba(255, 145, 0,  var(--blogColorOpacity));
  --green: rgba(82, 105, 71,  var(--blogColorOpacity));
  --red: rgba(186, 45, 32,  var(--blogColorOpacity));
  --brown: rgba(111, 77, 12,  var(--blogColorOpacity));


  display: flex;

  &.grey {
    --blogColor: var(--grey)
  }
  &.blue {
    --blogColor: var(--blue);
  }
  &.green {
    --blogColor: var(--green)
  }
  &.brown {
    --blogColor: var(--brown)
  }
  &.orange {
    --blogColor: var(--orange)
  }
  &.red {
    --blogColor: var(--red)
  }
  &.maroon {
    --blogColor: var(--maroon)
  }

  &>div.blog-text {
    flex: 1;
  }

  & > div.blog-sidebar {
    width: 250px;
    
    @media screen and (orientation: portrait) and (max-width: 640px) {
      display: none;
    }

    div.image {
      background-color: var(--blogColor);
      width: 250px;
      aspect-ratio: 4 / 7;
      display: flex;
      flex-direction: column;
      align-items: end;
      position: relative;

      img {
        height: 70%;
        opacity: 0.1;
        position: absolute;
        right: -5px;
      }
    }
  }

  & > div.image {


    position: relative;
    svg {
      opacity: 0.15;
      right: -7px;
      position: relative;
    }

    @media screen and (orientation: portrait) and (max-width: 640px) {
        display: none;
    }



    p, span {
      color: white;
    }

    .lead {
      flex-grow: 1;
      span {
        margin-inline: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 10;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }


  }

  div.blog-date {
    padding: 0 1.25rem;
    @media screen and (orientation: portrait) and (max-width: 640px) {
      padding: 0;
      width: calc(100% + 2.5rem);
      transform: translateX(-1.25rem);
    }

    hr {
      margin: 0;
      background-color: var(--blogColor);
    }

  }

  .blog-text {
    /*position: relative;*/
    display: flex;
    flex-direction: column;

    .blog-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .blog-nav {
    text-align: left;
    /*height: 90px;*/
    /*bottom: 0;*/
    /*position: absolute;*/
    padding-top: 10rem;
    margin-top: auto;

    @media screen and (orientation: portrait) and (max-width: 640px) {
      text-align: center;
    }


    .blog-backtolist {
      padding-bottom: 40px;
    }


    .blog-prevnext {
      display: flex;

      div {
        flex: 1;
      }

      @media screen and (orientation: portrait) and (max-width: 640px) {
        justify-content: space-around;
      }

      a {
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1rem;
        color: #192A33;
        line-height: 1.2rem;
        font-family: "T-Star-Regular", Sans-Serif;
        font-weight: 400;
      }
    }
  }


  div.content-section {
    @media screen and (orientation: portrait) and (max-width: 640px) {
      text-align: center;
    }
  }
}


.touch {
  .applicationField.slider {
    .overlay2 {
      opacity: 1;
    }
  }
}


.no-touch {
  .applicationField.slider {
    .overlay2 {
      &:hover {
        opacity: 1;
      }
    }
  }
}

.applicationField.slider {
  .overlay2 {
    opacity: 0;
    display: block;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 400ms;
    text-decoration: none;


    @media only screen and (max-width: 40em) {
      display: grid;
      grid-template-rows: 64% 36%;
      background-color: unset;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    }

    span {
      display: block;
      padding: 0 40px;
      text-align: center;
      color: #52646E;
      @media only screen and (max-width: 40em) {
        color: #ffffff;
        place-self: end start;
        text-align: left;
        padding-left: 20px;
        padding-right: 20px;
      }


      &.title {
        font-size: 2.5rem;
        line-height: 3.5rem;
        font-family: "T-Star-Regular", Sans-Serif;
        font-weight: 400;
        padding-top: 25%;
        padding-bottom: .625rem;

        @media only screen and (max-width: 40em) {
          padding-bottom: 0;
          line-height: 1;
        }
      }

      &.deadline {
        font-size: 1.5rem;
        line-height: 2.1rem;
        font-family: "T-Star-Light", Sans-Serif;
        font-weight: 200;




        @media only screen and (max-width: 40em) {
          font-family: "T-Star-Regular", Sans-Serif;

          time {
            text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
            font-family: "T-Star-Bold", Sans-Serif;
            font-weight: 600;

            @media only screen and (max-width: 40em) {
              &::before {
                content: '\A';
                white-space: pre;
              }
            }
          }
        }
      }
    }
  }
}

#cookieBanner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background: #000;
}
#cookieBannerContent {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 480px;
  z-index: 99;
  padding: 30px 30px 30px 35px;
  background: white;
  border: 1px solid black;
}
.banner-inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
}
.banner-text {
  padding: 5px 0px 0px 0;
  margin-right: 30px;
  max-width: 380px;
}
.banner-text p, .banner-text a {
  font-size: 16px;
  line-height: 1.4em;
}
#cookieConsent{
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  width: 18px;
  font-size: 35px;
}

body.show-cookie-alert #cookieBanner {
  display: block;
}