.flexIndex
{
 border: 1px solid;
 border-top-color: #FFFFFF;
 border-left-color: #FFFFFF;
 border-bottom-color: #000000;
 border-right-color: #000000;
 background-color: #BFB8BF;
 padding: 0.5em;
}
.flexIndex > .flexProd
{
 color: #000000;
 border: 1px solid;
 border-top-color: #FFFFFF;
 border-left-color: #FFFFFF;
 border-bottom-color: #000000;
 border-right-color: #000000;
 background-color: #BFB8BF;
 max-width: 15em;
 margin: 0.5em;
 padding: 8px;
 background-image: linear-gradient(to bottom, #00007F 0px, #00007F 70px, transparent 70px);
}
.flexIndex > .flexProd > span:first-child
{
 margin-top: -2px;
 margin-left: calc(-8px + 1px);
 text-align: left;
 position: absolute;
 width: calc(48px + 0.5em);
}
.flexIndex > .flexProd > span:first-child img
{
 margin-top: 0.25em;
 margin-left: 0.25em;
}
.flexIndex > .flexProd > span.title
{
 margin-top: calc(-8px + 1px);
 margin-right: calc(-8px + 1px);
 min-height: 70px;
 max-width: calc(100% - 48px);
 padding-bottom: 0.25em;
 color: #FFFFFF;
}
.flexIndex > .flexProd button
{
 margin: 0.3em;
}
.flexIndex > .flexProd:hover, .flexIndex > .flexProd:focus
{
 background-color: #CFC8CF;
}
.flexIndex > .flexProd:active
{
 border-top-color: #000000;
 border-left-color: #000000;
 border-bottom-color: #FFFFFF;
 border-right-color: #FFFFFF;
 background-color: #BFB8BF;
}