@font-face {
  font-family: Clip;
  src: url("https://acupoftee.github.io/fonts/Clip.ttf");
}

.comman-header{
  z-index: 9;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  background: #0000007a;;
}
[data-rk] .ju367v7i {
  padding-right: 4px;
  font-size: 11px !important;
}
.bardsdiv {
  border: 1px solid black;
  border-radius: 4px;
  padding: 3px 7px;
  margin: auto 4px;
  background: #7c0000bf;
}
.incassection {
  background: url(/react/assets/img/incasbg.png);
  background-size: cover;
  background-repeat: no-repeat;
    cursor: pointer;
    padding: 20px 0px;
}
.videobg{
  background:url("/react/assets/img/thimblesbackground.png");
  width: 100%;
  float: left;
  top: 0;
  padding: none;
  position: fixed;
  z-index: -1;
  height: 100vh;
   background-size: 100% 100%; 
  object-fit: fill;
}
.undercardbg {
  background: url(/react/assets/img/cardbg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 500px;
  
    cursor: pointer;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 500px;
    cursor: pointer;
    z-index: 0;
}

.connectwallet {
  font-size: 20px;
  color: #fffd47;
  text-decoration: auto;
  padding: 0 13px;
  cursor: pointer;
}
.Logout {
  font-size: 20px;
  color: white;
  margin: 0;
  padding: 0 28px;
}
.doubleleft {
  background: url(/react/assets/img/15.png);

  background-size: cover;
  width: 100px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 62px;
  margin: auto;
    cursor: pointer;
}
 .doubleleft p {
    position: absolute;
    top: 21px;
    left: 50px;
    margin: 0;
    font-size: 15px;
    color: white;
    transform: scale(1);
    transition: 0.3s all;
  }
.doubleleft:hover{
  transform: scale(1.2);
  transition: 0.3s all;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 100px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 62px;
  margin: auto;
    cursor: pointer;
    transform: scale(1);
    transition: 0.3s all;
}
.doubleright:hover{
  transform: scale(1.2);
  transition: 0.3s all;
}
.doubleright  p {
    position: absolute;
    top: 17px;
    left: 18px;
    margin: 0;
    font-size: 15px;
    color: white;
  }


.circleback {
  background: url(/react/assets/img/21.png);
  background-size: cover;
  width: 50px;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  border-radius: 50%;
  height: 50px;
    cursor: pointer;
}
/* .history-table {
  background: url(/react/assets/img/8.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 645px;
  border-radius: 14%;
  width:100%;
  padding: 28px;
    cursor: pointer;
    border-radius: 36px !important;
    text-align: center;
    overflow: auto;
} */
.tableblock{
  display: none;

}
.Sidecard{
  background: url(/react/assets/img/8.png);
  width: 100%;
  background-size: 100% 100%;
  height: 800px;
  padding: 3rem 28px;
  cursor: pointer;
  text-align: center;
  overflow: auto;
}
.Sidecard1{
  background: url(/react/assets/img/8.png);
  width: 100%;
  background-size: 100% 100%;
  height: 800px;
  padding: 3rem 28px;
  cursor: pointer;
  text-align: center;
  overflow: auto;
}
.css-zw3mfo-MuiModal-root-MuiDialog-root {
  position: fixed;
  z-index: 9 !important;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
}
table.table.table-responsive {
  width: 100%;
  display: inline-table;
 
  overflow: auto;
}
.thimblesaction {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 7px;
}
.thimblesaction img{
  width: 30px;
}
.verticleTD{
  vertical-align: middle;
}
.verticleTD p{
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #ffda6c;
}
.css-uhb5lp {
 
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;
  margin: 32px;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 64px);
  max-width: 600px;
  border: 3px solid #f902ff !important;
  padding: 0 !important;
  background-color: #040210 !important;
  color: rgb(255 255 255 / 87%) !important;
}
.css-o3d33y {
  margin: 0px;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  color: rgb(255 255 255 / 60%);
  font-size: 1.5rem !important;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  color: rgba(0, 0, 0, 0.6);
  color: #f900ff !important;
}
.css-1ujsas3 {
 
  color: white !important;
  font-size: 1.5rem !important;
  width: 144px !important;
  border: 2px solid #ffce00 !important;
  padding: 0px !important;
}
.withdrawbutton{
  border: 4px solid #f900ff;
  background: transparent;
  border-radius: 50px;
  font-size: 20px;
  color: #f705fe;
  padding: 5px 22px;
}
.css-14b29qc {
  
  justify-content: center !important;
}
.seemorebutton{
  
}

.bottomborder {
  background: url(/react/assets/img/7.png);
  background-size: contain;
  background-position: center;
  position: absolute;
  background-repeat: no-repeat;
  height: 276px;
  border-radius: 14%;
  width: 383px;
  bottom: -26px;
  z-index: -1;
  left: -22px;
  transform: rotate(180deg);
  cursor: pointer;
  bottom: -46px;
}
.arrowposition {
  position: absolute;
  top: 12px;
  width: 15px;
  left: 12px;
}
.mobileadjust {
  display: grid;
  grid-template-columns: auto auto auto;
}







.inputrectangle {
  background: url(/react/assets/img/10.png);
  background-size: 100% 100%;
  width: 80%;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  
  height: 60px;
  margin: auto;
    cursor: pointer;
}
input#exampleFormControlInput1 {
  border: 0;
  height: 58px;
  padding: 10px 10px;
  background: transparent;
  color: white !important;
  text-align: center;
}
.cashspan {
  width: 134px;
  font-size: 12px;
  position: absolute;
  top: 20px;
  left: -18px;
  font-weight: 600;
}
.totalspan {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.minspan {
  font-size: 10px;
  color: #ffffff;
  font-weight: 600;
}

.minmax {
  margin: auto 10px;
  text-align: center;
}


.ballsspanpara {
  font-size: 11px;
  line-height: 13px;
  font-weight: 600;
  color: white;
}
.liststyle {
  border-radius: 9px;
  margin: 0 10px;
}
.triangle-left {
  width: 77px;
  height: 0;
  border-top: 56px solid transparent;
  border-right: 100px solid burlywood;
  border-bottom: 60px solid transparent;
  position: absolute;
  left: -8px;
  top: 0px;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 58px solid transparent;
  border-left: 100px solid burlywood;
  border-bottom: 58px solid transparent;
  position: absolute;
  top: 0px;
  right: -8px;
}
.game-card {
  background:url(/react/assets/img/9.png);
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  margin: auto;
  height: 164px;
  padding: 10px 40px;
  cursor: pointer;
}
.table > :not(:last-child) > :last-child > * {
  border-bottom-color: currentColor;
  width: 33.33%;
  text-align: center;
  color: #952e22;
}
td {
  text-align: center;
  color: #ffffff;
  font-weight: 100 !important;
  font-size: 12px;
  letter-spacing: 1.3px;
}
tr {
  border-color: #952e2240;
  border-style: solid;
  border-width: 0;
}
::-webkit-scrollbar {
  width: 0px;
}


::-webkit-scrollbar-track {
  background: transparent;
}


::-webkit-scrollbar-thumb {
  background: transparent;
}


::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
.singlehide {
  width: 157px;
  height: auto;
  margin: auto;
}
.lvl3 {
  box-shadow: 3px 0 white, -3px 0 white, 0 -3px white, 0 3px white, 6px 0 white,
    -6px 0 white, 0 -6px white, 0 6px white, 0 0 0 3px white, 9px 0 red,
    -9px 0 red, 0 9px red, 0 -9px red, 0 -3px 0 3px red, 0 3px 0 3px red,
    3px 0 0 3px red, -3px 0 0 3px red;
  margin: 9px auto;
}
.border-div {
  margin: 0 auto;
  display: inline-block;
  text-align: center;
  padding: 0.4em 1.3em;
}



@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.adjustblock{
  justify-content: space-between;
    display: grid;
    grid-template-columns: auto auto auto;
}
.walletbox{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
}
.rangebox{
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}
.game_section {
  width: 100%;
  height: 120vh;
  place-items: center;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  min-height: 54.4375em;
 
  font-size: 16px;
}

.minrange{
  width: 50px;
  transform: scale(1);
  transition: 0.5s all;
  margin: 0 14px;
}
.minrange:hover{
  width: 50px;
  transform: scale(1.2);
  transition: 0.5s all;
}

[data-rk] .ju367v9c {
  background: transparent !important;
  border: 4px solid #f607fd !important;
  color: #03f7fc !important;
  line-height: 6px !important;
  font-size: 16px !important;
}
.sewing_thimble {
  background: url(/react/assets/img/Thimble.png) no-repeat fixed center;
  background-size: contain;
  border: none;
  position: absolute;

  top: 8.5em;
  z-index: 4;
width: 146px;
    height: 223px;
  font-size: inherit;
  will-change: transform, top, left;
  
  cursor: pointer;
}
.sewing_thimbleHover {
  transform: translateY(-40px);
}
.thimble-1 {
  top: 8.6em;
  left: 20.8em;
}
.thimble-0 {
  left: 5.8em;
}
.thimble-2 {
  left: 36.8em;
}
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch !important;
  width: 100%;
  display: inline-block;
}
.css-187mznn-MuiSlider-root {
  border-radius: 12px;
  box-sizing: content-box;
  display: inline-block;
  position: relative;
  cursor: pointer;
  touch-action: none;
  color: #ec02fb !important;
  -webkit-tap-highlight-color: transparent;
  height: 4px;
  width: 100%;
  padding: 13px 0;
}
.css-1qx01vb-MuiStack-root>:not(style)+:not(style) {
  margin: 0;
  margin-left: 16px;
  color: #ffdb40 ;
  font-size: 29px;
}
.css-1domaf0 {
  width: 200px;
  margin: auto;
}
.css-exkjcx {
  border-radius: 12px;
  box-sizing: content-box;
  display: inline-block;
  position: relative;
  cursor: pointer;
  touch-action: none;
  color: #ec02fb !important;
  -webkit-tap-highlight-color: transparent;
  height: 4px;
  width: 100%;
  padding: 13px 0px;
}
.css-vubbuv {
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-size: 1.5rem;
  color: #ffdb40;
  font-size: 29px;
}
.css-i4bv87-MuiSvgIcon-root {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentColor;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-size: 1.5rem;
  color: #f6ca0f;
}
/* .winner {
 
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: scale(1.4);
} */
/* .loser {
  background: url(/react/assets/img/activethimbles.png);
  background-repeat: no-repeat;
  background-size: cover;
  
  width: 18%;
 
  position: absolute;
  top: 9rem;
  transform: scale(1.4);
} */

.ballrotation {
  display: block;
  transition: 0.3s;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
    transition: 0.3s;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    transition: 0.3s;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    transition: 0.3s;
    
  }
  .congrats {
    position: absolute;
    /* top: 140px; */
    /* width: 550px; */
    /* height: 100px; */
    /* padding: 20px 10px; */
    /* text-align: center; */
    margin: 0 auto;
    left: 0;
    right: 0;

  }
  
  .congrats h1 {
    transform-origin: 50% 50%;
    font-size: 3rem;
    font-family: 'Sigmar One', cursive;  
    cursor: pointer;
    z-index: 2;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
   
    color: white;
  }

@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}

.thimbleup {
  transform: translateY(-3em);
}

.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 7.5em;
  top: 20.5em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}

.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 22.6em;
  top: 20.5em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.game-box {
  /* width: 550px; */
  margin: auto;
  width: 50%;
}

.reset-btn {
  display: none;
}

.start-btn {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-top: 40px;
  border-radius: 12px;
  width: 180px;
  height: 35px;
  font-size: 25px;
  font-weight: bold;
  border: 3px solid white;
}

