:root {
  --size-navbar-height: 65px;
  --color-new-blue-bg: #000d1f;
  --color-yellow: #bfb48f;
  --color-gold-hover: #f4db89;
  --color-blue-bg: #00132e;
  --color-blue-dark-transparent: #000c1dc0;
}

.do-page-wrapper {
  max-width: var(--size-max-width);
  width: 100%;
  margin: 20px auto;
  z-index: 1;
  position: relative;
  display: grid;
  gap: 10px;
}

.do-lore-parallax-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../image/home/crimson-dawn.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -999;
}

.do-lore-parallax-background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  background-color: var(--color-blue-dark-transparent);
}

/* Start hide on mobile */
.do-home-stories-siema-desktop,
.stories-nav-container-desktop,
/* .top-picks-nav-container-desktop, */
.popular-nav-container-desktop,
.legion-nav-container-desktop,
.oathbound-nav-container-desktop,
.do-home-divider.desktop,
.do-faction-logo-name-container.desktop,
.do-faction-logo-name-container.desktop .faction-name,
.do-button.primary.find-more.faction.desktop,
/* .story-preview.desktop, */
/* .story-header.desktop, */
.synopsis.desktop,
.social-links-text.desktop,
.owl-carousel.popular-owl.desktop {
  display: none;
}
/* End hide on mobile */
/* START Most used */
.button-right-wrapper {
  text-align: end;
}

