/* HEADER CUSTOM */

.custom-widget-container {
  display: flex;

  width: 100%;
}

.custom-widget-posts {
  display: flex;

  flex-direction: column;

  width: 70%;
}

.custom-widget-posts-video {
  width: 65%;
}

.custom-video-widget-wrapper {
  width: 50%;
}

.custom-widget-text-container,
.second-custom-widget-text-container {
  display: flex;

  width: 30%;
}

.custom-widget-text {
  padding: 50px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-start;

  height: 100%;

  height: 745px;
}

.custom-widget-text-video-container {
  width: 60%;

  flex-direction: column;
}

.button-container {
  display: flex;

  justify-content: center;

  align-items: center;

  flex: 1;
}

.custom-widget-text-video {
  background-color: #eaeaea75;
}

.custom-widget-text-video p {
  margin: 0 0 44px 0;
}

.custom-widget-space {
  width: 20%;
}

.custom-widget-text h1 {
  font-size: 60px;
}

.custom-widget-text-video h1 {
  position: absolute;

  width: 540px;

  left: 122px;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  line-clamp: 3;

  -webkit-box-orient: vertical;
}

.custom-widget-excerpt-video {
  width: 100%;

  display: flex;

  justify-content: flex-end;
}

.custom-widget-excerpt-video .excerpt-paragraph {
  position: absolute;

  width: 366px;

  margin: 70px 0 0 0;

  left: 287px;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  line-clamp: 3;

  -webkit-box-orient: vertical;
}

.custom-widget-text p {
  font-size: 22px;

  color: #656a77;
}

.big-post,
.big-post-second {
  background-size: cover;

  background-repeat: no-repeat;

  height: 745px;

  display: flex;
}

.big-post-info-conatiner {
  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-start;

  height: 100%;

  padding: 50px;

  width: 80%;
}

.big-post-info-conatiner-mobile {
  display: none;
}

.big-post-info-conatiner h2 {
  font-size: 60px !important;

  font-weight: 700 !important;
}

.big-post-info-conatiner p {
  font-size: 22px;

  margin: 0 0 44px 0;
}

.read-more-button,
.read-more-button-second {
  width: 250px;

  height: 50px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: #792777;
}

.read-more-button-text,
.read-more-button-img,
.read-more-button-text-second,
.read-more-button-img-second {
  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;
}

.read-more-button-text,
.read-more-button-text-second {
  width: 200px;

  color: #fff;

  font-weight: 700;

  font-size: 12px;
}

.read-more-button-img,
.read-more-button-img-second {
  width: 50px;
}

.read-more-button-img img,
.read-more-button-img-second img {
  width: 15px;
}

.big-post-play-conatiner {
  display: flex;

  flex: 1;

  justify-content: flex-end;

  align-items: flex-end;
}

.big-post-play-conatiner img {
  max-width: 120px !important;

  width: 120px !important;

  height: 120px !important;
}

.big-post-play-conatiner-mobile {
  display: none;
}

.small-post-number {
  color: #787d88;

  font-size: 24px;

  font-weight: 700;
}

.small-post-number-video {
  color: #008ab4;
}

.small-post-title {
  color: #1d212c !important;

  font-size: 20px !important;
}

.small-posts-video .small-post-title.small-post-title-video {
  color: #ffffff !important;
}

.small-post-cat-container {
  display: flex;

  gap: 5px;
}

.small-post-cat {
  color: #656a77;

  font-size: 14px;

  margin: 0;
}

.big-post img {
  max-width: 100%;

  height: auto;
}

.small-posts {
  display: flex;
}

.small-posts-video {
  background-color: #282d34;
}

.small-post {
  font-size: 18px;

  cursor: pointer;

  flex: 1;

  padding: 37px 60px 10px 0;
}

.small-posts-video .small-post {
  padding: 60px 60px 60px 60px;
}

/* SECOND CUSTOM */

.img-boxes-container {
  margin: 80px 0 0 0;

  /* height: 65vh; */

  display: flex;
}

.text-container {
  width: 49%;

  display: flex;

  justify-content: flex-end;
}

.text-container-wrapper {
  width: 70%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 0 150px 0 0;
}

.text-container-wrapper h2 {
  font-size: 40px;
}

.text-container-wrapper p {
  font-size: 18px;

  color: #535353;
}

.image-container {
  width: 100%;

  display: flex;

  justify-content: center;

  position: relative;
}

.custom-html-widget-blue {
  height: 622px;

  width: 638px;

  background-color: #1b6f96;

  opacity: 46%;

  position: absolute;

  z-index: -1;

  left: 0;

  top: -102px;
}

.custom-html-widget-purple {
  height: 240px;

  width: 240px;

  background-color: #792777;

  opacity: 56%;

  position: absolute;

  bottom: -88px;

  right: -131px;

  z-index: -1;
}

.custom-html-widget-image {
  width: 960px;

  height: auto !important;

  margin: 0 0 0 120px;
}

/* SECOND CUSTOM POST */

