@font-face {
    font-family: Roboto-Medium;
    src: url(../font/Roboto-Medium.ttf)
}

@font-face {
    font-family: Roboto-Light;
    src: url(../font/Roboto-Light.ttf)
}

@font-face {
    font-family: Roboto-Bold;
    src: url(../font/Roboto-Bold.ttf)
}

@font-face {
    font-family: Roboto-Thin;
    src: url(../font/Roboto-Thin.ttf)
}

@font-face {
    font-family: VujahdayScript-Regular;
    src: url(../font/VujahdayScript-Regular.ttf)
}

html,
body {
    scroll-behavior: smooth
}

body {
    background-color: #2E75C9;
    margin: 0;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
}

a {
    text-decoration: none;
}

h1 {
    text-align: center;
    font-family: 'Roboto-Medium', sans-serif;
    font-weight: 500;
    font-size: 5vw;
    color: rgb(121, 121, 121);
    margin-top: 10vw;
    margin-bottom: 0;
}

li {
    font-size: 3vw;
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    margin-top: 2vw;
    padding-right: 5vw;
}

input:focus {
    outline: none;
}

#modal iframe {
    max-width: 750px;
    margin-top: 40vw;
    height: calc(100vh - 40vw);
}

#outer {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

#limiter {
    width: 100vw;
    position: relative;
}

#header {
    display: flex;
    transition: 0.5s;
    height: 27vw;
}

#logo {
    width: 15vw;
    height: 15vw;
    border-radius: 2.5vw;
    background: #2E75C9;
    box-shadow: -1vw -1vw 3vw 0vw rgba(255, 255, 255, 0.10), 1vw 1vw 3vw 0vw rgba(0, 0, 0, 0.10);
    margin: 7vw 4vw 0 7vw;
    background-image: url(../img/logo.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 9vw;
}

#logosign {
    width: 24vw;
    height: 7vw;
    margin-top: 10.5vw;
    background-image: url(../img/logosign.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#central-image {
    position: absolute;
    width: 28vw;
    height: 28vw;
    top: 6vw;
    left: 53vw;
    background-image: url(../img/central-images/2.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.15;
    transition: opacity 0.3s;
}

#central-image.central-image-dubai {
    background-image: url(../img/central-images/dubai.svg);
}

#central-image.central-image-it {
    background-image: url(../img/central-images/it.svg);
}

#central-image.central-image-uk {
    background-image: url(../img/central-images/uk.svg);
}

#central-image.central-image-us {
    background-image: url(../img/central-images/us.svg);
}

#central-image.central-image-fr {
    background-image: url(../img/central-images/fr.svg);
}

#central-image.central-image-es {
    background-image: url(../img/central-images/es.svg);
}

#central-image.central-image-th {
    background-image: url(../img/central-images/th.svg);
}

#central-image.central-image-pt {
    background-image: url(../img/central-images/pt.svg);
}

#central-image.central-image-gr {
    background-image: url(../img/central-images/gr.svg);
}

#central-image.central-image-am {
    background-image: url(../img/central-images/am.svg);
}

#central-image.central-image-americas {
    background-image: url(../img/central-images/americas.svg);
}

#central-image.central-image-europe {
    background-image: url(../img/central-images/europe.svg);
}

#central-image.central-image-asia {
    background-image: url(../img/central-images/asia.svg);
}

#central-image.central-image-middle-east-and-africa {
    background-image: url(../img/central-images/mea.svg);
}

#slogan h1 {
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #fff;
    font-size: 6vw;
    font-family: "VujahdayScript-Regular";
}

#slogan h1 span {
    opacity: 0.65;
    display: inline-block;
}

#slogan h1 .h1-bold {
    color: #a5f904;
}

#slogan h1 .h1-bold.xxl {
    font-size: 9vw;
    line-height: 8vw;
    color: #a5f904;
    opacity: 1;
}

input[type="checkbox"] {
    display: none;
}

label[for="burger"] {
    width: 10vw;
    height: 10vw;
    cursor: pointer;
    z-index: 3;
    position: absolute;
    transition-delay: 0.5s;
    top: 8.5vw;
    right: 7vw;
    background-color: #2E75C9;
    border-radius: 10vw;
}

input[type="checkbox"]:checked~label .top {
    -webkit-transform: translateY(1.2vw) rotateZ(45deg);
    -moz-transform: translateY(1.2vw) rotateZ(45deg);
    -ms-transform: translateY(1.2vw) rotateZ(45deg);
    -o-transform: translateY(1.2vw) rotateZ(45deg);
    transform: translateY(1.2vw) rotateZ(45deg);
}

