/*********************
START: SINGLE
*********************/
.single--content>h1 {
  font-size: var(--txt35);
}

/*********************
END: SINGLE
*********************/


/*********************
START: CONTENT
*********************/
.content {
  display: flex;
  justify-content: space-between;
}

.content--showCase {
  width: 69%;
}

.content--title {
  border-top: 1px solid var(--grayLight-color);
  border-bottom: 1px solid var(--grayLight-color);
  padding-block: 1.25rem;
  margin-block: 2rem;
  font-family: var(--font-familyNum);
}

.content--title>h1 {
  font-size: var(--txt20);
}

.content--title>h2 {
  font-size: var(--txt16);
}

.content--title .blogs--card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content--title .blogs--card__header>div {
  display: flex;
  align-items: center;
}

.content--title .blogs--card__header>div:last-child>div:not(:last-child) {
  margin-inline-end: 1rem;
}

.content--title .blogs--card__header>div:last-child>div:not(:last-child)>img,
.content--title .blogs--card__header>div:first-child>img {
  margin-inline-end: 3px;
  vertical-align: baseline;
}

.content--text p {
  font-size: var(--txt18);
  line-height: var(--line-height160);
  text-align: justify;
  margin-block-end: 1rem;
}

.content--text ul {
  background-color: #F0F0F0;
  border-radius: var(--border-radius5);
  padding: 2.5rem;
  list-style: disc;
  margin-block: 1rem;
}

.content--text ul li {
  position: relative;
  text-align: justify;
  line-height: var(--line-height160)
}

.content--text ul li:not(:last-child) {
  margin-block-end: 1.5rem;
}

/* content--side */
.content--side {
  width: 29%;
}

.content--category ul {
  padding: 1.5rem;
  border-radius: var(--border-radius10);
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/icons/Rectangle-aside-blue.svg);
}

.content--category ul li {
  position: relative;
  font-size: var(--txt18);
  padding-inline-start: 1.75rem;
  width: 90%;
}

.content--category:nth-child(2) ul {
  padding: 1.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--border-radius10);
  background-image: url(../img/icons/Rectangle-aside-purpel.svg);
}

.content--category ul li:not(:last-child) {
  margin-block-end: 2rem;
}

.content--subject ul {
  padding: 1.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--border-radius10);
  background-image: url(../img/icons/Rectangle-aside-purpel.svg);
}

.content--subject ul li {
  width: 90%;
  font-size: var(--txt16);
}

.content--subject ul li:not(:last-child) {
  margin-block-end: 1.25rem;
}

.tableContent {
  padding: 1.5rem 2rem;
  border-radius: var(--border-radius10);
  background-color: #F0F0F0;
  margin-block-end: 2rem;
}

.lwptoc_header {
  margin-block-end: 1.5rem;
}

.lwptoc_title {
  position: relative;
  font-size: var(--txt30);
  margin-block-end: 1rem;
  color: var(--secondary-color);
  padding-inline-start: 2rem;
}

.lwptoc_title::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/tableContents.svg);
}

.lwptoc_itemWrap {
  color: var(--primary-color);
  margin-block-end: 1rem;
}

.lwptoc_item {
  position: relative;
  padding-inline-start: 1rem;
}

.lwptoc_item:not(:last-child) {
  margin-block-end: 1rem;
}

.lwptoc_item::before {
  position: absolute;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background-color: var(--primary-color);
}

.star--rating {
  margin-block-start: 2rem;
  padding: 1rem;
  border: 1px solid var(--purple-color);
  border-radius: var(--border-radius10);
}

.star--rating h4 {
  margin-block-end: 1rem;
}

/*********************
END: CONTENT
*********************/


/*********************
START: COMMENT
*********************/
.commentBottom {
  margin-block-end: 3rem;
}

.comment-respond {
  margin-block-start: 2rem;
  width: 80%;
  margin-inline: auto;
}

.comment-respond .comment-reply-title {
  color: var(--primary-color);
  margin-block-end: 1rem;
}

.comment-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.comment-form>p {
  margin-block-end: 1rem;
}

.comment-notes,
.comment-form-comment,
.comment-form-cookies-consent {
  width: 100%;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
  width: 48%;
}

