/**
 * GLOBAL
 */
body {
    font-family: 'Roboto', sans-serif !important;
    line-height: 34px;
    font-weight: 400;
    font-size: 18px;
}

.btn-contact-submit {
  color: #ffffff;
  background-color: var(--template-color);
  border-color: var(--template-color);
  padding-left: 1rem;
  padding-right: 1rem;
}
.col-lg-9 .btn-contact-submit {
    width: 230px;
}
.btn-contact-submit:hover {
  color: #ffffff;
  opacity: 0.8;
}
.bg-gray-1 {
  background: #f4f4f4
}
.text-gray-2 {
  color: #888
}
.img-cover {
  object-fit: cover;
}
a {
  text-decoration: none;
  color: var(--template-color);
}
h1 {
  font-size: 1.6rem;
  font-weight: bold;
}
h2 {
  font-size: 1.4rem;
  font-weight: bold;
}
h3 {
  font-size: 1.3rem;
  font-weight: bold;
}

.dot {
    height: 2rem;
    width: 2rem;
    line-height: 2rem;
    background-color: #0d6efd;
    border-radius: 50%;
    font-size: .9rem;
    color: #fff;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    margin: 0 .2rem;
}
.date {
    font-size: .9rem;
    font-style: italic;
    color: #6c757d;
    background: #f4f4f4;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    margin-bottom: 1.5rem;
    margin-left: 0;
}
.date-created,
.date-updated {
    font-size: 15px;
}
/**
 * END GLOBAL
 */

/**
 * HEADER
 */
.page-header {

}
.page-header-sticky {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  background-color: rgba(248,249,250 , 1);
}
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
  .page-header .nav-link,
  .page-header .nav-link:active {
    font-weight: bold;
    color: #FFF !important;
    border-bottom: 1px solid transparent !important;
  }
  .page-header .nav-link:hover {
    color: #DB2E2D !important;
    border-bottom: 1px #DB2E2D solid !important;
  }
  .page-header-sticky .nav-link,
  .page-header-sticky .nav-link:active {
    color: rgba(0,0,0,.55) !important;
  }
  .navbar-light .navbar-toggler-icon {
    background-color: #fff;
  }
  .header-phone-icon {
    color: #fffc00;
  }
  .header-phone-text {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.4rem;
  }
  .header-phone-text:hover {
    color: #fffc00;
  }

.banner {
    height: 16rem;
    background-position: center;
    background-size: cover;
    padding: 1rem;
}
  .banner-heading {
    color: #fff;
    font-size: 2rem;
    margin-top: 10rem
  }
.top-tittle {
    background-color: var(--template-color);
    color: #ffffff;
}
.top-tittle h1 {
  font-size: 1.2rem;
  padding: 1rem;
}
/**
 * END HEADER
 */

/**
 * article
 */
article {
  line-height: 34px;
  font-weight: 400;
  font-size: 18px;
  color: rgb(34, 34, 34);
  text-align: justify;
}
article h1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
article h2 {
  padding-left: 0.6rem;
  border-left: 0.2rem solid var(--template-color);
  margin: 0.6rem 0;
}
article h3 {
  margin-left: 1.2rem;
}
article img {
  border-radius: 0.25rem
}
article table {
  border-color: #dee2e6;
  width: 100%;
  margin-bottom: 1rem;
}
article table>:not(caption)>* {
  border-width: 1px 0;
}
article table>:not(caption)>*>* {
  border-width: 0 1px;
  padding: 0.5rem 0.5rem;
}
#TableOfContents a {
    color: #444444;
}
#TableOfContents a:hover {
    color: var(--template-color);
}

#TableOfContents .p-2 a {
   font-weight: bold;
}
#TableOfContents .p-3 a {
    font-size: 15px;
}
/**
 * END MAIN
 */

/**
 * FORM
 */
.form {
  background: #f6f6f6;
  padding: 1rem 1rem 3rem 1rem;
  margin: 1rem 0;
}
.rating-wrap {
  padding: .4rem 0;
}
.fa.fa-star {
  color: #FFC107;
}
.fa.fa-star-o{
  color: #FFC107;
}
/**
 * END FORM
 */

/**
 * COMMENT
 */
.comment-summary {
  border-bottom: 1px solid #dee2e6;
  padding: .5rem 0;
  font-size: 18px;
}
.comment-list {
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 1rem;
}
.list-comments-time {
    font-size: 14px;
}
.list-comments-time,
.list-comments-phone {
  color: #6c757d;
}

