.m-folder__item {
    width: 100%;
    display: block;
    text-align: center;
    color: currentColor;
    text-decoration: none;
    position: relative;
}

.m-folder__item b {
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 25%;
    height: 25%
}

.m-folder__item b:first-child {
    top: 0;
    left: 0
}

.m-folder__item b:first-child:focus ~ .m-folder__item-content .m-folder__item-image,.m-folder__item b:first-child:hover ~ .m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(-10%,-10%);
    -ms-transform: translate(-10%,-10%);
    -o-transform: translate(-10%,-10%);
    transform: translate(-10%,-10%)
}

.m-folder__item b:first-child:focus ~ .m-folder__item-content .m-folder__item-icon,.m-folder__item b:first-child:hover ~ .m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(-12%,-12%);
    -ms-transform: translate(-12%,-12%);
    -o-transform: translate(-12%,-12%);
    transform: translate(-12%,-12%)
}

.m-folder__item b:nth-child(2) {
    top: 0;
    left: 25%
}

.m-folder__item b:nth-child(2):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(2):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(-5%,-10%);
    -ms-transform: translate(-5%,-10%);
    -o-transform: translate(-5%,-10%);
    transform: translate(-5%,-10%)
}

.m-folder__item b:nth-child(2):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(2):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(-7%,-12%);
    -ms-transform: translate(-7%,-12%);
    -o-transform: translate(-7%,-12%);
    transform: translate(-7%,-12%)
}

.m-folder__item b:nth-child(3) {
    top: 25%;
    left: 0
}

.m-folder__item b:nth-child(3):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(3):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(-10%,-5%);
    -ms-transform: translate(-10%,-5%);
    -o-transform: translate(-10%,-5%);
    transform: translate(-10%,-5%)
}

.m-folder__item b:nth-child(3):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(3):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(-12%,-7%);
    -ms-transform: translate(-12%,-7%);
    -o-transform: translate(-12%,-7%);
    transform: translate(-12%,-7%)
}

.m-folder__item b:nth-child(4) {
    top: 25%;
    left: 25%
}

.m-folder__item b:nth-child(4):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(4):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(-5%,-5%);
    -ms-transform: translate(-5%,-5%);
    -o-transform: translate(-5%,-5%);
    transform: translate(-5%,-5%)
}

.m-folder__item b:nth-child(4):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(4):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(-7%,-7%);
    -ms-transform: translate(-7%,-7%);
    -o-transform: translate(-7%,-7%);
    transform: translate(-7%,-7%)
}

.m-folder__item b:nth-child(5) {
    top: 0;
    right: 25%
}

.m-folder__item b:nth-child(5):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(5):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(5%,-10%);
    -ms-transform: translate(5%,-10%);
    -o-transform: translate(5%,-10%);
    transform: translate(5%,-10%)
}

.m-folder__item b:nth-child(5):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(5):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(7%,-12%);
    -ms-transform: translate(7%,-12%);
    -o-transform: translate(7%,-12%);
    transform: translate(7%,-12%)
}

.m-folder__item b:nth-child(6) {
    top: 0;
    right: 0
}

.m-folder__item b:nth-child(6):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(6):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(10%,-10%);
    -ms-transform: translate(10%,-10%);
    -o-transform: translate(10%,-10%);
    transform: translate(10%,-10%)
}

.m-folder__item b:nth-child(6):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(6):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(12%,-12%);
    -ms-transform: translate(12%,-12%);
    -o-transform: translate(12%,-12%);
    transform: translate(12%,-12%)
}

.m-folder__item b:nth-child(7) {
    top: 25%;
    right: 25%
}

.m-folder__item b:nth-child(7):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(7):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(5%,-5%);
    -ms-transform: translate(5%,-5%);
    -o-transform: translate(5%,-5%);
    transform: translate(5%,-5%)
}

.m-folder__item b:nth-child(7):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(7):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(7%,-7%);
    -ms-transform: translate(7%,-7%);
    -o-transform: translate(7%,-7%);
    transform: translate(7%,-7%)
}

.m-folder__item b:nth-child(8) {
    top: 25%;
    right: 0
}

.m-folder__item b:nth-child(8):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(8):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(10%,-5%);
    -ms-transform: translate(10%,-5%);
    -o-transform: translate(10%,-5%);
    transform: translate(10%,-5%)
}

.m-folder__item b:nth-child(8):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(8):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(12%,-7%);
    -ms-transform: translate(12%,-7%);
    -o-transform: translate(12%,-7%);
    transform: translate(12%,-7%)
}

.m-folder__item b:nth-child(9) {
    bottom: 25%;
    left: 0
}

.m-folder__item b:nth-child(9):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(9):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(-10%,5%);
    -ms-transform: translate(-10%,5%);
    -o-transform: translate(-10%,5%);
    transform: translate(-10%,5%)
}

.m-folder__item b:nth-child(9):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(9):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(-12%,7%);
    -ms-transform: translate(-12%,7%);
    -o-transform: translate(-12%,7%);
    transform: translate(-12%,7%)
}

