body { counter-reset: slide-count; }
#slider-edit { font-family: 'Avenir-Book', sans-serif; }
.slide { border: 1px solid #000; }
.input-icon { cursor: pointer; }
.input-icon:hover { background: #ddd; }
.input-icon i { padding-left: 5px; }
.wrapper, .wrapper-top { background: #f7f7f7;border: 1px solid #ddd;position: relative; }
.wrapper .settings { padding: 2rem; }
.new, .new-first { background: #036; }
.new:hover, .new-first:hover { background: #1e5893; }
.new-first { margin-right: 2px !important; }
.heading { background: #e5e5e5;color: #036;font-weight: bold;padding: 10px;margin: 0 2rem;display: inline-block; }
.heading2 { background: #e5e5e5;color: #036;font-weight: bold;font-size: 16px;padding: 10px;text-transform: uppercase;display: inline-block; }
.image-preview .image { max-height: 190px;overflow: hidden;display: flex;position: relative; }
.image-preview img { width: 100%;object-fit: contain; }
.dimensions { background: #f2f2f2;border-top: 1px solid #cccccc;text-align: center;padding: 1rem 0;font-size: 1.1em;font-style: italic; }
.slide-item { counter-increment: slide-count;margin-bottom: 4rem;border: 1px solid #c8c8c8;box-shadow: 0 1px 5px rgba(0,0,0, 0.14); }
.slide-item .slide-content { padding: 2rem; }
.slide-item .slide-content .h3 { margin-bottom: 10px; }
.slide-item.shake { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px; }
.image em, fieldset em { color: #036; }
.wrapper-top .heading2:after { content: " #" counter(slide-count); }
.save-file { background: green;margin: 2px; }
.actions { float: right;margin-right: 1rem; }
.actions .delete { font-size: 18px;padding: 1px 5px;margin-top: 3px; }
.actions .save-file { font-size: 14px;padding: 4px 8px;margin-top: 7px; }
.error { display: none; }
fieldset { padding: 2rem;margin: 1rem 0 0; }
fieldset legend { padding: 0 10px;margin-left: -10px; }
.sort { position: absolute;left: -25px; }
.sort .up, .sort .down { font-size: 30px;height: 22px;width: 19px;line-height: 1;cursor: pointer; }
.sort .up { margin-top: -5px; }
.circle-loader { margin: 0 0 0 10px;display:none;border: 2px solid rgba(0, 0, 0, 0.2);border-left-color: #5cb85c;animation-name: loader-spin;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: linear;position: relative;vertical-align: middle; }
.circle-loader, .circle-loader:after { border-radius: 50%;width: 2em;height: 2em; }
.actions .circle-loader { margin: 5px 10px 0 0; }
.load-complete { -webkit-animation: none;animation: none;border-color: #5cb85c; transition: border 500ms ease-out; }
.checkmark { display: none;	}
.checkmark.draw:after {	animation-duration: 800ms;animation-timing-function: ease;animation-name: checkmark;transform: scaleX(-1) rotate(135deg); }
.checkmark:after { opacity: 1;height: 1.2em;width: 0.5em;transform-origin: left top;border-right: 2px solid #5cb85c;border-top: 2px solid #5cb85c;content: '';left: 4px;top: 1em;position: absolute; }
.image-preview .image.gradient-light:after,.image-preview .image.gradient-dark:after { content: "";position: absolute;width: 100%;bottom: 0;left: 0;height: 100%; }
.image-preview .image.gradient-light:after { opacity: .7; }
.image-preview .image.gradient-dark:after { opacity: 1; }
.image-preview .image.gradient-color-black:after { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.9)); }
.image-preview .image.gradient-color-gray:after { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #6c6c6c); }
.image-preview .image.gradient-color-blue:after { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(26, 69, 139, 0.9));	}
.image-preview .image.gradient-color-red:after { background-image: linear-gradient(to bottom, transparent 60%, rgba(133, 18, 18, 0.9)); }

@keyframes loader-spin {  
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes checkmark {
	0% { height: 0;width: 0;opacity: 1; }
	20% { height: 0;width: 0.5em;opacity: 1; }
	40% { height: 1.1em;width: 0.5em;opacity: 1; }
	100% { height: 1.2em;width: 0.5em;opacity: 1; }
}
@keyframes shake {
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
	40%, 60% { transform: translate3d(4px, 0, 0); }
}