#dropzone .upload {
    position: absolute;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    box-sizing: border-box;
    left: 3px;
    top: 3px;
    padding: 0;
    transition: all .3s  cubic-bezier(.75,-0.5,0,1.75);
    background: #ff0079;
    transform: scale(0.2);
}

#dropzone .upload .upload__option {
    margin: 0 auto;
    border: 5px white solid;
    padding: 20px;
    height: 180px;
    width: 80%;
    min-width: 80%;
    max-width: 80%;
}

#dropzone .upload .upload__option input {
    width: 100%;
    line-height: 50px;
    padding: 0 10px;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border: 0;
    outline: 0;
    font-family: 'Raleway', sans-serif;
    border-bottom: 1px white solid;
    display: block;
}
#dropzone .upload .upload__option input:hover, #dropzone .upload .upload__option input:focus {
    background: #00ff4d;
}

#dropzone .upload-icon {
    background-image: url("data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?> <svg width='46px' height='55px' viewBox='0 0 46 55' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g id='uploadDrag' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'> <g id='dotted_lines'> <rect id='Rectangle-8-Copy-4' fill='%23ffffff' transform='translate(42.500000, 7.000000) rotate(-270.000000) translate(-42.500000, -7.000000) ' x='37.5' y='5.5' width='10' height='3'></rect> <rect id='Rectangle-8-Copy-5' fill='%23ffffff' transform='translate(42.500000, 25.000000) rotate(-270.000000) translate(-42.500000, -25.000000) ' x='37.5' y='23.5' width='10' height='3'></rect> <rect id='Rectangle-8-Copy-10' fill='%23ffffff' transform='translate(1.500000, 47.000000) rotate(-270.000000) translate(-1.500000, -47.000000) ' x='-3.5' y='45.5' width='10' height='3'></rect> <rect id='Rectangle-8-Copy-11' fill='%23ffffff' transform='translate(1.500000, 31.000000) rotate(-270.000000) translate(-1.500000, -31.000000) ' x='-3.5' y='29.5' width='10' height='3'></rect> <rect id='Rectangle-8-Copy-12' fill='%23ffffff' transform='translate(1.500000, 15.000000) rotate(-270.000000) translate(-1.500000, -15.000000) ' x='-3.5' y='13.5' width='10' height='3'></rect> <rect id='Rectangle-8-Copy' fill='%23ffffff' x='17' y='0' width='10' height='3'></rect> <rect id='Rectangle-8-Copy-2' fill='%23ffffff' x='0' y='0' width='10' height='3'></rect> <rect id='Rectangle-8-Copy-3' fill='%23ffffff' x='34' y='0' width='10' height='3'></rect> <path d='M45.5142534,45.4384407 C45.5619149,45.2395375 45.5380842,45.017234 45.3950997,44.888532 L31.1562243,30.9068123 C31.0251551,30.7664101 30.798763,30.7430097 30.5962016,30.7898104 C30.3936401,30.8717117 30.2864018,31.0706149 30.2864018,31.269518 L30.2864018,51.2300317 C30.2864018,51.4289348 30.3936401,51.6278379 30.5962016,51.7097392 C30.6557784,51.7331396 30.7391861,51.7331396 30.798763,51.7331396 C30.9417475,51.7331396 31.0489859,51.6746387 31.1562243,51.5927374 L35.5172522,47.2987699 L39.0442038,54.4475822 C39.1514422,54.7049863 39.461242,54.8102879 39.7233803,54.6698857 L42.0111326,53.5349679 C42.2613555,53.4296662 42.3805093,53.1254615 42.2375248,52.8680574 L38.6748271,45.7426454 L45.025723,45.7426454 C45.2282844,45.7426454 45.4308458,45.6373438 45.5142534,45.4384407 Z' id='cursor' fill='%2300ff4d' transform='translate(37.911481, 42.750174) rotate(-7.000000) translate(-37.911481, -42.750174) '></path> <rect id='Rectangle-8-Copy-8' fill='%23ffffff' x='17' y='50' width='7' height='3'></rect> <rect id='Rectangle-8-Copy-9' fill='%23ffffff' x='0' y='50' width='10' height='3'></rect> </g> </g> </svg>");
    background-size: contain;
    background-repeat: no-repeat;
    width: 92px;
    height: 110px;
    margin: 0 auto;
}

