:root {
    --degrades: background: rgba(40,24,38,1);
                background: -moz-linear-gradient(left, rgba(40,24,38,1) 0%, rgba(0,0,0,1) 100%);
                background: -webkit-gradient(left top, right top, color-stop(0%, rgba(40,24,38,1)), color-stop(100%, rgba(0,0,0,1)));
                background: -webkit-linear-gradient(left, rgba(40,24,38,1) 0%, rgba(0,0,0,1) 100%);
                background: -o-linear-gradient(left, rgba(40,24,38,1) 0%, rgba(0,0,0,1) 100%);
                background: -ms-linear-gradient(left, rgba(40,24,38,1) 0%, rgba(0,0,0,1) 100%);
                background: linear-gradient(to right, rgba(40,24,38,1) 0%, rgba(0,0,0,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#281826', endColorstr='#000000', GradientType=1 );
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
}

.contenedor {
    width: 90%;
    margin: auto;
}

.main {
    min-height: 500px;
    background: url("/assets/template/juegodorado/img/new/bg.png") !important;
    background-attachment: fixed !important;
  }
.img-middle, .img-middle-sports, .img-middle-tables, .img-middle-vertical {
    width: 100%;
    margin-bottom: 10px;
}
.img-middle-two {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px;
}

.middle-title, .middle-title-verticals, .middle-title-sports {
    text-transform: uppercase;
    height: 35px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

/* BANNER PRINCIPAL */
.banner-principal {
    font-size: 16px;
	min-height: 46.62em;
	color: #fff;
    background:  url('https://i.ibb.co/0cMNV32/BANNER.jpg');
    background-position: center center;
	background-size: cover;
	margin-bottom: 3.12em;
	display: flex;
	align-items: end;
}

.banner-principal {
    margin: 0 auto;
    margin-bottom: 6.25em;
}

.banner-principal .titulo {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 3.12rem;
    margin-bottom: 0.4em;
}

.banner-principal .boton {
	background: rgba(4, 192, 214, 0.5);
	border: none;
	border-radius: 0.31em;
	padding: 0.93em 1.87em;
	color: #fff;
	margin-right: 1.25em;
	cursor: pointer;
	transition: .3s ease all;
	font-size: 1.12em;
}

.banner-principal .boton:hover {
	background: #04c0d6;
	color: #f1de0f;
}

.banner-principal .boton i {
	margin-right: 1.25em;
}

/* ---- ----- ----- Contenedor Titulo y controles ----- ----- ----- */
.contenedor-titulo-controles {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: 15px;
}

.contenedor-titulo-controles h3{
    color: #fff;
    font-size: 30px;
}

.contenedor-titulo-controles .indicadores button {
    background: #fff;
    height: 3px;
    width: 10px;
    cursor: pointer;
    border: none;
    margin-right: 2px;
}

.contenedor-titulo-controles .indicadores button:hover,
.contenedor-titulo-controles .indicadores button.activo {
    background: #f1de0f;
}


/* ---- ----- ----- Contenedor principal y flechas ----- ----- ----- */
.juegos-recomendados {
    margin-bottom: 70px;
}

.juegos-recomendados .contenedor-principal {
    display: flex;
    align-items: center;
    position: relative;
}

.juegos-recomendados .contenedor-principal .flecha-izquierda,
.juegos-recomendados .contenedor-principal .flecha-derecha {
    position: absolute;
    border: none;
    background: rgb(13 15 15 / 86%);
    font-size: 40px;
    height: 50%;
    top: calc(50% - 25%);
    line-height: 40px;
    width: 50px;
    color: #f1de0f;
    cursor: pointer;
    z-index: 500;
    transition: .2s ease all;
}

.juegos-recomendados .contenedor-principal .flecha-izquierda:hover,
.juegos-recomendados .contenedor-principal .flecha-derecha:hover{
    background:rgb(35 36 36 / 86%)
}

.juegos-recomendados .contenedor-principal .flecha-izquierda {
    left: 0;
}

.juegos-recomendados .contenedor-principal .flecha-derecha {
    right: 0;
}

/* ---- ----- ----- Carousel ----- ----- ----- */
.juegos-recomendados .contenedor-carousel {
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
    scroll-behavior: smooth;
}

.juegos-recomendados .contenedor-carousel .carousel {
    display: flex;
    flex-wrap: nowrap;
}

.juegos-recomendados .contenedor-carousel .carousel .juegos {
    min-width: 20%;
    transition: .3s ease all;
    box-shadow:none;
    padding: 0;
}

.juegos-recomendados .contenedor-carousel .carousel .juegos.hover {
    transform: scale(1.2);
    transform-origin: center;
}

.juegos-recomendados .contenedor-carousel .carousel .juegos img {
    width: 100%;
    vertical-align: top;
    border-radius: 10px;
}

/* ---- ----- ----- Contenedor principal y flechas ----- ----- ----- */
.juegos-recomendados-2 {
    margin-bottom: 70px;
}

.juegos-recomendados-2 .contenedor-principal-2 {
    display: flex;
    align-items: center;
    position: relative;
}

.juegos-recomendados-2 .contenedor-principal-2 .flecha-izquierda-2,
.juegos-recomendados-2 .contenedor-principal-2 .flecha-derecha-2 {
    position: absolute;
    border: none;
    background: rgb(13 15 15 / 86%);
    font-size: 40px;
    height: 50%;
    top: calc(50% - 25%);
    line-height: 40px;
    width: 50px;
    color: #f1de0f;
    cursor: pointer;
    z-index: 500;
    transition: .2s ease all;
}

.juegos-recomendados-2 .contenedor-principal-2 .flecha-izquierda-2:hover,
.juegos-recomendados-2 .contenedor-principal-2 .flecha-derecha-2:hover{
    background:rgb(35 36 36 / 86%)
}

.juegos-recomendados-2 .contenedor-principal-2 .flecha-izquierda-2 {
    left: 0;
}

.juegos-recomendados-2 .contenedor-principal-2 .flecha-derecha-2 {
    right: 0;
}

/* ---- ----- ----- Carousel ----- ----- ----- */
.juegos-recomendados-2 .contenedor-carousel-2 {
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
    scroll-behavior: smooth;
}

.juegos-recomendados-2 .contenedor-carousel-2 .carousel {
    display: flex;
    flex-wrap: nowrap;
}

.juegos-recomendados-2 .contenedor-carousel-2 .carousel .juegos-2 {
    min-width: 20%;
    transition: .3s ease all;
    box-shadow:none;
    padding: 0;
}

.juegos-recomendados-2 .contenedor-carousel-2 .carousel .juegos-2.hover {
    transform: scale(1.2);
    transform-origin: center;
}

.juegos-recomendados-2 .contenedor-carousel-2 .carousel .juegos-2 img {
    width: 100%;
    vertical-align: top;
    border-radius: 10px;
}

/* ---- ----- ----- Banner Secundario ----- ----- ----- */
.banner-deportes {
    font-size: 16px;
	min-height: 30.62em;
	color: #fff;
    background: url(/assets/template/elclub/img/hero-dos.jpg);
    background-position: center center;
	background-size: cover;
}

.banner-principal .banner-deportes {
    margin: 0 auto;
    margin-bottom: 6.25em;
}

.logo-deportes {
    background: #f6f9fd;
    padding: 100px 0;
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
}
/* ---- ----- ----- Banner jackspot ----- ----- ----- */
.banner-jackspot {
    font-size: 16px;
	min-height: 30.62em;
    background: url(/assets/template/elclub/img/hero-tres.jpg);
    background-position: center center;
	background-size: cover;
	margin-bottom: 3.12em;
}

.banner-principal .secundario {
    margin: 0 auto;
    margin-bottom: 6.25em;
}

.banner-principal .secundario .titulo {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 3.12rem;
    margin-bottom: 0.4em;
}

.banner-principal .boton {
	background: rgba(0,0,0, 0.5);
	border: none;
	border-radius: 0.31em;
	padding: 0.93em 1.87em;
	color: #fff;
	margin-right: 1.25em;
	cursor: pointer;
	transition: .3s ease all;
	font-size: 1.12em;
}

.banner-principal .boton:hover {
	background: #04c0d6;
	color: #f1de0f;
}

.banner-principal .boton i {
	margin-right: 1.25em;
}

@media screen and (max-width: 768px) {
    .juegos-recomendados-2 .contenedor-carousel-2 .carousel .juegos-2 {
        min-width: 33%;
        transition: .3s ease all;
        box-shadow: none;
        padding: 0;
    }
}

/* ---- ----- ----- Media Queries ----- ----- ----- */
@media screen and (max-width: 800px) {

	.banner-principal {
        background-repeat: no-repeat;
        font-size: 14px;
        background-size: 100% !important;
        background-position: top;
    }
    .juegos-recomendados {
        margin-bottom: 0px !important;
    }
    .juegos-recomendados-2 {
        margin-bottom: 0px !important;
    }
	.banner-principal .titulo {
		max-width: 100%;
        text-shadow: 2px 2px 2px #230e38;
	}

    .juegos-recomendados .contenedor-carousel .carousel .juegos {
        min-width: 33% !important;
    }

    .logo-deportes {
        background: #f6f9fd;
        padding: 20px 0;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .logo-deportes .logo-liga{
        display: block;
        flex-direction: column;
    }

    .logo-deportes .logo-liga img{
        padding: 10px;
        width: 200px;
    }
    .banner-principal .contenedor {
        width: 90%;
        margin: 18px 20px !important;
    }
}
@media screen and (min-width: 800px) {
    .banner-principal .contenedor {
        width: 90%;
        margin: 10px 119px !important;
    }
    .img-fluid {
        max-width: 17%;
    }
    .middle-title, .middle-title-verticals, .middle-title-sports {
        text-transform: uppercase;
        height: 35px;
        color: #fff;
        font-weight: 700;
        font-size: 25px;
    }
	.col-vertical-md {
		-ms-flex: 0 0 19.666667% !important;
		flex: 0 0 19.666667% !important;
    max-width: 19.666667% !important;
	}
}
.middle-title-left {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 1.5rem;
    color: #fff;
}
.middle-title-right {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 1.5rem;
    color: #fff;
}