.start-btn:hover {
  background: rgb(238, 81, 24);
  color: white;
}

.reward {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 500px;
  /* margin-top: -250px;*/
  margin-left: -400px;
  z-index: 100;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
}

.reward p {
  font-size: 25px;
}

.reward img {
  width: 225px;
}

.btn-close {
  margin-top: 50px;
  font-family: inherit;
  font-size: 20px;
  padding: 10px 30px;
  border: 1px solid black;
  background: #fff;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.2s;
  transition-timing-function: linear;
}

.btn-close:hover {
  background: black;
  color: white;
}

.mask {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
}

.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 38.5em;
  top: 20.5em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}

.pbutton_container {
  padding-bottom: 1.5625em;
  margin-top: 0.6875em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button-89 {
  --b: 3px;
  --s: 0.45em;
  --color: #00ffff;
  padding: calc(0.5em + var(--s)) calc(0.9em + var(--s));
  color: #ff00ff;
  --_p: var(--s);
  background: conic-gradient(
      from 90deg at var(--b) var(--b),
      rgba(0, 0, 0, 0) 90deg,
      #b18aca 0
    )
    var(--_p) var(--_p) / calc(100% - var(--b) - 2 * var(--_p))
    calc(100% - var(--b) - 2 * var(--_p));
  transition: 0.3s linear, color 0s, background-color 0s;
  outline: var(--b) solid rgba(0, 0, 0, 0);
  outline-offset: 0.6em;
  font-size: 23px;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 21%;
 
  font-weight: 600;
}
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}
.button-89:hover,
.button-89:focus-visible {
  --_p: 0px;
  outline-color: #5d6aba;
  outline-offset: 0.05em;
}

.button-89:active {
  background: #5d6aba;
  color: #fff;
}
.css-1t1j96h-MuiPaper-root-MuiDialog-paper {
    background-color: #040210 !important;
    color: rgb(255 255 255 / 87%) !important;
    -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
    margin: 32px;
    position: relative;
    overflow-y: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: calc(100% - 64px);
    max-width: 600px;
    border: 3px solid #f902ff !important;
    padding: 0px !important;
}
.css-qfso29-MuiTypography-root-MuiDialogContentText-root {
  margin: 0;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  font-weight: 400;
  font-size: 1.5rem !important;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  color: rgba(0, 0, 0, 0.6);
  color: #f900ff !important;
}
.css-hlj6pa-MuiDialogActions-root {
 
  justify-content: center !important;
}
.css-1e6y48t-MuiButtonBase-root-MuiButton-root {
  color: white !important;
  font-size: 1.5rem !important;
  width: 144px !important;
  border: 2px solid #ffce00 !important;
  padding: 0px !important;
}


/* rock paper  */

.RockPaper{
 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 100vh;
     
    overflow: auto;
}
.initilized{
  background: url(/react/assets/img/initilization.gif) no-repeat fixed center #0000009e;
  width: 100%;
  height: 100%;
  z-index: 9;
  position: fixed;
  
}
.win{
 /* background: #000000d6;
    width: 100%;
    height: 100vh;
    z-index: 9;
   
    text-align: center;
    overflow:auto;
    position: fixed;
    top: 0;
    padding: 6rem 0; */
    background: url("/react/assets/img/youwin.gif");
    background-size: 100% 100%;
    width: 100%;
    height: 100vh;
    overflow: auto;
    position: fixed;
    z-index: 9;
    cursor: pointer;
        top: 0;

  
}
.lose{
  /* background: #000000d6;
  width: 100%;
  height: 100vh;
  z-index: 9;
 
  text-align: center;
  overflow: auto;
  position: fixed;
  top: 0;
  padding: 13rem 0; */
  background: #000000c7;
  background-size: contain;
    width: 100%;
    height: 100vh;
    overflow: auto;
    position: fixed;
    z-index: 9;
    cursor: pointer;
    top: 0;
    background-repeat: no-repeat;
    display: grid;
  
}
.lose img{
  max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
    width: 750px;
}
.tie{
  /* background: #000000d6;
  width: 100%;
  height: 100vh;
  z-index: 9;
 
  text-align: center;
  overflow: auto;
  position: fixed;
  top: 0;
  padding: 13rem 0; */
 
  background: #000000c7;
  background-size: contain;
    width: 100%;
    height: 100vh;
    overflow: auto;
    position: fixed;
    z-index: 9;
    cursor: pointer;
    top: 0;
    background-repeat: no-repeat;
    display: grid;
  
}
.tie img{
  max-width: 100%;
  max-height: 100%;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  -o-object-fit: contain;
  object-fit: contain;
  width: 750px;
}

.closediv{
  position: absolute;
    width: 100%;
    top: 40rem;
}
.waiting{
  background: url(/react/assets/img/waiting.gif) no-repeat fixed center #0000009e;
  width: 100%;
  height: 100%;
  z-index: 100;
  position: fixed;
      top: 0;
  
}
.result1{
  background: url("/react/assets/img/result.gif") no-repeat fixed center #0000009e ;
  width: 100%;
  height: 100%;
  z-index: 9;
  position: fixed;
      top: 0;
  
}

@import url('https://fonts.googleapis.com/css?family=Acme&display=swap');

@keyframes changeOrder {
  from { z-index: 9;}
  to { z-index: 1; }
}

@keyframes handShake {
  0%,100% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
}

@keyframes handShake2 {
  0%,100% { transform: rotateY(180deg) rotate(10deg); }
  50% { transform: rotateY(180deg) rotate(-10deg); }
}

/* html, body {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: Acme, Arial, sans-serif;
} */
.tablediv{
  margin: 6rem 0;
  display: block;
}
.tablediv1{
  margin: 6rem 0;
  display: block;
}
.balancediv{
  color: #00ff20;

}
.balance1{
  border: 2px solid #d65fa4;
  border-radius: 10px;
  padding: 6px;
  margin: 10px 0;
  background: black;
  color: white;
}
.choicehand{
  color: #ffffff;
    font-size: 36px;
    font-weight: 900;
    margin: 29px;
    font-family: cursive;
}
.resulttable{
 
  border: 2px solid #d65fa487 !important;
    width: 100% !important;
    overflow: auto;
    display: block;
}
.resulttable td{
  font-size: 16px;
}
.Twohands{
  display: flex;
  width: 100%;
  justify-content: center;
}
.flexdiv{
  display: flex;
  
}
.rolletesfixeddiv{
  display: flex;
    justify-content: center;
    margin-top: 1rem;
}
.tableheaddiv{
  width: 20% !important;
  color: #ffc83d !important;
  font-family: cursive;
}
form {
  padding: 4rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 6rem 0;
  background: #00000094;
  border-radius: 20px;
  overflow: auto;
  min-height: 100vh;

}

h1 {
  text-align: center;
}

#hands {
  text-align: center;
}

input:checked ~ div .hand {
  animation: none !important;
}

.hand {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotate(10deg);
  display: inline-block;
  animation: handShake 2s infinite;
}

.hand > div {
  position: absolute;
    box-sizing: border-box;
    border: 3px solid #c9ffae;
    background: #009913;
    transition: all 0.1s;
}

.fist {
  height: 110px;
  left: 40px;
  top: 50px;
  width: 90px;
  border-radius: 20px 0 0 20px;
}

.finger {
  width: 70px;
  height: 30px;
  border-radius: 20px;
  left: 80px;
  transform-origin: 0 50%;
}

.finger-1 { top: 50px; --dif: 0px; }
.finger-2 { top: 78px; left: 84px; --dif: 4px; }
.finger-3 { top: 106px; --dif: 0px; }
.finger-4 { top: 134px; height: 26px; left: 76px; --dif: -8px; }

div.thumb {
  width: 35px;
  height: 70px;
  border-radius: 0 20px 20px 20px;
  top: 50px;
  left: 80px;
  border-left: 0 solid;
  box-shadow: -17px 6px 0 -15px #c9ffae;
}

div.arm {
  width: 22px;
    height: 70px;
    left: 20px;
    top: 70px;
    border: 0;
    border-top: 2px solid #c9ffae;
    border-bottom: 2px solid #c9ffae;
}

#user-hand {
  transform: rotateY(180deg);
  animation: handShake2 2s infinite;
  position: relative;
}

input[type="radio"] {
  position: absolute;
  top: -1000in;
  left: -1000in;
}

input[id$="scissors"]:checked ~ div #user-hand .finger-1,
input[id^="scissors"]:checked ~ div #computer-hand .finger-1 {
  width: 130px;
  transform:rotate(-5deg);
}

input[id$="scissors"]:checked ~ div #user-hand .finger-2,
input[id^="scissors"]:checked ~ div #computer-hand .finger-2 {
  width: 130px;
  transform:rotate(5deg);
}

input[id$="paper"]:checked ~ div #user-hand .finger-1,
input[id$="paper"]:checked ~ div #user-hand .finger-2,
input[id$="paper"]:checked ~ div #user-hand .finger-3,
input[id$="paper"]:checked ~ div #user-hand .finger-4,
input[id^="paper"]:checked ~ div #computer-hand .finger-1,
input[id^="paper"]:checked ~ div #computer-hand .finger-2,
input[id^="paper"]:checked ~ div #computer-hand .finger-3,
input[id^="paper"]:checked ~ div #computer-hand .finger-4 {
  left: 124px;
  left: calc(124px + var(--dif));
  width: 80px;
  border-left: 0;
  border-radius: 0 20px 20px 0;
}

#rock-rock:checked ~ div h2::before,
#paper-paper:checked ~ div h2::before,
#scissors-scissors:checked ~ div h2::before {
  content: "You Tied!"
}
#rock-paper:checked ~ div h2::before,
#paper-scissors:checked ~ div h2::before,
#scissors-rock:checked ~ div h2::before {
  content: "You Win!"
}
#rock-scissors:checked ~ div h2::before,
#paper-rock:checked ~ div h2::before,
#scissors-paper:checked ~ div h2::before {
  content: "Computer Wins!"
}

#message {
  text-align: center;
  display: none;
}

input:checked ~ #message {
  display: block;
  width: 100%;
}
div#game-container {
  height: 100%;
}
/* #hands {
  display: flex;
  align-items: center;
  justify-content: center;
} */

#icons {
  width: 100%;
  /* height: 200px; */
  display: grid;
  margin: auto;
  grid-template-columns: auto auto auto;
  justify-content: space-around;

}

#icons > div {
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.blink{
 
    
  padding: 15px;	
  text-align: center;
  line-height: 50px;
  margin: auto;
}
.totaltext{
  font-size: 25px;
  font-family: cursive;
  color: white;
  animation: blink 1s linear infinite;
}
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}

label:active {
  position: absolute;
    margin-left: 0px;
}

label:active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  z-index: 10;
  height: 60px;
}


label {
  animation: changeOrder 0.45s infinite linear;
  background: #0000004d;
  border: 2px solid #d65fa4;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 100px;
  width: 100px;
  line-height: 60px;
  font-size: 3rem;
  position: absolute;
  top: 0px;
  left: 0;
  user-select: none;
  border-radius: 50px;
  padding: 15px;
}

label:nth-of-type(1) { animation-delay: -0.00s; }
label:nth-of-type(2) { animation-delay: -0.15s; }
label:nth-of-type(3) { animation-delay: -0.30s; }



h1{
  text-align:center;
  text-transform: uppercase;
  color: #F1FAEE; 
  font-size: 4rem;
}

.roller{
  height: 4.125rem;
  line-height: 4rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
 
  font-size: 4rem;
  color: #f5f5f5;
    text-shadow: 0 0 0.6rem #0f2bf7, 0 0 1.5rem #0008ff, -0.2rem 0.1rem 1rem #0804ff, 0.2rem 0.1rem 1rem #0602fb, 0 -0.5rem 2rem #0b38df, 0 0.5rem 3rem #0f3ee9;
}