.list-comments-admin-box {
  border: 1px solid #dee2e6;
  background-color: #F8F8F8;
  padding: .5rem .5rem;
  border-radius: .25rem;
}
.list-comments-user {
  padding: .2rem 0;
}
.list-comments-user span {
   font-size: 15px;
}
.list-comments-text-avatar {
  height: 32px;
  width: 32px;
  margin-right: .5rem;
  border-radius: .25rem!important;
  text-anchor: middle;
  user-select: none;
}
.list-comments-img-avatar {
  height: 32px;
  width: 32px;
  margin-right: .5rem;
  border-radius: 50%!important;
}
/**
 * END COMMENT
 */

/**
 * SIDEBAR
 */
aside {
  min-height: 800px;
}
.sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 1rem;
  z-index: 1020;
}
  .card-product-item {
    padding: 0.5rem;
    border-bottom: 1px solid #dee2e6!important;
  }
  .card-product-item h5 {
    font-size: .8rem;
    font-weight: bold;
  }
  .card-product-img {
    width: 80px;
    height: 80px;
  }
  .card-product-price {
    color: #4caf50;
    font-weight: bold;
  }
  .card-product-currency {
    color: #9c9c9cab;
  }
/**
 * END SIDEBAR
 */

/**
 * CARD
 */
