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

:root {

    /* MAIN COLOR */
    --main-10: #59fdb0;
    --main-20: #006360;
    --main-30: #01A4A0;
    --main-40: #8FCB03;
    --main-50: #0AFEF7;

    --gradient-10: linear-gradient(0deg, rgba(12,254,245,1) 0%, rgba(172,253,104,1) 100%);
    --gradient-20: linear-gradient(0deg, rgba(5,198,188,1) 0%, rgba(157,239,21,1) 100%);
    --gradient-30: #002120;

    --neutral-10: #F9F9F9;
    --neutral-20: #DCDDDD;
    --neutral-30: #D0D6DA;
    --neutral-40: #737F86;

    --dark-10: #202020;
    --dark-20: #3E3A39;
    --dark-30: #5D6468;
    --dark-40: #676C70;

    --light-10: #50fdb7;
}

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

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

.tabs.overlap a:visited {
    color: #FFF;
}

/*--------------------------------------------------------------
>>> 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: #FF0000;
}
footer .wpcf7-response-output {
  color: #FFF;
}
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(--gradient-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);
}

.bg-gray {
  background: var(--neutral-10);
}

.btn {
  background: var(--main-30);
  color: #FFF;
}
.btn.btn-product {
  background: var(--gradient-10);
  color: var(--dark-30);
}
.btn.btn-product:hover {
  background: var(--gradient-20);
}
.btn:hover {
  background: var(--main-40);
}
.btn:focus {
  background: var(--gradient-30);
  color: var(--main-10);
}
.btn:hover:focus {
  background: var(--gradient-30);
  color: var(--light-10);
}
.btn:hover input[type="submit"] {
  background: var(--neutral-40);
  color: #FFF;
}
.btn:visited {
  color: #FFF;
}
.btn.btn-product:visited {
  color: var(--main-20);
}
.btn-product:hover:visited {
  color: var(--main-20);
}

.btn.btn-dark {
  background: var(--dark-10);
}
.btn.btn-gray {
  background: var(--dark-30);
}

.bg-light {
  background: var(--neutral-30);
}

/*--------------------------------------------------------------
>>> 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 {
    color: var(--main-30);
    border: 1px solid var(--main-30);
}
.wp-pagenavi span.current {
    color: var(--main-30);
    border: 1px solid var(--main-30);
}

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

.figure-container {
  background: var(--gradient-10);
}
#float-buttons ul {
  background: var(--main-20);
}

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

article.product h4 {
  font-weight: 700;
  color: #000;
}

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

.tab-btn.actived {
  color: var(--main-20);
}