* {
  box-sizing: border-box;
}

html, body {
  /*height: 70vh;*/
  height: 100%;
  overflow: hidden;
}

body {
  background: black;
  /*min-height: 70vh;*/
  font-family: "Arial", sans-serif;
      overflow: hidden;
}

img {
    image-orientation: from-image;
}

iframe {
    max-height: 90vh;
    display: block;
    margin: 0 auto;
}


.wrap {
  position: relative;
  height: 85%;
  overflow: hidden;
  /*min-height: 500px;*/
  padding-bottom: 20px;
  margin: 5% 5% 5% 0;
}

.blocker {
  overflow: hidden;
}

.game {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 500px;
          perspective: 500px;
  min-height: 90vh;
  height: 90vh;
  margin-left: 5%;
}


@-webkit-keyframes matchAnim {
  0% {
    background: #bcffcc;
  }
  100% {
    background: white;
  }
}

@keyframes matchAnim {
  0% {
    background: #bcffcc;
  }
  100% {
    background: white;
  }
}
.card {
  float: left;
  width: 16.66666%;
  height: 25%;
  padding: 5px;
  text-align: center;
  display: block;
  -webkit-perspective: 500px;
          perspective: 500px;
  position: relative;
  cursor: pointer;
  z-index: 50;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 800px) {
  .card {
    width: 25%;
    height: 16.666%;
    width: 16.666%;
    height: 20%;
  }
}
.card .inside {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  background: white;
}
.card .inside.picked, .card .inside.matched {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.card .inside.matched {
  -webkit-animation: 1s matchAnim ease-in-out;
          animation: 1s matchAnim ease-in-out;
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.card .front, .card .back {
  border: 1px solid black;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
}
.card .front img, .card .back img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  max-height: 100%;
}
.card .front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
@media (max-width: 800px) {
  .card .front {
    padding: 5px;
  }
}
.card .back {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}
@media (max-width: 800px) {
  .card .back {
    padding: 10px;
  }
}


#ex1 {
 /* position: absolute;*/
  z-index: 30;
  margin-bottom: 60%;
  max-height: 95vh;
  max-width: 80vw;
  overflow:auto;
  /*overflow: hidden;*/
}

#ex1 img {
 /* position: absolute;*/
  max-height: 100vh;
  max-width: 90%;
  /*overflow: hidden;*/
}

#bittedrehen {
  /*border: 2px dotted red;*/
  max-width: 100%;
}

.modal-content{
  height: 90vh;
  /*overflow-y:scroll;*/
}

.modalimg {
  max-height: 90vh;
  max-width: 90vw;
  height: 90vh;
  display: block;
  margin: 0 auto;
}

.modal-overlay {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  /*width: 100vw;
  height: 100vh;*/
  overflow: hidden;
}

.modal {
  display: none;
  position: relative;
  width: auto;
  min-width: 30vw;
  min-height: 30vh;
  /*width: 100%;*/
  /*min-height: 95%;*/

  max-height: 95vh;
  max-width: 90vw;
  /*min-height: 380px;*/
  margin: 0 auto;
  background: white;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 30px 30px;
  overflow: hidden;
  white-space: normal !important;
}

.modal h1{
  font-weight: bold !important;
  font-size: 1.2em;
}

.modal a.close-modal {
  top: 10px;
  right: 30px;
  width: 20px;
  height: 20px;
}

.modalIMGhtml {
  max-width: 70vw;
}

/*Iphone 5 */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
{
  .wrap {
    height: 105vh;
    margin-top: 10%;
  }
  .game{
        min-height: 95vh;
        height: 95vh;
  }

}

/*Iphone6 Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
{

    .wrap {
      height: 90vh;
      margin-top: 5%;
    }
    .game{
          min-height: 95vh;
          height: 95vh;
    }
    .card {
      width: 15.666%;
      height: 22%;
    }

}

/*Nexus und so Landscape */
@media only screen
  and (min-device-width: 412px)
{

    .wrap {
      height: 90vh;
      margin-top: 5%;
    }
    .game{
          min-height: 90vh;
          height: 90vh;
    }
    .card {
      width: 15.666%;
      height: 22%;
    }

}