html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; font-family: "Noto Sans", sans-serif; }
:focus { outline: 0; }
body { line-height: 1; }
ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html { height: 100%; width: 100%; }
a { text-decoration:none; }
strong, b { font-weight:700; }
.clear { clear:both; padding:0px !important; margin:0px !important; width:auto !important; height:auto !important; border:0px !important; float: none !important; background: none repeat scroll 0 0 transparent !important; min-height:inherit !important; }
.clear:before, .clear:after { display: none;}
button { cursor:pointer; }
/* ------------- */
body { width: 100%; height: 100%; }
.footer-new { position:relative !important; }

.wrapper { width:100%; position:relative; }
body .box-container { position: relative; overflow: hidden; }

    .wrap1470 { position:relative; max-width:1470px; margin:0 auto; }
    .wrap1390 { position:relative; max-width:1390px; margin:0 auto; }

/* --- HEADER --- */
.top-color-wrapper { background:#022831; width:100%; position:relative; }
@media (min-width:720px){
    .top-color-wrapper:before { content:''; position:absolute; width:926px; height:1690px; top:0; left:0; background:url('../images/v2/top-left.png') no-repeat; z-index:2; }
    .top-color-wrapper:after { content:''; position:absolute; width:869px; height:1047px; top:0; right:0; background:url('../images/v2/top-right.png') no-repeat; z-index:2; }
}
    .header-back .grading-test-2 { position: relative; }
    .header-back .grading-test-2:before { width: 100%; height: 100%; padding-bottom: 50px; background:url('../images/v2/bg.png') no-repeat; background-size: cover; position: absolute; content: ""; }

    .header-back .grading-head-1 { position: relative; padding-top: 90px; padding-bottom: 50px; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(96, 190, 165, 0.3) 0%, rgba(95, 189, 163, 1) 49%, rgba(95, 189, 163, 0.3) 100%); }
    .header-back .grading-head-1:before { width: 100%; height: 30px; position: absolute; content: ""; background: linear-gradient(90deg, rgba(2, 40, 49, 1), rgba(30, 89, 87, 0.12), rgba(2, 40, 49, 1)); top: -30px; }
    .header-back .grading-head-2 { width: 100%; padding-bottom: 40px; background: linear-gradient(90deg, rgba(2, 40, 49, 1), rgba(30, 89, 87, 0.3), rgba(2, 40, 49, 1)); }
    .header-back .big-white-link { padding-top: 0; position: relative; z-index: 4; margin-top: -45px; }
    .header-back .header-gold { background:url('../images/v2/gold.png') no-repeat; width: 1400px; height: 309px; margin: -15px 0; }

    .header { padding-top: 170px; position:relative; }
        .header:before { content:''; position:absolute; width:1429px; height:688px; top:300px; left:calc(50% - 728px); background:url('../images/v2/bg-gold.png') no-repeat; z-index:2; }
    .head-wrap { z-index: 3; }
    .years20-circle { background:rgba(2, 40, 49, 0.4); width:180px; height:180px; box-shadow:0 4px 4px rgba(193, 236, 215, .1); border-radius:100px; margin: 0 auto; position: absolute; left: 50%; transform: translate(-50%, 0); top: -190px; }
        .years20-circle > div { background:url('../images/v2/20.svg') no-repeat 50% 50%; position: relative; margin:0 auto; height:100%; /*top: 39px; padding-top: 21px;*/ }
        @-moz-document url-prefix() {
            .years20-circle > div { color:#fff; }
        }
        .years20-circle > div > strong { font-size:82px; font-family:Impact, sans-serif; font-weight: 400; }
        .years20-circle > div > span { font-size:28px; font-weight: 600; left: 50%; max-width: 100px; width: auto; line-height: 32px; transform: translate(-50%, 0); top: 127px; position: absolute; text-align: center; background: linear-gradient(90deg, #807A97 0%, #FFFFFF 25%, #FFFFFF 75%, #807A97 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }


        .header h1 { font-size:30px; line-height:36px; color:#fff; text-align:center; font-weight:700; padding: 0 20px 20px; margin-bottom:0 !important; }
            .header-prize > p { color: #fff !important; text-align: center; text-shadow: 0px 5px 10px #022831; font-size: 72px; font-weight: 700; line-height: 120%; margin:0; }
            .header-prize div { }

        .header-desc { padding-top: 0; }
            .header-desc > p { color: #002229 !important; text-align: center; font-size: 30px; font-weight: 700; line-height: 34px; padding-bottom: 10px; margin-bottom:0 !important; }
            .header-desc > p > span { white-space: nowrap; display: inline-block; direction: ltr; }
            .header-desc > div { color: #002229; text-align: center; font-size: 18px; line-height: 24px; }

        .header-numbers { display:grid; justify-content:center; grid-template-columns: auto 40px auto; gap:20px; padding-top: 20px; padding-bottom: 20px; }
            .header-numbers > div { display:grid; grid-template-columns: auto auto; gap:10px; align-items:center; }
                .header-numbers > div > div, .header-plus { color: #D3DFE1; font-size: 64px; font-weight: 700; line-height: 76px; letter-spacing: 1px; }
                .header-numbers > div > p { color: #D3DFE1; font-size: 20px; font-weight: 500; line-height: 24px; margin-bottom: 0 !important; }

        .big-white-link { padding-top:24px; }
            .big-white-link > a { display:table; margin:0 auto; border-radius: 50px; background: #F08C45; padding:25px 50px; color: #fff !important; font-size: 28px; font-weight: 600; text-decoration: none !important; text-align: center; }
            .big-white-link > a:hover { background: #FFA565; }

    .mid-wrapper { width:100%; position:relative; padding-top:110px; }
        .mid-back { border-radius: 20px; border: 1px solid rgba(95, 176, 156, 0.30); background: rgba(8, 66, 70, 0.60); box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.04); backdrop-filter: blur(25px); z-index: 2; position:relative; }
        .mid-back + .mid-back { margin-top:30px; }
            .challenge-block { padding:30px 40px 25px; }
                .challenge-block > h2 { color: #fff !important; font-size: 40px; line-height:48px; font-weight: 700; margin-bottom:10px !important; max-width: 800px; }
                .challenge-block > p { padding-top:10px; color: #fff !important; font-size: 14px; line-height:20px; font-weight: 500; padding-bottom:20px; margin-bottom:0 !important; max-width: 800px; }
                .challenge-block .mob-only-place { display: none; color: #6EFFD8; font-size: 12px; font-weight: 300; text-align: center; text-transform: capitalize; }
                .challenge-block .mob-only-place > i { display: block; position: relative; width: 50px; height: 40px; background:url('../images/v2/place.svg') no-repeat 50% 100%; font-style: normal; font-family: "Alumni Sans", sans-serif; color: #6EFFD8; font-size: 32px; text-align: center; line-height: 44px; margin: 0 auto 3px; }
                .top-challenge > h2, .top-challenge > p { text-align: center; max-width: 100% !important; }

                .grid-jspace { display: grid; justify-content: space-between; grid-template-columns: auto auto; padding-bottom:30px; }
                    .grid-jspace > div { }
                    .grid-jspace > div + div { text-align:right; }
                        .grid-jspace > div strong { color: #fff; font-size: 12px; font-weight: 500; }
                        .grid-jspace > div span { color: #5FE1C0; font-size: 20px; font-weight: 700; }

                .challenge-grid { display:grid; gap:2px; }
                .grid-42 { grid-template-columns: repeat(42, auto); }
                .grid-10 { grid-template-columns: repeat(10, auto); }
                .grid-51 { grid-template-columns: repeat(51, auto); }
                .grid-12 { grid-template-columns: repeat(12, auto); }
                .grid-solo { padding:30px 0 20px; }
                    .challenge-grid > div { position:relative; height: 5px; }
                    .challenge-grid > div:before { border-radius: 5px; background: #55787A; height:3px; width:100%; content:''; position:absolute; left:0; top:0; }
                    .challenge-grid > div.past:before { opacity:0.5; }
                    .challenge-grid > div.active:before { background:#5FE1C0; }
                        .challenge-grid > div > span { color: #FFF; text-align: center; font-size: 11px; font-weight: 400; display:block; position: absolute; top: -18px; width: 100%; }
                        .challenge-grid > div.active > span { color: #5FE1C0 !important; }
                        .challenge-grid > div.past > span { color: rgba(255,255,255,.5) !important; }
                        .challenge-grid > div > strong { display:block; text-align:center; padding-top:4px; color: #fff; font-size: 11px; line-height: 15px; font-weight:400; }
                        .challenge-grid > div.past > strong { color: rgba(255,255,255,.5) !important; }
                        .challenge-grid > div.active > strong { color: #5FE1C0; }
                        .challenge-grid > div > span > i,
                        .challenge-grid > div > strong > i { font-style: normal; }

                    .ch-blocks-left-right { display:grid; grid-template-columns: auto auto; justify-content: space-between; }
                        .ch-blocks-left { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:40px; }

                        .challenge-timer { position:absolute; top:10px; right:10px; border-radius: 10px; background: rgba(82, 173, 150, 0.2); padding:10px 16px; }
                        body[dir=rtl] .challenge-timer { right:auto; left:10px; }
                            .challenge-timer p { color: #fff !important; font-size: 12px; line-height:18px; font-weight: 500; margin-bottom:0 !important; text-align: center; max-width: 210px; }
                            .ch-timer-blocks { display: flex; justify-content: center; }
                                .ch-timer-blocks div { color: #fff; font-size: 10px; line-height:14px; font-weight: 500; margin-right: 10px; margin-left: 10px; text-align: center; }
                                .ch-timer-blocks div strong { color: #6FFFD8; font-size: 20px; line-height:28px; font-weight: 700; display:block; min-height: 28px; }

                            .ch-place-block { }
                                .ch-place-block > p { margin-bottom:0 !important; }
                                    .ch-place-block > p span { display:inline; padding:2px 4px; background:#5FE1C0; color:#002129; font-size:12px; line-height:18px; font-weight: 500; border-radius: 1px; }
                                .ch-place-block > div { font-size:20px; line-height:28px; color:#FFD79C; font-weight:700; margin-top: 3px; direction: ltr; }
                                body[dir=rtl] .ch-place-block > div { text-align: right; }

                        .ch-blocks-right { display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
                            .ch-fond-block { text-align:right; }
                                .ch-fond-block > p { font-size:12px; line-height:18px; font-weight: 300; color:#FFF !important; margin-bottom:0 !important; }
                                .ch-fond-block > div { font-size:20px; line-height:28px; color:#FFD79C; font-weight:700; direction: ltr; }

                        .challenge-year { width:100%; position:relative; height: 40px; }
                            .challenge-year:before { content:''; position:absolute; left:0; top: 15px; height:3px; border-radius:5px; background: #55787A; width:100%; z-index:1; }
                            .challenge-year > p { color: #FFF !important; text-align: center; font-size: 11px; line-height:15px; margin-bottom:0 !important; }
                            .challenge-year > div { border-radius:5px; background: #5FE1C0; display:table; height:3px; z-index:2; position:relative; }
    @media (min-width:720px){
        .dubai-wrap { width:100%; background:url('../images/v2/dubai.png') no-repeat 50% 100%; min-height:950px; padding-top:74px; }
    }

    .dubai-wrap .mid-wrapper { padding-top:0px; border-radius: 20px; background: linear-gradient(0deg, rgba(2, 40, 49, 0.00) 0%, rgba(4, 47, 55, 0.60) 45.5%, #06383E 79%); box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.04), 0px 10px 50px 0px rgba(30, 30, 30, 0.03); min-height:525px; position:relative; }
        .dubai-wrap .mid-wrapper:before { content:''; position:absolute; left:calc(50% - 580px); top:89px; width:316px; height:316px; background:url('../images/v2/20_trips.png') no-repeat; }

        body[dir=rtl] .dubai-wrap .mid-wrapper:before { left:auto; right:calc(50% - 580px);}

            .dub-block { padding:96px 60px 20px 43%; }
            body[dir=rtl] .dub-block { padding:96px 43% 20px 60px; }
                .special-prize-block { color: #FFD79C; font-size: 32px; font-weight: 600; }
                .dub-block h2 { color: #FFF; font-size: 60px; font-weight: 700; line-height: 70px; padding:30px 0; margin-bottom:0 !important; }
                .dub-block p { color: #FFF !important; font-size: 20px; font-weight: 500; line-height: 28px; margin-bottom:0 !important; }
                .dub-block p + p { padding:20px 0; }
                .dub-block > .big-white-link > a { margin:0; }

.balls-wrapper { width:100%; position:relative; }
.balls-wrapper:before { content:''; position:absolute; left:0; top:0; width:100%; height:250px; background: linear-gradient(0deg, #FFF 0%, #CAE5E9 100%); }
    .balls-wrapper .mid-wrapper { position:relative; }
    .balls-wrapper .mid-wrapper:before { content:''; position:absolute; width:1900px; height:1421px; top:160px; left:calc(50% - 950px); background:url('../images/v2/back-gold.png') no-repeat; }
        .how-get-prize h2 { color: #000; text-align: center; font-size: 48px; font-weight: 700; margin-bottom:0 !important; }
        .hgp-blocks { padding-top:70px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap:40px; }
            .hgp { padding: 0 0px 20px; display: block; margin: 0 20px 50px; min-height: 282px; }
		@media (min-width:1500px){
			.hgp-blocks.hgp-blocks2 { padding-top:0px; grid-template-columns: 1fr 1fr; max-width: 970px; margin: 0 auto; }
		}

                .hgp-task { display:table; color: #707070; font-size: 12px; line-height:20px; font-weight: 300; padding:0px 8px; margin: -1px auto 0; background:#EBEBEB; border-radius:2px; }
                .hgp-ball { background:url('../images/v2/balls.png') no-repeat; width:170px; height:162px; display:table; margin:20px auto; }
                    .hgp-ball > div { padding-top:42px; text-align: center; }
                    .hgp-ball > div strong { font-size: 60px; font-weight: 700; line-height: 44px; background: linear-gradient(180deg, #F9C44B 0%, #794A21 47.9%, #E1B059 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display:block; font-family: Arial, sans-serif; }
                    html[lang=my] .hgp-ball > div strong { margin-bottom: 10px; }
                    .hgp-ball > div span { color: #000; text-align: center; font-size: 18px; font-weight: 500; line-height: 20px; }
                    .hgp-title { font-size:28px; line-height:32px; font-weight:700; text-align:center; color:#000; padding:10px 0; }
                    html[lang=fr] .hgp-title,
                    html[lang=hu] .hgp-title { max-width: 350px; margin-left: auto; margin-right: auto; }
                    .hgp-desc { color: #252935; text-align: center; font-size: 16px; font-weight: 500; line-height: 24px; }

.gray-wrapper { background:#F1F1F1; width:100%; padding:100px 0 130px; }
    .best-time-wrapper { max-width:1400px; margin:0 auto; }
        .best-time-wrapper h2 { color: #000; text-align: center; font-size: 48px; line-height:60px; font-weight: 700; padding-bottom:20px; margin-bottom:0 !important; }
        .best-time-wrapper p { color: #252935 !important; text-align: center; font-size: 20px; font-weight: 500; line-height: 28px; padding-bottom:50px; margin-bottom:0 !important; }
        .best-time-wrapper a { padding:25px 50px; display:table; margin:0 auto; border-radius: 50px; background: #007FD8; color: #FFF !important; font-size: 28px; font-weight: 600; text-decoration:none !important; line-height: 40px; }
        .best-time-wrapper a:hover { background:#0A8EEB; }

    .why-wrapper { max-width:1400px; margin:0 auto; padding-top: 100px; }
        .why-wrapper h2 { color: #000; text-align: center; font-size: 48px; line-height:60px; font-weight: 700; padding-bottom:60px; margin-bottom:0 !important; }
        .why-blocks { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:40px; }
            .why-blocks > div > p { color: #7C818F !important; text-align: center; font-size: 16px; line-height: 24px; padding-bottom:10px; margin-bottom:0 !important; }
            .why-blocks > div > div { color: #252935; text-align: center; font-size: 24px; font-weight: 700; line-height: 26px; }
            html[lang=fr] .why-blocks > div > div { font-size: 22px; }

    .ratings-wrapper { max-width:1400px; margin:0 auto; padding-top: 200px; }
        .tabs { display: flex; border-bottom: 1px solid #C4C4C4; padding: 0 40px 3px; }
@media (hover: none) {
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
}
            .tabs > li.active, .tabs > li:hover { background:#fff; border-radius: 6px; }
                .tabs > li > a > p { color: #7C818F; font-size: 16px; line-height: 24px; white-space: nowrap; margin-bottom:0 !important; }
                .tabs > li > a > strong { color: #007FD8; font-size: 24px; font-weight: 400; line-height: 32px; }
                html[lang=vi] .tabs > li > a > strong,
                html[lang=mn] .tabs > li > a > strong,
                html[lang=sw] .tabs > li > a > strong { font-size: 20px; }
                .tabs > li.active > a strong { color: #000 }
                .tabs > li.active > a > p strong { color: #000 !important; text-decoration: none; }
                .tabs > li > a { padding:10px 20px; border-radius:4px; cursor:pointer; display: block; text-decoration: none !important; white-space: nowrap; height: 100%; }
                .tabs > li { margin: 0 1px; }
                .tabs > li:first-child { margin-left: auto; }
                .tabs > li:last-child { margin-right: auto; }
                .tabs > li.active > a { cursor: default; }
                body[dir=rtl] .tabs > li:first-child { margin-left: 0; margin-right: auto; }
                body[dir=rtl] .tabs > li:last-child { margin-right: 0; margin-left: auto; }

        .rating-search { display:table; margin:0 auto; padding:50px 0; position: relative; }
            .rating-search > input[type=text] { border-radius: 50px; border: 1px solid #B0B0B0; background: #F1F1F1; line-height: 30px; padding: 0 20px 0 68px; font-size: 10px; text-transform: uppercase; position: relative; color: #B0B0B0; min-width: 250px; }
			html[lang=ky] .rating-search > input[type="text"] { width:280px; }
            body[dir=rtl] .rating-search > input[type=text] { padding: 0 68px 0 20px; }
            .rating-search > input[type=button] { width: 14px; height: 15px; background: url('../images/v2/search.svg') no-repeat; cursor: pointer; border: 0; position: absolute; left: 23px; z-index: 2; top: calc(50% - 7px);}
            body[dir=rtl] .rating-search > input[type=button] { left: auto; right: 23px; }

        .rating-blocks table { min-width: 720px; margin:0 auto; border-spacing: 1px; border-collapse: separate; }
            .rating-blocks table th { color: #5A5A5A; font-size: 12px; font-weight: 400; line-height: 16px; padding:3px 10px; border:0; background:transparent; }
            .rating-blocks table td { color: #5A5A5A; font-size: 14px; line-height: 20px; padding:13px 10px; border-radius: 3px; background: #fff; border: 0; font-weight: 400; }
            .rating-blocks table td span { direction: ltr; display: inline-block; }
            body[dir=rtl] .rating-blocks table th, body[dir=rtl] .rating-blocks table td { text-align:right; }
        .rating-blocks .empty-rating { color: #212121; text-align: center; padding: 30px 20px; font-size: 18px; }

        .new-pagination .pagination { width: 100% !important; position: relative; display: flex; justify-content: center; }
        .new-pagination .pagination:before { background: #C4C4C4; height: 1px; width: 100%; content: ''; position: absolute; top: 0px; }
        .new-pagination .pagination li { display: block; margin-left: 5px; margin-right: 5px; }
        .new-pagination .pagination li.prev, .new-pagination .pagination li.next { display: none; }
        .new-pagination .pagination li.last { }
        .new-pagination .pagination li > span, .pagination li > a { border: none !important; background: transparent !important; color: #666666 !important; }
        .new-pagination .pagination li.disabled span { color: rgba(102, 102, 102, .25) !important; }
        .new-pagination .pagination li.active > a { color: #000 !important;  background: transparent !important; position: relative; }
        .new-pagination .pagination li.active > a:before { position: absolute; width: 100%; top: -1px; height: 2px; background: #007FD8; content: ""; left: 0; right: 0; }
        .new-pagination .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0; padding-left: 0; padding-right: 0; }
        .new-pagination .pagination > li.first { position: absolute; left: 0; margin-left: 0; }
        .new-pagination .pagination > li.last { position: absolute; right: 0; margin-right: 0; }
        body[dir=rtl] .new-pagination .pagination > li.first { position: absolute; left: auto; right: 0; margin-left: 5px; margin-right: 0; }
        body[dir=rtl] .new-pagination .pagination > li.last { position: absolute; right: auto; left: 0; margin-right: 5px; margin-left: 0; }


.conditions-wrapper { padding:100px 0 0; }
        .conditions-wrapper h2 { color: #212121; font-weight: 700; font-size: 40px; line-height: 50px; margin-bottom:0 !important; }
        .conditions-wrapper h3 { color: #212121; font-size: 24px; line-height:32px; font-weight: 700; padding-left: 30px; margin-top: 40px; padding-bottom:6px; margin-bottom:0 !important; }
        .conditions-wrapper h4 { color: #464646; font-size: 14px; line-height: 20px; font-weight: 700; margin-bottom:0 !important; }
        body[dir=rtl] .conditions-wrapper h3,
        body[dir=rtl] .conditions-wrapper h4 { text-align: right !important; }
        .conditions-wrapper a { color: #08c; text-decoration:none; }
        .conditions-wrapper a:hover { text-decoration:underline; }
        .condition-blocks { padding-right:20px; } /* симметрия, слева съедает место первый ol > li */
            /* 1. */
            .condition-blocks > ol { list-style: none; counter-reset: order; }
                .condition-blocks > ol > li { position:relative; padding-left:20px; }
                .condition-blocks > ol > li:before { counter-increment: order; content:counter(order)"."; position:absolute; left:20px; color: #212121; font-size: 24px; line-height:32px; font-weight: 700; }

                /* 1.1 */
                .condition-blocks > ol > li > ol { list-style: none; counter-reset: order2; }
                .condition-blocks > ol > li > ol > li { position:relative; padding-top:10px; padding-left: 40px; }
                .condition-blocks > ol > li > p,
                .condition-blocks > ol > li > ol > li > p { color: #464646; font-size: 14px; line-height: 20px; font-weight: 500; margin-bottom:0 !important; }
                body[dir=rtl] .condition-blocks > ol > li > p,
                body[dir=rtl] .condition-blocks > ol > li > ol > li > p { font-weight: normal; }
                .condition-blocks > ol > li > ol > li strong { font-weight: 700; }
                .condition-blocks > ol > li > ol > li:before { counter-increment: order2; content:counter(order)"."counter(order2); position:absolute; left:0; color: #464646; font-size: 14px; font-weight: 500; line-height: 20px; }

                /* 1.1.1 */
                .condition-blocks > ol > li > ol > li > ol { list-style: none; counter-reset: order3; }
                .condition-blocks > ol > li > ol > li > ol > li { position:relative; padding-left:40px; padding-top:10px; }
                .condition-blocks > ol > li > ol > li > ol > li > p { color: #464646; font-size: 14px; line-height: 20px; margin-bottom:0 !important; }
                .condition-blocks > ol > li > ol > li > ol > li:before { counter-increment: order3; content:counter(order)"."counter(order2)"."counter(order3); position:absolute; left:0; color: #464646; font-size: 14px; font-weight: 500; line-height: 20px; }

                .condition-blocks > ol > li ul { }
                .condition-blocks > ol > li ul > li { position:relative; color: #464646; font-size: 14px; line-height: 20px; padding-left:15px; }
                .condition-blocks > ol > li ul > li:before { content:''; position:absolute; left:0px; width:5px; height:5px; background:#464646; border-radius:3px; top: 7px; }

                .condition-blocks > ol .cond-calculates { border-radius: 8px; background: #FFF; padding:24px; margin:10px 0; }
                .condition-blocks > ol .cond-calculates p { color: #464646; font-size: 14px; line-height: 20px; font-weight: 500; margin-bottom:0 !important; }
                .condition-blocks > ol .cond-calculates p > strong { font-weight: 700; }
                body[dir=rtl] .condition-blocks > ol .cond-calculates p { font-weight: normal; }
                .cc-pad { padding-top:20px; }

                body[dir=rtl] .conditions-wrapper h3 { padding-left: 0px; padding-right:30px; }
                body[dir=rtl] .condition-blocks { padding-left:20px; padding-right:0px; }
                body[dir=rtl] .condition-blocks > ol > li { padding-right:20px; padding-left:0px; }
                body[dir=rtl] .condition-blocks > ol > li:before { left:0px; right:20px; }

                body[dir=rtl] .condition-blocks > ol > li > ol > li { padding-right: 40px; padding-left: 0px; }
                body[dir=rtl] .condition-blocks > ol > li > ol > li:before { left:auto; right:0; }
                body[dir=rtl] .condition-blocks > ol > li > ol > li > ol > li { padding-right:40px; padding-left:0px; }
                body[dir=rtl] .condition-blocks > ol > li > ol > li > ol > li:before { left:auto; right:0; }
                body[dir=rtl] .condition-blocks > ol > li ul > li { padding-right:15px; padding-left:0; }
                body[dir=rtl] .condition-blocks > ol > li ul > li:before { left:auto; right:0; }

#winners-bars .tabs { padding: 0; height: auto; border-bottom: none; margin-bottom: 20px; justify-content: center; } /* more months -> justify-content: left; */
#winners-bars .tabs > li { background: transparent !important; }
#winners-bars .tabs > li.active a, #winners-bars .tabs > li:hover a { color: #000000 !important; }
#winners-bars .tabs > li.active a { cursor: default; }
#winners-bars .tabs > li a { padding-top: 0; padding-bottom: 0; margin-top: 40px; height: auto; font-size: 20px; font-weight: 400; line-height: 24px; }
#winners-bars .tab-pane { text-align: center; margin-bottom: 20px; max-width: 720px; margin-left: auto; margin-right: auto; }
#winners-bars .tab-pane > div { margin-right: 5px; margin-left: 5px; display: inline-block; margin-bottom: 10px; font-size: 20px; color: #007FD8; cursor: pointer; }
#winners-bars .tab-pane > div.active { color: #000000; cursor: default; }
#winners-bars .tabs li:first-child, #winners-bars .tabs li:last-child { margin-left: 0 !important; margin-right: 0 !important; }
.win-title { font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; margin: 0 auto 16px; color: rgba(0, 0, 0, 1) !important; max-width: 720px; }
body[dir=rtl] .win-title { text-align: right; }


.faq-wrapper { padding-top:100px; }
    .faq-wrapper h2 { color: #212121; font-size: 40px; font-weight: 700; margin-bottom:0 !important; }
    .faq-blocks { }
        .faq-block { padding-top:40px; }
            .faq-block h3 { color: #212121; font-size: 24px; line-height:30px; font-weight: 700; padding-bottom:15px; margin-bottom:0 !important; }
            .faq-block p, .faq-block li { color: #464646 !important; font-size: 14px; font-weight: 500; line-height: 20px; margin-bottom:0 !important; }
            body[dir=rtl] .faq-block p, body[dir=rtl] .faq-block li { font-weight: normal; }
            .faq-block li { padding-left:20px; position:relative; }
            body[dir=rtl] .faq-block li { padding-left:0; padding-right:20px; }
            .faq-block li:before { content:'—'; position:absolute; left:0; color: #464646; font-size: 14px; font-weight: 500; line-height: 20px; }
            body[dir=rtl] .faq-block li:before { left:auto; right:0; }
            .faq-block a { color: #08c; text-decoration:none; }
            .faq-block a:hover { text-decoration:underline; }


@media (max-width: 1500px) {
    .mid-wrapper { padding:100px 20px 0; width: auto; }
    .dubai-wrap .mid-wrapper { width: calc(100% - 40px); }

    .hgp-blocks { padding-top:50px; grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 1420px) {

    .why-list, .how-list, .after-contests, .top-foot, .howgetprize, .howgetballs, .blogz { padding:0 20px; }
    .new-pagination, .faq-wrapper .wrap1390 { padding:0 20px; }
    .black-wrapper h2, .before-topfoot > h2, .howgetprize > h2, .howgetballs > h2, .ratings-wrapper > h2 { font-size: 32px; line-height: 40px; }

    .top-foot-h2 { font-size:40px; line-height:48px; }
    .top-foot > p { font-size: 28px; line-height: 36px; }

    .blogz2, .blogz3 { max-width: 928px; grid-template-columns: 1fr 1fr; gap: 50px; }
    .why-list + .how-list { padding: 150px 20px 0; }
}

@media (max-width: 1400px) {
    .header:before { width: 751px; height: 413px; left: calc(50% - 375px); top: 360px; background-size:contain !important; }
    .header-back .header-gold { width: 700px; height: 160px; background-size:contain !important;  margin: 10px auto; }
    .wrap1390 { padding:0 20px; }
    .big-white-link { padding-top: 60px; }

    .hgp-title { font-size: 16px; line-height: 24px; }
    .hgp-desc { font-size: 14px; line-height: 20px; }
    .gray-wrapper { width:auto; padding:100px 20px; }

    .tabs { margin:0 -20px; padding: 0 0px 3px; overflow-x: auto; }
}

@media (max-width: 1200px) {
    .header-desc > p { font-size:20px; line-height:24px; }
    .header-desc > div { font-size: 15px; line-height: 21px; }
    .header-numbers > div > p { font-size: 16px; }

    .challenge-block { padding: 30px 20px 30px; }
    .challenge-block.top-challenge { padding-bottom: 60px; }
    .challenge-month .ch-blocks-left-right { margin-top: 20px; }
    .challenge-grid > div > span { line-height: 20px; }
    .challenge-grid > div > strong > i,
    .challenge-grid > div > span > i { display: block; font-style: normal; }
    .ch-blocks-right { grid-template-columns: auto auto; justify-content: start; }
    .ch-blocks-left-right { grid-template-columns: auto; gap: 20px; }
    .ch-fond-block { text-align: left; }
    body[dir=rtl] .ch-fond-block { text-align: right; }

    .dubai-wrap .mid-wrapper { width: calc(100% - 20px); }
    .dubai-wrap .mid-wrapper:before { left: calc(50% - 440px); }
    body[dir=rtl] .dubai-wrap .mid-wrapper:before { right: calc(50% - 440px); }
    .dub-block { padding: 96px 20px 20px 43%; }
    body[dir=rtl] .dub-block { padding: 96px 43% 20px 20px; }
    .dub-block h2 { font-size: 40px; line-height: 50px; }
    .dub-block p { font-size: 18px; line-height: 26px; }
    .mid-wrapper { padding-left: 10px; padding-right: 10px; }
    .dub-block > .big-white-link > a { padding: 25px 30px; font-size: 20px; }

    .howgetballs-blocks { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .header-back .header-gold { width: 600px; height: 135px; }
    .challenge-block > h2 { font-size:20px; line-height:28px; max-width: 470px; }
    .challenge-block > p { font-size:14px; line-height:20px; padding-top: 0; font-weight: normal; max-width: 470px; }
    .challenge-grid > div > span { font-size: 9px; }
    .challenge-grid > div > strong { font-size: 9px; line-height: 11px; }

    .challenge-month .ch-blocks-left-right { margin-top: 0; }
    .ch-blocks-left-right { grid-template-columns: auto; gap: 20px; }

    .ch-fond-block { text-align: left; }
    #winners-bars .tab-pane { white-space: nowrap; padding-left: 10px; padding-right: 10px; overflow: auto; }
@media (hover: none) {
    #winners-bars .tab-pane { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #winners-bars .tab-pane::-webkit-scrollbar { display: none; }
}
    #winners-bars .tabs { margin-left: 0 !important; margin-right: 0 !important; }
    #winners-bars .tabs > li a { padding-bottom: 10px; }

    .dubai-wrap .mid-wrapper:before { left: 20px; width: 211px; height: 211px; background-size: contain !important; }
    body[dir=rtl] .dubai-wrap .mid-wrapper:before { left: auto; right:20px; }
    .dub-block { padding: 96px 20px 20px 230px; width: 100%; }
    .dub-block h2 { font-size: 24px; line-height: 32px; }
    body[dir=rtl] .dub-block { padding: 96px 230px 20px 20px; }

    .best-time-wrapper h2, .why-wrapper h2 { font-size: 30px; line-height: 40px; }
    .why-blocks { grid-template-columns: 1fr 1fr; }
    .header-numbers { padding-top: 15px; }
    .grid-jspace { margin-bottom: 0; }
    .how-get-prize h2 { line-height: 50px; }
    html[lang=fr] .how-get-prize h2,
    html[lang=hu] .how-get-prize h2 { max-width: 700px; margin-left: auto; margin-right: auto; }
    .win-title { padding-right: 10px; padding-left: 10px; max-width: 100%; }

    .rating-blocks table { min-width: inherit; overflow-x:auto; width: 100%; }
    @media (hover: none) {
        .rating-blocks table { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
        .rating-blocks table::-webkit-scrollbar { display: none; }
    }
    .rating-blocks .table { margin-right: -20px; margin-left: -20px; }
    .rating-blocks table th:last-child,
    .rating-blocks table td:last-child { display: none; }
    .rating-blocks table td.arrow-more { position: relative; padding-right: 20px; }
    .rating-blocks .empty-rating { font-size: 16px; padding-bottom: 0; }
    body[dir=rtl] .rating-blocks table td.arrow-more { position: relative; padding-left: 20px; padding-right: 10px; }
    .rating-blocks table td.arrow-more:before { width: 16px; height: 16px; background:url('../images/v2/arrow-more.svg') no-repeat; content: ""; position: absolute; top: 50%; right: 7px; transform: translate(0, -50%); }
    body[dir=rtl] .rating-blocks table td.arrow-more:before { right: auto; left: 7px; background:url('../images/v2/arrow-more-rtl.svg') no-repeat; }
    .mid-back + .mid-back { margin-top: 10px; }
    .rating-blocks > div { margin-left: -20px; margin-right: -20px; }
    .new-pagination { padding-left: 10px; padding-right: 10px; }
    .new-pagination .pagination:before { display: none; }
    .new-pagination .pagination { margin-top: 40px; margin-bottom: 0; }
    .new-pagination .pagination > li > a,
    .new-pagination .pagination > li > span { background: #DFDFDF !important; color: #858585 !important; min-width: 30px; height: 30px; border-radius: 4px !important; padding: 0 5px; display: flex; justify-content: center; align-items: center; font-size: 12px; text-align: center; border: 1px solid transparent !important; margin-left: 0; }
    .new-pagination .pagination li.active > a { background: #ffffff !important; border: 1px solid #E6E6E6 !important; color: #007FD8 !important; text-shadow: none !important; }
    .new-pagination .pagination li.active > a:before { display: none; }
    .new-pagination .pagination li { margin-right: 2px; margin-left: 2px; }
    .new-pagination .pagination li span,
    .new-pagination .pagination > li.first a,
    .new-pagination .pagination > li.last a { font-size: 0 !important; }
    .new-pagination .pagination > li.first, .new-pagination .pagination > li.last { width: 30px; height: 30px; background: #DFDFDF !important; border-radius: 4px; }
    .new-pagination .pagination > li.first span:before,
    .new-pagination .pagination > li.first a:before,
    .new-pagination .pagination > li.last span:before,
    .new-pagination .pagination > li.last a:before { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; z-index: 3 !important; border: 1px solid #858585; border-left: none; border-top: none; }
    .new-pagination .pagination > li.first span:before,
    .new-pagination .pagination > li.first a:before { left: 12px; transform: translate(0, -50%) rotate(135deg); }
    body[dir=rtl] .new-pagination .pagination > li.first span:before,
    body[dir=rtl] .new-pagination .pagination > li.first a:before { transform: translate(0, -50%) rotate(320deg); left: auto; right: 12px; }
    .new-pagination .pagination > li.last span:before,
    .new-pagination .pagination > li.last a:before { left: 9px; transform: translate(0, -50%) rotate(320deg); }
    body[dir=rtl] .new-pagination .pagination > li.last span:before,
    body[dir=rtl] .new-pagination .pagination > li.last a:before { transform: translate(0, -50%) rotate(135deg); left: auto; right: 9px; }

    .modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); overflow: auto; padding: 0 20px; }
    .modal .modal-content { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px 20px 0; border: 1px solid #888; width: 100%; max-width: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 10px; }
    .modal .modal-close { position: absolute; top: 12px; right: 12px; width: 13px; height: 13px; cursor: pointer; }
    body[dir=rtl] .modal .modal-close { right: auto; left: 12px; }
    .modal .modal-close:before,
    .modal .modal-close:after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background-color: #28303F; transform-origin: center; }
    .modal .modal-close:before { transform: translate(-50%, -50%) rotate(45deg); }
    .modal .modal-close:after { transform: translate(-50%, -50%) rotate(-45deg); }
    .modal .modal-close:hover,
    .modal .modal-close:focus { color: black; text-decoration: none; cursor: pointer; }
    .modal h3 { font-size: 20px; line-height: 28px; color: #000000; font-weight: 700; margin: 0 0 20px; text-align: left !important; }
    body[dir=rtl] .modal h3 { text-align: right !important; }
    .modal p { font-size: 12px; font-weight: 400; color: #000000; line-height: 17px; margin-bottom: 0; }
    .modal span { font-size: 15px; font-weight: 700; color: #000000; line-height: 21px; }
    .modal #modalPrize { display: inline-block; direction: ltr; }
    .modal .row-line { display: flex; flex-wrap: wrap; }
    .modal .row-line > div { margin-right: 50px; margin-bottom: 20px; }
    body[dir=rtl] .row-line > div { margin-right: 0; margin-left: 50px; }
    .modal .row-line > div:last-child { margin-right: 0; }
    body[dir=rtl] .modal .row-line > div:last-child { margin-left: 0; }
}

@media (max-width: 720px) {
    /* header */
    .top-color-wrapper:before { content:''; position:absolute; width:360px; height:1174px; top:0; left:0; background:url('../images/v2/topmob-left.png') no-repeat; z-index:2; }
    .top-color-wrapper:after { content:''; position:absolute; width:360px; height:1174px; top:0; right:0; background:url('../images/v2/topmob-right.png') no-repeat; z-index:2; }

    .header { padding-top: 100px; }
    .header:before { width: 500px; height: 275px; left: calc(50% - 250px); top: 192px; background-size:contain !important; display: none; }
    .header-back .grading-head-1 { padding-top: 20px; background: linear-gradient(180deg, rgba(96, 190, 165, 0.1) 0%, rgba(95, 189, 163, 1) 100%); padding-bottom: 0; }
    .header-back .grading-head-2 { background: linear-gradient(180deg, rgba(95, 189, 163, 1) 0%, rgba(2, 40, 49, 1) 100%); }
    .header-back .header-gold { width: 340px; height: 100px; background:url('../images/v2/gold-mob.png') no-repeat; margin: -10px auto 0; }
    .years20-circle { width:100px; height:100px; top: -90px; }
    .years20-circle > div { width: 46px; height: 56px; position: absolute; left: calc(50% - 23px); top: calc(50% - 26px); background-size: contain !important; }
    .years20-circle > div > span { font-size: 15px; line-height: 20px; top: 46px; max-width: 65px; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: initial; color: #ffffff; }
    html[lang=my] .years20-circle > div > span { font-size: 7px; }

    .header h1 { font-size:14px; line-height:20px; padding-top: 20px; padding-bottom: 10px; }
    .header-prize > p { font-size:24px; line-height:32px; }

    .header-desc { }
    .header-numbers { grid-template-columns: auto; padding-top:30px; gap: 0px; max-width: 320px; margin-left: auto; margin-right: auto; padding-bottom: 0; }
    .header-plus { margin:0 auto; line-height: 48px; }
    .header-numbers > div > div { text-align:right; font-size: 40px; line-height:48px; }
    .header-numbers > div > p { font-size: 14px; line-height: 18px; }
    .header-numbers > div > p br { display:none; }
    .big-white-link > a { font-size:20px; line-height:28px; padding: 15px 25px; }
    .header-back .big-white-link { margin-top: 0; }

    /* challenges */
    .challenge-block { padding: 30px 20px 0px; }
    .challenge-grid { display:none; }
    .challenge-block.top-challenge { padding-bottom: 0; }
    .challenge-block > h2 { text-align: center; max-width: 100%; }
    .challenge-block > p { text-align: center; max-width: 100%; }
    .challenge-block .mob-only-place { display: block; }
    .challenge-block .web-only-place { display: none; }
    .challenge-timer { position: relative; top: auto; right: auto !important; left:auto !important; display: table; margin: 10px auto 30px; }
    .challenge-year { display: none; }
    .ch-blocks-left-right { justify-content: center; }
    .ch-blocks-left, .ch-blocks-right { grid-template-columns: auto; gap:20px; }
    .ch-blocks-left-right { gap: 50px; padding-bottom: 30px; }
    .ch-place-block { display: table; margin: 0 auto; }
    .ch-place-block * { text-align: center; }
    .ch-place-block > div { color: #ffffff; }
    body[dir=rtl] .ch-place-block > div { text-align: center; }
    .ch-place-block > p span { color: #6EFFD8; font-size: 12px; font-weight: 300; text-align: center; background: transparent; }
    .ch-fond-block > p { text-align: center; color: #6EFFD8 !important; }
    .ch-fond-block > div { text-align: center; color: #ffffff; }
    .ch-blocks-left, .ch-blocks-right { justify-content: center !important; }

    .dubai-wrap { background: url('../images/v2/dubai-mob.png') no-repeat calc(50% + 35px) 0%; padding: 200px 0 40px !important; }
    body[dir=rtl] .dubai-wrap { background-position: calc(50% - 35px) 0% !important; }
    .dubai-wrap .mid-wrapper { background:transparent; width: 100%; padding-left: 10px; padding-right: 10px; }
    .dubai-wrap .mid-wrapper:before { left: calc(50% - 105px); }
    body[dir=rtl] .dubai-wrap .mid-wrapper:before { left: auto; right: calc(50% - 105px); }
    .dub-block { padding: 320px 10px 10px !important; width: auto; }
    .dub-block .big-white-link { display:table; margin:0 auto; padding-top: 10px; }
    .dub-block .big-white-link > a { padding: 15px 25px; }

    /* balls and rest */
    .balls-wrapper .mid-wrapper { padding-top: 30px; }
	.how-get-prize { padding-bottom: 20px; }
    .hgp-blocks { grid-template-columns: 1fr !important; padding-top:40px !important; }
	.hgp { margin:0 20px; padding-bottom: 10px; }
    .how-get-prize h2 { font-size: 30px; line-height: 35px; }
    .why-blocks { gap: 30px; }
    .ratings-wrapper { padding-top: 100px; }
    .ch-timer-blocks { justify-content: center; }
    .ch-timer-blocks div,
    body[dir=rtl] .ch-timer-blocks div { margin-left: 10px !important; margin-right: 10px !important; text-align: center; }

    /* table */
    .pagination { border-top:0; }
    .pagi-left, .pagi-right { line-height: 31px; }
    .pagi-left > a, .pagi-right > a, .pagi-center a { border-radius: 4px; background: #DFDFDF; padding: 5px 10px; color: #858585; border: 1px solid transparent; }
    .pagi-left > a:hover, .pagi-right > a:hover, .pagi-center li > a:hover, .pagi-left.active > a, .pagi-right.active > a, .pagi-center li.active > a { border-radius: 4px; border: 1px solid #E6E6E6; background: #FFF; }

    /* faq */
    .faq-wrapper h2 { font-size: 24px; line-height:32px; font-weight: 600; color: #000000; }
    .faq-block { padding-top: 30px; }
    .faq-block h3 { font-size: 18px; line-height:26px; font-weight: 600; color: #000000; padding-bottom: 10px; margin-top: 0; }
    body[dir=rtl] .faq-block h3 { text-align: right; }
    .faq-block p, .faq-block li { font-size: 15px; line-height:21px; color: #707070 !important;}
    .faq-wrapper .wrap1390 { padding-left: 0; padding-right: 0; }

    /* Conditions */
    .conditions-wrapper .wrap1390 { padding-left: 0; padding-right: 0; }
    .conditions-wrapper h2 { font-size: 24px; line-height:32px; font-weight: 600; color: #000000 }
    .conditions-wrapper h3 { font-size: 18px; line-height: 26px; padding-left: 35px; }
    body[dir=rtl] .conditions-wrapper h3 { padding-left: 0; padding-right: 40px; }
    .condition-blocks > ol > li:before { font-size: 18px; line-height: 26px; left: 30px; }
    .condition-blocks { padding-right: 20px; margin: 0 -30px; }
    .condition-blocks > ol > li > ol > li { padding-left: 35px; }
    .condition-blocks > ol .cond-calculates { margin: 10px 0 10px 0; }
    .condition-blocks > ol > li { padding-left: 30px; }
}

@media (max-width: 520px) {
    .header:before { width: 380px; height: 183px; left: calc(50% - 190px); top: 195px; }
    .header h1 { padding: 20px 0px 10px; }

    .special-prize-block { font-size: 14px; font-weight: 600; }
    .dub-block h2 { font-size: 24px; line-height: 32px; padding: 10px 0 20px; }
    .dub-block p { font-size: 14px; line-height: 28px; }


    .balls-wrapper .mid-wrapper { padding-top: 30px; }
    .hgp-blocks { grid-template-columns: 1fr; padding-top:20px; }
    .how-get-prize h2 { font-size: 20px; line-height:28px; }
    html[lang=fr] .how-get-prize h2,
    html[lang=hu] .how-get-prize h2 { max-width: 300px; margin-left: auto; margin-right: auto; }
    .header-numbers > div > div { line-height: 45px; }
    .header-plus { line-height: 48px; }

    .gray-wrapper { padding: 50px 20px 70px; }
    .best-time-wrapper h2, .why-wrapper h2 { font-size: 20px; line-height: 28px; }
    .best-time-wrapper p { font-size: 14px; line-height: 20px; }
    .best-time-wrapper a { padding: 15px 25px; font-size: 20px; }

    .why-blocks { grid-template-columns: 1fr; }
    .why-wrapper h2 { padding-bottom:30px; }
}

@media (max-width: 400px) {
    .header::before { width: 290px; height: 140px; left: calc(50% - 145px); top: 225px; }
    .header-back .header-gold { position: absolute; left: 50%; transform: translate(-50%, 0); }
    .header-desc { padding-top: 100px; }

}

@media (max-width: 360px) {
    .challenge-block { padding: 15px 15px 0px; }
    .rating-blocks table td.arrow-more:before { right: 1px; }
    .rating-blocks table td.arrow-more { padding-right: 12px; }
    body[dir=rtl] .rating-blocks table td.arrow-more:before { right: auto; left: 1px; }
    body[dir=rtl] .rating-blocks table td.arrow-more { padding-right: 10px; padding-left: 12px; }
}

/* Loader */
#participants-data-win { position:relative; }
#participants-data-win.loading:before { content:''; left:0; top:0; width:100%; height:100%; position:absolute; z-index:1; background:rgba(241,241,241,.8); }

.loaderhead { position: absolute; width: 100px; height: 100px; left: calc(50% - 50px); top: 30px; z-index:2; }
.loader { width: 100px; height: 100px; border-radius: 50%; display: inline-block; position: relative; background: linear-gradient(0deg, rgba(241, 241, 241, 0.25) 33%, rgba(0, 136, 204, 1) 100%); box-sizing: border-box; animation: rotation 1s linear infinite; }
.loader::after { content: ''; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; background: #f1f1f1; }

@keyframes rotation {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg)}
}