@font-face
{
    font-family: 'dropify';
    font-weight: normal;
    font-style: normal; 

    src: url('.//dropify.eot');
    src: url('.//dropify.eot#iefix') format('embedded-opentype'), url('.//dropify.woff') format('woff'), url('.//dropify.ttf') format('truetype'), url('.//dropify.svg#dropify') format('svg');
}

[class^='dropify-font-']:before,
[class*=' dropify-font-']:before,
.dropify-font:before,
.dropify-wrapper .dropify-message span.file-icon:before,
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename span.file-icon:before
{
    font-family: 'dropify';
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1em; 

    display: inline-block;

    width: 1em;
    margin-right: .2em;
    margin-left: .2em;

    text-align: center;
    text-decoration: inherit;
    text-transform: none;

    speak: none;
}

.dropify-font-upload:before,
.dropify-wrapper .dropify-message span.file-icon:before
{
    content: '\e800';
}

.dropify-font-file:before
{
    content: '\e801';
}

.dropify-wrapper
{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 22px;

    position: relative;

    display: block;
    overflow: hidden;

    width: 100%;
    max-width: 100%;
    height: 200px;
    padding: 5px 10px;

    cursor: pointer;
    text-align: center;

    color: #757575;
    border: 2px solid #e0e0e0; 
    background-color: #fff;
    background-image: none;
}
.dropify-wrapper:hover
{
    -webkit-animation: stripes 2s linear infinite;
         -o-animation: stripes 2s linear infinite;
            animation: stripes 2s linear infinite; 

    background-image: -webkit-linear-gradient(135deg, #f6f6f6 25%, transparent 25%, transparent 50%, #f6f6f6 50%, #f6f6f6 75%, transparent 75%, transparent);
    background-image:      -o-linear-gradient(135deg, #f6f6f6 25%, transparent 25%, transparent 50%, #f6f6f6 50%, #f6f6f6 75%, transparent 75%, transparent);
    background-image:         linear-gradient(-45deg, #f6f6f6 25%, transparent 25%, transparent 50%, #f6f6f6 50%, #f6f6f6 75%, transparent 75%, transparent);
    -webkit-background-size: 30px 30px;
            background-size: 30px 30px;
}
.dropify-wrapper.has-preview .dropify-clear
{
    display: block;
}
.dropify-wrapper.has-error .dropify-message .dropify-error
{
    display: block;
}
.dropify-wrapper.disabled input
{
    cursor: not-allowed;
}
.dropify-wrapper.disabled:hover
{
    -webkit-animation: none;
         -o-animation: none;
            animation: none; 

    background-image: none;
}
.dropify-wrapper.disabled .dropify-message
{
    text-decoration: line-through; 

    opacity: .5;
}
.dropify-wrapper.disabled .dropify-infos-message
{
    display: none;
}
.dropify-wrapper input
{
    position: absolute;
    z-index: 5; 
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    cursor: pointer;

    opacity: 0;
}
.dropify-wrapper .dropify-message
{
    position: relative;
    top: 50%;

    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
.dropify-wrapper .dropify-message span.file-icon
{
    font-size: 50px;

    color: #ccc;
}
.dropify-wrapper .dropify-message p
{
    margin: 5px 0 0 0;
}
.dropify-wrapper .dropify-message p.dropify-error
{
    font-weight: bold;

    display: none; 

    color: #f44336;
}
.dropify-wrapper .dropify-clear
{
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: bold;

    position: absolute;
    z-index: 7;
    top: 10px;
    right: 10px;

    display: none;

    padding: 4px 8px;

    -webkit-transition: all .15s linear;
         -o-transition: all .15s linear;
            transition: all .15s linear; 
    text-transform: uppercase;

    opacity: 0;
    color: #fff;
    border: 2px solid #fff;
    background: none;
}
.dropify-wrapper .dropify-clear:hover
{
    background: rgba(255, 255, 255, .2);
}
.dropify-wrapper .dropify-preview
{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: none;
    overflow: hidden;

    width: 100%;
    height: 100%;
    padding: 5px;

    text-align: center; 

    background-color: #fff;
}
.dropify-wrapper .dropify-preview .dropify-render img
{
    position: relative;
    top: 50%;

    max-width: 100%;
    max-height: 100%;

    -webkit-transition: border-color .15s linear;
         -o-transition: border-color .15s linear;
            transition: border-color .15s linear; 
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
         -o-transform: translate(0, -50%);
            transform: translate(0, -50%);

    background-color: #fff;
}
.dropify-wrapper .dropify-preview .dropify-render i
{
    font-size: 70px;

    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    color: #777;
}
.dropify-wrapper .dropify-preview .dropify-render .dropify-extension
{
    font-size: 13px;
    font-weight: 900;

    position: absolute;
    top: 50%;
    left: 50%;

    overflow: hidden;

    width: 42px;
    margin-top: 10px;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    white-space: nowrap;
    letter-spacing: -.03em;
    text-transform: uppercase;
    text-overflow: ellipsis;
}
.dropify-wrapper .dropify-preview .dropify-infos
{
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity .15s linear;
         -o-transition: opacity .15s linear;
            transition: opacity .15s linear; 

    opacity: 0;
    background: rgba(0, 0, 0, .7);
}
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner
{
    position: absolute;
    top: 50%;

    width: 100%;
    padding: 0 20px;

    -webkit-transition: all .2s ease;
         -o-transition: all .2s ease;
            transition: all .2s ease; 
    -webkit-transform: translate(0, -40%);
        -ms-transform: translate(0, -40%);
         -o-transform: translate(0, -40%);
            transform: translate(0, -40%);

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p
{
    font-weight: bold; 
    line-height: 25px;

    position: relative;

    overflow: hidden;

    width: 100%;
    margin: 0;
    padding: 0;

    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #fff;
}
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename span.file-icon
{
    margin-right: 2px;
}
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message
{
    font-size: 12px;

    position: relative;

    margin-top: 15px;
    padding-top: 15px;

    opacity: .5;
}
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before
{
    position: absolute;
    top: 0;
    left: 50%;

    width: 30px;
    height: 2px; 

    content: '';
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
         -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);

    background: #fff;
}
.dropify-wrapper:hover .dropify-clear
{
    opacity: 1;
}
.dropify-wrapper:hover .dropify-preview .dropify-infos
{
    opacity: 1;
}
.dropify-wrapper:hover .dropify-preview .dropify-infos .dropify-infos-inner
{
    margin-top: -5px;
}
.dropify-wrapper.touch-fallback
{
    height: auto !important;
}
.dropify-wrapper.touch-fallback:hover
{
    -webkit-animation: none;
         -o-animation: none;
            animation: none; 

    background-image: none;
}
.dropify-wrapper.touch-fallback .dropify-preview
{
    position: relative;

    padding: 0;
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render
{
    position: relative; 

    display: block;
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render .dropify-font-file
{
    position: relative;
    top: 0;
    left: 0; 

    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render .dropify-font-file::before
{
    margin-top: 30px;
    margin-bottom: 30px;
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render img
{
    position: relative;

    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos
{
    position: relative;

    opacity: 1;
    background: transparent;
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner
{
    position: relative;
    top: 0;

    padding: 5px 90px 5px 0; 

    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p
{
    line-height: 25px; 

    position: relative;

    overflow: hidden;

    width: 100%;
    margin: 0;
    padding: 0;

    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #757575;
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename
{
    font-weight: bold;
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message
{
    font-size: 11px;

    position: relative;

    margin-top: 0;
    padding-top: 0;

    opacity: 1;
}
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before
{
    display: none;
}
.dropify-wrapper.touch-fallback .dropify-message
{
    padding: 40px 0; 

    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
}
.dropify-wrapper.touch-fallback .dropify-clear
{
    top: auto;
    bottom: 23px;

    opacity: 1;
    color: #757575; 
    border-color: rgba(117, 117, 117, .7);
}
.dropify-wrapper.touch-fallback.has-preview .dropify-message
{
    display: none;
}
.dropify-wrapper.touch-fallback:hover .dropify-preview .dropify-infos .dropify-infos-inner
{
    margin-top: 0;
}

@-webkit-keyframes stripes
{
    from
    {
        background-position: 0 0;
    }
    to
    {
        background-position: 60px 30px;
    }
}

@-o-keyframes stripes
{
    from
    {
        background-position: 0 0;
    }
    to
    {
        background-position: 60px 30px;
    }
}

@keyframes stripes
{
    from
    {
        background-position: 0 0;
    }
    to
    {
        background-position: 60px 30px;
    }
}