/* Add some margin to the page and set a default font and colour */
 
@font-face {
    font-family: Nickname;
    src: url(../font/NicknameDEMO.otf);
}




.intro1{
  margin: 0px;
  font-family: Nickname;
  color: #fff;
  width: 100%;

    background-color: #89dafd;
    background-image: url(../img/fondo-principal.png);
    background-size:contain;
    background-repeat:repeat-x;
    background-attachment: fixed;
    background-position: bottom center;
}

.intro2{  
    margin: 0px;
    font-family: Nickname;
    background-color: #bceafd;
    background-image:  url(../images/arbusto.izquierda.png),url(../images/arbusto.derecha.png), url(../images/pasto.arboles.png), url(../images/cielo.png);
    background-size:20% 17%,20% 17%,contain, contain;
    background-repeat: no-repeat,no-repeat, repeat-x, repeat-x;
    background-attachment: fixed;
    background-position: bottom right,bottom left, bottom center, top center;       
}

.final{
  background-color: rgb(84, 182, 185);
}


#logo img{  
  margin-left: 5%;
  padding: 15px;
  width: 120px;
  float: left;
}

#logof{
    text-align: center; margin-top: 50px;
}

#logof img{
    width: 150px;
}

#joyero img{
    width: 180px;
}

#gameover{
  display: none;
}
 
/* Give headings their own font */
 
h1, h2, h3, h4 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
 
/* Main content area */
 
#content {
  width: 100%;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
 
/* Header/footer boxes */
 
 #game{display: none;}

 #nivel{
  color: #fff;
    font-size: 3em;
  height: 196px;
    padding-top: 30px;
  text-align: center;
    width: 100%;
    max-height: 110px;
    position: absolute;
}

#level{ 
    background-color: #00BABA;
    width: 100%!important;
    margin-bottom: 35px;
    max-height: 110px;
    height: 196px;
    border-bottom: 4px solid #AB4596;
}


#instrucciones, ol{
  display: inline-block;
  width: 80%;
  color: #fff;
  text-align: justify!important;
  font-size: 16px;
  text-transform: uppercase;
}

.instrucciones{

  display: inline-block;
  width: 37%;
  min-width: 310px;
  text-align:  center;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0.2);
  padding-left: 30px;
    padding-right: 30px;
  }

.instrucciones img{
    width: 60%;
}






#btnIniciar, #reload{

    min-width: 200px;
    font-family: Nickname;
    color: #fff;
    margin: 0 auto;
    background-color: #00baba;
    border: none!important;
    font-size: 30px;
    padding: 0 15px 0 15px;
    -webkit-box-shadow: -6px 7px 0px 0px #009696;
    -moz-box-shadow: -6px 7px 0px 0px #009696;
    box-shadow: -6px 7px 0px 0px #009696;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}


#btnIII{
  text-align: center;
  margin-top: 20px;
}
#elFin{
  display: none;
  
  margin: 20px auto;
  min-width: 250px;
  width: 100%;

  text-align: center;
}
#elFin img{
  position: relative;
}
#elFin p{
  color: #009696;
}
#listo{
    min-width: 200px;
    font-family: Nickname;
    color: #fff;
    margin: 0 auto;
    background-color: #00baba;
    border: none!important;
    font-size: 30px;
    padding: 0 15px 0 15px;
    -webkit-box-shadow: -6px 7px 0px 0px #009696;
    -moz-box-shadow: -6px 7px 0px 0px rgba(226, 132, 19, 1);
    box-shadow: -6px 7px 0px 0px #009696;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
       font-size: 30px;
    background-color: #ab4596;
    margin: auto;
    padding: 20px;
    width: 50%;
    min-height: 200px;
    border: 5px solid #00baba;
    border-radius: 15px;
    color: #fff;
    text-align: center;
    word-break: break-word;
    z-index: 100;
}
.modal-content h1{
   font-family: Nickname;
    font-size: 8vw;
    word-break: break-word;
    line-height: 0px;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    cursor: pointer;
}

#win{
  line-height: 0px;
}







 /****************************************************/
.wideBox {
  clear: both;
  text-align: center;
  margin: 70px;
  padding: 10px;
  background: #ebedf2;
  border: 1px solid #333;
}
 