.bar {
    display: block;
    background-color: #fff;
    width: 7vw;
    height: 0.6vw;
    margin: 0 auto;
    transition: background-color .5s ease-in, transform .5s ease-in;
}

.bar.top {
    margin-top: 3.5vw;
}

.bar.bottom {
    margin-top: 1.8vw;
}

input[type="checkbox"]:checked~label .bottom {
    -webkit-transform: translateY(-1.2vw) rotateZ(-45deg);
    -moz-transform: translateY(-1.2vw) rotateZ(-45deg);
    -ms-transform: translateY(-1.2vw) rotateZ(-45deg);
    -o-transform: translateY(-1.2vw) rotateZ(-45deg);
    transform: translateY(-1.2vw) rotateZ(-45deg);
}

input[type="checkbox"]:checked~#main {
    transform: translateY(60vw);
    transition: background-color .5s ease-in, transform .5s ease-in;
}

#main {
    transition: transform .5s ease-in;
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background-color: #2E75C9;
}

#menu {
    background-color: #fff;
    width: 100vw;
    min-height: 100vh;
    position: absolute;
}

/************************************************ FILTERS ************************************************/

#filters {
    display: flex;
    position: relative;
    flex-direction: column;
    margin-top: 4vw;
}

#sort-btns {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin: auto;
    position: sticky;
    top: 0;
}

#sort-btns-wrapper {
    width: 100vw;
    height: 20vw;
    position: sticky;
    top: 0;
    margin-bottom: 3vw;
    background-color: #2E75C9;
    z-index: 1;
}

#sort-btns>div {
    position: absolute;
    width: 13vw;
    height: 7vw;
    display: flex;
    background: #2E75C9;
    box-shadow: -1vw -1vw 2vw 0px rgba(255, 255, 255, 0.10), 1vw 1vw 2vw 0px rgba(0, 0, 0, 0.10);
    font-family: 'Roboto-Medium', sans-serif;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    border-radius: 7vw;
    color: #fff;
    cursor: pointer;
    transition: all 0.5s;
    bottom: 6vw;
    font-size: 3.5vw;
    line-height: 7.5vw;
    opacity: 0.6;
}

#sort-btns #scroll-logo {
    opacity: 0;
    pointer-events: none;
    background-image: url(../img/logo.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8vw;
    width: 20vw;
    height: 100%;
    transition: opacity 1s;
    bottom: 0;
    box-shadow: unset;
    border-radius: unset;
}

#sort-btns-wrapper.sticked {
    box-shadow: 0 3vw 5vw 0 #00000033;
}

#sort-btns-wrapper.sticked #scroll-logo {
    opacity: 1;
    pointer-events: all;
}


#sort-btns.days>#sort-days,
#sort-btns.gb>#sort-gb,
#sort-btns.price>#sort-price {
    box-shadow: -1vw -1vw 2vw -1vw rgba(255, 255, 255, 0.2) inset, 1vw 1vw 2vw -1vw rgba(0, 0, 0, 0.2) inset;
    bottom: 10vw;
    opacity: 1;
}

#sort-btns.best>#sort-best {
    box-shadow: -1vw -1vw 2vw -1vw rgba(255, 255, 255, 0.2) inset, 1vw 1vw 2vw -1vw rgba(0, 0, 0, 0.2) inset;
    opacity: 1;
}

#sort-btns>div#sort-text {
    right: 83vw;
    box-shadow: none;
    transition: opacity 1s;
}

.sticked #sort-btns>div#sort-text {
    opacity: 0;
}

#sort-btns>div#sort-best {
    right: 58.5vw;
    width: 20vw;
}

#sort-days {
    right: 40.5vw;
}

#sort-gb {
    right: 22.5vw;
}

#sort-price {
    right: 4.5vw;
}

#sort-btns>#sort-indicator {
    position: absolute;
    width: 6.5vw;
    height: 3.5vw;
    background-image: url(../img/sortarrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 0;
    box-shadow: unset;
    bottom: 4.5vw;
    transition: all 0.3s, opacity 0s;
    opacity: 1;
}

#sort-btns.best>#sort-indicator {
    opacity: 0;
}

#sort-btns.days>#sort-indicator {
    left: 50vw;
}

#sort-btns.gb>#sort-indicator {
    left: 68vw;
}

#sort-btns.price>#sort-indicator {
    left: 86vw;
}

#sort-btns.dsc>#sort-indicator {
    transform: scaleY(-1);
}

#regions {
    display: flex;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 95vw;
    margin: 5vw auto 5vw;
    transition: 0.5s;
}

