/* Generated by less 2.5.1 */
body,
html {
  position: fixed;
  width: 100vw;
  backface-visibility: hidden;
}
body {
  background-color: white;
  line-height: 1;
}
#scene {
  width: 1200px;
  height: 800px;
  position: relative;
  margin: 0 auto;
  border: 0px solid white;
  overflow: hidden;
}
#scene #game-container {
  width: 975px;
  margin: 20px auto 0;
  text-align: center;
  perspective: 600px;
  perspective-origin: 50% 50%;
}
#scene #playfield {
  display: inline-block;
  transform: translateZ(50px) rotateX(30deg);
}
#scene #inner-playfield {
  display: inline-block;
  height: 500px;
  width: 500px;
  margin: 10px;
  padding: 10px;
  border: 0px solid white;
  font-size: 24px;
  transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  transform: rotateZ(10deg);
  background-color: #d8e1e8;
  background-image: url(../images/NIRVANTAGE_Board_clean.jpg);
  background-size: contain;
  box-shadow: 0px 10px 2px #717e92;
  position: relative;
}
#scene .board-image {
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 168px;
  top: 56px;
  width: 776px;
  height: 669px;
  z-index: 20;
  opacity: 0;
  transition: 0.1;
}
#scene #board1 {
  background-image: url(../images/Boards3D_1.png);
}
#scene #board2 {
  background-image: url(../images/Boards3D_2.png);
}
#scene #board3 {
  background-image: url(../images/Boards3D_3.png);
}
#scene #board4 {
  background-image: url(../images/Boards3D_4.png);
}
#scene #figur {
  position: absolute;
  top: 460px;
  left: 460px;
  background-color: transparent;
  height: 65px;
  width: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotateZ(-20deg) skewY(10deg);
  transform: rotateZ(0deg) skewY(-10deg);
  transition: 0.5s ease-in-out;
  diplay: none;
}
#scene #figur_fg {
  position: absolute;
  z-index: 99;
  background-color: transparent;
  background-image: url(../images/figur_buchi.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s ease-in-out;
  top: 507px;
  left: 739px;
  height: 105px;
  width: 71px;
}
#scene #foreground {
  background-image: url(../images/building.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index: 999;
  width: 458px;
  height: 400px;
  top: 115px;
  left: 336px;
  pointer-events: none;
}
#scene #dice {
  width: 70px;
  height: 50px;
  font-size: 2em;
  font-family: "Helvetica Neue LT Pro 73 Bold Extended", sans-serif;
  padding-top: 20px;
  background-color: black;
  color: white;
  position: absolute;
  top: 400px;
  transform: rotateZ(10deg);
  right: -80px;
  cursor: pointer;
  display: none;
}
#scene .field {
  background: url(../images/nir.png);
  background-repeat: no-repeat;
  background-size: 5%;
  background-position: center;
  position: absolute;
  width: 66px;
  height: 66px;
  opacity: 0;
  transition: 0.5s;
  transition-timing-function: ease-out;
}
#scene #f1 {
  top: 452px;
  left: 362px;
}
#scene #f2 {
  top: 452px;
  left: 294px;
}
#scene #f4 {
  top: 452px;
  left: 160px;
}
#scene #f5 {
  top: 452px;
  left: 91px;
}
#scene #f7 {
  transform: rotate(90deg);
  top: 362px;
  left: 0px;
}
#scene #f8 {
  transform: rotate(90deg);
  top: 294px;
  left: 0px;
}
#scene #f10 {
  transform: rotate(90deg);
  top: 160px;
  left: 0px;
}
#scene #f11 {
  transform: rotate(90deg);
  top: 91px;
  left: 0px;
}
#scene #f13 {
  transform: rotate(180deg);
  top: 0px;
  left: 91px;
}
#scene #f14 {
  transform: rotate(180deg);
  top: 0px;
  left: 160px;
}
#scene #f16 {
  transform: rotate(180deg);
  top: 0px;
  left: 294px;
}
#scene #f17 {
  transform: rotate(180deg);
  top: 0px;
  left: 362px;
}
#scene #f20 {
  transform: rotate(270deg);
  top: 160px;
  left: 452px;
}
#scene #f21 {
  transform: rotate(270deg);
  top: 227px;
  left: 452px;
}
#scene #f22 {
  transform: rotate(270deg);
  top: 294px;
  left: 452px;
}
#dice-shadow {
  width: 200px;
  height: 210px;
  position: absolute;
  left: 966px;
  top: 516px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../images/diceshadow.png);
  opacity: 0;
  transition: 0.3s;
}
#dice-container {
  position: absolute;
  height: 200px;
  width: 200px;
  perspective: 1001px;
  perspective-origin: -200% -400%;
  transform: scale(0.5) rotate(5deg);
  left: 980px;
  top: -200px;
  transition: 1s;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
}
#dice-container.ieVal-1 {
  background-image: url(../images/diceImages3D/dice1.png);
}
#dice-container.ieVal-2 {
  background-image: url(../images/diceImages3D/dice2.png);
}
#dice-container.ieVal-3 {
  background-image: url(../images/diceImages3D/dice3.png);
}
#dice-container.ieVal-4 {
  background-image: url(../images/diceImages3D/dice4.png);
}
#dice-container.ieVal-5 {
  background-image: url(../images/diceImages3D/dice5.png);
}
#dice-container.ieVal-6 {
  background-image: url(../images/diceImages3D/dice6.png);
}
#rolling-dice {
  cursor: pointer;
  position: absolute;
  transform-style: preserve-3d;
  height: 100%;
  width: 100%;
  transform: translateZ(-100px) rotateX(-10deg) rotateY(-10deg);
}
#rolling-dice > div {
  backface-visibility: hidden;
  height: 200px;
  width: 200px;
  position: absolute;
  outline: 0px solid #aaa;
}
#rolling-dice > div > span {
  position: absolute;
  background: #000;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
}
.one {
  transform: rotateY(0deg) translateZ(100px);
  -webkit-transform: rotateY(0deg) translateZ(100px);
}
.two {
  transform: rotateX(180deg) translateZ(100px);
  -webkit-transform: rotateX(180deg) translateZ(100px);
}
.three {
  transform: rotateY(90deg) translateZ(100px);
  -webkit-transform: rotateY(90deg) translateZ(100px);
}
.four {
  transform: rotateY(-90deg) translateZ(100px);
  -webkit-transform: rotateY(-90deg) translateZ(100px);
}
.five {
  transform: rotateX(90deg) translateZ(100px);
  -webkit-transform: rotateX(90deg) translateZ(100px);
}
.six {
  transform: rotateX(-90deg) translateZ(100px);
  -webkit-transform: rotateX(-90deg) translateZ(100px);
}
/*
.one { background-image: url(../images/one.png);}
.two { background-image: url(../images/two.png);}
.three { background-image: url(../images/three.png);}
.four { background-image: url(../images/four.png);}
.five { background-image: url(../images/five.png);}
.six { background-image: url(../images/six.png);}
*/
.one {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/one.png);
}
.two {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/two.png);
}
.three {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/three.png);
}
.four {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/four.png);
}
.five {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/five.png);
}
.six {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/six.png);
}
.one,
.two,
.three,
.four,
.five,
.six {
  background-size: cover;
  transition: 1.0s;
}
#rolling-dice.roll-1 {
  animation: roll-one 1s 1 ease-out forwards;
  -webkit-animation: roll-one 1s 1 ease-out forwards;
}
#rolling-dice.roll-2 {
  animation: roll-two 1s 1 ease-out forwards;
  -webkit-animation: roll-two 1s 1 ease-out forwards;
}
#rolling-dice.roll-3 {
  animation: roll-three 1s 1 ease-out forwards;
  -webkit-animation: roll-three 1s 1 ease-out forwards;
}
#rolling-dice.roll-4 {
  animation: roll-four 1s 1 ease-out forwards;
  -webkit-animation: roll-four 1s 1 ease-out forwards;
}
#rolling-dice.roll-5 {
  animation: roll-five 1s 1 ease-out forwards;
  -webkit-animation: roll-five 1s 1 ease-out forwards;
}
#rolling-dice.roll-6 {
  animation: roll-six 1s 1 ease-out forwards;
  -webkit-animation: roll-six 1s 1 ease-out forwards;
}
#rolling-dice.roll-1 .one {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/one.png);
}
#rolling-dice.roll-1 .three {
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(../images/three.png);
}
#rolling-dice.roll-2 .two {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/two.png);
}
#rolling-dice.roll-2 .three {
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(../images/three.png);
}
#rolling-dice.roll-3 .three {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/three.png);
}
#rolling-dice.roll-3 .one {
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(../images/one.png);
}
#rolling-dice.roll-4 .four {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/four.png);
}
#rolling-dice.roll-4 .two {
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(../images/two.png);
}
#rolling-dice.roll-5 .five {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/five.png);
}
#rolling-dice.roll-5 .four {
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(../images/four.png);
}
#rolling-dice.roll-6 .six {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/six.png);
}
#rolling-dice.roll-6 .three {
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(../images/three.png);
}
@keyframes roll-one {
  0% {
    transform: translateZ(-100px) rotateX(80deg) rotateY(0deg);
  }
  100% {
    transform: translateZ(-100px) rotateX(-100deg) rotateY(-540deg);
  }
}
@keyframes roll-two {
  0% {
    transform: translateZ(-100px) rotateX(80deg) rotateY(0deg);
  }
  100% {
    transform: translateZ(-100px) rotateX(-280deg) rotateY(-540deg);
  }
}
@keyframes roll-three {
  0% {
    transform: translateZ(-100px) rotateX(80deg) rotateY(0deg);
  }
  100% {
    transform: translateZ(-100px) rotateX(-280deg) rotateY(-450deg);
  }
}
@keyframes roll-four {
  0% {
    transform: translateZ(-100px) rotateX(80deg) rotateY(0deg);
  }
  100% {
    transform: translateZ(-100px) rotateX(-280deg) rotateY(-630deg);
  }
}
@keyframes roll-five {
  0% {
    -webkit-transform: translateZ(-100px) rotateX(80deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translateZ(-100px) rotateX(-370deg) rotateY(-350deg) rotateZ(-10deg);
  }
}
@keyframes roll-six {
  0% {
    -webkit-transform: translateZ(-100px) rotateX(80deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translateZ(-100px) rotateX(-370deg) rotateY(10deg) rotateZ(-190deg);
  }
}
@-webkit-keyframes roll-one {
  0% {
    -webkit-transform: translateZ(-100px) rotateX(80deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: translateZ(-100px) rotateX(-100deg) rotateY(-540deg);
  }
}
@-webkit-keyframes roll-two {
  0% {
    -webkit-transform: translateZ(-100px) rotateX(80deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: translateZ(-100px) rotateX(-280deg) rotateY(-540deg);
  }
}
@-webkit-keyframes roll-three {
  0% {
    -webkit-transform: translateZ(-100px) rotateX(80deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: translateZ(-100px) rotateX(-280deg) rotateY(-450deg);
  }
}
@-webkit-keyframes roll-four {
  0% {
    -webkit-transform: translateZ(-100px) rotateX(80deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: translateZ(-100px) rotateX(-280deg) rotateY(-630deg);
  }
}
@-webkit-keyframes roll-five {
  0% {
    -webkit-transform: translateZ(-100px) rotateX(80deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translateZ(-100px) rotateX(-370deg) rotateY(-350deg) rotateZ(-10deg);
  }
}
@-webkit-keyframes roll-six {
  0% {
    -webkit-transform: translateZ(-100px) rotateX(80deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translateZ(-100px) rotateX(-370deg) rotateY(10deg) rotateZ(-190deg);
  }
}
/*



@keyframes roll-one {
    0% { transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ); }
    100% { transform: translateZ( -100px ) rotateX( -190deg ) rotateY( -530deg ); }
}
@keyframes roll-two {
    0% { transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ); }
    100% { transform: translateZ( -100px ) rotateX( -370deg ) rotateY( -550deg ); }
}
@keyframes roll-three {
    0% { transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ); }
    100% { transform: translateZ( -100px ) rotateX( -370deg ) rotateY( -460deg ); }
}
@keyframes roll-four {
    0% { transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ); }
    100% { transform: translateZ( -100px ) rotateX( -370deg ) rotateY( -640deg ); }
}
@keyframes roll-five {
    0% { -webkit-transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ) rotateZ(0deg); }
    100% { -webkit-transform: translateZ( -100px ) rotateX( -460deg ) rotateY( -360deg ) rotateZ(-10deg); }
}
@keyframes roll-six {
    0% { -webkit-transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ) rotateZ(0deg); }
    100% { -webkit-transform: translateZ( -100px ) rotateX( -460deg ) rotateY( 0deg ) rotateZ(-190deg); }
}
@-webkit-keyframes roll-one {
    0% { -webkit-transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ); }
    100% { -webkit-transform: translateZ( -100px ) rotateX( -190deg ) rotateY( -530deg ); }
}
@-webkit-keyframes roll-two {
    0% { -webkit-transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ); }
    100% { -webkit-transform: translateZ( -100px ) rotateX( -370deg ) rotateY( -550deg ); }
}
@-webkit-keyframes roll-three {
    0% { -webkit-transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ); }
    100% { -webkit-transform: translateZ( -100px ) rotateX( -370deg ) rotateY( -460deg ); }
}
@-webkit-keyframes roll-four {
    0% { -webkit-transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ); }
    100% { -webkit-transform: translateZ( -100px ) rotateX( -370deg ) rotateY( -640deg ); }
}
@-webkit-keyframes roll-five {
    0% { -webkit-transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ) rotateZ(0deg); }
    100% { -webkit-transform: translateZ( -100px ) rotateX( -460deg ) rotateY( -360deg ) rotateZ(-10deg); }
}
@-webkit-keyframes roll-six {
    0% { -webkit-transform: translateZ( -100px ) rotateX( -10deg ) rotateY( -10deg ) rotateZ(0deg); }
    100% { -webkit-transform: translateZ( -100px ) rotateX( -460deg ) rotateY( 0deg ) rotateZ(-190deg); }
}
*/