/* END NAVBAR */
/* START FOOTER */
.do-button.primary,
.do-button.primary:hover {
  font-size: 11px;
  padding: 10px 30px;
  text-decoration: none;
  font-family: "nunito-sans-bold";
}
.la-loader {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background-color: rgba(0, 0, 0, 0.7);
}
.la-loader span {
  display: block;
  padding: 20px;
  margin: 20vh auto;
  color: #fff;
  font-size: 3rem;
  text-align: center;
}
.do-button.primary::before {
  position: absolute;
  content: "";
  /* background: url('../image/public/Group-rectangle.png') center/contain no-repeat; */
  background-image: url("../image/public/rectangle-1412.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
}
.do-button.primary::after {
  position: absolute;
  content: "";
  background-image: url("../image/public/rectangle-1412.png");
  background-position: center;
  left: -1px;
  bottom: -1px;
  background-size: cover;
  width: 8px;
  height: 8px;
  background-repeat: no-repeat;
}

/* END FOOTER */
/* START PAGE: stories */
/* START STORIES */
.do-section.stories {
  padding: 100px 0;
}
.do-home-stories-siema {
  padding: 30px 0;
}
.do-home-stories-card img.stories {
  /* display: inline; */
  display: block;
  border: 2px solid var(--color-yellow);
  max-width: 280px;
  /* height: 400px; */
  margin: auto;
}
.image-placeholder.blue {
  background-color: blue;
}
.image-placeholder.aqua {
  background-color: aqua;
}
.image-placeholder.red {
  background-color: red;
}
.stories-prev img,
.stories-next img {
  max-width: 25px;
}
.stories-prev {
  position: absolute;
  left: 2%;
  top: 35%;
}
.stories-next {
  position: absolute;
  right: 2%;
  top: 35%;
}
/* END STORIES */
/* START TOP PICKS */
.top-picks .do-home-divider {
  transform: translateY(-215px);
}
.do-top-picks-container {
  transform: translateY(-235px);
  overflow: hidden;
  margin-bottom: -200px;
}
.story-preview {
  position: relative;
  padding: 100px 20px 20px;
  margin-top: -100px;
  z-index: -20;
  background-color: var(--color-new-blue-bg);
  border-top: solid 2px var(--color-yellow);
  border-bottom: solid 2px var(--color-yellow);
}
h1.section-title {
  font-size: 18px;
  font-weight: 600;
  padding: 10px;
  color: var(--color-yellow);
  letter-spacing: 1px;
  width: 250px;
}
h1.stories-title {
  font-size: 24px;
  font-weight: 600;
  padding: 15px 0;
  color: var(--color-yellow);
  letter-spacing: 1px;
  margin-top: 0;
}
.story-preview h1.stories-title,
.story-preview .chapter-icon-number,
.story-preview .chapter-icon,
.story-preview .chapter-number {
  display: inline-block;
}
h1.title-underline {
  border-bottom: solid 3px var(--color-yellow);
}
.top-picks-siema {
}
.top-picks-image {
  padding: 15px;
}
.top-picks-card-footer h1.stories-title,
.top-picks-card-footer h4.faction-name {
  color: var(--color-yellow);
  width: unset;
  max-width: unset;
  display: block;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 0;
  font-family: "nunito-sans-bold";
  font-size: 16px;
}
.top-picks-helper {
  min-height: 200px;
  position: relative;
}
.top-picks-card {
  display: inline-block;
}
.top-picks-card a {
  text-decoration: none;
}
.top-picks-card img {
  display: block;
  transition: all 0.2s ease-in-out;
  width: 100%;
  object-fit: cover;
  margin: 15px auto auto;
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.486);
}
.top-picks-card img:hover {
  max-width: 115px;
  margin-top: 20px;
}
.top-picks-desktop-prev {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
}
.top-picks-desktop-next {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
}
.top-picks-desktop-prev img,
.top-picks-desktop-next img {
  max-width: 30px;
  cursor: pointer;
}
.story-preview .stories-title {
  margin-bottom: 0;
}
.chapter-icon-number {
  display: grid;
  grid-template-columns: 1fr 16fr;
  padding: 10px 0;
}
.chapter-icon {
  position: relative;
  display: block;
  max-width: 14px;
  justify-self: end;
  margin-right: 5px;
  margin-bottom: -2px;
}
.chapter-number {
  position: relative;
  display: block;
  color: var(--color-yellow);
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}
.vorax-box {
  border: 2px solid var(--color-yellow);
  background-color: #1e3161;
  display: inline-block;
  padding: 3px 5px;
  min-width: 150px;
}
.vorax-box img {
  display: inline-block;
  vertical-align: middle;
  max-width: 24px;
}
.vorax-box p {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  margin: 0;
}
.likes {
  font-size: 12px;
  color: var(--color-yellow);
  font-family: "nunito-sans-bold";
  margin: 5px 0;
}
.likes.heart {
  max-width: 19px;
  margin-bottom: -5px;
}
p.synopsis {
  font-size: 13px;
  /* text-align: justify; */
  letter-spacing: 1px;
}
.do-button.primary.read-now {
  font-size: 1rem;
  padding: 5px 12px;
  min-width: 70px;
  letter-spacing: 0;
  font-family: "nunito-sans-bold";
  text-decoration: none;
  text-transform: unset;
}
.do-button.primary.read-now::before {
  width: 6px;
  height: 6px;
}
.do-button.primary.read-now::after {
  top: 17px;
  width: 6px;
  height: 6px;
}
.title-right {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}
/* END TOP PICKS */
/* START POPULAR */
.do-section.popular {
  margin-top: -40px;
}
.popular-slide a {
  text-decoration: none;
}
.owl-item .popular-card img.popular-story-image {
  display: block;
  border: 2px solid var(--color-yellow);
  max-width: 120px;
  height: 185px;
  /* width: auto; */
  /* margin: 45px auto calc(auto - 10px); */
  margin-left: 10px;
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.486);
}
.story-info-card {
  position: relative;
  max-width: 200px;
  height: 100px;
  border: 2px solid var(--color-yellow);
  margin: -40px auto auto 90px;
  transform: translateY(-110px);
  background-color: var(--color-new-blue-bg);
  z-index: -100;
  /* text-align: center; */
  /* vertical-align: middle; */
}
.owl-item.active .popular-slide .story-info-card::before {
  position: absolute;
  content: "";
  background-image: url("../image/public/decor-02.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  top: 2px;
  right: 2px;
}
.owl-item.active .popular-slide .story-info-card::after {
  position: absolute;
  content: "";
  background-image: url("../image/public/decor-02.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  /* top: 0px; */
  right: 2px;
  bottom: 2px;
}
.story-info-card h1 {
  font-family: "nunito-sans-bold";
  /* margin-block-start: 0.3em; */
  margin: 12px auto 0 50px;
  font-size: 17px;
  font-weight: 500;
  vertical-align: middle;
  /* transform: translateX(50px); */
}
.story-info-card h4 {
  color: var(--color-yellow);
  /* margin-top: -25px; */
  font-weight: 500;
  font-size: 14px;
  vertical-align: middle;
  margin: -15px auto 0 50px;
  /* transform: translateX(50px); */
}
/* END POPULAR */
/* START FIND BY FACTION */
section.by-faction {
  transform: translateY(-120px);
  margin-bottom: -76px;
}
.section-title.faction {
  width: 300px;
}
.silver-legion-stories,
.oathbound-stories {
  transform: translateY(80px);
  max-height: 180px;
}
.silver-legion-stories {
  background-color: var(--color-new-blue-bg);
  border-top: solid 2px var(--color-yellow);
  border-bottom: solid 2px var(--color-yellow);
  /* padding-bottom: 10px; */
}
.oathbound-stories {
  background-color: var(--color-hp-empty);
  border-top: solid 2px var(--color-yellow);
  border-bottom: solid 2px var(--color-yellow);
  /* padding-bottom: 30px; */
}
.faction-space {
  min-height: 75px;
}
.faction-name {
  display: grid;
  grid-template-columns: 1fr 3fr 4fr;
  /* transform: translateY(-120px); */
}
.faction-name img {
  width: 40px;
  margin: auto 0 auto auto;
}
.faction-name h4 {
  /* transform: translate(50px, -60px); */
  vertical-align: middle;
  color: var(--color-yellow);
  font-weight: 500;
  /* font-family: 'nunito-sans-bold'; */
  text-decoration: underline;
}
.faction-siema-slide {
  text-align: center;
}
.faction-name.oathbound {
  /* float: right; */
  grid-template-columns: 4fr 3fr 1fr;
}
.faction-name.oathbound img {
  grid-column: 3;
  margin: auto auto auto 0;
}
.faction-name.oathbound h4 {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}
.do-button.primary.read-now.faction.on-slide {
  float: none;
}
a.do-button.primary.read-now.faction.oathbound {
  /* margin: auto; */
  float: none;
  position: relative;
  margin-bottom: 10px;
}
a.do-button.primary.read-now.faction.hidden {
  visibility: hidden;
}
.do-button.primary.find-more {
  margin: 0 10px;
  transform: translateY(40px);
}
.by-faction-siema {
  transform: translateY(-100px);
}
/* END FIND BY FACTION */
/* END PAGE: stories */
/* START PAGE: content_story */
/* START STORY-MENU */
.do-section.story-menu {
  overflow: hidden;
  margin-top: var(--size-navbar-height);
}
.story-header {
  margin-top: 15px;
  height: 430px;
}
.story-cover {
  height: 200px;
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.486);
  display: block;
  transform: translateX(30px);
}
.story-preview.header-card {
  padding: 15px 15px 15px 120px;
  border-left: solid 2px var(--color-yellow);
  transform: translateY(-80px);
  margin-left: 50px;
}
.story-preview.header-card::before {
  position: absolute;
  content: "";
  background-image: url("../image/public/decor-02.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  top: 2px;
  right: 2px;
}
.story-preview.header-card::after {
  position: absolute;
  content: "";
  background-image: url("../image/public/decor-02.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  right: 2px;
  bottom: 2px;
}
.story-preview.header-card .stories-title {
  padding: 0;
}
.chapter-icon-number.story-header-card {
  transform: translate(60px, -15px);
}
.vorax-box.story-header-card {
  transform: translate(60px, 35px);
}
.likes.story-header-card {
  transform: translate(60px, 30px);
  font-size: 12px;
}
.story-body {
  background-color: var(--color-new-blue-bg);
  padding: 20px 30px 50px 30px;
  font-size: 16px;
  letter-spacing: 1px;
  border-top: solid 2px var(--color-yellow);
  border-bottom: solid 1px var(--color-yellow);
  position: relative;
}
.story-body.story-menu {
  transform: translateY(-130px);
  z-index: -30;
  margin-bottom: -95px;
  padding-top: 85px;
}
/* END STORY-MENU */
/* START CHAPTER-MENU */
.do-section.chapter-menu,
.do-section.chapter-story {
  border-top: solid 2px var(--color-yellow);
  border-bottom: solid 1px var(--color-yellow);
  background-color: var(--color-new-blue-bg);
  padding-bottom: 30px;
}
.chapter-head,
.chapter-list {
  border-bottom: solid 2px var(--color-yellow);
  vertical-align: middle;
}
.chapter-head {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
}
img.chapter-decor {
  width: 20px;
  height: 20px;
  margin: auto 5px;
}
img.chapter-decor.right {
  justify-self: end;
}
.chapter-head h1 {
  text-align: center;
  margin: auto;
  /* padding: 0; */
}
.chapter-list {
  width: 95%;
  margin: 0 auto;
}
.chapter-list a {
  display: grid;
  grid-template-columns: 60px 1fr;
  color: var(--color-yellow);
  text-align: center;
  font-size: 16px;
  text-decoration: none;
}
.chapter-list a p.chapter-number,
.chapter-list a p.chapter-title {
  font-size: 16px;
  text-decoration: none;
  margin: 5px 0;
  padding: 11px 0;
  /* margin-block-end: 2px; */
}
.chapter-list a p.chapter-title {
  margin-right: 60px;
}
.chapter-list a .chapter-number {
  border-right: solid 2px var(--color-yellow);
}
.chapter-list.last-chapter {
  /* width: 100%; */
  border-bottom: none;
}
/* END CHAPTER-MENU */
/* END PAGE: content_story */
/* START PAGE: story_chapter */
/* START CHAPTER-STORY */
.do-section.story-header {
  margin-top: var(--size-navbar-height);
  min-height: unset;
  overflow: hidden;
}
.story-header.story-chapter-header {
  transform: translateY(20px);
  margin-top: 0;
}
.story-body.story-chapter p {
  margin-top: 0;
}
.do-button.story-chapter {
  text-transform: unset;
  position: relative;
  margin: auto;
  float: left;
}
.do-button.story-chapter.right {
  float: right;
}
/* END CHAPTER-STORY */
/* START COMMENTS */
.do-section.comments {
  background-color: var(--color-blue-bg);
}
.comments-section-header {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  border-bottom: solid 2px var(--color-yellow);
}
.comments-and-likes {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.comments-and-likes .comments-helper,
.comments-and-likes .likes-helper {
  margin: 5px 0;
  display: grid;
}
.comments-and-likes .likes-helper {
  border-left: solid 2px var(--color-yellow);
}
.comments-and-likes .comments,
.comments-and-likes .likes {
  font-size: 12px;
  color: var(--color-white);
  justify-content: center;
  align-items: center;
  margin: 5px auto;
}
.comments-and-likes .comments img,
.comments-and-likes .likes img {
  vertical-align: middle;
  width: 25px;
}
.comments-and-likes .comments p,
.comments-and-likes .likes p {
  display: inline-block;
}
.comments-and-likes .comments p:hover,
.comments-and-likes .likes p:hover {
  text-shadow: 0 0 5px #fff;
  color: var(--color-whitest);
}
.comments-wrapper {
  border: solid 2px var(--color-yellow);
  margin: 12px 10px;
  background-color: var(--color-new-blue-bg);
}
.comment-header .user {
  text-decoration: none;
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
  padding: 15px;
  align-items: center;
}
.comment-guide {
  padding: 5px 20px;
}
.comment-header .user .user-image,
.reply-header .user .user-image {
  max-width: 40px;
  max-height: 40px;
  border: solid 2px var(--color-yellow);
}
.comment-header .user .username,
.reply-header .user .username {
  font-size: 13px;
  display: inline-block;
  text-decoration: underline;
  vertical-align: middle;
  font-family: "nunito-sans-bold";
  padding: 0 10px;
}
.comment-header .user .last-online,
.reply-header .user .last-online {
  color: #74747d;
  font-size: 10px;
  display: inline-block;
}
.comment-body {
  padding: 0 15px;
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}
.comment-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  padding: 10px 30px;
  cursor: pointer;
  text-decoration: underline;
}
.like-comment-button {
  border-right: solid 2px var(--color-yellow);
}
.like-comment-button img {
  width: 15px;
  vertical-align: middle;
}
.replies-divider {
  width: 95%;
  border-bottom: solid 2px var(--color-yellow);
  margin: auto;
}
.reply-wrapper {
  padding: 0 25px;
}
.reply-wrapper.hidden {
  display: none;
}
.reply-header .user {
  text-decoration: none;
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
  padding: 10px;
  align-items: center;
}
.reply-wrapper.collapse {
  font-size: 12px;
  text-decoration: underline;
}
.comment-header-action {
  justify-self: end;
}
.comment-header-action i {
  cursor: pointer;
}
.add-comment {
  border-top: solid 2px var(--color-yellow);
  border-bottom: solid 2px var(--color-yellow);
  background-color: var(--color-new-blue-bg);
  display: grid;
  grid-template-columns: 4fr 1fr;
}
.add-comment .comment-text {
  display: flex;
  border-right: solid 2px var(--color-yellow);
}
.add-comment .comment-text p,
.add-comment .comment-text input[type="text"],
.add-comment .comment-text textarea {
  font-size: 14px;
  display: inline-block;
  padding: 10px 20px;
  font-family: "nunito-sans-bold";
  width: 100%;
  border: none;
  background-color: var(--color-new-blue-bg);
  color: var(--color-white);
}
.add-comment .comment-text input[type="text"]::placeholder {
  color: var(--color-gray);
}
.add-comment .comment-text:focus,
.add-comment input[type="text"]:focus {
  border: none;
  outline: none;
}
.add-comment a,
.comment-text a {
  text-decoration: none;
}
.add-comment .send-button {
  padding: 15px 0;
  text-align: center;
  font-size: 14px;
  font-family: "nunito-sans-bold";
  background-color: #0b1f50;
  color: white;
  cursor: pointer;
}
.send-button.disable {
  color: var(--color-gray);
  margin: 0;
}
/* END COMMENTS */
/* END PAGE: story_chapter */
/*LORE REWORK START*/
.do-section.lore-banner {
  padding-top: calc(var(--size-navbar-height));
  min-height: 300px;
}
.do-lore-banner-wrapper {
  position: relative;
}
.do-lore-banner-container {
}
.do-lore-banner-item {
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 150px;
  position: relative;
}
.do-lore-banner-item > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  object-position: 50% 50%;
}
.do-lore-banner-item h1,
.do-lore-banner-item h2 {
  position: absolute;
  color: var(--color-yellow);
  text-align: center;
  font-size: 1.1rem;
  width: 100%;
  margin: 0 auto;
  top: 40%;
  z-index: 3;
}
.do-lore-banner-item h2 {
  top: 55%;
  font-size: 1rem;
}
.do-lore-banner-nav {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 110%;
}
.do-lore-banner-nav.left {
  left: 10px;
}
.do-lore-banner-nav.right {
  right: 10px;
}
.do-lore-banner-nav.right button,
.do-lore-banner-nav.left button {
  cursor: pointer;
  margin: unset;
  padding: unset;
  border: unset;
  height: 40px;
}
.do-lore-banner-nav.right img,
.do-lore-banner-nav.left img {
  max-width: 100%;
}

.do-section.lore-webnovel,
.do-section.lore-character,
.do-section.lore-faction,
.do-section.lore-race,
.do-section.lore-location {
  padding: 0 15px;
  min-height: calc(100vh - var(--size-navbar-height) - 280px);
}

.do-section.noheight {
  min-height: auto;
}

.do-section.lore-webnovel {
  margin-top: 100px;
}

.do-list-title {
  text-align: center;
  color: var(--color-yellow);
  font-size: 1.5rem;
}
.do-lore-title {
  display: grid;
  grid-template-columns: 1fr 120px;
  width: 100%;
}
.do-lore-title h2 {
  text-align: left;
  margin: 0;
  color: var(--color-yellow);
}
.do-lore-title span {
  text-align: right;
  margin: 0;
  padding-top: 6px;
  cursor: pointer;
}
.do-lore-title a {
  text-decoration: none;
}
.do-lore-webnovel-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  gap: 20px;
}
.do-lore-webnovel-container {
  background-color: rgba(0, 13, 31, 0.62);
  display: grid;
  grid-template-columns: 1fr;
  padding: 15px;
  gap: 15px;
}
.do-lore-webnovel-cover-image {
  height: 100%;
  width: 100%;
}
.do-lore-webnovel-cover-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.do-lore-webnovel-info-container h3 {
  font-family: nunito-sans-bold;
  font-size: 1.3rem;
  padding-bottom: 10px;
}
.do-lore-webnovel-info-container h4 {
  font-weight: 100;
  opacity: 0.8;
  padding-bottom: 10px;
}
.do-lore-webnovel-info-container p {
  color: var(--color-vit);
  text-align: justify;
  padding-bottom: 15px;
}
.do-lore-button {
  text-decoration: none;
  background-color: var(--color-primary);
  cursor: pointer;
  border: solid 1.5px var(--color-yellow);
  border-radius: 4px;
  text-align: center;
  padding: 8px 25px;
  width: 150px;
}
.do-lore-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.do-lore-character-grid,
.do-lore-location-grid,
.do-lore-race-grid,
.do-lore-faction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  width: 100%;
  border: solid 2px transparent;
}
.do-lore-character-item,
.do-lore-location-item,
.do-lore-race-item,
.do-lore-faction-item,
.do-lore-faction-item {
  position: relative;
  width: 100%;
  border: solid 2px transparent;
  object-fit: cover;
  overflow: hidden;
  cursor: pointer;
  height: 0;
  padding-bottom: calc(100% - 4px);
}
.do-lore-location-item {
  padding-bottom: calc(50% - 4px);
}
.do-lore-character-item:hover,
.do-lore-location-item:hover,
.do-lore-race-item:hover,
.do-lore-faction-item:hover,
.do-lore-faction-item:hover {
  border: solid 2px var(--color-gold-hover);
}
.do-lore-character-item {
  position: relative;
  z-index: 1;
}
.do-lore-character-item::before,
.do-lore-location-item::before,
.do-lore-race-item::before,
.do-lore-faction-item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.do-lore-character-item > img {
  max-width: 100%;
}
.do-lore-character-info-container,
.do-lore-location-info-container,
.do-lore-race-info-container,
.do-lore-faction-info-container {
  position: absolute;
  z-index: 2;
  bottom: 0;
  margin: 15px;
}
.do-lore-character-info-container h3,
.do-lore-location-info-container h3,
.do-lore-race-info-container h3,
.do-lore-faction-info-container h3 {
  margin: 10px 0;
}
.do-lore-race-item {
}
.do-lore-race-item img,
.do-lore-faction-item img,
.do-lore-character-item > img,
.do-lore-location-item > img {
  object-fit: cover;
  overflow-y: hidden;
  max-width: 100%;
}
.do-lore-location-grid {
  grid-template-columns: repeat(1, 1fr);
}
.do-lore-placeholder {
  height: 0;
  background-color: var(--color-blue-bg);
  padding: 90px 10px;
  text-align: center;
  color: var(--color-vit);
}
/*LORE REWORK END*/
/* CHARACTER DETAIL START */
.do-character-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin: 15px 0;
  gap: 15px;
}
.do-character-image-container {
  position: relative;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  cursor: pointer;
  height: 0;
  padding-bottom: 100%;
}
.do-character-image-container.location {
  padding-bottom: 55%;
}
.do-character-image-container p {
  text-align: center;
  padding: 43% 0;
}
.do-character-image-container > img {
  width: 100%;
}
.do-character-item-container {
  border-bottom: solid 1.5px var(--color-yellow);
  margin: 15px 0;
  min-height: 150px;
}
.do-character-item-container.info {
  margin: unset;
  /* align-content: center; */
}
.do-character-item {
  margin: 15px 0;
}
.do-character-item h1,
.do-character-item h2,
.do-character-item h3,
.do-character-item p {
  margin: 10px 0;
}
.do-character-item h3 {
  display: inline;
}
.do-character-item h1 {
  color: var(--color-yellow);
  font-size: 2rem;
}
.do-character-item p {
  text-align: justify;
  color: #aaa;
}
/* CHARACTER DETAIL START */
@media (max-width: 480px) {
  .reply-wrapper {
    padding: 0 15px;
  }
  .comment-header .user {
    padding: 10px;
  }
  .reply-header .user {
    grid-template-columns: 50px 1fr 2fr;
  }
  .stories-next,
  .stories-prev {
    top: 22%;
  }
}
@media screen and (min-width: 540px) {
  .do-lore-webnovel-container {
    grid-template-columns: 2fr 3fr;
  }
}
@media screen and (min-width: 768px) {
  /* START show or hide element on ipad (display: none) */
  .do-navbar-title.mobile,
  .do-home-stories-siema,
  .stories-nav-container,
  .do-top-picks-container .story-preview,
  .by-faction .do-button.primary.find-more.faction,
  .faction-name,
  .story-body.story-menu.mobile,
  .owl-carousel.popular-owl.mobile {
    display: none;
  }
  .do-home-stories-siema-desktop,
  .stories-nav-container-desktop,
  .do-home-divider.desktop,
  .story-preview.desktop,
  .top-picks-nav-container-desktop,
  .popular-nav-container-desktop,
  .legion-nav-container-desktop,
  .oathbound-nav-container-desktop,
  .do-faction-logo-name-container.desktop,
  .do-faction-logo-name-container.desktop .faction-name,
  .do-button.primary.find-more.faction.desktop,
  .story-header.desktop,
  .synopsis.desktop,
  .social-links-text.desktop,
  .owl-carousel.popular-owl.desktop {
    display: block;
  }
  /* END show or hide element on ipad (display: none) */
  /* START Most used */
  .story-header {
    margin: 50px 0;
  }
  /* END Most used */
  /* START NAVBAR */
  .do-navbar-button-group {
    display: flex;
    justify-content: space-evenly;
  }
  /* END NAVBAR */
  /* START PAGE: stories */
  /* START STORIES */
  img.story-banner {
    display: block;
    /* max-width: 480px; */
    height: 245px;
    margin: auto;
  }
  .do-home-stories-siema-desktop {
    padding: 40px 0;
  }
  .stories-desktop-prev {
    position: absolute;
    left: 2%;
    top: 37%;
  }
  .stories-desktop-next {
    position: absolute;
    right: 2%;
    top: 37%;
  }
  .stories-desktop-prev img,
  .stories-desktop-next img,
  .popular-desktop-prev,
  .popular-desktop-next,
  .legion-desktop-prev img,
  .legion-desktop-next img,
  .oathbound-desktop-prev img,
  .oathbound-desktop-next img {
    max-width: 30px;
    cursor: pointer;
    /* height: 40px; */
  }
  /* END STORIES */
  /* START TOP PICKS */
  h1.section-title {
    margin-left: 30px;
  }
  h1.title-right {
    margin-left: auto;
    margin-right: 30px;
  }
  .do-home-divider {
    margin: 10px auto;
    width: 95%;
  }
  .top-picks .do-home-divider {
    transform: translateY(-200px);
  }
  .do-top-picks-container {
    transform: translateY(-220px);
    padding-bottom: 250px;
  }
  .story-header.desktop {
    transform: translateY(30px);
  }
  .story-cover {
    height: 250px;
  }
  .story-preview.header-card {
    padding: 25px 30px 25px 100px;
    transform: translateY(-165px);
    margin-left: 110px;
  }
  .story-preview.desktop::before {
    position: absolute;
    content: "";
    background-image: url("../image/public/decor-02.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
  }
  .story-preview.desktop::after {
    position: absolute;
    content: "";
    background-image: url("../image/public/decor-02.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    right: 5px;
    bottom: 5px;
    width: 15px;
    height: 15px;
  }
  .vorax-box img {
    max-width: 22px;
  }
  .vorax-box p {
    font-size: 10px;
  }
  .likes {
    font-size: 14px;
  }
  .likes.heart {
    max-width: 16px;
  }
  p.synopsis {
    font-size: 16px;
  }
  .top-picks-helper {
    background-color: var(--color-new-blue-bg);
    border-top: solid 2px var(--color-yellow);
    border-bottom: solid 2px var(--color-yellow);
    height: 270px;
    transform: translateY(-20px);
    margin-top: 30px;
  }
  .top-picks-siema {
    height: unset;
    transform: translateY(-110px);
  }
  .top-picks-card img {
    max-width: 160px;
    border-radius: 7px;
    margin: 45px auto auto;
  }
  .top-picks-card img:hover {
    max-width: 160px;
    margin-top: 45px;
  }
  .top-picks-card-footer {
    display: block;
  }
  .top-picks-card-footer h1.stories-title,
  .top-picks-card-footer h4.faction-name {
    color: var(--color-yellow);
    width: unset;
    max-width: unset;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 0;
    font-family: "nunito-sans-bold";
  }
  .top-picks-card-footer h1.stories-title {
    font-size: 16px;
  }
  .top-picks-card-footer h4.faction-name {
    font-size: 12px;
  }
  .top-picks-desktop-prev {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
  }
  .top-picks-desktop-next {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
  }
  /* END TOP PICKS */
  /* START POPULAR */
  .do-section.popular {
    transform: translateY(30px);
    height: 250px;
    min-height: unset;
    background-color: var(--color-new-blue-bg);
    border-top: solid 2px var(--color-yellow);
    border-bottom: solid 2px var(--color-yellow);
  }
  .do-section.popular .do-page-wrapper {
    transform: translateY(-250px);
  }
  .do-popular-container {
    transform: translateY(-20px);
  }
  .popular-footer-box {
    border: solid 2px var(--color-yellow);
    margin: 5px auto 10px;
    max-width: 160px;
    background-color: #1e3161;
    padding: 3px 10px;
    font-size: 10px;
  }
  .owl-carousel.popular-owl.desktop,
  .top-picks-siema {
    max-width: calc(100% - 120px);
    margin: 0 auto;
  }
  .popular-slide.desktop {
    text-decoration: none;
  }
  .popular-nav-container-desktop .owl-prev {
    position: absolute;
    left: 2%;
    top: 50%;
    visibility: hidden;
  }
  .popular-nav-container-desktop .owl-next {
    position: absolute;
    right: 2%;
    top: 50%;
    visibility: hidden;
  }
  .popular-desktop-prev,
  .popular-desktop-next {
    visibility: visible;
  }
  /* END POPULAR */
  /* START BY FACTION */
  section.by-faction {
    transform: translateY(-190px);
  }
  .silver-legion-stories,
  .oathbound-stories {
    max-width: 75%;
    max-height: unset;
    margin: -100px 0;
    transform: translateY(285px);
    border-right: solid 2px var(--color-yellow);
  }
  .silver-legion-stories {
    margin: -250px 0 -150px auto;
    border-left: solid 2px var(--color-yellow);
    border-right: none;
  }
  .silver-legion-stories::before {
    position: absolute;
    content: "";
    background-image: url("../image/public/decor-02.png");
    background-position: center;
    background-size: contain;
    background-repeat: space;
    width: 12px;
    height: 12px;
    top: 2px;
    right: 6px;
  }
  .by-faction-siema {
    transform: translateY(0px);
    max-width: 70%;
    margin: 0 auto;
  }
  .by-faction .do-button.primary.find-more.faction {
    transform: translate(600px, 50px);
  }
  .do-button.primary.read-now.faction.on-slide {
    transform: translateY(-40px);
  }
  .legion-desktop-prev,
  .oathbound-desktop-prev {
    position: absolute;
    left: 5%;
    top: 45%;
  }
  .legion-desktop-next,
  .oathbound-desktop-next {
    position: absolute;
    right: 5%;
    top: 45%;
  }
  .do-faction-logo-name-container.desktop {
    display: inline-block;
    text-align: center;
    transform: translateY(180px);
  }
  .do-faction-logo-name-container.desktop.right {
    float: right;
    transform: translateY(130px);
  }
  .do-faction-logo-name-container.desktop * {
    display: block;
    transform: translate(0, 0);
    margin: 0;
    float: none;
  }
  .do-faction-logo-name-container.desktop img {
    height: 200px;
    width: auto;
  }
  .do-faction-logo-name-container.desktop
    a.do-button.primary.find-more.desktop {
    display: inline-block;
    transform: translate(0, 0);
    margin: 0;
    float: none;
  }
  /* END BY FACTION */
  /* START FOOTER */
  .do-home-footer-container {
    padding: 150px 270px;
  }
  .do-button.primary.register-now,
  .do-button.primary.register-now:hover {
    font-size: 18px;
    padding: 15px 30px;
  }
  .do-button.primary::before,
  .do-button.primary::after {
    width: 15px;
    height: 15px;
  }
  .footer-links-wrapper {
    display: flex;
    justify-content: space-around;
    margin-right: 20px;
  }
  .footer-links .footer-links-item,
  .footer-social-links {
    padding: 0 0 0 30px;
    text-align: start;
  }
  .footer-dragnethar-logo img {
    max-height: 90px;
  }
  .footer-links {
    margin: 0 auto;
    padding-top: 10px;
  }
  .footer-social-links {
    display: grid;
  }
  .footer-social-links .social-logo {
    margin: 0;
    padding: 3px;
  }
  .footer-social-links .social-logo img {
    max-width: 12px;
    max-height: 12px;
  }
  .footer-social-links .social-logo a {
    display: grid;
    grid-template-columns: 1fr 4fr;
  }
  .social-links-text.desktop {
    margin: 0;
  }
  .footer-links-item a,
  .social-links-text.desktop {
    font-size: 12px;
    font-family: "nunito-sans";
  }
  /* END FOOTER */
  /* END PAGE: stories */
  /* START PAGE: content_story */
  /* START STORY-MENU */
  .do-section.chapter-menu {
    margin-top: -100px;
  }
  .chapter-head h1 {
    margin: auto;
    font-size: 20px;
  }
  .chapter-list {
    width: 98%;
  }
  img.chapter-decor {
    width: 25px;
    height: 25px;
    margin: auto 10px;
  }
  .chapter-list a p.chapter-number,
  .chapter-list a p.chapter-title {
    font-size: 18px;
  }
  /* END STORY-MENU */
  /* END PAGE: content_story */
  /* START PAGE: story_chapter */
  /* START STORY_HEADER */
  .do-section.story-header {
    margin-bottom: 0;
  }
  .story-header.story-chapter-header {
    margin-bottom: 0;
    transform: translateY(45px);
  }
  .story-chapter-header .story-preview {
    margin: 0 auto;
    transform: translateY(-43px);
    border-left: none;
    text-align: center;
    padding: 50px 0 25px;
  }
  .story-chapter-header .story-preview::before,
  .story-chapter-header .story-preview::after {
    background-image: none;
  }
  .story-chapter-header .story-chapter-page .stories-title,
  .story-chapter-header .story-chapter-page .chapter-icon-number {
    /* margin: 0 auto; */
    display: block;
  }
  .story-chapter-header .story-chapter-page .vorax-box {
    text-align: left;
    margin: 0 auto;
  }
  .story-chapter-header .story-cover {
    margin: 25px auto auto;
    transform: unset;
  }
  /* END STORY_HEADER */
  /* END PAGE: story_chapter */
  /* LORE REWORK START  */
  .do-lore-banner-nav {
    top: 50%;
  }
  .do-lore-banner-item {
    width: 100%;
    height: 350px;
  }
  .do-lore-banner-item > img {
    width: 100%;
    object-fit: cover;
    z-index: 2;
  }
  .do-lore-banner-item a > img {
    width: 100%;
    object-fit: cover;
    z-index: 2;
  }
  .do-lore-banner-item h1,
  .do-lore-banner-item h2 {
    font-size: 1.5rem;
    top: 45%;
  }
  .do-lore-banner-item h2 {
    top: 55%;
    font-size: 1.2rem;
  }
  .do-lore-character-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .do-lore-character-container,
  .do-lore-location-container,
  .do-lore-race-container {
    /* height: 360px; */
  }
  .do-lore-faction-container {
    /* height: 300px; */
  }
  .do-lore-location-grid {
    gap: 15px;
  }
  .do-lore-webnovel-grid {
    gap: 15px;
  }
  .do-lore-webnovel-container {
    grid-template-columns: 1fr 4fr;
  }
  .do-lore-race-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .do-lore-faction-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  .do-lore-placeholder {
    padding: 160px 10px;
  }
  .do-lore-placeholder.faction {
    padding: 110px 10px;
  }
  /* LORE REWORK END  */
  /* CHARACTER DETAIL START */
  .do-character-grid {
    grid-template-columns: 300px 1fr;
    gap: 30px;
  }
  .do-character-grid.location {
    grid-template-columns: 1fr;
    margin: 50px 50px 30px;
    gap: 30px;
  }
  .do-character-item-container {
    border: solid 1.5px var(--color-yellow);
    padding: 10px 30px;
  }
  /* CHARACTER DETAIL END */
  /* END 768px */
}
@media screen and (min-width: 900px) {
  .do-lore-webnovel-grid {
    grid-template-columns: 1fr 1fr;
  }
  .do-lore-webnovel-container {
    grid-template-columns: 2fr 3fr;
  }
}
@media screen and (min-width: 1024px) {
  /* LORE REWORK START  */
  .do-lore-banner-item {
    width: 100%;
    height: 450px;
  }
  .do-lore-banner-item > img {
    width: 100%;
    object-fit: cover;
    z-index: 2;
  }
  .do-lore-character-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .do-lore-character-container,
  .do-lore-location-container,
  .do-lore-race-container {
    /* height: 360px; */
  }
  .do-lore-faction-container {
    /* height: 210px; */
  }
  .do-lore-location-grid,
  .do-lore-webnovel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .do-lore-race-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .do-lore-faction-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  /* LORE REWORK END  */
}
@media screen and (min-width: 1366px) {
}
@media screen and (min-width: 1920px) {
}