#regions>div,
#countries>div {
    height: 8vw;
    background-color: #fff;
    border-radius: 6.5vw;
    filter: drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.05));
    margin: 1vw;
    font-family: 'Roboto-Bold', sans-serif;
    font-weight: 600;
    color: #2E75C9;
    font-size: 4vw;
    line-height: 8vw;
    padding: 0 3.5vw;
    cursor: pointer;
}

#countries {
    margin: 2vw auto 4vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 1;
    transition: 0.5s;
}

#countries>div {
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    padding: 0 2.5vw 0 0;
    display: flex;
    cursor: pointer;
}

#countries>div.selected,
#regions>div.selected {
    background-color: #44D021;
    color: #fff;
}

#countries .flag,
#all-countries .flag {
    width: 6vw;
    height: 6vw;
    margin: 1vw;
    margin-right: 1vw;
    border-radius: 5vw;
    background-size: cover;
    box-shadow: 0 0 1vw 0 rgba(0, 0, 0, 0.25) inset;
}

#search-wrapper {
    margin: 4vw auto 0;
    border-radius: 8vw;
    overflow: hidden;
    transition: 0.5s;
    width: 55vw;
    height: 8vw;
    z-index: 10;
    position: relative;
}

#searchform input {
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    font-size: 4vw;
    color: #fff;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background-color: #2668B5;
    background-image: url(../img/search.svg);
    background-repeat: no-repeat;
    background-position: 2vw center;
    padding-left: 2vw;
    background-size: 10%;
}

#searchform input::placeholder {
    color: #fff;
    opacity: 0.8;
}

.search #searchform input::placeholder {
    opacity: 0;
}

.search #search-wrapper {
    width: 70vw;
    height: 12vw;
}

#all-countries {
    height: 0;
    opacity: 0;
    transition: 0.5s;
    width: 95vw;
    margin-top: 3vw;
    overflow: hidden;
}

#all-countries-inner {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    left: 10vw;
}

.search #all-countries {
    height: 360vw;
    opacity: 1;
}

#all-countries-inner>div {
    width: 45vw;
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    font-size: 3.5vw;
    color: #fff;
    margin: 0;
    line-height: 8vw;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

#all-countries-inner .country-name,
#all-countries-inner .country-name-wrapper {
    width: 39vw;
    padding: 2vw 1vw;
    line-height: 4vw;
}

/************************************************ PLANS ************************************************/

#plans {
    background-color: #F5F5F5;
    width: 100vw;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.plan {
    background-color: #fff;
    width: 95vw;
    border-radius: 4vw;
    margin: 2.5vw 2.5vw 0 2.5vw;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    top: -5vw;
    position: relative;
    opacity: 1;
    transition: all 0.5s;
    overflow: hidden;
    cursor: pointer;
}

.plan.collapsed {
    height: 25vw !important;
}

.plan-name {
    font-size: 3.5vw;
    font-family: 'Roboto-Bold', sans-serif;
    font-weight: 600;
    color: #5C5C5C;
    margin-block-start: 0;
    margin-block-end: 0;
    position: absolute;
    top: 2vw;
    left: 4vw;
    width: 87vw;
}

