@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700;900&display=swap');

html, body {
background:#0a0647;
min-height: 100%;
min-width:100%;
direction:rtl;
margin: 0;
padding: 0;
}

body {
height: 100%;
overflow: hidden;
}

html, body, button, input,h1,h2,h3,h4,h5,h6 {
font-family: 'Rubik', sans-serif;
-webkit-font-smoothing: antialiased;
font-size:18px;
color:#fff;
margin: 0;
}

h1 {
letter-spacing: 1px;
font-size: 33px;
}
h2 {
font-weight: 300;
font-size:34px;
}

.logo {
display:block;
margin:auto;
margin-top: 7%;
width: 200px;
}

input[type="search"]{
display: inline-block;
background:none;
border-radius: 40px;
outline:none;
border: none;
font-weight: 300;
font-size: 26px;
width: 650px;
height: 44px;
line-height: 44px;
}

.homeSearchBox {
border: 1px solid #fff;
border-radius: 32px;
display: inline-block;
margin-top: 2%;
padding: 4px 34px;
margin-bottom: 30px;
position: relative;
}
.homeSearch {
position: relative;
text-align:center;
}

.homeSearch::placeholder {
color:#fff;
opacity:0.5;
}

.homeSearchBox::before {
content:'⌕';
color:#fff;
font-size:43px;
position: absolute;
top:1px;
right:17px;
opacity: 0.5;
}

.index1 {
z-index:1;
}
.index2 {
z-index:2;
}
.index3 {
z-index:3;
}
.index4 {
z-index:4;
}
.index5 {
z-index:5;
}

.stars-bg {
background-image: url(img/bg/stars.png);
transition: background-size 13s ease-in-out;
background-repeat: repeat;
background-position: center center;
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
overflow: hidden;
z-index:0;
box-shadow:inset 0 0 325px -10px rgba(0, 0, 0, 0.473);
}

.main_slider {
z-index: 5;
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
overflow: hidden;
text-align: center;
}

.slide_container {
width:100%;
min-height: 100%;
overflow-x: hidden;
position: absolute;
top: 0;
right: 0;
transition: all 1.2s cubic-bezier(0.54, -0.01, 0.28, 0.99);
}


.slide-right {
right:-100%;
}
.slide-left {
right:200%;
}
.bg {
background-size: 50%;
animation: starsGrow 12s ease-in-out infinite alternate, flash 8s ease-in-out infinite alternate;
}
.pink-colud {
background-image: url('img/bg/Pink-Cloud.png');
position: absolute;
top:-80px;
left:-120px;
height:426px;
width:460px;
background-repeat: no-repeat;
background-position: right bottom;
opacity:0.3;
animation: starsGrow 12s ease-in-out infinite alternate;
}
.blue-colud {
background-image: url('img/bg/BlueCloud.png');
position: absolute;
bottom:-100px;
right:-400px;
height:362px;
width:709px;
background-repeat: no-repeat;
background-position: left top;
opacity:0.3;
animation: starsGrow 12s ease-in-out infinite alternate;
}
.bg_parallax {
background-size: 20%;
animation: starsGrow2 12s ease-in-out infinite alternate;

}
.planet{
position: absolute;
border-radius: 50%;
box-shadow:inset 38px -38px 80px -25px rgba(255, 255, 255, 0.411), inset 23px -23px 40px -25px #fff;
animation: planetGrow 12s ease-in-out infinite alternate, planetOrbit 23s ease-in-out infinite alternate-reverse;
transition: all 0.2s;
}

.planet1 {
opacity:0.1;
top: 13%;
left: 15%;
height:140px;
width:140px;
}

.planet2 {
opacity:0.5;
top: -15%;
right: 5%;
height:340px;
width:340px;
}

.planet3 {
opacity:0.05;
bottom: -52%;
left: 15%;
height:640px;
width:640px;
}

.daddysofa {
position: absolute;
bottom:7%;
right:6%;
max-width:330px;
animation: planetGrow 12s ease-in-out infinite alternate;
}

.sliderNav {
z-index:99;
position: absolute;
bottom: 0;
width: 100%;
height: 20%;
}

.reStart {
display: block;
margin:auto;
margin-top:0;
position: relative;
width:120px;
text-align:center;
background: #e7e6f3;
z-index:99;
color: #0a0647;
padding: 9px 19px;
border-radius: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
cursor: pointer;
transition: all 0.5s;
}

