#tablo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}
#tablo-image {
    width: 100%;
    height: auto;
}


#tumblernitsa {
    text-indent: 0;
    display: flex;
    margin: 0 auto;
    justify-content: center;
}
/* Hide the browser's default checkbox */
.tumbler input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
.tumbler input:checked ~ .tumbler-image {
    background-image: url("../image/content/14300/t1r_on.png");
}

.tumbler-image {
    width: 3rem;
    height: calc(3rem * 1.25);
    display: block;
    margin: 0 0.3rem;
    /* position: absolute; */
    background-image: url("../image/content/14300/t1r_off.png");
    background-size: contain;
}

#indicator {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}
#indicator-image {
    width: 75%;
}

.redSplash {
    animation: redAni 0.4s ease-out;
}
@keyframes redAni {
    from { 
        background-color: rgba(188, 111, 95, .8);
    }
    to {
        background-color: rgba(188, 111, 95, 0);
    }
}

.greenOn { animation: greenAni 1.5s ease-out; }
@keyframes greenAni {
    from { 
        background-color: rgba(188, 111, 95, 0);
    }
    to {
        background-color: rgba(180, 188, 95, 0.8);
    }
}

.bgColorGreen { background-color: rgba(180, 188, 95, 0.8); }

.zametki {
    text-indent: 0;
    line-height: 1;
    color: #767676;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 0;
}


/* ---------- P C   &    T A B L E T S ---------- */
/* Unless you have a legitimate reason to restrict the style sheets based on the resolution */
/* and not the size of the viewport, then just use min-width/max-width */
/*  and avoid min-device-width/max-device-width */
@media only screen and (min-width: 480px) {
    #tablo-image {
        max-width: 28rem;
        height: auto;
    }
    #indicator-image {
        max-width: 27rem;
    }
}