/*--------------------------------------------------------------
>>> GLOBAL COLORS
----------------------------------------------------------------*/

:root {

    /* MAIN COLOR */
    --main-10: #FF0000;
    --main-20: #8A1002;

    --neutral-10: #F9F9F9;
    --neutral-20: #DCDDDD;
    --neutral-30: #D0D6DA;

    --dark-10: #202020;
    --dark-20: #3E3A39;
    --dark-30: #5D6468;
}

/*--------------------------------------------------------------
>>> GLOBAL COLORS
----------------------------------------------------------------*/

h1, h2 {
    color: var(--dark-10);
}
h3, h4, h5, h6 {
    color: var(--dark-10);
}
a, a:visited {
    color: var(--dark-20);
}
a:hover, a:focus {
    color: var(--main-20);
}
p {
    color: var(--dark-20);
}

.tabs.overlap a:not(.btn):visited {
    color: #FFF;
}

.tabs.overlap .shape-shadow a:visited {
  color: var(--main-20);
}


/*--------------------------------------------------------------
>>> BOOTSTRAP FIXES & REWRITE
----------------------------------------------------------------*/

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--main-10);
}
form button, form input[type="button"], form input[type="reset"], form input[type="submit"] {
  background: var(--main-10);
}
.form-control:focus, .form-select:focus {
  color: var(--dark-20);
  border-color: var(--main-10);
  box-shadow: 0 0 0 .25rem rgba(0, 119, 129, .25);
}
.wpcf7-not-valid-tip {
  font-size: .85rem;
  color: var(--main-10);
}
form button, form input[type="button"], form input[type="reset"], form input[type="submit"] {
    background: var(--main-10);
}
.bg-light {
    background: var(--neutral-10)!important;
}

/*--------------------------------------------------------------
>>> GLOBAL ELEMENTS
----------------------------------------------------------------*/

.line-left:after {
  background: var(--main-10);
}

ol li::marker {
  color: var(--dark-20);
}
thead th {
  border: 1px solid rgba(0, 159, 153, .35);
}
tbody th, tbody td {
  border: 1px solid rgba(0, 159, 153, .35);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: var(--main-20);
  border-bottom: 4px solid var(--main-20);
}
.nav-tabs {
    border-bottom: 4px solid var(--neutral-20);
}
.bg-gray {
  background: var(--neutral-10);
}

/*--------------------------------------------------------------
>>> COLORED ANIMATIONS
----------------------------------------------------------------*/

@keyframes circle-click {
    0% {
        width: 0px;
        height: 0px;
        top: calc(50%);
        left: calc(50%);
        background: rgba(0, 159, 153, 0);
    }
    50% {
        background: rgba(0, 159, 153, .25);
    }
    99% {
        width: 300px;
        height: 300px;
        top: calc(50% - 150px);
        left: calc(50% - 150px);
        background: rgba(0, 159, 153, 0);
    }
    100% {
        width: 0px;
        height: 0px;
        top: calc(50%);
        left: calc(50%);
        background: rgba(0, 159, 153, 0);
    }
}

/*--------------------------------------------------------------
>>> PAGINATION
----------------------------------------------------------------*/

.wp-pagenavi a:hover,
.wp-pagenavi span:hover {
  font-weight: 600;
  border: 1px solid var(--main-20);
}
.wp-pagenavi span.current {
  font-weight: 600;
  border: 1px solid var(--main-20);
}

/*--------------------------------------------------------------
>>> FOOTER
----------------------------------------------------------------*/

.figure-container {
  background: var(--main-10);
}
.figure-container:after {
  border-color: var(--main-10) transparent transparent transparent;
}
#float-buttons ul {
  background: var(--dark-30);
}

/*--------------------------------------------------------------
>>> ARTICLE ELEMENTS
----------------------------------------------------------------*/

article.product h4 {
  color: var(--main-20);
}

/*--------------------------------------------------------------
>>> BLOCK ELEMENTS
----------------------------------------------------------------*/

.tab-btn.actived {
  color: var(--main-20);
  border-bottom: 4px solid var(--main-20);
}