html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,  del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
  margin:0;
  padding:0;
  text-decoration:none;
  outline:none;
  border:none;
  font-size: 100%;
  list-style:none;
  font-family: "Bariol", Helvetica, Arial, sans-serif;
  color:#000;
  -webkit-text-size-adjust:none;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
}
*, *:before, *:after {
    box-sizing: border-box;
}
:focus { outline: 0;}
:link, :visited, :hover, :active{text-decoration:none}
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}



html{
  position: relative;
  top:0px;
  left: 0px;
  width:100%;
  min-height:100%;
}

body{
  background: #fff; /* Old browsers */
}

#loading{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#fff url(../../images/loading.gif) no-repeat center;
  background-size: 150px;
  z-index: 1000000000;
}


.wrapper{
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0px 0px;
  padding-top: 4.5%;
}


header{
  position: absolute;
  top: 5px;
  left: 0px;
  background-image: url("../../images/barra_superior_laterales.png");
  background-repeat: repeat-x;
  background-size: contain;
  background-position: center 5%;
  width: 100%;
  height: 40px;
}
header:after{
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 500px;
  height: 100%;
  background-image: url("../../images/barra_superior_anaya.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 90% center;
}
header:before{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 100%;
  background-image: url("../../images/barra_superior_ajeduca.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 10% center;
}

h1{
  text-align: center;
  font-size: 20px;
  padding: 0 10px;
  margin: 10px 0;
  font-size: 20px;
}


#countPant{
  width:100%;
  max-width: 1024px;
  height: 40px;
  border-spacing:0;
  border:0px none;
  margin:0;
  padding:0;
  position:relative;
  margin: auto;
  padding-bottom: 15px;
}
#countPant[data-pant="2"],#countPant[data-pant="3"],#countPant[data-pant="4"]{  max-width: 500px; }
#countPant[data-pant="5"],#countPant[data-pant="6"]{  max-width: 600px; }
#countPant[data-pant="7"],#countPant[data-pant="8"]{  max-width: 700px; }
#countPant[data-pant="9"],#countPant[data-pant="10"]{  max-width: 850px; }

#countPant td{
  position: relative;
  table-layout;
  text-align: center;
  vertical-align: middle;
}
#countPant td:before{
  content: "";
  width: 50%;
  height: 5px;
  background-color: #a2daf4;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  bottom: 0;
  margin: auto;
}
#countPant td:after{
  content: "";
  width: 50%;
  height: 5px;
  background-color: #a2daf4;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
#countPant td:nth-child(1):after{ display: none;}
#countPant td:nth-last-child(1):before{ display: none; }

#countPant td div{
  position: relative;
  z-index: 2;
  cursor: default;
  width: 30px;
  height: 30px;
  font-size: 17px;
  line-height: 24px;
  border-radius:90px;
  display: inline-block;
  color: #fff;
  border:4px solid transparent;
  background-color: #bdc3c7;
}
#countPant td div.active{
  border-color: #5ec5ed;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.25);
  -moz-box-shadow:    0px 0px 2px 0px rgba(50, 50, 50, 0.25);
  box-shadow:         0px 0px 2px 0px rgba(50, 50, 50, 0.25);
  
  -ms-transform: scale(1.3); /* IE 9 */
  -webkit-transform: scale(1.3); /* Safari */
  transform: scale(1.3);
}
#countPant td div.bien{ background-color: #2ecc71;  }
#countPant td div.mal{ background-color: #e74c3c;  }


/*------------------------ AJEDUCA ------------------------*/
/*---------------------------------------------------------*/
.mostrarAjeduca, .mostrarAjeduca *{ box-sizing: border-box; }

.mostrarAjeduca{
  position: relative;
  float: left;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding-bottom: 5px;
}


.mostrarAjeduca .pantallaInicio{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,0.9);
  background-size: 150px;
  z-index: 10000;
}
.mostrarAjeduca .pantallaInicio div{
  position: absolute;
  width: 35%;
  height: 100px;
  padding-top: 15px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  border-radius: 10px;
  border-bottom: 5px solid transparent;
}
.mostrarAjeduca .pantallaInicio div:hover{
  cursor: pointer;
  opacity: 0.9;
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari */
  transform: scale(1.1);
}
.mostrarAjeduca .pantallaInicio div#btn_tablero{
  background-color: #d89038;
  border-color:#b46f1d;
  top: 40%;
  left: 12%;
}
.mostrarAjeduca .pantallaInicio div#btn_notablero{
  background-color: #e4aa2d;
  border-color:#c49025;
  top: 40%;
  right: 12%;
}