.wideBox h1 {
  font-weight: bold;
  margin: 20px;
  color: #666;
  font-size: 1.5em;
}
 
/* Slots for final card positions */
 
#cardSlots, #cardSlots2, #cardSlots3, #cardSlots4, #cardSlots5, #cardSlots6  {
  display: inline-block;
  margin: 50px auto 0 auto;
  background-repeat: no-repeat, repeat-x;
  background: rgba(0,0,0,0.7);
}


/*

#cardSlots1, #cardSlots2, #cardSlots3, #cardSlots4, #cardSlots5, #cardSlots6 {
  width: 380px;
  height: 174px;
  padding-top: 15px;


}*/
 
/* The initial pile of unsorted cards */


 
#cardPile{
  margin: 0 auto;
  z-index: 1;

}



#cardSlots1, #cardSlots2, #cardSlots3, #cardSlots4, #cardSlots5, #cardSlots6{
  display: inline-block;
  margin: 50px auto 0 auto;
  width: 380px;
  height: 174px;
  padding-top: 50px;
}
 
/* Individual cards and slots */
 
#cardSlots1 div, #cardSlots2 div, #cardSlots3 div, #cardSlots4 div, #cardSlots5 div, #cardSlots6 div, #cardPile div {
  display: inline-block;
  

  width: 58px;
  height: 78px;
  padding: 10px;
  padding-bottom: 0;
  margin: 0 0 10px 10px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
 
#cardSlots div:first-child, #cardSlots1 div:first-child, #cardSlots2 div:first-child, #cardSlots3 div:first-child, #cardSlots4 div:first-child, #cardSlots5 div:first-child, #cardSlots6 div:first-child, #cardPile div:first-child {
  margin-left: 0;
}
 
#cardSlots div.hovered, #cardSlots1 div.hovered, #cardSlots2 div.hovered, #cardSlots3 div.hovered, #cardSlots4 div.hovered, #cardSlots5 div.hovered, #cardSlots6 div.hovered {
  
 


}
 
#cardSlots div, #cardSlots1 div, #cardSlots2 div, #cardSlots3 div, #cardSlots4 div, #cardSlots5 div, #cardSlots6 div {
  
  margin-top: 60px;   
  color: transparent;
}
 
 #cardPile div{
    z-index: 1!important;
    color: transparent;

}
 
#cardPile div.ui-draggable-dragging,  {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);

}
 
/* Individually coloured cards */

 
#card1.correct{background-repeat: no-repeat;}
#card2.correct{background-repeat: no-repeat;}
#card3.correct{background-repeat: no-repeat;}
#card4.correct{background-repeat: no-repeat;}
#card5.correct{background-repeat: no-repeat;}
#card6.correct{background-repeat: no-repeat;}
#card7.correct{background-repeat: no-repeat;}
#card8.correct{background-repeat: no-repeat;}
#card9.correct{background-repeat: no-repeat;}
#card10.correct{background-repeat: no-repeat;}
#card11.correct{background-repeat: no-repeat;}
#card12.correct{background-repeat: no-repeat;}
#card13.correct{background-repeat: no-repeat;}
#card14.correct{background-repeat: no-repeat;}
#card15.correct{background-repeat: no-repeat;}
#card16.correct{background-repeat: no-repeat;}
#card17.correct{background-repeat: no-repeat;}
#card18.correct{background-repeat: no-repeat;}
 
 
/* "You did it!" message */
#successMessage {
  display: none;
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}



#cardSlots1, #cardSlots2, #cardSlots3, #cardSlots4, #cardSlots5, #cardSlots6{
    background: url(../img/canasta.sola.png);
    background-position: bottom,center;
    background-repeat: no-repeat;
    background-size:380px 174px;
  }
