+- AcaTudo - Fóruns com Vida (https://forum.acatudo.com)
+-- Fórum: Fórum de apoio (https://forum.acatudo.com/forumdisplay.php?fid=1)
+--- Fórum: Obras na casa (https://forum.acatudo.com/forumdisplay.php?fid=21)
+---- Fórum: Projecto plataforma OpenCart (https://forum.acatudo.com/forumdisplay.php?fid=22)
+----- Fórum: Erros detectados e soluções pasra OpenCart versão 4.0.x (https://forum.acatudo.com/forumdisplay.php?fid=2)
+----- Tópico: Ajustes em /catalog/view/stylesheet/stylesheet.css (/showthread.php?tid=13)
Ajustes em /catalog/view/stylesheet/stylesheet.css - Guardiao_AD - 2022-07-18
Há na versão original problemas com o auto-ajuste (responsivo às várias resoluções )
para minimizar o problema aqui está uma das soluções encontradas
@font-face { font-family: "FonteVariavel_1"; src: url("Fts/BarlowCondensed-Light.ttf") format("truetype"); font-style:normal; } /* t=16px r=1.455 */
@font-face { font-family: "FonteVariavel_2"; src: url("Fts/Caveat-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:500; }
@font-face { font-family: "FonteVariavel_3"; src: url("Fts/Dosis-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:400; } /* 17px */
@font-face { font-family: "FonteVariavel_4"; src: url("Fts/Oswald-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:200; }
@font-face { font-family: "FonteVariavel_5"; src: url("Fts/Varta-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:400; }
@font-face { font-family: "FonteVariavel_6"; src: url("Fts/EduSABeginner-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:400; }
@font-face { font-family: "FonteVariavel_7"; src: url("Fts/EduNSWACTFoundation-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:400; }
@font-face { font-family: "FonteVariavel_8"; src: url("Fts/YanoneKaffeesatz-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:300; } /* 19px */
@font-face { font-family: "FonteVariavel_9"; src: url("Fts/Mohave-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:300; } /* 17px */
@font-face { font-family: "FonteVariavel_10"; src: url("fonts/opencart.ttf") format("truetype"); font-style:normal; } /* 14px */
@font-face { font-family: "FonteVariavel_11"; src: url("Fts/Schoolbell.ttf") format("truetype"); font-style:normal; } /* 16px */
@font-face { font-family: "FonteVariavel_12"; src: url("Fts/Abel-Regular.ttf") format("truetype"); font-style:normal; font-weight:100; } /* t=16px r=1.455 */
@font-face { font-family: "FonteVariavel_13"; src: url("Fts/BarlowCondensed-Regular.ttf") format("opentype"); font-style:normal; } /* 19px */
@font-face { font-family: "FonteVariavel_14"; src: url("Fts/BarlowCondensed-Light.ttf") format("truetype"); font-style:normal; }
:root {
--FonteVariavel: FonteVariavel_2; /* <----<< colocar aqui a fonte pretendida ex: --FonteVariavel: "Segoe UI" */
--baseTamanhoFonte: 16px; /* <----<< colocar aqui o tamanho da fonte base ex: 12px */
--relacaoAlturaLinha:1.455; /* <----<< relação da altura da linha necessário com o tamanho da fonte */
--h1:1.750em;
--h2:1.600em;
--h3:1.500em;
--h4:1.375em;
--h5:1.250em;
--h6:1.250em;
--p1:0.875em;
--p:1.0em;
--a:1.0em;
}
body {
background: url(/image/catalog/Logotipo/rect1533-8_10_pCento.png) repeat fixed; background-size: auto;
font-family: var( --FonteVariavel ), open sans, sans-serif, Verdana, "Trebuchet MS", "Times New Roman", Tahoma, "Lucia Sans Unicode", Georgia, "Courier New", "Comic Sans Ms", Arial, Georgia,"Segoe UI";
color: #640709;
width: 100%;
line-height:1;
}
main {background-color: #ffffff;}
@media only screen and (min-width: 320px) {
body { font-size: calc( var( --baseTamanhoFonte ) + 1px );}
}
@media only screen and (min-width: 640px) {
body { font-size: var( --baseTamanhoFonte );}
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {max-width: 100%;}
}
@media only screen and (min-width: 720px) {
body { font-size: calc( var( --baseTamanhoFonte ) - 2px ); background: url(/image/catalog/fotos_fundo/imagem.php) no-repeat fixed center center; background-size: cover; }
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {max-width: calc( 100vw - 137px );}
}
@media only screen and (min-width: 1024px) {
body { font-size: calc( var( --baseTamanhoFonte ) - 1px );}
main {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAIUlEQVR42mJkYGDgAWIJIFbZunUrOwMUMDHgAPSQAAgwAE/bAnpEXJvrAAAAAElFTkSuQmCC); background-repeat: repeat;}
}
@media only screen and (min-width: 1280px) {
body { font-size: var( --baseTamanhoFonte ); }
/* main {background-color: #fffeee20; background: url(/image/catalog/fotos_fundo/imagem.php) no-repeat fixed center center; background-size: cover;} */
main {background-color: #fffeee20; background-size: cover;} */
}
@media only screen and (min-width: 1366px) {
body { font-size: calc( var( --baseTamanhoFonte ) + 1px ); }
}
@media only screen and (min-width: 1600px) {
body { font-size: calc( var( --baseTamanhoFonte ) + 1px ); }
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {max-width: calc( 100vw - 240px );}
main {background-color: #fffeee20;background-image:none;}
}
@media only screen and (min-width: 1920px) {
body { font-size: calc( var( --baseTamanhoFonte ) + 2px ); }
}
@media only screen and (min-width: 2560px) {
body { font-size: calc( var( --baseTamanhoFonte ) + 4px ); }
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {max-width: 100%;}
}
@media only screen and (min-width: 3840px) {
body { font-size: calc( var( --baseTamanhoFonte ) + 6px ); }
}
main {
/* */
/* background-color: #fffeee; */
/* background-color: #fefefe; */
border: 2px double #09ad07;
box-shadow: 4px 8px 27px #152d15cc;
margin: auto;
padding: 21px 0 49px 0;
border-top: 0;
border-bottom: 0;
/* text-align: justify; */
}
h1 {
text-shadow: 1px 1px 2px #6a1d1d, 0 0 25px #ad4f4f, 0 0 5px #ad4f4fcc,0 0 25px #fff, 0 0 24px #fff, 0 0 23px #fff, 0 0 22px #fff, 0 0 21px #fff, 0 0 20px #fff, 0 0 19px #fff, 0 0 18px #fff, 0 0 17px #fff, 0 0 16px #fff, 0 0 15px #fff, 0 0 14px #fff, 0 0 13px #fff, 0 0 12px #fff, 0 0 11px #fff, 0 0 10px #fff, 0 0 9px #fff, 0 0 8px #fff, 0 0 7px #fff, 0 0 6px #fff, 0 0 5px #fff, 0 0 4px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff, 0 0 0px #fff;
color: #ffd700;
font: var(--h1)/normal var( --FonteVariavel );
}
h2, h3, h4, h6 {
/* text-shadow: -3px 3px 16px #555000ac; */
text-shadow: -2px 3px 10px;
padding-bottom: 10px;
}
h2 {
color: #ff7700;
font: var(--h2)/normal var( --FonteVariavel );
text-align: initial;
text-shadow: 1px 1px 2px #6D1C00, 0 0 25px #ffc159, 0 0 5px #c33b00,0 0 25px #fff, 0 0 24px #fff, 0 0 23px #fff, 0 0 22px #fff, 0 0 21px #fff, 0 0 20px #fff, 0 0 19px #fff, 0 0 18px #fff, 0 0 17px #fff, 0 0 16px #fff, 0 0 15px #fff, 0 0 14px #fff, 0 0 13px #fff, 0 0 12px #fff, 0 0 11px #fff, 0 0 10px #fff, 0 0 9px #fff, 0 0 8px #fff, 0 0 7px #fff, 0 0 6px #fff, 0 0 5px #fff, 0 0 4px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff, 0 0 0px #fff;
/* letter-spacing: 0.05em; */
}
h3 {
font: var(--h3)/normal var( --FonteVariavel );
color: #ccdc77;
text-align: initial;
text-shadow: 1px 1px 2px #152d15, 0 0 25px #f1f8ab, 0 0 5px #2c7017, 0 0 25px #fff, 0 0 24px #fff, 0 0 23px #fff, 0 0 22px #fff, 0 0 21px #fff, 0 0 20px #fff, 0 0 19px #fff, 0 0 18px #fff, 0 0 17px #fff, 0 0 16px #fff, 0 0 15px #fff, 0 0 14px #fff, 0 0 13px #fff, 0 0 12px #fff, 0 0 11px #fff, 0 0 10px #fff, 0 0 9px #fff, 0 0 8px #fff, 0 0 7px #fff, 0 0 6px #fff, 0 0 5px #fff, 0 0 4px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff, 0 0 0px #fff;
}
h4 {
font: var(--h4)/normal var( --FonteVariavel );
color: #ad6409 ;
}
h5 {
font: var(--h5)/normal var( --FonteVariavel );
color: #196407;
}
h6 {
/* color: #640709fe; */
font: var(--h6)/normal var( --FonteVariavel );
color: #09ad64;
}
p {
font: var(--p)/normal var( --FonteVariavel );
}
p1 {
font: var(--p1)/normal var( --FonteVariavel );
}
a {
font: var(--a)/normal var( --FonteVariavel );
color: #196409;
text-decoration: none;
}
a:hover, #top a:hover,.product-thumb h4 >a:hover, .d-none.d-md-inline:hover, .product-thumb .button-group button:hover,.nav-link:hover, .btn-inverse:hover {
color: #ff7700;
text-decoration: none;
}
hr {
margin-top: 7px;
margin-bottom: 7px;
}
#content {
/*text-shadow: 0px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff, -1px -1px 1px #ffffff, 1px -1px 1px #ffffff, 1px 1px 1px #ffffff, -1px 1px 1px #ffffff,
0px -2px 1px #ffffff, 2px 0px 1px #ffffff, 0px 2px 1px #ffffff, -2px 0px 1px #ffffff, -2px -2px 1px #ffffff, 2px -2px 1px #ffffff, 2px 2px 1px #ffffff, -2px 2px 1px #ffffff,
0px -3px 1px #ffffff, 3px 0px 1px #ffffff, 0px 3px 1px #ffffff, -3px 0px 1px #ffffff, -3px -3px 1px #ffffff, 3px -3px 1px #ffffff, 3px 3px 1px #ffffff, -3px 3px 1px #ffffff,
0px -4px 1px #ffffff, 4px 0px 1px #ffffff, 0px 4px 1px #ffffff, -4px 0px 1px #ffffff, -4px -4px 1px #ffffff, 4px -4px 1px #ffffff, 4px 4px 1px #ffffff, -4px 4px 1px #ffffff,
0px -5px 1px #ffffff, 5px 0px 1px #ffffff, 0px 5px 1px #ffffff, -5px 0px 1px #ffffff, -5px -5px 1px #ffffff, 5px -5px 1px #ffffff, 5px 5px 1px #ffffff, -5px 5px 1px #ffffff,
0px -6px 1px #ffffff, 6px 0px 1px #ffffff, 0px 6px 1px #ffffff, -6px 0px 1px #ffffff, -6px -6px 1px #ffffff, 6px -6px 1px #ffffff, 6px 6px 1px #ffffff, -6px 6px 1px #ffffff,
0px -7px 1px #ffffff, 7px 0px 1px #ffffff, 0px 7px 1px #ffffff, -7px 0px 1px #ffffff, -7px -7px 1px #ffffff, 7px -7px 1px #ffffff, 7px 7px 1px #ffffff, -7px 7px 1px #ffffff; */
text-shadow: 0 0 25px #fff, 0 0 24px #fff, 0 0 23px #fff, 0 0 22px #fff, 0 0 21px #fff,
0 0 20px #fff, 0 0 19px #fff, 0 0 18px #fff, 0 0 17px #fff, 0 0 16px #fff,
0 0 15px #fff, 0 0 14px #fff, 0 0 13px #fff, 0 0 12px #fff, 0 0 11px #fff,
0 0 10px #fff, 0 0 9px #fff, 0 0 8px #fff, 0 0 7px #fff, 0 0 6px #fff,
0 0 5px #fff, 0 0 4px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff, 0 0 0px #fff;
}
.dropdown-item:hover, .dropdown-item:focus {
color: #1e2125;
background-color: #e9ecef;
}
.dropdown-item.active, .dropdown-item:active {
color: #0f8508;
text-decoration: none;
background-color: #ccdc77;
}
.navbar-expand-lg .navbar-nav {
margin-left: 0px;
/* right: 0px; */
/* position: absolute; */
}
/* Chrome border line */
button:focus {
outline: none !important;
}
legend {
font-size: 18px;
padding: 7px 0;
margin-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
label {
font-size: 12px;
font-weight: normal;
}
.list-unstyled a {
text-decoration: none;
}
.nav-tabs {
margin-bottom: 15px;
}
div.required .col-form-label:before, div.required .form-label:before {
content: "* ";
color: #F00;
font-weight: bold;
}
@media (min-width: 768px) {
.col-form-label { text-align: right; }
}
/* top */
#top, #menu, .breadcrumb { line-height: 21px; }
#top {
background-image: linear-gradient(to bottom, #FFEFAC, #fff, #c7d97f);
background-color: #EEEEEE;
border-bottom: 2px double #09ad07;
padding: 10px 0;
min-height: 44px;
}
#top a, .product-thumb .button-group button, .btn-inverse,.nav-link {
text-shadow: 0 1px 0 #FFF;
/* color:#196409; */
color: #09071964;
}
.nav-tabs .nav-link.active, #menu .navbar-nav > li > a:active {
color: #09ad07;
}
#top .btn-link {
text-shadow: 0 1px 0 #FFF;
text-decoration: none;
}
#top .btn-link:hover {
color: #444;
}
#top a {
font-size: 1.1em;
text-decoration: none;
}
footer a {
font-size: 1.1em;
text-decoration: none;
}
/* logo */
#logo {
margin: 0 0 21px 0;
}
#logo img {
/* box-shadow: -1px -1px 3px 7px #00000014; */
border-radius: .35em;
/* border: 2px double #09ad07; */
/* background-color: #fffeeecb; */
padding: 3px;
box-shadow: 0 0 21px #fff, 0 0 14px #fff, 0 0 7px #fff, 0 0 6px #fff, 0 0 5px #fff, 0 0 4px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff, 0 0 0px #fff;
}
#logo img:hover {
transition: all .5s ease;
/* animation: animate 2s ease-in-out infinite; */
transform: rotate(-7deg) scale(0.7);
transition: all .5s ease;
}
/* search */
#search {
margin-bottom: 10px;
}
#search .form-control-lg {
height: 40px;
font-size: 14px;
line-height: 20px;
padding: 0 10px;
}
#search .btn-lg {
font-size: 15px;
line-height: 18px;
padding: 0.57rem 35px;
text-shadow: 0 1px 0 #FFF;
}
/* cart */
#header-cart {
/* margin-bottom: 10px; */
/* bottom: 0px; */
position: relative;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
#header-cart > .btn {
font-size: 12px;
line-height: 18px;
color: #FFF;
}
#header-cart .btn-lg {
padding: 0.65rem 1rem;
}
#header-cart.open > .btn {
background-image: none;
background-color: #FFFFFF;
border: 1px solid #E6E6E6;
color: #666;
box-shadow: none;
text-shadow: none;
}
#header-cart.open > .btn:hover {
color: #444;
}
#header-cart .dropdown-menu {
background: #eee;
z-index: 1001;
min-width: 100%;
}
#header-cart .dropdown-menu table {
margin-bottom: 10px;
}
#header-cart .dropdown-menu li {
min-width: 427px;
padding: 0 10px;
}
#header-cart .dropdown-menu li p {
margin: 20px 0;
}
@media (max-width: 478px) {
#header-cart .dropdown-menu {
width: 100%;
}
#header-cart .dropdown-menu li > div {
min-width: 100%;
}
}
#header-cart .table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.list-group-item {
color: #196409;
}
/* menu */
#menu {
background-image: linear-gradient(to bottom,#ccdc77,#ccdc77,#e1e599,#f1f8ab,#e7eb9f,#ccdc77,#80a307 );
/* min-height: 41px; */
border-radius: 301px 14px 126px 301px / 70px 14px 126px 70px;
box-shadow: 0 3px 7px #152d15cc;
}
#menu.navbar {
padding: 0 7.7rem;
margin-bottom: 21px;
}
#menu .navbar-toggler i {
color: #fff;
border-color: #fff;
font-size: 0.9em;
}
#menu .navbar-nav > li > a {
color: #196409;
border-radius: 0 0 7px 7px;
text-shadow: 0 -1px 7px rgba(0, 0, 0, 0.25);
padding: 10px 15px 10px 15px;
min-height: 15px;
background-color: transparent;
}
#menu .navbar-nav > li > a:hover, #menu .navbar-nav > li > a:focus, #menu .navbar-nav > li > a:active {
background-color: rgba(0, 0, 0, 0.07);
text-shadow: -1px 3px 7px;
}
/* ---------- efeitos geral ----------*/
#menu .nav >li > a:hover {
background:none;
transform: rotate3d(1, 0, 0, 3.142rad);
transition: all .5s ease;
}
/* ---------- efeitos especificos ----------*/
#menu .nav >li:first-child{
background-image: linear-gradient(to left,rgba(107, 7, 107, 0.07), #e8ebbc, rgba(7, 107, 7, 0.07));
}
#menu .nav >li:last-child {
background-image: linear-gradient(to right,rgba(107, 7, 107, 0.07), #e8ebbc, rgba(7, 107, 7, 0.07));
}
#menu .nav > li:first-child >a:hover{
transform: rotate( 0deg) scale(.7);
transition: all .5s ease;
}
#menu .nav > li:nth-child(2) >a:hover {
animation: animate 2s ease-in-out infinite;
}
#menu .nav > li:nth-child(3) >a:hover {
transform: rotate(180deg);
}
#menu .nav > li:last-child >a:hover {
transform: rotate( 0deg) scale(1.11);
transition: all .5s ease;
}
#menu .dropdown-menu {
line-height: normal;
font-size: 100%;
width: max-content;
padding-bottom: 0;
margin-top: 0;
overflow: hidden;
}
#menu .dropdown-inner ul li a:hover {
color: #007700;
background-image: linear-gradient(to bottom,#e1e599,#f1f8ab,#e7eb9f );
}
#menu .dropdown-inner a {
min-width: 160px;
display: block;
padding: 3px 20px;
clear: both;
/* line-height: 20px; */
color: #196409;
}
#menu .see-all {
display: block;
margin-top: 0.5em;
border-top: 1px solid #DDD;
padding: 3px 14px 14px;
border-radius: 0 0 3px 3px;
background-image: linear-gradient(to bottom,#80a307,#80a307,#80a307,#80a307,#80a307,#acd506,#80a307);
color: yellow;
text-shadow: 0px 2px 3px black;
}
#menu .see-all:hover, #menu .see-all:focus {
text-decoration: none;
color: #ffffff;
background-repeat: repeat-x;
background-image: linear-gradient(to bottom,#80a307,#80a307,#80a307,#80a307,#80a307,#acd506,#80a307);
}
#menu #category {
float: left;
font-size: 16px;
font-weight: 700;
line-height: 40px;
color: #ecf8b8;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-transform: full-width;
}
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #a8c595;
border-color: #a8c595;
}
@media (min-width: 992px) {
#menu .dropdown:hover .dropdown-menu {
display: block;
}
}
@media (max-width: 991px) {
#menu {
background-image: linear-gradient(to bottom, #80a307, #cfe76e);
border-radius: 4px;
}
#menu.navbar {
padding: 0 1rem;
}
#menu .navbar-nav {
padding-bottom: 7px;
text-align: center;
font-size:28px;
border-radius: 4px;
overflow: hidden;
}
#menu .navbar-nav > li {
border-radius: 0px;
background-color: rgba(0, 0, 0, 0.1);
}
#menu .navbar-nav > li:first-child, #menu .navbar-nav > li:last-child {
border-radius: 4px;
}
#menu .navbar-nav > li > a {
}
#menu div.dropdown-menu {
margin-left: 0 !important;
width: auto;
border-radius: 0px 0px 7px 7px;
text-align: center;
font-size:21px;
}
#menu div.dropdown-inner > ul .list-unstyled {
display: block;
}
#menu .dropdown-inner, #menu .dropdown-inner ul {
display: block;
padding-bottom: 3px;
}
#menu .dropdown-inner a {
}
#menu .dropdown-menu a:hover {
/* background: rgba(0, 0, 0, 0.1); */
}
#menu .dropdown-menu ul li a :hover {
/* background: rgba(0, 0, 0, 0.1); */
}
#menu .see-all {
margin-top: 0;
border-radius: 0;
color: #ecf8b8;
padding: 5px 0px 18px 0px;
}
}
/* content */
#content {
min-height: 600px;
/* margin-top: 21px; */
}
.row { line-height: normal; color: #640709; }
/* footer */
footer {
padding-top: 30px;
padding-bottom: 1px;
background-color: #303030;
border-top: 2px double #09ad07;
color: #e2e2e2;
}
footer hr {
border-top: none;
border-bottom: 1px solid #666;
}
footer p { text-shadow: none; }
footer a { color: #cdff8967; }
footer a:hover { color: #EBFF91B8; }
footer h5 {
font-weight: bold;
color: #adadad;
margin-top: 10px;
margin-bottom: 10px;
text-shadow: 1px 1px 2px #171717, 0 0 27px #303030, 0 0 5px #acacac;
}
/* breadcrumb */
.breadcrumb {
margin: 0 0 20px 0;
padding: 8px 0;
border: 1px solid #9ac873;
/* background-color: #ceebd4; */
/* border-radius: .35em; */
/* box-shadow: 0 3px 7px #152d15cc, 0px 0px 21px #adadad inset; */
background-image: linear-gradient(to bottom, #e2e9d299, #f3f3e4cc, #c1cbbb99);
box-shadow: 0 3px 7px #152d15cc;
border-radius: .35em;
}
.breadcrumb > li.breadcrumb-item {
text-shadow: 0 1px 0 #FFF;
padding: 0 20px;
position: relative;
white-space: nowrap;
}
.breadcrumb > li.breadcrumb-item > a {
text-decoration: none;
text-shadow: 0 0 14px #fff, 0 0 13px #fff, 0 0 12px #fff, 0 0 11px #fff, 0 0 10px #fff, 0 0 9px #fff, 0 0 8px #fff, 0 0 7px #fff, 0 0 6px #fff, 0 0 5px #fff, 0 0 4px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff, 0 0 0px #fff;
}
.breadcrumb > li.breadcrumb-item::after {
content: "";
display: block;
position: absolute;
top: -3px;
right: -5px;
width: 27px;
height: 27px;
border-right: 1px solid #9ac873;
border-bottom: 1px solid #9ac873;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.breadcrumb > li.breadcrumb-item + li:before {
content: "";
padding: 0;
}
.pagination { margin: 0; }
#display-control {
text-shadow: none;
}
/* buttons */
.btn-light {
color: #777;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-image: linear-gradient(to bottom, #fefefe, #dddddd);
background-repeat: repeat-x;
border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active, .btn-light.disabled, .btn-light[disabled] {
color: #ff7700;
background-color: #e6e6e6;
border-color: #adadad;
background-position: 0;
}
.btn-primary {
color: #65a838;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border: 1px solid #ced4da;
background-image: linear-gradient(to bottom, #fefefe,#fefefe,#fefefe, #dddddd);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
color: #ff7700;
text-shadow: 0px 0px 21px;
background-image: linear-gradient(to top, #fefefe,#fefefe,#fefefe, #dddddd);
border: 1px solid #ced4da;
}
.btn-warning {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-image: linear-gradient(to bottom, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
background-repeat: repeat-x;
border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-image: linear-gradient(to bottom, #62c462, #51a351);
background-repeat: repeat-x;
border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-image: linear-gradient(to bottom, #e06342, #ad1964);
background-repeat: repeat-x;
border-color: #ad1964 #ad1964 #a2371a;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
background-image: none;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-image: linear-gradient(to top, #e06342, #ad1964);
background-repeat: repeat-x;
border-color: #a2371a #ad1964 #ad1964;
}
.btn-link {
border-color: rgba(0, 0, 0, 0);
cursor: pointer;
color: #4A8721;
border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
background-color: rgba(0, 0, 0, 0);
background-image: none;
box-shadow: none;
}
.btn-inverse {
/* height: 49px; */
background-image: linear-gradient(to bottom, #f1f8ab, #eaf2a1, #dbe78c, #ccdc77, #ccdc77, #ccdc77, #ccdc77, #ccdc77, #ccdc77, #ccdc77, #ccdc77, #ccdc77, #ccdc77, #ccdc77);
background-repeat: repeat-x;
border-color: #ccdc77 #e1e599 #ccdc77#e7eb9e;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 14px 14px 7px 119%;
transition: all 0.5s ease;
font-weight: bold;
}
.btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-image: linear-gradient(to top, #f1f8ab, #ccdc77);
border-radius: 14px 14px 119% 7px;
border-color: #e7eb9e #f1f8ab #ccdc77 #e1e599;
/* transform: rotate(-7deg); */
}
.product-thumb {
background-color: #fff;
margin: 14px 0 21px;
border-radius: 7px;
border: 1px double #E7E7E7;
text-shadow: none;
overflow: hidden;
}
.product-thumb:hover {
border: 1px double #09ad07;
/* transition: all .2s ease; */
/* transform: translate3d(1px, 1px, 0px); */
transform: rotate( -1deg) scale(1.05);
transition: all .5s ease;
box-shadow: 0px -1px 49px -27px slategray;
}
.product-thumb .image {
text-align: center;
overflow: hidden;
margin-bottom: 7px;
}
.product-thumb .image a:hover { opacity: 0.8; }
.product-thumb h4 {
display: block;
height: calc(var( --h4 ) * var(--relacaoAlturaLinha) );
overflow: hidden;
}
.product-thumb h4 > a {
font: var(--h4) / normal var( --FonteVariavel );
color: #ffba5f;
text-shadow: 1px 1px 2px #390000, 0 0 25px #fff89d, 0 0 5px #CA8153;
}
.product-thumb .description {
padding: 5px;
height: calc(10px + calc(var( --h4 ) * var(--relacaoAlturaLinha) ) + 10px + 8px + ( calc(var( --p1 ) * var(--relacaoAlturaLinha) ) * 3) + 5px + calc(var( --h6 ) * var(--relacaoAlturaLinha) ) + calc(var( --p1 ) * var(--relacaoAlturaLinha) ) + 17px + 1px);
text-align: center;
overflow: hidden;
/* vertical-align: middle; */
/* display: table-cell; */
/* vertical-align: 100%; */
}
.product-thumb .description p {
display: block;
font: var(--p1) / normal var( --FonteVariavel );
height: calc( calc(var( --p1 ) * var(--relacaoAlturaLinha) ) * 3 );
overflow: hidden;
margin-bottom: 5px;
}
#product-list.product-list .product-thumb .description p { height: 16px; }
#product-list.product-list .product-thumb .image { margin-bottom: 0px; }
.product-thumb .description .price { text-align: center; }
.product-thumb .button-group {
display: flex;
border-top: 1px solid #ddd;
background-color: #eee;
}
.product-thumb .button-group button {
flex: 33%;
border-radius: 0;
display: inline-block;
border: none;
background-color: #eee;
line-height: 28px;
/* height: 28px; */
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
.product-thumb .button-group button:hover {
/* color: #65a838; */
background-color: #ddd;
text-decoration: none;
cursor: pointer;
}
.product-thumb .button-group button + button {
border-left: 1px solid #ddd;
}
@media (min-width: 991px) {
.product-list .product-thumb {
display: flex;
}
.product-list .product-thumb:hover { transform: rotate( 0.7deg) scale(1.01); }
.product-list .product-thumb .image {
flex-direction: column;
display: inline-flex;
}
.product-list .product-thumb .content {
flex-direction: column;
flex: 75%;
position: relative;
}
.product-list .product-thumb .button-group {
position: absolute;
bottom: 0px;
width: 100%;
border-left: 1px solid #ddd;
}
}
.rating {
padding-bottom: 1px;
line-height: 20px;
}
.rating .fa-stack {
font-size: 6px;
}
.rating .far.fa-star {
color: #999;
font-size: 12px;
}
.rating .fa-star {
color: #FC0;
font-size: 12px;
}
.rating .fa-star + .fa-star {
color: #196409;
}
/* product list */
.price {
color: #444;
}
.price-new {
font: bold var(--h6) / normal var( --FonteVariavel );
color: revert;
margin-bottom: 0px;
text-align: right;
}
.price-old {
color: #ad1964;
text-decoration: line-through;
}
.price-tax {
color: #09071964;
display: block;
font: oblique var(--p1)/normal var( --FonteVariavel );
}
/* BS4 Changes */
.navbar-light .navbar-toggler {
font-size: 15px;
font-stretch: expanded;
color: #ecf8b8;
padding: 7px 12px;
background-color: #4A8721;
background-image: linear-gradient(to bottom, #4A8721, #80a306);
background-repeat: repeat-x;
border-color: #80a306 #80a306 #4A8721;
border-radius: 70% 33%;
}
.form-check .form-check-input {
margin-top: 0.25rem;
}
/* Theme Custom CSS */
#display-control #compare-total.a {
margin-top: -2px;
padding: 0.35rem 0.565rem;
}
#product-product h1 {
margin-top: 20px;
margin-bottom: 10px;
}
#information-contact .card {
margin-bottom: 20px;
}
#cookie {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
z-index: 9999;
opacity: 0.95;
color: #ecf0f1;
background: #343a40;
}
#cookie div {
font-size: 16px;
color: #FFFFFF;
}
/* ------------------------ minhas coisas ------------------------------ */
@media (min-width: 1280px) {
#column-right {
background-image: linear-gradient(to left, #FFEFAC49, #FFF9DF49, #FFE68049);
margin-left: 7px;
}
#column-left {
background-image: linear-gradient(to right, #FFEFAC49, #FFF9DF49, #FFE68049);
margin-right: 7px;
}
#column-left, #column-right {
/* border-bottom: 7px solid #707000; */
/* border-radius: 4px; */
border-bottom: 7px solid #09ad07;
border-radius: 24px 24px 150px 150px / 24px 24px 27px 27px;
border-end-end-radius: 150% 80px;
border-end-start-radius: 150% 80px;
overflow: hidden;
border-left: 1px double #09ad07;
border-right: 1px double #09ad07;
border-top: 1px double #09ad07;
/* background-color: #f1f1; */
padding: 14px 14px 35px 14px;
box-shadow: 0px 0px 7px #a8c595 inset;
}
}
.carousel {
border-radius: 14px 14px 150px 150px / 14px 14px 27px 27px;
border-bottom: 7px solid #707000;
border-left: 0px solid #E7E7E7;
border-right: 0px solid #E7E7E7;
border-top: 0px solid #E7E7E7;
/* overflow: hidden; */
}
.carousel-inner {
border: 14px solid #a8c595;
box-shadow: 0px 0px 7px #152d15;
border-radius: .35em;
background-color: #fff;
}
.col-md-5 {
/* margin: auto; */
}
@media (max-width: 960px) {
.carousel-inner {
border: 7px solid #a8c595;
}
}
.txt_html, .list-group {
background-color: #fffaf0;
/* box-shadow: 0 0px 7px #53a; */
padding: 7px;
border-radius: .35em;
margin-bottom: 14px;
/* box-shadow: 0 0px 7px #555000ac inset; */
/* box-shadow: 0px 0px 7px #152d15; */
/* border: 4px double #ddd; */
text-shadow: none;
box-shadow: 0 0px 7px #555000ac;
}
.txt_html p {
/* margin-bottom: 0px;*/
}
.bannerAtalhos a img:hover, .product-thumb a img:hover, .swiper-slide a img:hover, .foto a img:hover {
border-radius:70px;
visibility: visible !important;
transform: rotate(-7deg) scale(1.2);
-webkit-transform:rotate(-11deg) scale(1.3);
-moz-transform:rotate(-11deg) scale(1.3);
-ms-transform:rotate(-11deg) scale(1.3);
-o-transform:rotate(-11deg) scale(1.3);
transition: all .7s ease;
}
.cercadura {
margin: auto;
background-color: #fffeee40;
border: 2px double #09ad07;
border-radius: 7px;
padding: 10px;
width: calc(100% - 50px );
/*height: 100%; */
}
.cercadura .canto1 {
top: -7px;
left: -7px;
}
.cercadura .canto2 {
top: -7px;
right: calc( -100% + 27px );
}
.cercadura .canto3 {
bottom: -14px;
left: -7px;
}
.cercadura .canto4 {
bottom: -14px;
right: calc( -100% + 27px );
}
.cercadura .ponto {
display: inline-block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNUJCRTkyRDIyMjA2ODExODIyQUI2RTY2QjVBQTI1NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyN0M4RUYxRjlBMDMxMUUyQkY4RkFENzdFNDE1QTVCNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyN0M4RUYxRTlBMDMxMUUyQkY4RkFENzdFNDE1QTVCNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2ICgxMy4wIDIwMTIwMzA1Lm0uNDE1IDIwMTIvMDMvMDU6MjE6MDA6MDApICAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjEwRDNGQUZCMDUyMTY4MTE4MjJBQjZFNjZCNUFBMjU1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1QkJFOTJEMjIyMDY4MTE4MjJBQjZFNjZCNUFBMjU1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+CZyQ/wAAAXdJREFUeNqck79Lw0AUxy9NpNaI7VDooqKT4NS/wcW5xbGj6V46ds7/oYtdOhUhg6D/QHAPWWLVToFKY0miNef3lXd6iFTw4EPevR/37t57McT3MvhbYtnQbJIptP2Xg8FBJrAYk3XkuNT44EOkoQVSQBlUmDLryTEHKZPzIYXFmU123gY1cAT2gA0W4BEE4EW7dqECt0ADHIPzfr9/EUXRwxKLvrQnPdsb7E9xq+vugANw1uv1LpMkkUS325VKHgwGV2QHh6BKcaqy6r27nU7ndDabCSLPc6Hkdrt9Qnb2o6yGpVWbFBUpZd113ZXS932hZMdx6lxIlVBYWgGoBWkYhnGr1aJ3iel0KiCvHEjP1S5Un0ta4Bt4Gg6HN3EcCyLLMqHk0Wh0C/szt4r8palNEx20CIKgSNM0sW271mw2q8g+8Tzvejwe38F+D+Z8g6UK3ACbP/q8r/V5ovX5FWTg/a8JM/mKv07Yutm2WL92tv/9V30KMAByHrXgbfxckwAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
width: 15px;
height: 15px;
pointer-events: none;
position: relative;
}
/* menu extra -------------------- */
#nav_Extra {
background: url("image_extra/mainbk.png") repeat scroll 0 187px #7D7D7D;
border: 0 none;
border-radius: 42% 42% 42% 42%;
/* bottom:-42px;
position:absolute;
left:50%;
transform:translate(-50%);
*/
}
ul#css3menu2,ul#css3menu2 ul{
margin:0 ;list-style:none;padding:0px;background-color:#dedede;
border-color: #70ac48;
border-style: solid solid none solid;
border-width: 0px 0px 0px 0px;border-radius:21px;}
ul#css3menu2 ul{
display:none;position:absolute;left:0;top:100%;-ms-filter:"progid
XImageTransform.Microsoft.Alpha(Opacity=95)";opacity:0.95;-moz-box-shadow:3.5px 3.5px 5px #576870;-webkit-box-shadow:3.5px 3.5px 5px #576870;box-shadow:3.5px 3.5px 5px #576870;padding:1px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;filter:alpha(opacity=40)}ul#css3menu2 li:hover>*{
display:block;z-index: 1;}
ul#css3menu2 li:hover{
position:relative;}
ul#css3menu2 ul ul{
position:absolute;left:100%;top:0;opacity:1;}
ul#css3menu2{
box-shadow:0px 2px 2px #ac7777;width: auto; margin-left:calc(var(--bs-gutter-x) / 2);
display:block;font-size:0;float:left;}
ul#css3menu2 li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu2>li,ul#css3menu2 li{
margin:0;}
ul#css3menu2 a:active, ul#css3menu2 a:focus{
outline-style:none;}
ul#css3menu2 a,ul#css3menu2 a.pressed{
display:block;vertical-align:middle;text-align:center;text-decoration:none;font:15px Times;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menu2 ul li{
float:none;margin:1px 0 0 0;}
ul#css3menu2 ul a{
text-align:left;padding:4px 14px;background-color:#f7f7f7;background-image:none;border-width:0;border-radius:3px;font:15px Times;color:#070;text-decoration:none;}
ul#css3menu2 li:hover>a{
background-color:#cc0000;border-color:#C0C0C0;border-style
olid;font:15px Times;color:#DF971E;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("image_extra/mainbk.png");background-position:0 100px;}ul#css3menu2 img{border-radius:20px 19px 19px;
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu2 img.over{
display:none;}
ul#css3menu2 li:hover > a img.def{
display:none;}
ul#css3menu2 li:hover > a img.over{
display:inline;}
ul#css3menu2 li a.pressed img.over{
display:inline;}
ul#css3menu2 li a.pressed img.def{
display:none;}
ul#css3menu2 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu2 a{
padding:5px 10px;background-color:#b2bbbb;background-image:url("image_extra/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style
olid;border-color:#C0C0C0;color:#007700;text-decoration:none;text-shadow:#FFF 0 0 1px;}ul#css3menu2 li:hover>a,ul#css3menu2 li>a.pressed{
background-color:#70ac48;background-image:url("image_extra/mainbk.png");background-repeat:repeat;background-position:0 100px;border-style
olid;border-color:#C0C0C0;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 1px;}ul#css3menu2 ul li:hover>a,ul#css3menu2 ul li>a.pressed{
background-color:#70ac48;background-image:url("image_extra/mainbk.png");background-repeat:repeat;background-position:0 100px;font:15px Times;color:#ffffff;text-decoration:none;}
ul#css3menu2 li.topfirst>a{
background-color: #DF971E;color: #007700;
border-radius:21px 0 0 21px;}
ul#css3menu2 li.topfirst>a:hover{
color:#ffffff;}
ul#css3menu2 li.toplast>a{
background-color: #5fb5b5;border-radius:0 21px 21px 0;}
@keyframes animate {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-20px);
}
40%,
100% {
transform: translateY(0px);
}
}