/*Loading*/
.loading {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  background-color: rgb(255 255 255 / 30%);
}

/*Magazin Categories*/
.magazin-desktop-categories *,
.magazin-desktop-tags * {
  transition: 0.3s;
  transition-timing-function: ease-out;
  -webkit-transition: 0.3s;
  -webkit-transition-timing-function: ease-out;
}
.magazin-desktop-categories {
  display: flex;
  gap: 25px;
  margin: 0 0 50px 0;
}
.magazin-desktop-categories label input[type="checkbox"] {
  position: absolute;
  top: 0px;
  left: -20px;
}
.magazin-desktop-categories label {
  height: 48px;
  padding: 18px 20px 18px 24px;
  display: flex;
  gap: 20px;
  color: #1b2482;
  text-align: center;
  font-family: "Roboto", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  border-radius: 34px;
  border: 1px solid #d1d3e6;
  position: relative;
  overflow: hidden;
  align-items: center;
  cursor: pointer;
}
.magazin-desktop-categories .nice-select.open .list > li:first-of-type {
  display: block;
}
.magazin-mobile-categories {
  display: flex;
}
.magazin-desktop-categories label:hover {
  border: 1px solid #1b2482;
}
.magazin-desktop-categories span.close-icon {
  display: flex;
}
.magazin-desktop-categories span.close-icon svg {
  width: 16px;
  height: 16px;
}
.magazin-desktop-categories label.active {
  border-radius: 34px;
  border: 1px solid #1b2482;
  background-color: #1b2482;
  color: #ffffff;
}
.magazin-desktop-categories label.active span.close-icon svg {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.magazin-desktop-categories label.active span.close-icon svg path {
  stroke: #ffffff;
}

/*Magazine Button*/
.article-button,
.article-button * {
  transition: 0.3s;
  transition-timing-function: ease-out;
  -webkit-transition: 0.3s;
  -webkit-transition-timing-function: ease-out;
}
.post-more {
  padding: 0 30px 30px 30px;
}
.article-button {
  width: 134px;
  height: 36px;
  display: flex;
  padding: 0 28px;
  align-items: center;
  position: relative;
  border-radius: 1000px;
  background: #f1f1f1;
}
.article-icon-link {
  position: absolute;
  display: flex;
  top: 4px;
  left: 4px;
  opacity: 0;
}
.article-icon-text {
  text-transform: uppercase;
  color: #1b2482;
  text-align: center;
  font-family: "Roboto", Sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
#magazin-articles article:hover .article-icon-link {
  opacity: 1;
}
#magazin-articles article:hover .article-icon-text {
  transform: translateX(16px);
  -webkit-transform: translateX(16px);
}
#magazin-articles article:hover .article-button {
  width: 143px;
}

/*Magazine article*/
#magazin-container {
  position: relative;
}
#magazin-articles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 70px;
}
#magazin-articles article {
  border: 1px solid #d1d3e6;
  border-radius: 20px 20px 0px 20px;
  background: #ffffff;
  box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0);
  transition: 0.3s;
  transition-timing-function: ease-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#magazin-articles article:hover {
  box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.25);
}
#magazin-articles .post-content {
  transition: 0.3s;
  transition-timing-function: ease-out;
  border-radius: 0px 0px 0px 20px;
}
/* #magazin-articles article:hover .post-content {
    border: 1px solid #FFFFFF;
} */
#magazin-articles .post-featured-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
#magazin-articles .post-title {
  padding: 25px 30px 25px 30px;
}
#magazin-articles .post-title {
  color: #1b2482;
  font-family: "Roboto", Sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
}
#magazin-articles .post-excerpt {
  color: #6c6d97;
  font-family: "Roboto", Sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  padding: 0 30px 25px 25px;
}
#magazin-articles .post-categories {
  position: absolute;
  top: 20px;
  left: 21px;
  z-index: 2;
}
#magazin-articles .category-link {
  padding: 10px 18px;
  background-color: #ffffff;
  color: #1b2482;
  border-radius: 100px;
}

/*Pagination*/
#magazin-pagination a {
  transition: 0.3s;
  transition-timing-function: ease-out;
}
#magazin-pagination {
  margin: 70px 0 0 0;
}
#page-links {
  display: flex;
  justify-content: center;
  gap: 5px;
}
#magazin-pagination .page-numbers {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 34px;
  color: #1b2482;
  text-align: center;
  font-family: "Roboto", Sans-serif;
  font-size: 19.5px;
  font-weight: 400;
  line-height: normal;
  border-color: #d1d3e6;
  position: relative;
}
#magazin-pagination .page-numbers:hover,
#magazin-pagination .page-numbers.current {
  border: 1px solid #d1d3e6;
}
#magazin-pagination .page-numbers.dots {
  border: 0px solid #d1d3e6;
}

.magazin-mobile-categories
  .select2-container--default
  .select2-selection--multiple {
  position: relative;
  border-radius: 10px;
  border: 1px solid #d1d3e6;
  background-color: #f1f1f1;
  padding: 16px;
  color: #1b2482;
  font-family: "Roboto", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}