/*
  #cardSlots2{
    background: url(../images/carrito.png), url(../images/car2.1.png);
    background-position: bottom,top center;
    background-repeat: no-repeat, repeat-x;
    background-size:380px 174px, 95% 53px;
  }
  #cardSlots3{
    background: url(../images/carrito.png), url(../images/car3.1.png);
    background-position: bottom,top center;
    background-repeat: no-repeat, repeat-x;
    background-size:380px 174px, 95% 53px;
  }
  #cardSlots4{
    background: url(../images/carrito.png), url(../images/car4.1.png);
    background-position: bottom,top center;
    background-repeat: no-repeat, repeat-x;
    background-size:380px 174px, 95% 53px;
  }
  #cardSlots5{
    background: url(../images/carrito.png), url(../images/car5.1.png);
    background-position: bottom,top center;
    background-repeat: no-repeat, repeat-x;
    background-size:380px 174px, 95% 53px;
  }
  #cardSlots6{
    background: url(../images/carrito.png), url(../images/car6.1.png);
    background-position: bottom,top center;
    background-repeat: no-repeat, repeat-x;
    background-size:380px 174px, 95% 53px;
  }
*/

#one{
  background-image: url(../images/sombra-1.png);
}
.diamante1{
  background-image: url(../images/1.1.png);
}
#two{
  background-image: url(../images/sombra-2.png);
}
.diamante2{
  background-image: url(../images/1.2.png);
}
#three{
  background-image: url(../images/sombra-3.png);
}
.diamante3{
  background-image: url(../images/1.3.png);
}
#four{
  background-image: url(../images/sombra-4.png);
}
.diamante4{
  background-image: url(../images/2.1.png);
}
#five{
  background-image: url(../images/sombra-5.png);
}
.diamante5{
  background-image: url(../images/2.2.png);
}
#six{
  background-image: url(../images/sombra-6.png);
}
.diamante6{
  background-image: url(../images/2.3.png);
}
#seven{
  background-image: url(../images/sombra-7.png);
}
.diamante7{
  background-image: url(../images/3.1.png);
}
#eight{
  background-image: url(../images/sombra-8.png);
}
.diamante8{
  background-image: url(../images/3.2.png);
}
#nine{
  background-image: url(../images/sombra-9.png);
}
.diamante9{
  background-image: url(../images/3.3.png);
}
#ten{
  background-image: url(../images/sombra-10.png);
}
.diamante10{
  background-image: url(../images/4.1.png);
}
#eleven{
  background-image: url(../images/sombra-11.png);
}
.diamante11{
  background-image: url(../images/4.2.png);
}
#twelve{
  background-image: url(../images/sombra-12.png);
}
.diamante12{
  background-image: url(../images/4.3.png);
}
#thrirdteen{
  background-image: url(../images/sombra-13.png);
}
.diamante13{
  background-image: url(../images/5.1.png);
}
#fourteen{
  background-image: url(../images/sombra-14.png);
}
.diamante14{
  background-image: url(../images/5.2.png);
}
#fiveteen{
  background-image: url(../images/sombra-15.png);
}
.diamante15{
  background-image: url(../images/5.3.png);
}
#sixteen{
  background-image: url(../images/sombra-16.png);
}
.diamante16{
  background-image: url(../images/6.1.png);
}
#seventeen{
  background-image: url(../images/sombra-17.png);
}
.diamante17{
  background-image: url(../images/6.2.png);
}
#eighteen{
  background-image: url(../images/sombra-18.png);
}
.diamante18{
  background-image: url(../images/6.3.png);
}





.diamante101{
  background-image: url(../images/6.3.png);
}

.diamante102{
  background-image: url(../images/6.2.png);
}
.diamante103{
  background-image: url(../images/4.3.png);
}
.diamante201{
  background-image: url(../images/6.1.png);
}
.diamante202{
  background-image: url(../images/1.1.png);
}
.diamante203{
  background-image: url(../images/6.3.png);
}
.diamante301{
  background-image: url(../images/1.2.png);
}
.diamante302{
  background-image: url(../images/4.2.png);
}
.diamante303{
  background-image: url(../images/4.1.png);
}


.ladosN1{
    position: absolute;
    /* float: left; */
    height: 30px;
    width: 348px;
    margin: 167px 0 0 -60px;
    color: #fff;
    font-size: 37px;
    line-height: 0px;
}



.slotsMaster{
}


#bottomband {
    /*background-image: url(../images/rocas_1_2.png);*/
    background-repeat: repeat-x;
    background-size: contain;
    height: 30px;
    position: fixed;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    z-index: -1;
}



/* Larger than phablet (also point when grid becomes active) */



@media all and (min-width: 250px) and (max-width:450px){

  #nivel{text-align: right;}
}