#mainNav-kn {
  border-bottom: 1px solid #e9ecef;
  background-color: #fff;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* apply margin to image */
.img-kn {
  margin-bottom: .33rem;
}

/* handle image when >large screens */
@media only screen and (min-width: 768px) {
  .img-kn {
    float: left;
    max-width: 330px;
    max-height: 190px;
    margin-right: 1rem;
    margin-top: 0.33rem;
  }
}

/* background opacity */
header.masthead .overlay {
  opacity: .25;
}

/* Handler for the minimum height on the post preview */
/* -------------------------------------------------- */

/* Default (ALL screen sizes incl. ultra small) */
.post-preview-min-height-kn {
  min-height: 20rem;
  overflow-wrap: break-word;
}

/* Small devices (sm, >=576px) */
@media (min-width: 576px) {
  .post-preview-min-height-kn {
    min-height: 17.5rem;
  }
}

/* Medium devices (md, >=768px) */
@media (min-width: 768px) {
  .post-preview-min-height-kn {
    min-height: 17.75rem;
  }
}

/* Large devices (lg, >=992px) */
@media (min-width: 992px) {
  .post-preview-min-height-kn {
    min-height: 17.75rem;
  }
}

/* Extra large devices (xl, >=1200px) */
@media (min-width: 1200px) {
  .post-preview-min-height-kn {
    min-height: 15rem;
  }
}

/* Extra extra large devices (xxl, >=1400px) */
@media (min-width: 1400px) {
  .post-preview-min-height-kn {
    min-height: 15.75rem;
  }
}

/* endof--------------------------------------------- */
/* Handler for the minimum height on the post preview */

/* category local name as a link at the end of a post */
.post-meta-label {
  margin: 0;
  padding: 0.25rem;
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  border: 0.125rem solid var(--bs-gray-200);
}

/* minimum height on the post subtitle (>=1200px) */
@media (min-width: 1200px) {
  .post-preview>a>.post-subtitle {
    min-height: 12rem;
  }
}

/* Handler for the style of the featured posts */
/* ------------------------------------------- */
:root {
  --background-color-kn: #0085a1;
}

div.wrapper-kn {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  max-width: 100%;
  gap: 0px;
  /* spacing between items */
  max-width: 993px;
  /* !!! breakpoint+1 */
  border: 1rem ridge rgba(0, 133, 161, 0.6);
  border-radius: 4px;
}

/* items in carousel */
div.item-1st-kn {
  grid-column: span 6;
  grid-row: span 8;
}

/* items next to/bottom of the carousel */
div.item-kn {
  grid-column: span 1;
  grid-row: span 2;
}

/* ensure item images fit the grid cells */
div.item-1st-kn img {
  width: 100%;
  height: auto;
  object-fit: cover;
  /* maintain aspect ratio */
}

/* ensure item images fit the grid cells */
div.item-kn img {
  width: 100%;
  max-height: 8.0rem;
  min-height: 8.0rem;
  object-fit: cover;
  /* maintain aspect ratio */
  border: 0.25rem #0085a180 solid;
  /* background-color-kn with transparency */
  padding: 0.0rem;
}

/* Smaller devices (<992px) */
@media (max-width: 991px) {
  div.wrapper-kn {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }

  div.item-1st-kn {
    grid-column: span 4;
    grid-row: span 4;
  }

  div.item-kn {
    grid-column: span 1;
    grid-row: span 2;
    width: 100%;
    height: auto;
  }

  /* ensure item images fit the grid cells */
  div.item-kn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* maintain aspect ratio */
    border: 0.25rem #0085a180 solid;
    padding: 0.0rem;
  }
}

.carousel-caption h1 {
  background-color: rgba(0, 133, 161, 0.75);
  padding: 8px;
  border-radius: 16px;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);

  /* endof-------------------------------------- */
  /* Handler for the style of the featured posts */
}

/* Handler for the style of post section labels */
/* -------------------------------------------- */

.posts-section-label-featured {
  margin-top: -1.5rem;
  margin-right: 0px;
  margin-bottom: 2rem;
  margin-left: 0px;
  font-size: xx-large;
  text-shadow: 2px 4px 4px rgba(0, 133, 161, 0.75);
}

.posts-section-label-recents {
  margin-top: 2rem;
  margin-right: 0px;
  margin-bottom: 1rem;
  margin-left: 0px;
  font-size: xx-large;
  text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
}

/* endof-------------------------------------- */
/* Handler for the style of post section labels */

/* Handler for the style of vip */
/* -----------------------------*/

:root {
  --vip-col-top-default: 78.8rem;
  --vip-col-top-1400: 40rem;
  --vip-col-top-992: 47rem;
  --vip-col-top-margin: 48px;
}

.container-vip-row {
  margin-top: 1.5rem;
  margin-right: 0px;
  margin-bottom: 2rem;
  margin-left: 0px;
}

.container-vip-col {
  position: absolute;
  top: calc(var(--vip-col-top-default) + var(--vip-col-top-margin));
  right: 1.5rem;
}

@media (min-width: 1400px) {
  .container-vip-col {
    position: absolute;
    top: calc(var(--vip-col-top-1400) + var(--vip-col-top-margin));
    right: 1.5rem;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .container-vip-col {
    position: absolute;
    top: calc(var(--vip-col-top-992) + var(--vip-col-top-margin));
    right: 1.5rem;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .container-vip-row .col-md-6 {
    flex: 0 0 auto;
    width: 100%;
  }
}

.placeholder-image-vip-col {
  padding-block: 1rem;
}

/* endof----------------------- */
/* Handler for the style of vip */