.container
{
 width: 100%;
 max-width: 450px;
 text-align: center;
 margin: 1em auto;
 text-shadow: 0 0 0;
}
.uploadBox
{
 font-size: 1.25rem;
 position: relative;
 padding: 30px 20px;
 min-height: 500px;
}
.uploadBox.has-advanced-upload
{
 outline-offset: -10px;
 transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
.uploadBox.is-dragover
{
 outline-offset: -20px;
}
.uploadBox__icon
{
 width: auto;
 height: 80px;
 margin-left: auto;
 margin-right: auto;
 image-rendering: auto;
 -ms-interpolation-mode: bicubic;
}
.uploadBox__dragndrop, .uploadBox__icon
{
 display: none;
}
.uploadBox.has-advanced-upload .uploadBox__dragndrop
{
 display: inline;
}
.uploadBox.has-advanced-upload .uploadBox__icon
{
 display: block;
 margin-bottom: 40px;
}
.uploadBox.is-uploading .uploadBox__input, .uploadBox.is-success .uploadBox__input, .uploadBox.is-error .uploadBox__input
{
 visibility: hidden;
}
.uploadBox__uploading, .uploadBox__success, .uploadBox__error
{
 display: none;
}
.uploadBox.is-uploading .uploadBox__uploading, .uploadBox.is-success .uploadBox__success, .uploadBox.is-error .uploadBox__error
{
 display: block;
 position: absolute;
 top: 50%;
 right: 0;
 left: 0;
 transform: translateY( -50% );
}
.uploadBox__uploading
{
 font-style: italic;
}
.uploadBox__progress
{
 display: block;
 margin: 1em auto;
}
.uploadBox__success
{
 animation: appear-from-inside .25s ease-in-out;
}
@keyframes appear-from-inside
{
 from	{ transform: translateY( -50% ) scale( 0 ); }
 75%		{ transform: translateY( -50% ) scale( 1.1 ); }
 to		{ transform: translateY( -50% ) scale( 1 ); }
}
.uploadBox__restart
{
 font-weight: 700;
}
.js .uploadBox__file
{
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
}
.js .uploadBox__file + .uploadBox__choose
{
 max-width: 80%;
 text-overflow: ellipsis;
 white-space: nowrap;
 cursor: pointer;
 display: inline-block;
 overflow: hidden;
}
.js .uploadBox__file:focus + .uploadBox__choose, .js .uploadBox__file.has-focus + .uploadBox__choose
{
 outline: -webkit-focus-ring-color auto 5px;
}
.no-js > form *
{
 opacity: 0;
}
.no-js .uploadBox__file + .uploadBox__choose
{
 display: none;
}
.uploadBox__captcha
{
 display: table;
 margin: 1em auto 0;
 font-size: 75%;
 border: 1px solid #808080;
 padding: 0.5em;
 text-align: left;
}
.uploadBox__captcha > input
{
 text-align: right;
}
.uploadBox button
{
 display: block;
 margin: 1em auto 0.5em;
}
.uploadBox span.hr
{
 margin-left: 3em;
 margin-right: 3em;
}
.uploadBox__saveTime
{
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 display: block;
 font-size: 80%;
}
.uploadBox__saveTime > label
{
 display: block;
 margin-bottom: 0.25em;
}
.uploadBox__saveTime input + label
{
 display: inline-block;
 margin-right: 2em;
 margin-top: 0.25em;
 margin-bottom: 0.25em;
}
.uploadBox__savePriv
{
 margin-top: 0;
 margin-bottom: 0;
 display: block;
 font-size: 80%;
}
.uploadBox__savePriv span
{
 display: block;
 margin-top: 0.5em;
}
.uploadBox__progress
{
 height: 1em;
 width: 8em;
 margin: 1em auto;
 overflow: hidden;
}
.uploadBox__progval
{
 margin: 0 100% 0 0;
 display: none;
 height: 1em;
 width: 0;
}
.uploadBox__marquee
{
 display: none;
 margin: 0;
 height: 1em;
 width: 40%;
 animation: marquee 6s infinite ease-in-out both;
}
@keyframes marquee
{
 0%, 100%
 {
  margin: 0 110% 0 -10%;
 }
 50%
  {
  margin: 0 0 0 70%;
 }
}

.foldcube
{
 margin: 20px auto;
 width: 40px;
 height: 40px;
 position: relative;
 transform: rotateZ(45deg);
}
.foldcube .foldbox
{
 float: left;
 width: 50%;
 height: 50%;
 position: relative;
 transform: scale(1.1); 
}
.foldcube .foldbox:before
{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 animation: foldAngle 2.4s infinite linear both;
 transform-origin: 100% 100%;
}
.foldcube .fold2
{
 transform: scale(1.1) rotateZ(90deg);
}
.foldcube .fold3
{
 transform: scale(1.1) rotateZ(180deg);
}
.foldcube .fold4
{
 transform: scale(1.1) rotateZ(270deg);
}
.foldcube .fold2:before
{
 animation-delay: 0.3s;
}
.foldcube .fold3:before
{
 animation-delay: 0.6s; 
}
.foldcube .fold4:before
{
 animation-delay: 0.9s;
}
@keyframes foldAngle
{
 0%, 10%
 {
  transform: perspective(140px) rotateX(-180deg);
  opacity: 0; 
 }
 25%, 75%
 {
  transform: perspective(140px) rotateX(0deg);
  opacity: 1; 
 }
 90%, 100%
 {
  transform: perspective(140px) rotateY(180deg);
  opacity: 0; 
 }
}
.thi
{
 padding-top: 4px;
 padding-bottom: 0px;
 display: inline-block;
 vertical-align: middle;
}
.thi:hover
{
 animation: bounce 0.5s ease-in-out forwards;
}
.thi img
{
 vertical-align: middle;
 max-width: 128px;
 max-height: 128px;
}
@keyframes bounce
{
 0%
 {
  padding-top: 4px;
  padding-bottom: 0px;
 }
 30%
 {
  padding-top: 0px;
  padding-bottom: 4px;
 }
 50%
 {
  padding-top: 4px;
  padding-bottom: 0px;
 }
 70%
 {
  padding-top: 0px;
  padding-bottom: 4px;
 }
}