@charset "utf-8";

.obshiy_block {
text-align: center;
}

.knopka_img {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    display: inline-block;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    padding: 10px;
}

.knopka_img:hover img {
    box-shadow: 0 0 12px #111;
}

.knopka_img img {
    display: block;
    box-shadow: 3px 3px 13px #111;
    border-radius: 4px;
    transition: all 0.5s linear 0s;
    width: 135px;
}

.knopka_img:hover:before {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 36, 0.22);
    top: 10px;
    right: 10px;
    /* -webkit-transform: rotate(0deg); */
    line-height: 100%;
    opacity: 1;
    box-shadow: 0 -70px 60px rgba(0, 0, 0, 0.48) inset ,0 70px 60px rgba(0, 0, 0, 0.48) inset;
}

.knopka_img:before {
    display: block;
    content: '';
    transition: all 0.5s linear 0s;
    position: absolute;
    left: 50%;
    right: 50%;
    top: 50%;
    overflow: hidden;
    bottom: 50%;
    -webkit-transform: rotate(360deg);
    opacity: 0;    
}

.knopka_img .opisanie {
    display: block;
    transition: all 0.75s linear 0s;
    position: absolute;
    left: 40%;
    top: 24%;
    opacity: 0; 
    margin: -10px 0 0 -40px;
    z-index: 111;
    color: #fff;
    font: bold 13px Tahoma, Geneva, sans-serif;
    line-height: 20px;
}

.knopka_img:hover .opisanie {
    opacity: 1; 
}

span.opisanie p {
margin: 0;
}

.knopka_img .imya {
display: block;
transition: all 0.75s linear 0s;
position: absolute;
left: 10px;
right: 10px;
top: 72%;
opacity: 1;
/* margin: 0px 0 0px 0px; */
z-index: 111;
color: #fff;
font: bold 13px Tahoma, Geneva, sans-serif;
line-height: 20px;
background: rgba(0, 0, 0, 0.37);
padding: 2px;
}

.knopka_img:hover .imya {
    opacity: 0; 
}

.txt_block {
text-align: justify;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.26);
padding: 10px;
margin: 20px 0px;
background: rgba(141, 207, 171, 0.22);
}

span.cvet {
color: #0BFCFC;
}