.languages {
    font-family: ProximaNovaRegular, sans-serif;
    margin-left: auto;
    margin-right: 29px;
    min-width: 150px;
    position: relative
}

.languages__title {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 10px
}

.languages__arrow {
    -o-transition: transform .5s;
    -webkit-transition: -webkit-transform .5s;
    float: right;
    margin-top: 5px;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s
}

.languages__flag,
.languages__lang-name {
    display: inline-block;
    vertical-align: middle
}

.languages__flag {
    height: 16px;
    margin-right: 7px;
    width: 22px
}

.languages__flag--ru {
    background: url(../images/flags/RU.png) no-repeat 0 0
}

.languages__flag--en {
    background: url(../images/flags/EN.png) no-repeat 0 0
}

.languages__flag--pt {
    background: url(../images/flags/PT.png) no-repeat 0 0
}

.languages__flag--es {
    background: url(../images/flags/ES.png) no-repeat 0 0
}

.languages__flag--pl {
    background: url(../images/flags/PL.png) no-repeat 0 0
}

.languages__flag--id {
    background: url(../images/flags/ID.png) no-repeat 0 0
}

.languages__flag--fr {
    background: url(../images/flags/FR.png) no-repeat 0 0
}

.languages__flag--th {
    background: url(../images/flags/TH.png) no-repeat 0 0
}

.languages__flag--de {
    background: url(../images/flags/DE.png) no-repeat 0 0
}

.languages__flag--vt {
    background: url(../images/flags/VT.png) no-repeat 0 0
}

.languages__flag--ar {
    background: url(../images/flags/AR.png) no-repeat 0 0
}

.languages__flag--ms {
    background: url(../images/flags/MS.png) no-repeat 0 0
}

.languages__flag--zh {
    background: url(../images/flags/ZH.png) no-repeat 0 0
}

.languages__flag--br {
    background: url(../images/flags/BR.png) no-repeat 0 0
}

.languages__flag--tr {
    background: url(../images/flags/TR.png) no-repeat 0 0
}

.languages__flag--it {
    background: url(../images/flags/IT.png) no-repeat 0 0
}

.languages__flag--ja {
    background: url(../images/flags/JA.png) no-repeat 0 0
}

.languages__flag--ko {
    background: url(../images/flags/KO.png) no-repeat 0 0
}

.languages__list {
    -ms-flex-wrap: wrap;
    -ms-transform: translateY(20px);
    -o-transition: opacity .5s, transform .5s, visibility .5s;
    -webkit-border-radius: 4px;
    -webkit-flex-wrap: wrap;
    -webkit-transform: translateY(20px);
    -webkit-transition: opacity .5s, visibility .5s, -webkit-transform .5s;
    background: rgba(0, 0, 0, .7);
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    opacity: 0;
    padding: 10px 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    transform: translateY(20px);
    transition: opacity .5s, visibility .5s, -webkit-transform .5s;
    transition: opacity .5s, transform .5s, visibility .5s;
    transition: opacity .5s, transform .5s, visibility .5s, -webkit-transform .5s;
    visibility: hidden;
    width: 300%;
    z-index: 999
}

.languages__lang-name {
    font-size: 14px
}

.languages__item:hover>a {
    background: hsla(0, 0%, 100%, .1)
}

.languages__link {
    color: #fff;
    display: block;
    padding: 5px 10px;
    text-decoration: none
}

.languages__item {
    -ms-flex: 1 1 33.3333%;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 33.3333%;
    flex: 1 1 33.3333%
}

.languages--opened .languages__list {
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible
}

.languages--opened .languages__arrow {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}