/*html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

body {
  color: #ffffcc;
}*/

#pointRollButton {
  display: none;
}

#winOrLoss {
  text-align: center;
}

/* MODAL THINGS*/
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(170, 133, 57, 0.7);
  z-index: 9998;
  color: #ffffcc;
}

/*.modal-overlay,
.modal {
  visibility: hidden;
  opacity: 0;
}*/

/* HEADER */
/*header {
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

  header h1 {
    float: left;
  }

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: right;
  margin: 15px;
  padding: 10px 50px;
  background: #dddddd;
  border-radius: 8px;
  box-shadow: 0 3px #999;
  transition: .3s;
  text-transform: uppercase;
}

  nav li:hover {
    background: #999;
    cursor: pointer;
    margin-top: 16px;
    padding: 11px 50px 9px 50px;
  }*/

/* BUTTONS */
.roll-button {
  margin: 15px auto;
}

button {
  padding: 10px 50px;
  color: #fff;
  background-color: rgba(0, 0,0,0.3);
  border: solid 1px #fff;
  /*border-radius: 8px;*/
  /*box-shadow: 0 3px #802915;*/
  outline: none;
  transition: .3s;
  margin-left: 20px !important;
  display: inline-block;
}

  button:hover, button:active {
    outline: none;
    /*background: #802915;*/
    cursor: pointer;
    /*padding: 11px 50px 9px 50px;*/
    /*margin-top: 15px;*/
    opacity: 0.75;
  }

.dice-board {
  width: 100%;
  height: 50%;
}

/*########## DICE THINGS ###########*/
.container-dice {
  display: inline-block;
  margin-top: 100px;
  width: 300px;
  margin: 50px auto 0 auto;
}

.dice {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d; /** fixes non transitive 3d from parent and child **/
  transform-style: preserve-3d;
  transition: transform 2s;
  /*transform:rotateY(-25deg);*/
  /*transform: rotateY(0deg);*/
  transform: rotateY(-15deg) rotateZ(-1deg) rotateX(-10deg);
  -webkit-transform: rotateY(-15deg) rotateZ(-1deg) rotateX(-10deg);
  -moz-transform: rotateY(-15deg) rotateZ(-1deg) rotateX(-10deg);
  -ms-transform: rotateY(-15deg) rotateZ(-1deg) rotateX(-10deg);
  -o-transform: rotateY(-15deg) rotateZ(-1deg) rotateX(-10deg);
}

/*.dice.chrome {
    transform: rotateY(0deg);
  }*/

.divot {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 20px;
  background: #000;
  display: none;
}

.dice-one {
  margin-left: 50px;
}

.dice-two {
  margin-left: 50px;
}

.side {
  background-color: rgba(255, 255, 204, 1);
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #808080;
}

  .side:nth-child(1) {
    transform: translateZ(100px);
  }

  .side:nth-child(6) {
    transform: rotateY(180deg) translateZ(100px);
  }

  .side:nth-child(3) {
    transform: rotateY(90deg) translateZ(100px);
  }

  .side:nth-child(4) {
    transform: rotateY(-90deg) translateZ(100px);
  }

  .side:nth-child(5) {
    transform: rotateX(90deg) translateZ(100px);
  }

  .side:nth-child(2) {
    transform: rotateX(-90deg) translateZ(100px);
  }

.show-1 {
  transform: rotateX(710deg) rotateY(-15deg) rotateZ(-723.5deg);
}

.show-6 {
  transform: rotateX(-910.5deg) rotateY(15deg) rotateZ(1083.5deg);
}

.show-3 {
  transform: rotateX(4deg) rotateY(-465deg) rotateZ(-1426deg);
}

.show-4 {
  transform: rotateX(5deg) rotateY(795deg) rotateZ(705.5deg);
}

.show-5 {
  transform: rotateX(-819.5deg) rotateY(3.5deg) rotateZ(-1094deg);
}

.show-2 {
  transform: rotateX(440deg) rotateY(-3.5deg) rotateZ(-706deg);
}

/*.show-2.chrome {
    transform: rotateX(450deg) rotateZ(-720deg);
  }*/

