@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-Bold.ttf);
}

.texto-simples { 
    padding:10px 0px; 
    color:#666666; 
    font-size:1em; 
    font-family: Roboto, 'Sans Serif', Arial; 
    line-height:18px; 
    text-align:left;
}

.texto-cabecalho { 
    font-size:1.4em;
    color:#535353;
}
.texto-obs { font-size:0.9em; padding:0px; font-style:italic; max-width:520px; }
.texto-simples a { color:#666666; text-decoration:underline; }
.texto-simples a:hover { color:#000; }

#loja-principal {
    width:100%;
    max-width:800px;
    text-align:left;
    margin-bottom:20px;
}

#bloco-beneficios { 
    background:#e5e5e5; 
    padding:0px 15px; 
    margin:15px 0px; 
    text-align:center;
}
#bloco-beneficios .item-principal {
    width:160px;
    height:230px;
    display:inline-block;
    margin:5px 10px;
    vertical-align:top; 
}

#bloco-beneficios .item-image {
    height:150px;
    text-align:center;
    vertical-align:top;
    padding-top:15px;
}

#bloco-beneficios .item-texto {
    font-size:1.1em; 
    font-family: Roboto, 'Sans Serif', Arial; 
    line-height:16px;
    color:#2e2e2e;
    vertical-align:top;
    text-align:center;
}






#bloco-planos {
    margin:5px 0px;
    text-align:center;
}

#bloco-planos .plano-principal {
    display:inline-block;
    margin:15px 10px;
    width:310px;
    vertical-align:top;
    text-align:left;
}

#bloco-planos .plano-titulo {
    background:#6dc6b1;
    color:#fff;
    font-size:0.9em;
    font-weight:bold;
    text-align:center;
    padding:8px 0px;
    border-radius:5px 5px 0 0;
}

#bloco-planos .plano-preco {
    background:#77d4bd;
    text-align:center;
    vertical-align:top;
    height:45px;
    padding:10px 0px 10px 0;
}

#bloco-planos .plano-moeda {
    display:inline-block;
    vertical-align:top;
    font-size:1.7em;
    color:#fff;
    padding:5px 3px 0 0;
    font-family: Lato, 'Sans Serif', Arial;
}
#bloco-planos .plano-valor {
    display:inline-block;
    vertical-align:top;
    font-size:4.4em;
    color:#fff;
    font-family: Lato, 'Sans Serif', Arial;
}
#bloco-planos .plano-periodo {
    display:inline-block;
    vertical-align:bottom;
    padding:0 0 5px 2px;
    font-size:0.9em;
    color:#fff;
    font-family: Lato, 'Sans Serif', Arial;
}


#bloco-planos .ferramentas-titulo {
    font-size:0.8em;
    font-style:italic;
    background:#77d4bd;
    color:#fff;
    text-align:center;
    padding:10px 0px;
}

#bloco-planos .ferramentas-seta {
    background:#fff;
    height:7px;
}
#bloco-planos .ferramentas-seta:after {
    content: "";
    position: relative;
    bottom: 0;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    top:7px;
    border-left: 6.5px solid transparent;
    border-right: 6.5px solid transparent;
    border-top: 6.5px solid #77d4bd;
}

#bloco-planos .ferramentas-conteudo {
    padding:5px 10px 10px 10px;
    background:#fff;
    font-size:0.9em;
    color:#787878;
    font-family: Lato, 'Sans Serif', Arial;
}


#bloco-planos .plano-rodape {
    background:#6dc6b1;
    color:#fff;
    font-size:0.9em;
    font-weight:bold;
    text-align:center;
    padding:0px 0px 8px 0;
    border-radius:0 0 5px 5px;
}
#bloco-planos .rodape-action a { color:#fff; }
#bloco-planos .rodape-action a:hover { text-decoration:none; }
#bloco-planos .rodape-action:hover .plano-rodape, #bloco-planos .rodape-action:hover .ferramentas-seta-rodape {
    cursor:pointer;
    background:#68baa7;
    -webkit-transition: all 0.5s;
    transition: all 0.5s; 
}

#bloco-planos .rodape-action:hover .premium-rodape, #bloco-planos .rodape-action:hover .premium-ferramentas-seta-rodape {
    cursor:pointer;
    background:#c7425a;
    -webkit-transition: all 0.5s;
    transition: all 0.5s; 
}



#bloco-planos .ferramentas-seta-rodape {
    background:#6dc6b1;
}
#bloco-planos .ferramentas-seta-rodape:after {
    content: "";
    position: relative;
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    top:6px;
    border-left: 5.5px solid transparent;
    border-right: 5.5px solid transparent;
    border-top: 5.5px solid #fff;
}
#bloco-planos .premium-titulo { background:#d43a58; }
#bloco-planos .premium-preco, #bloco-planos .premium-ferramentas-titulo, #bloco-planos .premium-ferramentas-seta-rodape, #bloco-planos .premium-rodape { background:#df4a65; }
#bloco-planos .premium-ferramentas-seta:after { border-top: 6.5px solid #df4a65; }

#ferramentas-img { width:100%; padding:5px 0; }
#ferramentas-img img { vertical-align:middle; }
#ferramentas-img .img-img { width:30px; display:inline-block; text-align:center; }
#ferramentas-img .img-txt { width:100%; max-width:250px; display:inline-block; }


#bloco-conheca { 
    margin:15px 0;
    background:#dedede; 
    padding:20px; 
    text-align:center; 
    font-family: Roboto, 'Sans Serif', Arial;
    font-size:1.4em;
    color:#535353;
    line-height:26px;
}

#bloco-conheca button {
    border-radius:7px;
    background:#3c79c1;
    border:0.5px solid #f0f0f0;
    color:#fff;
    font-family: Roboto, 'Sans Serif', Arial;
    font-size:0.7em;
    padding:11px 36px;
    margin-top:10px;
    cursor:pointer;
}
#bloco-conheca button:hover {
    background:#386fb0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s; 
}


#bloco-lojas { margin:25px 0px; height:10px; }
#bloco-lojas .lojas-title { 
    float:left;
    font-size: 1.4em;
    color: #535353;
    font-family: Roboto, 'Sans Serif', Arial;
}
#bloco-lojas .lojas-mais {
    float:right;
}
#bloco-lojas .lojas-mais a, #bloco-lojas-rodape-mais a {
    font-family: Roboto, 'Sans Serif', Arial;
    color:#666666;
}

#bloco-lojas-rodape-mais { display:none; float:right; }

#bloco-lojas-destaque { margin-top:15px; }
#bloco-lojas-slider { display:inline-block;width:100%;max-width:740px;vertical-align:top; padding-left:3px; }

.slider-arrow-left { float:left; }
.slider-arrow-right { float:right; }
.slider-arrow-left, .slider-arrow-right {
    display:inline-block;
    padding-top:59px;
    cursor:pointer;
}


@media(max-width:799px) {
    .slider-arrow-left, .slider-arrow-right { display:none; }
}
@media(max-width:500px){
    #bloco-beneficios .item-principal { margin:5px 0px; }
    #bloco-lojas .lojas-mais { display:none; }
    #bloco-lojas-rodape-mais { display:inline; margin-right:10px; }
    #bloco-lojas-slider { padding-left:0px; }
}

@media(max-width:400px){
    #bloco-beneficios .item-image img { max-height:75px; }
    #bloco-beneficios .item-image { height:auto; max-height:100px; padding-bottom:10px; }
    #bloco-beneficios .item-principal { height:auto; }
    #bloco-beneficios .item-texto { font-size:0.9em; }
}