/* latin */
@font-face {
    font-family: 'Nova Square';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/NovaSquare-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.file-uploader {
    font-size: 20px;
    background: #e74c3c;
    padding: 0.5em;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    user-select: none;
}

    .file-uploader label {
        margin: 0;
        padding: 1.7em 0.5em 0 0.5em;
        background: #c0392b;
        border: dashed 1px #fff;
        display: block;
        color: #fff;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        -khtml-border-radius: 6px;
        border-radius: 6px;
    }

        .file-uploader label.hover {
            background: #932d24;
        }

        html.files-loaded .file-uploader label > i { opacity: 0; line-height: 0;}
        html.files-loaded .file-uploader label > p { opacity: 0; line-height: 0;}

        .file-uploader label input[type=file] {
            display: none;
        }

        .file-uploader label > i {
            display: block;
            font-size: 3.5em;
            transition: opacity .5s ease, line-height 1s ease;
        }
        .file-uploader label > p {
            transition: opacity .5s ease, line-height 1s ease;
        }

        .file-uploader label > span:first-of-type{display: block;}
        .file-uploader label > span:first-of-type > span {
            display: inline-block;
            background: #fff;
            color: #000;
            margin: 0.5em auto 0 auto;
            padding: 0 15px;
            line-height: 2em;
            font-weight: bold;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
        }
        .file-uploader label > span:first-of-type  i {
            margin-right: 5px;
        }

        .file-uploader label > progress {
            visibility: hidden;
            width: 10em;
            height: 0.2em;
            position: relative;
            top: 0;
            transition: top 1s ease;
        }
        .file-uploader label > span:last-of-type {
            font-family: 'Nova Square', cursive;
            font-size: 0.7em;
            display: block;
            visibility: hidden;
            position: relative;
            top: 0;
            transition: top 1s ease;
        }

.breakline{display: block;}

@media only screen and (max-width: 768px) {
    .file-uploader {
        font-size: 16px;
    }
}

@media only screen and (max-width: 500px) {
    .file-uploader {
        font-size: 14px;
    }
    .breakline {
        display: none;
    }
}