#spare-time{
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 1rem;
  margin-top: 0;
  color: #A8DADC;
  
}

.roller #rolltext {
  position: absolute;
  top: 0;
  animation: slide 5s infinite;  
}

@keyframes slide {
  0%{
    top:0;
  }
  25%{
    top: -4rem;    
  }
  50%{
    top: -8rem;
  }
  72.5%{
    top: -12.25rem;
  }
}

@media screen and (max-width: 600px){
  h1{
  text-align:center;
  text-transform: uppercase;
  color: #F1FAEE; 
  font-size: 2.125rem;
}
.tableblock {
  display: block;
}
  .roller{
  height: 2.6rem; 
  line-height: 2.125rem;  
  }
  
  #spare-time {
    font-size: 1rem;
    letter-spacing: 0.1rem;
  }
  
  .roller #rolltext {  
  animation: slide-mob 5s infinite;  
}
  
  @keyframes slide-mob {
  0%{
    top:0;
  }
  25%{
    top: -2.125rem;    
  }
  50%{
    top: -4.25rem;
  }
  72.5%{
    top: -6.375rem;
  }
}
}
.sign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
   width: 100%; 
  /* height: 50%; */
  background-image: radial-gradient( ellipse 50% 35% at 50% 50%, #6b1839, transparent );
  transform: translate(-50%, -50%);
  letter-spacing: 2;
  left: 50%;
  top: 20%;
  font-family: "Clip";
  text-transform: uppercase;
  font-size: 2em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd, -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd, 0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine 2s forwards, flicker 3s infinite;
  z-index: 1;
}
@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  28%,
  33% {
    color: #ff65bd;
    text-shadow: none;
  }
  82%,
  97% {
    color: #ff2483;
    text-shadow: none;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

@keyframes shine {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}


h2.winnermassege {
  font-size: 1rem;
  color: white;
  margin: 32px;
}
.css-16jkw2k >.ps-menu-button:hover {
  background-color: #a7a7a700 !important;
  border: none;
}
.css-1wvake5.ps-collapsed {
  width: 0px !important;
  min-width: 0px !important;
  transition: 0.6s all !important;
}
.css-1wvake5 {
  position: relative;
  border-right-width: 1px;
  border-right-style: solid;
  border-color: transparent !important;
  -webkit-transition: width,left,right,300ms;
  transition: width,left,right,300ms;
  width: 250px;
  min-width: 250px;
}
.css-dip3t8 {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 3;
  background: black;
  border: 0;
  color: white;
}
.css-edu7i6 {
  display: none;
  overflow: hidden;
  z-index: 999;
  -webkit-transition: height 300ms;
  transition: height 300ms;
  box-sizing: border-box;
  background-color: transparent !important;
  height: auto;
  display: block;
  position: static!important;
  -webkit-transform: none!important;
  -moz-transform: none!important;
  -ms-transform: none!important;
  transform: none!important;
}
.css-dip3t8 {
 
  position: relative;
  height: 66vh !important;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 3;
  background-color: #010836 !important;
  z-index: 9 !important;
  top: 14.5% !important;
  left: 5% !important;
  /* border: 1px solid #f607fd61; */
  border-radius: 4px;

}
.closehandle{
  position: absolute;
    right: 0;
    margin: 10px;
    top: 0;
    border: 2px solid #f607fd;
    border-radius: 50px;
    padding: 2px 9px;
    color: #03f8fc;
}
.css-1wvake5 {
  position: relative;
  border-right-width: 1px;
  border-right-style: solid;
  border-color: #efefef;
  -webkit-transition: width,left,right,300ms;
  transition: width,left,right,300ms;
  width: 250px;
  min-width: 250px;
  transition: 0.6s all !important;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  position: absolute;
top: 22%;
z-index: 4;
width: 146px;
    height: 223px;
    border: 0;
 
 
}
/* .positiondiv1 {
  height: 500px;
} */
.sidediv{
  height: 683px;
  overflow: auto;
}
 .loser {
  background: url(/react/assets/img/activethimbles.png);
  background-repeat: no-repeat;
  background-size: cover;
  /* transform: scale(1.4); */
  width: 154px;
  height: 223px;
  position: absolute;
  top: 8rem;
 
}
.withdrawbalance{
  color: white;
  font-size: 15px;
}

.wrapper {
  background: #bcd197;
  background: -moz-radial-gradient(center,ellipse cover,#bcd197 0,#325757 100%);
  background: -webkit-gradient(radial,center center,0,center center,100%,color-stop(0,#bcd197),color-stop(100%,#325757));
  background: -webkit-radial-gradient(center,ellipse cover,#bcd197 0,#325757 100%);
  background: -o-radial-gradient(center,ellipse cover,#bcd197 0,#325757 100%);
  background: -ms-radial-gradient(center,ellipse cover,#bcd197 0,#325757 100%);
  background: radial-gradient(ellipse at center,#bcd197 0,#325757 100%);
  width: 100%;
  height: 100vh;
}

.relative, .wrapper, header, section {
  position: relative;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
user agent stylesheet
div {
  display: block;
}
#hand .text, .font, body, h1, h2, h3, h4, h5 {
  font-family: Montserrat,sans-serif;
}
body, h4 {
  font-size: 12px;
}
::selection {
  background-color: #9b2902;
  color: #fff;
  text-shadow: none;
  -webkit-text-shadow: none;
}
#big-text {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 30%;
  z-index: 2000;
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

element.style {
  visibility: visible;
  animation-delay: 4s;
  
}
#big-text {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 30%;
  z-index: 2000;
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
user agent stylesheet
div {
  display: block;
}
style attribute {
  visibility: visible;
}
#hand .text, .font, body, h1, h2, h3, h4, h5 {
  font-family: Montserrat,sans-serif;
}
body, h4 {
  font-size: 12px;
}
::selection {
  background-color: #9b2902;
  color: #fff;
  text-shadow: none;
  -webkit-text-shadow: none;
}
@keyframes bounceInDown{
  0%, 60%, 75%, 90%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
  }
  60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
  }
  75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
  }
  90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
  }
  100% {
      -webkit-transform: none;
      transform: none;
  }
}


#big-text h1 {
  color: #eab863;
  text-shadow: 0 1px 0 #323232;
  font-size: 60px;
  line-height: 60px;
  margin-bottom: 10px;
}
#big-text p {
  color: #fff;
  font-size: 18px;
  line-height: 22px;
}
.le-btn {
  vertical-align: middle;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  -webkit-box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.2);
  box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.2);
  border: none;
  color: #fff;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #9b2902;
  padding: 10px 15px;
  letter-spacing: 1px;
}

#hand .text, .le-btn {
  text-transform: uppercase;
}
.error, .le-btn {
  font-size: 13px;
}
.inline, .le-btn, .social-icons li, .social-icons li a {
  display: inline-block;
}
a, a.active, a:focus, a:hover, button, button.active, button:focus, button:hover {
  outline: 0!important;
}
a {
  text-decoration: none;
  color: #747474;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
#texture {
  height: 100%!important;
}



#grass, #grass2, #hand, #hole, #moon, #texture, .fixed, .goto-top {
  position: fixed;
}
#clouds, #texture {
  z-index: 75;
  width: 100%;
}


#clouds {
  background: url(/react/assets/rockpaper/clouds.png);
  animation: 2s linear bounceInDown,10s linear infinite panClouds;
  position: absolute;
  top: 5%;
  left: 0;
  height: 416px;
}
#clouds, #texture {
  z-index: 75;
  width: 100%;
}
#hole {
  width: 531px;
  height: 250px;
  right: 0;
  margin: auto;
  z-index: 90;
  background: url(/react/assets/rockpaper/hand-hole.png) no-repeat;
}
#moon {
  z-index: 70;
  height: 272px;
  bottom: 300px;
  left: 0;
  right: 0;
  margin: auto;
  top: auto;
  width: 292px;
  background: url(./react/assets/rockpaper/moon.png) no-repeat;
}
.no-margin,body,ul {
  margin: 0
}

.uppercase,h1,h2,h3,h4,h5 {
  text-transform: uppercase
}

body,h4 {
  font-size: 12px
}

.no-margin,.no-padding,body,ul {
  padding: 0
}

.inline,.le-btn,.social-icons li,.social-icons li a {
  display: inline-block
}

.error,.le-btn {
  font-size: 13px
}

#grass,#grass2 {
  width: 150%;
  top: auto!important;
  height: 428px
}

#clouds,#texture {
  z-index: 75;
  width: 100%
}

#hand,#hole {
  bottom: -10px;
  left: 0
}

#big-text h1,#hand .text,.bold,.bold700 {
  font-weight: 700!important
}

#hand .text,.font,body,h1,h2,h3,h4,h5 {
  font-family: Montserrat,sans-serif
}

#hand .text,.goto-top:after {
  position: absolute;
  line-height: 20px;
  text-align: center
}

#preloader,.le-input {
  background-color: #f4f4f4
}

.white {
  color: #fff!important
}

.black {
  color: #000!important
}

.gray {
  color: #abb0ac!important
}

.font2 {
  font-family: Lato,sans-serif
}

img {
  max-width: 100%
}

.no-padding-right {
  padding-right: 0
}

.no-padding-left {
  padding-left: 0
}

.no-margin-left {
  margin-left: 0;
  padding-left: 0
}

.no-margin-right {
  margin-right: 0;
  padding-right: 0
}

a {
  text-decoration: none;
  color: #747474;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  transition: .3s
}

body {
  overflow-x: hidden;
  position: relative
}

::-moz-selection {
  background-color: #9b2902;
  color: #fff;
  text-shadow: none;
  -webkit-text-shadow: none
}

::selection {
  background-color: #9b2902;
  color: #fff;
  text-shadow: none;
  -webkit-text-shadow: none
}

a,a.active,a:focus,a:hover,button,button.active,button:focus,button:hover {
  outline: 0!important
}

a:active,a:focus,a:hover {
  text-decoration: none;
  color: #414141
}

h1,h2,h3,h4,h5 {
  margin: 0;
  font-weight: 600!important
}

.capital {
  text-transform: capitalize
}

#hand .text,.le-btn {
  text-transform: uppercase
}

#loading {
  visibility: hidden
}

:focus {
  outline: 0
}

.center-absolute {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto
}

.error {
  line-height: 18px;
  color: #eab863
}

.absolute {
  position: absolute
}

.relative,.wrapper,section {
  /* position: absolute; */
  width: 100%;
  

 
}

.animate {
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  transition: .3s
}

.animate2 {
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -o-transition: .2s;
  transition: .2s
}

.social-icons {
  list-style: none;
  padding: 0;
  margin: 0
}

.social-icons.big li {
  font-size: 42px
}

.social-icons.small li {
  margin-right: 5px
}

.social-icons.small li a {
  width: 16px;
  height: 16px
}

.social-icons.small li a:hover {
  border-width: 3px
}

.social-icons.small li a:before {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px
}

.social-icons li {
  margin-right: 10px
}

.social-icons li a:hover {
  border-width: 5px
}

.social-icons li a:before {
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px
}

.fontawesome {
  font-family: fontawesome
}

.letterspace1 {
  letter-spacing: 1px
}

.letterspace2 {
  letter-spacing: 2px
}

.letterspace3 {
  letter-spacing: 3px
}

.le-input {
  border: none;
  color: #abb0ac;
  border-radius: 3px;
  padding: 10px
}

.le-btn {
  vertical-align: middle;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  -webkit-box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.2);
  box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.2);
  border: none;
  color: #fff;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #9b2902;
  padding: 10px 15px;
  letter-spacing: 1px
}

