@charset "UTF-8";

body,html,h1,h2,h3,h4,h5,h6,p,header,footer,section,article,div{margin: 0; box-sizing: border-box; color: #333;}
header{ margin-bottom: 40px; padding-left: 20px; min-height: 120px; width: 100%; display: table; vertical-align: middle; border-bottom: 1px solid #eee; }
header div{ min-height: 120px; display: table-cell; vertical-align: middle; }
header div h1{ margin-bottom: 10px; font-weight: 100; }
h2{ margin-left: 20px; padding: .25em 0 .25em .75em; border-left: 6px solid #eee;}
h3{ margin-left: 20px; }
#fileInputWrp{ margin-bottom: 40px; padding: 100px 20px; border: 1px dotted #666; background: #eee; width:100%; }
#fileInputWrp.dragging{ background: #428bca; border-style: solid; color: #fff; }

.hideDis{ display: none !important; }
#imgContain,
#done{ border-top: 1px solid #eee; padding-top: 40px; }
#done{ margin-top: 40px; }

#controller{ padding:30px 20px; }
#controller p{ margin-bottom: 10px;}

.button01,
.button01::before,
.button01::after,
.button02,
.button02::before,
.button02::after{transition: all 0.3s;}
.button01 { background-color: #333; border: 2px solid #333; color: #fff; line-height: 50px; cursor: pointer;}
.button01:hover { background-color: #fff; border-color: #428bca; color: #428bca; }
.button02 { border: 1px solid #15aeec; background-color: #428bca; background-image: linear-gradient(to bottom, #428bca, #2cafe3); border-radius: 4px; color: #fff; line-height: 50px; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); cursor: pointer; }
.button02:hover { border:1px solid #1090c3; background-color: #1ab0ec; background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2); }
.button02:active { background: #1a92c2; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2); color: #fff; text-shadow: 0 1px 1px rgba(255, 255, 255, .5); }

#editImgWrp{ position: relative; background: #428bca; padding:30px 20px; }
#editImgWrp canvas{ background: #eee; }

#result,
#clippedImg{ margin: 30px 20px; }
#clippedImg img{ display: inline-block; border: 1px solid #eee; }

#placeholder{ border:2px solid #ff4500; position: absolute; top:0; left:0; margin: 30px 20px; }

#loading{ width: 100%; height: 100%; position: fixed; z-index: 1; display: table; top:0; left:0;}
#loading .balls{ display: table-cell; vertical-align: middle; text-align: center;}
.balls div{ background-color: #005AA2; width: 20px; height: 20px; border-radius: 15px; display: inline-block; margin: -2px; padding: 0; }
.balls div:first-child{ animation: first-ball ease-in-out 1s infinite; }
.balls div:last-child{ animation: last-ball ease-in-out 1s infinite; animation-delay: 0.5s; }

@keyframes first-ball
{
    15%
    {
        transform: rotate(36deg) translateX(-40px);
    }
    25%
    {
        transform: rotate(45deg) translateX(-50px);
    }
    50%
    {
        transform: rotate(0deg) translateX(0px);
    }
}

@keyframes last-ball
{
    15%
    {
        transform: rotate(-36deg) translateX(40px);
    }
    25%
    {
        transform: rotate(-45deg) translateX(50px);
    }
    50%
    {
        transform: rotate(0deg) translateX(0px);
    }
}