ul[role="type-list"].in-transition,
ul[role="game-list"].in-transition {
    /*transition: all 0.4s;*/
    animation: switch-provider 0.4s 1;
}

ul[role="game-list"].turning-prev-page {
    animation: switch-prev 0.3s 1;
}

ul[role="game-list"].turning-next-page {
    animation: switch-next 0.3s 1;
}

ul[role="game-list"] li span {
	white-space: nowrap;
}

@keyframes switch-provider {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes switch-prev {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes switch-next {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}


ul[role="type-list"] li {
    border: 0;
    height: 3em;
    line-height: 3em;
    text-align: center;
    padding: 1em;
    line-height: 1em;
    box-sizing: border-box;
    cursor: pointer;
}

ul[role="type-list"] li:hover,
ul[role="type-list"] li.active {
    background-color: #666666;
}

[role="slots-providers-demo"]>div {
    border: solid #CEAD6E;
    border-width: 0 1em 0 1em;
    background-color: black;
}


[role="slots-providers-demo"] li {
    border: solid 2px #444444;
    width: 10em;
    height: 8em;
    cursor: pointer;
    background-color: black;
}

[role="slots-providers-demo"] li:hover,
[role="slots-providers-demo"] li.active {
    border-color: #FFDF9C;
}

[role="pagination-btns"] {
    text-align: center;
}

[role="pagination-btns"] button {
       background: #9c070b;
    width: 10em;
    height: 3em;
    color: white;
    padding-left: initial;
    padding-right: initial;
    cursor: pointer;
    border: none;
}
[role="pagination-btns"] button:hover {
	background-color: #D80308;
}