.le-btn.no-shadow {
  box-shadow: none
}

.le-btn.active,.le-btn:active,.le-btn:focus,.le-btn:hover {
  background-color: #691c01;
  color: #fff
}

.le-btn.big {
  padding: 15px 30px;
  font-size: 16px
}

.le-btn.icon-btn {
  padding: 9px 10px
}

.le-btn.icon-btn:before {
  font-size: 19px;
  width: 19px;
  height: 19px;
  line-height: 19px
}

.le-btn.small {
  font-size: 10px;
  padding: 9px 12px
}

.bold100 {
  font-weight: 100!important
}

.bold200 {
  font-weight: 200!important
}

.bold300 {
  font-weight: 300!important
}

.bold400 {
  font-weight: 400!important
}

.bold500 {
  font-weight: 500!important
}

.bold600 {
  font-weight: 600!important
}

.bold800 {
  font-weight: 800!important
}

.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.shadow-flat {
  -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,.2);
  box-shadow: 0 3px 0 0 rgba(0,0,0,.2)
}

.shadow-border {
  border: 5px solid rgba(0,0,0,.02)
}

.shadow-flat-low {
  -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.1);
  box-shadow: 0 2px 0 0 rgba(0,0,0,.1)
}

.shadow-inset {
  -webkit-box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.2);
  box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.2)
}

.shadow-glow {
  -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
  box-shadow: 0 0 1px 1px rgba(0,0,0,.1)
}

.bottom-left {
  bottom: 10%;
  left: 5%
}

.top-left {
  top: 10%;
  left: 5%
}

.bottom-right {
  bottom: 10%;
  right: 5%
}

.top-right {
  top: 10%;
  right: 5%
}

.italic {
  font-style: italic
}

.wrapper {
  background: #bcd197;
  background: -moz-radial-gradient(center,ellipse cover,#bcd197 0,#325757 100%);
  background: -webkit-gradient(radial,center center,0,center center,100%,color-stop(0,#bcd197),color-stop(100%,#325757));
  background: -webkit-radial-gradient(center,ellipse cover,#bcd197 0,#325757 100%);
  background: -o-radial-gradient(center,ellipse cover,#bcd197 0,#325757 100%);
  background: -ms-radial-gradient(center,ellipse cover,#bcd197 0,#325757 100%);
  background: radial-gradient(ellipse at center,#bcd197 0,#325757 100%);
  width: 100%;
  height: 100vh;
  position: fixed;
}

.owl-controls {
  z-index: 500
}

#big-text {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 30%;
  z-index: 2000
}

#big-text h1 {
  color: #eab863;
  text-shadow: 0 1px 0 #323232;
  font-size: 60px;
  line-height: 60px;
  margin-bottom: 10px
}

#big-text p {
  color: #fff;
  font-size: 18px;
  line-height: 22px
}

@keyframes panClouds {
  0% {
      background-position-x: 0%
  }

  100% {
      background-position-x: -100%
  }
}

#clouds {
  background: url(/react/assets/rockpaper/clouds.png);
  animation: 2s linear bounceInDown,10s linear infinite panClouds;
  position: absolute;
  top: 5%;
  left: 0;
  height: 416px
}

#grass,#grass2,#hand,#hole,#moon,#texture,.fixed,.goto-top {
  position: fixed
}

#grass,#grass2,#hand .text {
  z-index: 100;
  right: 0;
  margin: auto
}

#grass {
  bottom: -150px;
  left: -100px;
  background: url(/react/assets/rockpaper/grass.png) repeat-x
}

#grass2 {
  bottom: -170px;
  left: -150px;
  background: url(/react/assets/rockpaper/grass2.png) repeat-x
}

#hole {
  width: 531px;
  height: 250px;
  right: 0;
  margin: auto;
  z-index: 90;
  background: url(/react/assets/rockpaper/hand-hole.png) no-repeat
}
.selecteditem {
  border: 4px solid green;
  border-radius: 50%;
  box-shadow: -1px -1px 17px 5px #009913d1;
  transform: scale(1.2);
  transition: 0.1s;
}
#texture {
  height: 100%!important
}

#moon {
  z-index: 70;
  height: 272px;
  bottom: 300px;
  left: 0;
  right: 0;
  margin: auto;
  top: auto;
  width: 292px;
  background: url(/react/assets/rockpaper/moon.png) no-repeat
}

#hand {
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
  width: 338px;
  height: 600px;
  right: 0;
  margin: auto;
  z-index: 80;
  /* background: url(/react/assets/rockpaper/hand.png) no-repeat */
}

#hand .text {
  font-size: 15px;
  top: 73px;
  left: 28px;
  width: 116px;
  -webkit-transform: rotate(11deg);
  -moz-transform: rotate(11deg);
  -ms-transform: rotate(11deg);
  -o-transform: rotate(11deg)
}

#hand .text a {
  text-align: right;
  right: 0;
  border-radius: 2px;
  font-size: 10px;
  padding: 5px;
  line-height: 13px;
  color: #fff;
  background-color: #000;
  float: right;
  margin: 5px 0 0
}

#hand .text a:hover {
  color: #000;
  background-color: #fff
}

#hand.down {
  bottom: -20px
}

.goto-top {
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  background-color: #9b2902;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  opacity: 0;
  right: 20px;
  bottom: 20px;
  z-index: 2000;
  padding: 20px
}

.goto-top:after {
  content: "^";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #fff
}

#preloader,.pace .pace-progress {
  position: fixed;
  right: 0;
  left: 0;
  top: 0
}

#preloader {
  bottom: 0;
  z-index: 9999
}

/* #status {
  width: 100px;
  height: 34px;
  position: absolute;
  z-index: 99999;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  top: 0;
  background-image: url(./react/assets/rockpaper/page-loader.GIF);
  background-repeat: no-repeat;
  background-position: center
} */

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.pace.pace-inactive .pace-progress {
  display: none
}

.pace .pace-progress {
  z-index: 2000;
  bottom: 100px;
  margin: auto;
  height: 5rem;
  width: 5rem
}

.pace .pace-progress:after {
  display: block;
  position: absolute;
  top: 0;
  right: .5rem;
  content: attr(data-progress-text);
  font-family: "Helvetica Neue",sans-serif;
  font-weight: 100;
  font-size: 5rem;
  line-height: 1;
  text-align: right;
  color: rgba(0,0,0,.2)
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 0;
}

.animated.infinite {
-webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
}

.animated.hinge {
-webkit-animation-duration: 2s;
        animation-duration: 2s;
}

@-webkit-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
          transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
          transform: translate3d(0, -30px, 0);
}

70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
          transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
          transform: translate3d(0, -15px, 0);
}

90% {
  -webkit-transform: translate3d(0,-4px,0);
          transform: translate3d(0,-4px,0);
}
}

@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
          transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
          transform: translate3d(0, -30px, 0);
}

70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
          transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
          transform: translate3d(0, -15px, 0);
}

90% {
  -webkit-transform: translate3d(0,-4px,0);
          transform: translate3d(0,-4px,0);
}
}

.bounce {
-webkit-animation-name: bounce;
        animation-name: bounce;
-webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
        transform-origin: center bottom;
}

@-webkit-keyframes flash {
0%, 50%, 100% {
  opacity: 1;
}

25%, 75% {
  opacity: 0;
}
}

@keyframes flash {
0%, 50%, 100% {
  opacity: 1;
}

25%, 75% {
  opacity: 0;
}
}

.flash {
-webkit-animation-name: flash;
        animation-name: flash;
}



@-webkit-keyframes pulse {
0% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

50% {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
          transform: scale3d(1.05, 1.05, 1.05);
}

100% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
}

@keyframes pulse {
0% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

50% {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
          transform: scale3d(1.05, 1.05, 1.05);
}

100% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
}

.pulse {
-webkit-animation-name: pulse;
        animation-name: pulse;
}

@-webkit-keyframes rubberBand {
0% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
          transform: scale3d(1.25, 0.75, 1);
}

40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
          transform: scale3d(0.75, 1.25, 1);
}

50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
          transform: scale3d(1.15, 0.85, 1);
}

65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
          transform: scale3d(.95, 1.05, 1);
}

75% {
  -webkit-transform: scale3d(1.05, .95, 1);
          transform: scale3d(1.05, .95, 1);
}

100% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
}

@keyframes rubberBand {
0% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
          transform: scale3d(1.25, 0.75, 1);
}

40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
          transform: scale3d(0.75, 1.25, 1);
}

50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
          transform: scale3d(1.15, 0.85, 1);
}

65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
          transform: scale3d(.95, 1.05, 1);
}

75% {
  -webkit-transform: scale3d(1.05, .95, 1);
          transform: scale3d(1.05, .95, 1);
}

100% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
}

.rubberBand {
-webkit-animation-name: rubberBand;
        animation-name: rubberBand;
}

@-webkit-keyframes shake {
0%, 100% {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

10%, 30%, 50%, 70%, 90% {
  -webkit-transform: translate3d(-10px, 0, 0);
          transform: translate3d(-10px, 0, 0);
}

20%, 40%, 60%, 80% {
  -webkit-transform: translate3d(10px, 0, 0);
          transform: translate3d(10px, 0, 0);
}
}

@keyframes shake {
0%, 100% {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

10%, 30%, 50%, 70%, 90% {
  -webkit-transform: translate3d(-10px, 0, 0);
          transform: translate3d(-10px, 0, 0);
}

20%, 40%, 60%, 80% {
  -webkit-transform: translate3d(10px, 0, 0);
          transform: translate3d(10px, 0, 0);
}
}

.shake {
-webkit-animation-name: shake;
        animation-name: shake;
}

@-webkit-keyframes swing {
20% {
  -webkit-transform: rotate3d(0, 0, 1, 15deg);
          transform: rotate3d(0, 0, 1, 15deg);
}

40% {
  -webkit-transform: rotate3d(0, 0, 1, -10deg);
          transform: rotate3d(0, 0, 1, -10deg);
}

60% {
  -webkit-transform: rotate3d(0, 0, 1, 5deg);
          transform: rotate3d(0, 0, 1, 5deg);
}

80% {
  -webkit-transform: rotate3d(0, 0, 1, -5deg);
          transform: rotate3d(0, 0, 1, -5deg);
}

100% {
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
          transform: rotate3d(0, 0, 1, 0deg);
}
}

@keyframes swing {
20% {
  -webkit-transform: rotate3d(0, 0, 1, 15deg);
          transform: rotate3d(0, 0, 1, 15deg);
}

40% {
  -webkit-transform: rotate3d(0, 0, 1, -10deg);
          transform: rotate3d(0, 0, 1, -10deg);
}

60% {
  -webkit-transform: rotate3d(0, 0, 1, 5deg);
          transform: rotate3d(0, 0, 1, 5deg);
}

80% {
  -webkit-transform: rotate3d(0, 0, 1, -5deg);
          transform: rotate3d(0, 0, 1, -5deg);
}

100% {
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
          transform: rotate3d(0, 0, 1, 0deg);
}
}

.swing {
-webkit-transform-origin: top center;
    -ms-transform-origin: top center;
        transform-origin: top center;
-webkit-animation-name: swing;
        animation-name: swing;
}

@-webkit-keyframes tada {
0% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
          transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}

30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
          transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}

40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
          transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}

100% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
}

@keyframes tada {
0% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
          transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}

30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
          transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}

40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
          transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}

100% {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
}

.tada {
-webkit-animation-name: tada;
        animation-name: tada;
}



