/* ================================================================================== */
/* == Normalize.css v3.03 =========================================================== */
/* ================================================================================== */

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; }



/* ================================================================================== */
/* == General Styles ================================================================ */
/* ================================================================================== */

html { background-color: #EEEEF0; }
.win-background { background-color: #363E45;
	transition: background-color 2s;
    -moz-transition: background-color 2s;
    -webkit-transition: background-color 2s;
    -o-transition: background-color 2s;}
body { font-family: Helvetica, Arial, "Lucida Grande", sans-serif; color: #333; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.container { max-width: 700px; margin: 0 auto; position: relative; }
.container:after { content: ""; display: table; clear: both;}

p, h1, h2, h3, h4, h5, h6, ul { margin: 0; padding: 0; }
a { text-decoration: none; color: #6CC070;
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-ms-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s; }
a:hover { color: #F05468; }



/* ================================================================================== */
/* == Header ======================================================================== */
/* ================================================================================== */

.toolbar { border-bottom: 1px solid #2C3138; padding: 20px; background: #363E45; color: #E1E2E3; font-weight: bold; height: 80px; }
.toolbar h1 { float: left; font-size: 24px; font-weight: 300; margin-top: 5px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }


.toolbar .button { float: right; margin-left: 15px; }
.toolbar .select2 { float: right; }


.button { display: inline-block; background: #6CC070; border: 1px solid #579C5B; border-bottom-width: 2px; border-radius: 6px; color: #fff; padding: 10px 20px; text-shadow: 0px 1px 1px rgba(0,0,0,0.5); font-size: 14px; box-shadow: 0px 1px 2px rgba(0,0,0,0.25); font-weight: bold; -webkit-font-smoothing: antialiased; cursor: pointer;
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-ms-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s; }
.button:hover,
.button.button-purple:hover { background: #F05468; border-color: #C14455; color: #fff; /* -webkit-transform: scale(1.02); */ }
.button:active { -webkit-transform: scale(0.95); }
.button:focus { outline: none; }

.button.button-purple { background: #8360AF; border-color: #674689; }


.bottom-toolbar { position: fixed; bottom: 0; left: 0; width: 100%; height: 80px; background: #363E45; }
.bottom-toolbar #next { position: absolute; bottom: 20px; right: 20px; }
.bottom-toolbar #reset { position: absolute; bottom: 20px; left: 20px; }
.bottom-toolbar #palace-hint { position: absolute; bottom: 20px; left: 50%; margin-left: -60px; }


/* ================================================================================== */
/* == Cards ========================================================================= */
/* ================================================================================== */

#cards { list-style: none; overflow: hidden; margin: 50px 0; height: 460px; }
#cards > li { width: 220px; text-align: center; height: 460px; color: #EEEEF0; font-size: 20px; position: absolute; background: #EEEEF0; padding: 5px;
-webkit-perspective: 1000;
   -moz-perspective: 1000;
    -ms-perspective: 1000;
     -o-perspective: 1000;
        perspective: 1000; }

#cards > li:nth-child(3n+ 1) { top: 0; left: 0; }
#cards > li:nth-child(3n+ 2) { top: 0; left: 50%; margin-left: -110px; }
#cards > li:nth-child(3n+ 3) { top: 0; right: 0; }

#cards > li .card.flip{ 
-webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
        transform: rotateY(180deg); }
#cards > li .card {  position: relative; border: 6px solid #fff; border-radius: 6px; box-shadow: 0px 1px 2px rgba(0,0,0,0.25); height: 300px; width: 100%; cursor: pointer;
-webkit-transition: 0.6s;
   -moz-transition: 0.6s;
	-ms-transition: 0.6s;
	 -o-transition: 0.6s;
        transition: 0.6s;
-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
        transform-style: preserve-3d; }
#cards li .front,
#cards li .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
     -o-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
        transform-style: preserve-3d; }
#cards li .front { background: #fff; color: #363E45; text-shadow: 0px 1px 1px rgba(0,0,0,0.2); line-height: 290px; font-size: 40px; }
#cards li .back { background: #6CC070;
-webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
        transform: rotateY(180deg); }	  

[data-card-activity="disabled"] { pointer-events: none; } /* Faster DATA method - Makes it so you can't click on a card again once it's active. */


#cards .hearts .front:after { content: ""; display: inline-block; vertical-align: 0px; margin-left: 5px; background: url(../../img/heart.svg) center center; background-size: 30px; height: 30px; width: 30px; }
#cards .diamonds .front:after { content: ""; display: inline-block; vertical-align: -3px; margin-left: 3px; background: url(../../img/diamond.svg) center center; background-size: 30px; height: 30px; width: 30px; }
#cards .clubs .front:after { content: ""; display: inline-block; vertical-align: -3px; margin-left: 5px; background: url(../../img/club.svg) center center; background-size: 30px; height: 30px; width: 30px; }
#cards .spades .front:after { content: ""; display: inline-block; vertical-align: -3px; margin-left: 5px; background: url(../../img/spade.svg) center center; background-size: 30px; height: 30px; width: 30px; }





.card-info { }
.card-info ul { display: none; margin: 15px 0 -15px 0;  }
.card-info li { display: block; color: #363E45; font-size: 14px; line-height: 20px; opacity: 0.3; }
.card-info .category { font-weight: bold; opacity: 0.75; text-transform: uppercase; font-size: 11px;}
#cards > li:nth-child(3n+ 1) .card-info .person,
#cards > li:nth-child(3n+ 2) .card-info .action,
#cards > li:nth-child(3n+ 3) .card-info .object {opacity: 1; }
.card-info .hint { margin-top: 30px; }

#palace { position: relative; height: 30px; }
#palace li { position: absolute; top: 0; left: 0; width: 100%; height: 30px; background: #EEEEF0; text-align: center; display: none;}
#palace li.done { display: none; }

/*.card-info ul,
#palace li { display: block; }*/


/* ================================================================================== */
/* == Table ========================================================================= */
/* ================================================================================== */

.table-page .container {  max-width: 800px; }

#table .card-info ul { display: block; margin: 15px 0 0 0; }
#table .card-info li { opacity: 0.5; }
#table .card-info li.category { opacity: 0.75; }
#table .card-info li.action,
#table .card-info li.object { display: none; }

#table { margin: 10px 0 40px; text-align: center; }
#table > li { text-align: center; margin: 0 auto; padding: 30px 0 25px 0; border-bottom: 1px solid rgba(0,0,0,0.1);}

#table .card { border: 6px solid #fff; border-radius: 6px; box-shadow: 0px 1px 2px rgba(0,0,0,0.25); height: 100px; width: 76px; text-align: center; line-height: 88px; background: #fff; color: #363E45; text-shadow: 0px 1px 1px rgba(0,0,0,0.2); font-size: 22px; margin: 0 auto; }

#table .hearts .front:after { content: ""; display: inline-block; vertical-align: 0px; margin-left: 5px; background: url(../../img/heart.svg) center center; background-size: 20px; height: 20px; width: 20px; }
#table .diamonds .front:after { content: ""; display: inline-block; vertical-align: -3px; margin-left: 3px; background: url(../../img/diamond.svg) center center; background-size: 20px; height: 20px; width: 20px; }
#table .clubs .front:after { content: ""; display: inline-block; vertical-align: -3px; margin-left: 5px; background: url(../../img/club.svg) center center; background-size: 20px; height: 20px; width: 20px; }
#table .spades .front:after { content: ""; display: inline-block; vertical-align: -3px; margin-left: 5px; background: url(../../img/spade.svg) center center; background-size: 20px; height: 20px; width: 20px; }

@media only screen and (min-width: 700px) {
  #table { display: flex; flex-wrap: wrap; }
  #table > li { flex: 1 1 25%; }
}



/* ================================================================================== */
/* == Animations ==================================================================== */
/* ================================================================================== */

/*
@-webkit-keyframes rotate {
  from { -webkit-transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(360deg); }
}
#cards li {
	-webkit-animation-name:             rotate; 
    -webkit-animation-duration:         5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
    
}
*/

.animated{-webkit-animation-fill-mode:both; -webkit-animation-duration:3s; -webkit-animation-iteration-count:infinite}

@-webkit-keyframes tada {
	0% {-webkit-transform: scale(1);}
	10%, 20% {-webkit-transform: scale(0.7) rotate(-3deg);}
	30%, 50%, 70%, 90% {-webkit-transform: scale(0.9) rotate(3deg);}
	40%, 60%, 80% {-webkit-transform: scale(1) rotate(-3deg);}
	100% {-webkit-transform: scale(0.95) rotate(0);}
}

#cards li { -webkit-animation-name: tada; }



/* ================================================================================== */
/* == Select Menu =================================================================== */
/* ================================================================================== */

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  font-size: 14px; -webkit-font-smoothing: antialiased;width: 220px !important; }
  .select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 40px;width: 220px;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--single .select2-selection__rendered {
      display: block;
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
.select2-container .select2-selection--single:focus{ outline: 0; }
.select2-dropdown {
  background: #579C5B;
  border: 1px solid #4D874E; border-bottom-width: 2px; border-radius: 6px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%; width: 220px;
  z-index: 1051; color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.5); font-weight: bold; }

.select2-results { display: block; width: 220px; }

.select2-results__options {
  list-style: none; 
  margin: 0;
  padding: 0; width: 218px; }

.select2-results__option {
  padding: 10px 20px;
  user-select: none;
  -webkit-user-select: none; }
  .select2-results__option[aria-selected] { cursor: pointer; }

.select2-container--open .select2-dropdown { left: 0;  width: 220px !important; }

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; width: 220px; }

.select2-search--dropdown { display: none; }

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0); }

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.select2-container--default .select2-selection--single {
  background: #6CC070;
  border: 1px solid #579C5B; border-bottom-width: 2px; border-radius: 6px; box-shadow: 0px 1px 2px rgba(0,0,0,0.25); }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 
    line-height: 38px; }
  .select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold; }
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999; }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
      border-color: #fff transparent transparent transparent;
      border-style: solid;
      border-width: 6px 5px 0 5px;
      height: 0;
      left: 50%;
      margin-left: -10px;
      margin-top: -3px;
      position: absolute;
      top: 50%;
      width: 0; }

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #fff transparent;
  border-width: 0 5px 6px 5px; }

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #4D874E;
  color: white; }