/* sticker */

.sticker-book {
    position: relative;
    width: 100%;
}

.sticker {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: grab;
	z-index: 5000;

}

.sticker.size300x175 {
	width: 300px;
	height: 175px;
}

.sticker.size200x200 {
	width: 200px;
	height: 200px;
}

.sticker.size275x275 {
	width: 275px;
	height: 275px;
}


.sticker .sticker-inner {
    position: relative;
}


.sticker .sticker-inner img.front {
	position: relative;
    z-index: 1;

}

.sticker .sticker-inner img.shadow {
	position: absolute;
    top: 10px;
    left: 10px;
}

.sticker.ui-draggable-dragging, .sticker.temp-shake {
	animation-iteration-count: infinite;
	animation-direction: alternate;
	transform-origin: 50% 50%;
	animation-delay: -0.22s;
	animation-duration: .3s;
}

.sticker.ui-draggable-dragging .sticker-inner img.front {
    top: -10px;
    left: -10px;
}

.sticker.ui-draggable-dragging {
	animation-name: wiggle;
}

.sticker.temp-shake {
	animation-name: subtle-wiggle;
}

.sparkle {
	position: absolute;
    z-index: 6000;
}

@keyframes wiggle {
	0% {
		transform: rotate(1.35deg);
		animation-timing-function: ease-in;
	}
	50% {
		transform: rotate(-1.85deg);
		animation-timing-function: ease-out;
	}
}


@keyframes subtle-wiggle {
	0% {
		transform: rotate(.5deg);
		animation-timing-function: ease-in;
	}
	50% {
		transform: rotate(-.75deg);
		animation-timing-function: ease-out;
	}
}

/* Laptops */

@media (max-width: 1300px) {
	
	.sticker.size200x200 {
        width: 150px;
        height: auto;
    }
	
	.sticker.size275x275 {
        width: 225px;
        height: auto;
    }
	
	.sticker.size300x175 {
        width: 250px;
        height: auto;
    }
	
	.sticker .sticker-inner img.shadow {
		top: 7px;
		left: 7px;
	}

	.sticker.ui-draggable-dragging .sticker-inner img.front {
		top: -7px;
		left: -7px;
	}

}

/* Medium Screens */

@media (max-width: 900px) {

	.sticker.size200x200 {
        width: 150px;
        height: auto;
    }
	
	.sticker.size275x275 {
        width: 200px;
        height: auto;
    }
	
	.sticker.size300x175 {
        width: 215px;
        height: auto;
    }
	
	.sticker.ui-draggable-dragging, .sticker.temp-shake {
		animation-duration: .4s;
	}
	
	@keyframes wiggle {
		0% { transform: rotate(1.85deg); }
		50% { transform: rotate(-2.35deg); }
	}

	@keyframes subtle-wiggle {
		0% { transform: rotate(1deg); }
		50% { transform: rotate(-1.25deg); }
	}
	
}

/* Small Screens */

@media (max-width: 500px) {
	
	.sticker.size200x200 {
        width: 75px;
        height: auto;
    }
	
	.sticker.size275x275 {
        width: 100px;
        height: auto;
    }
	
	.sticker.size300x175 {
        width: 125px;
        height: auto;
    }
	
	.sticker .sticker-inner img.shadow {
		top: 5px;
		left: 5px;
	}

	.sticker.ui-draggable-dragging .sticker-inner img.front {
		top: -5px;
		left: -5px;
	}

}