.ws-page-wrapper{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  height:100%;
}

.ws-game-container-wrapper{
  padding:1rem 0;
  background-image:url('images/xmas18_matchemup_pagebg.png');
  background-repeat:repeat;
}

.ws-game-container{
  background:#ffffff;
  padding:1rem 0 4rem 0;
}

.ws-game-container h4,
.ws-game-container h5{
    font-family:'source-sans-pro', Arial, sans-serif;
}

.ws-game-container h4{
    font-size:1.2rem;
    font-weight:300;
}

.ws-game-container h5{
    margin:0;
    font-size:4rem;
    font-weight:300;
    color:#84725d;
}

.ws-game-container p{
    margin:1rem 0;
    font-family:'source-sans-pro', Arial, sans-serif;
    font-size:1.2rem;
    font-weight:600;
    color:#ffffff;
}

.ws-game-container #ws-game-end-container #ws-game-end-title{
  padding-bottom:1rem;
}

.ws-game-container div[class='col-']{
    padding:0;
}

.ws-game-container button,
.ws-game-container .ws-btn{
    background-color:#e65334;
    border:0px;
    padding: 14px;
    font-family: 'source-sans-pro', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color:#ffffff;
    line-height:normal;
    text-transform:uppercase;
    text-decoration:none;
}

.ws-game-container .ws-btn{
  display:inline-block !important;
  margin-left:2rem;
}


.ws-game-container button:hover,
.ws-game-container .ws-btn:hover{
    background-color:#84b79e;
}

.ws-game-container .row{
    max-width:1000px;
    margin:0 auto;
    position:relative;
    display:flex;
    justify-content:center;
}

.ws-game-container .ws-game-board-container{
  display:flex;
}

.ws-game-container #ws-game-board{
    padding:10px;
    margin:0 auto;
    border:2px solid #666;
    overflow:hidden;
}

.ws-game-container .ws-turns-container,
.ws-game-container .ws-time-container{
    margin:5px 0;
    padding:10px 0 0;
    width:60px;
    text-align:center;
}

.ws-game-container .ws-turns-container{
    float:left;
}

.ws-game-container .ws-time-container{
    float:right;
}

.ws-game-container .ws-card{
    width:23%;
    margin:1%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
    -moz-user-select: none;
    -webkit-user-drag: none;
    cursor:pointer;
}

.ws-game-container .ws-card:hover{
    outline:5px solid #D7C988;
}

.ws-game-container .ws-card:focus{
  outline:0px;
}

.ws-game-container .ws-card-selected{
    cursor:default;
}

.ws-game-container #ws-game-start-container,
.ws-game-container #ws-game-end-container{
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    padding:0 0.5rem;
    width:100%;
    height:100%;
    align-items:center;
    justify-content: center;
    visibility:hidden;
    background:rgba(227,193,151,0.92);
    text-align:center;
}

.ws-game-container #ws-game-start-container{
    display:flex;
    visibility: visible;
}

.ws-game-container .ws-game-start__inner img{
    max-width:70%;
}

.ws-game-container .ws-game-end__inner{
    width:100%;
    justify-content: center;
    align-self:center;
}

.ws-game-container .ws-share-message{
    text-align:center;
}

/****************************
START CSS3 Animations 
****************************/
/** ANIMATED **/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}

/** RUBBER BAND **/
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

/** FAST **/
.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

/** SLIDE OUT UP **/
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

/** SLIDE IN DOWN **/
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}


/** FADE IN **/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/** BOUNCE IN **/
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

/* BOUNCE IN DOWN */
@-webkit-keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }
  
    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
  
    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }
  
    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
  
    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
  }

/* DELAY 1S*/
.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
/****************************
END CSS3 Animations 
****************************/

@media(min-width:991px){
  .ws-game-container #ws-game-end__inner img{
    width:70%;
  }
}

@media(min-width:1200px){
  .ws-game-container p{
    margin: 0.5rem 0;
  }

  .ws-game-container #ws-game-end__inner img{
    width:50%;
  }
}

@media(min-width:1400px){
  .ws-game-container #ws-game-end__inner img{
    width:70%;
  }
}

@media(max-width:768px){
  .ws-page-wrapper{
    display:block;
  }

  .ws-game-container-wrapper{
    margin: 0 auto;
    padding: 2rem 1rem 2rem 1rem;
  }

  .ws-game-container{
    padding:0.5rem 1rem 2rem 1rem;
  }

  .ws-game-container #ws-game-end__inner img{
    width:50%;
  }
}

@media(max-width:500px){
    .ws-game-container h5{
        font-size:2rem;
    }

    .ws-game-container #ws-game-end-container #ws-game-end-title{
      max-width:60%;
      padding-bottom:0;
    }

    .ws-game-container p,
    .ws-game-container p#ws-game-end-message{
        margin:0.5rem 0;
        font-size: 1.1rem;
    }
}

@media(max-width:400px){
  .ws-game-container p,
  .ws-game-container p#ws-game-end-message{
    font-size:0.8rem;
  }

  .ws-game-container p#ws-game-end-message{
      margin:0;
      margin-bottom:1rem;
  }

  .ws-game-container button, 
  .ws-game-container .ws-btn{
    padding:10px;
    font-size:0.8rem;
  }

  .ws-game-container .ws-btn{
    margin-left:0.5rem;
  }
}

@media(min-width:768px){
  .ws-game-container #ws-game-board{
    max-width:530px;
  }
}