.lang-menu {
    width: 130px;
    position: relative;
    box-sizing: border-box;
    border: solid 1px #c6c6c6;
    font-size: 12px;
    line-height: 18px;
    color: #000;
    margin-top: -3px;
    z-index: 100;
}

.lang-menu .selected-lang {
    display: flex;   
    justify-content: flex-start;
    align-items: center;
    line-height: 18px;
    cursor: pointer;
    padding: 0 25px 0 5px;
    white-space: nowrap;
    position: relative;
}

.lang-menu .selected-lang:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 11px;
    background-image: url(../images/country_flags.svg);
    background-size: 112px 11px;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.lang-menu .selected-lang:after {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent #000000 transparent;
    transition: all .3s ease;
    position: absolute;
    right: 5px;
    transform: rotate(180deg);
    top: 40%;
    content: '';
}

.lang-menu:hover .selected-lang:after {
    top: 50%;
    transform: rotate(0deg) translateY(-50%);
}

.lang-text {
    display: none;
}

.lang-menu ul {
    margin: 0;
    padding: 0;
    display: none;
    background-color: #fff;
    border: 1px solid #c6c6c6;
    position: absolute;
    top: 20px;
    right: 0px;
    width: 128px;
    border-radius: 5px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
    margin-right: -1px;
}

.lang-menu ul li {
    display: block;
    margin: 0;
    padding: 2px 5px;
}

.lang-menu ul li a {
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000;
}

.lang-menu ul li:hover {
    background-color: #f2f2f2;
}

.lang-menu ul li a:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 11px;
    background-image: url(../images/country_flags.svg);
    background-size: 112px 11px;
    background-repeat: no-repeat;
    margin-right: 5px;
}

[data-value="en"]:before,
[data-value="en_US"]:before {
    background-position: 0 0;
}
[data-value="fr"]:before,
[data-value="fr_FR"]:before {
    background-position: -14px 0;
}
[data-value="de"]:before,
[data-value="de_DE"]:before {
    background-position: -28px 0;
}
[data-value="es"]:before,
[data-value="es_ES"]:before {
    background-position: -42px 0;
}
[data-value="zh"]:before,
[data-value="zh_CN"]:before {
    background-position: -56px 0;
}
[data-value="ja"]:before,
[data-value="ja_JP"]:before {
    background-position: -70px 0;
}
[data-value="it"]:before,
[data-value="it_IT"]:before {
    background-position: -84px 0;
}
[data-value="pt"]:before,
[data-value="pt_PT"]:before {
    background-position: -98px 0;
}

[data-value="en"] .lang-text.en,
[data-value="fr"] .lang-text.fr,
[data-value="de"] .lang-text.de,
[data-value="es"] .lang-text.es,
[data-value="zh"] .lang-text.zh,
[data-value="ja"] .lang-text.ja,
[data-value="pt"] .lang-text.pt,
[data-value="it"] .lang-text.it { display: block; }

.lang-menu:hover ul {
    display: block;
}