* {box-sizing: border-box; margin: 0; padding: 0;}
.logo {width: 90%; max-width: 700px; height: 80%; background-color: #222222; border-radius: 8px; }
header {display: flex; justify-content: center; padding-top: 2%;}
.titulo {display: flex; justify-content: center; font-family: Verdana, Geneva, Tahoma, sans-serif; padding-top: 1%; padding-bottom: 2%;}
h1 {color:yellow; font-size: 1.5vmax }

.menu {background-color: #222222; width: 100%; }
nav {float:left; background-color: #222222;}
nav ul {list-style: none; overflow: hidden; }
nav ul li {float: left; font-family: Arial, Helvetica, sans-serif; font-size: 1.4vmax;}
nav ul li a {display: block; color: skyblue; text-decoration:none; padding-left: 18px; padding-right: 18px; padding-top: 10px; padding-bottom: 10px;}
nav ul li:hover {background: #666666;}
h4 {color: #444444;}
h2 {color: red; background-color: white; text-align: center; font-size: 2vmax; margin-bottom: 3%; margin-top: 2%;}

.containerProducts {display: flex; flex-wrap:wrap; justify-content: center;}
.oferProduct {display: flex; flex-direction: column; margin-bottom: 25px; margin-left: 3px; margin-right: 3px; width: 24vmax; }
.botonTitle {color: red; background-color: #222222; border-color: red; border-style:ridge; border-radius: 2px; border-width: 1px; text-align: center; margin-bottom: 2%;}
.productImg {border-color: red;border-style:ridge; border-radius: 2px; border-width: 1px; }
.price {display: flex; flex-direction: row; padding: 10px; justify-content: center; }
.priceReg {text-decoration:line-through; padding-right: 9px; color: white; padding-top: 4px; font-size: small;}
.priceOff {font-size: 100%; font-weight: bolder; color: white;}
.separa {background-color: red; padding-bottom: 1px; width: 100%; height: 1px;}

.ContainerImgAux {display: flex; flex-wrap: wrap; justify-content: center;}
.AuxImg {margin-bottom: 2%; margin-left: 1.5%; margin-right: 1.5%; width: 45vmin;}
.separa2 {background-color: white; width: 100%; height: 1px; margin-bottom: 2%;}

.divUtil {display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 3%}
.botUtil {margin-left: 2%; margin-right: 2%; margin-bottom: 2%; padding: 3px;color: red; background-color: #222222;}

.ContainerLogos {display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 2%;}
.logoMarca {margin: 2px; width: 5vmax;}

.piePagina {background-color: #222222; padding-top: 2%; padding-bottom: 3%; display: flex; flex-wrap: wrap; justify-content:center;}
.textPie {color: skyblue; font-family: Arial, Helvetica, sans-serif; font-size: 95%; margin-bottom: 3%; margin-top: 2%;}
.textPie2 {color: white; font-family: Arial, Helvetica, sans-serif; font-size: 80%;}
.pieSegmento {display: flex; flex-direction: column; align-items: initial; padding-left: 3%; padding-right: 3%; padding-bottom: 2%; padding-top: 3%;}
.textPieA {color: skyblue;}
a {color: white;}



.botonwapp {position: fixed; bottom: 20px; right: 20px; z-index: 9999; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); animation: breathe 2s ease-in-out infinite;}
@keyframes breathe {0% {box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);}
                    70% {box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);}
                    100% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);} }