@import url('../CSS/reset.css');
@import url('../CSS/header.css');
@import url('../CSS/headerMobile.css');
@import url('../CSS/menu.css');
@import url('../CSS/banners.css?v=82143632');
@import url('../CSS/promocao.css');
@import url('../CSS/carrossel.css');
@import url('../CSS/rodape.css');
@import url('../CSS/produto.css');
@import url('../CSS/coracao.css');
@import url('../CSS/estrelas.css');
@import url('../CSS/carrinho.css');
@import url('../CSS/lista.css');
@import url('../CSS/complemento.css');
@import url('../CSS/naoEncontrado.css');

:root{
    /* FONTS SIZES */
    --fs-10px: 0.625rem;
    --fs-12px: 0.75rem;
    --fs-14px: 0.875rem;
    --fs-15px: 0.9375rem;
    --fs-16px: 1rem;
    --fs-17px: 1.06rem;
    --fs-18px: 1.125rem;
    --fs-19px: 1.19rem;
    --fs-20px: 1.25rem;
    --fs-22px: 1.38rem;
    --fs-24px: 1.5rem;
    --fs-25px: 1.5625rem;
    --fs-28px: 1.75rem;
    --fs-30px: 1.88rem;
    --fs-32px: 2rem;
    --fs-36px: 2.25rem;
    --fs-38px: 2.375rem;
    --fs-40px: 2.5rem;
    --fs-48px: 3rem;
    
    /* CORES */
    --cor-de-fundo: #EEEEEE;
    --amarelo-principal: #E9B934;
    --preto-principal: #000000;
    --branco-principal: #FFFFFF;
    --cinza-refencia-carrossel: #666666;
    --cinza-preco-carrossel: #444444;
    --cinza-botao-carrossel: #999999;
    --cinza-status-produto: #777777;
}

@font-face {
    font-family: 'Swis721 Cn BT';
    src: url('../FONTS/swis/swis721-cn-bt.woff') format('woff'),
         url('../FONTS/swis/swis721-cn-bt.woff2') format('woff'),
         url('../FONTS/swis/swis721-cn-bt.eot') format('woff');
    font-weight: normal;
    font-style: normal;
}

html{
    font-family: 'Swis721 Cn BT', Arial, Helvetica, sans-serif;
}

.manchaPreta{
    background: url('../IMG/manchaPreta2.fw.png') no-repeat;
    background-size: cover;
    height: 5vh;
    max-width: 100%;
}

.manchaAmarela{
    background: url('../IMG/manchaAmarela2.fw.png') no-repeat;
    background-size: cover;
    height: 5vh;
}

.manchaAmarelaInvertido{
    background: url('../IMG/manchaAmarelaInvertida.fw.png') no-repeat;
    background-size: cover;
    transform: translateY(-90%);
    height: 5vh;
}

.manchaAmareloHeader{
    background: url('../IMG/manchaAmarela2.fw.png') no-repeat;
    background-size: cover;
    z-index: 20;
    transform: translateY(79%);
    max-width: 100%;
    height: 5vh;
}

.manchaAmarelaMenu{
    position: absolute;
}

.correntes{
    background: url('../IMG/corrente2.png') no-repeat;
    background-size: cover;
    transform: translateY(-79%);
    height: 3vh;
}

.layout{
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    box-sizing: border-box;
}

.layout2{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.conteudo{
    background-color: var(--cor-de-fundo);
    padding-bottom: 5em;
}

@media (min-width: 1350px) {
    .manchaPreta,.manchaAmarelo,.manchaAmareloInvertido,.manchaAmareloHeader{
        width: 200vw;
        max-height: 30px;
    }

    
}

@media (max-width: 1350px) {
    .manchaAmareloHeader{
        transform: translateY(48%);
    }
    
}

@media (min-width: 2400px) {
    #correnteMenor{
        display: none;
    }
    #correnteMaior{
        display: block;
    }
}

@media (min-width: 5000px) {
    #correnteMuitoMaior{
        display: block;
    }

    #correnteMaior{
        display: none;
    }
}

/***** WHATSAPP BUTTON ******/
#robbu-whatsapp-button {
    position: fixed;
    display: flex;
    z-index: 50;
    background: #25d366;
    bottom: 25px;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    box-shadow: 2px 2px 12px rgba(22, 124, 60, .2);
    transition: .4s;
    align-items: center;
    justify-content: center;
    right: 25px;
}
#robbu-whatsapp-button>img {
    display: block;
    width: 34px;
    height: 34px
}
#robbu-whatsapp-button:hover {
    background: #21bd5c;
    box-shadow: 3px 3px 12px rgba(14, 81, 39, .4)
}