.second-custom-widget-posts {
  display: flex;

  width: 100%;
}

.big-post-small-post-container {
  width: 70%;
}

.second-big-post-small-post-container {
  width: 100%;
}

.big-post-info-conatiner.second-big-post-info-conatiner {
  justify-content: center;

  height: 745px;

  padding: 0 90px 0 0;
}

.second-big-post-title-conatiner {
  margin: 0 0 20px 0;

  height: 280px;
}

.second-big-post-title-conatiner h1 {
  position: absolute;

  width: 725px;

  /* background: #792777;

  color: white; */

  /* padding: 10px 30px; */

  font-size: 60px !important;
}

.second-big-post-title-conatiner h1 span {
  background: #792777;

  /* color: #000; */

  padding: 10px 30px;

  -webkit-box-decoration-break: clone;

  box-decoration-break: clone;

  line-height: 80px;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  line-clamp: 3;

  -webkit-box-orient: vertical;
}

.big-post-info-conatiner.second-big-post-info-conatiner p {
  font-size: 14px;

  color: #848894;
}

.big-post-info-conatiner.second-big-post-info-conatiner .author {
  text-transform: uppercase;

  font-weight: 700;

  font-size: 15px;

  color: #181c27;
}

/* HIGHLIGHTS POSTS */

.latest-post-container {
  display: flex;

  flex-direction: column;

  gap: 70px;
}

.post-title h2 {
  color: #1d212c !important;

  font-size: 20px !important;
}

.post-cat-container {
  display: flex;

  gap: 5px;
}

.small-post-cat-link {
  font-weight: 400 !important;

  color: #787d88 !important;
}

/* CUSTOM BUTTON */

.custom-button,
.custom-news-button {
  display: flex;

  gap: 1px;
}

.custom-button-text {
  display: flex;

  justify-content: center;

  align-items: center;

  width: 200px;

  height: 50px;

  color: #fff;

  font-weight: 700;

  font-size: 12px;

  background-color: #792777;
}

.custom-button-img {
  display: flex;

  justify-content: center;

  align-items: center;

  width: 50px;

  height: 50px;

  background-color: #792777;
}

.custom-button-img img {
  width: 15px;
}

/* FORM HEADER */

.form-header-conatiner {
  display: flex;

  flex-direction: column;

  width: 100%;

  height: 800px;
}

.form-header-wrapper {
  display: flex;

  width: 100%;

  height: 100%;
}

.first-form-header-wrapper {
  width: 25%;

  height: 100%;
}

.form-header-square {
  height: 50%;

  width: 100%;

  background: rgba(121, 39, 119, 0.46);
}

.second-form-header-wrapper {
  width: 10%;

  height: 100%;

  display: flex;

  align-items: end;
}

.form-header-symbol {
  background: #eceaea;

  height: 50%;

  width: 100%;
}

.third-form-header-wrapper {
  width: 65%;
}

.form-header-img {
  height: 100%;

  width: 100%;

  background-repeat: no-repeat;

  background-size: cover;
}

.form-header-title-container {
  display: flex;

  height: 50px;
}

.form-header-title-wrapper {
  position: absolute;

  background: #792777;

  padding: 4px 40px;

  left: 160px;

  bottom: -28px;
}

.form-header-title-wrapper h1 {
  font-size: 60px;

  color: #fff !important;
}

/* CA PLAY */

.elementor-widget-play_header {
  width: 100%;
}

.play-header {
  display: flex;
  width: 100%;
  min-height: 600px;
  gap: 40px;
  overflow: hidden;
}

.play-header__content {
  display: flex;
  flex-direction: column;
  width: 30%;
  gap: 20px;
}

.play-header__title {
  font-size: 40px;
  line-height: 56px !important;
}

.play-header__description {
  font-size: 14px;
  color: #848894;
}

.play-header__categories {
  display: flex;
  gap: 5px;
  margin: 0 0 20px 0;
}

.play-header__category {
  color: #000 !important;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e5e5e5;
  border-radius: 7px;
  padding: 6px 20px 4px 20px;
}

.play-header__video {
  display: flex;
  width: 70%;
}

.play-header__video > div {
  width: 100%;
}

.categories-container {
  display: flex;
  gap: 5px;
  margin: 0 0 70px 0;
}

.all-category.play-header__category {
  padding: 8px 30px 6px 30px;
  font-size: 16px;
}

.elementor-widget-play_grid {
  width: 100%;
}

.video-container {
  margin-bottom: 100px;
}

.video-category-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.category-box {
  background: #008ab5;
  padding: 14px 30px 9px 30px;
  width: fit-content;
}

.category-box h2 {
  color: #ffffff !important;
  font-size: 24px !important;
  margin: 0;
}

