.lista
{
    width: 100%;
    margin: auto;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
}

.referencia
{
    width:250px;
    height:250px;
    float:left;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    padding: 10px;
    margin: 10px;
    text-align: center;
    vertical-align:middle;
    display:table-cell;
}

.canister
{
    max-width: 100%; 
    height: 30px; 
    background-color:#ffffff; 
    box-shadow: 2px 3px 9px 0px darkgrey;
    font-weight:lighter; 
    color:#ffffff;
    vertical-align: bottom;
    text-align: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.cor_lista
{
    max-width: 100%; 
    height: 30px; 
    background-color:#ffffff; 
    box-shadow: 2px 3px 9px 0px darkgrey;
    font-weight:lighter; 
    color:#ffffff;
    vertical-align: bottom;
    text-align: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.menuPreto {
  --bg-color0: #000000;
  --bg-color1: #202020;
  --bg-color2: #404040;
  --bg-color3: #505050;
  --bg-color4: #606060;
  --bg-color5: #808080;
  --bg-color6: #909090;
  --bg-color7: #A0A0A0;
  --bg-color8: #B0B0B0;
}
.menuAzul {
  --bg-color0: #000070;
  --bg-color1: #000080;
  --bg-color2: #001090;
  --bg-color3: #0020A0;
  --bg-color4: #0030B0;
  --bg-color5: #0040C0;
  --bg-color6: #0050D0;
  --bg-color7: #0060E0;
  --bg-color8: #0070F0;
}
.menuVermelho {
  --bg-color0: #9F0000;
  --bg-color1: #AF1010;
  --bg-color2: #BF2020;
  --bg-color3: #CF3030;
  --bg-color4: #DF4040;
  --bg-color5: #EF5050;
  --bg-color6: #FF6060;
  --bg-color7: #FF7070;
  --bg-color8: #FF8080;
}
.menuRoxo {
  --bg-color0: #601060;
  --bg-color1: #701070;
  --bg-color2: #801080;
  --bg-color3: #862086;
  --bg-color4: #883088;
  --bg-color5: #8D408D;
  --bg-color6: #8D508D;
  --bg-color7: #8D608D;
  --bg-color8: #8D708D;
}
.menuLaranja {
  --bg-color0: #EE7011;
  --bg-color1: #EF7822;
  --bg-color2: #EF8833;
  --bg-color3: #EF9944;
  --bg-color4: #EFAA55;
  --bg-color5: #FFBB66;
  --bg-color6: #FFCC77;
  --bg-color7: #FFDD88;
  --bg-color8: #FFEE88;
}
.menuAreia {
  --bg-color0: #604020;
  --bg-color1: #705030;
  --bg-color2: #806040;
  --bg-color3: #907050;
  --bg-color4: #A08060;
  --bg-color5: #B09070;
  --bg-color6: #C0A080;
  --bg-color7: #D0B090;
  --bg-color8: #E0C0A0;
}
.menuRoxoEscuro {
  --bg-color0: #4B0082;
  --bg-color1: #5B1092;
  --bg-color2: #6B20A2;
  --bg-color3: #6B30A2;
  --bg-color4: #7B40B2;
  --bg-color5: #7B50B2;
  --bg-color6: #8B60C2;
  --bg-color7: #8B70C2;
  --bg-color8: #9B80D2;
}
.menuAzulCinza {
  --bg-color0: #3F4F5F;
  --bg-color1: #4F5F6F;
  --bg-color2: #5F6F7F;
  --bg-color3: #6F7F8F;
  --bg-color4: #7F8F9F;
  --bg-color5: #8D9DAD;
  --bg-color6: #9CACBC;
  --bg-color7: #A9B9C9;
  --bg-color8: #B5C5D5;
}

:root {
  --width-bt0: 15.0%;
  --width-bt1: 14.5%;
  --width-bt2: 13.0%;
  --width-bt3: 11.8%;
  --width-bt4: 10.5%;
  --width-bt5: 9.5%;
  --width-bt6: 8.5%;
  --width-bt7: 7.5%;
  --width-bt8: 7.0%;
}

.btn-change0{
    height: 90px;
    width: var(--width-bt0);
    background: var(--bg-color0);
    margin: 0.15%;
    float: left;
    border:0px;
    color:#fff;
}
.btn-change0:hover {
    cursor: pointer;
    opacity: 0.7;
}

.btn-change1{
    height: 90px;
    width: var(--width-bt1);
    background: var(--bg-color1);
    margin: 0.15%;
    float: left;
    border:0px;
    color:#fff;
}
.btn-change1:hover {
    opacity: 0.7;
    cursor: pointer;
}

.btn-change2{
    height:90px;
    width: var(--width-bt2);
    background: var(--bg-color2);
    margin: 0.15%;
    float: left;
    border:0px;
    color:#fff;
}
.btn-change2:hover{
    opacity: 0.7;
    cursor: pointer;
}

.btn-change3{
    height:90px;
    width: var(--width-bt3);
    background: var(--bg-color3);
    margin: 0.15%;
    float: left;
    border:0px;
    color:#fff;
}
.btn-change3:hover{
    opacity: 0.7;
    cursor: pointer;
}

.btn-change4{
    height:90px;
    width: var(--width-bt4);
    background: var(--bg-color4);
    margin: 0.15%;
    float: left;
    border:0px;
    color:#fff;
}
.btn-change4:hover{
    opacity: 0.7;
    cursor: pointer;
}

.btn-change5{
    height:90px;
    width: var(--width-bt5);
    background: var(--bg-color5);
    margin: 0.15%;
    float: left;
    border:0px;
    color:#fff;
}
.btn-change5:hover{
    opacity: 0.7;
    cursor: pointer;
}

.btn-change6{
    height:90px;
    width: var(--width-bt6);
    background: var(--bg-color6);
    margin: 0.15%;
    float: left;
    border:0px;
    color:#fff;
}
.btn-change6:hover{
    opacity: 0.7;
    cursor: pointer;
}

.btn-change7{
    height:90px;
    width: var(--width-bt7);
    background: var(--bg-color7);
    margin: 0.15%;
    float: left;
    border:0px;
    color:#fff;
}
.btn-change7:hover{
    opacity: 0.7;
    cursor: pointer;
}

.btn-change8{
    height:90px;
    width: var(--width-bt8);
    background: var(--bg-color8);
    margin: 0.15%;
    float: left;
    border:0px;
    color:#fff;
}
.btn-change8:hover{
    opacity: 0.7;
    cursor: pointer;
}

.b0{
    height:18px;
    width: var(--width-bt0);
    background: var(--bg-color0);
    margin: 0.15%;
    float: left;
    border:0px;
}

.b1{
    height:18px;
    width: var(--width-bt1);
    background: var(--bg-color1);
    margin: 0.15%;
    float: left;
    border:0px;
}

.b2{
    height:18px;
    width: var(--width-bt2);
    background: var(--bg-color2);
    margin: 0.15%;
    float: left;
    border:0px;
}

.b3{
    height:18px;
    width: var(--width-bt3);
    background: var(--bg-color3);
    margin: 0.15%;
    float: left;
    border:0px;
}

.b4{
    height:18px;
    width: var(--width-bt4);
    background: var(--bg-color4);
    margin: 0.15%;
    float: left;
    border:0px;
}

.b5{
    height:18px;
    width: var(--width-bt5);
    background: var(--bg-color5);
    margin: 0.15%;
    float: left;
    border:0px;
}

.b6{
    height:18px;
    width: var(--width-bt6);
    background: var(--bg-color6);
    margin: 0.15%;
    float: left;
    border:0px;
}

.b7{
    height:18px;
    width: var(--width-bt7);
    background: var(--bg-color7);
    margin: 0.15%;
    float: left;
    border:0px;
}

.b8{
    height:18px;
    width: var(--width-bt8);
    background: var(--bg-color8);
    margin: 0.15%;
    float: left;
    border:0px;
}

.linkMenu{
    width: 100%;
}

.linkMenu span{
  float: right;
  padding: 4px;
}

.linkMenu span a{
  dispLay: block;
  margin: 1px;
  padding-right: 2px;
  text-decoration: none;
  color: black;
}

.linkMenu ul{
    width: 95%;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 5px;
    overflow: hidden;
}

.linkMenu ul li{
  width: 30px;
  min-width: 16%;
  text-align: center;
  float: left;
}

.linkMenu ul li a{
  display: block;
  margin: 1px;
  text-align: center;
  padding: 0;
  text-decoration: none;
  color: black;
}

.linkMenu ul li a:hover::before {
    font-family: FontAwesome;
    content:"\2771"; 
    float: left;
    margin-left: 5px;
}

.linkMenu ul li a:hover::after {
    font-family: FontAwesome;
    content:"\2770"; 
    float: right;
    margin-right: 5px;
}

.linkMenu ul li a:active {
  font-weight : bold;
}

.selectedMenu a::before {
    font-family: FontAwesome;
    content:"\2771"; 
    float: left;
    margin-left: 5px;
}

.selectedMenu a::after {
    font-family: FontAwesome;
    content:"\2770"; 
    float: right;
    margin-right: 5px;
}

.rowMenu{
    margin-bottom : 15px;
    margin-left: -14px;
    margin-right: -13px;
}

.rowMenu img{
    max-width : 75%;
}