.plan .carrier-logo {
    position: absolute;
    top: 7vw;
    left: 4vw;
    width: 7.7vw;
    height: 7.7vw;
    border-radius: 1.8vw;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.plan .carrier-logo.dtac {
    background-image: url(../img/carriers/dtac.png);
}

.plan .carrier-logo.orange {
    background-image: url(../img/carriers/orange.png);
}

.plan .carrier-logo.orangefr {
    background-image: url(../img/carriers/orange.png);
}

.plan .carrier-logo.tmobile {
    background-image: url(../img/carriers/tmobile.png);
}

.plan .carrier-logo.travelsis {
    background-image: url(../img/carriers/travelsis.png);
}

.plan .carrier-logo.meo {
    background-image: url(../img/carriers/meo.png);
}

.plan .carrier-logo.esimeuro {
    background-image: url(../img/carriers/esimeuro.png);
}

.plan .carrier-logo.vodafone {
    background-image: url(../img/carriers/vodafone.png);
}

.plan .carrier-logo.altice {
    background-image: url(../img/carriers/altice.webp);
}

.plan .carrier-logo.hot {
    background-image: url(../img/carriers/hot.png);
}


.options {
    left: 14vw;
    top: 8.5vw;
    position: absolute;
    display: flex;
}

.options div {
    width: 5vw;
    height: 5vw;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 0.5vw;
}

.options .option-tethering {
    background-image: url(../img/options/tethering.png);
}

.options .option-calls {
    background-image: url(../img/options/calls.svg);
}

.options .option-messengers {
    background-image: url(../img/options/messengers.svg);
}

.options .option-kyc {
    background-image: url(../img/options/face.png);
}

.options .option-unlim {
    background-image: url(../img/options/unlim.svg);
}

.options .paris2024 {
    background-image: url(../img/options/paris2024.svg);
}

.maininfo {
    position: absolute;
    left: 44vw;
    top: 7.3vw;
    display: flex;
    font-size: 6vw;
}

.maininfo .days {
    font-family: 'Roboto-Bold', sans-serif;
    font-weight: 600;
    color: #2E75C9;
    width: 11vw;
    text-align: center;
}

.maininfo .gb {
    font-family: 'Roboto-Bold', sans-serif;
    font-weight: 600;
    color: #797979;
    width: 12vw;
    text-align: right;
}

.maininfo .gb span {
    top: -2px;
    position: relative;
}

.maininfo .gb-label,
.price .currency-sign {
    font-family: "Roboto-Thin", sans-serif;
    font-weight: 100;
    color: #A6A6A6;
    width: 8vw;
}

.maininfo .price {
    font-family: 'Roboto-Bold', sans-serif;
    font-weight: 600;
    color: #44D021;
    width: 17vw;
    text-align: right;
}

span.decimal-part {
    vertical-align: top;
    font-size: 4vw;
    line-height: 5vw;
    font-family: 'Roboto-Light';
}

.plan .addinfo {
    position: absolute;
    top: 14vw;
    left: 4vw;
    width: 46vw;
    height: 7.4vw;
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    color: #A6A6A6;
    font-size: 3vw;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

.plan-wrapper {
    position: relative;
}

.plan .details {
    position: relative;
}

.plan .addinfo.days-addinfo {
    width: 11vw;
    left: 44vw;
    text-align: center;
    justify-content: center;
    align-content: flex-start;
}

.plan .addinfo.gb-addinfo {
    width: 19vw;
    left: 56.3vw;
    justify-content: right;
    align-content: flex-start;
    text-align: right;
}

.plan .addinfo.plan-addinfo {
    top: 16vw;
}

.details {
    position: relative;
    top: 25vw;
    padding-bottom: 6vw;
}

.btn {
    width: 40vw;
    height: 10vw;
    margin: 5vw auto;
    background-color: #2E75C9;
    color: #fff;
    font-family: 'Roboto-Bold', sans-serif;
    font-weight: 600;
    font-size: 3vw;
    border-radius: 2vw;
    box-shadow: 1vw 1vw 3vw 0 rgba(0, 0, 0, 0.10);
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    cursor: pointer;
}

#separator {
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    color: #A6A6A6;
    font-size: 4vw;
    margin-bottom: 7vw;
    margin-top: 3vw;
    transition: all 0.5s;
}

/************************************************ FLAGS ************************************************/


#countries>div.selected .flag {
    background-image: url(../img/selected-country.svg);
}

.hidden {
    opacity: 0 !important;
}

.plan.hidden,
#separator.hidden,
.plan.collapsed.hidden {
    height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 100;
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20vw;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: scroll;
}

.close-modal {
    width: 10vw;
    height: 10vw;
    cursor: pointer;
    z-index: 3;
    position: fixed;
    border-radius: 10vw;
    border-width: 0.7vw;
    border-color: #ccc;
    border-style: solid;
    top: 3vw;
    right: 5.5vw;
}

.close-modal .bottom {
    transform: translateY(-1.2vw) rotateZ(-45deg);
    background-color: #ccc;
}

.close-modal .top {
    transform: translateY(1.2vw) rotateZ(45deg);
    background-color: #ccc;
}

.textinfo {
    margin-top: 10vw;
}

.textinfo p {
    position: relative;
    font-size: 3.5vw;
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    color: rgb(158, 158, 158);
    margin: 0 5vw 0 15vw;
    padding: 1.5vw 0;
}

.textinfo p.icon {
    display: block;
    margin: 0 5vw 0 15vw;
    padding: 1.5vw 0;
}