.commentlist {
  width: 80%;
  margin-inline: auto;
}

.commentlist li {
  background-color: var(--purpleLight2-color);
  padding: 1rem;
  border-radius: var(--border-radius10);
  margin-block-start: 1rem;
  list-style: none;
  border: 1px solid var(--purple-color);
}

.reply {
  background: var(--primary-color);
  padding: 0.5rem 0.75rem;
  color: var(--baseLight-color);
  border-radius: var(--border-radius10);
  margin-inline-start: auto;
  display: block;
  width: max-content;
}

.comment-meta.commentmetadata {
  color: var(--purple-color);
}

.commentlist .comment-author img {
  border-radius: 50%;
  margin-inline-end: 0.5rem;
}

/*********************
END: COMMENT
*********************/
@media screen and (min-width: 2560px) {

  .lwptoc_title{
    font-size: var(--txt35);
  }

  .content--title>h1,
  .content--title>h2, 
  .lwptoc_item, 
  .content--text h2, 
  .star--rating h4{
    font-size: var(--txt30);
  }

  .blogs--content>ul>li .blogs--card__body>h6,
  .blogs--content>ul>li .blogs--card__body>p, 
  .content--text p, 
  .comment-respond .comment-reply-title{
    font-size: var(--txt25);
  }

  .blogs--card__header div p,
  .blogs--card__header div span,
  .content--category ul li,
  .kk-star-ratings .kksr-muted,
  .comment-form>p,
  .comment-form-comment label,
  .comment-author .fn,
  .comment-author .say,
  .blogs--content>ul>li .blogs--card__body>a.btn--primary__borderles {
    font-size: var(--txt20) !important;
  }

  .blogs--card__header img {
    width: 1.5rem;
  }

  .content--category ul li {
    width: 85%;
  }

  .commentlist .comment-author img {
    width: 5rem;
    height: 5rem;
  }
}

@media screen and (min-width: 1920px) and (max-width: 2559px) {

  .content--title>h1,
  .content--title>h2, 
  .lwptoc_item, 
  .content--text h2, 
  .star--rating h4 {
    font-size: var(--txt25);
  }

  .blogs--content>ul>li .blogs--card__body>h6,
  .blogs--content>ul>li .blogs--card__body>p, 
  .content--text p, 
  .comment-respond .comment-reply-title {
    font-size: var(--txt20);
  }

  .blogs--card__header div p,
  .blogs--card__header div span,
  .content--category ul li,
  .comment-form>p,
  .comment-form-comment label,
  .blogs--content>ul>li .blogs--card__body>a.btn--primary__borderles {
    font-size: var(--txt18) !important;
  }

  .blogs--card__header img {
    width: 1.25rem;
  }

  .commentlist .comment-author img {
    width: 4rem;
    height: 4rem;
  }
}

@media screen and (max-width: 1200px) {
	
	.content--category:first-child ul{
		background-image: unset;
		background-color: var(--blueLight1-color);
	}
	
	.content--category ul li{
		font-size: var(--txt16) !important;
	}
	
	.content--category:nth-child(2) ul{
	    background-image: unset;
		background-color: var(--purpleLight2-color);
	}
	
	.content--category ul{
		padding: 1rem 0 1rem 1rem !important;
	}
}

@media screen and (max-width: 768px) {
  .content {
    flex-direction: column-reverse;
  }

  .content--showCase,
  .content--side {
    width: 100%;
  }

  .content--subject ul,
  .content--category ul {
    min-height: auto;
  }

  .content--imageIndicator>img {
    width: 50%;
  }

  .single--content {
    margin-block-start: 2rem;
  }
	
	.content--category ul li:not(:last-child), 
	.content--category:nth-child(2) li:not(:last-child){
		margin-block-end: 1rem;
	}
}


@media screen and (max-width: 576px) {

  .comment-form-author,
  .comment-form-email,
  .comment-form-url {
    width: 100%;
  }
}

@media screen and (max-width: 425px) {

  .comment-respond,
  .commentlist {
    width: 100%;
  }

  .content--title .blogs--card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .content--title .blogs--card__header>div:first-child {
    margin-block-end: 1rem;
  }
}