.footerAjedrez .btn{
  position: relative;
  min-width: 100px;
  padding: 0px 10px;
  padding-left: 40px;
  height: 45px;
  line-height: 45px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  margin-right: 3px;
  margin-bottom: 10px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b0e6+50,5ec5ed+50 */
  background: #00b0e6; /* Old browsers */
  background: -moz-linear-gradient(top, #00b0e6 50%, #5ec5ed 50%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #00b0e6 50%,#5ec5ed 50%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #00b0e6 50%,#5ec5ed 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b0e6', endColorstr='#5ec5ed',GradientType=0 ); /* IE6-9 */
}
.footerAjedrez .btn:after{
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center 10px;
}
.footerAjedrez .btn:not(.disabled):hover{
  background: #00B0E6 !important;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(94,196,237,1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(94,196,237,1);
  box-shadow: 0px 0px 10px 0px rgba(94,196,237,1);
}
.footerAjedrez  .btn.disabled{
  cursor: default;
  opacity: 0.2;
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%); 
}

#btn_anterior, #btn_siguiente{
  background: #00b0e6 !important;
  color: transparent;
  min-width: 45px !important;
  width: 45px;
  height: 45px;
  padding: 0px;
  border-radius: 100%;
}
#btn_anterior:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #fff transparent transparent;
}
#btn_siguiente:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0px 15px 15px;
  border-color: transparent transparent transparent #fff;
}

#btn_limpiarTablero:after{
  background-image: url("../../images/icon_limpiar.png");
}
#btn_colocarEnTablerto:after{
  background-image: url("../../images/icon_colocar.png");
}
#btn_deshacerJugada:after{
  background-image: url("../../images/icon_deshacer.png");
}
#btn_rehacerJugada:after{
  background-image: url("../../images/icon_rehacer.png");
}
#btn_solucion:after{
  background-image: url("../../images/icon_solucion.png");
}





.mostrarAjeduca > .sectionIzquierda{
  position: relative;
  float: left;
  top: 0px;
  left: 0px;
  width: 25%;
}
.mostrarAjeduca > .sectionCentro{
  text-align: center;
  position: relative;
  float: left;
  top: 0px;
  left: 0px;
  width: 50%;
  min-width: 512px;
  min-height: 100px;
}
.mostrarAjeduca > .sectionDerecha{
  position: relative;
  float: left;
  top: 0px;
  left: 0px;
  min-width: 11%;
  max-width: 25%;
  width: 100%;
}