.textinfo p.icon::before {
    position: absolute;
    display: block;
    left: -11vw;
    width: 5vw;
    height: 6.5vw;
    top: 0vw;
    content: "";
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

.textinfo p.icon.local-number::before {
    background-image: url(../img/options/calls.svg);
}

.textinfo p.icon.tethering::before {
    background-image: url(../img/options/tethering.svg);
}

.textinfo p.icon.unlimited-social::before {
    background-image: url(../img/options/messengers.svg);
}

.textinfo p.icon.id-check::before {
    background-image: url(../img/options/face.svg);
}

.textinfo p.icon.coverage::before {
    background-image: url(../img/options/coverage.svg);
}

.textinfo p.icon.data::before {
    background-image: url(../img/options/data.svg);
}

.textinfo p.icon.roaming::before {
    background-image: url(../img/options/roaming.svg);
}

.textinfo p.icon.unlim::before {
    background-image: url(../img/options/unlim.svg);
}

.textinfo p.icon.carrier-dtac::before {
    background-image: url(../img/carriers/dtac.png);
}

.textinfo p.icon.carrier-orange::before {
    background-image: url(../img/carriers/orange.png);
}

.textinfo p.icon.carrier-tmobile::before {
    background-image: url(../img/carriers/tmobile.png);
}

.textinfo p.icon.carrier-travelsis::before {
    background-image: url(../img/carriers/travelsis.png);
}

.textinfo p.icon.carrier-meo::before {
    background-image: url(../img/carriers/meo.png);
}

.textinfo p.icon.carrier-esimeuro::before {
    background-image: url(../img/carriers/esimeuro.png);
}

.textinfo p.icon.carrier-vodafone::before {
    background-image: url(../img/carriers/vodafone-i.png);
}

.textinfo p.icon.carrier-altice::before {
    background-image: url(../img/carriers/altice-i.png);
}

.textinfo p.icon.carrier-hot::before {
    background-image: url(../img/carriers/hot.png);
}

.textinfo p.icon.paris2024::before {
    background-image: url(../img/options/paris2024.svg);
}

.textinfo p.icon.speed::before {
    background-image: url(../img/options/speed.png);
}

#menu-inner {
    width: 60vw;
    margin: 20vw;
}

#menu-inner div {
    display: flex;
    justify-content: left;
    font-family: 'Roboto-Bold', sans-serif;
    font-weight: 600;
    color: #2E75C9;
    font-size: 4vw;
    line-height: 10vw;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#page-content {
    min-height: 80vh;
    padding-top: 5vw;
    background-color: rgb(245, 245, 245);
    display: flex;
    flex-flow: column;
}

#page-content-inner {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    align-content: center;
    flex-wrap: wrap;
}

#modalSelectedProduct {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 2.5vw;
    width: 95vw;
    height: 28vw;
    fill: #FFF;
    background-color: #fff;
    box-shadow: 0px 0px 10vw rgba(0, 0, 0, 0.15);
    border-radius: 0 0 5vw 5vw;
    overflow: hidden;
    padding-top: 8vw;
}

#header-wrapper {
    transition: all 1s;
    position: relative;
    min-height: 45vw;
    width: 100%;
}

#header-wrapper #modalSelectedProduct {
    position: absolute;
}

.removeProductSteps #header-wrapper {
    margin-top: -70vw;
}

.removeProductSteps .close-modal {
    margin-top: -70vw;    
}

#modalSelectedProduct .plan {
    width: 100%;
    height: 100%;
    margin: 0;
    margin-top: 2vw;
    top: 0;
    box-shadow: unset;
}

#modalSelectedProduct>.plan-wrapper {
    width: 100%;
    height: 100%;
}

#modalSelectedProduct .maininfo {
    left: 40vw;
}

#modalSelectedProduct .days-addinfo {
    left: 40vw;
}

#modalSelectedProduct .gb-addinfo {
    left: 50.3vw;
}

#modal .ok-body-wrapper {
    margin: 70vw auto 0;
}

#modal.okModal {
    background-image: none;
}

#modal.okModal .text-div {
    margin: 5vw auto;
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    font-size: 5vw;
    text-align: center;
    padding: 0 10vw;
}

/************************************************ checkmark animation ************************************************/

.ok-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.checkmark,
.xmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
}

.checkmark {
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}

.xmark {
    animation: scale .3s ease-in-out .1s both
}



.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: scale3d(1.1, 1.1, 1)
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142
    }
}

/************************************************ badges animation ************************************************/

.badge-top {
    position: absolute;
    top: -4.3vw;
    left: 63vw;
    width: 30vw;
    height: 7vw;
    font-family: 'Roboto-Medium';
    font-weight: 300;
    color: #fff;
    font-size: 3vw;
    display: flex;
    justify-content: center;
    padding-top: 1.2vw;
    background-image: url(../img/badge-top.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.badge-right {
    position: absolute;
    top: 13vw;
    right: 0.7vw;
    width: 28vw;
    height: 9vw;
    font-family: 'Roboto-Bold';
    font-size: 3.5vw;
    display: flex;
    background-image: url(../img/badge-right.svg);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: right;
    color: #fff;
    justify-content: center;
    flex-wrap: nowrap;
    padding-left: 5vw;
    line-height: 7.5vw;
}

/************************************************ footer ************************************************/

#footer {
    min-height: 12vw;
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    font-size: 4vw;
    line-height: 8vw;
    color: #ffffff;
}

#footer p {
    text-align: center;
    line-height: 5vw;
    margin: 0;
    width: 100%;
}