[data-slider="1"] .reStart {
opacity:0;
margin-top:-40px;
}

.nextSlide, .prevSlide {
position: absolute;
z-index: 99;
bottom:8%;
left:3%;
max-width:130px;
cursor: pointer;
opacity:1;
transition: all 0.3s;
animation: 3s wobble 5s ease-in-out infinite;
}

.prevSlide {
left:auto;
right:3%;
}

[data-slider="1"] .prevSlide,[data-slider="2"] .prevSlide, [data-slider="1"] .nextSlide, [data-slider="5"] .nextSlide, .fromSearch .prevSlide, .lightbox-on .prevSlide, .lightbox-on.fromSearch .homePrev{
opacity:0;
bottom:-4%;
}

.fromSearch .homePrev {
opacity:1;
bottom:8%;
}


.choose_container {
display: block;
margin:80px auto;
width:950px;
max-width: 85%;
max-height:310px;
background: rgba(255, 255, 255, 0.322);
box-shadow: 0px 0px 0px 18px rgba(255, 255, 255, 0.322); /* for the scrollbar */
border-radius: 14px;
overflow: auto;
opacity: 1;
transition: all 0.5s ease-in-out;
}

.lightbox-on .games_container {
margin-top:90%;
width:700px;
opacity: 0.3;
}

.choose_container.circle-choices {
box-shadow:0 0 0 0;
}

[data-slide="3"] .choose_container {
margin-top:12px;
margin-bottom:0px;
}

[data-slide="5"] .choose_container {
max-height: 415px;
}


.choose_container::-webkit-scrollbar, .lightbox_details::-webkit-scrollbar {
width: 9px;
height: 9px;
}
.choose_container::-webkit-scrollbar-button, .lightbox_details::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
.choose_container::-webkit-scrollbar-thumb, .lightbox_details::-webkit-scrollbar-thumb {
background: #ffffffcc;
border: 0px none #ffffffcc;
border-radius: 50px;
}
.choose_container::-webkit-scrollbar-thumb:hover, .lightbox_details::-webkit-scrollbar-thumb:hover {
background: #ffffffcc;
}
.choose_container::-webkit-scrollbar-thumb:active, .lightbox_details::-webkit-scrollbar-thumb:active {
background: #fff;
}
.choose_container::-webkit-scrollbar-track, .lightbox_details::-webkit-scrollbar-track {
background: #612fca00;
border: 0px none #ffffff00;
}
.choose_container::-webkit-scrollbar-track:hover, .lightbox_details::-webkit-scrollbar-track:hover {
background: #612fca00;
}
.choose_container::-webkit-scrollbar-track:active, .lightbox_details::-webkit-scrollbar-track:active {
background: #612fca00;
}
.choose_container::-webkit-scrollbar-corner, .lightbox_details::-webkit-scrollbar-corner {
background: transparent;
}

