.slidercontainer {  
    width: 100%;
    height: auto;
  	max-height: 500px;  
    position: relative;  
    overflow-x: hidden; 
    overflow-y: hidden;
}

.showSlide img {  
    width: 100%; 
    max-height: 500px; 
} 

.showMobileSlide img {  
	height: auto;
    width: 100%; 
    max-height: 500px; 
}

.mainLeftBtn, .mainRightBtn {  
    cursor: pointer;  
    position: absolute;  
    top: 50%;  
    width: auto;  
    padding: 16px;  
    margin-top: -22px;  
    color: white;  
    font-weight: bold;  
    font-size: 18px;  
    transition: 0.6s ease;  
    border-radius: 0 3px 3px 0;  
}

.mainRightBtn {  
    right: 0;  
    border-radius: 3px 0 0 3px;  
}

.mainLeftBtn:hover, .mainRightBtn:hover {  
    background-color: rgba(115, 115, 115, 0.8);  
} 

.mobileLeftBtn, .mobileRightBtn {  
    cursor: pointer;  
    position: absolute;  
    top: 50%;  
    width: auto;  
    padding: 16px;  
    margin-top: -22px;  
    color: white;  
    font-weight: bold;  
    font-size: 18px;  
    transition: 0.6s ease;  
    border-radius: 0 3px 3px 0;  
}

.mobileRightBtn {  
    right: 0;  
    border-radius: 3px 0 0 3px;  
}

.mobileLeftBtn:hover, .mobileRightBtn:hover {  
    background-color: rgba(115, 115, 115, 0.8);  
}

@keyframes fade1
{
	0%   { opacity:0 }
	20%	 { opacity:1 }
	40%	 { opacity:1 }
	60%  { opacity: 1 }
	80%  { opacity: 1 }
	100% { opacity: 0 }
}

.nav-dots-main .coverDot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.3);
}

.coverDot.active, .coverDot:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.nav-dots-main {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots-mobile .mobileCoverDot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.3);
}

.mobileCoverDot.active, .mobileCoverDot:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.nav-dots-mobile {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.bannerImgNone {
	bottom: -100%;
	left: 23%;
	height: 90%;
	width: 30%;
	position: absolute;
}

/*tpg777 banner - content1*/
.tpgImg1 {
	top: 18%;
	left: 34%;
	height: 45%;
	width: 55%;
	position: absolute;
	animation: slide38 8s linear;
}

@keyframes slide38 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	20% { opacity: 1; }
	25% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*tpg777 banner - content2*/
.tpgImg2 {
	top: 42%;
	left: 39%;
	height: 40%;
	width: 45%;
	position: absolute;
	animation: slide39 8s linear;
}

@keyframes slide39 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 0; }
	20% { opacity: 1; }
	25% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*tpg777 banner - coin*/
.tpgImg3 {
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	position: absolute;
	animation: slide14 8s linear;
}

@keyframes slide14 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 1; }
	15% { opacity: 1; }
	20% { opacity: 1; }
	25% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*tpg777 banner - symbol*/
.tpgImg4 {
	bottom: 1%;
	right: 10%;
	height: 40%;
	width: 15%;
	position: absolute;
	animation: slide15 8s linear;
}

@keyframes slide15 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 0; }
	20% { opacity: 0; }
	25% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*88 fortunes banner - top element*/
.fImg1 {
	-webkit-transform: translate(-50%, 50%);
	opacity: 0;
	top: -55%;
	left: 50%;
	height: 300%;
	width: 300%;
	position: absolute;
	animation: slide6 8s linear;
}

@keyframes slide6 {
	0% { opacity: 0; height: 300%; width: 300%; }
	5% { opacity: 0; height: 300%; width: 300%; }
	10% { opacity: 0; height: 200%; width: 300%; }
	15% { opacity: 0; height: 300%; width: 300%; }
	20% { opacity: 0.5; height: 200%; width: 200%; }
	25% { opacity: 1; height: 100%; width: 100%; }
	80% { opacity: 1; height: 100%; width: 100%; }
	90% { opacity: 0; height: 100%; width: 100%; }
	100% { opacity: 0; height: 100%; width: 100%; }
}

