@charset "UTF-8";

#match-container {
  border-radius: 10px;
  background: #fff;
  padding: 20px;  
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

#drop-container, #drag-container {
  position: relative;
}

#feedback-container {
  margin-top: 20px;
  margin-bottom: 20px;
  transition: opacity .2s ease-in-out;
}

#drop-container {
  margin-bottom: 20px;
}

#drag-container {
}

.col-lg-12 #game-wrapper #match-container #drag-container .draggable-wrapper .draggable img {
  padding: 0;
  margin: 0;
}

.droppable-wrapper, .draggable-wrapper {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.droppable img, .drop-base img, .invalid-drop img, .draggable-wrapper img {
  width: 100%;
  height: auto;
}

.droppable img:after, .invalid-drop img, .draggable-wrapper:after {
  padding-top: 86%;
  display: block;
}

.droppable img, .invalid-drop img {
  vertical-align: bottom;
}

.drop-base {
  position: relative;
  display: block;
}

.drop-base img:after {
  padding-top: 61%;
}

.feedback-img {
  position: absolute;
  top: 0;
  left: 0;
}

.base-text {
  position: absolute;
  left: 30%;
  right: 30%;
  top: 30%;
  bottom: 25%;
  line-height: 1;
  font-weight: bold;
  color: #c8baa4;
  text-shadow: 1px 1px #000;
  font-size: 1.2vw;
}

@media (max-width: 767px) {
  .base-text {
    top: 100%;
    left: 0;
    right: 0;
    font-size: .6em;
    text-shadow: none;
    color: brown;
  }
}

.droppable, .active_drop {
  transform-style: preserve-3d;
  width: 100%;
}

.droppable.ui-droppable-disabled {
    background: none;
}

.draggable {
  transform-style: preserve-3d;
}

.draggable:hover {
  cursor: copy;
}

.draggable img, .draggable.failed-drop img:hover {
  transform: scale(1);
  transition: .2s ease-in-out;
}

.draggable img:hover,
.draggable.ui-draggable-dragging img {
  transform: scale(1.1);
}

.draggable.placed img, .draggable.placed img:hover {
  transition: none;
  transform: none;
  cursor: default;
  width: 100%;
}

#game-wrapper {
    margin: 0;
  padding: 0;
}

#drag-container div:first-child {
  margin-left: 0;
}

#drag-container div:last-child {
  margin-right: 0;
}