.margin__auto {
  margin-left: auto;
  margin-right: auto;
}

.margin_l__auto {
  margin-left: auto;
}

.margin_r__auto {
  margin-right: auto;
}

.position_r_layout {
  position: relative;
}

.position_a_layout {
  position: absolute;
}

.jc--flex-start-layout {
  justify-content: flex-start;
}

.jc--center-layout {
  justify-content: center;
}

.jc--flex-end-layout {
  justify-content: flex-end;
}

.text__center-layout {
  text-align: center;
}

.text__right-layout {
  text-align: right;
}

.text__left-layout {
  text-align: left;
}

.ai--flex-start-layout {
  align-items: flex-start;
}

.ai--center-layout {
  align-items: center;
}

.ai--flex-end-layout {
  align-items: flex-end;
}

/* Layout */
#bloggle--blog_layout {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1024px) {
  #bloggle--blog_layout {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 767px) {
  #bloggle--blog_layout {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
/* Header */
.bloggle--header.bloggle--header-empty {
  text-align: center;
}

.bloggle--sub-header {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  width: fit-content;
  width: -moz-fit-content;
  float: none !important;
}

/* Image */
.bloggle--header .text--container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.bloggle--header .textImage--container {
  margin-bottom: 30px;
  height: 300px;
  width: calc(100% + 40px);
  margin-left: -20px;
}
@media screen and (max-width: 1024px) {
  .bloggle--header .textImage--container {
    width: 100%;
    margin-left: 0px;
  }
}
.bloggle--header .textImage--container .bloggle--blog-image {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  height: 300px;
}
.bloggle--header .textImage--container .content--container {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 1024px) {
  .bloggle--header .textImage--container .content--container {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.bloggle--header .textImageBack--container {
  display: flex;
  flex-direction: row;
  width: calc(100% + 20px);
  margin-left: -20px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1024px) {
  .bloggle--header .textImageBack--container {
    margin-left: -15px;
    width: calc(100% + 30px);
  }
}
@media screen and (max-width: 767px) {
  .bloggle--header .textImageBack--container {
    flex-direction: column !important;
    margin-left: -10px;
    width: calc(100% + 20px);
  }
}
.bloggle--header .textImageBack--container .bloggle--blog-image {
  width: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}
.bloggle--header .textImageBack--container .bloggle--blog-image.left {
  order: -1;
}
.bloggle--header .textImageBack--container .bloggle--blog-image.right {
  order: 1;
}
@media screen and (max-width: 767px) {
  .bloggle--header .textImageBack--container .bloggle--blog-image {
    width: 100%;
    order: -1 !important;
    height: 200px;
  }
  .bloggle--header .textImageBack--container .bloggle--blog-image .hide {
    display: none !important;
  }
}
.bloggle--header .textImageBack--container .content--container {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .bloggle--header .textImageBack--container .content--container {
    width: 100%;
  }
}

.bloggle--search {
  margin-left: 10px;
}

/* Search */
#bloggle--icon_search {
  width: 20px;
  transform: rotate(90deg);
  margin-left: 10px;
  cursor: pointer;
}

#bloggle--input_search, .bloggle--sub-header, .bloggle--search-input {
  max-width: 100%;
}

#bloggle--input_search_container {
  z-index: 99;
  border: 1px solid #d1d1d1;
  background: white;
  padding: 20px 10px;
  margin-top: 10px;
  position: absolute;
  display: flex;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 500px;
  transform: scaleY(0);
  opacity: 0;
  transform-origin: top;
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
  min-width: 320px;
}

#bloggle--input_search_container.bloggle--visible {
  transform: scaleY(1);
  opacity: 1;
}

#bloggle--search_input_container {
  display: flex;
  width: 100%;
}

#bloggle--input_search {
  width: 100%;
  flex-grow: 1;
  min-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #d1d1d1;
  box-shadow: none !important;
}

#bloggle--input_search:focus, #bloggle--input_search:focus-visible {
  outline: none;
}

#bloggle--search_results {
  left: 0px;
  max-height: 300px;
  overflow-y: auto;
  position: absolute;
  background-color: white;
  width: 100%;
  top: 100%;
  border: 1px solid lightgray;
  z-index: 99;
}

.bloggle--search_result {
  border-bottom: 1px solid lightgray;
  cursor: pointer;
}

