.fondo{
 /* background-image: url('../images/fondo_sup.svg'), url('../images/fondo_inf.svg');*/
  background-position: top, bottom;
  background-repeat: no-repeat;
}

body{
  margin:0;
  padding: 0;
}

/*Lo añadí*/

.flex_ul{
  list-style: none;
}
.flex_li{
  text-decoration-line: none;
  color: black;
  padding:0;
  margin-top: 0;
  margin-right: 0;
  border-radius: 10px;
  display: inline-block;
  cursor:wait;
}

@font-face{
  font-family:'cabeza';
  src:url('fonts/Gotham-Black.otf');
}
@font-face{
  font-family:'cuerpo';
  src:url('fonts/GothamBook.ttf');
}

@font-face{
  font-family: 'inicio';
  src:url('fonts/GothamMedium.ttf');
}

h1{
  font-family: 'cabeza';
  color:rgb(43,162,70);
  font-size: 40px;
}

p {
  font-family: 'cuerpo';
  color:rgb(0,146,136);
  font-size: 15px;
  /*text-align: center;*/
}

.p_inicio{
  font-family: 'inicio';
  font-size: 3vh;
  line-height: 4vh;
  letter-spacing: 1.5px;
  text-align: center;
}

a {
  font-family: 'cuerpo';
  color: rgb(138,138,138); /*gris*/
  text-decoration-line: none;
  font-size: 15px;
 
}

a:hover{
  color: rgb(0,173,66);
}

button{ 
  background-color: white;
  border: none;
  color: rgb(0,173,66); /*verde*/
   cursor: pointer;
}

.but{
  width: 20px;
  height: 20px;
}

.nav_ul{
  list-style: none;
  display: flex;
    cursor: pointer; 
}
.nav_li{
  margin-left: 5px;
}
.nav_li a{
  text-decoration: none;

}

nav>ul{
  justify-content: center;
}
/* Land & repeat game*/

.land {
 /* background-image:url('../images/fondo-01.svg');
  background-position: center;
  background-repeat: no-repeat;*/
  width:100%;
  height: 100%;
  min-height: 100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  display: flex;
  
  transform: scale(1);
  transition: all .2s ease-in-out;
  transition-duration: 700ms, 0s;
  transition-delay: 0s, 1s;   
}
.lande {
  background-color:white;
  width:100%;
  height: 100vw;
  min-height: 100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  display: flex;
  
  transform: scale(1);
  transition: all .2s ease-in-out;
  transition-duration: 700ms, 0s;
  transition-delay: 0s, 1s;   
}

.land-hide{
  transform: scale(0);
  transition: all .2s ease-in-out;
  transition-duration: 700ms, 0s;
  transition-delay: 0s, 1s;  
}
/*inicio*/
.land-msg {
  /*background-color:white;*/
  width:62%;
  height:50%;
  min-height: 400px;
  margin: auto auto;
  text-align: center;
}

.land-mesg {
  background-image: url(../images/ganaste.png);
  background-repeat: no-repeat;
  width:100%;
  height:100%;
  min-height: 716px;
  margin-left: auto;
  margin-right: auto;
  background-position: top;
}

.memorama-flip{
  -webkit-transform: rotateY(0deg);  
          transform: rotateY(0deg);
  
  animation-name: memorama-flip;
  animation-duration: 1100ms;
  animation-delay: 800ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;    
  animation-fill-mode: forwards;  
     
}

@keyframes memorama-flip {     
      50% {transform: rotateY(180deg) ;}    
} 

.memorama{
  color: rgb(43,162,70);
  font-size:5vw;
  font-family: 'cabeza', cursive;
  
}
/* button style by: http://callmenick.com/post/stylish-css-buttons*/
.btn-play{
  position:absolute;
  left:27%;
  font-size:2vw;
  margin: 0 10px 0 0;
  padding: 15px 45px;  
  color: #fff;
  background-color: rgb(43,162,70);
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px rgb(147,213,0);
  outline:none;
  
  visibility:hidden;
  opacity:0; 
  animation-name: btn-play-show;
  animation-duration: 800ms;
  animation-delay: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;    
  animation-fill-mode: forwards;  
   cursor: pointer;
}

@keyframes btn-play-show { 
  100% {    
         visibility:visible;
         opacity:1;
       }
}

.btn-play:hover,
.btn-play.hover {
  background-color: #ae0300;
/*color activado*/
}

.btn-play:active,
.btn-play.active {
  background-color: rgb(232,86,73);
  box-shadow: 0 5px rgb(193,69,66);
  transform: translateY(5px);
}

.btn-play-again{
  position:absolute;
  left:42%;
  top:40%;
  margin-bottom: 100px;
}

.result-msg{
  color:white;
  font-size:4vw;
  font-family: 'Gotham', cursive;
}

/* Game*/
.flex-container {
  padding: 0;
  margin: 0 1px;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
	/*background-image: url(images/fondomemo.png);*/
}

.flex-item {
  /*background: midnightblue;
   padding: 10px;*/
  background:#C0C0C0;
  padding: 5px;
  
  /*width: 178px;
  height: 278px;*/
  width: 170px;
  height: 260px;
  margin: 8px;
  /*line-height: 150px;*/
  font-weight: bold;
  font-size: 3em;
  text-align: center; 
border: 1px;  border-color:#152E4C;
 cursor: pointer;
}

.card
{
  width:100%;  
  height: 100%;
  position:relative;
}
.card-front, 
.card-back
{
  position:absolute;
  top:0px;
  left:0px;  
  width:100%;  
  height: 100%;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  
    -webkit-transition: -webkit-transform 500ms;
    transition: transform 500ms;
  
    -webkit-transition-timing-function: linear;
            transition-timing-function: linear;    
}

.card-back {
-webkit-transform: rotateY(0deg);  
    transform: rotateY(0deg);
}

.card-back-flip 
{
    -webkit-transform: rotateY(270deg);
            transform: rotateY(270deg);
    scale(-1, 1)
}

.card-front {    
    -webkit-transform: rotateY(-270deg);
            transform: rotateY(-270deg);
}


.card-front-flip
{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    scale(-1, 1)
}

.card-front-no
{
  animation-name: card-front-no;
  animation-duration: 200ms;
  animation-timing-function: lineal;
  animation-iteration-count: 15;    
  animation-fill-mode: forwards;  
}

@keyframes card-front-no {   
  0%  { transform: translateX(0px); }    
  33% { transform: translateX(4px); }  
  70% { transform: translateX(-7px);}
  100%{ transform: translateX(3px); }  
} 

.card-front-yes
{
  animation-name: card-front-yes;
  animation-duration: 200ms;
  animation-timing-function: ease;
  animation-iteration-count: 5;    
  animation-fill-mode: forwards;  
}

@keyframes card-front-yes {     
  0%  { transform: translateY(0px);}    
  33% { transform: translateY(3px);}  
  70% { transform: translateY(-7px);}
  100%{ transform: translateY(4px);}  
}