#app {position:relative;width:1080px;height:1920px}
#fullScreen{position:absolute;left:50px;top:50px;width:250px;height:250px;}
#starter{position:absolute;left:0px;top:0px;width:100vw;height:100vh;font-weight:bold;font-size:100px;color:#ffffff;
         background: linear-gradient(135deg,  rgba(212,104,239,0.71) 2%,rgba(192,101,242,0.71) 14%,rgba(147,93,249,0.76) 42%,rgba(38,128,253,0.81) 72%,rgba(38,128,253,0.86) 100%);

}
.form-check .form-check-input {
    float: right;
    margin-left: -1.5em;
}

.form-check {
    display: block;
 
    padding-left:0px!important;
    
}
input[type=checkbox] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.05); /* IE */
    -moz-transform: scale(1.05); /* FF */
    -webkit-transform: scale(1.05); /* Safari and Chrome */
    -o-transform: scale(1.05); /* Opera */
    padding: 10px;
}

.privacy {
    font-size: 18px;
    text-align: right;
    direction: rtl;
    padding-right: 110px;
}
#mdlPrivacy {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
  
    background-color: #6604bd;
    z-index: 99999;
}
    #mdlPrivacy iframe {
        position: absolute;
        top: 50px;
        left: 26px;
        width: 96vw;
        height: 94vh;
        border: none;
    }
    #mdlPrivacy #btnClose {
        right: 38%;
        position: absolute;
        top: 12px;
        z-index: 999;
        background-color: #b3a8e6;
        border-radius: 90px;
        padding: 33px;
    }
#photoLoader {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    opacity: 0.6;
    background-color: #6604bd;
    z-index: 99999;
}
#posterWRP {
    box-shadow: 2px 1px 46px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 2px 1px 46px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 1px 46px 0px rgba(0,0,0,0.75);
    overflow: hidden;
}
#boCountDown {
    font-size: 760px;
    color: #ffffff;
    font-weight:bold;
    letter-spacing: .1em;
    text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
    position: absolute;
    width: 100%;
    z-index: 1000;
    padding-top: 485px;
    text-align: center;
}

#boFlash{position:absolute;top:0px;left:0px;width:100vw;height:100vh;background-color:#ffffff;z-index:99999}
#posterROW{z-index:9999}
#posterPhotoBG {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    background-size: cover;
}
#bonline_camera {
    position: absolute;
    left: -440px;
    top: 260px;
 
}
#boBtn3{margin-top:870px}
.card-bg {
    cursor: pointer;
    height: 223px;
    border-radius: 27px;
    background-color: #ffffff;
    background-size: cover;
    margin-bottom: 30px;
}
.card-bg.active {
        border: 10px solid #ffffff;
    }
#posterPhotoSnap {
    position: absolute;
    top: 30px;
    left: -441px;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 100%;
}

#posterPhotoTextWrp {
    position: absolute;
    width: 342px;
    height: 175px;
    font-size: 18px;
    color: #ffffff;
    font-family: "Assistant", sans-serif;
    text-align: left;
    bottom: -4px;
    z-index: 200;
    left: 46px;
    line-height: 24px;
   
    text-shadow: 0px 2px 2px #000000;
}
#results {
    width: 1964px;
    height: 1000px;
    position: absolute;
    left: -440px;
    top: 180px;
    box-shadow: 2px 1px 46px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 2px 1px 46px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 1px 46px 0px rgba(0,0,0,0.75);
}


    #results img{height:100%}



#imgPoster {
    box-shadow: 2px 1px 46px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 2px 1px 46px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 1px 46px 0px rgba(0,0,0,0.75);
    margin: 0px auto;
    width: 65vw;
    z-index: 999;
    position: relative;
}
#posterPhotoWrp {
    background-size: cover;
    z-index: 100;
    position: relative;
}

.brandLogo {
    width: 460px;
    position: relative;
}

.h1, h1 {
    font-size: calc(5rem);
    color: white;
}


.anmdel1 {
    animation-delay: 0.2s;
}

.anmdel2 {
    animation-delay: 0.6s;
}

.anmdel3 {
    animation-delay: 1s;
}

