/* Set element that can be painted to overflow hidden */
.paint-area {
    overflow: hidden;
	position: relative;
	-webkit-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.paint--active.paint-area {
	-webkit-transition: none;
	transition: none;
}

.paint--active.paint-area--text {
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.paint-area.paint-area--highlight:not(.paint-area--text) {
	box-shadow: inset 0 0 0 3px rgb(133,125,255);
}

.paint-area--text.paint-area--highlight {
	text-shadow: 
		-1px -1px 0 rgba(133,125,255,0.5),
		1px -1px 0 rgba(133,125,255,0.5),
		-1px 1px 0 rgba(133,125,255,0.5),
		1px 1px 0 rgba(133,125,255,0.5);
}

.paint-area * {
/*	position: relative; */
/*	z-index: 10; */
/*	cursor: default; */
}

.paint {
	position: absolute; 
	top: 0; 
	left: 0;
	z-index: 0;
}

.paint circle {
	fill-opacity: 0;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
	-webkit-transition: -webkit-transform 0.8s, fill-opacity 0.4s;
	transition: transform 0.8s, fill-opacity 0.4s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.paint--active .paint circle {
	fill-opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

/* Customizer */
.customizer {
	z-index: 10000;
    display: inline-block;
}

.color-tool {
	list-style: none;
	margin: 0;
	padding: 0;
}

.color-tool li {
	display: block;
	margin: 5px;
    float: left;
}

.drag-element {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.drag-element:hover {
	cursor: move;
	cursor: -webkit-grab;
	cursor: grab;
}

.drag-element:active {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.drop {
	width: 30px;
	height: 30px;
	border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
	-webkit-transform: rotate3d(0,0,1,-45deg);
	transform: rotate3d(0,0,1,-45deg);
    -webkit-box-shadow: 0px 0px 5px 0px #ddd;
-moz-box-shadow: 0px 0px 5px 0px #ddd;
box-shadow: 0px 0px 5px 0px #ddd;
}

.drop-helper-1,
.drop-helper-2,
.drop-helper-3,
.drop-helper-4 {
	position: absolute;
	display: block;
	width: 6px;
	height: 6px;
	bottom: -10px;
	left: 50%;
	margin-left: -3px;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
}

.drop-helper-3,
.drop-helper-4 {
	width: 10px;
	height: 10px;
	margin-left: -5px;
}

.drop-helper-1 {
	-webkit-transform-origin: -33px 50%;
	transform-origin: -33px 50%;
}

.drop-helper-2 {
	-webkit-transform-origin: 45px 50%;
	transform-origin: 45px 50%;
}

.drop-helper-3 {
	-webkit-transform-origin: -18px 50%;
	transform-origin: -18px 50%;
}

.drop-helper-4 {
	-webkit-transform-origin: 30px 50%;
	transform-origin: 30px 50%;
}

.drag-element--dropped .drop {
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
	-webkit-transition-timing-function: cubic-bezier(0.6,0.04,0.98,0.335);
	transition-timing-function: cubic-bezier(0.6,0.04,0.98,0.335);
	-webkit-transform: translate3d(0,25px,0) rotate3d(0,0,1,-45deg) scale3d(0.2,0.2,1);
	transform: translate3d(0,25px,0) rotate3d(0,0,1,-45deg) scale3d(0.2,0.2,1);
	opacity: 0;
}

.drag-element--dropped .drop-helper-1,
.drag-element--dropped .drop-helper-3 {
	-webkit-animation: drop-anim-1 0.3s ease-out 0.15s forwards;
	animation: drop-anim-1 0.3s ease-out 0.15s forwards;
}

.drag-element--dropped .drop-helper-2,
.drag-element--dropped .drop-helper-4  {
	-webkit-animation: drop-anim-2 0.3s ease-out 0.15s forwards;
	animation: drop-anim-2 0.3s ease-out 0.15s forwards;
}

.drag-element--dropped .drop-helper-4 {
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
}

@-webkit-keyframes drop-anim-1 {
	0% {
		-webkit-transform: rotate3d(0,0,1,5deg);
		transform: rotate3d(0,0,1,5deg);
		opacity: 0;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		-webkit-transform: rotate3d(0,0,1,-90deg);
		transform: rotate3d(0,0,1,-90deg);
		opacity: 0;
	}
}

@keyframes drop-anim-1 {
	0% {
		-webkit-transform: rotate3d(0,0,1,5deg);
		transform: rotate3d(0,0,1,5deg);
		opacity: 0;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		-webkit-transform: rotate3d(0,0,1,-90deg);
		transform: rotate3d(0,0,1,-90deg);
		opacity: 0;
	}
}

@-webkit-keyframes drop-anim-2 {
	0% {
		-webkit-transform: rotate3d(0,0,1,-5deg);
		transform: rotate3d(0,0,1,-5deg);
		opacity: 0;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		-webkit-transform: rotate3d(0,0,1,90deg);
		transform: rotate3d(0,0,1,90deg);
		opacity: 0;
	}
}

@keyframes drop-anim-2 {
	0% {
		-webkit-transform: rotate3d(0,0,1,-5deg);
		transform: rotate3d(0,0,1,-5deg);
		opacity: 0;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		-webkit-transform: rotate3d(0,0,1,90deg);
		transform: rotate3d(0,0,1,90deg);
		opacity: 0;
	}
}

.drag-element--dropped-text .drop {
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	opacity: 0;
}

.reset-button {
	background: none;
	padding: 0;
	margin: 0;
	border: none;
	width: 30px;
	height: 30px;
	margin: 0;
	color: transparent;
	font-size: 0px;
	background: url(/images/content-tools/drop_reset.svg) no-repeat center center;
	background-size: 100%;
}