/*fonts*/
@font-face {
    font-family: 'NY Carlsberg Display';
    src: url('../../webfonts/nycarlsbergdisplay-bold-webfont.woff2') format('woff2'),
         url('../../webfonts/nycarlsbergdisplay-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'NY Carlsberg Display';
    src: url('../../webfonts/nycarlsbergdisplay-regular-webfont.woff2') format('woff2'),
         url('../../webfonts/nycarlsbergdisplay-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'NY Carlsberg Display Light';
    src: url('../../webfonts/nycarlsbergdisplay-light-webfont.woff2') format('woff2'),
         url('../../webfonts/nycarlsbergdisplay-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Somersbyheader2015';
    src: url('../../webfonts/Somersbyheader2015-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Avenir';
    src: url('../../webfonts/Avenir-Black.woff2') format('woff2'),
         url('../../webfonts/Avenir-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Avenir-Book';
    src: url('../../webfonts/Avenir-Book-01.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Avenir-Roman';
    src: url('../../webfonts/Avenir-Roman-12.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html{
    overscroll-behavior: none;
}
body{
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: Somersbyheader2015;
    overscroll-behavior: none;
    overscroll-behavior-y: none;

}
.pace-running .container-game{
/*    display: none;*/
}
.somerstitle{
        color: #047237;
    font-family: Somersbyheader2015;
}
/*form*/
.custom_input.error{
    border: 1px solid red;
}
.custom_input.error~.select2-container--default .select2-selection--single{
    border: 1px solid red;
}
.custom_input.error~.invalid-feedback{
    display: block;
}
.form-control.is-invalid, .was-validated .form-control:invalid + .nice-select{
    background: #FBE3E4;
    border-color: #dc3545;
}
.form-control.is-valid, .was-validated .form-control:valid + .nice-select{
    border-color: #28a745;
}

.deskbg{
    /*filter: blur(8px);
    -webkit-filter: blur(8px);*/
    background-image: url('../../Images/somerbybg.jpg');
    z-index: -1;
        position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.bg-footer,.agegate__terms{
    font-family: NY Carlsberg Display;
}
.container-game{
    max-width: 480px;
    margin: auto;
}
.game_top{
/*    background-image: url(../../Images/Game/game_bg_top.png?v=1);*/
}
.game_top_bg{
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
/*    background: #dddddd8a;*/
    z-index: -1;
}
.time_score_box{
/*    margin: 25px 10px;*/
    padding: 15px 0 5px;
/*    background: #ffffff96;*/
}
#score,#time{
/*    width: 49%;*/
    background-color: #006937;
    display: inline-block;
    padding: 0px 10px;
    color: #fff;
}
#time{
    float: right;
}
#tree {
    display: block;
    width: 100%;
    height: 90%;
        height: 73%;
    margin-bottom: 10%;
/*    background-image: url('../Images/tree.png?v=12');*/
    /*background-size: contain;
    background-repeat: no-repeat;*/
    z-index: 9;
/*    margin-top: 55%;*/
position: relative;

}

#bottle {
   width: 59px;
    height: 169px;
/*    background-color: blue;*/
    background-image: url('../../Images/Game/bottle/0.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 50%;
    left: 50%;
        margin-left: -30px;
    margin-bottom: 16%;
}
#bottle-star{
    position: relative;
    display: none;
    z-index: -1;
}
#bottle-star img{
    position: absolute;
    display: block;
    width: 150px;
    top: 0;
    left: 0;
    margin-left: -46px;
    margin-top: 31px;
    z-index: -1;
}

.unapple{
    position: relative;
    z-index: 10;
}
.apple, .apple_clone {
    display: block;
/*    width: 30%;*/
/*    height: 40%;*/
/*    background-image: url('../Images/apple2.png?v=1');*/
    background-size: cover;
    position: absolute;
    cursor: grab;
    text-decoration: none;
}
.apple img{
    width: 33%;
    display: block;
}
.apple.fade-out {
  pointer-events: none;
  z-index: -1;
}
.dragging {
    cursor: grabbing;
}
#apple-area{
    width: 324px;
    height: 219px;
    position: absolute;
    top: 22px;
    display: block;
    left: 44px;
    border-bottom-left-radius: 74px;
    border-bottom-right-radius: 131px;
    border-top-left-radius: 332px;
    border-top-right-radius: 332px;
    /*    background: #ddd;*/
    z-index: -1;
}
.game_top_box{
    right: 0;
    left: 0;
/*    height: 10%;*/
    z-index: 1;
}
.game_box{

    height: 90vh;
}
.game_box_detail{
/*    top: 0;*/
    bottom: 0;
        right: 0;
    left: 0;
    z-index: 9;
}
.tree-area{
        position: absolute;
    bottom: 41%;
    left: 0;
    right: 0;
    height: 30%;
}
.apple-area2{
    width: 100%;
    height: 39%;
    position: absolute;
    border-bottom-left-radius: 74px;
    border-bottom-right-radius: 131px;
    border-top-left-radius: 332px;
    border-top-right-radius: 332px;
    z-index: 9;
}

.slice-effect {
  position: absolute;
  background-image: linear-gradient(to right, red 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: background-position 0.5s;
}

#juice {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #ff9900;
  transition: top 1s ease-in-out;
}

#bottle.top #juice {
  top: 0;
}

.golden-light {
  position: absolute;
  width: 50px;
  height: 50px;
  background-image: url('../../Images/Game/star.png?v=1');
  background-size: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 999;

}
.golden-light.show{
/*  background-color: gold;*/
  /*-webkit-animation: falling3 1s 1s infinite;
  -webkit-animation-timing-function:ease-in;*/
  z-index: 10;

      /*width: 1vw;
    height: 8vw;
    border-radius: 1% 80% 80%;
    box-shadow: inset 0px 0px 1px #fff;
    border: 0px solid #fff;
    border-left: 5px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 50px solid gold;
    transform-origin: bottom;*/
}
/*score*/
.score-number {
    opacity: 0;
    color: #006937;
    transition: opacity 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -40px;
    margin-top: 64%;
    z-index: -1;
    font-size: 1.7em;
}

.score-number.show {
    padding-left: 30%;
    opacity: 1;
    animation: scoreAnimation 1s ease-in-out;
}

@keyframes scoreAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(-60px);
    opacity: 0;
  }
}