/* Dice Dots */
.two-1, .three-1, .four-1, .five-1, .six-1 {
  top: 20%;
  left: 20%;
}

.four-3, .five-3, .six-4 {
  top: 20%;
  left: 80%;
}

.one-1, .three-2, .five-5 {
  top: 50%;
  left: 50%;
}

.four-2, .five-2, .six-3 {
  top: 80%;
  left: 20%;
}

.two-2, .three-3, .four-4, .five-4, .six-6 {
  top: 80%;
  left: 80%;
}

.six-2 {
  top: 50%;
  left: 20%;
}

.six-5 {
  top: 50%;
  left: 80%;
}

/* CLEARFIX */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/*#dice-one-side-one, #dice-two-side-one, #dice-three-side-one {
  background: url('images/small/Logo.jpg') no-repeat left top;
}

#dice-one-side-two, #dice-two-side-two, #dice-three-side-two {
  background: url('images/small/Linse.jpg') no-repeat left top;
}

#dice-one-side-three, #dice-two-side-three, #dice-three-side-three {
  background: url('images/small/Kamera.jpg') no-repeat left top;
}

#dice-one-side-four, #dice-two-side-four, #dice-three-side-four {
  background: url('images/small/Polaroid.jpg') no-repeat left top;
}

#dice-one-side-five, #dice-two-side-five, #dice-three-side-five {
  background: url('images/small/Scheinwerfer.jpg') no-repeat left top;
}

#dice-one-side-six, #dice-two-side-six, #dice-three-side-six {
  background: url('images/small/Stativ2.jpg') no-repeat left top;
}*/


/* Original Images */
/*#dice-one-side-one, #dice-two-side-one, #dice-three-side-one {
  background: url('images/small/Logo.jpg') no-repeat left top;
}

#dice-one-side-two, #dice-two-side-two, #dice-three-side-two {
  background: url('images/small/Linse.jpg') no-repeat left top;
}

#dice-one-side-three, #dice-two-side-three, #dice-three-side-three {
  background: url('images/small/Kamera.jpg') no-repeat left top;
}

#dice-one-side-four, #dice-two-side-four, #dice-three-side-four {
  background: url('images/small/Polaroid.jpg') no-repeat left top;
}

#dice-one-side-five, #dice-two-side-five, #dice-three-side-five {
  background: url('images/small/Scheinwerfer.jpg') no-repeat left top;
}

#dice-one-side-six, #dice-two-side-six, #dice-three-side-six {
  background: url('images/small/Stativ2.jpg') no-repeat left top;
}*/

/* Easter Images */
#dice-one-side-one, #dice-two-side-one, #dice-three-side-one,
#dice-one-side-four, #dice-two-side-four, #dice-three-side-four {
  background: url('images/small/Ei.jpg') no-repeat left top;
}

#dice-one-side-two, #dice-two-side-two, #dice-three-side-two,
#dice-one-side-five, #dice-two-side-five, #dice-three-side-five {
  background: url('images/small/Hase.jpg') no-repeat left top;
}

#dice-one-side-three, #dice-two-side-three, #dice-three-side-three
/*#dice-one-side-six, #dice-two-side-six, #dice-three-side-six*/ {
  background: url('images/small/Kueken.jpg') no-repeat left top;
}

#dice-one-side-six, #dice-two-side-six, #dice-three-side-six {
  background: url('images/small/Kueken2.jpg') no-repeat left top;
}

#pointRollButton {
  display: none !important;
}

#prize {
  padding-top: 50px;
  color: #000;
  font-size: 30px;
  padding-left: 20px;
  height: 55px;
}

