/* BUTTONS */

.btn-category {
  border: none;
  border-radius: 5px;
  background-color: #e4edef;
  padding: 2px 5px;
  font-size: 14px;
  margin-bottom: 10px;
}

button:hover {
  color: var(--color-tertiary);
  background-color: var(--bg-color-primary)!important;
}

.btn-category:hover, .btn-category:active {
  background-color: var(--tertiary)!important;
}

/* LATEST NEWS */

.latestnews__wrapper .latestnews__wrapper_cat-badge {
  background-color: var(--cat-badge-bg);
  color: var(--gray-light);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.latestnews__wrapper_news {
  background-color: #f5f5f5;
  position: relative;
  top: 4px;
}

.latestnews__wrapper_news {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

/* NEWSLETTER */

#newsletter {
  display: grid;
  grid-template-columns: 70% 1fr;
}

@media only screen and (min-width: 991.98px) {
  #newsletter {
    display: grid;
    grid-template-columns: 75% 1fr;
  }
}

/* PAGINATION */

.pagination .page-link {
  border: none;
  color: var(----primary-tint-1);
  margin: 0 5px;
}

.pagination .page-link:hover {
  background-color: var(--tertiary);
}

.pagination .page-link.active {
  background-color: var(--tertiary);
  border: none;
  color: var(----primary-tint-1);
}

.mn {
  position: relative;
  top: -70px;
}

/* BUTTONS */

.btn-sh {
  background-color: var(--tertiary);
  color: var(--primary);
}

.btn-sh:hover {
  background-color: var(--primary)!important;
  color: var(--secondary);
}

.btn-sh-invert {
  background-color: var(--primary);
  color: var(--secondary);
  border: 1px solid transparent;
}

.btn-sh-invert:hover {
  background-color: var(--tertiary);
  color: var(--primary);
  border: 1px solid var(--primary)!important;
}

.btn-sh-price {
  background-color: var(--tertiary);
  color: var(--primary);
  border: 1px solid transparent;
}

.btn-sh-price:hover {
  background-color: transparent;
  color: var(--tertiary);
  border: 1px solid var(--tertiary);
}

/* LESSONS BUTTONS */

.btn-sh-prev-lesson {
  background-color: var(--primary-tint-3);
  color: var(--secondary);
  border: none;
}

.btn-sh-prev-lesson:hover {
  background-color: var(--primary)!important;
  color: var(--secondary);
}

.btn-sh-next-lesson {
  background-color: var(--tertiary);
  color: var(--primary);
  border: none;
}

.btn-sh-next-lesson:hover {
  background-color: var(--primary)!important;
  color: var(--secondary);
}

.btn-sh-completed-lesson {
  background-color: var(--circleIsCompleted);
  color: var(--secondary);
  border: none;
}

.btn-sh-completed-lesson:hover {
  background-color: var(--primary)!important;
  color: var(--secondary);
}

.btn-sh-completed-lesson .fa-check {
  background-color: unset!important;
}

.accordion-button .fa-check {
  background-color: unset!important;
}
.top-el-30 {
  top: -30px;
  position: relative;
}
/* SLICK DOTS */
.slick-dots {
 display: flex!important;
 justify-content: center;
 list-style-type: none;

}
.slick-dots button {
  display: block;
			width: 1rem;
			height: 1rem;
			padding: 0;
			border: none;
			border-radius: 100%;
			background-color: var(--secondary);
      margin: 0 8px;
			text-indent: -9999px;
}
.slick-dots button:hover {
  background-color: var(--tertiary)!important;
}
li.slick-active button {
  background-color: var(--tertiary)!important;
}
/* HERO SLICK DOTS */
.hero-slick .slick-dots,
.product-slick .slick-dots {
  top: -50px;
  position: relative;
}
/* SLICK ARROWS */
.slick-prev {
  font-size: 20px;
  line-height: 0;
  position: absolute;
  top: 50%;
  left: 10px;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  transform: translate(0,-50%);
  cursor: pointer;
  color: var(--primary);
  border: none;
  outline: 0;
  background: var(--tertiary);
  z-index: 1;
  border-radius: 50%;
  opacity: .5;
}
.slick-prev:hover {
  background-color: var(--primary)!important;
  color: var(--tertiary);
  opacity: 1
}

.slick-next {
  font-size: 20px;
  line-height: 0;
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  transform: translate(0,-50%);
  cursor: pointer;
  color: var(--primary);
  border: none;
  outline: 0;
  background: var(--tertiary);
  z-index: 1;
  border-radius: 50%;
  opacity: .5
}
.slick-next:hover {
  background-color: var(--primary)!important;
  color: var(--tertiary);
  opacity: 1
}
@media (min-width: 991.98px) {
  .slick-prev,
  .slick-next {
    width: 60px;
    height: 60px;
    font-size: 30px;
  }
  .slick-prev {
    left: 200px;
  }
  .slick-next {
    right: 200px;
  }
  .blog-slick .slick-prev {
    left: -70px;
  }
  .blog-slick .slick-next {
    right: -70px;
  }
}