* {
  border: 1px solid transparent;
}

body {
  background-color: green;
  padding: 0;
  margin: 0;
  font-family: 'Ramabhadra', sans-serif;
  color: white;
  z-index: 100;
  perspective: 1200px;
  background-image: url("http://entropymag.org/wp-content/uploads/2014/10/outer-space-wallpaper-pictures.jpg");
}

/***********modal start page***********/

.transform-wrapper {
  margin: 0 auto;
  padding-bottom: 100px;
  padding: 0;
  border: 1px solid black;
  background-color: transparent;
  box-sizing: border-box;
  width: 100%;
  transition: transform 2s, width 2s, height 4s;
}

.modal-start-page-top {
  position: fixed;
  top: 55vh;
  background-color: rgba(222, 222, 222, .8);
  width: 40%;
  height: 30vh;
  margin: 5%;
  border-radius: 40px;
  border: 2px solid black;
  box-sizing: border-box;
  z-index: 1000;
}

.modal-start-page-bottom {
  position: fixed;
  width: 100%;
  height: 1300px;
  padding: 100%;
  background-color: rgba(0,0,0,.1);
  z-index: 800;
}

.add-player, .start-button{
  font-size: 1.5rem;
  margin: 1.6rem auto;
  background-color: rgba(111, 111, 111, 0.9);
}

.start-button {
  display: none;
}

/*********** DEAL NEW HAND MODAL BUTTON  ***********/

.modal-deal-button {
  position: fixed;
  top: 40%;
  right: 25%;
  display: none;
  font-size: 2rem;
  width: 50%;
  height: 4rem;
  box-shadow: 2px 2px 2px black;
  background-color: grey;
  z-index: 1000;
}
/*********** Insurance  ***********/
.modal-insurance {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(444, 444, 444, .8);
  z-index: 2000;
  padding-top: 20%;
  box-sizing: border-box;
}

.get-insurance, .skip-insurance {
  width: 60%;
  height: 3rem;
  font-size: 1.5rem;
  display: block;
  margin: 1rem auto;
  font-family: 'Bungee', cursive;
  color: black;
}

.get-insurance:hover, .skip-insurance:hover {
  width: 66%;
  height: 3.3rem;
}

.insurance-bet {
  text-align: center;
  display: none;
}

h1 {
  color: black;
}

/*********** Play Hand After Deal ***********/

.modal-play-options {
  position: absolute;
  top: 90%;
  left: 0;
  display: none;
  width: 100%;
  height: 10%;
  justify-content: space-around;;
  background-color: transparent;;
  z-index: 2000;
  box-sizing: border-box;
}

.hit-button, .stay-button, .double-button, .split-button {
  padding: 7px;
  display: none;
  font-family: 'Bungee', cursive;
}

.hit-button:hover, .stay-button:hover, .double-button:hover, .split-button:hover{
  height: 2.4rem;
  color: rgb(88,88,88);
}

/*********** MAIN PAGE  ***********/

.player-container, .dealer-container {
  height: 100vh;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  border-radius: 10px;
  position: relative;
  box-sizing: border-box;
  background-color: green;
  z-index: 100;
  transition: height 1.3s
}

/*.player:hover {
  width: 70%;
}*/

.dealer-container {
  background-color: rgba(10, 230, 20, .8);
  height: 0;
}

.card-container {
  display: flex;
  width: 100%;
  transition: width 1s, rotateX .5s;
}

.card-container:hover {
  width: 150%;
  transform: translate3d(-10px, 0px, -50px) rotateX(0deg);
}

.plyr-crd-img {
  width: 25%;
  height: 25%;
}

.player {
  width: 40%;
  height: 100%;
  margin: 0 6px;
  margin-top: 3%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /*border: 1px solid black;*/
  border-radius: 10px;
  padding: 4px;
  /*background-color: #74f442;*/
  background-color: transparent;
  box-sizing: border-box;
  position: relative;
  transition: width 1.5s;
  perspective: 1200px;
  transition: background-color 1s, width: 2s;
}

.card {
  margin-top: 6%;
  margin-bottom: 3%;
  max-width: 120px;
  box-sizing: border-box;
}

.dealer-card {
  margin-top: 6%;
  margin-bottom: 3%;
  max-width: 240px;
  box-sizing: border-box;
}

#h-card {
  width: 226px;
  height: 314px;
}

.holder {

}

.avatar, .av-img {
  width: 100%;
  height: 21vh;
  max-width: 250px;
  margin: auto;
  border-radius: 5%;
  z-index: -200;
  /*border-radius: 50%;*/
  transition: transform 2s, width 1s, border-radius 2s, margin 2s, height 2s;
}
.avatar {
  margin: 3% auto;
  margin-bottom: 5%;
  height: 22vh;
}

.greeting {
    width: 90%;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, .8);
    color: red;
    border-radius: 17px;
    padding: 10px;
}

/*.avatar:hover {
  transform: rotateY(150deg);
  width: 120%;
}*/

button {
  border-radius: 15px;
  font-family: 'Bungee', cursive;
}

/*********** BETTING ***********/

.money-container {
  position: absolute;
  top: 52%;
  width: 100%;
  height: 65%;
  position: relative;
  font-size: 2rem;
  display: none; /*change with jQ*/
}

.money-container:hover {
  z-index: -100;
}

.chips, .bet {
  display: inline-block;
  width: 50%;
  margin-bottom: 7rem;
  color: gold;
}

.bet {
  text-align: right;
  /*animation: blink .6s infinite;*/
}

.increase-bet, .decrease-bet {
  height: 2.5rem;
  width: 2.5rem;
  font-size: 2rem;
  border-radius: 50%;
  z-index: 5000;
}

.increase-bet:hover, .decrease-bet:hover {
  height: 3.3rem;
  width: 3.3rem;
  color: rgb(88,88,88);
}

.decrease-bet {
  margin-right: calc(100% - 6rem);
}

.decrease-bet:hover {
  margin-right: calc(100% - 6.3rem);
}

.increase-bet:hover {
  margin-left: -.6rem;
}

/*********** insult ***********/

.insult {
  text-align: center;
  width: 120%;
  padding: 20px;
  color: red;
  display: none;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, .8);
  box-sizing: border-box;
  margin: 0 auto;
  transform: translate3d(0px, 0px, 0px) rotateX(0deg);
  transition: transform 8s linear 3s, background-color 5s linear 3s;
  z-index: 1000;
}

/*/ ******************** KeyFrame Animations *********************/

@keyframes blink {
    0% { color: white; }
    25% { color: black; }
    75% { color: white; }
    100% { color: white; }
};