html {
  width:100%;
  height:100%;
}
body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

a:link {
  text-decoration: none;
  color: #ccc;
}

a:visited {
  text-decoration: none;
    color: #ccc;
}

a:hover {
  text-decoration: none;
    color: #ccc;
}

a:active {
  text-decoration: none;
    color: #ccc;
}

.modal {
  position: fixed;
  height: 90%;
  right: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  visibility: hidden;
  opacity:0;
  -webkit-transition:opacity 0.4s linear;
  -moz-transition:opacity 0.4s linear;
  -ms-transition:opacity 0.4s linear;
  -o-transition:opacity 0.4s linear;
  transition:opacity 0.4s linear;
}
.modal.show {
  visibility: visible;
  opacity:1;
}

.valign-table {
  display: table;
  table-layout: fixed;
}
.valign-cell {
  display: table-cell;
  vertical-align: middle;
}

#memory--app-container {
  background-color: #171738;
  width:100%;
  height:90%;
}

.memory--menu-bar {
  width:100%;
  background-color: #080927;
  height:10%;
  display:table;
  border-top: 1px solid #fff;
  border-color: #fff;
    position: relative;
}

.memory--menu-bar .inner {
  display:table-cell;
  vertical-align:middle;
}
.memory--menu-bar .left {
  text-align: left;
  float:left;
  width:33%;
  margin-left: 10px;
}
.memory--menu-bar .right {
  text-align: right;
  float:right;
  width:33%;

}
.memory--menu-bar .right img{
    margin:auto 0;
}

.memory--menu-bar .center {
  text-align: center;
  float: left;
  width:33%;
}

.tagessatz-column3 {
  float: left;
  width: 33.33%;
  padding: 10px;
 display:flex;
  justify-content: center;
  align-items:center;
}

/* Clear floats after the columns */
.tagessatz-row:after {
  content: "";
  display: table;
  clear: both;
  height: 10%;
}


.memory--app-name {
  color:#ccc;
  font-size:26px;
  margin:0;
  padding:1px 4px;
  text-transform: uppercase;
  font-family: "Courier New";
  letter-spacing: 2px;
}
@media screen and (max-width: 480px) {
  .memory--app-name {
    font-size:16px;
  }
}

#memory--settings-icon {
  height: 24px;
  display: block;
  padding:4px 8px;
  float: right;
}

#memory--end-game-modal .wrapper {
  background-color: #080927;
  text-align: center;
  color:#ccc;
  padding:8px 0;
  min-width:240px;
  width:50%;
  margin:0 auto;
}
#memory--end-game-modal h2,
#memory--end-game-modal h3 {
  margin:0;
  margin-bottom: 4px;
}

#memory--settings-modal {
  background-color: #080927;
  z-index: 4;
}
#memory--settings-modal form {
  min-width:240px;
  width:50%;
  margin:0 auto;
  text-align: center;
  color:#ccc;
}

.memory--settings-label {
  margin:8px 0;
}

#memory--settings-grid,
#memory--settings-reset {
  width:100%;
  margin-bottom:16px;
  font-size:18px;
  background:transparent;
  color:#ccc;
  height:50px;
  text-align: center;
}

#memory--settings-grid option {
  padding-top:5px;
  padding-bottom:5px;
}

#memory--settings-reset {
  border-radius:5px;
  border:2px solid #ccc;
  cursor: pointer;
}

#memory--cards {
  margin:0 auto;
  padding:0;
  height:100%;
  list-style-type: none;
  list-style-image: none;
  position:relative;
  justify-content: center;
  align-items: center;
}
/* entire container, keeps perspective */
.flip-container {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  float:left;
}

/* flip the pane when clicked */
.flip-container.clicked .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip-container.clicked .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* flip speed goes here */
.flipper {
  width:90%;
  height:90%;
  margin:0% auto;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  top:5%;
  bottom:5%;
}