@media(max-width:1461px) {
  .modal.dg-modal .modal-body {
    margin-top: 5vh;
    width: 100vw !important;
    height: 100vh !important;
  }

  .container-dice {
    width: 250px !important;
  }

  /*.side:nth-child(1) {
    transform: translateZ(75px) !important;
  }

  .side:nth-child(6) {
    transform: rotateY(180deg) translateZ(75px) !important;
  }

  .side:nth-child(3) {
    transform: rotateY(90deg) translateZ(75px) !important;
  }

  .side:nth-child(4) {
    transform: rotateY(-90deg) translateZ(75px) !important;
  }

  .side:nth-child(5) {
    transform: rotateX(90deg) translateZ(75px) !important;
  }

  .side:nth-child(2) {
    transform: rotateX(-90deg) translateZ(75px) !important;
  }

  .dice-one {
    margin-left: 50px;
  }

  .dice-two {
    margin-left: 50px;
  }

  .side, .dice {
    width: 150px !important;
    height: 150px !important;
  }

  #dice-one-side-one, #dice-two-side-one, #dice-three-side-one,
  #dice-one-side-two, #dice-two-side-two, #dice-three-side-two,
  #dice-one-side-three, #dice-two-side-three, #dice-three-side-three,
  #dice-one-side-four, #dice-two-side-four, #dice-three-side-four,
  #dice-one-side-five, #dice-two-side-five, #dice-three-side-five,
  #dice-one-side-six, #dice-two-side-six, #dice-three-side-six {
    background-size: cover !important;
  }

  .container-dice {
    width: 150px !important;
  }

  .show-1 {
    transform: rotateX(720deg) rotateZ(-720deg) !important;
  }

  .show-6 {
    transform: rotateX(-900deg) rotateZ(1080deg) !important;
  }

  .show-3 {
    transform: rotateY(-450deg) rotateZ(-1440deg) !important;
  }

  .show-4 {
    transform: rotateY(810deg) rotateZ(720deg) !important;
  }

  .show-5 {
    transform: rotateX(-810deg) rotateZ(-1080deg) !important;
  }

  .show-2 {
    transform: rotateX(450deg) rotateZ(-720deg) !important;
  }*/
}

@media(max-width:1300px) {
  .modal.dg-modal .modal-body {
    margin-top: 5vh;
    width: 100vw !important;
    height: 100vh !important;
  }

  .container-dice {
    width: 200px !important;
  }

  .dice-board {
    text-align: left;
  }

  /*.side:nth-child(1) {
    transform: translateZ(75px) !important;
  }

  .side:nth-child(6) {
    transform: rotateY(180deg) translateZ(75px) !important;
  }

  .side:nth-child(3) {
    transform: rotateY(90deg) translateZ(75px) !important;
  }

  .side:nth-child(4) {
    transform: rotateY(-90deg) translateZ(75px) !important;
  }

  .side:nth-child(5) {
    transform: rotateX(90deg) translateZ(75px) !important;
  }

  .side:nth-child(2) {
    transform: rotateX(-90deg) translateZ(75px) !important;
  }

  .dice-one {
    margin-left: 50px;
  }

  .dice-two {
    margin-left: 50px;
  }

  .side, .dice {
    width: 150px !important;
    height: 150px !important;
  }

  #dice-one-side-one, #dice-two-side-one, #dice-three-side-one,
  #dice-one-side-two, #dice-two-side-two, #dice-three-side-two,
  #dice-one-side-three, #dice-two-side-three, #dice-three-side-three,
  #dice-one-side-four, #dice-two-side-four, #dice-three-side-four,
  #dice-one-side-five, #dice-two-side-five, #dice-three-side-five,
  #dice-one-side-six, #dice-two-side-six, #dice-three-side-six {
    background-size: cover !important;
  }

  .container-dice {
    width: 150px !important;
  }

  .show-1 {
    transform: rotateX(720deg) rotateZ(-720deg) !important;
  }

  .show-6 {
    transform: rotateX(-900deg) rotateZ(1080deg) !important;
  }

  .show-3 {
    transform: rotateY(-450deg) rotateZ(-1440deg) !important;
  }

  .show-4 {
    transform: rotateY(810deg) rotateZ(720deg) !important;
  }

  .show-5 {
    transform: rotateX(-810deg) rotateZ(-1080deg) !important;
  }

  .show-2 {
    transform: rotateX(450deg) rotateZ(-720deg) !important;
  }*/
}