/*88 fortunes banner - bottom element*/
.fImg2 {
	opacity: 0;
	bottom: 30%;
	right: 10%;
	height: 50%;
	width: 80%;
	position: absolute;
	animation: slide7 8s linear;
}

@keyframes slide7 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 0.5; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*88 fortunes banner - title element*/
.fImg3 {
	top: -150%;
	left: 30%;
	height: 45%;
	width: 40%;
	position: absolute;
	animation: slide8 8s linear;
}

@keyframes slide8 {
	0% { top: -150%; }
	5% { top: -150%; }
	10% { top: -75%; }
	13% { top: 0%; }
	15% { top: 55%; }
	20% { top: 55%; }
	80% { top: 55%; }
	90% { top: -150%; }
	100% { top: -150%; }
}

/*88 fortunes banner - jackpot element*/
.fImg4 {
	-webkit-transform: translate(-50%, -50%);
	top: 77%;
	left: 91%;
	height: 240%;
	width: 90%;
	opacity: 0;
	position: absolute;
	animation: slide9 8s linear;
}

@keyframes slide9 {
	0% { opacity: 0; height: 240%; width: 90%; }
	5% { opacity: 0; height: 240%; width: 90%; }
	10% { opacity: 0; height: 240%; width: 90%; }
	15% { opacity: 0; height: 240%; width: 90%; }
	20% { opacity: 0; height: 240%; width: 90%; }
	25% { opacity: 0.5; height: 120%; width: 45%; }
	30% { opacity: 1; height: 40%; width: 15%; }
	80% { opacity: 1; height: 40%; width: 15%; }
	90% { opacity: 0; height: 120%; width: 45%; }
	100% { opacity: 0; height: 120%; width: 45%; }
}

/*highway kings deluxe banner - coins*/
.hwkdImg1 {
	top: -100%;
	opacity: 0;
	right: 0%;
	height: 100%;
	width: 90%;
	position: absolute;
	animation: hwkd-slide-1 8s linear;
}

@keyframes hwkd-slide-1 {
	0% { opacity: 0; top: -100%; }
	5% { opacity: 0; top: -100%; }
	10% { opacity: 0; top: -50%; }
	20% { opacity: 0.5; top: 0%; }
	30% { opacity: 1; top: 0%; }
	40% { opacity: 1; top: 0%; }
	50% { opacity: 1; top: 0%; }
	80% { opacity: 1; top: 0%; }
	90% { opacity: 0; top: -100%; }
	100% { opacity: 0; top: -100%; }
}

/*highway kings deluxe banner - title*/
.hwkdImg2 {
	-webkit-transform: translate(-50%, -50%);
	top: 25%;
	left: 50%;
	height: 240%;
	width: 100%;
	opacity: 0;
	position: absolute;
	animation: hwkd-slide-2 8s linear;
}

@keyframes hwkd-slide-2 {
	0% { opacity: 0; height: 240%; width: 100%; }
	5% { opacity: 0; height: 240%; width: 100%; }
	10% { opacity: 0; height: 240%; width: 100%; }
	20% { opacity: 0; height: 240%; width: 100%; }
	30% { opacity: 0.5; height: 140%; width: 70%; }
	40% { opacity: 1; height: 90%; width: 40%; }
	50% { opacity: 1; height: 90%; width: 40%; }
	80% { opacity: 1; height: 90%; width: 40%; }
	90% { opacity: 0; height: 150%; width: 70%; }
	100% { opacity: 0; height: 150%; width: 70%; }
}

/*highway kings deluxe banner - content*/
.hwkdImg3 {
	bottom: 20%;
	left: 36%;
	height: 45%;
	width: 30%;
	position: absolute;
	animation: hwkd-slide-3 8s linear;
}

@keyframes hwkd-slide-3 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0.5; }
	50% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*dinosaur island banner - coins*/
.diImg1 {
	top: -100%;
	opacity: 0;
	right: 0%;
	height: 100%;
	width: 90%;
	position: absolute;
	animation: di-slide-1 8s linear;
}

@keyframes di-slide-1 {
	0% { opacity: 0; top: -100%; }
	5% { opacity: 0; top: -100%; }
	10% { opacity: 0; top: -50%; }
	20% { opacity: 0.5; top: 0%; }
	30% { opacity: 1; top: 0%; }
	40% { opacity: 1; top: 0%; }
	50% { opacity: 1; top: 0%; }
	80% { opacity: 1; top: 0%; }
	90% { opacity: 0; top: -100%; }
	100% { opacity: 0; top: -100%; }
}