/* custom pages */
.temp1_startpage_start{
    position: absolute;
    bottom: 41.2%;
    display: block;
    width: 33.5%;
    height: 6%;
    z-index: 11;
    left: 6.5%;
}
.temp1_registration_next{
    position: absolute;
    bottom: 20.2%;
    display: block;
    width: 33.5%;
    height: 6%;
    z-index: 11;
    left: 33.2%;

}
.temp1_score_next{
    position: absolute;
    bottom: 30.2%;
    display: block;
    width: 63.5%;
    height: 6%;
    z-index: 11;
    left: 18.2%;
}
.temp1_won_next{
    position: absolute;
    bottom: 30.2%;
    display: block;
    width: 63.5%;
    height: 6%;
    z-index: 11;
    left: 18.2%;
}

/*registration*/
.form_absolute_box{
        top: 15.5%;
    left: 0;
    right: 0;
}
.custom_input{
        border: 0;
    border-radius: 0;
    font-size: .51em;
}
.registration_title{
    font-size: 2em;
    margin-bottom:0;
    color: #047237;
}
.form-check-input.age_tnc_checkbox{
    position: absolute;
    border-radius: 0;
    font-size: .57em;
    margin-top: 0;
}
.age_tnc_txt{
    font-family: Avenir-Roman;
    font-size: .35em;
    padding-left: 2.8em;
    display: block;    
    line-height: 1em;
    margin-top: 0.32em;
}
.btn-somersby{
        background-color: #017139;
    color: #fff;
    padding: 0.21em 0.951em;
    margin-top: 0.41em;
    border-radius: 0;
    line-height: 1em;
    font-size: 1.4em;
}

/*effect falling*/

@-webkit-keyframes falling3 {
 0% {
  -webkit-transform: translate3d(0,0,0) rotate(150deg);
}

10% {
  -webkit-transform: translate3d(430px,640px,0) rotate(150deg);
  opacity: 0;
}

100% {
  -webkit-transform: translate3d(430px,640px,0) rotate(150deg);
  opacity: 0;
}
}
.agegate__markets{
    display: none;
}
.ft-celebrate{
    width: 35%;
}
.cny2022-tnc{
    font-family: Avenir-Roman,arial;
}

/*nice select*/
.nice-select.wide {
    display: inline-block;
    padding: 5px 35px 5px 15px;
    margin: 0;
    height: auto;
    width: 100%;
    min-height: 36px;
    position: relative;
    background-color: #fff;
    line-height: 26px;
    text-align: left;
    text-overflow: ellipsis;
    cursor: pointer;
    touch-action: manipulation;
    border-radius: initial;
}
/*placeholder color*/
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ddd;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ddd;
   opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ddd;
   opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #ddd;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
   color:    #ddd;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #ddd;
}

@media (max-width:998px) {
    .agegate_top,.agegate_bottom{
        height: 10%;
        background-image: url(../../Images/somerbybg.jpg);
        background-size: cover;
    }
    .agegate__inner{
        height: 80%;
    }
    .ft-celebrate{
        width: 60%;
        margin-top: 5%;
    }
    .container-game{
            max-width: 100%;
            font-size: 22px;
        width: 100%;
    }
}
@media (max-height:750px) {
    .container-game{
        font-size: 20px;
    }
    .age_tnc_txt{
        width: 80%;
    }
}
@media (max-height:650px) {
    .container-game{
        font-size: 16px;
    }
    .age_tnc_txt{
        width: 80%;
    }
}
@media (max-height:600px) {
    .container-game{
        font-size: 14px;
    }
    .age_tnc_txt{
        width: 80%;
    }
}