.category-line {
  display: inline-block;
  height: 5px;
  background: #008ab5;
  width: auto;
  min-width: 30px; /* valfritt, ser ofta bättre ut */
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.featured-video h2 {
  font-size: 40px !important;
  margin: 15px 0 10px;
}

.featured-video h2 a {
  color: #15181f !important;
}

.featured-video p {
  color: #848894;
  font-size: 14px;
}

.video-sidebar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.video-card,
.featured-video {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.video-card img {
  width: 100%;
  height: auto;
}

.video-card h3 {
  font-size: 20px !important;
  margin: 10px 0 5px;
}

.video-card h3 a {
  color: #15181f !important;
}

.video-card .category {
  display: flex;
  gap: 10px;
}

.video-card .category a {
  font-size: 14px;
  font-weight: 500 !important;
  color: #787d88;
}

.more-button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

#load-more-videos {
  width: 240px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: #bfc3cf 1px solid;
  font-size: 12px;
  font-weight: 700;
  color: #181c27;
}

/* Mobile */
@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr;
  }

  .video-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1703px) {
  .custom-widget-text-video-container,
  .small-posts-video,
  .custom-video-widget-wrapper {
    display: none;
  }

  .big-post-info-video-conatiner-mobile {
    display: flex;

    flex-direction: column;

    height: auto;

    width: 100%;

    padding: 35px;
  }

  .custom-widget-posts-video {
    width: 100%;
  }
}

@media (max-width: 1203px) {
  .play-header {
    flex-direction: column-reverse;
    height: auto;
    padding: 10px;
    gap: 20px;
  }

  .play-header__title,
  .featured-video h2 {
    font-size: 20px !important;
    line-height: 32px !important;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .play-header__video,
  .featured-video,
  .play-header__content {
    width: 100%;
  }

  .play-header__content {
    gap: 10px;
  }

  .video-container,
  .categories-container {
    padding: 10px;
  }

  .first-form-header-wrapper,
  .second-form-header-wrapper {
    display: none;
  }

  .third-form-header-wrapper {
    width: 100%;
  }

  .form-header-title-wrapper {
    position: static;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;
  }

  .form-header-title-container {
    height: auto;
  }

  .form-header-title-wrapper h1 {
    font-size: 40px;
  }

  .big-post-info-conatiner-mobile.second-big-post-info-conatiner-mobile {
    display: flex;

    flex-direction: column;

    height: auto;

    width: 100%;

    padding: 35px;
  }

  .second-custom-widget-text-container {
    display: none;
  }

  .second-big-post-small-post-container .small-posts {
    display: none;
  }
}

@media (max-width: 950px) {
  .small-posts:not(.small-posts-video),
  .big-post-info-conatiner,
  .big-post-play-conatiner {
    display: none;
  }

  .big-post-info-conatiner-mobile:not(.big-post-info-video-conatiner-mobile) {
    display: flex;

    flex-direction: column;

    height: auto;

    width: 100%;

    padding: 35px;
  }

  .big-post-play-conatiner-mobile {
    display: flex;

    flex: 1;

    justify-content: flex-end;

    align-items: flex-end;
  }

  .big-post-play-conatiner-mobile img {
    max-width: 72px !important;

    width: 72px !important;

    height: 72px !important;
  }

  .big-post,
  .big-post-second {
    height: 420px;

    display: flex;
  }

  .big-post-info-conatiner-mobile h2,
  .second-big-post-info-conatiner-mobile h1 {
    font-size: 40px;

    font-weight: 700;

    line-height: 1.3 !important;
  }

  .big-post-info-conatiner-mobile p {
    font-size: 22px;

    margin: 0 0 23px 0;
  }

  .read-more-button {
    width: 250px;

    height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #792777;
  }

  .text-container-wrapper {
    width: 95% !important;
  }

  .text-container-wrapper h2 {
    font-size: 24px;
  }

  .form-header-conatiner {
    height: 50vh;
  }

  .form-header-title-wrapper h1 {
    font-size: 22px;
  }

  /* .img-boxes-container {

    height: 90vh !important;

  } */

  .img-boxes-container {
    flex-direction: column;
  }

  .text-container-wrapper {
    padding: 30px;
  }

  h1,
  h2 {
    line-height: 1.3 !important;
  }

  .big-post,
  .big-post-second {
    height: 30vh !important;
  }
}

@media (max-width: 1550px) {
  .custom-widget-text-container:not(.custom-widget-text-video-container) {
    display: none;
  }

  .custom-widget-posts,
  .second-custom-widget-posts {
    width: 100%;
  }

  /* SECOND CUSTOM */

  .custom-html-widget-purple,
  .custom-html-widget-blue {
    display: none;
  }

  .img-boxes-container {
    /* flex-direction: column; */

    margin: 0 0 0 0;
  }

  .custom-html-widget-image {
    margin: 0;
  }

  .custom-html-widget-image {
    width: 100%;
  }

  .text-container {
    width: 100%;

    justify-content: center;
  }

  .text-container-wrapper {
    padding: 0;

    width: 83%;

    background: #fff;
  }

  .small-posts {
    padding: 0 0 0 20px;
  }

  .big-post,
  .big-post-second {
    height: 70vh;
  }
}