.mostrarAjeduca ul.caja{
  position: relative;
  display: block;
  margin: auto;
  width: 70%;
  max-width: 300px;
  height: 100%;
  min-height: 400px;
  background-color: #a2daf4;
}
.mostrarAjeduca ul.caja > li{
  position: relative;
  float: left;
  width: 50%;
  min-width: 50px;
  height: 12.5%;
  min-height: 50px;
  padding: 3px;
}
.mostrarAjeduca ul.caja.blancas > li:nth-child(2n+1){  background-color: #5ec5ed; }
.mostrarAjeduca ul.caja.blancas > li:nth-child(2n){  background-color: #a2daf4; }
.mostrarAjeduca ul.caja.negras > li:nth-child(2n+1){  background-color: #a2daf4; }
.mostrarAjeduca ul.caja.negras > li:nth-child(2n){  background-color: #5ec5ed; }








.mostrarAjeduca div.ajedreztablero{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
}
.mostrarAjeduca div.ajedreztablero .tablero{
  display: inline-block;
  position: relative;
  width: 70%;
  max-width: 720px;
  min-width: 404px;
  height: 100%;
  min-height: 400px;
  background-color: #fff;
  border:2px solid #84d0f0;
}
.mostrarAjeduca div.ajedreztablero .tablero > .filas{
  display: block;
  position: relative;
  width: auto;
  height: 12.5%;
  min-height: 50px;
}
.mostrarAjeduca div.ajedreztablero .tablero > .filas > .cuadrados{
  display: block;
  position: relative;
  float: left;
  width: 12.5%;
  max-width: 90px;
  height: 100%;
  min-height: 50px;
  max-height: 90px;
  padding: 3px;
}

.mostrarAjeduca div.ajedreztablero .tablero > .filas:nth-child(2n-1) > .cuadrados:nth-child(2n){  background-color: #a2daf4; }
.mostrarAjeduca div.ajedreztablero .tablero > .filas:nth-child(2n) > .cuadrados:nth-child(2n-1){  background-color: #a2daf4; }

.mostrarAjeduca div.ajedreztablero .tablero > .filas > .cuadrados.done-ai-DragPieza{
  background-color: #2ecc71 !important;
  background-image: url(../../images/icon_casilla_check.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  cursor: default !important;
}
.mostrarAjeduca div.ajedreztablero .tablero > .filas > .cuadrados.done-ai-DragPieza > .respFicha{ display: none; }
.mostrarAjeduca div.ajedreztablero .tablero > .filas > .cuadrados.fail{
  background-color: #e74c3c !important;
  background-image: url(../../images/icon_casilla_fail.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  cursor: default !important;
}
.mostrarAjeduca div.ajedreztablero .tablero > .filas > .cuadrados.ai-DragPieza.resp:after{
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: default;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#27ae60+0,ffffff+100 */
  background: #2ecc71; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #2ecc71 30%, transparent 70%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover,  #2ecc71 30%,transparent 70%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center,  #2ecc71 30%,transparent 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ecc71', endColorstr='transparent',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.mostrarAjeduca div.ajedreztablero .tablero > .filas > .cuadrados.ai-ClicTablero.resp{
  border: 2px solid #16a085 !important;
  border-radius: 5px;
    -webkit-box-shadow: inset 0px 0px 3px 0px #16a085;
  -moz-box-shadow: inset 0px 0px 3px 0px #16a085;
  box-shadow: inset 0px 0px 3px 0px #16a085;
}
span.pieza.respTablero {
  text-align: center;
  width: 15px;
  height: 15px;
  line-height: 16px;
  font-size: 11px;
  color: #fff;
  background-color: #16a085;
  border-radius: 0px !important;
  position: absolute;
  top: inherit;
  bottom: -2px;
  left: -2px;
  margin: auto;
  
}

span.pieza.respFicha {
  width: 70%;
  height: 70%;
  top: 40%;
  left: 45%;
  background-color: #ccc;
  border: 1px solid #fff;
  border-radius: 100px;
  background-size: 75%;
  z-index: 11;
}
span.pieza.respFicha.numerado:before {
  content: "";
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 23px;
  font-size: 14px;
  font-weight: bold;
  background-color: rgba(255,255,255,0.4);
  border-radius: 100px;
  position: absolute;
  top:-12px;
  left:0;
  right:0;
  margin: auto;
  
}

.ejes{ height: 50px;  }
.mostrarAjeduca div.ajedreztablero .ejeX{
  position: relative;
  left: 50%;
  display: block;
  width: 100%;
  height: 50px;
  text-align: center;
}
.mostrarAjeduca div.ajedreztablero .ejeX li{
  display: inline-block;
  width: 12.5%;
  max-width: 90px;
  height: 40px;
  line-height: 40px;
  font-size: 25px;
  color: #eb690b;
}

.mostrarAjeduca div.ajedreztablero .ejeY{
  display: inline-block;
  width: 5%;
  height: 100%;

}
.mostrarAjeduca div.ajedreztablero .ejeY li{
  float: left;
  width: 100%;
  height: 12.5%;
  max-block-size: 90px;
  line-height: 50px;
  font-size: 25px;
  color: #eb690b;
}


span.pieza{
  position: absolute !important;
  top: 0px;
  left: 0px;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
span.pieza:not(.nodrag):hover{
  opacity: 0.6;
  cursor: pointer;
}
span.pieza.nodrag{cursor: default;}
span.pieza.blancas#peon{ background-image: url("../../images/ficha_blanca_peon.png"); }
span.pieza.blancas#alfil{ background-image: url("../../images/ficha_blanca_alfil.png"); }
span.pieza.blancas#caballo{ background-image: url("../../images/ficha_blanca_caballo.png"); }
span.pieza.blancas#dama{ background-image: url("../../images/ficha_blanca_dama.png"); }
span.pieza.blancas#rey{ background-image: url("../../images/ficha_blanca_rey.png"); }
span.pieza.blancas#torre{ background-image: url("../../images/ficha_blanca_torre.png"); }

span.pieza.negras#peon{ background-image: url("../../images/ficha_negra_peon.png"); }
span.pieza.negras#alfil{ background-image: url("../../images/ficha_negra_alfil.png"); }
span.pieza.negras#caballo{ background-image: url("../../images/ficha_negra_caballo.png"); }
span.pieza.negras#dama{ background-image: url("../../images/ficha_negra_dama.png"); }
span.pieza.negras#rey{ background-image: url("../../images/ficha_negra_rey.png"); }
span.pieza.negras#torre{ background-image: url("../../images/ficha_negra_torre.png"); }









.mostrarAjeduca ul.caja > li:before{
  content: '';
  position: absolute;
  z-index: 2;
  top: 2.5%;
  left: 2.5%;
  width: 95%;
  height: 95%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.3;
  -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  filter: grayscale(50%);
}
.mostrarAjeduca ul.caja.blancas > li.hueco.peon:before{ background-image: url("../../images/ficha_blanca_peon.png"); }
.mostrarAjeduca ul.caja.blancas > li.hueco.alfil:before{ background-image: url("../../images/ficha_blanca_alfil.png"); }
.mostrarAjeduca ul.caja.blancas > li.hueco.caballo:before{ background-image: url("../../images/ficha_blanca_caballo.png"); }
.mostrarAjeduca ul.caja.blancas > li.hueco.dama:before{ background-image: url("../../images/ficha_blanca_dama.png"); }
.mostrarAjeduca ul.caja.blancas > li.hueco.rey:before{ background-image: url("../../images/ficha_blanca_rey.png"); }
.mostrarAjeduca ul.caja.blancas > li.hueco.torre:before{ background-image: url("../../images/ficha_blanca_torre.png"); }

.mostrarAjeduca ul.caja.negras > li.hueco.peon:before{ background-image: url("../../images/ficha_negra_peon.png"); }
.mostrarAjeduca ul.caja.negras > li.hueco.alfil:before{ background-image: url("../../images/ficha_negra_alfil.png"); }
.mostrarAjeduca ul.caja.negras > li.hueco.caballo:before{ background-image: url("../../images/ficha_negra_caballo.png"); }
.mostrarAjeduca ul.caja.negras > li.hueco.dama:before{ background-image: url("../../images/ficha_negra_dama.png"); }
.mostrarAjeduca ul.caja.negras > li.hueco.rey:before{ background-image: url("../../images/ficha_negra_rey.png"); }
.mostrarAjeduca ul.caja.negras > li.hueco.torre:before{ background-image: url("../../images/ficha_negra_torre.png"); }



.mostrarAjeduca .footerAjedrez{
  margin: 10px 0 20px 0px;
  width: 100%;
  text-align: center;
}




.tablero .filas .cuadrados span.ui-placeholder, .caja .hueco span.ui-placeholder{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  background-color: #87a1ac;
  width: 100%;
  height: 100%;
  display: block;
}



.lightbox{
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.8);
  
}
.lightbox .alert{
  width: 600px;
  height: 200px;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #f08558;
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
.lightbox .alert .icon{
  width: 100px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #E3000E;
  background-image: url("../../images/icon_alert.png");
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center;
}
.lightbox .alert .texto{
  width: 500px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 100px;
}
.lightbox .alert .texto p{
  text-align: center;
  font-size: 20px;
  margin-top: 45px;
  padding: 0x 10px;
  font-weight: bold;
}

.lightbox .alert .texto div{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  bottom: 25px;
  width: 150px;
  background-color: #D2D7D3;
  line-height: 50px;
  border-radius: 50px;
  border-bottom: 5px solid #6C8784;
  cursor: pointer;
}
.lightbox .alert .texto div:hover{
  opacity: 0.8;
}
.lightbox .alert .texto div:nth-of-type(1){ left: 50px; }
.lightbox .alert .texto div:nth-of-type(2){ right: 50px; }



.mostrarAjeduca .textoAI {
    margin-top: 10px;
    width: 100%;
    text-align: center;
  font-size: 18px;
  line-height: 35px;
}
.mostrarAjeduca .textoAI u{ text-decoration: underline;  }

.mostrarAjeduca .textoAI .divEdit{
  position: relative;
  box-shadow: none;
  border:2px solid #eb690b;
  color: #eb690b;
  background-color: #ebeaed;
  border-radius: 3px;
  line-height: 22px;
  text-align: center;
  margin: 0px 5px;
  margin-right: 35px;
  
  width: auto;
  display: inline-block;
  
}
.mostrarAjeduca .textoAI .divEdit input{ 
  min-width: 30px;
  height: 28px;
  color: #eb690b; 
  display: block; 
}
.mostrarAjeduca .textoAI .divEdit input:focus {
  background-color: #def1fa;
  border-color: transparent;
}
.mostrarAjeduca .textoAI .divEdit input.done{ background-color: #27ae60; border-color: transparent; color: #fff; }
.mostrarAjeduca .textoAI .divEdit input.fail{ background-color: #e74c3c; border-color: transparent; color: #fff;  }

.mostrarAjeduca .textoAI .divEdit .inputResp{
  cursor: default;
  display: none;
  position: absolute;
  bottom: -3px;
  left: 0px;
  width: 100%;
  background-color: #2ecc71;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  height: 15px;
  line-height: 15px;
  border-radius: 5px;
}
.mostrarAjeduca .textoAI .divEdit.resp .inputResp{
  display: block;
}

.mostrarAjeduca .textoAI .divEdit .btnCheck{
  position: absolute;
  top: -2px;
  right: -35px;
  background-color: #eb690b;
  border:2px solid #eb690b;
  border-radius: 0  100% 100% 0;
  width: 35px;
  height: 32px;
  line-height: 29px;
  text-align: center;
  color: #fff;
  
  background-image: url("../../images/icon_btnCheck.png");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: center;
}
.mostrarAjeduca .textoAI .divEdit .btnCheck:not(.disabled):hover{
  cursor: pointer;
  background-color: #e98e4c;
}

.mostrarAjeduca .textoAI .divEdit .btnCheck.disabled{
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%); 
  opacity: 0.5;
}

.mostrarAjeduca .textoAI .divEdit.done .btnCheck, .mostrarAjeduca .textoAI .divEdit.fail .btnCheck{ display: none; }
.mostrarAjeduca .textoAI .divEdit.done .btnCheck, .mostrarAjeduca .textoAI .divEdit span font{ opacity:0.5; position: absolute; left: 3px; }





.mostrarAjeduca .botoneraAI{
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
.botoneraAI .btn{
  position: relative;
  min-width: 170px;
  padding: 0px 15px;
  height: 45px;
  line-height: 37px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 5px;
  background-color: #eb690b;
  border: 5px solid transparent;
 }
.botoneraAI .btn:after{
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center 7px;
}
.botoneraAI .btn:not(.disabled):not(.done):not(.resp):not(.fail):hover{
  background: #e98e4c !important;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(233,142,76,1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(233,142,76,1);
  box-shadow: 0px 0px 10px 0px rgba(233,142,76,1);
}
.botoneraAI  .btn.disabled:not(.done):not(.fail){
  cursor: default;
  background-color: rgba(114,114,114,0.4);
}
.botoneraAI .btn.done{
  cursor: default;
  background-color: #27ae60;
}
.botoneraAI .btn.fail{
  cursor: default;
  background-color: #e74c3c;
}

.botoneraAI .btn.resp{
  cursor: default;
  border-color: #27ae60;
}




.mostrarAjeduca div.ajedreztablero .tablero > .filas > .cuadrados.done-ai-ClicTablero{
  border: 5px solid #16a085 !important;
  -webkit-box-shadow: inset 0px 0px 5px 0px #16a085;
  -moz-box-shadow: inset 0px 0px 5px 0px #16a085;
  box-shadow: inset 0px 0px 5px 0px #16a085;
}


.suggest{  border: 1px solid #eb690b; }








.overlay{
  z-index: 100;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.3;
}
.tiempo_contador{
  z-index: 105;
  position: absolute;;
  top: 5px;
  right: 50px;
  width: 70px;
  height: 70px;
  background-color: #eee;
  color: #eb690b;
  border:5px solid #eb690b;
  border-radius: 100%;
  line-height: 65px;
  text-align: center;
  font-size: 27px;
  font-weight: bold;
  box-shadow: 0px 0px 5px #eb690b;
}


.objNew{
  /*border:2px solid red;*/
}
.objNew.done{ background-color: #27ae60 !important; }
.pieza.failClic{ background-color: #e74c3c !important;  }

.objNew.resp{
  border: 2px solid #16a085 !important;
  border-radius: 5px;
    -webkit-box-shadow: inset 0px 0px 3px 0px #16a085;
  -moz-box-shadow: inset 0px 0px 3px 0px #16a085;
  box-shadow: inset 0px 0px 3px 0px #16a085;
}
span.pieza.moverPiezaReal_resp {
  display: none;
  width: 70%;
  height: 70%;
  top: 40%;
  left: 45%;
  background-color: #ccc;
  border: 1px solid #fff;
  border-radius: 100px;
  background-size: 75%;
  z-index: 11;
}


/************************ CORONAR ********************/
.mostrarAjeduca .coronarBox{
  z-index: 15;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 80%;
  height: 60px;
  background-color: #eb690b;
  border:3px solid #eb690b;
  border-radius: 5px;
}
.mostrarAjeduca .coronarBox[data-color="blancas"]{
  top: -11px;
}
.mostrarAjeduca .coronarBox[data-color="negras"]{
  bottom: -11px;
}
.mostrarAjeduca .coronarBox p{
  color: #eb690b;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  left: 3px;
}
.mostrarAjeduca .coronarBox[data-color="blancas"] p{
  top: -19px;
}
.mostrarAjeduca .coronarBox[data-color="negras"] p{
  bottom: -22px;
}
.mostrarAjeduca .coronarBox:before{
  content: "";
  position: absolute;
  left: 0px;
  width: 0;
  height: 0;
  border-style: solid;
}
.mostrarAjeduca .coronarBox[data-color="blancas"]:before{
  border-width: 15px 15px 0 15px;
  border-color: #eb690b transparent transparent transparent;
  bottom: -15px;
}
.mostrarAjeduca .coronarBox[data-color="negras"]:before{
  border-width: 0 15px 15px 15px;
  border-color: transparent transparent #eb690b transparent;
  top: -15px;
}
.mostrarAjeduca .coronarBox div{
  width: 20%;
  height: 50px;
  float: left;
  margin: 2px 2.5%;
  font-size: 13px;
  line-height: 82px;
  color: #000;
  border:2px solid transparent;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  
  background-position: center 0px;
  background-repeat: no-repeat;
  background-size: 33px;
}
.mostrarAjeduca .coronarBox div:hover{
  cursor: pointer;
  background-color: rgba(255,255,255,0.2)
}
.mostrarAjeduca .coronarBox div.activo{
  background-color: #fbb98a;
}
.mostrarAjeduca .coronarBox[data-color="negras"] div#btnTorre{ background-image: url("../../images/ficha_negra_torre.png"); }
.mostrarAjeduca .coronarBox[data-color="negras"] div#btnCaballo{ background-image: url("../../images/ficha_negra_caballo.png"); }
.mostrarAjeduca .coronarBox[data-color="negras"] div#btnAlfil{ background-image: url("../../images/ficha_negra_alfil.png"); }
.mostrarAjeduca .coronarBox[data-color="negras"] div#btnDama{ background-image: url("../../images/ficha_negra_dama.png"); }
.mostrarAjeduca .coronarBox[data-color="blancas"] div#btnTorre{ background-image: url("../../images/ficha_blanca_torre.png"); }
.mostrarAjeduca .coronarBox[data-color="blancas"] div#btnCaballo{ background-image: url("../../images/ficha_blanca_caballo.png"); }
.mostrarAjeduca .coronarBox[data-color="blancas"] div#btnAlfil{ background-image: url("../../images/ficha_blanca_alfil.png"); }
.mostrarAjeduca .coronarBox[data-color="blancas"] div#btnDama{ background-image: url("../../images/ficha_blanca_dama.png"); }

.mostrarAjeduca .coronarBox .btnChange{
  background-color: #fbb98a;
  color: #eb690b;
  border: 3px solid #eb690b;
  position: absolute;
  top: -5px;
  right: -70px;
  width: 60px;
  height: 60px;
  line-height: 55px;
  border-radius: 100%;
  font-size: 14px;
  
  background-image: url("../../images/icon_remplazar_pieza.png");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
}
.mostrarAjeduca .coronarBox .btnChange:not(.disabled):hover{
  background-color: #eb690b;
  color: #fff;
  cursor: pointer;
}
.mostrarAjeduca .coronarBox .btnChange.disabled{
  cursor: default;
  background-color: #ecf0f1;
  color: #999;
  border-color: #999;
  -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  filter: grayscale(50%);
  -ms-transform: scale(0.9); /* IE 9 */
  -webkit-transform: scale(0.9); /* Safari */
  transform: scale(0.9);
}

.coronarOverlay{
  z-index: 14;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.4;
}
/************************ CORONAR ********************/





@keyframes animateMSN {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}



.msn{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 50;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.5);

}
.msn > div{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100px;
  
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: animateMSN;
}

.msn#msnOK > div{
  width: 250px;
  height: 250px;
  border-radius: 100%;
  border: 15px solid #2ecc71;
  background-color: #e9e9e7;
  box-shadow: 0px 0px 5px #2ecc71;
  background-size: 190px;
  background-image: url("../../images/icon_msnOK.png");
}
.msn#msnKO > div{
  width: 250px;
  height: 250px;
  border-radius: 100%;
  border: 15px solid #e74c3c;
  background-color: #e9e9e7;
  box-shadow: 0px 0px 5px #e74c3c;
  background-size: 190px;
  background-image: url("../../images/icon_msnKO.png");
}
.msn#msnEND > div{
  background-color: rgba(236,240,241,0.9);
  box-shadow: 0px 0px 20px #bdc3c7;
  width: 400px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 25px;
  color: #999;
  border-radius: 5px;
}
.msn#msnEND > div{  animation-name: fadeInUp; }

.msn#msnEND > div:before{
  content: "x";
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 18px;
  color: #ccc;
  width: 30px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.msn > div > p{
  width: 150%;
  text-align: center;
  font-weight: bold;
  color: #000;
  font-size: 25px;
  position: absolute;
  left: -25%;
  top: 240px;
  text-shadow: 3px 3px #fff;
  
}


@media screen and (min-width: 2100px) {
  h1{ font-size: 190%;}
}
@media screen and (max-width: 2100px) {
  h1{ font-size: 190%;}
}
@media screen and (max-width: 1500px) {
  h1{ font-size: 150%;}
}
@media screen and (max-width: 1300px) {
  h1{ font-size: 130%;}
}
@media screen and (max-width: 1150px) {
  h1{ font-size: 120%;}
}
  
  

@media screen and (max-width: 1200px) {
  .mostrarAjeduca{
    /*background-color: purple !important;*/
  }
  .mostrarAjeduca > .sectionIzquierda{
    width: 24.4%;
  }
  .mostrarAjeduca > .sectionDerecha{
    width: 24.4%;
  }
   
}
  
@media screen and (max-width: 1000px) {
  header{ height:20px; }
  
  h1{ font-size: 100%;}
  
  .mostrarAjeduca{
    /*background-color: red !important;*/
  }
  .mostrarAjeduca > .sectionIzquierda{
    width: 20%;
  }
  .mostrarAjeduca > .sectionCentro{
    width: 60%;
  }
  .mostrarAjeduca > .sectionDerecha{
    width: 20%;
  }
   
}

@media screen and (max-width: 850px) {
  .mostrarAjeduca{
    /*background-color: orange !important;*/
  }
  .mostrarAjeduca > .sectionIzquierda{
    width: 15%;
  }
  .mostrarAjeduca > .sectionCentro{
    width: 70%;
  }
  .mostrarAjeduca > .sectionDerecha{
    width: 15%;
  }
  .mostrarAjeduca ul.caja{
    width: 90%;
  }
   
}













/*------------------------ COLOR TEXTO SELECCIONADO ------------------------*/
::-moz-selection{
    background: #e0f4f1; /* color de fondo */
    color: #4ea094; /* color de texto */
}
::selection{
    background: #e0f4f1; /* color de fondo */
    color: #4ea094; /* color de texto */
}
::-webkit-selection {
    background: #e0f4f1; /* color de fondo */
    color: #4ea094; /* color de texto */
} 



.purpleeeee{
  background-color: beige !important;
}