#footer-logo {
    height: 15vw;
    margin: 5vw;
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    background-size: auto 12vw;
    background-position: center bottom;
}

#footer-socials {
    margin: 5vw;
    display: flex;
    justify-content: center;
}

#footer-socials div,
#footer-up-btn {
    width: 14vw;
    height: 14vw;
    margin: 2vw;
    border-radius: 12vw;
    box-shadow: -1vw -1vw 3vw 0vw rgba(255, 255, 255, 0.15), 1vw 1vw 3vw 0vw rgba(0, 0, 0, 0.15);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    opacity: 0.8;
    cursor: pointer;
}

#footer-socials-fb {
    background-image: url(../img/social/fb.svg);
}

#footer-socials-ig {
    background-image: url(../img/social/ig.svg);
}

#footer-links {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 8vw;
    margin-left: 8vw;
}

#footer-links>div {
    width: 45vw;
}

#footer-links li,
#footer-links ul {
    font-size: 4vw;
    list-style-type: none;
    padding: 0;
    margin: 0;
    opacity: 0.8;
}

#footer-brands {
    margin: 12vw 0 12vw 8vw;
    display: flex;
    flex-wrap: wrap;
}

#footer-brands>p {
    width: 84vw;
}

#footer-brands>div {
    display: flex;
    align-items: center;
    width: 45vw;
    margin-top: 3vw;
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
}

#footer-brands img {
    margin-right: 3vw;
}

#footer-up {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 8vw;
}

#footer-up-btn {
    background-image: url(../img/up.svg);
}

#footer-up-text {
    width: 100%;
    text-align: center;
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    opacity: 0.8;
}

/* *************** STEPS *************** */

#steps {
    width: 95vw;
    display: flex;
    flex-flow: row;
    justify-content: center;
    position: relative;
    margin-top: 45vw;
    margin-left: 2.5vw;
    margin-bottom: 0;
}

.okModal #steps {
    position: fixed;
    top: 0;
}

#steps .step {
    flex: 1 1 0;
    position: relative;
}

.step-0.done {
    cursor: pointer;
}

#modal .step .outer-circle {
    position: relative;
    width: 6vw;
    height: 6vw;
    background-color: #FFF;
    margin: auto;
    border-radius: 6vw;
    border-color: #efefef;
    border-style: solid;
    border-width: 2vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

#modal .step.done .outer-circle {
    background-color: #efefef;
}

#modal .step.current .outer-circle {
    border-color: #2E75C9;
}

#modal .step .inner-circle {
    width: 3vw;
    height: 3vw;
    border-radius: 3vw;
    background-color: #44D021;
    display: none;
}

#modal .step.current .inner-circle {
    display: block;
}

#modal .step p {
    margin-top: 3vw;
    text-align: center;
    color: #ccc;
    font-size: 3.5vw;
    font-family: 'Roboto-Bold', sans-serif;
    font-weight: 600;
}

#modal .step.current p {
    color: #2E75C9;
}

#modal .step .line {
    position: absolute;
    top: 4vw;
    width: 100%;
    left: 50%;
    height: 2vw;
    background-color: #efefef;
}

#modal .step:last-child .line {
    width: 0;
}

/* *************** ORDER PROCESSING *************** */

#order-confirmation {
    width: 80vw;
    padding-bottom: 20vw;
}

#order-confirmation .email-input-div {
    width: 80vw;
/*    height: 13vw; */
    position: relative;
    margin-top: 4vw;
    padding-bottom: 1vw;
}

#order-confirmation .email-input-div input {
    width: 90%;
    height: 10vw;
    margin-top: 1.5vw;
    margin-left: 5%;
    border: none;
    font-size: 4vw;
}

#order-confirmation .email-placeholder {
    position: absolute;
    width: auto;
    height: 14vw;
    left: 2vw;
    background-color: #fff;
    pointer-events: none;
    top: 0vw;
    line-height: 14vw;
    font-size: 4vw;
    transition: 0.5s;
    color: #ccc;
    padding: 0 2vw;
}

#order-confirmation .email-border {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: #aaa 0.5vw solid;
    border-radius: 2vw;
    pointer-events: none;
}

#order-confirmation .email-input-div input:focus~.email-border {
    border-color: #2E75C9;
}

