@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {margin: 0;padding: 0; list-style: none; font-family: 'Roboto', sans-serif; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; }
body { font-size:62.5%; font-weight:300; font-size:16px;  }
a { font-size: 16px;font-weight:400;text-decoration:none; cursor: pointer;}
strong { font-weight: 700;}
.medida {width:1000px;height:800px;background-color:#FFF;margin:0 auto;}
.clear{clear:both;}
.clearfix:before, .clearfix:after {content: " "; display: table; }
.clearfix:after {clear: both;}

banner_uni{ width: 100%; display: block;}
banner_uni .img1{ width: 100%; display: block;}
banner_uni .img2{ width: 100%; display: none;}
@media screen and (max-width: 1000px){
banner_uni .img1{ display: none; }
banner_uni .img2{ display: block; }
}
/* --------------------------------HEADER---------------------------*/
.imgBF1,
.imgBF2{ width: 100%; }
.imgBF2{ display: none; }
@media screen and (max-width: 1000px){
.imgBF1{ display: none; }
.imgBF2{ display: block; }
}

.boxcook{ position: fixed; z-index: 9999; display: inline-block; width: 1110px; max-width: 100%; height: 95px; bottom: 10%; left: 50%; margin: 0 0 0 -555px ; background: rgba(255, 255, 255, 0.9);border: 1px solid rgba(140, 140, 140, 0.3);box-sizing: border-box;box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);border-radius: 10px; }
.boxcook p{vertical-align: middle; display: inline-block; padding: 10px; font-size: 15px;}
.boxcook p strong{ color: #4EBBB2;  font-size: 20px; }
.boxcook a{ color: #3A72C1; text-decoration: underline; font-weight: bold; }
.boxcook a.btp{ padding: 5px 20px; vertical-align: middle; float: right; color: #3A72C1; border: 1px solid #3A72C1; border-radius: 25px; text-decoration: none; margin: 20px 10px; font-size: 18px;}
@media screen and (max-width: 1100px){
    .boxcook{ max-width: 90%; height: auto; bottom: 10%; left: 5%; margin:0;  }
 
@media screen and (max-width: 600px){
    .boxcook a.btp{  float: none; display: block; margin: 0; text-align: center; }
}}
header{width:100%; display: inline-block; text-align: center;}
header .meio{max-width:1000px; padding: 0px 10px; width: 100%; display: inline-block; margin:0 auto; text-align: left;}
header .meio .logo{ padding: 10px; display: inline-block; vertical-align: middle; width: 32%;}
header .meio .conteudo{ padding: 10px; display: inline-block; vertical-align: middle; width: 68%;}
header .meio .conteudo .acima,
header .meio .conteudo .abaixo{ padding: 10px; display: inline-block; vertical-align: middle; width: 100%; text-align: right;}
header .meio .conteudo .abaixo .box{ padding: 0 5px; display: inline-block; vertical-align: middle;}
header .meio .conteudo .abaixo .box .icone{ padding: 0; display: inline-block; vertical-align: middle; width: 50px;}
header .meio .conteudo .abaixo .box .texto{ padding: 0; display: inline-block; vertical-align: middle; font-size: 14px; text-align: left;}

header .meio img{display: inline-block; vertical-align: middle; max-width: 100%;}
header .meio a{ color: #000; font-size: 14px; vertical-align: middle; }
header .meio .bt span{ padding: 5px; color: #000; display: inline-block; font-size: 20px; vertical-align: middle; }
header .meio .bt span:hover{ color: #CCC; }
header .meio .whats span{ padding: 5px; border-radius: 5px; background: #f4f4f4; color: #a3282b; border: 1px solid #ccc; display: inline-block; margin: 5px 0; }
header .meio .whats span:hover{ background: #494949; color: #FFF; }
header .meio form{display: inline-block; vertical-align: middle; text-align: center; border: 1px solid #CCC; border-radius: 5px; width: 300px; background: #f4f4f4;}
header .meio form input{display: inline-block; width: 90%; padding: 5px; vertical-align: middle; border: 0; border-radius: 5px; background: #f4f4f4; }
header .meio form button{display: inline-block; width: 10%; padding: 5px; vertical-align: middle; color: #333; background: #f4f4f4; border:0; border-radius: 5px; cursor: pointer;}

@media screen and (max-width: 750px){
    header .meio form input{ width: 80%; }
    header .meio form button{ width: 20%; }
    }

@media screen and (max-width: 992px) {
    header .meio .logo,
    header .meio .conteudo {
        width: 100%;
        text-align: center;
    }
    header .meio .conteudo .acima,
    header .meio .conteudo .abaixo {
        text-align: center;
    }
    header .meio form {
        width: 100%;
        max-width: 400px;
        margin-bottom: 10px;
    }
}
    
        .navbar {
            background-color: #a3282b; /* Cinzento escuro */
            display: flex;
            justify-content: center; /* Centraliza o conteúdo (o nav-list) */
            align-items: center;
            height: 90px;
            position: relative; /* ESSENCIAL para o posicionamento do menu desktop */
        }

        .nav-list {
            display: flex; /* Garante que os itens fiquem na horizontal no desktop */
            height: 100%;
            align-items: center;
        }

        .nav-item {
            list-style: none;
            width: 140px;
            padding: 5px; /* Ajustado para caber na nova largura */
            height: 100%;
            display: flex;
            flex-direction: column; /* Ícone em cima, texto em baixo */
            justify-content: center;
            align-items: center;
            color: white;
            cursor: pointer;
            font-size: 14px;
            text-align: center;
            transition: background 0.3s;
        }

        .nav-item i {
            font-size: 24px;
            margin-bottom: 8px;
            color: #ccc;
        }

        /* Efeito ao passar o rato no item principal */
        .nav-item:hover {
            background-color: #343330;
        }

        /* Simulação do item ativo (Azul na imagem) */
        .nav-item.active {
            /* background-color: #0078d7; */ /* Cor removida para unificar o estilo */
        }
        .nav-item.active i {
            color: white;
        }

        /* 3. O MEGA MENU (A caixa branca grande) */
        .mega-menu {
            display: none; /* Escondido por padrão */
            position: absolute;
            top: 100%; /* Cola logo abaixo da barra */
            left: 50%;
            transform: translateX(-50%);
            width: 100%; /* Ocupa a largura disponível */
            max-width: 1000px; /* Limita a largura máxima */
            background-color: white;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            z-index: 1000;
            padding: 40px;
            text-align: left; /* Reseta o alinhamento herdado */
        }

        /* Mostrar o menu quando passar o rato no item 'Li' */
        .nav-item:hover .mega-menu {
            display: flex;
        }

        /* Container interno para limitar a largura (opcional, para estética) */
        .mega-content {
            width: 100%;
            display: flex;
        }

        /* 4. LADO ESQUERDO - LISTA DE CATEGORIAS */
        .categories-section {
            /* Não precisa mais de flex, padding ou borda */
            width: 100%;
        }

        .cat-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 Colunas iguais */
            gap: 15px;
        }

        .cat-list li {
            list-style: none;
        }

        .cat-list a {
            text-decoration: none;
            color: #000;
            font-size: 14px;
        }

        .cat-list a:hover {
            color: #343330;
            text-decoration: underline;
        }

        /* Estiliza APENAS o link que é filho direto do nav-item */
        .nav-item > a {
            text-decoration: none; /* Remove o sublinhado */
            color: inherit; /* Herda a cor do pai (li), que é branca */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        /* 5. ESTILOS PARA O MENU MOBILE */
        .mobile-menu-toggle {
            display: none; /* Escondido no desktop */
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0 20px;
        }

        /* 6. MEDIA QUERIES PARA RESPONSIVIDADE (MOBILE) */
        @media (max-width: 992px) {
            .navbar {
                height: 40px;
                justify-content: space-between; /* Garante espaço entre logo/título e o botão */
            }

            .mobile-menu-toggle {
                display: block; /* Mostra o botão hambúrguer */
                order: 2; /* Coloca o botão no final */
            }

            .nav-list {
                display: none; /* Esconde a lista de navegação por padrão */
                position: absolute;
                top: 40px; /* Abaixo da navbar */
                left: 0;
                width: 100%;
                background-color: #a3282b;
                flex-direction: column;
                align-items: flex-start; /* Alinha itens à esquerda */
                height: auto;
                padding-bottom: 10px;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                z-index: 1000;
;
            }

            /* Classe que o JS vai adicionar para mostrar o menu */
            .nav-list.is-open {
                display: flex;
            }

            .nav-item {
                width: 100%;
                height: auto;
                padding: 15px 20px;
                flex-direction: row; /* Ícone e texto lado a lado */
                justify-content: flex-start;
                text-align: left;
                flex-wrap: wrap; /* Permite que o mega-menu quebre a linha */
                border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Borda separadora */
            }

            /* Faz o link dentro do nav-item se comportar como um container flex */
            .nav-item > a {
                display: flex;
                flex-direction: row; /* Garante o alinhamento horizontal */
                align-items: center;
                text-decoration: none;
                color: inherit;
            }

            .nav-item i {
                margin-bottom: 0;
                margin-right: 15px; /* Espaço entre ícone e texto */
            }

            /* Esconde o mega menu por padrão no mobile */
            .nav-item .mega-menu {
                display: none;
                position: static; /* Remove posicionamento absoluto */
                transform: none;
                width: 100%;
                max-width: none;
                box-shadow: none;
                padding: 15px 0 0 40px; /* Adiciona um recuo */
                background-color: transparent; /* Fundo transparente para se mesclar */
            }

            /* Mostra o mega menu quando o item pai tem a classe 'is-open' */
            .nav-item.is-open .mega-menu {
                display: block;
            }

            .mega-content {
                flex-direction: column;
            }

            .cat-list {
                grid-template-columns: 1fr; /* Uma coluna no mobile */
                gap: 0; /* Remove o espaçamento do grid para a borda funcionar */
            }

            .cat-list li {
                padding: 12px 0; /* Adiciona espaçamento interno */
                border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borda mais sutil */
            }

            /* Remove a borda do último item da subcategoria */
            .cat-list li:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            /* Altera a cor dos links da subcategoria para branco no mobile */
            .cat-list a {
                color: white;
            }
        }



.carousel{width:100%; float:left; text-align:center;}
.carousel .box{width:25%; display:inline-block; vertical-align: middle; text-align:center;}
.carousel .box .img{max-width:80%; display: inline-block; vertical-align: middle; max-width: 90%;}
@media screen and (max-width: 700px){
.carousel .box{width:50%; float:left; text-align:center; padding-bottom:20px;}
}
@media screen and (max-width: 450px){
.carousel .box{width:100%; float:left; text-align:center; padding-bottom:20px;}
}
.carousel2{width:100%; float:left; text-align:center; padding: 15px 0;}
.carousel2 .box{width:25%; display:inline-block; vertical-align: middle; text-align:center;}
.carousel2 .box .img{display: inline-block; vertical-align: middle; max-width: 90%;}
@media screen and (max-width: 700px){
.carousel2 .box{width:50%; float:left; text-align:center; padding-bottom:20px;}
}
@media screen and (max-width: 450px){
.carousel2 .box{width:100%; float:left; text-align:center; padding-bottom:20px;}
}
/* --------------------------- RODAPE ------------------------------*/
footer{width:100%; display: inline-block; text-align: center; background: #FFF;}
footer .meio{max-width:1200px; width: 100%; display: inline-block; margin:0 auto; padding: 30px 10px;}
footer .meio ul{ max-width: 100%; display: inline-block; padding: 10px 0; text-align: left;}
footer .meio ul li{ display: inline-block; }
footer .meio ul li strong{ color: #494949; }
footer .meio ul li a{ padding:3px; color: #494949; display: block; }
footer .meio ul li a:hover{ text-decoration: underline; }
footer .meio a span{ font-size: 20px; color: #a3282b;  cursor: pointer;}
footer .meio a span:hover{ color: #494949;}
footer .meio .box1{ display: inline-block; padding: 10px; text-align: left; width: 30%; vertical-align: top; }
footer .meio .box2{ display: inline-block; padding: 10px; text-align: center; width: 30%; vertical-align: top; }
footer .meio .box3{ display: inline-block; padding: 10px; text-align: left; width: 40%; vertical-align: top; }

footer .meio .box1 a{color: #000;}
footer .meio .box1 img{display: block;}

footer .meio .box2 a{color: #000;}
footer .meio .box2 .box{ padding: 5px; display: inline-block; vertical-align: middle; width: 190px; text-align: left; }
footer .meio .box2 .box .icone{ padding: 0; display: inline-block; vertical-align: middle; width: 35%;}
footer .meio .box2 .box .texto{ padding: 0 10px; display: inline-block; vertical-align: middle; width: 65%; font-size: 14px;}

footer .meio .box3 b{ font-weight: bold; color: #a3282b; }



rodape2{width:100%; display: inline-block; text-align: center; border-top: 2px solid #CCC;}
rodape2 meio{max-width:1200px; width: 100%; display: inline-block; margin:0 auto; padding: 10px;}
rodape2 meio b1,
rodape2 meio b2,
rodape2 meio b3{display: inline-block; width: 33.33%; vertical-align: middle;}
rodape2 meio b1{text-align: left;}
rodape2 meio b2{text-align: center;}
rodape2 meio b3{text-align: right;}
rodape2 meio b1 img{ display:inline-block; vertical-align: middle; }
rodape2 meio b3 img{ display:inline-block; vertical-align: middle; }
@media screen and (max-width: 750px){
footer .meio b1,
footer .meio b2,
footer .meio .box1,
footer .meio .box2,
footer .meio .box3 {
    display: inline-block; 
    text-align: center; 
    width: 100%; 
    vertical-align: middle;
}
footer .meio ul{ text-align: center;}
rodape2 meio b1,
rodape2 meio b2,
rodape2 meio b3{display: inline-block; text-align: center; width: 100%; vertical-align: middle;}

}

/* --------------------------- DESTAQUES HOME ------------------------------*/
destaques{width:100%; display: inline-block; text-align: center; background: #f4f4f4;}
destaques meio{max-width:1200px; width: 100%; display: inline-block; margin:0 auto; padding: 30px 10px;}
destaques meio box{width: 488px; height: 217px; display: inline-block; margin:3%;}
destaques meio box p{background: hsla(0,0%,0%,0.85); color: #FFF; bottom: 0; position: relative; font-size: 16px; padding: 10px;}

/* --------------------------- LISTAR PRODUTOS ------------------------------*/
produtos{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
produtos meio{ max-width: 100%; width: 100%; margin: 0 auto; display: inline-block; text-align: left;}
produtos meio h1{ width: 100%; text-align: center; color: #a3282b; margin: 20px	 auto; display: inline-block;}
produtos meio h2{ width: 100%; font-size: 20px; text-align: center; color: #000; margin: 0px auto; display: inline-block;}
produtos meio box{ width: 18%; padding: 10px; text-align: left;  margin: 1%; display: inline-block; border: 1px solid #CCC; vertical-align: top; border-radius: 5px;}
produtos meio box ul{width: 100%; }
produtos meio box ul li{width: 100%; }
produtos meio box ul li.titulo{ padding: 10px; background: #f4f4f4; color: #000; }
produtos meio box ul li a{ display: block; padding: 5px; color: #000;}
produtos meio box boximg{ width: 100%; height: 170px; margin: 0 auto; display: inline-block; text-align: center;}
produtos meio box boximg img{ max-width: 100%; max-height: 100%; margin: 0 auto; display: inline-block;}
produtos meio box h2{ text-align: center; font-weight: 700; font-size: 14px; color: #494949; padding: 5px; min-height: 60px; }
produtos meio box modelos{ width: 100%; margin: 0 auto; display: inline-block;text-align: center;}
produtos meio box valor{ width: 100%; margin: 0 auto;font-weight: bold; font-size: 36px; color: #a3282b; display: inline-block; }
produtos meio box parcelas{ width: 100%; margin: 0 auto; display: inline-block;}
produtos meio box input{  width: 30%;border-radius: 5px; padding: 10px; border: 1px solid #CCC; display: inline-block; margin: 10px auto;}
produtos meio box button{ width: 67%;border-radius: 5px; padding: 10px; background: #a3282b; color: #fff; font-weight: bold; border: 1px solid #a3282b; margin: 10px auto; display: inline-block; cursor: pointer;}

produtos meio box2{ width: 18%; padding: 10px; text-align: left;  margin: 1%; display: inline-block; border: 1px solid #CCC; vertical-align: top; border-radius: 5px; float: left; }
produtos meio box2 ul{width: 100%; }
produtos meio box2 ul li{width: 100%; }
produtos meio box2 ul li.titulo{ padding: 10px; background: #f4f4f4; color: #000; }
produtos meio box2 ul li a{ display: block; padding: 5px; color: #000;}

produtos meio carrinhonav{ max-width: 23%; text-align: left; width: 100%;  margin: 1%; float: right; border: 1px solid #f4f4f4;}
produtos meio carrinhonav h3{ text-align: center; font-weight: bold; font-size: 16px; color: #FFF; background: #a3282b; padding: 10px; }
produtos meio carrinhonav modelos{ width: 100%; margin: 0 auto; display: inline-block; background: #f4f4f4; padding: 10px 0 0 0;}
produtos meio carrinhonav ul{ width: 100%; margin: 0 auto; display: inline-block;}
produtos meio carrinhonav ul li{ width: 33.33%; margin: 0 auto; display: inline-block; font-size: 12px; text-align: center; padding: 3px;}
produtos meio carrinhonav total{ border-top: 1px solid #CCC; margin-top: 10px; padding: 5px 0;display: inline-block; width: 100%; font-size: 12px; font-weight: bold; color: #a3282b;}
produtos meio carrinhonav total b1{display: inline-block; width: 50%; padding: 0px 15px; text-align: left;}
produtos meio carrinhonav total b2{display: inline-block; width: 50%; padding: 0px 15px; text-align: right;}
produtos meio carrinhonav a{ width: 100%; margin: 0 auto; display: inline-block; font-size: 16px; text-align: center; padding: 3px; color: #FFF; background: #a3282b;}

@media screen and (max-width: 1400px){
	produtos meio box{ width: 23%; }
	produtos meio carrinhonav{display: none;}
}
@media screen and (max-width: 1000px){
	produtos meio box{ width: 48%; }
	produtos meio box2{ display: none;}
	produtos meio carrinhonav{display: none;}
}
@media screen and (max-width: 700px){
	produtos meio box{ width: 98%; }
}

/* --------------------------- LISTAR PRODUTOS ------------------------------*/
relacionados{width: 100%; text-align: left; padding: 15px 10px; display: inline-block;}
relacionados h2{ width: 100%; font-size: 20px; text-align: left; color: #000; margin: 0px auto; display: inline-block;}
relacionados box{ width: 25%; margin: 5px; padding: 10px; text-align: left;  display: inline-block; border: 1px solid #CCC; vertical-align: top; border-radius: 5px;}
relacionados box ul{width: 100%; }
relacionados box ul li{width: 100%; }
relacionados box ul li.titulo{ padding: 10px; background: #f4f4f4; color: #000; }
relacionados box ul li a{ display: block; padding: 5px; color: #000;}
relacionados box boximg{ width: 100%; height: 170px; margin: 0 auto; display: inline-block; text-align: center;}
relacionados box boximg img{ max-width: 100%; max-height: 100%; margin: 0 auto; display: inline-block;}
relacionados box h2{ text-align: center; font-weight: 700; font-size: 14px; color: #494949; padding: 5px; min-height: 60px; }
relacionados box modelos{ width: 100%; margin: 0 auto; display: inline-block;text-align: center;}
relacionados box valor{ width: 100%; margin: 0 auto;font-weight: bold; font-size: 36px; color: #a3282b; display: inline-block; }
relacionados box parcelas{ width: 100%; margin: 0 auto; display: inline-block;}
relacionados box input{  width: 30%;border-radius: 5px; padding: 10px; border: 1px solid #CCC; display: inline-block; margin: 10px auto;}
relacionados box button{ width: 67%;border-radius: 5px; padding: 10px; background: #a3282b; color: #fff; font-weight: bold; border: 1px solid #a3282b; margin: 10px auto; display: inline-block; cursor: pointer;}


/* --------------------------- EXIBIR PRODUTOS ------------------------------*/
produto{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
produto meio{ max-width: 1000px; width: 100%; margin: 0 auto; display: inline-block; text-align: left;}
produto boximg{ width: 40%; display: inline-block; padding: 10px; text-align: left; vertical-align: top;}
produto boximg span{ font-size: 24px; cursor: pointer; color: #a3282b;}
produto boximg a{ font-size: 24px; color: #a3282b; cursor: pointer;}
produto boximg .acb{ max-width: 100%; display: block; margin: 5px auto;}
produto boximg a.bt{ font-size: 24px; background: #a3282b;  border-radius: 5px; color: #FFF; margin: 10px auto; display: inline-block; font-size: 16px; padding: 5px; cursor: pointer;}
produto descricao{ width: 100%; display: inline-block; padding: 10px; vertical-align: top; border-top: 2px solid #a3282b;}
produto boxinfo{ width: 60%; display: inline-block; padding: 10px; vertical-align: top;}
produto boxinfo .codprod{ display: block; font-size: 14px; }
produto boxinfo h1{ width: 100%; padding:0; margin:0; color: #999; font-weight: 700; font-size: 22px; box-sizing: border-box;}
produto boxinfo p{ width: 100%; padding:10px 0; margin:0; color: #000; font-size: 14px; box-sizing: border-box;}
produto boxinfo de{ font-size: 20px; text-decoration: line-through; color: #a3282b;}
produto boxinfo modelos{ width: 100%; margin: 0 auto; display: inline-block;text-align: left;}
produto boxinfo modelos a{ padding: 5px; color: #FFF; background: #a3282b; display: inline-block; margin: 5px; border-radius: 5px; }
produto boxinfo modelos a:hover{ padding: 5px; color: #FFF; background: #494949; display: inline-block; margin: 5px; }
produto boxinfo modelos a.selecionado{ padding: 5px; color: #FFF; background: #a3282b; display: inline-block; margin: 5px; }
produto boxinfo valor{ width: 100%; margin: 0 auto;font-weight: bold; font-size: 36px; color: #a3282b; display: inline-block; }
produto boxinfo parcelas{ width: 100%; margin: 0 auto; display: inline-block;}
produto boxinfo input{  width: 50px;border-radius: 5px; padding: 10px; border: 1px solid #CCC; display: inline-block; margin: 10px auto;}
produto boxinfo button{ border-radius: 5px; padding: 10px; background: #a3282b; color: #fff; font-weight: bold; border: 1px solid #a3282b; margin: 10px auto; display: inline-block; cursor: pointer;}

produto a.voltar{ font-size: 24px; background: #a3282b; color: #FFF; margin: 10px; display: inline-block; font-size: 16px; padding: 5px; cursor: pointer; border-radius: 5px;}
@media screen and (max-width: 1000px){
produto boxinfo{ width: 50%; }
produto boximg{ width: 50%; }
}
@media screen and (max-width: 750px){
produto boxinfo{ width: 100%; }
produto boximg{ width: 100%; }
}

adicionar{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
adicionar meio{ max-width: 600px; border: 1px solid #000; padding:20px; width: 100%; margin: 0 auto; display: inline-block; text-align: center; border-radius: 5px;}
adicionar meio p{display: block; padding: 10px; margin: 10px; font-size: 16px; }
adicionar meio a{display: inline-block; padding: 10px; background:#a3282b; color: #FFF; margin: 10px; border-radius: 5px; }
adicionar meio .imgProd{max-width: 200px; max-height: 200px;}
adicionar meio a:hover{ background:#494949;}

avaliacao{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
avaliacao meio{ max-width: 1000px; width: 100%; margin: 0 auto; display: inline-block; text-align: left;}
avaliacao meio h3{  display: block; font-size: 26px; font-weight: 300; margin-bottom: 15px;}
avaliacao meio nota{  display: block; vertical-align: middle;}
avaliacao meio nota ponto{ display: inline-block; font-size: 40px; padding: 10px; vertical-align: middle; }
avaliacao meio nota estrela{ height: 24px; display: inline-block; background: hsla(52,100%,41%,1.00); vertical-align: middle;}
avaliacao meio nota total{ display: inline-block; padding: 10px; vertical-align: middle;}
avaliacao meio nota a{ display: inline-block; padding: 10px; background: #a3282b; color: #FFF; border-radius: 5px; vertical-align: middle;}
avaliacao meio comentarios{ display: block; padding: 10px; border: 1px solid #EBEBEB;}
avaliacao meio comentarios pts{ display:inline-block; padding: 10px;}
avaliacao meio comentarios pts i{ display:inline-block; color: #F4DC00;}
avaliacao meio comentarios nome{ display:inline-block; padding: 10px; font-weight: 400;}
avaliacao meio comentarios msg{ display: block; padding: 10px;}
avaliacao meio comentarios a{ display: inline-block; padding: 5px; background: #a3282b; color: #FFF; border-radius: 5px; vertical-align: middle; }
avaliacao meio .av_form{ max-width: 700px; display: inline-block; width: 100%; padding: 20px;}
avaliacao meio .av_form input,
avaliacao meio .av_form textarea{ width: 100%; padding: 5px; display: inline-block; border-radius: 5px; border: 1px solid #000;}
avaliacao meio .av_form label{ width: 100%; padding: 5px 5px 0; display: inline-block;}
avaliacao meio .av_form button{  display: inline-block; padding: 10px; background: #a3282b; color: #FFF; border-radius: 5px; vertical-align: middle;}
/* --------------------------- BANNER ----------------------------*/
.banner{width:100%;padding:0; text-align:center;}
.banner .b1{display:block; }
.banner .b2{display:none;}
@media screen and (max-width: 1000px){
.banner .b1{display:none;}
.banner .b2{display:block;}
}
/* --------------------------- CAROUSEL ----------------------------*/
.carousel{width:100%; text-align:center;}
.carousel h2.titulo{font-size:40px; font-weight:400;}
.carousel .faixa_imagens{max-width:1270px; padding:10px; margin:0 auto; }
.carousel .faixa_imagens2{max-width:100%; padding:10px; margin:0 auto; }
.carousel .faixa_imagens2 img{max-width:100%; padding:10px; margin:0 auto; }
.carousel .faixa_imagens .box{ width:33.33%; padding:0; text-align:left; display:inline-block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; margin:15px 0;}
.carousel .faixa_imagens .box img{width:100%; float:left; }
.carousel .faixa_imagens .descricao{width:100%; height:150px; float:left; text-align: center;}
.carousel .faixa_imagens .descricao h2{color:#a3282b; text-align: center; font-size:18px; font-weight:400; padding:10px; margin:0; line-height:20px; height:40px;}
.carousel .faixa_imagens .descricao p{color:#a3282b; font-size:20px; font-weight:bold; display:block; padding: 10px;}
.carousel .faixa_imagens .descricao p b{color:#494949; font-size:20px; font-weight:400; text-decoration:line-through; }
.carousel .faixa_imagens .descricao p strong{color:#a3282b; font-size:42px; }
.carousel .faixa_imagens .descricao span{color:#FFF; background:#a3282b; padding:5px 20px; font-size:20px; font-weight:400; border-radius: 10px; max-width:40%; margin:5px auto;}

/* --------------------------- TERMOS DE USO ----------------------------*/
.termos_uso{width:100%;}
.termos_uso .meio{max-width:1270px; padding:10px; margin:0 auto; }
.termos_uso .meio h1.titulo{font-size:30px; font-weight:400; text-align:center;}
.termos_uso .meio p{margin:0; padding:10px 0;}

/* --------------------------- QUEM SOMOS / EMPRESA ----------------------------*/
.empresa{width:100%;}
.empresa .meio{max-width:1020px; padding:10px; margin:0 auto; }
.empresa .meio h1.titulo{font-size:30px; padding: 20px 0 0; font-weight:400; color: #a3282b; text-align:center;}
.empresa .meio p{margin:0; padding:10px 0; text-align:justify;}
.empresa .meio a{font-weight:400; background: #a3282b; color:#FFF; padding:7px 10px; cursor:pointer; border:0; border-radius: 5px; display: inline-block; margin: 10px 0; }
.empresa .bannerF{ display: block; width: 100%; }
.empresa .bannerM{ display: block; width: 100%; display: none; }
@media screen and (max-width: 1000px){
    .empresa .bannerF{ display: none; }
    .empresa .bannerM{ display: block; }
    }

/* --------------------------- ESQUECI SENHA ----------------------------*/
.esq_senha{max-width: 1024px; margin:0 auto; padding:10px; text-align:center;}
.esq_senha .box{ max-width:400px; padding:10px; margin:60px auto; border:1px solid #000; text-align:left;}
.esq_senha .box h1{font-size:20px; font-weight:400; text-align:center; background:#CCC; width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.esq_senha .box p{ width:100%; float:left; padding:10px; text-align:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;  }
.esq_senha .box input{ width:100%; border:1px solid #999; padding:10px; background-color:#E5E5E5;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;  }
.esq_senha .box .entrar{width:auto; padding:10px 30px; font-weight:400; background: #a3282b; color:#FFF; cursor:pointer; border:0; margin:10px 0; display:inline-block; }
.esq_senha .box .entrar:hover{background: #494949;}

/* --------------------------- CONTATO ------------------------------*/
.contato{max-width: 1024px; margin:0 auto; padding:10px;}
.contato h1{width:98%; float:left; text-align:center; padding:10px 0; font-size:30px; font-weight:400; }
.contato div{width:98%; float:left; text-align: center; color:#7C7C7C; padding:10px 0; }
.contato div input{ width:70%; border:1px solid #999; padding:10px; background-color:#E5E5E5;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;  }
.contato div input.codigo{width:20%;}
.contato div textarea{ width:70%; border:1px solid #999; padding:10px; background-color:#E5E5E5;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; }
.contato div .captcha{ height:25px; }
.contato div .captcha2{ height:25px; }
.contato div.msg .msg_contato{width:70%; display: inline-block; text-align:center; padding:10px; font-weight:600; color:#FFF; background:#a3282b;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; }
.contato .enviar{width:auto; font-weight:400; background: #a3282b; color:#FFF; padding:7px 10px; cursor:pointer; border:0; }
.contato .enviar:hover{background: #494949;}
@media screen and (max-width: 420px){
.contato .msg{width:90%;}
.contato  div input{ width:90%; }
.contato  div textarea{ width:90%; }
}

/* --------------------------- LOJISTA ------------------------------*/
.lojista{max-width: 1024px; margin:0 auto; padding:10px;}
.lojista p span{color:#F00; font-size:16px; font-weight:600; text-align:center; padding:20px 0; display:block;}
.lojista img{float:left; max-width:50%; padding:0 15px 15px 0;}
@media screen and (max-width: 500px){
.lojista img{float:left; max-width:100%; width:100%; padding:15px 0;}
}
/* --------------------------- CADASTRESE ------------------------------*/
.form{width:100%; float:left; padding:0;}
.form .meio{max-width:1024px; text-align:left; padding:0px 10px 20px; margin:0 auto;}
.form .meio label{font-weight:600;display:block;color:#333;}
.form .meio input, .form .meio select{width:100%;padding:10px;margin-top:5px;border:2px solid #ccc;border-radius:8px;transition:0.3s;}
.form .meio input.valid, .form .meio select.valid{border-color:#4CAF50;}
.form .meio input.invalid, .form .meio select.invalid{border-color:#F44336;}
.form .meio .erro{color:#F44336;font-size:0.85em;margin-top:3px;min-height:18px; position: absolute; background: #FFF; z-index: 99; }
.form .meio .input-group{position:relative;width: 50%; display: inline-block; padding: 0 10px 15px;  }
.form .meio .senha-container .toggle-senha{position:absolute;right:15px;top:42px;cursor:pointer;}
.form .meio button{margin-top:20px;width:100%;padding:14px;background:#a3282b;color:#fff;border:none;border-radius:8px;font-size:1em;cursor:pointer;}
.form .meio button:hover{background:#494949;}
.form .meio .checkbox{ margin: 0; padding: 0; width:25px; height: 50px; display: inline-block; vertical-align: middle; }
.form .meio h1{float:left; text-align:left; padding:10px; font-size:20px; font-weight:bold; color:#a3282b; width:100%;}
@media screen and (max-width: 750px) {
    .form .meio .input-group{width: 100%; }
}

.cadastrese{max-width: 1024px; margin:0 auto; padding:10px;}
.cadastrese p.titulo{float:left; text-align:center; padding:10px; font-size:20px; width:100%;}
.cadastrese h1{float:left; text-align:left; padding:10px 0.5%; font-size:20px; font-weight:bold; color:#a3282b; width:100%;}
.cadastrese h2{float:left; text-align:left; padding:0px 0.5%; margin:0; font-size:16px; font-weight:bold; color:#a3282b; width:100%;}
.cadastrese input{width:32.33%; margin:0.5%; float:left; padding:10px; border:1px solid #999;}
.cadastrese select{width:32.33%; margin:0.5%; float:left; padding:9px; border:1px solid #999;}
.cadastrese input.check{width:auto; margin:2px;}
.cadastrese input.cadastrar{background:#a3282b; color:#FFF; width:100px; cursor:pointer;}
.cadastrese input.cadastrar:hover{background:#494949;}
.cadastrese p{margin:0.5%; width:99%; float:left; padding:5px;}
.cadastrese .cadastrar{background:#a3282b; color:#FFF; font-size:14px; cursor:pointer;margin:0.5%; float:left; padding:10px 15px;}
.cadastrese .cadastrar:hover{background-color: #494949;}

@media screen and (max-width: 800px){
.cadastrese input{width:49%;}
.cadastrese select{width:49%;}
}
@media screen and (max-width: 500px){
.cadastrese input{width:99%;}
.cadastrese select{width:99%;}
}
cadastro{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
cadastro meio{ max-width: 1000px; width: 100%; margin: 0 auto; display: inline-block; text-align: left;}
cadastro p.titulo{float:left; text-align:center; padding:10px; font-size:20px; width:100%;}
cadastro p{padding:10px; display: inline-block;}
cadastro h1{float:left; text-align:left; padding:10px 0.5%; font-size:20px; font-weight:bold; color:#a3282b; width:100%;}
cadastro h2{float:left; text-align:left; padding:0px 0.5%; margin:0; font-size:16px; font-weight:bold; color:#a3282b; width:100%;}
cadastro label{display: block; font-size: 13px; }
cadastro .box{width: 33.33%; display: inline-block; padding: 5px;}
cadastro .box2{width: 100%; display: inline-block; padding: 5px;}
cadastro .box span{ float: right; margin-top: -32px; padding: 5px; cursor: pointer; }
cadastro .box span:hover{ color: #a3282b; }
cadastro select,
cadastro input{display: block; width: 100%; padding: 5px; }
cadastro input.check{width:auto; padding: 20px; margin:5px 2px; display: inline-block;}
cadastro input.cadastrar{background:#a3282b; color:#FFF; width:100px; cursor:pointer;border-radius: 5px; border: 0;}
cadastro input.cadastrar:hover{background:#494949;}
@media screen and (max-width: 800px){
cadastro .box{width: 50%; display: inline-block; padding: 5px;}
}
@media screen and (max-width: 500px){
cadastro .box{width:100%; display: inline-block; padding: 5px;}
}

/* --------------------------- INDENTIFICACAO ------------------------------*/
.meuspedidos{max-width: 1024px; margin:0 auto; padding:10px;}
.meuspedidos .botao{padding:5px 10px; display: inline-block; margin: 5px; background: #a3282b; color: #FFF; border-radius: 5px;}
.meuspedidos h2{float:left; text-align:left; padding:0px 0.5%; margin:0; font-size:16px; font-weight:bold; color:#a3282b; width:100%;}
.meuspedidos tr.titulo{background: #494949; color: #FFF; text-align: center; font-weight: bold;}
.meuspedidos tr td{padding: 5px; text-align: center;}
.meuspedidos tr td img{display: inline-block; vertical-align: middle;}
.meuspedidos tr td a{display: inline-block; vertical-align: middle; color: #000;}

@media screen and (max-width: 450px){
.meuspedidos .meuspedidos_tab{}
.meuspedidos .meuspedidos_tab_header{}
}

/* --------------------------- INDENTIFICACAO ------------------------------*/
identificacao{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
identificacao meio{ max-width: 1200px; width: 100%; margin: 0 auto; display: inline-block; }
identificacao h2{width:100%; text-align:center; color:#494949; font-weight:bold; padding:10px 0; }
identificacao box1,identificacao box2{ display: inline-block; width: 50%; vertical-align: top; padding: 20px;}
identificacao box1 label{ display: inline-block; width: 100%; text-align: left; padding: 3px 0;}
identificacao box1 input{ display: inline-block; width: 100%; padding: 10px;}
identificacao box1 p{ display: inline-block; width: 100%; padding: 10px 0;}
identificacao box1 a{ font-weight: bold; color:#a3282b; border-radius: 5px;}
identificacao box1 button{ padding: 10px; border: 0; background: #a3282b; color: #FFF; cursor: pointer;border-radius: 5px;}
identificacao box2 a{ padding: 10px; border: 0; background: #a3282b; color: #FFF; display: inline-block;border-radius: 5px;}
identificacao entrega label{ display: inline-block; width: 100%; text-align: left; padding: 3px 0;}
identificacao entrega input{ display: inline-block; width: 100%; padding: 10px;}
identificacao entrega select{ display: inline-block; width: 100%; padding: 10px;}
identificacao entrega p{ display: inline-block; width: 100%; padding: 10px 0;}
identificacao entrega a{ font-weight: bold; color:#a3282b;}
identificacao entrega button{ padding: 10px; border: 0; background: #a3282b; color: #FFF; cursor: pointer; display: inline-block; font-size: 14px; border-radius: 5px;}
identificacao a.voltar{ padding: 10px; border: 0; background: #a3282b; color: #FFF; display: inline-block; font-weight: 400; font-size: 14px; margin-right: 5px;  border-radius: 5px;}
identificacao a.voltar:hover{text-decoration:underline;}

@media screen and (max-width: 900px){
identificacao .corpo{width:100%; height:auto;}
identificacao .corpo:last-child{border:0;}
}
@media screen and (max-width: 500px){
identificacao box1,
identificacao box2{ width: 100%;}

}
/* --------------------------- PAGAMENTO ------------------------------*/
pagamento{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
pagamento meio{ max-width: 800px; width: 100%; margin: 0 auto; display: inline-block; text-align: left;}

pagamento boxbca{padding:10px; vertical-align: middle; width: 50%; display: inline-block; text-align: center;}
pagamento boxbca img{max-width:100%; display: inline-block;}
pagamento box3{padding:10px; vertical-align: middle; width: 25%; display: inline-block; text-align: center;}
pagamento box3 div{width:100%; text-align: center; }
pagamento box3 div p{ float:left; text-align:right; width:50%; }
pagamento box3 div strong{font-weight:700; float:right; text-align:right; width:50%;}
pagamento box3 div input{padding:5px; margin:5px 0;  width:100%; border-radius: 5px;}
pagamento box3 div .btn_cupom{padding:5px; background:#a3282b; color:#FFF; border:0; width:100%; cursor:pointer; border-radius: 5px; }
pagamento box3 div .btn_cupom:hover{background:#333; color:#FFF;}

pagamento condicao {width:100%; padding: 5px; text-align: center;}
pagamento condicao h2{width:100%; text-align:left; color:#494949; font-weight:bold; padding: 10px 0; font-size: 16px; }
pagamento condicao form{width:100%;}
pagamento condicao legend{padding: 10px;}
pagamento condicao fieldset{padding: 10px;}
pagamento condicao img{max-width: 100%; display: inline-block; vertical-align: middle; margin-bottom: 10px; }
pagamento condicao button{ padding: 10px; background: #a3282b; color: #FFF; cursor: pointer; border: 0; border-radius: 5px; }

pagamento a.voltar{ padding: 10px 30px; border: 0; background: #a3282b; color: #FFF; display: inline-block; font-weight: 400; font-size: 14px; margin-top: 15px; border-radius: 5px; }
pagamento a.voltar:hover{text-decoration:underline;}

@media screen and (max-width: 700px){
	pagamento box3{width:50%;}
	pagamento boxbca{padding:10px; vertical-align: middle; width: 100%; display: inline-block; text-align: center; float: left;}
}
/* --------------------------- CONFIRMAÇÃO PAGAMENTO ------------------------------*/
obrigado{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
obrigado meio{ max-width: 1000px; width: 100%; margin: 0 auto; display: inline-block; text-align: center;}
obrigado meio .botao{ padding: 5px 10px; background: #a3282b; color: #FFF; border-radius: 5px;}

.obrigado{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
.obrigado .meio{ max-width: 1000px; width: 100%; margin: 0 auto; display: inline-block; text-align: center;}
.obrigado .meio .botao{ padding: 5px 10px; background: #a3282b; color: #FFF; border-radius: 5px;}
.obrigado .meio .box{ padding: 10px; display: inline-block; width: 48%; margin: 1%; background: #f4f4f4; border-radius: 5px; height: 430px; vertical-align: top; }
.obrigado .meio .box p{ text-align: left; display: block; margin: 15px 0; }
.obrigado .meio .box b{ text-align: center; display: block; color: #a3282b;}
.obrigado .meio .box span{ color: #a3282b; font-weight: 700;}
@media screen and (max-width: 900px){
.obrigado .meio .box{ width: 98%; height: auto; }

}
/* --------------------------- CONFIRMAÇÃO PAGAMENTO ------------------------------*/
confirmacao{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
confirmacao meio{ max-width: 1000px; width: 100%; margin: 0 auto; display: inline-block; text-align: left;}
confirmacao span{display:none;}
confirmacao .cab{width:100%; background:#494949; color: #FFF; float:left; font-weight:400; border-radius: 10px;}
confirmacao .cab div{float:left; text-align:center; padding:5px 0;}
confirmacao .cab .cab1{width:40%;}
confirmacao .cab .cab2{width:10%;}
confirmacao .cab .cab3{width:10%;}
confirmacao .cab .cab4{width:20%;}
confirmacao .cab .cab5{width:20%;}
confirmacao .prod{width:100%; float:left; font-weight:400;}
confirmacao .prod div{float:left; text-align:center; padding:20px 0;}
confirmacao .prod .prod1{width:40%; padding:5px 0;}
confirmacao .prod .prod1 .box{max-height:60px; width:60px; float:left; padding:0; margin:5px 0; float:left; text-align:center;}
confirmacao .prod .prod1 img{max-height:100%; max-width:100%; margin:0 auto;}
confirmacao .prod .prod1 p{text-align:left; padding:10px 0;}
confirmacao .prod .prod2{width:10%;}
confirmacao .prod .prod2 input{padding:5px; border:1px solid #999; width:40px;}
confirmacao .prod .prod3{width:10%;}
confirmacao .prod .prod3 .icon-cancel{font-size: 22px; color: #000; display: inline-block;  vertical-align: middle; }
confirmacao .prod .prod3 .img{display: inline-block; vertical-align: middle;}
confirmacao .prod .prod4{width:20%;}
confirmacao .prod .prod5{width:20%;}

confirmacao valores{width:100%; background: #494949; color: #FFF; font-weight:400; border-radius: 10px; padding: 5px 0; display: inline-block;}
confirmacao valores p{width:33.33%; display: inline-block; padding: 5px; text-align: center;}

confirmacao endereco{width:50%; display: inline-block; vertical-align: top;}
confirmacao endereco box1,confirmacao endereco box2{width:50%; display: inline-block; padding: 10px; vertical-align: top;}
confirmacao endereco h2{width:100%; padding: 10px 0; font-size: 16px;}
confirmacao endereco p{width:100%; padding: 0px; font-size: 14px;}

confirmacao fomapagamento{width:50%; display: inline-block; vertical-align: top; padding: 10px; text-align: right;}
confirmacao fomapagamento h2{width:100%; padding: 10px 0; font-size: 16px;}
confirmacao fomapagamento img{max-width:90%;}
confirmacao fomapagamento p{width:100%; padding: 0px; font-size: 14px;}
confirmacao fomapagamento button{ padding: 10px; border: 0; background: #a3282b; color: #FFF; display: inline-block; font-weight: 400; font-size: 14px; margin-top: 15px; cursor: pointer;}

confirmacao a.voltar{ padding: 10px; border: 0; background: #a3282b; color: #FFF; display: inline-block; font-weight: 400; font-size: 14px; margin-top: 15px; border-radius: 5px; }
confirmacao a.voltar:hover{text-decoration:underline;}

@media screen and (max-width: 700px){
confirmacao .cab .cab1{width:50%;}
confirmacao .cab .cab2{width:15%;}
confirmacao .cab .cab3{width:15%;}
confirmacao .cab .cab4{display:none;}
confirmacao .cab .cab5{width:20%;}
confirmacao .prod .prod1{width:50%; padding:5px 0;}
confirmacao .prod .prod2{width:15%;}
confirmacao .prod .prod3{width:15%;}
confirmacao .prod .prod4{display:none;}
confirmacao .prod .prod5{width:20%;}
confirmacao endereco{width:100%; }
confirmacao fomapagamento{width:100%;}

}
@media screen and (max-width: 500px){
confirmacao .cab {display:none;}
confirmacao .prod .prod1{width:100%;}
confirmacao .prod .prod2{width:33.33%;}
confirmacao .prod .prod3{width:33.33%;}
confirmacao .prod .prod4{width:33.33%;display:block;}
confirmacao .prod .prod5{width:33.33%;}
confirmacao .prod{margin:5px 0; border:1px solid #a3282b;}
confirmacao .prod div{padding:5px 0;}
confirmacao span{display:block; background: #a3282b; color: #FFF; font-size:12px; width:100%; float:left; padding:5px 0;}
confirmacao .prod .prod2 input{ margin: 3px 0;}

confirmacao valores p strong{display: block;}

}

.cielo{max-width: 1024px; padding:10px; margin:0 auto 20px; text-align: left;}
.cielo .meio{background:#f6f6f6; width:100%; box-sizing:border-box; border-radius: 15px; border: 1px solid #a3282b; }
.cielo h1{font-weight:300; background: #a3282b; color:#FFF; text-align: center; padding:7px 15px; font-size:18px; margin-bottom:25px; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.cielo .linha{width: 100%; height: 5px; margin: 20px 0 10px; background:#E3E3E3;}
.cielo input{padding: 5px; border: 1px solid #999;}
.cielo select{padding: 5px; border: 1px solid #999;}
.cielo strong{font-weight:400; font-size: 14px;}
.cielo .cartoes{padding: 5px; display: inline-block; width: 100%; background:#E3E3E3; margin: 15px 0; }
.cielo .box{padding: 5px; text-align: left; display: inline-block; }
.cielo .boxcard{ display: inline-block; padding: 5px; text-align: center;}
.cielo .boxcard img{cursor: pointer; height: 40px;}
.cielo .boxcard input{height: 40px; float: left;}
.cielo .boxcard select{height: 40px; float: left;}
.cielo .msg{padding:10px; width:100%; margin: 5px 0; background:#38FF73;}
.cielo .msg2{padding:10px; width:100%; margin: 5px 0; background:#FF5656; color: #FFF;}

.cielo .box{padding:5px 15px; text-align: left; width: 100%; max-width:500px; display: block; margin: 0 auto; }
.cielo .box2{padding:5px 15px; text-align: center; width: 100%; max-width:500px; display: block; margin: 0 auto; }
.cielo .box input{width: 100%; padding:10px; border-radius:10px; }
.cielo .box select{width: 100%; padding:10px; border-radius:10px; }
.cielo .box input.data{width: 80px;box-sizing: border-box; }
.cielo .box2 button{ padding:7px 10px; margin:10px auto 25px; background:#a3282b; color:#FFF; cursor:pointer; border:2px solid #a3282b; float:left; border-radius: 5px;}
.cielo .box2 button:hover{background:#494949;}
.cielo .bt{width:100%; text-align:center;}
/* --------------------------- CARRINHO ------------------------------*/
.carrinho{max-width: 1024px; margin:0 auto; padding:10px; color:#494949;}
.carrinho a.voltar{float:left; padding:10px; color:#494949;}
.carrinho a.voltar:hover{text-decoration:underline;}
.carrinho span{display:none;}
.carrinho .cab{width:100%; background:#494949; color: #FFF; float:left; font-weight:400; border-radius: 10px;}
.carrinho .cab div{float:left; text-align:center; padding:5px 0;}
.carrinho .cab .cab1{width:40%;}
.carrinho .cab .cab2{width:10%;}
.carrinho .cab .cab3{width:10%;}
.carrinho .cab .cab4{width:20%;}
.carrinho .cab .cab5{width:20%;}
.carrinho .prod{width:100%; float:left; font-weight:400;}
.carrinho .prod div{float:left; text-align:center; padding:20px 0;}
.carrinho .prod .prod1{width:40%; padding:5px 0;}
.carrinho .prod .prod1 .box{max-height:60px; width:60px; float:left; padding:0; margin:5px 0; float:left; text-align:center;}
.carrinho .prod .prod1 img{max-height:100%; max-width:100%; margin:0 auto;}
.carrinho .prod .prod1 p{text-align:left; padding:10px 0;}
.carrinho .prod .prod2{width:10%;}
.carrinho .prod .prod2 input{padding:5px; border:1px solid #999; width:40px;}
.carrinho .prod .prod3{width:10%;}
.carrinho .prod .prod3 .icon-cancel{font-size: 22px; color: #000; display: inline-block;  vertical-align: middle; }
.carrinho .prod .prod3 .img{display: inline-block; vertical-align: middle;}
.carrinho .prod .prod4{width:20%;}
.carrinho .prod .prod5{width:20%;}
.carrinho .acb{ max-width: 100%; display: block; margin: 5px auto;}
.carrinho .subtotal{width:100%; background:#494949; color: #FFF; border-radius: 10px; float:left; font-weight:400;}
.carrinho .subtotal p{padding:5px; font-weight:700;}
.carrinho .subtotal .sub1{text-align:center; float:left; width:40%;}
.carrinho .subtotal .sub2{text-align:center; float:right; width:20%;}
.carrinho .frete{width:100%; float:left; font-weight:400; text-align:right; padding:10px 0;}
.carrinho .frete input{padding:10px; width:100px; border-radius: 10px; border: 1px solid #999;}
.carrinho label{cursor: pointer;}
.carrinho .frete input.botao{background:#a3282b; border:2px solid #a3282b; color:#FFF; cursor:pointer;}
.carrinho .frete input.botao:hover{background:#0A83B7;}
.carrinho .frete_op{width:100%; float:left; padding:5px 0; text-align:right;}
.carrinho .frete_op div{width:100%; float:left; padding:5px 0;}
.carrinho .frete_op div h2{padding:5px 0; font-size:18px; margin:0; color: #a3282b; font-weight: 400;}
.carrinho .frete_op div p{padding:5px 0;}
.carrinho .frete_op div .box{width:70px; height:30px; float:right; padding:5px 0; text-align:center;}
.carrinho .frete_op div .box img{max-height:100%; max-width:100%; margin:0 auto;}
.carrinho .prosseguir{width:100%; float:left; padding:5px 0; text-align:right;}
.carrinho .prosseguir select{padding:10px; margin:10px 0;}
.carrinho .prosseguir input{padding:10px; margin:10px 0; background:#a3282b; border:2px solid #a3282b; color:#FFF; cursor:pointer; border-radius: 10px;}
.carrinho .prosseguir input:hover{background:#494949;}
@media screen and (max-width: 700px){
.carrinho .cab .cab1{width:50%;}
.carrinho .cab .cab2{width:15%;}
.carrinho .cab .cab3{width:15%;}
.carrinho .cab .cab4{display:none;}
.carrinho .cab .cab5{width:20%;}
.carrinho .prod .prod1{width:50%; padding:5px 0;}
.carrinho .prod .prod2{width:15%;}
.carrinho .prod .prod3{width:15%;}
.carrinho .prod .prod4{display:none;}
.carrinho .prod .prod5{width:20%;}
}
@media screen and (max-width: 500px){
.carrinho .cab {display:none;}
.carrinho .prod .prod1{width:100%;}
.carrinho .prod .prod2{width:33.33%;}
.carrinho .prod .prod3{width:33.33%;}
.carrinho .prod .prod5{width:33.33%;}
.carrinho .prod{margin:5px 0; border:1px solid #a3282b;}
.carrinho .prod div{padding:5px 0;}

.carrinho span{display:block; background: #a3282b; color: #FFF; font-size:12px; width:100%; float:left; padding:5px 0;}
.carrinho .prod .prod2 input{ margin: 3px 0;}

.carrinho .subtotal .sub1{text-align:center; float:left; width:50%;}
.carrinho .subtotal .sub2{text-align:center; float:right; width:50%;}

}

/*-------- NEWS --------*/
.news { width: 100%; margin:20px 0 0 0; padding:0px; text-align: center;}
.news detalhe{ width: 100%; margin:0; padding:10px; background:#494949; text-align: center; display: block;}
.news form{margin: 0; padding: 0;}
.news ul{width:90%; list-style:none; margin:0 5%; padding:0;}
.news ul li{ padding:5px; color:#FFF; display:inline-block; vertical-align: middle;}
.news ul li input{ width:100%; padding:5px; border: 0; border-radius: 5px;}
.news ul li button{ width:100%; padding:5px; border: 0; border-radius: 5px; cursor: pointer;}
@media screen and (max-width: 800px){
.news ul li{ display:block;}
}

.blog_adm{width:100%; padding:0; text-align:center;}
.blog_adm .meio{max-width:1024px; padding:10px; margin:10px auto; text-align:left;}
.blog_adm menublog{width:100%; display: block; padding:10px 0; margin:10px auto; text-align:left;}
.blog_adm menublog a{ padding:5px 10px; margin:5px; background: #F00; color: #FFF; border-radius: 5px;  }
.blog_adm h1{ font-weight: 400; font-size: 20px; padding:10px 0;}
.blog_adm .meio table{background: #FFF; padding: 5px;}
.blog_adm .meio .titulo td{background: #222d32; color: #FFF;}
.blog_adm .meio td{padding: 5px;}
.blog_adm .meio td a.bt{ padding: 5px; border: 1px solid #FFF; background-image: linear-gradient(#14844a, #18a55d); color: #FFF; font-weight: 500; display: inline-block; text-align: center;}
.blog_adm .meio td a.bt:hover{ background: #18a55d; }
.blog_adm .meio td a.bte{ padding: 5px; border: 1px solid #FFF; background-image: linear-gradient(#F00, #a91c1c); color: #FFF; font-weight: 500; display: inline-block; text-align: center;}
.blog_adm .meio td a.bte:hover{ background: #F00; }
.blog_adm .meio .listProd ul li ul li.google img{ height: 25px; margin: 0 auto; display: inline-block;}
.blog_adm .meio input{ padding: 5px; width: 100%; border: 1px solid #CCC;}
.blog_adm .meio textarea{ padding: 5px; width: 100%; border: 1px solid #CCC;}
.blog_adm .meio select{ padding: 5px; width: 100%; border: 1px solid #CCC;}
.blog_adm .meio label{ padding: 5px 0; width: 100%; display: inline-block; font-weight: 400; color: #000;}
.blog_adm .meio button{ padding: 10px 25px; margin: 10px 0 0; color: #FFF;background-image: linear-gradient(#14844a, #18a55d); display: inline-block; border: 0; cursor: pointer;}
.blog_adm .meio button:hover{color: #FFF;background: #18a55d;}
.blog_adm .meio previaimg{ width: 100%; display: inline-block; padding: 10px 0;}
.blog_adm .meio previaimg img{ display: inline-block; height: 60px; max-width: 100%; vertical-align: middle; }
.blog_adm .meio previaimg a{padding: 5px 10px; color: #FFF;background-image: linear-gradient(#F00, #a91c1c); display: inline-block; vertical-align: middle; }
.blog_adm .meio previaimg a:hover{ background: #F00; }
.blog_adm .meio .boximgs{ max-width: 100%; padding: 10px 0; margin: 0; display: block; background: #FFF;}
.blog_adm .meio .boximgs .box1{ width: 150px; max-width: 100%; padding: 5px; margin: 0; display: inline-block;}
.blog_adm .meio .boximgs .box1 .img{ width: 100%; height: 150px; border: 1px solid #FFF;}
.blog_adm .meio .boximgs .box1 a.bt{ width: 100%; padding: 5px; border: 1px solid #FFF; background: #000; color: #FFF; font-weight: 500; display: inline-block; text-align: center;}
.blog_adm .meio .boximgs .box1 a.bt:hover{ background: #666; }

/* --------------------------- BLOG ------------------------------*/
.blog{width:100%; float:left; padding:0; text-align:center; background:url(../imagens/textura_home.png);}
.blog .meio{max-width:1024px; padding:10px; margin:10px auto; text-align:left;}
.blog .meio h1{color:#a3282b; border-bottom:2px solid #a3282b; padding:20px 0 5px 0; font-weight:bold;}
.blog .meio .desc{text-align:justify; color:#a3282b; padding:20px 0;}
.blog .meio ul{width:100%; padding:0; margin:0;}
.blog .meio ul li{width:31.33%; padding:10px; margin:1%; background:#FFF; list-style:none; display:inline-block;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; text-align:center;}
.blog .meio ul li p{ width:100%; text-align:center; color: #000; padding:5px 0;}
.blog .meio ul li a:hover p{color: #000;}
.blog .meio ul li .img { max-width:100%; height:200px;}
.blog .meio .blogueiro{width:100%; padding:0; margin:0; border-top:2px solid #a3282b;}
.blog .meio .blogueiro div{width:33.33%; padding:10px; margin:0 0 10px 0; list-style:none; display:inline-block;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.blog .meio .blogueiro div img{float:left; padding:0 10px 0 0; max-width:30%;}
.blog .meio .blogueiro div h2{font-size:16px; color:#a3282b; padding:0; margin:0;}
.blog .meio .blogueiro div p{font-size:14px; color:#666; text-align:justify;}
@media screen and (max-width: 1000px){
.blog .meio .blogueiro div{width:50%;}
}
@media screen and (max-width: 650px){
.blog .meio ul li{width:50%;}
}
@media screen and (max-width: 500px){
.blog .meio .blogueiro div{width:100%;}
}
@media screen and (max-width: 450px){
.blog .meio ul li{width:100%;}
}
/* --------------------------- PRODUTO VIEW ------------------------------*/
.prod_view{width:100%; float:left; padding:0; text-align:left; background:url(../imagens/textura_home.png);}

.prod_view .blogueiro{max-width:1024px; padding:15px 10px; margin:0 auto;}
.prod_view .blogueiro img{max-height:100px; float:left; margin-right:20px;}
.prod_view .blogueiro h3{padding:5px; margin:0; color:#a3282b; font-size:16px;}
.prod_view .blogueiro p{padding:5px; font-size:14px;}

.post .prod_view .meio{max-width:1024px; padding:10px; margin:20px auto; background:#FFF;}
.prod_view .meio{max-width:1024px; padding:10px; margin:20px auto;}
.prod_view .meio iframe{ width:100%; }
.prod_view .meio p.box{ width:100%; text-align:justify;}
.prod_view .meio p.box .img1{max-width:50%; float:left; padding:0 10px 10px 0;}
.prod_view .meio h1{color:#a3282b; border-bottom:2px solid #a3282b; padding:20px 0; margin-bottom:20px;}
.prod_view .meio h1.blog{text-align:center; color:#a3282b; font-size:26px; font-weight:300; text-align:left; background:hsla(0,0%,100%,0.30); padding:5px 10px; border:1px solid #D1D7E1; margin: 10px 0;}
.prod_view .meio h2{text-align:center; color:#a3282b; font-size:26px; font-weight:300; text-align:left; background:hsla(0,0%,100%,0.30); padding:5px 10px; margin: 10px 0; border:1px solid #D1D7E1;}
.prod_view .meio a.laudo{padding:5px 10px; background:#a3282b; color:#FFF; display:inline-block; cursor:pointer; border-radius: 5px;}
.prod_view .meio a.laudo:hover{ background:#494949;}
.prod_view .meio .img2{width:20%; height:150px; float:left; padding:5px; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}

.prod_view .meio .comentar {display:none; width: 100%;}
.prod_view .meio .comentar input{max-width:100%; width:100%; padding:5px; margin:3px 0; border:1px solid #666; border-radius: 5px;}
.prod_view .meio .comentar textarea{max-width:100%; width:100%; padding:5px; margin:3px 0; border:1px solid #666; border-radius: 5px;}
.prod_view .meio .comentar .botao{padding:5px 10px; background:#a3282b; color:#FFF; display:inline-block; cursor:pointer; border-radius: 5px;}
.prod_view .meio .comentar .botao:hover{ background:#494949;}

.post blogprod{ width: 100%; padding: 20px 0; display: block; }
.post blogprod box{ width: 33.33%; padding: 15px; display: inline-block; text-align: center; }
.post blogprod box boximg{ width: 100%; height: 250px; display: inline-block;}
.post blogprod box boximg img{ max-height: 100%; max-width: 100%; margin: auto;  }
.post blogprod box h3{ text-align: center; font-weight: 700; font-size: 14px; color: #a3282b; padding: 5px; }
.post blogprod box span{ border-radius: 5px; padding: 10px; background: #a3282b; color: #fff; font-weight: bold; margin: 10px auto; display: inline-block; cursor: pointer;}

@media screen and (max-width: 950px){
.prod_view .meio .img2{width:25%;}
}
@media screen and (max-width: 750px){
.prod_view .meio .img2{width:33.33%;}
.post blogprod box{ width:50%;}
}
@media screen and (max-width: 650px){
.prod_view .meio .img2{width:50%;}
}
@media screen and (max-width: 550px){
.post blogprod box{ width:100%;}
.prod_view .meio .img2{width:100%; height:auto;}
}
@media screen and (max-width: 500px){
.prod_view .meio p.box .img1{max-width:100%; width:100%; float:left; padding:10px 0;}
}


/* --------------------------- FAIXA AREA DO CLIENTE ----------------------------*/
.faixa_car{width:100%; text-align:center; background:#d8d8d8;}
.faixa_car .meio{max-width:1024px; padding:0; margin:0 auto; }

.faixa_car .meio .logado{float:left; padding:10px; max-width:550px;}
.faixa_car .meio .logado ul{margin:0; padding:0; width:100%; text-align:left;}
.faixa_car .meio .logado ul li{list-style:none; display:inline-block; padding:3px 5px;}
.faixa_car .meio .logado ul li:first-child{width:100%;}
.faixa_car .meio .logado ul li a{padding:5px 10px; background:#260524; color:#FFF; display:block;}
.faixa_car .meio .logado ul li a:hover{background:#680E48;}
.faixa_car .meio .logado p{font-size:16px; color:#260524; padding:0; margin:0; text-align:left;}

.faixa_car .meio .deslogado{float:left; padding:10px; max-width:550px;}
.faixa_car .meio .deslogado ul{margin:0; padding:15px 0;text-align:left;}
.faixa_car .meio .deslogado ul li{list-style:none; display:inline-block; padding:0; color:#260524; font-size:16px; font-weight:400; text-align:left;}
.faixa_car .meio .deslogado ul .des_titulo{font-weight:400;}
.faixa_car .meio .deslogado ul li input{padding:5px; background:none; border:2px solid #260524; margin:0 5px;}
.faixa_car .meio .deslogado ul li input.bnt{background:#260524; color:#FFF; cursor:pointer;}
.faixa_car .meio .deslogado ul li input.bnt:hover{ background:#520637;}

.faixa_car .meio .boxcar {float:right; padding:20px 10px 10px 10px;}
.faixa_car .meio .boxcar span{font-size:30px; color:#260524;}
.faixa_car .meio .boxcar span:hover{color:#680E48;}
.faixa_car .meio .boxcar p{font-size:16px; color:#260524; padding:0; margin:0;}
.faixa_car .meio .boxcar .numero{width:20px; text-align:center; border:0; background-color:transparent; height:25px; color:#fff; color:#ee9a13; font-size:22px;}

@media screen and (max-width: 750px){
.faixa_car .meio .logado{float:left; padding:10px; max-width:100%; width:100%;}
.faixa_car .meio .logado p{text-align:center;}
.faixa_car .meio .logado ul{text-align:center;}
.faixa_car .meio .deslogado{float:left; padding:10px; max-width:100%;width:100%;}
.faixa_car .meio .deslogado ul{text-align:center;}
.faixa_car .meio .deslogado ul .des_titulo{text-align:center;}
.faixa_car .meio .deslogado ul li{padding:5px;}
.faixa_car .meio .boxcar {float:none; margin:0 auto;}
}
@media screen and (max-width: 570px){
.faixa_car .meio .deslogado ul li{padding:5px; text-align:center; width:100%;}
}
@media screen and (max-width: 450px){
.faixa_car{display:none;}
.faixa_car .meio .boxcar{display:none;}
}
/* --------------------------- PRODUTOS / HOME ----------------------------*/
.produtos{width:100%; text-align:center;}
.produtos .meio{max-width:1024px; padding:10px; margin:0 auto; }

/* --produtos--*/
.produtos .meio ul{margin:0; padding:0; width:70%; text-align:left; float:left;}
.produtos .meio ul li{list-style:none; display:inline-table; width:33.33%; text-align:left; padding:10px;}
.produtos .meio ul li .desconto{ text-align:right; padding:6px; background:#ECAE11; color:#000; margin-bottom:-40px; margin-right:6px; float:right; position:relative; z-index:999;}
.produtos .meio ul li .boximg{ width:100%; height:200px; margin:0 auto; text-align:center; padding:10px 0; float:left;}
.produtos .meio ul li .boximg img{ max-width:100%; max-height:200px; margin:0 auto;}
.produtos .meio ul li a p{font-size:16px; font-weight:300; color:#260524; text-align:center;}
.produtos .meio ul li a h2{font-size:16px; font-weight:400; color:#260524; text-align:center; line-height:20px; height:40px;}
.produtos .meio ul li a p strong{font-size:26px; font-weight:bold; color:#ee9a13; text-align:center;}
.produtos .meio ul li a span{font-size:16px; padding:5px 0; font-weight:400; color:#FFF; background:#a3282b; width:100%; text-align:center; display:block; margin:10px 0;}
.produtos .meio ul li a span:hover{background:#164F3E;}


@media screen and (max-width: 900px){
.produtos .meio ul li{ width:50%;}
.produtos .meio .barra_busca input{width:auto;}

.produtos .meio .menu_categoria{width:40%;}
.produtos .meio ul{width:60%;}
}
@media screen and (max-width: 700px){
.produtos .meio ul li{ width:100%;}
}
@media screen and (max-width: 550px){
.produtos .meio .menu_categoria{width:100%; display:none;}
.produtos .meio #menu-icon2{display:block;}
.produtos .meio ul{width:100%;}
}
@media screen and (max-width: 500px){
.produtos .meio .barra_busca form{width:100%; height:80px; text-align:center;}
.produtos .meio .barra_busca h1{font-size:36px; width:100%; font-weight:400; color:#260524; float:left; text-align:center; padding:38px 10px; background:url(../imagens/detalhe_titulo.jpg) top center no-repeat; margin-bottom:15px;}
}
@media screen and (max-width: 450px){
.produtos .meio .barra_busca form{width:100%; height:auto; text-align:center; padding-bottom:10px;}
.produtos .meio .barra_busca{padding:0; margin:0; text-align:center;}
.produtos .meio .barra_busca .icone{display:block;}
.produtos .meio .barra_busca h1{display:none;}
.produtos .meio .barra_busca input{padding:10px; margin:0;}
.produtos .meio .barra_busca button{padding:10px; margin:0;}
}

/* --------------------------- INDENTIFICACAO ------------------------------*/
.meuspedidos{max-width: 1024px; margin:0 auto; padding:10px;}
.meuspedidos h2{float:left; text-align:left; padding:0px 0.5%; margin:0; font-size:16px; font-weight:bold; color:#0c3c2e; width:100%; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.meuspedidos .meuspedidos_tab{width:100%; float:left; padding:0; border:1px solid #CCC;}
.meuspedidos .meuspedidos_tab_header{width:100%; float:left; padding:0; border:1px solid #CCC;}
.meuspedidos .meuspedidos_tab_header div{ padding:5px; float:left; text-align:center;width:25%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.meuspedidos .meuspedidos_tab div{ padding:5px; float:left; text-align:center;width:25%; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.meuspedidos .meuspedidos_tab div img{ height:20px; margin:0; padding:0; width:auto;}

@media screen and (max-width: 450px){
.meuspedidos .meuspedidos_tab{}
.meuspedidos .meuspedidos_tab_header{}
}


/*-------- ESTAGIOS --------*/
.estagio{ max-width:1024px; margin:0 auto; text-align:center; padding-bottom:10px; }
.estagio div{ width:auto; padding:5px 10px; text-align:center; font-weight:700; color:#C4C4C4; display: inline-block; }
.estagio div strong{color:#a3282b; text-decoration:underline;}
@media screen and (max-width: 65px){
}
/* --------------------------- pop up ------------------------------*/
/*Início do Código CSS*/
#ccexitpop{
font-family: 'Inconsolata', sans-serif;
display:none;
position:fixed;
top:0;left:0;
width:100%;
height:100%;
z-index:99999;
}
#ccexitpop .overlay{
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background:#2B7FCF;
opacity:0.7;
z-index:99998;
}
#ccexitpop .popbox{
font-family: 'Inconsolata', sans-serif;
border:2px solid #FFF;
z-index:99999;
color:#333;
width:580px;
height:340px;
background:#fafafa;
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;left:0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
background:url(../imagens/bg_popup.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }
#ccexitpop .popbox .formulario{ width:70%; padding:10px; float:left;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
#ccexitpop .popbox .formulario h2{color:#2baadf;  border-bottom:2px solid #2baadf; padding:10px 0 20px 0;}
#ccexitpop .popbox .formulario p{text-align:left; font-size:14px; color:#FFF;padding:5px; width:98%; float:left; margin:0 1% 1% 1%;}
#ccexitpop .popbox .formulario input{ padding:5px; width:98%; border:2px solid #2baadf; float:left; margin:1%;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
#ccexitpop .popbox .formulario input.botao{ padding:5px; width:100px; border:2px solid #FFF; color:#FFF; background:#2baadf; cursor:pointer; float:left; margin:1%;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
#ccexitpop .popbox .formulario input.botao:hover{background:#258DB8;}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(../images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(../images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(../images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}