body {
    font-family: Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
}

.logo {
    text-align: center;
}
.logo-link{
    font-size:48px;
    text-decoration: none;
    color:#000;
}
.logo-link img{
    margin:15px 20px 25px;
}
.logo-link, .logo-link img{
    vertical-align: middle;
}

nav{
    max-width: 900px;
    margin: 0 auto;
}

.menu li{
    display:inline;
}
.menu li.active{
    padding:5px;
    background-color: #eee;
}

main{
    max-width: 900px;
    margin:20px auto;
}
main.catalog{
    max-width: none;
    margin:20px;
}
.cat-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.cat-item {
    border: solid 1px;
    width: calc(33% - 62px);
    overflow: hidden;
    transition: transform 0.1s, box-shadow 0.1s;
    padding: 20px;
    margin: 10px;
}

@media screen and (max-width: 940px) {
    .cat-item {
        width: calc(50% - 62px);
    }
}

@media screen and (max-width: 580px) {
    .cat-item {
        width: calc(100% - 62px);
    }
}


.cat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.cat-item-img {
    width: 100px;
    height: 100px;
    object-fit:contain;
}

.cat-item .item-bottles-count {
    float: right;
}
  
.item-bottles-count img {
    height: 30px;
}

.item-variant-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.item-variant {
    border: solid 1px #000;
    padding:10px;
    margin:5px;
    transition: transform 0.1s, box-shadow 0.1s;
}

.item-variant:hover {
    transform: translateY(-3px);
}

.item-variant.active {
    background-color: #cef;
}

footer{
    text-align: center;
    font-size: 12px;
}
footer .links a{
    padding:5px;
}

img.inside-text{
    display: block;
    margin:auto;
}

.bottle-counter{
    transition: all 1000ms;
}
.bottle-counter.done{
    font-size:1.5em;
}

figure{
    text-align: center;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
figure img{
    width:49%;
}
figcaption{
    font-style: italic;
    font-size: 0.8em;
}

ol.nestcount { counter-reset: item }
.nestcount > li{ display: block }
.nestcount > li:before { content: counters(item, ".") " "; counter-increment: item }