html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,img,form,label,table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1.2em;letter-spacing:1.2;font-size:13px;color:#222;background:#e1e1e1;font-family:verdana,san-serif;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
.clear{clear:both;}
*:focus{outline:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
header{width:90%;max-width:920px;min-width:510px;background:#fff;padding:20px 15px;margin:0 auto;margin-top:2em;border-radius:6px 6px 0 0;font-size:11px;text-align:center;color:#666;}
header .logo{background:url("logo.png") 0 0 no-repeat;width:220px;height:55px;margin:0 auto;}
main{width:90%;max-width:920px;min-width:510px;background:#fff;padding:0 15px 25px 15px;margin:0 auto;border-radius:0 0 6px 6px;}
main .strong{font-weight:600;font-style:normal;}
main .notice{padding:10px 15px;margin:0 15px;font-style:oblique;color:#856404;background-color:#fff3cd;border-color:#ffeeba;}
main .select_image{margin-top:10px;text-align:center;}
main .select_image .selection{-webkit-appearance:button;-moz-appearance:button;width:480px;text-align:center;padding:10px 0;font-size:16px;text-transform:uppercase;outline:none;border:none;color:#FFFFFF;background-color:#4CAF50;}
main .select_image .selection:hover{cursor:pointer;color:#fff!important;background-color:#009688!important;}
main .itemwindow{background:#fff;width:480px;height:360px;margin:0 auto;margin-top:10px;position:relative;border:1px solid #ccc;}
main .catwindow{background:#fff;width:350px;height:200px;margin:0 auto;margin-top:10px;position:relative;border:1px solid #ccc;}
main .itemimg{overflow:hidden;width:480px;height:360px;}
main .catimg{overflow:hidden;width:350px;height:200px;}
main .options{width:480px;margin:0 auto;text-align:center;padding-top:10px;}
main .options .show_wm{width:50%;float:left;}
main .rotation{text-align:center;margin-top:55px;}
main .rotation button{padding:10px;}
main .finish{padding-top:12px;text-align:center;}
main .finish .copy{cursor:pointer;-webkit-appearance:button;-moz-appearance:button;padding:10px 30px;text-transform:uppercase;outline:none;color:#004085;background-color:#cce5ff;border:1px solid #b8daff;}
main .finish .copy:hover{background-color:#2196F3;color:#fff;}
main .finish .reset{cursor:pointer;-webkit-appearance:button;-moz-appearance:button;margin-left:10px;padding:10px 30px;text-transform:uppercase;outline:none;color:#000;background-color:#fff;border:1px solid #000;}
content.overlay{display:none;z-index:300;background:#000;background:rgba(0,0,0,0.7);position:fixed;top:0;left:0;width:100%;height:100%;}
content.overlay .output{margin:0 auto;margin-top:240px;background:#fff;width:512px;height:392px;}
content.overlay .outputcat{margin:0 auto;margin-top:240px;background:#fff;width:382px;height:232px;}
content.overlay .output_buffer{padding:15px;}
content.overlay .output_buffer .surround{border:1px solid #ccc;}
content.overlay .output_buffer .surround .image{position:relative;}
content.overlay .output_buffer .surround .buffer{width:480px;height:360px;background:#fff;display:block;}
content.overlay .output_buffer .surround .buffercat{width:350px;height:200px;background:#fff;display:block;}
content.overlay .output_buffer .surround .watermark{z-index:310;position:absolute;width:162px;height:42px;bottom:25px;right:11px;background:url("watermark.png") 0 0 no-repeat;}
content.overlay .finish{background:#000;margin:0 auto;text-align:center;width:512px;padding:20px 0;}
content.overlay .finishcat{background:#000;margin:0 auto;text-align:center;width:382px;padding:20px 0;}
content.overlay .copy{cursor:pointer;margin-right:10px;padding:10px 30px;text-transform:uppercase;outline:none;color:#004085;background-color:#cce5ff;border:1px solid #b8daff;}
content.overlay .close{cursor:pointer;padding:10px 30px;text-transform:uppercase;outline:none;color:#fff;background-color:#444;border:1px solid #fff;}
content.overlay .exit{background:#000;background:rgba(0,0,0,0.6);cursor:pointer;position:absolute;color:#fff;padding:20px;top:0;right:0;}
content.overlay .renderedcontent{z-index:320;position:absolute;top:256px;width:480px;height:360px;background:#fff;margin:0 auto;left:0;right:0;}
content.overlay .renderedcontentcat{z-index:320;position:absolute;top:256px;width:350px;height:200px;background:#fff;margin:0 auto;left:0;right:0;}
footer{text-align:center;font-size:11px;color:#aaa;padding-top:10px;margin-bottom:4em;}
footer a{color:#4b6396;text-decoration:none;}
.croppie-container{width:100%;height:100%;}
.croppie-container .cr-image{z-index:-1;position:absolute;top:0;left:0;transform-origin:0 0;max-height:none;max-width:none;}
.croppie-container .cr-boundary{position:relative;overflow:hidden;margin:0 auto;z-index:1;width:100%;height:100%;}
.croppie-container .cr-viewport,.croppie-container .cr-resizer{cursor:pointer;position:absolute;margin:auto;top:0;bottom:0;right:0;left:0;box-shadow:0 0 2000px 2000px rgba(0, 0, 0, 0.5);z-index:0;}
.croppie-container .cr-resizer{z-index:2;box-shadow:none;pointer-events:none;cursor:pointer;}
.croppie-container .cr-resizer-vertical,.croppie-container .cr-resizer-horisontal{position:absolute;pointer-events:all;}
.croppie-container .cr-resizer-vertical:after,.croppie-container .cr-resizer-horisontal:after{display:block;position:absolute;box-sizing:border-box;border:1px solid black;background:#fff;width:10px;height:10px;content:'';}
.croppie-container .cr-resizer-vertical{bottom:-5px;cursor:row-resize;width:100%;height:10px;}
.croppie-container .cr-resizer-vertical:after{left:50%;margin-left:-5px;}
.croppie-container .cr-resizer-horisontal{right:-5px;cursor:col-resize;width:10px;height:100%;}
.croppie-container .cr-resizer-horisontal:after{top:50%;margin-top:-5px;}
.croppie-container .cr-original-image{display:none;}
.croppie-container .cr-vp-circle{border-radius:50%;}
.croppie-container .cr-overlay{z-index:1;position:absolute;cursor:move;touch-action:none;}
.croppie-container .cr-slider-wrap{width:75%;margin:15px auto;text-align:center;}
.croppie-result{position:relative;overflow:hidden;}
.croppie-result img{position:absolute;}
.croppie-container .cr-image,.croppie-container .cr-overlay,.croppie-container .cr-viewport{-o-transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);}
.cr-slider{-webkit-appearance:none;-moz-appearance:none;width:300px;max-width:100%;padding-top:0;padding-bottom:8px;background-color:transparent;}
.cr-slider::-webkit-slider-runnable-track{width:100%;height:3px;background:#ccc;background:rgba(0,0,0,0.5);border:0;border-radius:3px;}
.cr-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:-6px;}
.cr-slider:focus{outline:none;}
.cr-slider::-moz-range-track{width:100%;height:3px;background:#ccc;background:rgba(0,0,0,0.5);border:0;border-radius:3px;}
.cr-slider::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:-6px;}
.cr-slider::-moz-focusring{outline:1px solid white;outline-offset:-1px;}
.cr-slider::-ms-track{width:100%;height:5px;background:transparent;border-color:transparent;border-width:6px 0;color:transparent;}
.cr-slider::-ms-fill-lower{background:#ccc;background:rgba(0,0,0,0.5);border-radius:10px;}
.cr-slider::-ms-fill-upper{background:#ccc;background:rgba(0,0,0,0.5);border-radius:10px;}
.cr-slider::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:1px;}
.cr-slider:focus:-ms-fill-lower{background:#ccc;background:rgba(0,0,0,0.5);}
.cr-slider:focus:-ms-fill-upper{background:#ccc;background:rgba(0,0,0,0.5);}
.cr-rotate-controls{position:absolute;bottom:5px;left:5px;z-index:1;}
.cr-rotate-controls button{border:0;background:none;}
.cr-rotate-controls i:before{display:inline-block;font-style:normal;font-weight:900;font-size:22px;}
.cr-rotate-l i:before{content:'↺';}
.cr-rotate-r i:before{content:'↻';}