/*          Programmation par www.LogiAction.com 
            Marc-Antoine Loignon - 18 avril 2017
*/

.ui-game{
   width: 465px;
   padding-bottom: 50px;
   position:relative;
   border: solid 5px #1064ac;
}

.sd-block{
   display:inline-block;
   padding: 5px;
   position:relative;
   width:105px;
   height:100px;
   background-image: url('../image/default.jpg');
   background-repeat: no-repeat;
   background-position: center;
   opacity: 0.5;
}

.sd-block.active{
   opacity:1;
}

.sd-block a{
   position:absolute;
   top:0;
   left:0;
   height:100%;
   width:100%;
}

.sd-block img{
   display:none;
}

.sd-block.active img{
   display:block;
}

.sd-counter{
   position: absolute;
   bottom: 0;
   right: 15px;
   top: 0;
   margin: auto;
   font-family: sans-serif;
   font-size: 14px;
   color: #FFF;
   height: 15px;
}

.sd-counter span{
   width: 100%;
   display: block;
   font-size: 14px;
   padding-bottom: 8px;
}

.sd-counter a{
   display: block;
   width: 100px;
   font-size: 13px;
   padding: 12px 10px;
   background-color: #FFF;
   color: #c38ea1;
   text-decoration: none;
   font-weight: 600;
   margin: auto;
   margin-top: 15px;
}

.sd-footer{
   position:absolute;
   bottom:0;
   left:0;
   height:50px;
   width:100%;
   background-color: #1162a4;
   z-index: 1;
}

.ui-game.success .sd-footer{
   height:100%;
}

.ui-game.success .sd-counter{
   right:0;
   left:0;
   margin:auto;
   text-align: center;
   font-size: 18px;
   height: 78px;
}