.m-folder__item b:nth-child(10) {
    bottom: 25%;
    left: 25%
}

.m-folder__item b:nth-child(10):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(10):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(-5%,5%);
    -ms-transform: translate(-5%,5%);
    -o-transform: translate(-5%,5%);
    transform: translate(-5%,5%)
}

.m-folder__item b:nth-child(10):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(10):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(-7%,7%);
    -ms-transform: translate(-7%,7%);
    -o-transform: translate(-7%,7%);
    transform: translate(-7%,7%)
}

.m-folder__item b:nth-child(11) {
    bottom: 0;
    left: 0
}

.m-folder__item b:nth-child(11):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(11):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(-10%,10%);
    -ms-transform: translate(-10%,10%);
    -o-transform: translate(-10%,10%);
    transform: translate(-10%,10%)
}

.m-folder__item b:nth-child(11):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(11):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(-12%,12%);
    -ms-transform: translate(-12%,12%);
    -o-transform: translate(-12%,12%);
    transform: translate(-12%,12%)
}

.m-folder__item b:nth-child(12) {
    bottom: 0;
    left: 25%
}

.m-folder__item b:nth-child(12):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(12):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(-5%,10%);
    -ms-transform: translate(-5%,10%);
    -o-transform: translate(-5%,10%);
    transform: translate(-5%,10%)
}

.m-folder__item b:nth-child(12):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(12):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(-7%,12%);
    -ms-transform: translate(-7%,12%);
    -o-transform: translate(-7%,12%);
    transform: translate(-7%,12%)
}

.m-folder__item b:nth-child(13) {
    bottom: 25%;
    right: 25%
}

.m-folder__item b:nth-child(13):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(13):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(5%,5%);
    -ms-transform: translate(5%,5%);
    -o-transform: translate(5%,5%);
    transform: translate(5%,5%)
}

.m-folder__item b:nth-child(13):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(13):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(7%,7%);
    -ms-transform: translate(7%,7%);
    -o-transform: translate(7%,7%);
    transform: translate(7%,7%)
}

.m-folder__item b:nth-child(14) {
    bottom: 25%;
    right: 0
}

.m-folder__item b:nth-child(14):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(14):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(10%,5%);
    -ms-transform: translate(10%,5%);
    -o-transform: translate(10%,5%);
    transform: translate(10%,5%)
}

.m-folder__item b:nth-child(14):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(14):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(12%,7%);
    -ms-transform: translate(12%,7%);
    -o-transform: translate(12%,7%);
    transform: translate(12%,7%)
}

.m-folder__item b:nth-child(15) {
    bottom: 0;
    right: 25%
}

.m-folder__item b:nth-child(15):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(15):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(5%,10%);
    -ms-transform: translate(5%,10%);
    -o-transform: translate(5%,10%);
    transform: translate(5%,10%)
}

.m-folder__item b:nth-child(15):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(15):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(7%,12%);
    -ms-transform: translate(7%,12%);
    -o-transform: translate(7%,12%);
    transform: translate(7%,12%)
}

.m-folder__item b:nth-child(16) {
    bottom: 0;
    right: 0
}

.m-folder__item b:nth-child(16):focus~.m-folder__item-content .m-folder__item-image,.m-folder__item b:nth-child(16):hover~.m-folder__item-content .m-folder__item-image {
    -webkit-transform: translate(10%,10%);
    -ms-transform: translate(10%,10%);
    -o-transform: translate(10%,10%);
    transform: translate(10%,10%)
}

.m-folder__item b:nth-child(16):focus~.m-folder__item-content .m-folder__item-icon,.m-folder__item b:nth-child(16):hover~.m-folder__item-content .m-folder__item-icon {
    -webkit-transform: translate(12%,12%);
    -ms-transform: translate(12%,12%);
    -o-transform: translate(12%,12%);
    transform: translate(12%,12%)
}



.m-folder__item:focus .m-folder__item-image:before,.m-folder__item:hover .m-folder__item-image:before {
    opacity: 0
}

.m-folder__item-content {
    height: 100%;
    padding: 0 1% 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    position: relative;
    z-index: 0;
    -webkit-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out
}

.m-folder__item--close {
    display: none
}

.m-folder__item-pics {
    position: relative;
    font-size: 0;
    margin-bottom: 30px;
    display: block
}

.m-folder__item-image {
    width: 165px;
    height: 165px;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    -webkit-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out
}

.m-folder__item-image:before {
    content: "";
    display: block;
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 100%;
    background-color: #202020;
    -webkit-transition: all .4s linear;
    -o-transition: .4s linear all;
    transition: all .4s linear
}

.m-folder__item-icon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 0;
    -webkit-transition: all .6s ease-out;
    -o-transition: all .6s ease-out;
    transition: all .6s ease-out
}

.m-folder__item-icon img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    max-width: 170px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.m-folder__item-name {
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 35px;
    pointer-events: none
}