/*dinosaur island banner - title*/
.diImg2 {
	-webkit-transform: translate(-50%, -50%);
	top: 25%;
	left: 50%;
	height: 150%;
	width: 80%;
	opacity: 0;
	position: absolute;
	animation: di-slide-2 8s linear;
}

@keyframes di-slide-2 {
	0% { opacity: 0; height: 150%; width: 100%; }
	5% { opacity: 0; height: 150%; width: 100%; }
	10% { opacity: 0; height: 150%; width: 100%; }
	20% { opacity: 0; height: 150%; width: 100%; }
	30% { opacity: 0.5; height: 100%; width: 70%; }
	40% { opacity: 1; height: 50%; width: 30%; }
	50% { opacity: 1; height: 50%; width: 30%; }
	80% { opacity: 1; height: 50%; width: 30%; }
	90% { opacity: 0; height: 150%; width: 70%; }
	100% { opacity: 0; height: 150%; width: 70%; }
}

/*dinosaur island banner - content*/
.diImg3 {
	bottom: 1%;
	left: 36%;
	height: 45%;
	width: 30%;
	position: absolute;
	animation: di-slide-3 8s linear;
}

@keyframes di-slide-3 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0.5; }
	50% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*fortune tiger banner - tiger*/
.ftImg1 {
	top: -100%;
	opacity: 0;
	left: 60%;
	height: 70%;
	width: 35%;
	position: absolute;
	animation: ft-slide-1 8s linear;
}

@keyframes ft-slide-1 {
	0% { opacity: 0; top: -100%; }
	5% { opacity: 0; top: -100%; }
	10% { opacity: 0; top: -50%; }
	20% { opacity: 0.5; top: 8%; }
	30% { opacity: 1; top: 8%; }
	40% { opacity: 1; top: 8%; }
	50% { opacity: 1; top: 8%; }
	80% { opacity: 1; top: 8%; }
	90% { opacity: 0; top: -100%; }
	100% { opacity: 0; top: -100%; }
}

/*fortune tiger banner - logo*/
.ftImg2 {
	-webkit-transform: translate(-50%, -50%);
	top: 28%;
	left: 25%;
	height: 220%;
	width: 100%;
	opacity: 0;
	position: absolute;
	animation: ft-slide-2 8s linear;
}

@keyframes ft-slide-2 {
	0% { opacity: 0; height: 240%; width: 100%; }
	5% { opacity: 0; height: 240%; width: 100%; }
	10% { opacity: 0; height: 240%; width: 100%; }
	20% { opacity: 0; height: 240%; width: 100%; }
	30% { opacity: 0.5; height: 160%; width: 70%; }
	40% { opacity: 1; height: 80%; width: 30%; }
	50% { opacity: 1; height: 80%; width: 30%; }
	80% { opacity: 1; height: 80%; width: 30%; }
	90% { opacity: 0; height: 150%; width: 70%; }
	100% { opacity: 0; height: 150%; width: 70%; }
}

/*fortune tiger banner - content*/
.ftImg3 {
	bottom: 15%;
	left: 10%;
	height: 30%;
	width: 30%;
	position: absolute;
	animation: ft-slide-3 8s linear;
}

@keyframes ft-slide-3 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0.5; }
	50% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*golden stone age banner - coins*/
.gsaImg1 {
	top: -100%;
	opacity: 0;
	left: 25%;
	height: 100%;
	width: 60%;
	position: absolute;
	animation: gsa-slide-1 8s linear;
}

@keyframes gsa-slide-1 {
	0% { opacity: 0; top: -100%; }
	5% { opacity: 0; top: -100%; }
	10% { opacity: 0; top: -50%; }
	20% { opacity: 0.5; top: 0%; }
	30% { opacity: 1; top: 0%; }
	40% { opacity: 1; top: 0%; }
	50% { opacity: 1; top: 0%; }
	80% { opacity: 1; top: 0%; }
	90% { opacity: 0; top: -100%; }
	100% { opacity: 0; top: -100%; }
}