@-webkit-keyframes wobble {
0% {
  -webkit-transform: none;
          transform: none;
}

15% {
  -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
          transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}

30% {
  -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
          transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}

45% {
  -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
          transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}

60% {
  -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
          transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}

75% {
  -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
          transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}

100% {
  -webkit-transform: none;
          transform: none;
}
}

@keyframes wobble {
0% {
  -webkit-transform: none;
          transform: none;
}

15% {
  -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
          transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}

30% {
  -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
          transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}

45% {
  -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
          transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}

60% {
  -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
          transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}

75% {
  -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
          transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}

100% {
  -webkit-transform: none;
          transform: none;
}
}

.wobble {
-webkit-animation-name: wobble;
        animation-name: wobble;
}

@-webkit-keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
          transform: scale3d(.3, .3, .3);
}

20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
          transform: scale3d(1.1, 1.1, 1.1);
}

40% {
  -webkit-transform: scale3d(.9, .9, .9);
          transform: scale3d(.9, .9, .9);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
          transform: scale3d(1.03, 1.03, 1.03);
}

80% {
  -webkit-transform: scale3d(.97, .97, .97);
          transform: scale3d(.97, .97, .97);
}

100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
}

@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
          transform: scale3d(.3, .3, .3);
}

20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
          transform: scale3d(1.1, 1.1, 1.1);
}

40% {
  -webkit-transform: scale3d(.9, .9, .9);
          transform: scale3d(.9, .9, .9);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
          transform: scale3d(1.03, 1.03, 1.03);
}

80% {
  -webkit-transform: scale3d(.97, .97, .97);
          transform: scale3d(.97, .97, .97);
}

100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
}

.bounceIn {
-webkit-animation-name: bounceIn;
        animation-name: bounceIn;
-webkit-animation-duration: .75s;
        animation-duration: .75s;
}

@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
          transform: translate3d(0, -3000px, 0);
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(0, 25px, 0);
          transform: translate3d(0, 25px, 0);
}

75% {
  -webkit-transform: translate3d(0, -10px, 0);
          transform: translate3d(0, -10px, 0);
}

90% {
  -webkit-transform: translate3d(0, 5px, 0);
          transform: translate3d(0, 5px, 0);
}

100% {
  -webkit-transform: none;
          transform: none;
}
}

@keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
          transform: translate3d(0, -3000px, 0);
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(0, 25px, 0);
          transform: translate3d(0, 25px, 0);
}

75% {
  -webkit-transform: translate3d(0, -10px, 0);
          transform: translate3d(0, -10px, 0);
}

90% {
  -webkit-transform: translate3d(0, 5px, 0);
          transform: translate3d(0, 5px, 0);
}

100% {
  -webkit-transform: none;
          transform: none;
}
}

.bounceInDown {
-webkit-animation-name: bounceInDown;
        animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(-3000px, 0, 0);
          transform: translate3d(-3000px, 0, 0);
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(25px, 0, 0);
          transform: translate3d(25px, 0, 0);
}

75% {
  -webkit-transform: translate3d(-10px, 0, 0);
          transform: translate3d(-10px, 0, 0);
}

90% {
  -webkit-transform: translate3d(5px, 0, 0);
          transform: translate3d(5px, 0, 0);
}

100% {
  -webkit-transform: none;
          transform: none;
}
}

@keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(-3000px, 0, 0);
          transform: translate3d(-3000px, 0, 0);
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(25px, 0, 0);
          transform: translate3d(25px, 0, 0);
}

75% {
  -webkit-transform: translate3d(-10px, 0, 0);
          transform: translate3d(-10px, 0, 0);
}

90% {
  -webkit-transform: translate3d(5px, 0, 0);
          transform: translate3d(5px, 0, 0);
}

100% {
  -webkit-transform: none;
          transform: none;
}
}

.bounceInLeft {
-webkit-animation-name: bounceInLeft;
        animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(3000px, 0, 0);
          transform: translate3d(3000px, 0, 0);
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(-25px, 0, 0);
          transform: translate3d(-25px, 0, 0);
}

75% {
  -webkit-transform: translate3d(10px, 0, 0);
          transform: translate3d(10px, 0, 0);
}

90% {
  -webkit-transform: translate3d(-5px, 0, 0);
          transform: translate3d(-5px, 0, 0);
}

100% {
  -webkit-transform: none;
          transform: none;
}
}

@keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(3000px, 0, 0);
          transform: translate3d(3000px, 0, 0);
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(-25px, 0, 0);
          transform: translate3d(-25px, 0, 0);
}

75% {
  -webkit-transform: translate3d(10px, 0, 0);
          transform: translate3d(10px, 0, 0);
}

90% {
  -webkit-transform: translate3d(-5px, 0, 0);
          transform: translate3d(-5px, 0, 0);
}

100% {
  -webkit-transform: none;
          transform: none;
}
}

.bounceInRight {
-webkit-animation-name: bounceInRight;
        animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 3000px, 0);
          transform: translate3d(0, 3000px, 0);
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(0, -20px, 0);
          transform: translate3d(0, -20px, 0);
}

75% {
  -webkit-transform: translate3d(0, 10px, 0);
          transform: translate3d(0, 10px, 0);
}

90% {
  -webkit-transform: translate3d(0, -5px, 0);
          transform: translate3d(0, -5px, 0);
}

100% {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
}

@keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 3000px, 0);
          transform: translate3d(0, 3000px, 0);
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(0, -20px, 0);
          transform: translate3d(0, -20px, 0);
}

75% {
  -webkit-transform: translate3d(0, 10px, 0);
          transform: translate3d(0, 10px, 0);
}

90% {
  -webkit-transform: translate3d(0, -5px, 0);
          transform: translate3d(0, -5px, 0);
}

100% {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
}

.bounceInUp {
-webkit-animation-name: bounceInUp;
        animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
20% {
  -webkit-transform: scale3d(.9, .9, .9);
          transform: scale3d(.9, .9, .9);
}

50%, 55% {
  opacity: 1;
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
          transform: scale3d(1.1, 1.1, 1.1);
}

100% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
          transform: scale3d(.3, .3, .3);
}
}

@keyframes bounceOut {
20% {
  -webkit-transform: scale3d(.9, .9, .9);
          transform: scale3d(.9, .9, .9);
}

50%, 55% {
  opacity: 1;
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
          transform: scale3d(1.1, 1.1, 1.1);
}

100% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
          transform: scale3d(.3, .3, .3);
}
}

.bounceOut {
-webkit-animation-name: bounceOut;
        animation-name: bounceOut;
-webkit-animation-duration: .75s;
        animation-duration: .75s;
}

@-webkit-keyframes bounceOutDown {
20% {
  -webkit-transform: translate3d(0, 10px, 0);
          transform: translate3d(0, 10px, 0);
}

40%, 45% {
  opacity: 1;
  -webkit-transform: translate3d(0, -20px, 0);
          transform: translate3d(0, -20px, 0);
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, 2000px, 0);
          transform: translate3d(0, 2000px, 0);
}
}

@keyframes bounceOutDown {
20% {
  -webkit-transform: translate3d(0, 10px, 0);
          transform: translate3d(0, 10px, 0);
}

40%, 45% {
  opacity: 1;
  -webkit-transform: translate3d(0, -20px, 0);
          transform: translate3d(0, -20px, 0);
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, 2000px, 0);
          transform: translate3d(0, 2000px, 0);
}
}

.bounceOutDown {
-webkit-animation-name: bounceOutDown;
        animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
20% {
  opacity: 1;
  -webkit-transform: translate3d(20px, 0, 0);
          transform: translate3d(20px, 0, 0);
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
          transform: translate3d(-2000px, 0, 0);
}
}

@keyframes bounceOutLeft {
20% {
  opacity: 1;
  -webkit-transform: translate3d(20px, 0, 0);
          transform: translate3d(20px, 0, 0);
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
          transform: translate3d(-2000px, 0, 0);
}
}

.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
        animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
20% {
  opacity: 1;
  -webkit-transform: translate3d(-20px, 0, 0);
          transform: translate3d(-20px, 0, 0);
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
          transform: translate3d(2000px, 0, 0);
}
}

@keyframes bounceOutRight {
20% {
  opacity: 1;
  -webkit-transform: translate3d(-20px, 0, 0);
          transform: translate3d(-20px, 0, 0);
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
          transform: translate3d(2000px, 0, 0);
}
}

.bounceOutRight {
-webkit-animation-name: bounceOutRight;
        animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
20% {
  -webkit-transform: translate3d(0, -10px, 0);
          transform: translate3d(0, -10px, 0);
}

40%, 45% {
  opacity: 1;
  -webkit-transform: translate3d(0, 20px, 0);
          transform: translate3d(0, 20px, 0);
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -2000px, 0);
          transform: translate3d(0, -2000px, 0);
}
}

@keyframes bounceOutUp {
20% {
  -webkit-transform: translate3d(0, -10px, 0);
          transform: translate3d(0, -10px, 0);
}

40%, 45% {
  opacity: 1;
  -webkit-transform: translate3d(0, 20px, 0);
          transform: translate3d(0, 20px, 0);
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -2000px, 0);
          transform: translate3d(0, -2000px, 0);
}
}

.bounceOutUp {
-webkit-animation-name: bounceOutUp;
        animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}

.fadeIn {
-webkit-animation-name: fadeIn;
        animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

@keyframes fadeInDown {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

.fadeInDown {
-webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -2000px, 0);
          transform: translate3d(0, -2000px, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

@keyframes fadeInDownBig {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -2000px, 0);
          transform: translate3d(0, -2000px, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
        animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

@keyframes fadeInLeft {
0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

.fadeInLeft {
-webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
0% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
          transform: translate3d(-2000px, 0, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

@keyframes fadeInLeftBig {
0% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
          transform: translate3d(-2000px, 0, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
        animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

@keyframes fadeInRight {
0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

.fadeInRight {
-webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
0% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
          transform: translate3d(2000px, 0, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

@keyframes fadeInRightBig {
0% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
          transform: translate3d(2000px, 0, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
        animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

@keyframes fadeInUp {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 2000px, 0);
          transform: translate3d(0, 2000px, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

@keyframes fadeInUpBig {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 2000px, 0);
          transform: translate3d(0, 2000px, 0);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
        animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}

.fadeOut {
-webkit-animation-name: fadeOut;
        animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
}

@keyframes fadeOutDown {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
}

.fadeOutDown {
-webkit-animation-name: fadeOutDown;
        animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, 2000px, 0);
          transform: translate3d(0, 2000px, 0);
}
}

@keyframes fadeOutDownBig {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, 2000px, 0);
          transform: translate3d(0, 2000px, 0);
}
}

.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
        animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
}

@keyframes fadeOutLeft {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
}

.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
        animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
          transform: translate3d(-2000px, 0, 0);
}
}

@keyframes fadeOutLeftBig {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
          transform: translate3d(-2000px, 0, 0);
}
}

.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
        animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
}

@keyframes fadeOutRight {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
}

.fadeOutRight {
-webkit-animation-name: fadeOutRight;
        animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
          transform: translate3d(2000px, 0, 0);
}
}

@keyframes fadeOutRightBig {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
          transform: translate3d(2000px, 0, 0);
}
}

.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
        animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}
}

@keyframes fadeOutUp {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}
}

.fadeOutUp {
-webkit-animation-name: fadeOutUp;
        animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -2000px, 0);
          transform: translate3d(0, -2000px, 0);
}
}

@keyframes fadeOutUpBig {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -2000px, 0);
          transform: translate3d(0, -2000px, 0);
}
}

.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
        animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
0% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
          transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

40% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
          transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

50% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
          transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

80% {
  -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
          transform: perspective(400px) scale3d(.95, .95, .95);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

100% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}
}

