@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@200;300&display=swap");

body {
    background-color: #FFF;
    color: #292929;
    font: 100% "Roboto", sans-serif;
    font-display: fallback;
}

.breadcrumb {
    margin-top: 10px;
    margin-bottom: 50px;
    padding: 10px 5px;
    background-color: #FFF;
    border-radius: 0;
    font-size: 0.85rem
}

.breadcrumb-item a {color:#698C00}
.breadcrumb-item.active {color:#000A1C}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline;
    padding-right: 2px
}

a, a:hover {color: #698C00}

a.footer, a.footer:hover {
    text-decoration: none;
    color: #FFF
}

h1, h2, h3 {
    margin-bottom: 20px;
    font-weight: 600
}

h1 {font-size: 1.6rem}
h2 {font-size: 1.2rem}
h3 {font-size: 1rem}

h3.pet-nutrition {
    margin-bottom: 5px;
    color: #698C00
}

h3.volume-aquario {margin: 0}

h4 {
    font-weight: 600;
    font-size: 1rem;
}

h4.green {color: #698C00}

p {
    line-height: 28px;
    hyphens: auto;
    text-align: justify
}

p.volume-aquario {
    line-height: 21px;
    font-size: 0.9rem;
    color: #698C00
}

hr {border-color: #EEEEEE}

.btn-secondary {
    background-color: #8D8D8D;
    color: #F5F4F4;
    border: none
}

a:hover.btn-secondary {background-color: #7D7D7D}

.card-title.blog {
    height: 35px;
    color: #698C00
}

/* Header */
#page-top {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #000A1C
}

.page-top-spacing {padding-top: 6px}

.btn-search {
    display: inline-block;
    padding: 7px;
    background-color: #000A1C;
    color: #FFF;
    border: none;
    text-align: center;
    text-decoration: none
}

.btn-search:hover {background-color: #000A1C}

.form-inline .form-search {
    width: 165px;
    padding: 8px;
    background-color: #000A1C;
    color: #FFF;
    border: #000A1C;
    border-radius: 0
}

.form-search::placeholder {color:#FFF}

input[type="search"]:focus {
    border-color: #000A1C;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 10, 28, 0.6)
}

#p-phone {
    margin-bottom: 0px;
    color: #FFF;
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center
}

/* pag. 404 */
.ops {margin: 10% auto}

/* Home */
.h2-home {margin-top: 60px}

#p-home {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: justify
}

.card {
    margin-bottom: 50px;
    border: 1px solid #FFF
}

.card-text {font-size: 1rem}

/* Acao Social */
.nav-pills .nav-link {
    border-radius: 0px;
    border-bottom: 1px solid #EEE;
    color: #000A1C
  }

.nav-pills .nav-link.active {
    background-color: #F7F7F7;
    color: #000A1C
}

.img-tab {margin: 20px 0}

/* Produtos & Pets */

/*modal*/
.cursor {cursor: zoom-in}
.modal-lg {max-width: 800px}
.modal-backdrop.show{opacity:.9}

.produto-mouseover {width: 250px}
.produto-mouseover span {display: none}

.produto-mouseover:hover .img-produto-mouseover {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 0.5s linear
}

.produto-mouseover:hover span {
    display: block;
    position: absolute;
    top: 0px;
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s
}

.img-produto-mouseover {
    transition: all .9s linear;
    -o-transition: all .9s linear;
    -moz-transition: all .9s linear;
    -webkit-transition: all .9s linear
}

a.produtos, a .produtos:hover {
    font-size: 0.95rem;
    color: #777
}

a.produtos-pet, a .produtos-pet:hover {
    font-size: 0.75rem;
    color: #777
}

.destaque-p {
    margin-top: -23px;
    font-size: 0.90rem;
    color: #698C00
}

.destaque-span {
    margin-top: -20px;
    font-weight: 500;
    font-size: 0.80rem;
    color: #698C00
}

.destaque-lancamento {
    font-size: 0.75rem;
    color: #698C00
}

.destaque-blog {
    font-weight: 500;
    font-size: 1.3rem;
    color: #698C00
}

@keyframes fadeInOpacity {
	0% {opacity: 0}
	100% {opacity: 1}
}

.tab-produto {font-size: 0.95rem}
ul.produtos, ul.blog {padding: 0}

.list-group-item.produtos, .list-group-item.blog {
    padding-bottom: 10px;
    margin-top: 10px;
    background-color: #FFF;
    border-bottom: 1px solid #EEE;
    border-radius: 0;
    font-size: 1rem
}

.list-group-item.produtos a, .list-group-item.blog a  {color:#000A1C}
.list-group-item.produtos a:hover, .list-group-item.blog a:hover {color:#698C00}

.list-group-item.produtos.menu-hover a, .list-group-item.blog.menu-hover a {
    font-weight: bold;
    color:#698C00
}

.table tr {font-size: 0.9rem}
.mb-6 {margin-bottom: 60px}

.img-center {
    display: block;
    margin: 0 auto;
}

.modal-dialog-center {margin-top: 20%}
span.span-artigo {font-size: 0.95rem}
.material-symbols-outlined.small {font-size: 1.3rem}

.material-symbols-outlined {
    margin-top: -3px;
    vertical-align: middle;
    font-size: 1.8rem
}

/* Form's */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {-moz-appearance:textfield}

.form-control {
    padding-left: 6px;
    font-size: 0.85rem}

.form-control:focus{
    border-color: #000A1C;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035), 0 0 8px rgba(178, 178, 178, 0.6)
}

.alert {margin-bottom: 40px}

.alert-heading {
    margin-top: 20px;
    font-size: 1rem;
    font-weight: 600
}

.alert-text {
    font-size: 0.95rem;
    line-height: 25px
}

.alert.resultado-volume {margin-bottom: 10px}

label {
    font-size: 0.85rem;
    font-weight: 500
}

.form-check-label {
    margin-top: 2px;
    font-weight: 500;
    line-height: 20px;

}

.btn-info, .btn-success {margin: 25px 0}

.maps {
    width: 1080px;
    height: 600px;
}

label.error {
    margin-top: 5px;
    font-size: 0.75rem;
    color:#FF5151
}

input.error, select.error, textarea.error, checkbox.error {border:1px solid #FF5151}
.checkbox {margin-right: 3px}

#retorno-busca-distribuidor {
    padding: 30px;
    background-color:#EAEAEA
}

.msg-success {
    display: none;
    padding: 10px;
    background-color:#28A745;
    text-align: center;
    color:#FFF
}

.msg-error, .msg-error-distribuidor, .msg-error-loja {
    display: none;
    padding: 10px;
    background-color:#FF5151;
    text-align: center;
    color:#FFF
}

.msg-warning {
    display: none;
    padding: 10px;
    background-color:#ffc107;
    text-align: center;
    color:#212529
}

.msg-wait {
    display: none;
    padding: 10px;
    background-color:#444444;
    text-align: center;
    color:#FFF
}

.lojas, .lojas-mobile { margin-top: 50px }

/* Footer */
h1.politics, h2.politics {margin: 50px 0 10px 0}

h3.politics {
    margin: 20px 0 10px 0;
    font-size: 1.1rem
}

.indent {margin-left: 30px}
.politics p {line-height: 25px}
.politics p.p-indent {margin-left: 60px}
.politics p.s-indent {margin-left: 90px}

.box-cookies.hide {display: none !important;}

.box-cookies {
    width: 75%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #FFC926;
	border-radius: 10px;

}

.box-cookies p {
    margin-bottom: 0;
    text-align: center;
    font-size: 0.90rem;
}

.box-cookies p a {
    color:#000A1C;
    text-decoration: underline
}

#guias {
    margin-top: 150px;
    margin-bottom: -250px
}

.img-tranform-guia {
    transition: all 0.3s;
    cursor: pointer
}

.img-tranform-guia:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

#footer-top {
    height: 600px;
    margin-top: -90px;
	padding-top: 310px;
	background: url(../img/footer-bg.webp) center center;
	background-size: cover;
    color: #FFF;
    font-size: 0.9rem
}

#footer-bottom {
    height: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #BED600
}

#p-footer {
    padding-top: 5px;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: normal;
}

.icon {
    vertical-align: middle;
    color: #BED600;
}

.footer-communication {
    margin-top: 5px;
    margin-bottom: 15px
}

.footer-span-spacing {margin-left: 26px}
.footer-col-spacing {margin-left: 70px}
.footer-img-spacing {padding-top: 30px}

.list-group-item {
    padding: 5px 0;
    background-color: #000A1C;
    border: none
}

.list-group-item.footer {margin-bottom: 10px}
.list-group-item.footer.mob {margin-bottom: 5px}

.list-group-item a {color: #FFF}

.list-group-item a:hover {
    color:#BED600;
    text-decoration: none
}

@media (max-width: 991px) {

    /* pag. 404 */
    .ops {margin: 25% auto}

    h1, h2, h3 {margin: 20px 0}

    h1 {font-size: 1.1rem}
    h2 {font-size: 1rem}
    h3 {font-size: 0.9rem}

    p {font-size: 0.85rem}

    .d-x-block {display:block!important}
    .table tr {font-size: 0.8rem}

    /* Home */
    #p-home {margin: 25px auto}

    .h2-home {margin-bottom: 30px}

    .destaque-lancamento {
        margin-left: 0;
        font-size: 0.8rem;
        color: #698C00
    }

    .destaque-blog {font-size: 1rem}

    .card-body {padding: 10px 5px}

    .card {
        width: 330px;
        margin: 0 auto 30px auto
    }

    .card-img-top {margin-bottom: 10px}

    .card-text {
        padding: 10px;
        font-size: 0.91rem
    }

    .card-mob {margin-bottom: 70px}

    .card-blog {padding: 0}

    /* Accordion */
    .accordion {
        margin-bottom: 50px;
        cursor: pointer
    }

    .card-accordion {width: 100%}
    .card-body-accordion {padding: 0 15px 60px 15px}
    a.accordion {font-size: 0.9rem}

    div .box-accordion  {
        border-bottom: 1px solid #EFEFEF
    }

    .btn-link {
        width: 100%;
        text-align: left;
        font-weight: 500;
        text-decoration: none;
        color: #000A1C
    }

   .btn-link:hover, .btn-link:focus {
        background-color:#F7F7F7;
        border-radius: 0;
        text-decoration: none;
        color:#698C00
    }

    .coracoes {margin-left: 90px}

    /* Produtos & Pets */
    .tab-produto {font-size: 0.78rem}
    .produto-mouseover {margin: 0 auto}
    .list-group-item.produtos {font-size: 0.9rem}

    /* Footer */
    .footer-h {
        margin: 0;
        color: #BED600
    }

    .material-symbols-outlined {font-size: 1rem}
    .footer {font-size: 0.8rem}
    #footer-top {padding-top: 200px}
    #footer-link {color: #FFF}
    .footer-span-spacing {margin-left: 20px}

    .list-group-item.footer {
        margin-bottom: 20px;
        font-size: 0.85rem;
    }

    #p-footer {padding: 0}
    .footer-communication {font-size: 0.80rem}

}

@media (max-width: 770px) { .produto-mouseover {margin: 0 auto} }
@media (max-width: 450px) { .produto-mouseover {margin: 0 auto} }