.bloggle--search_result_link {
  padding: 10px;
  width: calc(100% - 20px);
  height: 100%;
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: unset;
  color: black;
  transition: all 0.3s linear;
}

.bloggle--search_result_link:hover {
  color: #777;
}

#bloggle--icon_close {
  width: 16px;
  margin-left: 10px;
  cursor: pointer;
}

/* Navigation */
.bloggle--nav-item {
  cursor: pointer;
  margin-right: 12px;
  color: black;
  text-decoration: none;
  transition: all 0.3s linear;
}

@media screen and (max-width: 767px) {
  .bloggle--nav-item {
    display: inline-block;
    margin-top: 10px;
    margin-right: 12px;
  }
  .bloggle--xs-flex-column {
    flex-direction: column !important;
  }
  .bloggle--sub-header.bloggle--xs-flex-column {
    width: 100%;
  }
  .bloggle--sub-header.bloggle--xs-flex-column .bloggle--search {
    margin-top: 10px;
  }
  .bloggle--search.bloggle--search-input.bloggle--search-xs-100, .bloggle--sub-header.bloggle--xs-flex-column .bloggle--search-xs-100 {
    width: 100% !important;
    margin-left: 0px;
  }
}
.bloggle--nav-item:hover {
  color: #777;
}

.bloggle--nav-item.bloggle--active {
  text-decoration: underline;
}

/* Listing */
.bloggle--blog-items {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.bloggle--blog-items.blog-layout-v2 {
  display: grid;
}

.bloggle--blog-items.trois .bloggle--blog-item-link .responsive-div .bloggle--blog-item-button, .bloggle--blog-items.unDeux .bloggle--blog-item-link .responsive-div .bloggle--blog-item-button, .bloggle--blog-items.deuxTrois .bloggle--blog-item-link .responsive-div .bloggle--blog-item-button, .bloggle--blog-items.deuxDeux .bloggle--blog-item-link .responsive-div .bloggle--blog-item-button, .bloggle--blog-items.deux .bloggle--blog-item-link .responsive-div .bloggle--blog-item-button {
  margin-top: auto;
}

.bloggle--blog-items.trois .bloggle--blog-item-link, .bloggle--blog-items.unDeux .bloggle--blog-item-link, .bloggle--blog-items.deuxTrois .bloggle--blog-item-link, .bloggle--blog-items.deuxDeux .bloggle--blog-item-link, .bloggle--blog-items.deux .bloggle--blog-item-link {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.article-text-container {
  width: 100%;
}

.bloggle--blog-items.trois {
  grid-template-columns: repeat(3, calc(33.3333% - 13.33333px));
}

.bloggle--blog-items.trois .bloggle--blog-item-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media screen and (max-width: 1024px) {
  .bloggle--blog-items.trois {
    grid-template-columns: repeat(2, calc(50% - 10px));
  }
}
@media screen and (max-width: 767px) {
  .bloggle--blog-items.trois {
    grid-template-columns: 100%;
  }
}
.bloggle--blog-items.unDeux {
  grid-template-columns: repeat(2, calc(50% - 10px));
}

@media screen and (max-width: 767px) {
  .bloggle--blog-items.unDeux {
    grid-template-columns: 100%;
  }
}
.bloggle--blog-items.unDeux .bloggle--blog-item:nth-child(3n-2) {
  grid-column-start: 1;
  grid-column-end: 3;
}

@media screen and (max-width: 767px) {
  .bloggle--blog-items.unDeux .bloggle--blog-item:nth-child(3n-2) {
    grid-column-start: initial;
    grid-column-end: initial;
  }
}
.bloggle--blog-items.deuxTrois {
  grid-template-columns: repeat(3, calc(33.3333% - 13.33333px));
}

@media screen and (max-width: 1024px) {
  .bloggle--blog-items.deuxTrois {
    grid-template-columns: repeat(2, calc(50% - 10px));
  }
}
@media screen and (max-width: 767px) {
  .bloggle--blog-items.deuxTrois {
    grid-template-columns: 100%;
  }
}
.bloggle--blog-items.deuxTrois .bloggle--blog-item:first-child {
  grid-column-start: 1;
  grid-column-end: 3;
}

@media screen and (max-width: 767px) {
  .bloggle--blog-items.deuxTrois .bloggle--blog-item:first-child {
    grid-column-start: initial;
    grid-column-end: initial;
  }
}
.bloggle--blog-items.un, .bloggle--blog-items.unDeux, .bloggle--blog-items.deuxDeux, .bloggle--blog-items.deux, .bloggle--blog-items.deuxTrois, .bloggle--blog-items.trois {
  row-gap: 40px;
}

@media screen and (max-width: 1024px) {
  .bloggle--blog-items.un, .bloggle--blog-items.unDeux, .bloggle--blog-items.deuxDeux, .bloggle--blog-items.deux, .bloggle--blog-items.deuxTrois, .bloggle--blog-items.trois {
    row-gap: 30px;
  }
}
@media screen and (max-width: 767px) {
  .bloggle--blog-items.un, .bloggle--blog-items.unDeux, .bloggle--blog-items.deuxDeux, .bloggle--blog-items.deux, .bloggle--blog-items.deuxTrois, .bloggle--blog-items.trois {
    row-gap: 20px;
  }
}
.bloggle--blog-items.unDeux, .bloggle--blog-items.deuxDeux, .bloggle--blog-items.deux, .bloggle--blog-items.deuxTrois, .bloggle--blog-items.trois {
  -moz-column-gap: 20px;
  column-gap: 20px;
}

.bloggle--blog-items.un {
  grid-template-columns: 100%;
}

.bloggle--blog-items.un .bloggle--blog-item-link {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 10px));
  -moz-column-gap: 20px;
  column-gap: 20px;
}

