#gameContainer {
  position: relative;
  padding-top: 65.58%;
}

.row, .col {
  margin: 0px;
  padding: 0px;
}

.cardRow {
  height: 33.33%;
  width: 100%;
  /* min-height: 100px; */
  margin: 0 auto;
}

#cardSlots {
  left: 0;
  background: #FEF3E9;
}

#cardPile {
  right: 0;
  background: #D9F5FC;
  background-image: linear-gradient(rgba(255, 255, 255, 1) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 1) 2px, transparent 2px);
  background-size: 33.3% 33.3%; 
}

#cardSlots, #cardPile {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 50%;
  border: 0px solid #333;
}

.cardSlot, .playingCard {
  float: left;
  width: 33.3%;
  height: 33.33%;
}

.cardSlot:first-child, .playingCard:first-child {
  margin-left: 0;
}

.cardinner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.cardinner, .cardfront, .cardback {
  width: 100%;
  height: 100%;
}

.cardfront, .cardback {
  position: absolute;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.cardback {
  background-color: white;
  color: white;
  transform: rotateY(180deg);
}

.cardSlot.hovered {
  background: #aaa;
}

.cardSlot {
  height: 100%;
  border-style: dotted;
  border-color: #F68B1F;
}

#cardSlot1 { border-width: 0px 4px 4px 0px; }
#cardSlot2 { border-width: 0px 0px 4px 0px; }
#cardSlot3 { border-width: 0px 0px 4px 4px; }
#cardSlot4 { border-width: 0px 4px 0px 0px; }
#cardSlot5 { border-width: 0px 0px 0px 0px; }
#cardSlot6 { border-width: 0px 0px 0px 4px; }
#cardSlot7 { border-width: 4px 4px 0px 0px; }
#cardSlot8 { border-width: 4px 0px 0px 0px; }
#cardSlot9 { border-width: 4px 0px 0px 4px; }

.playingCard {
  height: 100%;
  background-color: transparent;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  background: #fff;
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px #000;
  border: 1px solid black;
  /* outline-offset: -1px; */
}

.playingCard.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

#whiteOverlay {
  position: absolute;
  background: rgba(255, 255, 255, .5);
  left: 0%;
  top: 0%;
  width: 50%;
  height: 100%;

}

#instructions {
  position: absolute;
  background: url("svg/instructions.svg") no-repeat 100% 100%;
  left: 50%;
  top: 0%;
  width: 50%;
  height: 100%;
}

#startButton {
  position: absolute;
  background: rgba(0,0,0,0);
  border: none;
  left: 0%;
  top: 85%;
  width: 100%;
  height: 15%;
}

#MTEPbutton {
  position: relative;
  background: rgba(0,0,0,0);
  border: none;
  left: 0%;
  top: 80%;
  width: 100%;
  height: 20%;
}

#blueOwl {
  position: absolute;
  background: url("svg/blue_owl.svg") no-repeat 100% 100%;
  left: 71%;
  top: 45%;
  width: 8%;
  height: 20%;
}

#orangeOwl {
  height: 100%;
  width: 100%;
  background: url("svg/orange_owl.svg") no-repeat 100% 100%;
}

#completeMessage {
  position: absolute;
  background: url("svg/complete/dialogue_box.svg") no-repeat 100% 100%;
  left: 75%;
  top: 47%;
  width: 0%;
  height: 0%;
}

#completeMessage.max {
  position: absolute;
  background: url("svg/complete/dialogue_box.svg") no-repeat 100% 100%;
  left: 55%;
  top: 20%;
  width: 40%;
  height: 30%;
}

#completeText {
  position: relative;
  background: url("svg/complete/text.svg") no-repeat 100% 100%;
  left: 0%;
  top: -40%;
  width: 100%;
  height: 100%;
}

#completeButton {
  position: absolute;
  opacity: 1;
  background: url("svg/complete/button.svg") no-repeat 100% 100%;
  border: none;
  left: 15%;
  top: 35%;
  width: 70%;
  height: 35%;
}

#completeButton.hiddenButton {
  opacity: 0;
  top: 40%;
}

#failMessage {
  position: absolute;
  background: url("svg/whoops/dialogue_box.svg") no-repeat 100% 100%;
  left: 75%;
  top: 47%;
  width: 0%;
  height: 0%;
}

#failMessage.max {
  position: absolute;
  background: url("svg/whoops/dialogue_box.svg") no-repeat 100% 100%;
  left: 55%;
  top: 16%;
  width: 40%;
  height: 35%;
}

#failText {
  position: relative;
  background: url("svg/whoops/text.svg") no-repeat 100% 100%;
  left: 0%;
  top: -40%;
  width: 100%;
  height: 100%;
}

#failButton {
  position: absolute;
  opacity: 1;
  background: url("svg/whoops/button.svg") no-repeat 100% 100%;
  border: none;
  left: 18%;
  top: 47%;
  width: 64%;
  height: 25%;
}

#failButton.hiddenButton {
  opacity: 0;
  top: 52%;
}

#shieldContainer{
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
}

#successMessage {
  position: absolute;
  background: url("svg/congratulations/dialogue_box.svg") no-repeat 100% 100%;
  left: 75%;
  top: 50%;
  width: 0%;
  height: 0%;
}

#successMessage.max {
  position: absolute;
  background: url("svg/congratulations/dialogue_box.svg") no-repeat 100% 100%;
  left: 55%;
  top: 11%;
  width: 40%;
  height: 50%;
  transform: translateZ(1000px);
}

@keyframes flip-shield {
  0%   { transform: rotateY(90deg)  }
  1%   { transform: rotateY(180deg) }
  2%  { transform: rotateY(0deg)   }
  3%  { transform: rotateY(180deg) }
  4% { transform: rotateY(0deg)   }
  5.5%   { transform: rotateY(180deg) }
  7%  { transform: rotateY(0deg)   }
  10%  { transform: rotateY(180deg) }
  13% { transform: rotateY(0deg)   }
  20%  { transform: rotateY(180deg) }
  27% { transform: rotateY(0deg)   }
  40%  { transform: rotateY(180deg) }
  55% { transform: rotateY(0deg)   }
}

/*
@keyframes flip-shield {
  0%   { transform: rotateY(90deg)  }
  1%   { transform: rotateY(180deg) }
  2%  { transform: rotateY(0deg)   }
  3%  { transform: rotateY(180deg) }
  4% { transform: rotateY(0deg)   }
  5.5%   { transform: rotateY(180deg) }
  7%  { transform: rotateY(0deg)   }
  10%  { transform: rotateY(180deg) }
  13% { transform: rotateY(0deg)   }
  20%  { transform: rotateY(180deg) }
  27% { transform: rotateY(0deg)   }
  40%  { transform: rotateY(180deg) }
  55% { transform: rotateY(0deg)   }
}
}
*/
#successShield {
  position: absolute;
  background: url("svg/congratulations/shield.svg") no-repeat 100% 100%;
  left: 65%;
  top: 12%;
  width: 20%;
  height: 30%;
}

#successButton {
  position: absolute;
  opacity: 1;
  background: url("svg/congratulations/button.svg") no-repeat 100% 100%;
  border: none;
  left: 18%;
  top: 77%;
  width: 64%;
  height: 17%;
}

#successButton.hiddenButton {
  opacity: 0;
  top: 82%;
}