.country-recognizer-wrapper { opacity: 0; position: fixed; width: 100vw; top: 0; left: 0; z-index: 1000000; pointer-events: none; height: 380px; display: flex; align-items: center; justify-content: center; margin-top: calc((100vh - 380px) / 2); transition: opacity 0.5s linear; }
.country-recognizer-wrapper * { box-sizing: content-box; }

.country-recognizer-wrapper:before { content: ""; background: url("/static/img/country.jpg"); width: 400px; height: 100%; background-size: cover; background-position: right; position: relative; z-index: 10000; }

.country-recognizer-wrapper:after { content: ""; width: 100vw; height: 100vh; display: block; position: fixed; z-index: 100000; background: rgba(0,0,0,0.5); }

.country-recognizer-wrapper.show { opacity: 1; pointer-events: all; }

.country-recognizer-wrapper > div { display: flex; align-items: center; justify-content: center; position: relative; min-width: 480px; z-index: 100001; background: #FFF; padding: 60px 20px; flex-wrap: wrap; width: 25vw; height: 100%; box-sizing: border-box; }

.country-recognizer-wrapper > div:before { content: ""; position: absolute; top: 0; left: -288px; bottom: 0; width: 288px; z-index: 100; background: linear-gradient(90deg, #ffffff00 0, white 100%); }

.country-recognizer-wrapper > div > div:first-child { font-size: 1.3rem; line-height: 1.5rem; flex-basis: 100%; text-align: center; margin-bottom: 15px; color: var(--text-color); }

.country-recognizer-wrapper > div > div.select-box { flex-basis: calc(50% - 20px); margin: 0 10px 15px 10px; }

.country-recognizer-wrapper > div > div:last-child { cursor: pointer; position: absolute; right: 10px; top: 10px; background-color: var(--tertiary-color); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s }
html:not(.touch) .country-recognizer-wrapper > div > div:last-child:hover { filter: brightness(110%) }

.country-recognizer-wrapper > div > div:last-child svg { fill: #FFF; width: 13px; height: 13px; }

.country-recognizer-wrapper > div > div > a { display: inline-block; box-shadow: none; background-color: var(--secondary-color); padding: 14px 18px; color: #FFF; font-size: 1rem; transition: 0.2s linear; border-radius: 5px; text-transform: uppercase; }
html:not(.touch) .country-recognizer-wrapper > div > div > a:hover { filter: brightness(110%) }

.country-recognizer-wrapper > div > div > a:after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-left: 10px; }

.country-recognizer-wrapper .select-box { position: relative; display: block; font-size: 0.85em; color: #60666d; }

.country-recognizer-wrapper .select-box__current { position: relative; cursor: pointer; outline: none; }

.country-recognizer-wrapper .select-box__current.focus + .select-box__list { opacity: 1; -webkit-animation-name: none; animation-name: none; }

.country-recognizer-wrapper .select-box__current.focus + .select-box__list .select-box__option { text-transform: uppercase; transition: 0.3s linear; }

.country-recognizer-wrapper .select-box__current.focus .select-box__icon { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }

.country-recognizer-wrapper .select-box__icon { position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; transition: 0.2s ease; font-size: 1.5em; color: #FFF; }

.country-recognizer-wrapper .select-box__value { display: flex; }

.country-recognizer-wrapper .select-box__value.checked > .select-box__input-text { display: flex; align-items: center; }

.country-recognizer-wrapper .select-box__input-text { display: none; width: calc(100% - 24px); margin: 0; font-size: 1rem; padding: 11px 12px; color: #FFF; border: 1px solid var(--text-color); border-radius: 5px; text-transform: uppercase; background: var(--primary-color); }

.country-recognizer-wrapper .select-box__list { position: absolute; width: 100%; z-index: 1000; padding: 0; list-style: none; opacity: 0; -webkit-animation-name: HideList; animation-name: HideList; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: step-start; animation-timing-function: step-start; box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1); background: var(--quaternary-color); border-radius: 5px; }

.country-recognizer-wrapper .select-box__option { display: flex; align-items: center; padding: 11px 12px; color: #FFF; font-size: 0.9rem; }

.country-recognizer-wrapper .select-box__input-text > span, .country-recognizer-wrapper .select-box__option > span { margin-right: 10px; width: 20px; height: 16px; }

html:not(.touch) .country-recognizer-wrapper .select-box__option:hover, .country-recognizer-wrapper .select-box__option:focus { background-color: var(--secondary-color); color: var(--text-color) !important; }

html:not(.touch) .country-recognizer-wrapper .select-box__current.focus + .select-box__list .select-box__option:hover, .country-recognizer-wrapper .select-box__current.focus + .select-box__list .select-box__option:focus { color: #FFF; }

/* MEDIA QUERY */
@media (max-width: 1023px) {
    .country-recognizer-wrapper:before { width: 250px; background-position-x: -250px }

    .country-recognizer-wrapper > div:before { left: -250px; width: 250px; }
}

@media (max-width: 767px) {
    .country-recognizer-wrapper:before { display: none; }

    .country-recognizer-wrapper > div:before { background: url("/static/img/country.jpg"); position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; background-position: center; z-index: 10000; }

    .country-recognizer-wrapper > div { min-width: unset; width: 90vw; }
}

@media (max-width: 640px) {
    .country-recognizer-wrapper > div { display: block; text-align: center; }

    .country-recognizer-wrapper > div > div:first-child { margin-bottom: 25px; }

    .country-recognizer-wrapper .select-box { display: inline-block; }

    .country-recognizer-wrapper > div > div.select-box { width: 60%; margin-left: 0; margin-right: 0; }

    .country-recognizer-wrapper > div > div.select-box + div.select-box { margin-bottom: 30px; }

    .country-recognizer-wrapper .select-box__value.checked > .select-box__input-text { padding: 11px 11px; }

    .country-recognizer-wrapper .select-box__input-text > span, .country-recognizer-wrapper .select-box__option > span { width: 17px; height: 13px; }
}

@media (max-width: 480px) {
    .country-recognizer-wrapper > div > div.select-box { width: 80%; }
}

@media (max-height: 400px) {
    .country-recognizer-wrapper { height: 90vh; margin-top: 5vh; }
}
/* KEYFRAMES */
@-webkit-keyframes HideList {
    from { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); }
    to { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); }
}

@-moz-keyframes HideList {
    from { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); }
    to { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); }
}

@-ms-keyframes HideList {
    from { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); }
    to { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); }
}

@keyframes HideList {
    from { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); }
    to { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); }
}
/*** FLAGS ***/
.flag-icon-ww { background-image: url(/static/svg/flags/4x3/ww.svg); }

.flag-icon-background { background-size: contain; background-position: 50%; background-repeat: no-repeat; }

.flag-icon { background-size: contain; background-position: 50%; background-repeat: no-repeat; position: relative; display: inline-block; width: 1.33333333em; line-height: 1em; }

.flag-icon:before { content: " "; }

.flag-icon.flag-icon-squared { width: 1em; }