@keyframes flip {
0% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
          transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

40% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
          transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

50% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
          transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

80% {
  -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
          transform: perspective(400px) scale3d(.95, .95, .95);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

100% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}
}

.animated.flip {
-webkit-backface-visibility: visible;
        backface-visibility: visible;
-webkit-animation-name: flip;
        animation-name: flip;
}

@-webkit-keyframes flipInX {
0% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
          transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  opacity: 0;
}

40% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
          transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

60% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
          transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  opacity: 1;
}

80% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
          transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}

100% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
}
}

@keyframes flipInX {
0% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
          transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  opacity: 0;
}

40% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
          transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

60% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
          transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  opacity: 1;
}

80% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
          transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}

100% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
}
}

.flipInX {
-webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
-webkit-animation-name: flipInX;
        animation-name: flipInX;
}

@-webkit-keyframes flipInY {
0% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
          transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  opacity: 0;
}

40% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
          transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

60% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
          transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  opacity: 1;
}

80% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
          transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}

100% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
}
}

@keyframes flipInY {
0% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
          transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  opacity: 0;
}

40% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
          transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

60% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
          transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  opacity: 1;
}

80% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
          transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}

100% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
}
}

.flipInY {
-webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
-webkit-animation-name: flipInY;
        animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
0% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
}

30% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
          transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  opacity: 1;
}

100% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
          transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  opacity: 0;
}
}

@keyframes flipOutX {
0% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
}

30% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
          transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  opacity: 1;
}

100% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
          transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  opacity: 0;
}
}

.flipOutX {
-webkit-animation-name: flipOutX;
        animation-name: flipOutX;
-webkit-animation-duration: .75s;
        animation-duration: .75s;
-webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
0% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
}

30% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
          transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  opacity: 1;
}

100% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
          transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  opacity: 0;
}
}

@keyframes flipOutY {
0% {
  -webkit-transform: perspective(400px);
          transform: perspective(400px);
}

30% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
          transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  opacity: 1;
}

100% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
          transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  opacity: 0;
}
}

.flipOutY {
-webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
        animation-name: flipOutY;
-webkit-animation-duration: .75s;
        animation-duration: .75s;
}

@-webkit-keyframes lightSpeedIn {
0% {
  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
          transform: translate3d(100%, 0, 0) skewX(-30deg);
  opacity: 0;
}

60% {
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg);
  opacity: 1;
}

80% {
  -webkit-transform: skewX(-5deg);
          transform: skewX(-5deg);
  opacity: 1;
}

100% {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

@keyframes lightSpeedIn {
0% {
  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
          transform: translate3d(100%, 0, 0) skewX(-30deg);
  opacity: 0;
}

60% {
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg);
  opacity: 1;
}

80% {
  -webkit-transform: skewX(-5deg);
          transform: skewX(-5deg);
  opacity: 1;
}

100% {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
        animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
0% {
  opacity: 1;
}

100% {
  -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
          transform: translate3d(100%, 0, 0) skewX(30deg);
  opacity: 0;
}
}

@keyframes lightSpeedOut {
0% {
  opacity: 1;
}

100% {
  -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
          transform: translate3d(100%, 0, 0) skewX(30deg);
  opacity: 0;
}
}

.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
        animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
0% {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate3d(0, 0, 1, -200deg);
          transform: rotate3d(0, 0, 1, -200deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

@keyframes rotateIn {
0% {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate3d(0, 0, 1, -200deg);
          transform: rotate3d(0, 0, 1, -200deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

.rotateIn {
-webkit-animation-name: rotateIn;
        animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
0% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

@keyframes rotateInDownLeft {
0% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
        animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
0% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

@keyframes rotateInDownRight {
0% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
        animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
0% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

@keyframes rotateInUpLeft {
0% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
        animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
0% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, -90deg);
          transform: rotate3d(0, 0, 1, -90deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

@keyframes rotateInUpRight {
0% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, -90deg);
          transform: rotate3d(0, 0, 1, -90deg);
  opacity: 0;
}

100% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}
}

.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
        animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
0% {
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 1;
}

100% {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate3d(0, 0, 1, 200deg);
          transform: rotate3d(0, 0, 1, 200deg);
  opacity: 0;
}
}

@keyframes rotateOut {
0% {
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 1;
}

100% {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate3d(0, 0, 1, 200deg);
          transform: rotate3d(0, 0, 1, 200deg);
  opacity: 0;
}
}

.rotateOut {
-webkit-animation-name: rotateOut;
        animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
0% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  opacity: 1;
}

100% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
}
}

@keyframes rotateOutDownLeft {
0% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  opacity: 1;
}

100% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
}
}

.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
        animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
0% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  opacity: 1;
}

100% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
}
}

@keyframes rotateOutDownRight {
0% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  opacity: 1;
}

100% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
}
}

.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
        animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
0% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  opacity: 1;
}

100% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
}
}

@keyframes rotateOutUpLeft {
0% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  opacity: 1;
}

100% {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
}
}

.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
        animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
0% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  opacity: 1;
}

100% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, 90deg);
          transform: rotate3d(0, 0, 1, 90deg);
  opacity: 0;
}
}

@keyframes rotateOutUpRight {
0% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  opacity: 1;
}

100% {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, 90deg);
          transform: rotate3d(0, 0, 1, 90deg);
  opacity: 0;
}
}

.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
        animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