.card {
  margin-bottom: 1rem;
}
  .card-contact {
      border: 1px solid var(--template-color);
  }
  .card-header {
    background-color: var(--template-color);
    color: #FFFFFF;
    text-transform: uppercase;
  }

  /* card-article-tag */
  .card-article-tag {
    padding: 1rem 0;
  }
    .card-article-tag-img {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: 0.25rem;
    }
    .card-article-tag-body {
      padding-top: .5rem;
    }
    .card-article-tag h5 {
      font-size: .8rem
    }
    .card-article-tag h5 a {
      color: #444444;
    }
    .card-article-tag h5 a:hover {
      color: #f46f20;
    }

  /* card-sidebar-news */
  .card-sidebar-news {
    padding: .5rem;
    border-bottom: 1px solid #dee2e6;
  }
    .card-sidebar-news-img {
      width: 100%;
      height: 68px;
      object-fit: cover;
      border-radius: 0.25rem;
    }
    .card-sidebar-news-body {
      padding-left: 0.5rem;
      font-size: .75rem;
      line-height: 1.1rem;
    }
    .card-sidebar-news h5 {
      font-size: .8rem
    }
    .card-sidebar-news h5 a:hover{
      color: #f46f20;
    }

  /* card-sidebar-default */
  .card-sidebar-default {

  }
    .card-sidebar-default-img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }
    .card-sidebar-default-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      background: #52504F;
      opacity: 0.9;
      padding: 0.4rem;
      width: 100%;
      font-size: .9rem;
    }
    .card-sidebar-default-caption-link {
      position: relative;
      display: block;
      color: #FFFFFF;
    }
    .card-sidebar-default-caption-link:hover {
      opacity: 0.9;
      color: #FFFFFF;
    }
    .card-sidebar-default-body {
      padding: .2rem .5rem;
      border-bottom: 1px solid #dee2e6;
    }
    .card-sidebar-default-link {
      color: #0a58ca;
      font-size: 0.9rem;
      display: flex;
    }
    .card-sidebar-default-link:hover,
    .card-sidebar-default-link i {
      color: #f46f20;
      padding-right: 0.2rem;
    }

  .card-page {
    background-color: #FEF9E6;
    padding: .8rem .8rem;
  }
    .card-page-img {
      border-radius: 0.25rem;
      width: 100%;
      height: 148px;
      object-fit: cover;
    }
    .card-page-body {
      padding-top: .5rem;
    }
    .card-page-title {
      font-size: 1rem;
    }
    .card-page-text {
      font-size: .8rem;
    }

    .card-circle-section {
        background-color: #F9F4D5;
        background-image: url('../img/circle-bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: .6rem 1rem;
        margin-bottom: 1rem;
    }
    .card-circle-header {
        color: #c52c20;
        border-bottom: 1px solid #c52c20;
        text-transform: uppercase;
    }
    .card-circle-section .card-circle {
        display: flex;
        padding: .6rem .4rem;
    }
    .card-circle-section .card-circle:not(:last-child) {
        border-bottom: 1px solid rgba(0,0,0,.125);
    }
    .card-circle-img {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        object-fit: cover;
    }
    .card-circle-body {
        padding-left: .5rem;
        padding-top: .4rem;
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: column;
    }
    .card-circle-title {
        font-size: 15px;
        margin-bottom: 0;
        line-height: 1.4;
    }
    .card-circle-title a {
        color: #444444;
    }
    .card-circle-comment {
        font-size: 13px;
        margin-top: auto;
        align-self: flex-end;
        line-height: 1;
    }
    .card-circle-comment a {
        color: #6c757d;
    }
    .card-circle-comment i {
        color: #BC141A;
    }

  .card-column-container {
    background-color: #FEF9E6;
  }
    .card-column {

    }
    .card-column-img {
      border-radius: 0.25rem;
      width: 100%;
      height: 88px;
      object-fit: cover;
    }
    .card-column-body {
      padding-top: .5rem;
    }
    .card-column-title {
      font-size: .8rem;
    }

  /* card-list */
  .card-list {
    padding: .5rem;
    border-bottom: 1px solid #dee2e6;
  }
    .card-list h2 {
      font-size: 1rem;
    }
    .card-list-img {
      width: 100%;
      height: 90px;
      object-fit: cover;
      border-radius: 0.25rem;
    }
    .card-list-body {
      padding-right: 0.5rem;
      padding-left: 1rem;
    }


    .related-page-heading, .comment-page-heading {
      font-size: 1.4rem;
      padding-left: 0.6rem;
      border-left: 0.2rem solid var(--template-color);
      margin: 0.6rem 0;
    }
    .card-related-page-item {
      padding: .4rem .2rem;
    }
    .card-related-page-img {
      width: 100%;
      height: 70px;
      object-fit: cover;
      border-radius: 0.25rem;
    }
    .card-related-page-body {
      padding-right: 0.5rem;
      padding-left: 1rem;
    }
    .card-related-page-heading {
      font-size: 1rem;
      font-weight: bold;
      line-height: 1.5;
    }
    .card-related-page-heading a {
      color: #000000;
    }
.card-related-page-heading a:hover {
    color: #bc141a;
}

/**
 * END CARD
 */





/**
 * START Page
 */
.carousel {}
  .carousel-img {
    display: block;
    width: 100%;
    height: 600px;
    object-fit: cover;
    padding: 0.25rem;
    border: 1px solid #dee2e6;
    border-radius: 1rem;
  }
  .carousel-control-next-icon, .carousel-control-prev-icon {
    width: 4rem;
    height: 4rem;
  }
/**
 * END Page
 */

/**
 * START Home
 */
.search-container {
  margin-top: 1.5rem;
}
  .search-container h1 {
    color: #0842a0;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }
    .search-container h1 img {
      height: 3.5rem;
      width: 3.5rem;
      margin-bottom: 1rem;
    }
  .search-container form {
    position: relative;
  }
    .search-container form i {
      position: absolute;
      top: .9rem;
      left: 1rem;
      font-size: 1rem;
    }
    .search-container form input {
      padding: .6rem .5rem .6rem 2.5rem;
      font-size: 1.1rem;
    }

.contact-me {
  text-align: center;
}
  .contact-me a {
    border: 1px solid #dee2e6;
    border-radius: 50rem;
    padding: 0.5rem;
  }
    .contact-me img {
      width: 20px;
      height: 20px;
    }

.page-selector {
    margin-top: 2.5rem;
}
  .page-selector ul {
    padding-left: 0;
    list-style: none;
  }
    .page-selector a {
      display: block;
      border: 1px solid #a9acaa;
      border-radius: .5rem;
      box-shadow: 0 1px 4px rgba(0,0,0,.25);
    }
    .page-selector a:hover {
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
    }
      .page-selector img {
        max-width: 100%;
        height: auto;
        padding: 0 2.5rem 1rem;
      }
      .page-selector h3 {
        font-size: 1rem;
        font-weight: normal;
        margin-bottom: 0;
        color: #1b1b1b;
      }
/**
 * END Home
 */

/**
 * START Edit
 */
.sticky-container {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  bottom: 2rem;
  z-index: 9999;
  margin-left: 2rem;
}
.btn-edit {
  display: inline-block;
  padding: .5rem;
  font-size: 2.6rem;
  color: #0d6efd;
  border: 1px solid #0d6efd;
  border-radius: 50%;
}
.btn-edit:hover{
  background-color: #F6F6F6;
}
/**
 * END Edit
 */

article h3 ~ p,
article h3 ~ div {
    margin-left: 2.2rem;
}
article h3 ~ ul,
article h3 ~ ol {
    margin-left: 1.2rem;
}
.call-icon {
    bottom: 3.5rem !important;
    right: 3.5rem !important;
}
.call-icon img {
    width: 50px;
    height: 50px;
}
.call-icon div {
    cursor: pointer;
}

@media (max-width: 576px) {
    article .img-article {
        min-width: 100%;
    }
    .search-container h1 {
        font-size: 1.3rem;
    }
    .banner-heading {
        font-size: 1.3rem;
    }
    .page-header {
        background-color: rgba(248,249,250, 1);
    }
    .page-header .navbar-nav .nav-link {
        color: rgba(0,0,0,.55) !important;
    }
    article h3 {
        margin-left: 0;
    }
    article h3 ~ p,
    article h3 ~ div {
        margin-left: 0;
    }
}