/* Swiper */

.swiper-js-wrapper {
	position: relative;
	width: 100%;
	height: 300px;
	user-select: none;
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-slide {
	background-size: cover;
	background-position: center;
}

.mySwiper2 {
	height: 80%;
	width: 100%;
}

.mySwiper {
	height: 20%;
	box-sizing: border-box;
	padding: 10px 0;
}

.thum-swiper-wrapper .swiper-slide {
	opacity: 0.7;
}

.mySwiper .swiper-slide-thumb-active {
	opacity: 1;
}

.mySwiper .swiper-slide-thumb-active .thum-swiper-img {
	border: 2px solid #7b61ff;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.swiper-thumnails {
	height: 30%;
}
.thum-swiper {
	height: 100%;
}

.button-next,
.button-prev {
	display: none;
}

.main-swiper .video-con {
	width: 100%;
	height: 100%;
}

.main-swiper .video-con .play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: auto;
	background-color: transparent;
	border: none;
}
button.play-btn.d-flex.align-items-center.justify-content-center svg{
	width:30px;
	height:30px;
	fill:#fff;
}
span.text-whites.d-block.mt-2{
	color:#fff;
	font-weight:bold;
}
@media (min-width: 768px) {
	.swiper-thumnails {
		height: 20%;
		margin-top:10px;
	}
}

@media (min-width: 450px) {
	.swiper-thumnails {
		height: 20%;
		margin-top:10px;
	}
}
@media (max-width: 449px) {
	.swiper-thumnails {
		height: 15%;
		margin-top:10px;
	}
	.swiper-js-wrapper {
	position: relative;
	width: 100%;
	height: 250px;
	user-select: none;
}

}

@media (min-width: 1024px) {


	.swiper-js-wrapper {
		position: relative;
		width: 100%;
		height: 260px;
	}

	.swiper-thumnails {
		height: 77%;
		width: 24%;
		position: absolute;
		top: 8%;
		right: 2%;
		z-index: 99;
		left: auto;
	}
	.main-swiper {
		height: 100%;
		width: 100%;
	}
	.thum-swiper-wrapper {
		height: 100%;
		width: 100%;
	}
	.thum-swiper {
		height: 100%;
		width: 100%;
	}
	.thum-swiper .thum-swiper-img {
		margin: 0 0 0 10px;
		z-index: 99;
	}
	.thum-swiper-wrapper .swiper-slide.swiper-slide-thumb-active::before {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 2px;
		height: 10px;
		width: 10px;
		rotate: 45deg;
		z-index: 1;
		background-color: #7b61ff;
	}
	.button-next {
		position: absolute;
		bottom: 0;
		z-index: 99999;
		display: block;
		width: calc(20% - 10px);
		padding: 5px 0;
		right: 2%;
		left: auto;
		background-color: transparent;
		border: none;
	}
	.button-prev {
		position: absolute;
		top: 0;
		z-index: 9999;
		display: block;
		padding: 5px 0;
		width: calc(20% - 10px);
		right: 2%;
		left: auto;
		background-color: transparent;
		border: none;
	}
	.button-next:hover,
	.button-prev:hover {
		background-color: #7b61ff;
		border-radius: 0.3rem;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}
}

@media (min-width: 1280px) {
	.swiper-js-wrapper {
		height: 400px;
	}
}

@media (min-width: 1440px) {
	.swiper-js-wrapper {
		height: 320px;
	}
}

@media (min-width: 1920px) {
	.swiper-js-wrapper {
		height: 600px;
	}
}
/*Video Slider*/

        .stream_live_tv_slider_video_item {
            height: 795px;
            position: relative;
            width: 100%
        }

        .ratio_16x9:before {
            padding-top: calc(56.25%)
        }

        .ratio_21x9:before {
            padding-top: calc(42.85714286%)
        }

        .ratio_4x3:before {
            padding-top: calc(75%)
        }

        .ratio_3x4:before {
            padding-top: calc(133.33333333%)
        }

        .ratio_1x1:before {
            padding-top: calc(100%)
        }

        [class*=" ratio_"]:before,
        [class^="ratio_"]:before {
            content: "";
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: block
        }

        .center-mode .video-background-holder {
            border-radius: 10px;
            overflow: hidden
        }

        .video-background-holder {
            position: relative;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0
        }

        .video-background-holder .video-player {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }

        .video-background-holder .video-images {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-size: cover;
            background-position: center
        }

        .video-background-holder video,
        .video-background-holder iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            object-fit: cover;
            object-position: center
        }

        .video-background-holder .video-overlay {
            background: linear-gradient(0deg, #00031c 0%, rgba(0, 3, 28, 0.7) 15.62%, rgba(0, 3, 28, 0) 31.32%), linear-gradient(90deg, #00031c 6.03%, rgba(0, 3, 28, 0) 78.64%);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0
        }

        .video-content-holder {
            height: 100%;
            padding: 0 70px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%
        }

        .video-content-holder>.row {
            height: 100%
        }

        .video-content-holder .video-inner {
            max-width: 660px
        }

        .video-content-holder .video-cat {
            text-transform: uppercase;
            margin-bottom: 20px;
            font-weight: bold;
            font-size: 14px
        }

        .video-content-holder .video-cat a {
            color: var(--main)
        }

        .video-content-holder .video-description {
            margin-bottom: 32px
        }

        .video-content-holder .video_title {
            margin-bottom: 23px
        }

        .video-content-holder .video-play {
            display: flex;
            align-items: center
        }

        .video-content-holder .video-play>a {
            vertical-align: middle
        }

        .video-content-holder .video-play>a i {
            font-size: 24px;
            vertical-align: middle;
            margin-left: 6px
        }

        .video-content-holder .video-play>a.btn-left {
            margin-right: 36px
        }

        .video-content-holder .video-play .watchlist-add {
            font-weight: bold;
            position: relative
        }

        .video-content-holder .video-play .watchlist-addlayout1.loader {
            left: inherit;
            right: 0;
            margin-left: 0
        }

        .video-content-holder .video-play .watchlist-add .stream_live_tv-icon-plus {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            width: 54px;
            height: 54px;
            display: inline-block;
            text-align: center;
            line-height: 58px;
            font-size: 30px
        }

        .video-content-holder .video-play .watchlist-add.watchlisted i:before {
            content: '\f33e'
        }

        .video-content-holder .video-meta {
            color: var(--heading);
            margin-bottom: 32px
        }

        .video-content-holder .video-meta>div {
            display: inline-block
        }

        .video-content-holder .video-meta>div.video-badge {
            height: 23px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            line-height: 23px;
            padding: 0 7px;
            margin-left: 15px
        }

        .video-content-holder .video-meta>div.video-imdb i {
            font-size: 13px;
            color: var(--main);
            margin-right: 17px
        }

        .video-content-holder .video-meta>div:not(:first-child):not(.video-badge):before {
            content: '';
            width: 3px;
            height: 3px;
            background: #FFFFFF;
            opacity: 0.5;
            border-radius: 100%;
            display: inline-block;
            margin: 0 16px;
            vertical-align: middle
        }

        .stream_live_tv-content-vertical-at-center .video-content-holder>.row {
            -ms-flex-align: center !important;
            align-items: center !important
        }

        .stream_live_tv-content-vertical-at-bottom .video-content-holder>.row {
            align-items: flex-end
        }