/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 26/09/2016, 10:12:58 PM
    Author     : Admin
*/
body {
  font-family: arial;
}

.memoria1body {
  position: relative;
  width: 310px;
  height: 310px;
  background: #fff;
  padding: 15px;
  margin: 0 auto;
}


.observacion1body {
  position: relative;
  width: 310px;
  height: 350px;
  background: #fff;
  padding: 15px;
  margin: 0 auto;
}

.intro, .end, .Good, .Bad, .gameOver {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(255, 255, 255, 0.5);
}

.intro p, .end p, .Good p, .Bad p, .gameOver p {

  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding-top: 100px;
  color: #575747;
}

.end, .Good, .Bad, .gameOver {
  display: none;
}

.Good p {
  color: #4CAF50;
}

.Bad p {
  color: #E91E63;
}





.memoria1Cuadros {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  background: #eee;
  display: inline-block;
  margin: 10px;
  opacity: 0.2;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
}

.memoria1Cuadros:active {
  opacity: 1;
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
}

.memoria1_1 {
  background: #F44336;
}

.memoria1_2 {
  background: #E91E63;
}

.memoria1_3 {
  background: #2196F3;
}

.memoria1_4 {
  background: #9C27B0;
}

.memoria1_5 {
  background: #4CAF50;
}

.memoria1_6 {
  background: #CDDC39;
}

.memoria1_7 {
  background: #FFEB3B;
}

.memoria1_8 {
  background: #FF9800;
}

.memoria1_9 {
  background: #FF5722;
}



.btn, .btn2 {
  position: relative;
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #FF9800;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  cursor: pointer;
  width: 150px;
  margin: 0 auto;
  top: 0px;
}

.btn2 {
  background: #4CAF50;
}

.btn:hover {
  background: #F57C00;

  text-decoration: none;
}

.btn2:hover {
  background: #388E3C;
}

.btn:active, .btn2:active {
  top: 1px;
}

.backTime {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  font-size: 22px;
  font-weight: bold;
  color: #575747;
}

.cubeSelected {
  opacity: 0.2;

  animation-name: cubeSelected;
  animation-duration: 0.7s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;

  -webkit-animation-name: cubeSelected;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-name: cubeSelected;
  -moz-animation-duration: 0.7s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
}

@keyframes cubeSelected {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}

@-webkit-keyframes cubeSelected {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}

@-moz-keyframes cubeSelected {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}

.observacion1 {
  width: 100%;
  height: 80px;

}

.observacionCuadros {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
  opacity: 1;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
}

.observacionCuadros:active {

  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);


  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
}

.figure1 {
  background-image: url(img/figures.png);
  background-position-x: 0px;
}

.color1 {
  background-position-y: 0px;
}

.figure2 {
  background-image: url(img/figures.png);
  background-position-x: -70px;
}

.color2 {
  background-position-y: -70px;
}

.figure3 {
  background-image: url(img/figures.png);
  background-position-x: -140px;
}

.color3 {
  background-position-y: -140px;
}

.figure4 {
  background-image: url(img/figures.png);
  background-position-x: -210px;
}

.color4 {
  background-position-y: -210px;
}

.figure5 {
  background-image: url(img/figures.png);
  background-position-x: -280px;
}

.color5 {
  background-position-y: -280px;
}

.figure6 {
  background-image: url(img/figures.png);
  background-position-x: -350px;
}

.color6 {
  background-position-y: -350px;
}

.figure7 {
  background-image: url(img/figures.png);
  background-position-x: -420px;
}

.color7 {
  background-position-y: -420px;
}

.figure8 {
  background-image: url(img/figures.png);
  background-position-x: -490px;
}

.color8 {
  background-position-y: -490px;
}







.vasosBody {
  position: relative;
  width: 280px;
  height: 280px;
  padding: 0px;
  margin: 0 auto;
}

.vasos {
  position: absolute;


  width: 80px;
  height: 80px;
}

.vasoFig {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url(img/vaso.png);
  background-size: cover;
  z-index: 2;
  display: none;
}

.pelotaFig {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url(img/pelota.png);
  background-size: cover;
  z-index: 1;
}