#dropzone .upload__option__text {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

#dropzone .upload .upload__option {
    display: none;
}

/* Manual upload */
#dropzone.manual .upload .upload__option {
    display: block;
}
/* Dragging upload */
#dropzone.dragging .upload .upload__option-dragging {
    display: block;
}

#dropzone .upload__cancel {
    flex: 0;
    position: absolute;
    right: 0;
    top: 0;
}


/* After drop upload */
/*#dropzone.dropped .upload .upload__option {
    display: none;
}*/


#dropzone .upload .uploadform {
    display: none;
}
#dropzone.dropped .upload .uploadform {
    display: block;
}
#dropzone.dropped .upload__cancel {
    display: none;
}

#dropzone .uploadform {
    max-width: 500px;
    margin: 0 auto;
}

#dropzone .uploadform .uploadform__title {
    width: 100%;
    display: flex;
}
#dropzone .uploadform .uploadform__title__filename {
    flex: 1;
    background: #ff0079;
    line-height: 30px;
    box-sizing: border-box;
    color: #000000;
    position: relative;
}
#dropzone .uploadform .uploadform__title__filename .uploadform__title__filename__progressbar {
    position: absolute;
    width: 0;
    height: 30px;
    left: 0;
    top: 0;
    background: #00ff4d;
    z-index: 1;
    transition: all .1s ease;
}
#dropzone .uploadform .uploadform__title__filename__text {
    z-index: 2;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 470px;
    width: 470px;
    box-sizing: border-box;
    padding: 0 5px;
}

#dropzone .uploadform .uploadform__title__cancel {
    flex: 1;
}

#dropzone .uploadform__image {
    background-color: #000000;
}
#dropzone .uploadform__image img, #dropzone .uploadform__image video {
    width: 100%;
    display: block;
    user-select: none;
}
#dropzone .uploadform__form {
    width: 100%;
}
#dropzone .uploadform__form input {
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.1);
    border: 0;
    outline: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    color: #000000;
    padding: 3px 10px;
    line-height: 30px;
    box-sizing: border-box;
    border-bottom: 1px #000000 solid;
}
#dropzone .uploadform__form input:focus {
    background: #00ff4d;
}

#dropzone .uploadform__form input.uploadform__form__hashtag {
    background-image: url('/images/chichi/hashtag.png');
    background-position: 5px center;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    padding-left: 35px;
    text-transform: lowercase;
}

#dropzone .uploadform__form input[type="submit"] {
    cursor: pointer;
    font-size: 24px;
    line-height: 50px;
}
#dropzone .uploadform__form input[type="submit"]:hover {
    background: #00ff4d;
}

/* Tablet and Desktop */
@media screen and (min-width: 1024px) {

    #dropzone .upload {
        position: absolute;
        width: 70%;
        height: 85%;
        box-sizing: border-box;
        left: 15%;
        top: 7.5%;
        border: 10px #ff0079 solid;
        padding: 20px;
        transition: all .3s  cubic-bezier(.75,-0.5,0,1.75);
        background: #ff0079;
    }

    #dropzone .upload {
        display: flex;
        align-items: center;
        overflow: auto;
        flex-wrap: wrap;
    }

    #dropzone .upload .uploadform {
        flex: 1;
        margin: auto;
    }

    #dropzone .upload .uploadform__image img, #dropzone .upload .uploadform__image video {
        width: auto;
        max-width: 100%;
        max-height: 480px;
        margin: 0 auto;
    }

}