.magazin-mobile-categories
  .select2-container
  .select2-search--inline
  .select2-search__field {
  width: 100% !important;
  color: #1b2482;
}
.magazin-mobile-categories
  .select2-container
  .select2-search--inline
  .select2-search__field::placeholder {
  color: #1b2482;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  border-radius: 34px;
  border: 1px solid #d1d3e6;
  padding: 18px 20px 18px 24px;
  line-height: normal;
  background-color: #ffffff;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: #ff0000;
}
/* Adjust Select2 Width */
.select2-container {
  width: 100% !important;
}

.magazin-desktop-tags ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.magazin-desktop-tags ul li > a {
  height: 48px;
  padding: 10px 20px 10px 20px;
  display: flex;
  gap: 20px;
  color: #1b2482;
  text-align: center;
  font-family: "Roboto", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  border-radius: 34px;
  border: 1px solid #d1d3e6;
  position: relative;
  overflow: hidden;
  align-items: center;
}

.magazin-desktop-tags {
  position: relative;
  margin: 80px 0 0 0;
}

.labels-selector {
  display: flex;
  gap: 20px;
}

@media (min-width: 768px) {
  .magazin-mobile-categories {
    display: none;
  }
  .magazin-categories-title {
    display: none;
  }
  .magazin-tags-title {
    display: none;
  }
}
@media (max-width: 1024px) {
  #magazin-articles {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 880px) {
  #magazin-articles {
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }
  .magazin-desktop-categories label {
    padding: 16px 18px 16px 21px;
    font-size: 16px;
  }
  #magazin-articles article {
    box-shadow: none;
  }
  #magazin-articles .post-title {
    line-height: 26.4px;
    font-size: 22px;
  }
  #magazin-articles .post-featured-image img {
    height: 220px;
  }
  #magazin-articles article .article-button {
    width: 138px;
  }
  #magazin-articles article .article-icon-link {
    opacity: 1;
  }
  #magazin-articles article .article-icon-text {
    transform: translateX(16px);
  }
  #magazin-pagination {
    margin: 30px 0 0 0;
  }
}
@media (max-width: 767px) {
  .magazin-desktop-categories {
    flex-direction: column;
  }
  .magazin-desktop-categories label {
    max-width: fit-content;
  }
  .magazin-mobile-categories {
    margin-bottom: 30px;
    display: none;
  }
  .magazin-desktop-categories label {
    border: 0;
    padding: 0;
  }
  .magazin-desktop-categories label:hover {
    border: 0;
  }
  .magazin-desktop-categories label.active {
    border-radius: 0;
    border: 0;
    background-color: transparent;
    color: #1b2482;
  }
  .magazin-desktop-categories label.active span.close-icon svg path {
    stroke: #1b2482;
  }

  .magazin-desktop-categories span.cat-name {
    order: 2;
  }
  .magazin-desktop-categories span.close-icon {
    order: 1;
  }

  .magazin-desktop-categories {
    gap: 0;
  }

  .magazin-categories-title,
  .magazin-tags-title {
    position: relative;
    border: 1px solid #d1d3e6;
    background: #fff;
    color: #1b2482;
    font-family: "Roboto", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    text-align: center;
    border-radius: 100px;
    line-height: 150%;
    padding: 16px 40px;
    height: 60px;
  }

  .drop-icon {
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='32' viewBox='0 0 12 32' fill='none'%3E%3Cpath d='M5.54038 21.9597C5.79422 22.2135 6.20578 22.2135 6.45962 21.9597L10.5962 17.8231C10.85 17.5693 10.85 17.1577 10.5962 16.9039C10.3424 16.65 9.9308 16.65 9.67696 16.9039L6 20.5808L2.32304 16.9039C2.0692 16.65 1.65765 16.65 1.40381 16.9039C1.14996 17.1577 1.14996 17.5693 1.40381 17.8231L5.54038 21.9597ZM5.35 9.80005L5.35 21.5L6.65 21.5L6.65 9.80005L5.35 9.80005Z' fill='%231B2482'/%3E%3C/svg%3E");
    width: 12px;
    height: 32px;
    top: 13px;
    right: 25px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .labels-selector {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 30px 30px 32px 30px;
    border-radius: 10px;
    background: #fff;
    -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.3);
    gap: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    z-index: 6;
    margin: 8px 0 0 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
      opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  }

  .magazin-desktop-tags ul {
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px 30px 32px 30px;
    border-radius: 10px;
    background: #fff;
    -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.3);
    gap: 19px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    z-index: 6;
    margin: 8px 0 0 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
      opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  }

  .magazin-desktop-categories.active .labels-selector,
  .magazin-desktop-tags.active ul {
    opacity: 1;
    visibility: visible;
    top: 60px;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }

  .magazin-desktop-categories.active .drop-icon,
  .magazin-desktop-tags.active .drop-icon {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}