#order-confirmation .email-input-div input:focus~.email-placeholder {
    color: #2E75C9;
}

#order-confirmation .email-input-div input.error~.email-border {
    border-color: #d00e0e;
    border-width: 0.7vw;
}

#order-confirmation .email-input-div input.error~.email-placeholder {
    color: #d00e0e;
    font-family: 'Roboto-Bold', sans-serif;
    font-weight: 600;
}

#order-confirmation .email-input-div input:focus~.email-placeholder,
#order-confirmation .email-input-div input:valid~.email-placeholder {
    height: 3vw;
    line-height: 3vw;
    z-index: 1;
    top: -1.5vw;
    font-size: 3.5vw;
}

.email-header,
.payment-header {
    margin: 10vw 0 0;
    color: #5C5C5C;
    font-size: 4vw;
}

#activation-date {
    width: 74vw;
    height: 13vw;
    border-radius: 2vw;
    border: #999 0.5vw solid;
    font-size: 4vw;
    font-family: arial;
    color: #999;
    padding-left: 3vw;
    padding-right: 3vw;
    margin-top: 4vw;
}

.pay-btns {
    width: 80vw;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
}

.pay-btn {
    width: 47vw;
    height: 34vw;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 5vw rgba(0, 0, 0, 0.1);
    border-radius: 5vw;
    cursor: pointer;
    margin-top: 6vw;
}

#pay-by-card-btn {
    background-image: url(../img/card.jpg);
}

#pay-paypal-btn {
    width: 27vw;
    background-image: url(../img/paypal.png);
    background-size: 20vw;
}

#discount-btn {
    width: 100%;
    height: 14vw;
    transition: 1s;
}


#spinner-modal {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-image: url(../img/loading.gif);
    background-size: 10vw;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #FFF;
    z-index: 10;
}

#spinner-modal.spinner-transparent-bg {
    background-color: unset;
    z-index: 200;
}

.inner-spinner {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../img/loading.gif);
    background-size: 10vw;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #FFF;
    z-index: 100;
    top: 0;
}

#paypal-button-outer {
    width: 95vw;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    padding-top: 5vw;
    position: relative;
}

#paypal-button-outer p {
    font-size: 4vw;
    text-align: center;
}

#modal #paypal-button-outer iframe {
    margin-top: 0;
}

#paypal-button-container {
    width: 80vw;
}

.country-name-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.country-name-wrapper p {
    margin: 0;
    line-height: 8vw;
    font-size: 3.5vw;
}

.country-name-wrapper p:nth-child(2) {
    line-height: 3vw;
    font-size: 3vw;
    margin-top: -1vw;
}

/* *************** ADS TEAM PROPS *************** */

body {
    background-color: #004c93;
}

#main {
    background-color: rgb(0, 76, 147);
}

#slogan h1 {
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    font-size: 6vw;
}

#searchform input {
    background-color: rgb(3, 66, 124);
}

#sort-btns-wrapper {
    background-color: #004c93;
}

label[for="burger"] {
    background-color: #004c93;
}

#slogan h1 span {
    opacity: 1;
}

#slogan h1 .h1-bold {
    color: #a5f904;
    font-weight: 500;
    font-family: 'Roboto-Medium', sans-serif;
}

#logo {
    background: url(../img/logo.svg) center center / 9vw no-repeat;
    box-shadow: unset !important;
    margin: 35px 5px 0 35px;
    margin: 7vw 1vw 0 5vw;
}

#slogan h1 .h1-bold.xxl {
    font-family: 'Roboto-Medium', sans-serif;
    font-weight: 500;
    line-height: 7vw;
    font-size: 7vw;
}

#sort-btns>div {
    background: #004c93;
}

.btn {
    background-color: #004c93;
}

.maininfo .days {
    color: #004c93;
}

/* *************** ADS TEAM PROPS *************** */

#showall {
    margin-left: 3vw;
}

.appearing {
    -webkit-animation: fadeInFromNone 3s ease-out;
    -moz-animation: fadeInFromNone 3s ease-out;
    -o-animation: fadeInFromNone 3s ease-out;
    animation: fadeInFromNone 3s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


#showmore {
    background-color: #44D021;
    margin: 4vw auto 14vw;
}

#modal iframe.idcheck {
    height: 85vh !important;
    margin-top: 0;
}

input[type="date"] {
    position: relative;
}


input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

#payment-method-selector {
    margin-top: 40vw;
    width: 80vw;
}

.btn-container {
    margin-top: 5vw;
    display: flex;
}

#order-confirmation .btn {
    width: 45vw;
}

#order-confirmation {
    padding-bottom: 0vw;
}