@media screen and (max-width: 767px) {
  .bloggle--blog-items.un .bloggle--blog-item-link {
    grid-template-columns: 100%;
  }
}
.bloggle--blog-items.un .responsive-div {
  justify-content: center;
}

.bloggle--blog-items.deuxDeux {
  grid-template-columns: repeat(3, calc(33.3333% - 13.33333px));
}

@media screen and (max-width: 1024px) {
  .bloggle--blog-items.deuxDeux {
    grid-template-columns: repeat(2, calc(50% - 10px));
  }
}
@media screen and (max-width: 767px) {
  .bloggle--blog-items.deuxDeux {
    grid-template-columns: 100%;
  }
}
.bloggle--blog-items.deuxDeux .bloggle--blog-item:nth-child(4n+1) {
  grid-column-start: 1;
  grid-column-end: 3;
}

.bloggle--blog-items.deuxDeux .bloggle--blog-item:nth-child(4n) {
  grid-column-start: 2;
  grid-column-end: 4;
}

@media screen and (max-width: 1024px) {
  .bloggle--blog-items.deuxDeux .bloggle--blog-item {
    grid-column-start: initial !important;
    grid-column-end: initial !important;
  }
}
.bloggle--blog-items.deux {
  grid-template-columns: repeat(2, calc(50% - 10px));
}

@media screen and (max-width: 767px) {
  .bloggle--blog-items.deux {
    grid-template-columns: 100%;
  }
}
.bloggle--blog-items .responsive-div {
  display: flex;
  flex-direction: column;
}

.bloggle--blog-item-title {
  margin-top: 10px;
  margin-bottom: 0px;
}
@media screen and (max-width: 1024px) {
  .bloggle--blog-item-title {
    margin-bottom: 10px !important;
  }
}

.bloggle--blog-item-date {
  font-size: 12px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.bloggle--blog-item-desc {
  margin-top: 5px;
  margin-bottom: 5px;
}

.bloggle--blog-item-author {
  font-size: 13px;
  margin-top: 10px;
}

.bloggle--blog-item-button {
  margin-top: 10px;
}

.bloggle--blog-item.text__center .bloggle--blog-item-button {
  margin-left: auto;
  margin-right: auto;
}

.text__center {
  text-align: center;
}

.text__left {
  text-align: left;
}

.text__right {
  text-align: right;
}

.bloggle--blog-item.text__right .bloggle--blog-item-button {
  margin-left: auto;
}

/* Pagination */
.bloggle--pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.bloggle--pagination-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 7px;
  padding-right: 7px;
  color: black;
}

.bloggle--pagination-item.bloggle--active {
  font-weight: 700;
}

.bloggle--paginate_icon {
  width: 12px;
  path: black;
  color: black;
}

.bloggle--paginate_icon path {
  color: black;
}

.bloggle--next {
  transform: rotate(270deg);
}

.bloggle--prev {
  transform: rotate(90deg);
}

#bloggle--blog_layout #bloggle--search_results:empty {
  display: none !important;
}