@charset "UTF-8";
.mod-masonry-item {
  flex-direction: column;
  display: flex;
}
.mod-masonry-item .mod-masonry-item-content {
  order: 1;
}
.mod-masonry-image {
  margin-bottom: .5rem;
}
.modal-backdrop {
	opacity:inherit;
}
.modal-backdrop.show {
		animation:modalFadeIn 0.5s forwards;
	    background: var(--black-3);
	}
.masonryLayout {
  & > div {
    float: left;
  }
  .masonry-card {
    border-radius: 4px;
    overflow: clip;
    position: relative;
    .mod-articles-image {
      margin: 0;
      position: relative;
      z-index: 1;
      display: grid;
      place-content: center;
      cursor: pointer;
    }
    .masonry-card-image {
      position: relative;
      display: grid;
      palce-content: center;
      z-index: 1;
      cursor: pointer;
      overflow: clip;
      .magnify {
        position: absolute;
        inset: 0;
        content: '';
        z-index: 2;
        display: none;
        .magnify-icon {
          background: url(../images/MdiMagnifyPlusOutline.svg);
          height: 32px;
          width: 32px;
        }
      }
      &:hover {
        /*.mod-articles-image {
          img {
            animation: scale 0.3s forwards;
          }
        }*/
        .magnify {
          display: inherit;
          display: grid;
          place-content: center;
        }
      }
      /*&::before {
        position: absolute;
        content: '';
        inset: 0;
        background: linear-gradient(rgba(1, 163, 209, 0.5), rgba(0, 0, 0, 0.5));
        z-index: 2;
      }
      &:hover::before {
        position: absolute;
        content: '';
        inset: 0;
        background: rgba(1, 163, 209, 0.75);
        z-index: 2;
      }*/
    }
    .masonry-article-title {
      position: absolute;
      z-index: 5;
      bottom: 0;
      width: 100%;
      padding: 10px;
      color: var(--white-1);
      background:rgba(65, 88, 96, 0.7);
      .mod-masonry-title {
        margin: 0;
      }
    }
  }
  .modal.show {
    animation: modalFadeIn 0.5s forwards;
	  height:100%;
  }
	
  .modal-dialog {
    width: 100%;
    max-width: 100% !important;
    height: 100%;
    margin: 0;
    .modal-content {
      height: 100%;
      border-radius: 0px;
      /*background: var(--black-3);*/
		background:transparent;
      display: grid;
      .btn-close {
        color: var(--white-1);
        background: url(../images/close.svg);
		  opacity:1;
		  &:hover {
			  opacity:0.75;
		  }
        svg {
          fill: red;
          color: var(--white-1);
        }
      }
    }
    .masonry-card-body {
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4vw;
      place-content: center;
      .masonryFullImage {
        display: grid;
        place-content: center;
        justify-content: end;
        animation: fadeUp 0.3s forwards;
        figure {
          margin: 0;
          img {
            max-height: 80vh;
          }
        }
      }
      .mod-masonry-item {
        display: grid;
        place-content: center;
      }
      .mod-masonry-item-content, .mod-masonry-title, .mod-masonry-title a {
        color: var(--white-1);
      }
      .mod-masonry-item-content {
        animation: fadeUpIn 0.5s forwards;
        .readmore {
          margin-bottom: 0;
          & > a {
            margin: 0;
          }
        }
        .masonry-article-text {
          p:last-of-type {
            margin-bottom: 0;
          }
        }
        .mod-masonry-title, .masonry-article-text {
          margin-bottom: 2rem;
        }
      }
    }
  }
}

body:has(.modal.fade.show) {
  .dj-megamenu-wrapper {
    margin-left: -20px;
  }
}
.scaleSpin {
  img {
    animation: scaleSpin 0.3s forwards;
  }
}
.scaleSpinOut {
  img {
    animation: scaleSpinOut 0.3s forwards;
  }
}
.scaleSpinSmall {
  img {
    animation: scaleSpinSmall 0.3s forwards;
  }
}
.scaleSpinOutSmall {
  img {
    animation: scaleSpinOutSmall 0.3s forwards;
  }
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeUp {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes fadeUpIn {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes scaleSpin {
  from {
    transform: rotate(0) scale(1);
    filter: blur(0px);
    opacity: 1;
  }
  to {
    transform: rotate(5deg) scale(1.25);
    filter: blur(1px);
    opacity: 0.7;
  }
}
@keyframes scaleSpinOut {
  from {
    transform: rotate(5deg) scale(1.25);
    filter: blur(1px);
    opacity: 0.7;
  }
  to {
    transform: rotate(0) scale(1);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes scaleSpinSmall {
  from {
    transform: rotate(0) scale(1);
    filter: blur(0px);
    opacity: 1;
  }
  to {
    transform: rotate(0deg) scale(1.1);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes scaleSpinOutSmall {
  from {
    transform: rotate(0deg) scale(1.1);
    filter: blur(1px);
    opacity: 0.7;
  }
  to {
    transform: rotate(0) scale(1);
    filter: blur(0px);
    opacity: 1;
  }
}
@supports (container-type: inline-size) {
  div:has(> .mod-masonry-grid), section:has(> .mod-masonry-grid) {
    container-type: inline-size;
  }
}
.grid-cols-2 {
  --grid-column-count: 2;
}
.grid-cols-3 {
  --grid-column-count: 3;
}
.grid-cols-4 {
  --grid-column-count: 4;
}
.mod-masonry-grid {
  --grid-layout-gap: 2rem;
  --grid-item--min-width: 100px;
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
  grid-gap: var(--grid-layout-gap);
  grid-template-columns: 1fr;
  display: grid;
}

@container (width >=768px) {
  .mod-masonry-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (width < 768px) {
  .masonryLayout {
    & .modal-dialog {
      & .masonry-card-body {
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 4rem;
        place-content: center;
        .masonryFullImage {
          margin-inline: auto;
        }
        .readmore, .mod-masonry-title {
          text-align: center;
        }
      }
    }
  }
}
@container (width >=992px) {
  .mod-masonry-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  }
}
@supports not (container-type: inline-size) {
  @media (width >=768px) {
    .mod-masonry-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (width >=992px) {
    .mod-masonry-grid {
      grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    }
  }
}