.viewonly .buybtn {
    display: none;
}

#discount-btn {
    position: relative;
    overflow: hidden;
}

#promocode {
    width: calc(100% - 26vw);
    border-radius: 5vw;
    padding: 0 20vw 0 6vw;
    font-size: 5vw;
    position: absolute;
    height: 100%;
    border: 0;
    font-family: 'Roboto-Light';
}

#promocode-placeholder {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    font-size: 4vw;
    font-family: 'Roboto-Light';
    color: #5C5C5C;
    pointer-events: none;
    transition: opacity 0.5s;
}

#promocode-apply-btn {
    margin: 2vw;
    width: 20vw;
    height: 10vw;
    border-radius: 3vw;
    padding: 0 5vw;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity 1s;
    width: min-content;
}

#promocode:focus~#promocode-placeholder, #promocode:valid~#promocode-placeholder, #promocode:disabled~#promocode-placeholder {
    opacity: 0;
}

#promocode:valid~#promocode-apply-btn {
    opacity: 1;
}

.loading-bg {
  animation: grey-pulse 1.5s ease-in-out infinite;
}

@keyframes grey-pulse {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.2;
  }
}

#discount-btn .input-div {
    height: 14vw;
    position: relative;
}

#discount-btn.red {
    height: 40vw;
    background-color: #d022226e;
}

#discount-btn.green {
    height: 40vw;
    background-color: #44d0226e;
}

#discount-message {
    width: calc(100% - 8vw);
    height: 18vw;
    padding: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vw;
    text-align: center;
}

.old-price {
    position: relative;
    width: 17vw;
    font-size: 3vw;
    text-align: right;
    text-decoration: line-through;
    font-family: "Roboto-Light", sans-serif;
    font-weight: 300;
    color: #A6A6A6;
}

.price.discount-shown {
    transform: rotate(-5deg);
    margin-top: -1vw;
}

.price.discount-shown .old-price{
    transform: rotate(10deg);
    margin-top: -1.6vw;
    margin-left: -2vw;
}

.inactive {
    pointer-events: none;
    cursor: unset;
    opacity: 0.5 !important;
}

#email-suggestions {
    position: relative;
    width: 100%;
}

#email-suggestions > div {
    background-color: #ffffff;
    margin: 2% 5%;
    width: fit-content;
    padding: 1vw 3vw;
    border-radius: 5vw;
    font-family: 'Roboto-Medium';
    color: #2e76c9;
    filter: drop-shadow(0 0 1vw #00000033);
    cursor: pointer;
}

#announce {
    height: 15vw;
    background-color: #fff;
    width: 95vw;
    border-radius: 4vw;
    margin: 2.5vw 2.5vw 0 2.5vw;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    top: -5vw;
    position: relative;
    opacity: 1;
    transition: all 0.5s;
    overflow: hidden;
    cursor: pointer;
    background: #fffda4;
}

.announce-icon {
    background-image: url(../img/carriers/esimeuro.png);
    position: absolute;
    top: 3.65vw;
    left: 4vw;
    width: 7.7vw;
    height: 7.7vw;
    border-radius: 1.8vw;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
}

#announce .close-modal {
    position: absolute;
    width: 8vw;
    height: 8vw;
    border-width: 0.5vw;
    top: 3.2vw;
    right: 3.2vw;
    cursor: pointer;
    border-color: #004c93;
}

#announce .content {
    width: 65vw;
    margin-left: 15.7vw;
    height: 10vw;
    margin-top: 2.5vw;
    font-size: 4vw;
    opacity: 1;
    font-family: 'Roboto-Bold';
    color: #004c93;
}

#announce .close-modal .bar {
    width: 5.6vw;
    height: 0.48vw;
    background-color: #004c93;
}

#announce .close-modal .top {
    transform: translateY(0.4vw) rotateZ(45deg);
}

#announce .close-modal .bottom {
    transform: translateY(-1.8vw) rotateZ(-45deg);
}

#announce.closed {
    height: 0;
    margin: 0;
    opacity: 0;
}

.btn-disabled {
  background-color: #ccc;           
  pointer-events: none;  
  cursor: not-allowed;   
  box-shadow: none !important;
}

.btn-loading {
    position: relative;
    overflow: hidden;
    pointer-events: none; 
    cursor: not-allowed;
    color: #fff; /* текст видимый */
    opacity: 0.5;
    box-shadow: none !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.3) 50%,
        rgba(255,255,255,0) 100%
    );
    animation: btn-shimmer 2s infinite;
}

@keyframes btn-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.plan a {
    color: #9e9e9e;
    text-decoration: underline;
}