:root {
    --flag-scale-x: 1;
}

/* flags */
.reg-country-flag {
    background: url("https://static.essensworld.com/images/country_flag/all_countries_sprite.png?6") no-repeat;
    display: inline-block;
    background-position-x: -100%;
}

.reg-country-flag.big {
    background-size: 4800px;
    width: 70px;
    width: calc(70px * var(--flag-scale-x));
    height: 45px;
}

.reg-country-flag.medium {
    background-size: 3000px;
    width: 43px;
    width: calc(43px * var(--flag-scale-x));
    height: 30px;
}

.reg-country-flag.small {
    background-size: 1800px;
    width: 24px;
    width: calc(24px * var(--flag-scale-x));
    height: 17px;
    filter: drop-shadow(0px 0px 2px darkgrey);
}

.reg-country-flag.mini {
    background-size: 1350px;
    width: 20px;
    width: calc(20px * var(--flag-scale-x));
    height: 14px;
}

@media (min-width: 576px) {
    .reg-country-flag.big-sm {
        background-size: 4800px;
        width: 70px;
        width: calc(70px * var(--flag-scale-x));
        height: 45px;
    }

    .reg-country-flag.medium-sm {
        background-size: 3000px;
        width: 43px;
        width: calc(43px * var(--flag-scale-x));
        height: 30px;
    }

    .reg-country-flag.small-sm {
        background-size: 1800px;
        width: 24px;
        width: calc(24px * var(--flag-scale-x));
        height: 17px;
    }

    .reg-country-flag.mini-sm {
        background-size: 1350px;
        width: 20px;
        width: calc(20px * var(--flag-scale-x));
        height: 14px;
    }
}

@media (min-width: 768px) {
    .reg-country-flag.big-md {
        background-size: 4800px;
        width: 70px;
        width: calc(70px * var(--flag-scale-x));
        height: 45px;
    }

    .reg-country-flag.medium-md {
        background-size: 3000px;
        width: 43px;
        width: calc(43px * var(--flag-scale-x));
        height: 30px;
    }

    .reg-country-flag.small-md {
        background-size: 1800px;
        width: 24px;
        width: calc(24px * var(--flag-scale-x));
        height: 17px;
    }

    .reg-country-flag.mini-md {
        background-size: 1350px;
        width: 20px;
        width: calc(20px * var(--flag-scale-x));
        height: 14px;
    }
}

@media (min-width: 992px) {
    .reg-country-flag.big-lg {
        background-size: 4800px;
        width: 70px;
        width: calc(70px * var(--flag-scale-x));
        height: 45px;
    }

    .reg-country-flag.medium-lg {
        background-size: 3000px;
        width: 43px;
        width: calc(43px * var(--flag-scale-x));
        height: 30px;
    }

    .reg-country-flag.small-lg {
        background-size: 1800px;
        width: 24px;
        width: calc(24px * var(--flag-scale-x));
        height: 17px;
    }

    .reg-country-flag.mini-lg {
        background-size: 1350px;
        width: 20px;
        width: calc(20px * var(--flag-scale-x));
        height: 14px;
    }
}

@media (min-width: 1200px) {
    .reg-country-flag.big-xl {
        background-size: 4800px;
        width: 70px;
        width: calc(70px * var(--flag-scale-x));
        height: 45px;
    }

    .reg-country-flag.medium-xl {
        background-size: 3000px;
        width: 43px;
        width: calc(43px * var(--flag-scale-x));
        height: 30px;
    }

    .reg-country-flag.small-xl {
        background-size: 1800px;
        width: 24px;
        width: calc(24px * var(--flag-scale-x));
        height: 17px;
    }

    .reg-country-flag.mini-xl {
        background-size: 1350px;
        width: 20px;
        width: calc(20px * var(--flag-scale-x));
        height: 14px;
    }
}

@media (min-width: 1600px) {
    .reg-country-flag.big-xxl {
        background-size: 4800px;
        width: 70px;
        width: calc(70px * var(--flag-scale-x));
        height: 45px;
    }

    .reg-country-flag.medium-xxl {
        background-size: 3000px;
        width: 43px;
        width: calc(43px * var(--flag-scale-x));
        height: 30px;
    }

    .reg-country-flag.small-xxl {
        background-size: 1800px;
        width: 24px;
        width: calc(24px * var(--flag-scale-x));
        height: 17px;
    }

    .reg-country-flag.mini-xxl {
        background-size: 1350px;
        width: 20px;
        width: calc(20px * var(--flag-scale-x));
        height: 14px;
    }
}

.flag-it {
    background-position-x: 0.15%;
}

.flag-es {
    background-position-x: 1.77%;
}

.flag-uk, .flag-en {
    background-position-x: 3.39%;
}

.flag-ie {
    background-position-x: 4.99%;
}

/*5th*/
.flag-cz {
    background-position-x: 6.64%;
}

.flag-sk {
    background-position-x: 8.24%;
}

.flag-si {
    background-position-x: 9.85%;
}

.flag-pl {
    background-position-x: 11.48%;
}

.flag-eu {
    background-position-x: 13.11%;
}

/*10th*/
.flag-de {
    background-position-x: 14.74%;
}

.flag-at {
    background-position-x: 16.37%;
}

.flag-fr {
    background-position-x: 17.95%;
}

.flag-be {
    background-position-x: 19.62%;
}

.flag-gr {
    background-position-x: 21.2%;
}

/*15th*/
.flag-cy {
    background-position-x: 22.84%;
}

.flag-hu {
    background-position-x: 24.47%;
}

.flag-rs {
    background-position-x: 26.09%;
}

.flag-lt {
    background-position-x: 27.65%;
}

.flag-se {
    background-position-x: 29.34%;
}

/*20th*/
.flag-ee {
    background-position-x: 30.88%;
}

.flag-lv {
    background-position-x: 32.49%;
}

.flag-ru {
    background-position-x: 34.13%;
}

.flag-kz {
    background-position-x: 35.75%;
}

.flag-uz {
    background-position-x: 37.38%;
}

/*25th*/
.flag-sn {
    background-position-x: 39%;
}

.flag-ua {
    background-position-x: 40.62%;
}

.flag-ro {
    background-position-x: 42.14%;
}

.flag-tr {
    background-position-x: 43.66%;
}

.flag-fi {
    background-position-x: 45.23%;
}

.flag-kg {
    background-position-x: 46.76%;
}

.flag-md {
    background-position-x: 48.42%;
}

.flag-bg {
    background-position-x: 50%;
}

.flag-pk {
    background-position-x: 51.65%;
}

.flag-au {
    background-position-x: 53.41%;
    --flag-scale-x: 1.19;
}

.flag-ar {
    background-position-x: 55.1%;
}

.flag-lb {
    background-position-x: 56.65%;
}

.flag-us {
    background-position-x: 58.25%;
}

.flag-ca {
    background-position-x: 59.85%;
}