/*golden stone age banner - title*/
.gsaImg2 {
	-webkit-transform: translate(-50%, -50%);
	top: 30%;
	left: 50%;
	height: 240%;
	width: 100%;
	opacity: 0;
	position: absolute;
	animation: gsa-slide-2 8s linear;
}

@keyframes gsa-slide-2 {
	0% { opacity: 0; height: 240%; width: 100%; }
	5% { opacity: 0; height: 240%; width: 100%; }
	10% { opacity: 0; height: 240%; width: 100%; }
	20% { opacity: 0; height: 240%; width: 100%; }
	30% { opacity: 0.5; height: 140%; width: 70%; }
	40% { opacity: 1; height: 70%; width: 40%; }
	50% { opacity: 1; height: 70%; width: 40%; }
	80% { opacity: 1; height: 70%; width: 40%; }
	90% { opacity: 0; height: 150%; width: 70%; }
	100% { opacity: 0; height: 150%; width: 70%; }
}

/*golden stone age banner - content*/
.gsaImg3 {
	bottom: 5%;
	left: 36%;
	height: 45%;
	width: 22%;
	position: absolute;
	animation: gsa-slide-3 8s linear;
}

@keyframes gsa-slide-3 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0.5; }
	50% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*knight gambit banner - caption*/
.kgImg1 {
	z-index: 1;
	bottom: 18%;
	left: 29%;
	height: 13.3%;
	width: 44.1%;
	position: absolute;
	animation: kg-slide-1 8s linear;
}

@keyframes kg-slide-1 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0.5; }
	50% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*knight gambit banner - char dragon*/
.kgImg2 {
	bottom: 0%;
	left: 69%;
	height: 100%;
	width: 31%;
	position: absolute;
	animation: kg-slide-2 8s linear;
}

@keyframes kg-slide-2 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0.5; }
	50% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*knight gambit banner - char human*/
.kgImg3 {
	bottom: 0%;
	right: 64%;
	height: 102%; 
	width: 28%;
	position: absolute;
	animation: kg-slide-3 8s linear;
}

@keyframes kg-slide-3 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0.5; }
	50% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*knight gambit banner - coins*/
.kgImg4 {
	top: -100%;
	opacity: 0;
	left: 0%;
	height: 100%;
	width: 100%;
	position: absolute;
	animation: kg-slide-4 8s linear;
}

@keyframes kg-slide-4 {
	0% { opacity: 0; top: -100%; }
	5% { opacity: 0; top: -100%; }
	10% { opacity: 0; top: -50%; }
	20% { opacity: 0.5; top: 0%; }
	30% { opacity: 1; top: 0%; }
	40% { opacity: 1; top: 0%; }
	50% { opacity: 1; top: 0%; }
	80% { opacity: 1; top: 0%; }
	90% { opacity: 0; top: -100%; }
	100% { opacity: 0; top: -100%; }
}

/*knight gambit banner - dragon-fire*/
.kgImg5 {
	bottom: 4.5%;
	left: 0.3%;
	height: 87.8%;
	width: 76%;
	position: absolute;
	animation: kg-slide-5 8s linear;
}

@keyframes kg-slide-5 {
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0.5; }
	50% { opacity: 0.9; }
	80% { opacity: 0.9; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

/*knight gambit banner - title*/
.kgImg6 {
	-webkit-transform: translate(-50%, -50%);
	top: 33%;
	left: 52%;
	height: 100%;
	width: 15%;
	opacity: 0;
	position: absolute;
	animation: kg-slide-6 8s linear;
}

@keyframes kg-slide-6 {
	0% { opacity: 0; height: 240%; width: 100%; }
	5% { opacity: 0; height: 220%; width: 100%; }
	10% { opacity: 0; height: 200%; width: 90%; }
	20% { opacity: 0; height: 180%; width: 80%; }
	30% { opacity: 0.5; height: 140%; width: 70%; }
	40% { opacity: 1; height: 60%; width: 15%; }
	50% { opacity: 1; height: 60%; width: 15%; }
	80% { opacity: 1; height: 60%; width: 15%; }
	90% { opacity: 0; height: 150%; width: 70%; }
	100% { opacity: 0; height: 150%; width: 70%; }
}