#puzzleHolder { position:relative; }
.box { -webkit-transition: left .25s ease-in-out, top .25s ease-in-out; position:absolute; }
.box.hidden { opacity:0 }

/* first row & col always same */
#puzzleHolder .col1 { left: 0%; }
#puzzleHolder .row1 { top: 0%; }
#puzzleHolder .c1 { background-position-x: 0%; }
#puzzleHolder .r1 { background-position-y: 0%; }

/* 3 x 3 grids */
 #puzzleHolder.size3 .box { height: 33.333333333333%; width: 33.333333333333%; }
 #puzzleHolder.size3 .col2 { left: 33.333333333333%; }
 #puzzleHolder.size3 .row2 { top: 33.333333333333%; }
 #puzzleHolder.size3 .c2 { background-position-x: 50%; }
 #puzzleHolder.size3 .r2 { background-position-y: 50%; }
 #puzzleHolder.size3 .col3 { left: 66.666666666667%; }
 #puzzleHolder.size3 .row3 { top: 66.666666666667%; }
 #puzzleHolder.size3 .c3 { background-position-x: 100%; }
 #puzzleHolder.size3 .r3 { background-position-y: 100%; }
/* 4 x 4 grids */
 #puzzleHolder.size4 .box { height: 25%; width: 25%; }
 #puzzleHolder.size4 .col2 { left: 25%; }
 #puzzleHolder.size4 .row2 { top: 25%; }
 #puzzleHolder.size4 .c2 { background-position-x: 33.333333333333%; }
 #puzzleHolder.size4 .r2 { background-position-y: 33.333333333333%; }
 #puzzleHolder.size4 .col3 { left: 50%; }
 #puzzleHolder.size4 .row3 { top: 50%; }
 #puzzleHolder.size4 .c3 { background-position-x: 66.666666666667%; }
 #puzzleHolder.size4 .r3 { background-position-y: 66.666666666667%; }
 #puzzleHolder.size4 .col4 { left: 75%; }
 #puzzleHolder.size4 .row4 { top: 75%; }
 #puzzleHolder.size4 .c4 { background-position-x: 100%; }
 #puzzleHolder.size4 .r4 { background-position-y: 100%; }
/* 5 x 5 grids */
 #puzzleHolder.size5 .box { height: 20%; width: 20%; }
 #puzzleHolder.size5 .col2 { left: 20%; }
 #puzzleHolder.size5 .row2 { top: 20%; }
 #puzzleHolder.size5 .c2 { background-position-x: 25%; }
 #puzzleHolder.size5 .r2 { background-position-y: 25%; }
 #puzzleHolder.size5 .col3 { left: 40%; }
 #puzzleHolder.size5 .row3 { top: 40%; }
 #puzzleHolder.size5 .c3 { background-position-x: 50%; }
 #puzzleHolder.size5 .r3 { background-position-y: 50%; }
 #puzzleHolder.size5 .col4 { left: 60%; }
 #puzzleHolder.size5 .row4 { top: 60%; }
 #puzzleHolder.size5 .c4 { background-position-x: 75%; }
 #puzzleHolder.size5 .r4 { background-position-y: 75%; }
 #puzzleHolder.size5 .col5 { left: 80%; }
 #puzzleHolder.size5 .row5 { top: 80%; }
 #puzzleHolder.size5 .c5 { background-position-x: 100%; }
 #puzzleHolder.size5 .r5 { background-position-y: 100%; }
/* 6 x 6 grids */
 #puzzleHolder.size6 .box { height: 16.666666666667%; width: 16.666666666667%; }
 #puzzleHolder.size6 .col2 { left: 16.666666666667%; }
 #puzzleHolder.size6 .row2 { top: 16.666666666667%; }
 #puzzleHolder.size6 .c2 { background-position-x: 20%; }
 #puzzleHolder.size6 .r2 { background-position-y: 20%; }
 #puzzleHolder.size6 .col3 { left: 33.333333333333%; }
 #puzzleHolder.size6 .row3 { top: 33.333333333333%; }
 #puzzleHolder.size6 .c3 { background-position-x: 40%; }
 #puzzleHolder.size6 .r3 { background-position-y: 40%; }
 #puzzleHolder.size6 .col4 { left: 50%; }
 #puzzleHolder.size6 .row4 { top: 50%; }
 #puzzleHolder.size6 .c4 { background-position-x: 60%; }
 #puzzleHolder.size6 .r4 { background-position-y: 60%; }
 #puzzleHolder.size6 .col5 { left: 66.666666666667%; }
 #puzzleHolder.size6 .row5 { top: 66.666666666667%; }
 #puzzleHolder.size6 .c5 { background-position-x: 80%; }
 #puzzleHolder.size6 .r5 { background-position-y: 80%; }
 #puzzleHolder.size6 .col6 { left: 83.333333333333%; }
 #puzzleHolder.size6 .row6 { top: 83.333333333333%; }
 #puzzleHolder.size6 .c6 { background-position-x: 100%; }
 #puzzleHolder.size6 .r6 { background-position-y: 100%; }