0% {
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

20%, 60% {
  -webkit-transform: rotate3d(0, 0, 1, 80deg);
          transform: rotate3d(0, 0, 1, 80deg);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

40%, 80% {
  -webkit-transform: rotate3d(0, 0, 1, 60deg);
          transform: rotate3d(0, 0, 1, 60deg);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  opacity: 1;
}

100% {
  -webkit-transform: translate3d(0, 700px, 0);
          transform: translate3d(0, 700px, 0);
  opacity: 0;
}
}

@keyframes hinge {
0% {
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

20%, 60% {
  -webkit-transform: rotate3d(0, 0, 1, 80deg);
          transform: rotate3d(0, 0, 1, 80deg);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

40%, 80% {
  -webkit-transform: rotate3d(0, 0, 1, 60deg);
          transform: rotate3d(0, 0, 1, 60deg);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  opacity: 1;
}

100% {
  -webkit-transform: translate3d(0, 700px, 0);
          transform: translate3d(0, 700px, 0);
  opacity: 0;
}
}

.hinge {
-webkit-animation-name: hinge;
        animation-name: hinge;
}



@-webkit-keyframes rollIn {
0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
          transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

@keyframes rollIn {
0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
          transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
}

.rollIn {
-webkit-animation-name: rollIn;
        animation-name: rollIn;
}



@-webkit-keyframes rollOut {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
          transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}

@keyframes rollOut {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
          transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}

.rollOut {
-webkit-animation-name: rollOut;
        animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
          transform: scale3d(.3, .3, .3);
}

50% {
  opacity: 1;
}
}

@keyframes zoomIn {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
          transform: scale3d(.3, .3, .3);
}

50% {
  opacity: 1;
}
}

.zoomIn {
-webkit-animation-name: zoomIn;
        animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
          transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
          transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

@keyframes zoomInDown {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
          transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
          transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomInDown {
-webkit-animation-name: zoomInDown;
        animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
          transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
          transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

@keyframes zoomInLeft {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
          transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
          transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomInLeft {
-webkit-animation-name: zoomInLeft;
        animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
          transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
          transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

@keyframes zoomInRight {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
          transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
          transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomInRight {
-webkit-animation-name: zoomInRight;
        animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
          transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
          transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

@keyframes zoomInUp {
0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
          transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
          transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomInUp {
-webkit-animation-name: zoomInUp;
        animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
0% {
  opacity: 1;
}

50% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
          transform: scale3d(.3, .3, .3);
}

100% {
  opacity: 0;
}
}

@keyframes zoomOut {
0% {
  opacity: 1;
}

50% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
          transform: scale3d(.3, .3, .3);
}

100% {
  opacity: 0;
}
}

.zoomOut {
-webkit-animation-name: zoomOut;
        animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
          transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

100% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
          transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

@keyframes zoomOutDown {
40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
          transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

100% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
          transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomOutDown {
-webkit-animation-name: zoomOutDown;
        animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
          transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}

100% {
  opacity: 0;
  -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
          transform: scale(.1) translate3d(-2000px, 0, 0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
}

@keyframes zoomOutLeft {
40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
          transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}

100% {
  opacity: 0;
  -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
          transform: scale(.1) translate3d(-2000px, 0, 0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
}

.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
        animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
          transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}

100% {
  opacity: 0;
  -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
          transform: scale(.1) translate3d(2000px, 0, 0);
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
}

@keyframes zoomOutRight {
40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
          transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}

100% {
  opacity: 0;
  -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
          transform: scale(.1) translate3d(2000px, 0, 0);
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
}

.zoomOutRight {
-webkit-animation-name: zoomOutRight;
        animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
          transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

100% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
          transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

@keyframes zoomOutUp {
40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
          transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

100% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
          transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomOutUp {
-webkit-animation-name: zoomOutUp;
        animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
0% {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  visibility: visible;
}

100% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
}

@keyframes slideInDown {
0% {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  visibility: visible;
}

100% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
}

.slideInDown {
-webkit-animation-name: slideInDown;
        animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
0% {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  visibility: visible;
}

100% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
}

@keyframes slideInLeft {
0% {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  visibility: visible;
}

100% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
}

.slideInLeft {
-webkit-animation-name: slideInLeft;
        animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
0% {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  visibility: visible;
}

100% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
}

@keyframes slideInRight {
0% {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  visibility: visible;
}

100% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
}

.slideInRight {
-webkit-animation-name: slideInRight;
        animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
0% {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  visibility: visible;
}

100% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
}

@keyframes slideInUp {
0% {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  visibility: visible;
}

100% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
}

.slideInUp {
-webkit-animation-name: slideInUp;
        animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
0% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

100% {
  visibility: hidden;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
}

@keyframes slideOutDown {
0% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

100% {
  visibility: hidden;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
}

.slideOutDown {
-webkit-animation-name: slideOutDown;
        animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
0% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

100% {
  visibility: hidden;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
}

@keyframes slideOutLeft {
0% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

100% {
  visibility: hidden;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
}

.slideOutLeft {
-webkit-animation-name: slideOutLeft;
        animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
0% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

100% {
  visibility: hidden;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
}

@keyframes slideOutRight {
0% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

100% {
  visibility: hidden;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
}

.slideOutRight {
-webkit-animation-name: slideOutRight;
        animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
0% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

100% {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
}

@keyframes slideOutUp {
0% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

100% {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
}

.slideOutUp {
-webkit-animation-name: slideOutUp;
        animation-name: slideOutUp;
}

@media screen and (max-width: 1500px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-repeat: repeat;
  
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 426px;
  padding: 37px;
  cursor: pointer;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  /* width: 179px !important; */
  /* height: 275px !important; */
  width: 140px ;
  height: 223px ;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 22.6em;
  top: 16.5em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: relative;
  left: 4.5em;
  top: 14.5em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: relative;
  left: 37.5em;
  top: 15.5em;

  width: 5em;
  height: 5em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}

/* .loser {
  background: url(/react/assets/img/activethimbles.png) !important;
  background-repeat: repeat;

background-repeat: no-repeat !important;
background-size: contain !important;
transform: scale(1.4);
width: 17% !important;
height: 16.0625em !important;
position: absolute !important;
top: 5rem !important;
transform: scale(1.4);
} */
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 428px;
  cursor: pointer;
}
.sewing_thimble {
  background: url(/react/assets/img/Thimble.png) no-repeat fixed center;

background-size: auto;
background-size: cover;
border: none;
position: absolute;
top: 22%;
z-index: 4;
width: 140px;
    height: 223px;
font-size: inherit;
will-change: transform, top, left;
transition: all 0.2s ease-in-out;
}
.loser {
  background: url(/react/assets/img/activethimbles.png) ;
  background-repeat: no-repeat;
  background-size: contain !important;
  /* transform: scale(1.4); */
  width: 24%;
  height: 54%;
  position: absolute;
  top: 6rem;
}

.thimble-1 {
  top: 22%;
  left: 39%;
}
.thimble-0 {
  left: 9%;
}
.thimble-2 {
  left: 72%;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
}
@media screen and (max-width: 1400px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-repeat: repeat;
  
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 429px;
  padding: 37px;
  cursor: pointer;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
 
  width: 140px ;
  height: 223px ;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 22.8em;
  top: 17em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: relative;
  left:4.5em;
  top: 14.5em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: relative;
  left: 37.5em;
  top: 14.5em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}

/* .loser {
  background: url(/react/assets/img/activethimbles.png) !important;
  background-repeat: repeat;

background-repeat: no-repeat !important;
background-size: contain !important;
transform: scale(1.4);
width: 17% !important;
height: 16.0625em !important;
position: absolute !important;
top: 5rem !important;
transform: scale(1.4);
} */
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 428px;
  cursor: pointer;
}
.sewing_thimble {
  background: url(/react/assets/img/Thimble.png) no-repeat fixed center;

background-size: auto;
background-size: cover;
border: none;
position: absolute;
top: 22%;
z-index: 4;
width: 146px;
    height: 223px;
font-size: inherit;
will-change: transform, top, left;
transition: all 0.2s ease-in-out;
}
.loser {
  background: url(/react/assets/img/activethimbles.png) ;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  /* transform: scale(1.4); */
  width: 24%;
  height: 54%;
  position: absolute;
  top: 6rem;
}

.thimble-1 {
  top: 22%;
  left: 39%;
}
.thimble-0 {
  left: 9%;
}
.thimble-2 {
  left: 72%;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
}
@media screen and (max-width: 1300px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 345px;
    padding: 37px;
    cursor: pointer;
}
.loser {
  background: url(/react/assets/img/activethimbles.png) !important;
    background-repeat: repeat;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.4);
    width: 17% ;
    height: 53% ;
    position: absolute;
    top: 4.5rem !important;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 20.7em;
  top: 15em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 35em;
  top: 14.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 6em;
  top: 14.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  width: 15% ;
  height: 44% ;
  transform: scale(1.4);
  position: absolute;
}
.tableblock {
  display: block;
}
.game-card {
  background: transparent;
  height: auto;
  padding: 10px 0px;
  cursor: pointer;
}
.adjustblock {
  justify-content: space-between;
  display: grid;
  grid-template-columns: auto;
}
.doubleleft {
  background: url(/react/assets/img/15.png);
  background-size: cover;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleleft p {
  position: absolute;
  top: 11px;
  left: 29px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.minrange {
  width: 20px;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleright p {
  position: absolute;
  top: 9px;
  left: 12px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.bardsdiv1.circleback {
  margin: auto;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 347px;
  cursor: pointer;
}
.sewing_thimble {
  background: url(/react/assets/img/Thimble.png)  fixed center;

background-size: contain !important;
border: none;
position: absolute;
top: 28%;
z-index: 4;
width: 14%;
height: 61%;
font-size: inherit;
will-change: transform, top, left;
transition: all 0.2s ease-in-out;
background-repeat: no-repeat !important;
}
.thimble-1 {
  top: 23%;
  left: 42%;
}
.thimble-0 {
  left: 10%;
}
.thimble-2 {
  left: 33.3em;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
.historytable {
 
  display: none;
}
}
@media screen and (max-width: 1200px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 304px;
    padding: 37px;
    cursor: pointer;
}
.loser {
  background: url(/react/assets/img/activethimbles.png) !important;
    background-repeat: repeat;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.4);
    width: 17% ;
    height: 53% ;
    position: absolute;
    top: 4.5rem !important;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 20.6em;
  top: 13.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 36.5em;
  top: 12.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 5.5em;
  top: 12.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size:contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  width: 15% ;
  height: 44% ;
  transform: scale(1.4);
  position: absolute;
}
.tableblock {
  display: block;
}
.game-card {
  background: transparent;
  height: auto;
  padding: 10px 0px;
  cursor: pointer;
}
.adjustblock {
  justify-content: space-between;
  display: grid;
  grid-template-columns: auto;
}
.doubleleft {
  background: url(/react/assets/img/15.png);
  background-size: cover;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleleft p {
  position: absolute;
  top: 11px;
  left: 29px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.minrange {
  width: 20px;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleright p {
  position: absolute;
  top: 9px;
  left: 12px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.bardsdiv1.circleback {
  margin: auto;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 304px;
  cursor: pointer;
}
.sewing_thimble {
  background: url(/react/assets/img/Thimble.png) no-repeat fixed center;

background-size: contain !important;
border: none;
position: absolute;
top: 22%;
z-index: 4;
width: 13%;
height: 61%;
font-size: inherit;
will-change: transform, top, left;
transition: all 0.2s ease-in-out;
background-repeat: no-repeat !important;
}
.thimble-1 {
  top: 23%;
  left: 44%;

}
.thimble-0 {
  left: 10%;
}
.thimble-2 {
  left:35.3em;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
.historytable {
 
  display: none;
}
}
@media screen and (max-width: 1100px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 304px;
    padding: 37px;
    cursor: pointer;
}
.tablediv{

  display: none;
}
.loser {
  background: url(/react/assets/img/activethimbles.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.4);
    width: 17% ;
    height: 53% ;
    position: absolute;
    top: 4.5rem !important;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 17.6em;
  top: 12.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 30em;
  top: 12.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 5.5em;
  top: 12.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
 
  z-index: 0 !important;
  width: 15%;
  height: 44% ;
  
  position: absolute;
}
.tableblock {
  display: block;
}
.game-card {
  background: transparent;
  height: auto;
  padding: 10px 0px;
  cursor: pointer;
}
.adjustblock {
  justify-content: space-between;
  display: grid;
  grid-template-columns: auto;
}
.doubleleft {
  background: url(/react/assets/img/15.png);
  background-size: cover;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleleft p {
  position: absolute;
  top: 11px;
  left: 29px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.minrange {
  width: 20px;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleright p {
  position: absolute;
  top: 9px;
  left: 12px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.bardsdiv1.circleback {
  margin: auto;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 304px;
  cursor: pointer;
}
.sewing_thimble {
  background: url(/react/assets/img/Thimble.png) no-repeat fixed center;

background-size: contain !important;
border: none;
position: absolute;
top: 26% !important;
z-index: 4;
width: 14%;
    height: 48%;
font-size: inherit;
will-change: transform, top, left;
transition: all 0.2s ease-in-out;
}
.thimble-1 {
  top: 22%;
  left: 43%;
}
.thimble-0 {
  left: 10%;
}
.thimble-2 {
  left: 28.3em;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
.historytable {
 
  display: none;
}
}
@media screen and (max-width: 900px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 304px;
    padding: 37px;
    cursor: pointer;
}
.tablediv{
 
  display: none;
}
.loser {
  background: url(/react/assets/img/activethimbles.png) !important;
    background-repeat: repeat;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.4);
    width: 17% ;
    height: 53% ;
    position: absolute;
    top: 4.5rem !important;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 18.3em;
  top: 13.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 32.5em;
    top: 12.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 5em;
  top: 12.5em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 9;
  display: block;
  cursor: pointer;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  width: 15% ;
  height: 44% ;
  transform: scale(1.4);
  position: absolute;
}
.tableblock {
  display: block;
}
.game-card {
  background: transparent;
  height: auto;
  padding: 10px 0px;
  cursor: pointer;
}
.adjustblock {
  justify-content: space-between;
  display: grid;
  grid-template-columns: auto;
}
.doubleleft {
  background: url(/react/assets/img/15.png);
  background-size: cover;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleleft p {
  position: absolute;
  top: 11px;
  left: 29px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.minrange {
  width: 20px;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleright p {
  position: absolute;
  top: 9px;
  left: 12px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.bardsdiv1.circleback {
  margin: auto;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 304px;
  cursor: pointer;
}
.sewing_thimble {
  background: url(/react/assets/img/Thimble.png) no-repeat fixed center;
  background-repeat: no-repeat !important;

border: none;
position: absolute;
top: 22%;
z-index: 4;
/* width: 18%;
height: 61%; */
font-size: inherit;
will-change: transform, top, left;
transition: all 0.2s ease-in-out;
}
.thimble-1 {
  top: 23%;
  left: 41%;
}
.thimble-0 {
  left: 10%;
}
.thimble-2 {
  left: 31.3em;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
.historytable {
 
  display: none;
}
}
@media all and (max-width: 850px) {
  #big-text {
      left:10%;
      top: 10%
  }
  .Sidecard{
display: none;
  }
  .tableblock {
    display: block;
}
  #big-text h1 {
      font-size: 20px;
      line-height: 20px;
      margin-bottom: 5px
  }

  #big-text p {
      font-size: 12px;
      line-height: 16px
  }

  #big-text .le-btn {
      font-size: 9px;
      padding: 5px 8px
  }
}
@media screen and (max-width: 800px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 304px;
    padding: 37px;
    cursor: pointer;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  width: 12%;
  height: 36%;
  transform: scale(1.4);

}
.tableblock {
  display: block;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 19.5em;
  top: 11em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 32.5em;
  top: 11.5em;
  width: 3em;
  height: 3em;

  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 5.5em;
  top: 10.5em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 302px;
  cursor: pointer;
}
.sewing_thimble {

  background-size: cover;
  border: none;
  position: absolute;
  top: 4.5em;
  z-index: 4;
  width: 74px;
    height: 100px;
  font-size: inherit;
  will-change: transform, top, left;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.thimble-1 {
  top: 4.2em;
  left: 44%;
}
.thimble-0 {
  left: 11%;
}
.thimble-2 {
  left: 76%;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
.game-card {
 background:transparent;
  height: auto;
  padding: 10px 0px;
  cursor: pointer;
}
.adjustblock {
  justify-content: space-between;
  display: grid;
  grid-template-columns: auto;
}
.doubleleft {
  background: url(/react/assets/img/15.png);
  background-size: cover;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleleft p {
  position: absolute;
  top: 11px;
  left: 29px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.minrange{
  width: 20px;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleright p {
  position: absolute;
  top: 9px;
  left: 12px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.bardsdiv1.circleback {
  margin: auto;
}
/* .history-table {
  background: url(/react/assets/img/8.png);
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 645px;
  border-radius: 14%;
  width: 90%;
  padding: 28px;
  cursor: pointer;
  margin: AUTO;
} */


.bottomborder {
  left: 0px;
  width: 100%;
 
}
[data-rk] .ju367v8 {
  display: block;
  font-size: 12px;
}
.loser {
  background: url(/react/assets/img/activethimbles.png);
  background-repeat: repeat;

background-repeat: no-repeat !important;
background-size: contain !important;
transform: scale(1.4);
width: 13%;
height: 38%;
position: absolute;
top: 4.5rem;

}
.Sidecard {
 
  display: none;
}
}
@media screen and (max-width: 700px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 304px;
    padding: 37px;
    cursor: pointer;
}
.tablediv{

  display: none;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  width: 12%;
  height: 36%;
  transform: scale(1.4);

}
.tableblock {
  display: block;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 14em;
  top: 8em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 24em;
    top: 8.5em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 4.3em;
  top: 8.5em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 231px;
  cursor: pointer;
}
.sewing_thimble {

  background-size: cover;
  border: none;
  position: absolute;
  top: 4.5em;
  z-index: 4;
  width: 57px ;
  height: 87px ;
  font-size: inherit;
  will-change: transform, top, left;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.thimble-1 {
  top:3em;
  left: 43%;
}
.thimble-0 {
  left: 11%;
}
.thimble-2 {
  left: 76%;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
.game-card {
 background:transparent;
  height: auto;
  padding: 10px 0px;
  cursor: pointer;
}
.adjustblock {
  justify-content: space-between;
  display: grid;
  grid-template-columns: auto;
}
.doubleleft {
  background: url(/react/assets/img/15.png);
  background-size: cover;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleleft p {
  position: absolute;
  top: 11px;
  left: 29px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.minrange{
  width: 20px;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleright p {
  position: absolute;
  top: 9px;
  left: 12px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.bardsdiv1.circleback {
  margin: auto;
}
/* .history-table {
  background: url(/react/assets/img/8.png);
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 645px;
  border-radius: 14%;
  width: 90%;
  padding: 28px;
  cursor: pointer;
  margin: AUTO;
} */


.bottomborder {
  left: 0px;
  width: 100%;
 
}
[data-rk] .ju367v8 {
  display: block;
  font-size: 12px;
}
.loser {
  background: url(/react/assets/img/activethimbles.png);
  background-repeat: repeat;

background-repeat: no-repeat !important;
background-size: contain !important;
transform: scale(1.4);
width: 13%;
height: 38%;
position: absolute;
top: 4.5rem;

}
.Sidecard {
 
  display: none;
}
}

@media screen and (max-width:600px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 304px;
    padding: 37px;
    cursor: pointer;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  width: 16% ;
  height: 38% ;
  transform: scale(1.4);
}
form {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 6rem auto;
  background: #00000094;
  border-radius: 20px;
  min-height: 800px;
  overflow: auto;
}
/* .history-table {
  background: url(/react/assets/img/8.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 645px;
  border-radius: 14%;
  width: 109%;
  padding: 28px;
  cursor: pointer;
  border-radius: 36px !important;
  text-align: center;
  overflow: auto;
} */
[data-rk] .ju367v9c {
  background: transparent !important;
  border: 4px solid #f607fd !important;
  color: #03f7fc !important;
  line-height: 6px !important;
  font-size: 14px !important;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 14em;
  top: 9em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 24em;
  top: 7.5em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 5em;
  top: 7.5em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 208px;
  cursor: pointer;
}
.sewing_thimble {
  background-size: contain !important;
  border: none;
  position: absolute;
  top: 3.5em;
  z-index: 4;
  width: 63px ;
  height: 86px ;
  font-size: inherit;
  will-change: transform, top, left;
  transition: all 0.2s ease-in-out;
}
.thimble-1 {
  top: 3em;
    left: 45%;
}
.thimble-0 {
  left:4.5em;
}
.thimble-2 {
  left: 77%;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
.game-card {
 background:transparent;
  height: auto;
  padding: 10px 0px;
  cursor: pointer;
}
.adjustblock {
  justify-content: space-between;
  display: grid;
  grid-template-columns: auto;
}
.doubleleft {
  background: url(/react/assets/img/15.png);
  background-size: cover;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleleft p {
  position: absolute;
  top: 11px;
  left: 29px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.minrange{
  width: 20px !important;
  margin: 0;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleright p {
  position: absolute;
  top: 9px;
  left: 12px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.bardsdiv1.circleback {
  margin: auto;
}
/* .history-table {
  background:black;
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 645px;
  border-radius: 14%;
  width: 100%;
  padding: 28px;
  cursor: pointer;
  margin: AUTO;
} */

.historytable {
 
  display: none;
}
.history{
  color: white;
}
.bottomborder {
  left: 0px;
  width: 100%;
 
}
.tableblock{
  display: block;
}
[data-rk] .ju367v8 {
  display: block;
  font-size: 12px !important;
}
.loser {
  background-repeat: no-repeat !important;
  background-size: cover;
  width: 15%;
  height: 35%;
  position: absolute;
  transform: scale(1.4);
  background-size: contain !important;
}
.congrats h1 {
  transform-origin: 50% 50%;
  font-size: 2rem;
  font-family: 'Sigmar One', cursive;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  color: white;
}
}
@media only screen and (min-width: 414px) and (max-width: 500px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 304px;
    padding: 37px;
    cursor: pointer;
}
.congrats h1 {
  transform-origin: 50% 50%;
  font-size: 2rem;
  font-family: 'Sigmar One', cursive;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  color: white;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  width: 16% ;
  height: 38% ;
  transform: scale(1.4);
}
form {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 6rem auto;
  background: #00000094;
  border-radius: 20px;
  min-height: 800px;
  overflow: auto;
}
/* .history-table {
  background: url(/react/assets/img/8.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 645px;
  border-radius: 14%;
  width: 109%;
  padding: 28px;
  cursor: pointer;
  border-radius: 36px !important;
  text-align: center;
  overflow: auto;
} */
[data-rk] .ju367v9c {
  background: transparent !important;
  border: 4px solid #f607fd !important;
  color: #03f7fc !important;
  line-height: 6px !important;
  font-size: 14px !important;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 12.5em;
  top: 8em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 22em;
  top: 7.5em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 2.8em;
  top: 7.5em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 208px;
  cursor: pointer;
}
.sewing_thimble {
  background-size: contain !important;
  border: none;
  position: absolute;
  top: 3.5em;
  z-index: 4;
  width: 63px ;
  height: 86px;
  font-size: inherit;
  will-change: transform, top, left;
  transition: all 0.2s ease-in-out;
}
.thimble-1 {
  top: 3em;
  left: 43%;
}
.thimble-0 {
  left: 2.5em;
}
.thimble-2 {
  left: 77%;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
.game-card {
 background:transparent;
  height: auto;
  padding: 10px 0px;
  cursor: pointer;
}
.adjustblock {
  justify-content: space-between;
  display: grid;
  grid-template-columns: auto;
}
.doubleleft {
  background: url(/react/assets/img/15.png);
  background-size: cover;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleleft p {
  position: absolute;
  top: 11px;
  left: 29px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.minrange{
  width: 20px !important;
  margin: 0;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleright p {
  position: absolute;
  top: 9px;
  left: 12px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.bardsdiv1.circleback {
  margin: auto;
}
/* .history-table {
  background:black;
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 645px;
  border-radius: 14%;
  width: 100%;
  padding: 28px;
  cursor: pointer;
  margin: AUTO;
} */

.historytable {
 
  display: none;
}
.history{
  color: white;
}
.bottomborder {
  left: 0px;
  width: 100%;
 
}
.tableblock{
  display: block;
}
[data-rk] .ju367v8 {
  display: block;
  font-size: 12px !important;
}
.loser {
  background-repeat: no-repeat !important;
  background-size: cover;
  width: 15%;
  height: 35%;
  position: absolute;
  transform: scale(1.4);
  background-size: contain !important;
}
}
@media only screen and (min-width: 100px) and (max-width: 414px) {
  .undercardbg {
    background: url(/react/assets/img/cardbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 304px;
    padding: 37px;
    cursor: pointer;
}
.afterwinning {
  background: url(/react/assets/img/hidebg2.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translateY(-7px);
  z-index: 0 !important;
  width: 44px ;
  height: 69px ;
  transform: scale(1.4);
}
form {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 6rem auto;
  background: #00000094;
  border-radius: 20px;
  min-height: 800px;
  overflow: auto;
}
/* .history-table {
  background: url(/react/assets/img/8.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 645px;
  border-radius: 14%;
  width: 109%;
  padding: 28px;
  cursor: pointer;
  border-radius: 36px !important;
  text-align: center;
  overflow: auto;
} */
[data-rk] .ju367v9c {
  background: transparent !important;
  border: 4px solid #f607fd !important;
  color: #03f7fc !important;
  line-height: 6px !important;
  font-size: 14px !important;
}
.thimble_ball_position-1 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 10.1em;
  top: 8em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-2 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 17.5em;
  top: 7em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.thimble_ball_position-0 {
  background: url(/react/assets/img/Ball.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 3em;
  top: 7em;

  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 0;
  display: block;
  cursor: pointer;
}
.cardbg {
  background: url(/react/assets/img/13.png);
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 208px;
  cursor: pointer;
}
.sewing_thimble {
  background: url(/react/assets/img/Thimble.png) no-repeat fixed center;
  background-size: contain;
  border: none;
  position: absolute;
  top: 3.5em;
  z-index: 4;
  /* width: 44px !important;
  height: 69px !important; */
  font-size: inherit;
  will-change: transform, top, left;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.thimble-1 {
  top: 3em;
  left: 42%;
}
.thimble-0 {
  left: 2.5em;
}
.thimble-2 {
  left: 75%;
}
.button-89 {
 
  width: 38%;
  font-weight: 600;
}

.ballrotation {
  display: block;
}
.ballrotation  .thimble-0 {
    animation: shuffleB 2s 1 alternate;
  }
  .ballrotation .thimble-1 {
   
    animation: shuffleG 2s 1 alternate;
    
  }
  .ballrotation .thimble-2 {
   
    animation: shuffleR 2s 1 alternate;
    
  }


@keyframes shuffleG {
  0% {
    left: 10%;
  }
  25% {
    left: 70%;
  }
  50% {
    left: 10%;
  }
  75% {
    left: 70%;
  }
  100% {
    left: 70%;
  }
}

@keyframes shuffleB {
  0% {
    left: 70%;
  }
  25% {
    left: 40%;
  }
  50% {
    left: 70%;
  }
  75% {
    left: 10%;
  }
  100% {
    left:  40%;
  }
}

@keyframes shuffleR {
  0% {
    left:  40%;
  }
  25% {
    left: 10%;
  }
  50% {
    left: 40%;
  }
  75% {
    left:  40%;
  }
  100% {
    left: 10%;
  }
}
.game-card {
 background:transparent;
  height: auto;
  padding: 10px 0px;
  cursor: pointer;
}
.adjustblock {
  justify-content: space-between;
  display: grid;
  grid-template-columns: auto;
}
.doubleleft {
  background: url(/react/assets/img/15.png);
  background-size: cover;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleleft p {
  position: absolute;
  top: 11px;
  left: 29px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.minrange{
  width: 20px !important;
  margin: 0;
}
.doubleright {
  background: url(/react/assets/img/14.png);
  background-size: contain;
  width: 60px;
  font-weight: 500;
  position: relative;
  background-repeat: no-repeat;
  height: 37px;
  margin: auto;
  cursor: pointer;
}
.doubleright p {
  position: absolute;
  top: 9px;
  left: 12px;
  margin: 0;
  font-size: 11px;
  color: white;
}
.bardsdiv1.circleback {
  margin: auto;
}
/* .history-table {
  background:black;
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  height: 645px;
  border-radius: 14%;
  width: 100%;
  padding: 28px;
  cursor: pointer;
  margin: AUTO;
} */

.historytable {
 
  display: none;
}
.history{
  color: white;
}
.bottomborder {
  left: 0px;
  width: 100%;
 
}
.tableblock{
  display: block;
}
[data-rk] .ju367v8 {
  display: block;
  font-size: 12px !important;
}
.loser {
  background: url(/react/assets/img/activethimbles.png);
  background-repeat: no-repeat !important;
   
    width: 15%;
    height: 35%;
    position: absolute;
    transform: scale(1.4);
    background-size: contain !important;
    
}
}