/* hide back of pane during swap */
.front, .back {
  width:100%;
  height:100%;
  display: block;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  /* for firefox 31 */
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background-color: transparent;
  border-radius: 5%;
  background-image: url(../images/crystals/deck2.jpg);
  background-position:50% 50%;
  background-repeat: no-repeat;
  background-size: contain;

}

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background-color: #171738;
  border-radius: 5%;
  background-position:50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.back.card-1 {background-image: url(../images/crystals/1.png);}

.back.card-2 {background-image: url(../images/crystals/2.png);}

.back.card-3 {background-image: url(../images/crystals/3.png);}

.back.card-4 {background-image: url(../images/crystals/4.png);}

.back.card-5 {background-image: url(../images/crystals/5.png);}

.back.card-6 {background-image: url(../images/crystals/6.png);}

.back.card-7 {background-image: url(../images/crystals/7.png);}

.back.card-8 {background-image: url(../images/crystals/8.png);}

.back.card-9 {background-image: url(../images/crystals/9.png);}

.back.card-10 {background-image: url(../images/crystals/10.png);}

.back.card-11 {background-image: url(../images/crystals/11.png);}

.back.card-12 {background-image: url(../images/crystals/12.png);}

.back.card-13 {background-image: url(../images/crystals/13.png);}

.back.card-14 {background-image: url(../images/crystals/14.png);}

.back.card-15 {background-image: url(../images/crystals/15.png);}

.back.card-16 {background-image: url(../images/crystals/16.png);}

.back.card-17 {background-image: url(../images/crystals/17.png);}

.back.card-18 {background-image: url(../images/crystals/18.png);}

.back.card-19 {background-image: url(../images/crystals/19.png);}

.back.card-20 {background-image: url(../images/crystals/20.png);}

.back.card-21 {background-image: url(../images/crystals/21.png);}

.back.card-22 {background-image: url(../images/crystals/22.png);}

.back.card-23 {background-image: url(../images/crystals/23.png);}

.back.card-24 {background-image: url(../images/crystals/24.png);}

.back.card-25 {background-image: url(../images/crystals/25.png);}

.back.card-26 {background-image: url(../images/crystals/26.png);}

.back.card-27 {background-image: url(../images/crystals/27.png);}

.back.card-28 {background-image: url(../images/crystals/28.png);}

.back.card-29 {background-image: url(../images/crystals/29.png);}

.back.card-30 {background-image: url(../images/crystals/30.png);}

.back.card-31 {background-image: url(../images/crystals/31.png);}

.back.card-32 {background-image: url(../images/crystals/32.png);}

.back.card-33 {background-image: url(../images/crystals/33.png);}

.back.card-34 {background-image: url(../images/crystals/34.png);}

.back.card-35 {background-image: url(../images/crystals/35.png);}

.back.card-36 {background-image: url(../images/crystals/36.png);}

.back.card-37 {background-image: url(../images/crystals/37.png);}

.back.card-38 {background-image: url(../images/crystals/38.png);}

.back.card-39 {background-image: url(../images/crystals/39.png);}

.back.card-40 {background-image: url(../images/crystals/40.png);}

.back.card-41 {background-image: url(../images/crystals/41.png);}

.back.card-42 {background-image: url(../images/crystals/42.png);}

.back.card-43 {background-image: url(../images/crystals/43.png);}

.back.card-44 {background-image: url(../images/crystals/44.png);}

.back.card-45 {background-image: url(../images/crystals/45.png);}

.back.card-46 {background-image: url(../images/crystals/46.png);}

.back.card-47 {background-image: url(../images/crystals/47.png);}

.back.card-48 {background-image: url(../images/crystals/48.png);}

.back.card-49 {background-image: url(../images/crystals/49.png);}

.back.card-50 {background-image: url(../images/crystals/50.png);}

.back.card-51 {background-image: url(../images/crystals/51.png);}

.back.card-52 {background-image: url(../images/crystals/52.png);}