.choose_button {
backface-visibility: hidden;
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
background: linear-gradient(180deg,#f5f5f5 0%,#e4d9d9 49%,#d3cece 51%,#f5f5f5 100%);
border-radius: 35px;
border: 1px solid #6aa;
padding: 20px 0px;
width: 30%;
margin: 2% 1%;
box-shadow: inset 0px 1px 0px rgba(255,255,255,1), 0px 1px 3px rgba(0,0,0,0.3), inset 0 3px 0 #fff;
color: #00007d;
text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
transition: all 0.1s;
}

.circle-choices .choose_button {
width:98px;
height:98px;
padding: 0;
border-radius: 50%;
line-height: 97px;
margin: 1% 1%;
}

.choose_button.choose_checked {
box-shadow: inset 0 0 26px #070531;
border: 1px solid #080537;
}

.age-container .choose_button {
background: linear-gradient(180deg,#f67140 0%,#d93737 49%,#981f20 51%,#f77240 100%);
color: #ffffff;
}

.players-container .choose_button {
background: linear-gradient(180deg,#3ccbe2 0%,#32b6cc 49%,#1f91a5 51%,#3ccbe2 100%);
color: #ffffff;

}
.time-container .choose_button {
background: linear-gradient(180deg,#79f979 0%,#3abb3a 49%,#31a731 51%,#4dd64d 100%);
color: #ffffff;
}

@keyframes starsGrow {
from {background-size: 50%;}
to {background-size: 100%;}
}

@keyframes planetGrow {
from {transform: scale(0.5);}
to {transform: scale(1);}
}

@keyframes planetOrbit {
from {
box-shadow:inset 38px -38px 80px -25px rgba(255, 255, 255, 0.411),
inset 23px -23px 40px -25px #fff,
0 0 50px rgba(255, 255, 255, 0.541);;
}
to {
box-shadow:inset 38px 138px 80px -25px rgba(255, 255, 255, 0.411),
inset 23px 123px 40px -25px #fff,
0 0 50px rgba(255, 255, 255, 0.212);}
}

@keyframes flash {
0%, 50%, 80%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0.6;
}
}


/* Start Button */
.start-button {
font-size: 4vmin;
appearance: none;
background: linear-gradient(to bottom, #f46001, #e14802);
border: none;
color: #fff;
border-radius: 2em;
padding: 0.6em 1.5em;
overflow: hidden;
user-select: none;
cursor: pointer;
z-index: 1;
box-shadow: 0 0 1em rgba(255, 255, 255, .2);
transition: transform 0.1s cubic-bezier(0.5, 0, 0.5, 1), box-shadow 0.2s;
outline: none;
margin-top:40px;
}
.start-button:hover {
box-shadow: 0 0 2em rgba(255, 255, 255, .3);
}
.start-button:active {
transform: scale(0.8) translateY(10%);
transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}
.treat {
--scale-x: 0;
--scale-y: 0;
pointer-events: none;
display: block;
position: absolute;
top: 0;
left: calc(50% - .5rem);
border-radius: 50%;
width: 1em;
height: 1em;
display: flex;
justify-content: center;
align-items: center;
font-size: 5vmin;
transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) translate(-50%, -50%);
pointer-events: none;
animation: treat-enter 0.1s ease-in backwards, treat-exit 300ms linear calc((var(--lifetime, 3000) * 1ms) - 300ms) forwards;
}
@keyframes treat-enter {
from {
opacity: 0;
}
}
@keyframes treat-exit {
to {
opacity: 0;
}
}
.treat .inner {
animation: inner-rotate 0.6s linear infinite;
transform: rotate(calc(-1turn * var(--direction)));
}
@keyframes inner-rotate {
to {
transform: none;
}
}



/* Ribbon */

.ribbon {
position: relative;
display: inline-block;
text-align: center;
font-size: 24px !important;
background: #EB4D38;
background: -webkit-gradient(linear, left top, left bottom, from(#EB4D38), to(#BE1335));
background: -webkit-linear-gradient(top, #EB4D38, #BE1335);
background: -moz-linear-gradient(top, #EB4D38, #BE1335);
background: -ms-linear-gradient(top, #EB4D38, #BE1335);
background: -o-linear-gradient(top, #EB4D38, #BE1335);
background-image: -ms-linear-gradient(top, #EB4D38 0%, #BE1335 100%);
-webkit-box-shadow: rgba(0,0,0,0.3) 0 0 0;
-moz-box-shadow: rgba(0,0,0,0.3) 0 0 0;
box-shadow: rgba(0,0,0,0.3) 0 0 0, inset 0 6px 0 #fc8444ad, inset 0 -6px 0 #fc8444ad;
margin-top:7%;
opacity: 1;
transition: all 0.5s ease-in-out;
}

.lightbox-on .ribbon {
    margin-top: 100%;
opacity: 0;
}

.ribbon.ribbon-small {
box-shadow: rgba(0,0,0,0.3) 0 0 0, inset 0 6px 0 #fc8444ad, inset 0 -6px 0 #fc8444ad, 0 5px 21px #0000008c;
}

.ribbon.ribbon-small.age-ribbon {
background: -webkit-linear-gradient(top, #EB4D38, #BE1335);
box-shadow: rgba(0,0,0,0.3) 0 0 0, inset 0 6px 0 #fc8444ad, inset 0 -6px 0 #fc8444ad;
}

.ribbon.ribbon-small.players-ribbon {

background: -webkit-linear-gradient(top, #38c2d9, #249cb0);
box-shadow: rgba(0,0,0,0.3) 0 0 0, inset 0 6px 0 #47d1e8, inset 0 -6px 0 #31b9d0, 0 5px 21px #0000008c;
}

.ribbon.ribbon-small.time-ribbon {
background: -webkit-linear-gradient(top, #5cdd5d, #2b982b);
box-shadow: rgba(0,0,0,0.3) 0 0 0, inset 0 6px 0 #43c343, inset 0 -6px 0 #33b533, 0 5px 21px #0000008c;
}

.ribbon h1 {
text-shadow: #1409097a 0 1px 4px;
padding: 22px 90px;
}

.ribbon-small h1 {
font-size: 23px;
padding: 11px 48px;
}

.ribbon:before, .ribbon:after {
content: '';
position: absolute;
display: block;
bottom: -12px;
border: 38px solid #b9242b9e;
z-index: -1;
}

.ribbon:before {
left: -62px;
border-right-width: 52px;
border-left-color: transparent;
}

.ribbon:after {
right: -62px;
border-left-width: 52px;
border-right-color: transparent;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
border-color: #4a0c0f transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -12px;
content: '';
}

.ribbon-small:before, .ribbon-small:after, .ribbon-small .ribbon-content:before, .ribbon-small .ribbon-content:after {
content: none;
}

.ribbon .ribbon-content:before {
left: 0;
border-width: 12px 0 0 28px;
}

.ribbon .ribbon-content:after {
right: 0;
border-width: 12px 28px 0 0;
}


/* Objects */
.objects {
transition: all 1s ease-in-out;
z-index:99;
}

/* Slider 2 Objects */
.Bomb-obj {
position: absolute;
top:-153px;
left:3%;
width:150px;
}

[data-slider="2"] .Bomb-obj {
top:14px;
}

.Coins-obj {
position: absolute;
top:-140px;
right:13%;
width:180px;
}

[data-slider="2"] .Coins-obj {
top:-20px;
}

.Coin-obj {
position: absolute;
bottom:-29%;
right:30%;
width:90px;
z-index:-1;
}

[data-slider="2"] .Coin-obj {
bottom:19%;
}

.Cards-obj {
position: absolute;
top:45%;
right:-14%;
width:150px;
}

[data-slider="2"] .Cards-obj {
right:4%;
}

.TwoCoins-obj {
position: absolute;
bottom:-21%;
left:35%;
width:120px;
}

[data-slider="2"] .TwoCoins-obj {
bottom:7%;
}

/* Slider 3 Objects */
.Planet-obj {
position: absolute;
top:-180px;
right:18%;
width:250px;
}

[data-slider="3"] .Planet-obj {
top:-20px;
}

.Star-big-obj {
position: absolute;
top:-120px;
right:6%;
width:80px;
}

[data-slider="3"] .Star-big-obj {
top:120px;
}

.Star-small-obj {
position: absolute;
top:-150px;
right:16%;
width:70px;
}

[data-slider="3"] .Star-small-obj {
top:150px;
}

.Star-small2-obj {
position: absolute;
top:-280px;
right:11%;
width:50px;
}

[data-slider="3"] .Star-small2-obj {
top:280px;
}

.Star-big-left-obj {
position: absolute;
top:-230px;
left:2%;
width:80px;
}

[data-slider="3"] .Star-big-left-obj {
top:30px;
}

.Star-small-left-obj {
position: absolute;
top:-90px;
left:14%;
width:40px;
}

[data-slider="3"] .Star-small-left-obj {
top:50px;
}

.Star-small2-left-obj {
position: absolute;
top:-180px;
left:2%;
width:35px;
}

[data-slider="3"] .Star-small2-left-obj {
top:180px;
}


/* Slider 4 Objects */
.Trophy-obj {
position: absolute;
top: -10px;
left: -62%;
width: 230px;
}

[data-slider="4"] .Trophy-obj {
left:0%;
}

.Hand-obj {
position: absolute;
bottom: -269px;
left: 43%;
width: 160px;
}

[data-slider="4"] .Hand-obj {
bottom: -18px;
}

#confetti_canvas {
position: absolute;
width: 512px;
height: 512px;
top: 51px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
right: 0;
pointer-events: none;
z-index: 9999;
border: 2px solid #fff;
}



.floating {
animation: floating 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
margin-left: 30px;
margin-top: 5px;
}

.floating2 {
animation: floating 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate-reverse;
margin-left: 30px;
margin-top: 5px;
}

@keyframes floating {
0% { transform: translate(0,  0px); }
100%   { transform: translate(0, 15px); }
}




/* Results */
@keyframes shadow-pulse
{
0% {
box-shadow: 0 0 0 0px rgba(231, 231, 231, 0.2);
}
100% {
box-shadow: 0 0 25px 0px rgba(231, 231, 231, 0.24);
}
}

[data-slide="5"] .choose_container {
animation: shadow-pulse 0.8s ease-in-out infinite alternate-reverse;
}


.resultsRow {
padding-bottom: 40px;
}

.resultsRow::after {
content:'';
clear:both;
display: block;
}

.resultsGame {
width:33%;
float:right;
cursor: pointer;
}



.gameImage {
width:180px;
}

.gameName {
color: #ffffff;
font-size: 34px;
font-weight: 800;
text-shadow: rgb(10 7 50) 0 0px 11px;
margin-top: -20px;
}

.gameCompany{
color: #fff;
font-weight: 400;
}

.gameCategory {
display: block;
color: rgba(255, 255, 255, 0.747);
margin-top:3px;
margin-bottom: 13px;
}

.resultsGame .start-button {
font-size:22px;
padding:6px 4px;
width: 60%;
margin:auto;
}

.gameData {
background: #ffffffb3;
border: 1px solid #0a093ab8;
border-radius: 5px;
width: 60px;
height: 60px;
display: inline-block;
margin-bottom: 23px;
text-align:center;
}

.gameData svg {
fill: #090839;
width: 36px;
display: block;
margin: auto;
margin-top: 7px;
}

.gameData span {
font-size: 14px;
color: #090839;
}

.teamData svg {
margin-top:4px;
margin-bottom:-4px;
}
.ageData svg {
margin-top:7px;
margin-bottom:-7px;
margin-right:8px;
}
.timeData svg {
margin-top:3px;
margin-bottom:-3px;
}

.game-lightbox {
position: absolute;
top: 208%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 98%;
height: 40%;
background: #f5f5f5c4;
z-index: 9999;
border-radius: 13px;
box-shadow: 0 0 0 0px #ffffff26, 0 0 0px 0px #0302175e;
transition: all 0.5s ease-in-out;
opacity: 0.2;
}

.lightbox-on .game-lightbox {

height: 90%;
top: 8%;
opacity: 1;
box-shadow: 0 0 0 3px #ffffff26, 0 0 18px 3px #0302175e;
}

.half-col {
width: 40%;
float: right;
padding:5%;
text-align: center;
}

h4.lightbox_gameName {
background: linear-gradient(to left, #AC6FC9, #792D9F);
font-size: 28px;
padding: 5px 15px 6px 15px;
display: inline-block;
margin:auto;
width:auto;
text-align:center;
}

h4.lightbox_gameName.lightbox_price {
font-weight: 400;
font-size: 22px;
}

h3.lightbox_skills_title {
color: #090839;
font-size: 23px;
margin-bottom:15px;
}

.lightbox_datas {
margin: 14px 0;
}

.lighbox_skills div {
background: #fff;
display: inline-block;
border-radius: 35px;
color: #090839;
padding: 5px 18px;
margin: 5px;
box-shadow: 0 0 7px -2px #07052861;
font-size: 16px;
font-weight: 400;
}
.lightbox_details {
text-align: right;
margin-top:25px;
overflow-y:auto;
}
.lightbox_details h4, .lightbox_details p {
color: #090A38;
}
.lightbox_details h4 {
margin-bottom:-12px;
}

.lightbox_details p {
margin-bottom:35px;
}

.lightbox_close {
position: absolute;
top: 3%;
left: 2%;
color: #070522;
background: #fff;
padding: 8px 24px 10px 24px;
border-radius: 34px;
box-shadow: 0 0 11px #3d0c3e2b;
cursor:pointer;
}
.lightbox_close::after {
content: 'x';
font-size: 21px;
margin-right: 5px;
}


/* Slider */
.sliderWarper {
width:80%;
margin:auto;
margin-bottom: 40px;
}
.lSAction > a {
    width: 43px;
    height: 43px;
    background: #D9D9D9;
opacity: 0.8;

}

.lSAction > .lSNext {
    right: 0px;
}
.lSAction > .lSPrev {
    left: 0px;
}
.lSAction > a::before, a.lSNext::before {
    content: '<';
    font-size: 35px;
    line-height: 45px;
    margin-left: 2px;
}

a.lSPrev::before {
    content: '>';
    margin-left: 0px;
margin-right: 2px;
}

.lSSlideOuter .lSPager.lSGallery li {
    background: #fff;
box-shadow: inset 0 0 0 1px #E0E0E0;
}