.puzzle {
	width:400px;
	height:400px;
    position:relative;
    background-size:100% 100%;
}
.puzzle div {
	width:100px;
	height:100px;
	background-repeat:no-repeat;
    position:absolute;
    background-size:400% 400%;
}
.sq1 {
	background-position:0 0;
}
.sq2 {
	background-position:33% 0;
}
.sq3 {
	background-position:66% 0;
}
.sq4 {
	background-position:100% 0;
}
.sq5 {
	background-position:0 33%;
}
.sq6 {
	background-position:33% 33%;
}
.sq7 {
	background-position:66% 33%;
}
.sq8 {
	background-position:100% 33%;
}
.sq9 {
	background-position:0 66%;
}
.sq10 {
	background-position:33% 66%;
}
.sq11 {
	background-position:66% 66%;
}
.sq12 {
	background-position:100% 66%;
}
.sq13 {
	background-position:0 100%;
}
.sq14 {
	background-position:33% 100%;
}
.sq15 {
	background-position:66% 100%;
}
.sq16 {
	background-position:100% 100%;
}
div[data-pos="1"] {
	top:0;
	left:0;
}
div[data-pos="2"] {
	top:0;
	left:25%;
}
div[data-pos="3"] {
	top:0;
	left:50%;
}
div[data-pos="4"] {
	top:0;
	left:75%;
}
div[data-pos="5"] {
	top:25%;
	left:0;
}
div[data-pos="6"] {
	top:25%;
	left:25%;
}
div[data-pos="7"] {
	top:25%;
	left:50%;
}
div[data-pos="8"] {
	top:25%;
	left:75%;
}
div[data-pos="9"] {
	top:50%;
	left:0;
}
div[data-pos="10"] {
	top:50%;
	left:25%;
}
div[data-pos="11"] {
	top:50%;
	left:50%;
}
div[data-pos="12"] {
	top:50%;
	left:75%;
}
div[data-pos="13"] {
	top:75%;
	left:0;
}
div[data-pos="14"] {
	top:75%;
	left:25%;
}
div[data-pos="15"] {
	top:75%;
	left:50%;
}
div[data-pos="16"] {
	top:75%;
	left:75%;
}
.pointer {
	background-image:none !important;
	background-color:#fff;
}