/* ================================================================================== */
/* == 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: HelveticaNeue, sans-serif; color: #333; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.container { max-width: 1200px; 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; }

/* Positions the fakeWin button at the bottom left corner of the screen. */
span#fakeWin { position: absolute; left: 0; bottom: 0; text-indent: -9999px; width: 7px; height: 7px }



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

.toolbar { border-bottom: 1px solid #2C3138; padding: 20px; background: #363E45; color: #E1E2E3; font-weight: bold; }
.toolbar span.version { font-size: 0.75em; float: right; margin-top: 12px; font-weight: bold; color: #66707A; }
.toolbar button { 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); margin-right: 15px; font-weight: bold; -webkit-font-smoothing: antialiased; 
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-ms-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s; }
.toolbar button:hover { background: #F05468; border-color: #C14455; /* -webkit-transform: scale(1.02); */ }
.toolbar button:active { -webkit-transform: scale(0.95); }
.toolbar button:focus { outline: none; }



/* ================================================================================== */
/* == Message Banner ================================================================ */
/* ================================================================================== */

.site-message { background: #549DD5; padding: 20px 24px; font-size: 14px; color: #fff; font-weight: bold; overflow: hidden; width: 100%; position: relative; 
-webkit-transition: all .7s;
-moz-transition: all .7s;
-ms-transition: all .7s;
-o-transition: all .7s;
transition: all .7s;}
.site-message a { color: #C3E5F9; }
.site-message p {float: left; }
.site-message[data-message="default"] { background: #549DD5; }
.site-message[data-message="alert"] { background: #8360AF; }
.site-message[data-message="win"] { background: #F05468; }

.close-message { position: absolute; right: 10px; top: 50%; margin-top: -20px; width: 40px; height: 40px; background: url(../../img/close.svg) no-repeat center center; background-size: 20px; text-indent: -9999px; opacity: 0.7; cursor: pointer; }
.close-message:hover { opacity: 1; }


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

#cards { list-style: none; overflow: hidden; margin: 50px 1%; }
#cards li { float: left; width: 7.08%; margin: 1%; text-align: center; line-height: 4em; height: 90px; color: #EEEEF0; font-size: 20px;
-webkit-perspective: 1000;
   -moz-perspective: 1000;
    -ms-perspective: 1000;
     -o-perspective: 1000;
        perspective: 1000; }
#cards li.flip .card{ 
-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: 100%; 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); /*border: 1px solid #EEEEF0;*/ }
#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: -3px; margin-left: 5px; background: url(../../img/heart.svg) center center; background-size: 20px; height: 20px; width: 20px; }
#cards .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; }
#cards .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; }
#cards .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; }



/* ================================================================================== */
/* == 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; }



/* ================================================================================== */
/* == Multiplayer =================================================================== */
/* ================================================================================== */


#player1,
#player2 { display: none; }

.multiplayer #player1,
.multiplayer #player2 { display: block; }

#player1.current-player,
#player2.current-player { opacity: 1; }

.player { position: fixed; bottom: 0; padding: 10px 20px; background: #8360AF; color: #fff; opacity: 0.4; text-shadow: 0px 1px 1px rgba(0,0,0,0.5); box-shadow: 0px -1px 2px rgba(0,0,0,0.25); border-radius: 5px 5px 0 0; font-size: 14px; text-align: center; }
.player p { font-size: 13px; opacity: 0.9; }

#player1 { left: 20px; }
#player2 { right: 20px; }



/* ================================================================================== */
/* == Responsive Styles ============================================================= */
/* ================================================================================== */

@media only screen and (max-height: 710px) {	
	.site-message { padding: 15px 24px; }
	#cards { margin: 12px 1% 0 1% !important; }
}

/*@media only screen and (max-height: 675px) {
	.site-message { display: none !important; }	
	#cards { margin: 19px 1% 0 1% !important; }
	#cards li { width: 7.08%; }	
}*/
@media only screen and (max-height: 675px) {
	#cards { margin: 14px 1% 0 1% !important; }
	#cards li { width: 7.08%; height: 82px; line-height: 3.5em; }	
}

/*Taller than 920px and more than 1340px wide*/
@media only screen and (min-height: 920px) and (min-width: 1340px) { 
	.container { max-width: none; }
	#cards { margin: 1.2% 1% 0 1%; }
	#cards li { width: 7.08%; height: 124px; line-height: 108px; }
}

/*Taller than 1250px and more than 1020px wide*/
@media only screen and (min-height: 1250px) and (min-width: 1020px) { 
	.container { max-width: none; }
	#cards { margin: 1.2% 1% 0 1% !important; }
	#cards li { width: 10.5%; height: 138px; line-height: 120px; }
}

/* iPads (landscape) ----------- */
@media only screen 
and (max-width: 1024px) {
	#cards { margin: 39px 1% 0 1%;}
}

/* iPads (portrait) ----------- */
@media only screen 
and (max-width: 768px) {
	#cards { margin: 1% 1% 0 1%;}
	#cards li { width: 10.5%; line-height: 4.1em; height: 94px;}
}


/* ================================================================================== */
/* == 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; margin-right: 15px; 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; }