body {
   background-color:#ffffff;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
/* .bgoverly {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/vid0bg.png);
    background-size:cover;
} */
/* Background container fills viewport and stays behind everything */
.background-ellipses {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* so clicks pass through */
  z-index: 0; /* behind slides */
  overflow: hidden;
  background: #FFFFFF;
}

/* Resize ellipses for viewport instead of fixed 1080x1920 */
.ellipse {
  position: absolute;
  border-radius: 50%;
  /* Use viewport-relative units or scale as needed */
}
/* Ellipse 1 */
.ellipse1 {
  position: absolute;
  width: 2282px;
  height: 1560px;
  left: -748px;
  top: 966.71px;
  background: #008D96;
  transform: rotate(-13.14deg);
}

/* Rectangle 4 */
.rectangle4 {
  position: absolute;
  width: 1080px;
  height: 314px;
  left: 0px;
  top: 1606px;
  background: #0099A1;
  box-shadow: inset 0px 4px 30px rgba(1, 56, 61, 0.5);
}

/* Ellipse 2 */
.ellipse2 {
  position: absolute;
  width: 252px;
  height: 252px;
  left: 888px;
  top: 348px;
  background: #FE4334;
}

/* Ellipse 12 */
.ellipse12 {
  position: absolute;
  width: 465px;
  height: 465px;
  left: 125px;
  top: 982px;
  background: #0099A1;
}

/* Ellipse 14 */
.ellipse14 {
  position: absolute;
  width: 178px;
  height: 178px;
  left: 678px;
  top: 856px;
  background: #0099A1;
}

/* Ellipse 13 */
.ellipse13 {
  position: absolute;
  visibility: hidden;
  width: 293px;
  height: 293px;
  left: 101px;
  top: 1697px;
  background: #0099A1;
}

/* Ellipse 5 */
.ellipse5 {
  position: absolute;
  width: 222px;
  height: 222px;
  left: 318px;
  top: 694px;
  background: #A4C30E;
}

/* Ellipse 7 */
.ellipse7 {
  position: absolute;
  width: 325px;
  height: 325px;
  left: -81px;
  top: 306px;
  background: #A4C30E;
}

/* Ellipse 8 */
.ellipse8 {
  position: absolute;
  width: 152px;
  height: 152px;
  left: -70px;
  top: 772px;
  background: #FBB000;
}

/* Ellipse 9 */
.ellipse9 {
  position: absolute;
  width: 226px;
  height: 226px;
  left: 630px;
  top: 1354px;
  background: #FBB000;
}

/* Ellipse 10 */
.ellipse10 {
  position: absolute;
  width: 164px;
  height: 164px;
  left: 109px;
  top: -55px;
  background: #FBB000;
}

/* Ellipse 11 */
.ellipse11 {
  position: absolute;
  width: 91px;
  height: 91px;
  left: 822px;
  top: 215px;
  background: #FBB000;
}

/* Ellipse 6 */
.ellipse6 {
  position: absolute;
  width: 376px;
  height: 376px;
  left: 854px;
  top: 1078px;
  background: #A4C30E;
}

/* Ellipse 3 */
.ellipse3 {
  position: absolute;
  width: 123px;
  height: 123px;
  left: 58px;
  top: 1405px;
  background: #FE4334;
}

/* Ellipse 4 */
.ellipse4 {
  position: absolute;
  width: 93px;
  height: 93px;
  left: -41px;
  top: 63px;
  background: #FE4334;
}



#slides {
    position: relative;
    height:100vh;
	font-size:80px;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    animation-duration: 1s;
    animation-fill-mode: both;
    top:0px;left:0px;
}
#bgVideo {
    opacity: 1;

}
    #bVideo, #bgVideo {
    position: fixed;
    right: 0;
    z-index: -1;
    top: 0;
    width: 100vw !important;
    height: auto !important;
}
#logoWrp{position:absolute;top:0px;left:0px;width:100%}
    #logoWrp img {
        width: 50%;
        margin-top: 40px;
        z-index: 500 !important;
        position: absolute;
        left: 22%;
    }
.bgr1 {
    background: linear-gradient(to bottom, rgba(37,64,143,1) 2%,rgba(37,64,143,1) 12%,rgba(37,64,143,0) 100%);
}

.bgr {
    background-image: url(../images/bgr1.png);
    background-position: top left;
    background-repeat:no-repeat;
        height: 458px;
}
.bgr2 {
    background: linear-gradient(135deg, rgba(212,104,239,0.11) 2%,rgba(192,101,242,0.21) 14%,rgba(147,93,249,0.36) 42%,rgba(38,128,253,0.81) 72%,rgba(38,128,253,0.86) 100%);
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 100vh;
    padding-top: 48vh !important;
    padding-left: 70px !important;
    padding-right: 70px !important;
}
    .bgr2.lform {
        padding-top: 13vh !important;
        z-index: 100;
    };
.bgr2.bgGame{ padding-top: 15vh !important;}
.btn {
    border: 4px solid #ffffff !important;
    border-radius: 71px !important;
    width: 100%;
    height: 143px;
    margin-bottom: 43px !IMPORTANT;
    font-size: 52px;
    line-height: 100px;
    box-shadow: var(--bs-box-shadow) !important;
}

