.backtext {
  position: absolute;
  top: 0px;
  height: 100vw;
  width: 100vw;
  z-index: -1;
  padding: 6vw;
 font-family: 'Prata', serif; 
  font-size: 18vw;
  line-height: 0.85;
  text-align: center;
  color: #FFFFFF;
  background-image: linear-gradient(#00005e, #000000);
}



.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  margin: auto;
  display: block;
  animation-name: zoom;
  animation-duration: 0.6s;
}


@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #ffffff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  opacity: 1 !important;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}




/* Safari 4.0 - 8.0 */
@-webkit-keyframes block1anim {
  0%   {left:0%; top:0%;}
  30%   {left:0%; top:0%;}
  35%  {left:0%; top:33.3%;}
  67%   {left:0%; top:33.3%;}
  72%  {left:0%; top:0%;}
  100%  {left:0%; top:0%;}
}

/* Standard syntax */
@keyframes block1anim {
  0%   {left:0%; top:0%;}
  30%   {left:0%; top:0%;}
  35%  {left:0%; top:33.3%;}
  67%   {left:0%; top:33.3%;}
  72%  {left:0%; top:0%;}
  100%  {left:0%; top:0%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block2anim {
  0%   {left:12.5%; top:66.7%;}
  100%  {left:12.5%; top:66.7%;}
}

/* Standard syntax */
@keyframes block2anim {
  0%   {left:12.5%; top:66.7%;}
  100%  {left:12.5%; top:66.7%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block3anim {
  0%   {left:25%; top:0%;}
  5%   {left:25%; top:0%;}
  10%   {left:12.5%; top:0%;}
  85%  {left:12.5%; top:0%;}
  90%  {left:25%; top:0%;}
  100%  {left:25%; top:0%;}
}

/* Standard syntax */
@keyframes block3anim {
  0%   {left:25%; top:0%;}
  5%   {left:25%; top:0%;}
  10%   {left:12.5%; top:0%;}
  85%  {left:12.5%; top:0%;}
  90%  {left:25%; top:0%;}
  100%  {left:25%; top:0%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block4anim {
  0%   {left:37.5%; top:0%;}
  100%  {left:37.5%; top:0%;}
}

/* Standard syntax */
@keyframes block4anim {
  0%   {left:37.5%; top:0%;}
  40%   {left:37.5%; top:0%;}
  45%  {left:0%; top:0%;}
  64%   {left:0%; top:0%;}
  69%  {left:37.5%; top:0%;}
  100%  {left:37.5%; top:0%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block5anim {
  0%   {left:50%; top:0%;}
  100%  {left:50%; top:0%;}
}

/* Standard syntax */
@keyframes block5anim {
  0%   {left:50%; top:0%;}
  100%  {left:50%; top:0%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block6anim {
  0%   {left:62.5%; top:0%;}
  100%  {left:62.5%; top:0%;}
}

/* Standard syntax */
@keyframes block6anim {
  0%   {left:62.5%; top:0%;}
  100%  {left:62.5%; top:0%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block7anim {
  0%   {left:75%; top:0%;}
  100%  {left:75%; top:0%;}
}

/* Standard syntax */
@keyframes block7anim {
  0%   {left:75%; top:0%;}
  25%   {left:75%; top:0%;}
  30%   {left:75%; top:33.3%;}
  40%   {left:75%; top:33.3%;}
  45%  {left:37.5%; top:33.3%;}
  50%  {left:37.5%; top:33.3%;}
  55%  {left:37.5%; top:0%;}
  65%  {left:37.5%; top:0%;}
  70%  {left:75%; top:0%;}
  100%  {left:75%; top:0%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block8anim {
  0%   {left:87.5%; top:0%;}
  100%  {left:87.5%; top:0%;}
}

/* Standard syntax */
@keyframes block8anim {
  0%   {left:87.5%; top:0%;}
  100%  {left:87.5%; top:0%;}
}



/* Safari 4.0 - 8.0 */
@-webkit-keyframes block9anim {
  0%   {left:0%; top:16.6%;}
  100%  {left:0%; top:16.6%;}
}

/* Standard syntax */
@keyframes block9anim {
  0%   {left:0%; top:16.6%;}
  100%  {left:0%; top:16.6%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block10anim {
  0%   {left:12.5%; top:16.6%;}
  100%  {left:12.5%; top:16.6%;}
}

/* Standard syntax */
@keyframes block10anim {
  0%   {left:12.5%; top:16.6%;}
  100%  {left:12.5%; top:16.6%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block11anim {
  0%   {left:25%; top:16.6%;}
  15%   {left:25%; top:16.6%;}
  20%   {left:62.5%; top:16.6%;}
  60%   {left:62.5%; top:16.6%;}
  65%  {left:62.5%; top:66.7%;}
  75%  {left:62.5%; top:66.7%;}
  80%  {left:25%; top:66.7%;}
  85%  {left:25%; top:66.7%;}
  90%  {left:25%; top:16.6%;}
  100%  {left:25%; top:16.6%;}
}

/* Standard syntax */
@keyframes block11anim {
  0%   {left:25%; top:16.6%;}
  22%   {left:25%; top:16.6%;}
  27%   {left:62.5%; top:16.6%;}
  60%   {left:62.5%; top:16.6%;}
  65%  {left:62.5%; top:66.7%;}
  75%  {left:62.5%; top:66.7%;}
  80%  {left:25%; top:66.7%;}
  85%  {left:25%; top:66.7%;}
  90%  {left:25%; top:16.6%;}
  100%  {left:25%; top:16.6%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block12anim {
  0%   {left:37.5%; top:16.6%;}
  100%  {left:37.5%; top:16.6%;}
}

/* Standard syntax */
@keyframes block12anim {
  0%   {left:37.5%; top:16.6%;}
  6%   {left:37.5%; top:16.6%;}
  11%  {left:37.5%; top:50%;}
  80%   {left:37.5%; top:50%;}
  85%  {left:37.5%; top:16.6%;}
  100%  {left:37.5%; top:16.6%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block13anim {
  0%   {left:50%; top:16.6%;}
  100%  {left:50%; top:16.6%;}
}

/* Standard syntax */
@keyframes block13anim {
  0%   {left:50%; top:16.6%;}
  100%  {left:50%; top:16.6%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block14anim {
  0%   {left:62.5%; top:66.7%;}
  100%  {left:62.5%; top:66.7%;}
}

/* Standard syntax */
@keyframes block14anim {
  0%   {left:62.5%; top:66.7%;}
  4%   {left:62.5%; top:66.7%;}
  9%   {left:62.5%; top:16.6%;}
  15%  {left:62.5%; top:16.6%;}
  20%  {left:37.5%; top:16.6%;}
  75%  {left:37.5%; top:16.6%;}
  80%  {left:62.5%; top:16.6%;}
  90%  {left:62.5%; top:16.6%;}
  95%  {left:62.5%; top:66.7%;}
  100%  {left:62.5%; top:66.7%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block15anim {
  0%   {left:75%; top:16.6%;}
  100%  {left:75%; top:16.6%;}
}

/* Standard syntax */
@keyframes block15anim {
  0%   {left:75%; top:16.6%;}
  100%  {left:75%; top:16.6%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block16anim {
  0%   {left:87.5%; top:16.6%;}
  100%  {left:87.5%; top:16.6%;}
}

/* Standard syntax */
@keyframes block16anim {
  0%   {left:87.5%; top:16.6%;}
  35%   {left:87.5%; top:16.6%;}
  40%  {left:87.5%; top:50%;}
  55%   {left:87.5%; top:50%;}
  60%  {left:87.5%; top:16.6%;}
  100%  {left:87.5%; top:16.6%;}
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes block17anim {
  0%   {left:0%; top:66.7%;}
  10%   {left:0%; top:66.7%;}
  15%   {left:50%; top:66.7%;}
  65%  {left:50%; top:66.7%;}
  70%  {left:0%; top:66.7%;}
  100%  {left:0%; top:66.7%;}
}

/* Standard syntax */
@keyframes block17anim {
  0%   {left:0%; top:66.7%;}
  10%   {left:0%; top:66.7%;}
  15%   {left:50%; top:66.7%;}
  65%  {left:50%; top:66.7%;}
  70%  {left:0%; top:66.7%;}
  100%  {left:0%; top:66.7%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block18anim {
  0%   {left:12.5%; top:33.3%;}
  100%  {left:12.5%; top:33.3%;}
}

/* Standard syntax */
@keyframes block18anim {
  0%   {left:12.5%; top:33.3%;}
  100%  {left:12.5%; top:33.3%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block19anim {
  0%   {left:25%; top:33.3%;}
  100%  {left:25%; top:33.3%;}
}

/* Standard syntax */
@keyframes block19anim {
  0%   {left:25%; top:33.3%;}
  11%   {left:25%; top:33.3%;}
  16%  {left:25%; top:66.7%;}
  70%   {left:25%; top:66.7%;}
  75%  {left:25%; top:33.3%;}
  100%  {left:25%; top:33.3%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block20anim {
  0%   {left:37.5%; top:33.3%;}
  100%  {left:37.5%; top:33.3%;}
}

/* Standard syntax */
@keyframes block20anim {
  0%   {left:37.5%; top:33.3%;}
  23%   {left:37.5%; top:33.3%;}
  28%  {left:25%; top:33.3%;}
  72%   {left:25%; top:33.3%;}
  77%  {left:37.5%; top:33.3%;}
  100%  {left:37.5%; top:33.3%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block21anim {
  0%   {left:50%; top:33.3%;}
  100%  {left:50%; top:33.3%;}
}

/* Standard syntax */
@keyframes block21anim {
  0%   {left:50%; top:33.3%;}
  100%  {left:50%; top:33.3%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block22anim {
  0%   {left:62.5%; top:33.3%;}
  100%  {left:62.5%; top:33.3%;}
}

/* Standard syntax */
@keyframes block22anim {
  0%   {left:62.5%; top:33.3%;}
  100%  {left:62.5%; top:33.3%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block23anim {
  0%   {left:75%; top:66.7%;}
  100%  {left:75%; top:66.7%;}
}

/* Standard syntax */
@keyframes block23anim {
  0%   {left:75%; top:66.7%;}
  100%  {left:75%; top:66.7%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block24anim {
  0%   {left:87.5%; top:33.3%;}
  100%  {left:87.5%; top:33.3%;}
}

/* Standard syntax */
@keyframes block24anim {
  0%   {left:87.5%; top:33.3%;}
  100%  {left:87.5%; top:33.3%;}
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes block25anim {
  0%   {left:0%; top:50%;}
  100%  {left:0%; top:50%;}
}

/* Standard syntax */
@keyframes block25anim {
  0%   {left:0%; top:50%;}
  100%  {left:0%; top:50%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block26anim {
  0%   {left:12.5%; top:50%;}
  100%  {left:12.5%; top:50%;}
}

/* Standard syntax */
@keyframes block26anim {
  0%   {left:12.5%; top:50%;}
  100%  {left:12.5%; top:50%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block27anim {
  0%   {left:25%; top:50%;}
  100%  {left:25%; top:50%;}
}

/* Standard syntax */
@keyframes block27anim {
  0%   {left:25%; top:50%;}
  7%   {left:25%; top:50%;}
  12%   {left:25%; top:0%;}
  75%  {left:25%; top:0%;}
  80%  {left:25%; top:50%;}
  100%  {left:25%; top:50%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block28anim {
  0%   {left:37.5%; top:66.7%;}
  100%  {left:37.5%; top:66.7%;}
}

/* Standard syntax */
@keyframes block28anim {
  0%   {left:37.5%; top:66.7%;}
  100%  {left:37.5%; top:66.7%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block29anim {
  0%   {left:50%; top:50%;}
  100%  {left:50%; top:50%;}
}

/* Standard syntax */
@keyframes block29anim {
  0%   {left:50%; top:50%;}
  100%  {left:50%; top:50%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block30anim {
  0%   {left:62.5%; top:50%;}
  100%  {left:62.5%; top:50%;}
}

/* Standard syntax */
@keyframes block30anim {
  0%   {left:62.5%; top:50%;}
  100%  {left:62.5%; top:50%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block31anim {
  0%   {left:75%; top:50%;}
  100%  {left:75%; top:50%;}
}

/* Standard syntax */
@keyframes block31anim {
  0%   {left:75%; top:50%;}
  100%  {left:75%; top:50%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes block32anim {
  0%   {left:87.5%; top:66.7%;}
  100%  {left:87.5%; top:66.7%;}
}

/* Standard syntax */
@keyframes block32anim {
  0%   {left:87.5%; top:66.7%;}
  100%  {left:87.5%; top:66.7%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes overtext {
  0%   {opacity:1%;}
  90%   {opacity:1;}
  100%  {opacity:0;}
}

/* Standard syntax */
@keyframes overtext {
  0%   {opacity:1;   z-index: 9999;}
  90%   {opacity:1;   z-index: 9999;}
    99%   {opacity:0;   z-index: 9999;}
  100%  {opacity:0;   z-index: -9999;}
}


.desktop {
	width: 100vw;
	height: 100vh;
}


div.tile {
  margin: 0px;
  width: 12.5%;
  height: 16.6%;
  position: absolute;
}

div.enter {
  margin: 0px;
  width: 100%;
  height: 16.6%;
  position: absolute;
  left:0%; top:83.3%;
  background-color: transparent;
  color: white;
  z-index: 2;
  text-align: center;
}
div.cookieover {
  margin: 0px;
  width: 100%;
  height: 16.6%;
  position: absolute;
  left:0%; top:50.3%;
  background-color: transparent;
  color: white;
  z-index: 20;
  text-align: center;
}

div.overtext {
  -webkit-animation-name: overtext; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: overtext;
  animation-duration: 10s;
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

div.block1 {
  -webkit-animation-name: block1anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block1anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block2 {
  -webkit-animation-name: block2anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block2anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block3 {
  -webkit-animation-name: block3anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block3anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block4 {
  -webkit-animation-name: block4anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block4anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block5 {
  -webkit-animation-name: block5anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block5anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block6 {
  -webkit-animation-name: block6anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block6anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block7 {
  -webkit-animation-name: block7anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block7anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block8 {
  -webkit-animation-name: block8anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block8anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block9 {
  -webkit-animation-name: block9anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block9anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block10 {
  -webkit-animation-name: block10anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block10anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block11 {
  -webkit-animation-name: block11anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block11anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block12 {
  -webkit-animation-name: block12anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block12anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block13 {
  -webkit-animation-name: block13anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block13anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block14 {
  -webkit-animation-name: block14anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block14anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block15 {
  -webkit-animation-name: block15anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block15anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block16 {
  -webkit-animation-name: block16anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block16anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block17 {
  -webkit-animation-name: block17anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block17anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block18 {
  -webkit-animation-name: block18anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block18anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block19 {
  -webkit-animation-name: block19anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block19anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block20 {
  -webkit-animation-name: block20anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block20anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block21 {
  -webkit-animation-name: block21anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block21anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block22 {
  -webkit-animation-name: block22anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block22anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block23 {
  -webkit-animation-name: block23anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block23anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block24 {
  -webkit-animation-name: block24anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block24anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block25 {
  -webkit-animation-name: block25anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block25anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block26 {
  -webkit-animation-name: block26anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block26anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block27 {
  -webkit-animation-name: block27anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block27anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block28 {
  -webkit-animation-name: block28anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block28anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block29 {
  -webkit-animation-name: block29anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block29anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block30 {
  -webkit-animation-name: block30anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block30anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block31 {
  -webkit-animation-name: block21anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block31anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}

div.block32 {
  -webkit-animation-name: block22anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 40s; /* Safari 4.0 - 8.0 */
  animation-name: block32anim;
  animation-duration: 40s;
  animation-iteration-count: infinite;
}



div img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid #333333;
  object-fit: cover;
}
/*
div img:hover {
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
*/

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #000000;
  color: black;
  z-index: 2;
}

.flip-card-back {
  background-color: #CCCC99;
  border-radius: 10px;
  border: 1px solid #333333;
  color: #000000;
  transform: rotateY(180deg);
  z-index: 1;
}

.enterbutton {
  background-color: #cccc99;
  color: black;
  padding: 2px 10px;
  text-align: center;
  font-size: 1.3em;
  margin: 2px 2px;
  cursor: pointer;
}


.tiledrop {
  animation: tiledrop 6s forwards;
  animation-timing-function: ease;
}
@keyframes tiledrop {
  0% {
    opacity: 1;
  }
  5% {
    transform: 
      translate3d(0, 0, 0)
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: 
      translate3d(0, 2000px, 0)
  }
}