.back.card-53 {background-image: url(../images/crystals/53.png);}

.back.card-54 {background-image: url(../images/crystals/54.png);}

.back.card-55 {background-image: url(../images/crystals/55.png);}

.back.card-56 {background-image: url(../images/crystals/56.png);}

.back.card-57 {background-image: url(../images/crystals/57.png);}

.back.card-58 {background-image: url(../images/crystals/58.png);}

.back.card-59 {background-image: url(../images/crystals/59.png);}

.back.card-60 {background-image: url(../images/crystals/60.png);}

.back.card-61 {background-image: url(../images/crystals/61.png);}

.back.card-62 {background-image: url(../images/crystals/62.png);}

.back.card-63 {background-image: url(../images/crystals/63.png);}

.back.card-64 {background-image: url(../images/crystals/64.png);}

.back.card-65 {background-image: url(../images/crystals/65.png);}

.back.card-66 {background-image: url(../images/crystals/66.png);}

.back.card-67 {background-image: url(../images/crystals/67.png);}

.back.card-68 {background-image: url(../images/crystals/68.png);}

.back.card-69 {background-image: url(../images/crystals/69.png);}

.back.card-70 {background-image: url(../images/crystals/70.png);}

.back.card-71 {background-image: url(../images/crystals/71.png);}

.back.card-72 {background-image: url(../images/crystals/72.png);}

.back.card-73 {background-image: url(../images/crystals/73.png);}

.back.card-74 {background-image: url(../images/crystals/74.png);}

.back.card-75 {background-image: url(../images/crystals/75.png);}

.back.card-76 {background-image: url(../images/crystals/76.png);}

.back.card-77 {background-image: url(../images/crystals/77.png);}

.back.card-78 {background-image: url(../images/crystals/78.png);}

.back.card-79 {background-image: url(../images/crystals/79.png);}

.back.card-80 {background-image: url(../images/crystals/80.png);}

.back.card-81 {background-image: url(../images/crystals/81.png);}

.back.card-82 {background-image: url(../images/crystals/82.png);}

.back.card-83 {background-image: url(../images/crystals/83.png);}

.back.card-84 {background-image: url(../images/crystals/84.png);}

.back.card-85 {background-image: url(../images/crystals/85.png);}

.back.card-86 {background-image: url(../images/crystals/86.png);}

.back.card-87 {background-image: url(../images/crystals/87.png);}

.back.card-88 {background-image: url(../images/crystals/88.png);}

.back.card-89 {background-image: url(../images/crystals/89.png);}

.back.card-90 {background-image: url(../images/crystals/90.png);}

.back.card-91 {background-image: url(../images/crystals/91.png);}

.back.card-92 {background-image: url(../images/crystals/92.png);}

.back.card-93 {background-image: url(../images/crystals/93.png);}

.back.card-94 {background-image: url(../images/crystals/94.png);}

.back.card-95 {background-image: url(../images/crystals/95.png);}

.back.card-96 {background-image: url(../images/crystals/96.png);}

.back.card-97 {background-image: url(../images/crystals/97.png);}

.back.card-98 {background-image: url(../images/crystals/98.png);}

.back.card-99 {background-image: url(../images/crystals/99.png);}

.back.card-100 {background-image: url(../images/crystals/100.png);}

.back.card-101 {background-image: url(../images/crystals/101.png);}

.back.card-102 {background-image: url(../images/crystals/102.png);}

.back.card-103 {background-image: url(../images/crystals/103.png);}

.back.card-104 {background-image: url(../images/crystals/104.png);}


/** Matching Cards **/
/**
 * If you wish to have custom matching images, you can do so
 * by leveraging the 'matching' class which is added to one
 * of the matching cards. See the example below.
 *
 * .back.card-1 {
 *   background-image: url(../images/crystals/apple_1.jpg);
 * }
 *
 * .back.matching.card-1 {
 *   background-image: url(../images/crystals/apple_2.jpg);
 * }
 *
 */