.shkatulka {
/* background: url(/images/puzzles/3/shkatulka.png) no-repeat center top; */
    width: 72vh;
    background-size: contain;
    font-size: 100%;
    height: 40vh;
    padding-top: 5vh;
    margin-top: 31vh;
    margin-left: -17.4vh;
    transform: rotate(90deg);
}


  .shkatulka .input-row {
    text-align: center;
    margin-top: -1.7vh;
}

  .shkatulka .one-stone {
position: absolute;
    top: 18vh;
    left: 9%;
}

  .shkatulka .input-row div {
width: 5vh;
    height: 8vh;
    margin-left: 4.2vh;
    position: relative;
    display: inline-block;
}

  .shkatulka .input-row .p3-o {
    border-radius: 100px;
    border: 3px solid gray;
    height: 3vh;
    width: 3vh;
    position: absolute;
    z-index: 1;
    margin: 0 auto;
    left: 0.7vh;
    top: 0.8vh;
}

  .shkatulka .input-row .stone {
    cursor: pointer;
        background: url(/images/puzzles/3/stone.svg) no-repeat center top;
        /*filter: brightness(1.5) sepia(99) hue-rotate(-70deg) saturate(5);*/
} 

  .shkatulka .input-row .rune {
    position: absolute;
    z-index: 1;
    text-align: center;
    width: 33%;
    margin: 1.5vh;
    margin-top: 27%;
}
  .shkatulka .input-row .circle {
pointer-events: none;
    border-radius: 100px;
    border: 3px solid gray;
    height: 3vh;
    width: 3vh;
    position: absolute;
    z-index: 1;
    margin: 0 auto;
    left: 0.7vh;
    top: 0.8vh;
}
  .shkatulka .input-row .p3-x {
    pointer-events: none;
    background: url(/images/puzzles/3/rune1.svg) no-repeat center top;
} 

  .shkatulka .input-row .p3-square {
    pointer-events: none;
    background: url(/images/puzzles/3/rune2.svg) no-repeat center top;
} 

  .shkatulka .input-row .rune3 {
        background: url(/images/puzzles/3/rune3.svg) no-repeat center top;
        filter: brightness(3.5) sepia(5) hue-rotate(-70deg) saturate(5);
} 



.p3-red {
    filter: brightness(2.5) sepia(30) hue-rotate(315deg) saturate(5);
}

.p3-x-blue{
    filter: brightness(3.5) sepia(99) hue-rotate(146deg) saturate(5);
}

.p3-blue {
    filter: brightness(3.5) sepia(99) hue-rotate(146deg) saturate(5);
}

.p3-yellow {
    filter: brightness(3.5) sepia(30) hue-rotate(-5deg) saturate(5);
}

.p3-cyan {
    filter: brightness(1.5) sepia(99) hue-rotate(80deg) saturate(5);
}

.p3-purple {
    filter: brightness(1.5) sepia(99) hue-rotate(-70deg) saturate(5);

}

.p3-brown {
    filter: brightness(1.5) sepia(30) hue-rotate(-5deg) saturate(5);
}

.p3-gray {
    filter: brightness(1.5) sepia(30) hue-rotate(-5deg) saturate(0);
}

.p3-white {
    filter: brightness(4.5) sepia(30) hue-rotate(-5deg) saturate(0);
}


.p3-x-red {
    filter: brightness(2.5) sepia(30) hue-rotate(315deg) saturate(5);
}


.p3-x-yellow {
    filter: brightness(3.5) sepia(30) hue-rotate(-5deg) saturate(5);
}

.p3-x-cyan {
    filter: brightness(1.5) sepia(99) hue-rotate(80deg) saturate(5);
}

.p3-x-purple {
    filter: brightness(1.5) sepia(99) hue-rotate(-70deg) saturate(5);
}

.p3-x-brown {
    filter: brightness(1.5) sepia(30) hue-rotate(-5deg) saturate(5);
}

.p3-x-gray {
    filter: brightness(1.5) sepia(30) hue-rotate(-5deg) saturate(0);
}

.p3-dark {
    filter: brightness(0.5) sepia(30) hue-rotate(-5deg) saturate(0);
}


.p3-o {
    pointer-events: none;
	z-index: 7;
    width: 27px;
    height: 27px;
    margin-left: 25px;
    margin-top: 5px;
	border: 2px solid;
    position: relative;
}

.p3-x {
    margin-top: 15%;
    margin-left: -15%;
}