:root {
    --primary-color: #363636;
    --secondary-color: #DAAB36;
    --accent-color: #735A1C;
    --bright-color: #E8B639;
    --background-color: #F6F6F6;
    --footer-color: #363636;
    --lead-color: #403210;
    --white-color: #FFFFFF;
}

h2 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  font-size: 1.6rem !important;
}

h3 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  font-size: 1.5rem !important;
  color: var(--footer-color) !important;
}

a {
  color: var(--primary-color) !important;
}

body {
  background-color: var(--background-color) !important;
}

details[open] > summary {
    display: none !important;
}

.fw-bolder {
  color: var(--primary-color) !important;
}

.table td {

}

.lead {
  color: var(--lead-color) !important;
}

.btn-primary, .btn-primary:active, .btn-primary:visited {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.footer-custom {
    background-color: var(--footer-color);
}

.navbar-custom {
    background-color: var(--primary-color);
}

.navbar-toggler-icon {
  color: var(--white-color) !important;
}

.category a {
  text-decoration: none !important;
  font-size: 1.2rem !important;
}

.card-img-top {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

.card-header {
  text-transform: uppercase !important;
  font-weight: bold !important;
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--white-color) !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

.card {
  border: 0px !important;
  border-radius: 20px !important;
}

.search {
  border-color: var(--accent-color) !important;
}

.search .card-header, .search .card-body {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.search .card-body {
  border-radius: 20px !important;
}

.top-title {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  font-size: 1.8rem !important;
  font-style: italic;
}

.header-custom {
  background-color: var(--bright-color) !important;
}

.card-body .comentario {
  background-color: var(--bright-color) !important;
}

.navbar-brand {
  color: var(--white-color) !important;
  font-size: 1.5em !important;
}

.nav-item a {
  color: var(--white-color) !important;
  font-weight: bold !important;
}

.nav-item a:hover {
  color: var(--secondary-color) !important;
}

.nav-item .current {
    font-weight: bold;
    color: var(--secondary-color);
    cursor: text;
}

.nav-item .current:hover {
    color: var(--white-color) !important;
}

.nav-item {
  font-size: 1.1em;
}

.highlight {
  background-color: yellow;
}

.article {
   min-height: 450px !important;
   max-height: 450px !important;
}

.article-img {
  border-radius: 20px !important;
}

.amarillo {
  background-color: yellow;
}

.breadcrumb-item {
  font-size: 1.2em;
}

.category {
  font-size: 1.1em;
}

.truncate-con {
    width: 100%;
}

.truncate-con p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-con h2 {
    font-size: 1.5rem;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-con a {
    text-decoration: none !important;
    color: var(--accent-color) !important;
}

.ratio-16x9 {
    height: auto;
}

.relative {
  position: relative !important;
}

.resaltar {
  font-weight: bold;
  padding-left: 0px !important;
}

.page-link {
  border-color: var(--bright-color) !important;
  font-weight: bold !important;
  font-size: 1.2em !important;
}

.active>.page-link, .page-link.active {
  border-color: var(--primary-color) !important;
}

.page-item span {
  background-color: var(--primary-color) !important;
}

.img-video {
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;

    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 30%;
        height: 30%;
        background: url('/imagenes/play-button.png') no-repeat center center;
        background-size: contain;
        pointer-events: none;
    }
}

@media (max-width: 767px) {
    .img-video {
        width: 100% !important;

        &::after {
          width: 40%;
          height: 40%;
        }
    }
}