@media(max-width:1100px) {
  .side:nth-child(1) {
    transform: translateZ(50px) !important;
  }

  .side:nth-child(6) {
    transform: rotateY(180deg) translateZ(50px) !important;
  }

  .side:nth-child(3) {
    transform: rotateY(90deg) translateZ(50px) !important;
  }

  .side:nth-child(4) {
    transform: rotateY(-90deg) translateZ(50px) !important;
  }

  .side:nth-child(5) {
    transform: rotateX(90deg) translateZ(50px) !important;
  }

  .side:nth-child(2) {
    transform: rotateX(-90deg) translateZ(50px) !important;
  }

  .modal.dg-modal .modal-body {
    flex-direction: column;
    overflow-y: scroll;
  }

    .modal.dg-modal .modal-body #dg__left, .modal.dg-modal .modal-body #dg__right {
      width: 100vw !important;
    }

  .dice-board {
    text-align: center;
    height: auto;
  }

  .dice-one, .dice-two {
    margin-left: 0;
  }

  .modal.dg-modal .modal-body #dg__right {
    text-align: center;
    padding-bottom: 30px;
  }

  .side, .dice {
    width: 100px !important;
    height: 100px !important;
  }

  #dice-one-side-one, #dice-two-side-one, #dice-three-side-one,
  #dice-one-side-two, #dice-two-side-two, #dice-three-side-two,
  #dice-one-side-three, #dice-two-side-three, #dice-three-side-three,
  #dice-one-side-four, #dice-two-side-four, #dice-three-side-four,
  #dice-one-side-five, #dice-two-side-five, #dice-three-side-five,
  #dice-one-side-six, #dice-two-side-six, #dice-three-side-six {
    background-size: cover !important;
  }

  .modal.dg-modal .modal-body #dg__right {
    padding-bottom: 100px;
  }
}

@media(max-width:768px) {


  .container-dice {
    width: 150px !important;
  }

  .modal .modal-body #dg__right h2 {
    font-size: 40px;
    margin-top: 0 !important;
  }

  .modal .modal-body #dg__right p {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media(max-width:480px) {
  .side:nth-child(1) {
    transform: translateZ(50px);
  }

  .side:nth-child(6) {
    transform: rotateY(180deg) translateZ(50px);
  }

  .side:nth-child(3) {
    transform: rotateY(90deg) translateZ(50px);
  }

  .side:nth-child(4) {
    transform: rotateY(-90deg) translateZ(50px);
  }

  .side:nth-child(5) {
    transform: rotateX(90deg) translateZ(50px);
  }

  .side:nth-child(2) {
    transform: rotateX(-90deg) translateZ(50px);
  }

  .dice-one {
    margin-left: 0px;
  }

  .dice-two {
    margin-left: 0px;
  }

  .side, .dice {
    width: 100px;
    height: 100px;
  }

  .container-dice {
    width: 100px !important;
  }

  #dice-one-side-one, #dice-two-side-one, #dice-three-side-one,
  #dice-one-side-two, #dice-two-side-two, #dice-three-side-two,
  #dice-one-side-three, #dice-two-side-three, #dice-three-side-three,
  #dice-one-side-four, #dice-two-side-four, #dice-three-side-four,
  #dice-one-side-five, #dice-two-side-five, #dice-three-side-five,
  #dice-one-side-six, #dice-two-side-six, #dice-three-side-six {
    background-size: cover;
  }

  .container-dice {
    width: 100px;
  }

  .modal .modal-body #dg__right h2 {
    font-size: 28px;
    margin-top: 0 !important;
  }

  .modal .modal-body #dg_prize span.blue {
    font-size: 22px;
  }

  /*.dice-one.chrome, .dice-two.chrome {
    margin-left: 100px!important;
  }*/

  .modal.dg-modal .modal-body a:not(#close__modal), .modal .modal-body #dg_prize span {
    font-size: 20px;
  }

  .modal.dg-modal .modal-body #dg__right {
    padding-bottom: 100px;
  }
}

@media(max-height:779px) {
  .modal.dg-modal {
    overflow-y: scroll;
  }

    .modal.dg-modal .modal-body {
      height: auto !important;
    }
}