#boGameFrame {
    width: 940px;
    height: 1100px;
    border-radius: 55px;
    -webkit-box-shadow: 0px 0px 45px 0px rgba(0,0,0,0.74);
    -moz-box-shadow: 0px 0px 45px 0px rgba(0,0,0,0.74);
    box-shadow: 0px 0px 45px 0px rgba(0,0,0,0.74);
    margin-top:130px;
}
.btn-primary {
    background-color: #5a6ef7 !important;
    color: #ffffff !important;
    border: 10px solid #7a00e6 !important;
}
.bptn{cursor:pointer}
#debugger {
    height: 200px;
    width: 200px;
    position: absolute;
    left: 50px;
    bottom: 50px;
    color: greenyellow;
    font-weight: bold;
    font-size: 15px;
    padding: 10px;
    text-align: left;
}
.btn-secondary {
    background-color: #7c38cb !important;
    color: #ffffff !important;
}

.btn-info {
    background-color: #8d53d5 !important;
    color: #ffffff !important;
}
.rtl{direction:rtl}
.footer {
    position: fixed;
    bottom: 10px;
    padding: 5px;
    background-image: url(../images/Rectangle4.png);
    background-size: cover;
    width: 100%;
    height: 235px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.footer-images {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
}

.footer-images img {
    margin-top: 10px;
    object-fit: contain;
} 
.footer-logo-1 {
    width: 245px;

    position: relative;
    left: 101px;
}
.footer-logo-1 {
    width: 208px;
 
    position: relative;
    left: 101px;
}


.fot-logo {
    position: fixed;
    bottom: 38px;
    right: 0px;
    z-index: 100;
    width: 190px;
}

#countdown {
    position: absolute;
    top: 20px;
    right: 20px;
}
#bonline_camera_frame {
    width: 1080px;
    height: 900px;
    position: absolute;
    top: 273px;
}
.boKinput {
    font-size: 38px;
    color: #000000;
    font-weight: bold;
    display: block;
    border-radius: 71px !important;
    width: 888px;
    height: 143px;
    margin-bottom: 23px !IMPORTANT;
    font-size: 50px;
    padding: 0px 50px 0px 50px;
    line-height: 100px;
    box-shadow: var(--bs-box-shadow) !important;
    margin: 0px auto;
}

    .boKinput:focus-visible {
        outline: white auto 1px !important;
    }

    .boKinput.err {
        border: 9px solid #4e1781;
    }

.ui-keyboard-keyset {
    background: rgba(0,0,0,0.5);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 1px -1px 55px -6px rgba(0,0,0,1);
    -webkit-box-shadow: 1px -1px 55px -6px rgba(0,0,0,1);
    -moz-box-shadow: 1px -1px 55px -6px rgba(0,0,0,1);
}

 

.ui-keyboard-button span {
    font-size: 30px;
    font-weight: bold;

}
.ui-keyboard-has-focus {

    width: 940px !important;
}

.ui-keyboard-button {
    box-sizing: border-box;
    height: 4em;
    min-width: 4em;
    margin: 0.17em;
    border-color: #f2f2f2;
    border-style: solid;
    text-shadow: 0 0.5px 1px #777, 0 2px 6px #f2f2f2;
    border-width: 1px;
    border-radius: 10px;
    background: -webkit-linear-gradient(top, #f9f9f9 0%, #D2D2D2 80%, #c0c0c0 100%);
    transition: box-shadow 0.3s ease, transform 0.15s ease;
    box-shadow: 0 0 1px #888,0 1px 0 #fff, 0 6px 0 #C0C0C0, 0 8px 17px rgba(#444, 0.4), 2px 1px 4px rgba(#444, 0.25), -2px 1px 4px rgba(#444, 0.25), 0 9px 16px rgba(#444, 0.1);
    &:hover, &:focus

{
    box-shadow: 0 0 1px #888,0 1px 0 #fff, 0 4px 0 #C0C0C0, 0 2px 35px rgba(#444, 0.3), 2px 2px 4px rgba(#444, 0.25), -2px 2px 4px rgba(#444, 0.25), 0 7px 4px rgba(#444, 0.1);
    transform: translateY(2px);
}

&:active {
    box-shadow: 0 0 1px #888,0 1px 0 #fff, 0 0 0 #C0C0C0, 0 0px 30px rgba(#444, 0.15), 2px 2px 4px rgba(#444, 0.25), -2px 2px 4px rgba(#444, 0.25), 0 0px 4px rgba(#444, 0.25);
    transform: translateY(4px);
}
}