/*
Theme Name:     Bopea Child
Theme URI: 		https://jellywp.com/wp/bopea_preview/
Description: 	Wordpress Theme for Blogs & Magazines
Author:         Jellywp
Author URI: 	http://themeforest.net/user/jellywp
Template:       bopea
Version:        1.0.0
*/

.col-right .jlcus_sec_title {
	--sect-t-algin: left;
	--sect-line-size: 5px;
	--sect-line-space: 10px;
	--sect-t-size: 17px;
	--sect-btn-size: 13px;
	--sect-t-color: #000000;
	--sect-line-color: var( --e-global-color-23009ad );
	--sect-btn-color: #000000;
	--sect-btn-ic: var( --e-global-color-accent );
}
 .jlcus_sec_title {
	--sect-t-algin: left;
	--sect-line-size: 1px;
	--sect-ac-line-size: 6px;
	--sect-line-space: 15px;
	--sect-t-size: 20px;
	--sect-t-color: #000000;
	--ac-line-color: var( --e-global-color-accent );
}
.elementor-2427 .elementor-element.elementor-element-6a031d4 > .elementor-widget-container {
	padding: 0px 0px 215px 0px;
}
.jlcus_sec_title.jl_sec_style11 .jlcus_sect_inner {
	border-left: var(--sect-line-size, 10px) solid var(--sect-line-color);
}
.jl_ads_img_w{
    display: none!important;
}
.jlcus_sec_title.jl_sec_style15::after {
	background-color: var(--ac-line-color);
	z-index: 2;
	width: 50px;
	height: var(--sect-ac-line-size);
}
.elementor-widget-shortcode{
    position: relative;
}
.container-player {
	container: player / inline-size;
}

.container-player h1 {
	font-size: 32px;
	margin: 0 0 20px;
}

#description {
	font-size: 20px;
	margin-bottom: 30px;
}

#tags {
	display: flex;
	list-style: none;
	gap:15px;
	padding:0;
	flex-wrap: wrap;
}

#tags li {
	background: #D10031;
	border-radius: var(--border-radius-pills-small);
}

#tags li a {
	display: block;
	padding:5px 10px;
	color: #FFF;
	text-decoration: none;
}

#video-player {
	width: 100%;
	aspect-ratio: 16/9;
}

#video-player iframe {
	border-radius: var(--border-radius);
}

.container-player .article-infos {
	font-weight: bold;
	font-size: 20px;
	display: flex;
	justify-content: space-between;
}

.container-player .article-infos p {
    margin: 5px 0;
}
#splw-location-weather-23543.splw-main-wrapper{
    width: 100%;
}

.tvapi-insert {
	font-size: 14px;
	box-sizing: border-box;

	--colour-main: #000000;
	--background-main: #FFFFFF;
	--colour-date: #595959; /* #8B8B8B */
	--background-date: #FFFFFF;
	--border-radius: 8px;
	--border-radius-pills-small: 8px;
	--border-radius-pills-big: 8px;
}

/* reset from wp */
.tvapi-insert,
.tvapi-insert * {
	font-family: var(--jl-body-font);
	line-height: normal;
}

.tvapi-insert *, .tvapi-insert *::before, .tvapi-insert *::after {
	box-sizing: inherit;
}

.pill-box .pill {
	background: #CCCCCC;
	color: #000000;
}

.pill.animaux,
.pill.cuisine,
.pill.lifestyle { /* Custom */
	background: #C077FF;
}

.pill.business,
.pill.economie { /* custom */
	background: #687BFF;
}

.pill.carrieres {
	background: #687BFF;
}

.pill.culture {
	background: #009C7C;
}

.pill.divertissement {
	background: #FF7800;
}

.pill.education {
	background: #009C7C;
}

.pill.environnement {
	background: #00E070;
}

.pill.famille_et_loisirs {
	background: #FF7800;
}

.pill.humour {
	background: #FF7FCF;
}

.pill.insolite {
	background: #FF7FCF;
}

.pill.lois_gouvernement__politique,
.pill.politique {
	background: #ff000e;
	color: #FFFFFF;
}

.pill.meteo {
	background: #FF8B00;
}

.pill.news {
	background: #C400A6;
	color: #FFFFFF;
}

.pill.people {
	background: #C077FF;
}

.pill.sante {
	background: #00D7FF;
}

.pill.societe {
	background: #ff000e;
	color: #FFFFFF;
}

.pill.sport {
	background: #FF4500;
	color: #FFFFFF;
}

.video-list {
	display: flex;
	gap: 50px;
	list-style: none;
	margin: 50px;
	padding: 0;
	font-size: 16px;
	flex-wrap: wrap;
}

.video-tile {
	width: 480px;
}

.video-tile .image {
	position: relative;
	height: 270px;
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: box-shadow .1s linear;
	user-select: none;
}

.video-tile .image:hover {
	box-shadow: 0 10px 20px #00000050;
}

.video-tile .image h2 {
	position: absolute;
	width: 100%;
	bottom: 0;
	margin: 0;
	padding: 30px 20px 10px;
	text-shadow: 0 0 10px #000000;
	background: #00000080;
	background: linear-gradient(#00000000 0%, #00000020 25%, #00000050 50%, #00000080 100%);
}

.video-tile a {
	color: #FFFFFF;
	font-size: 20px;
	display: block;
}

.container-detailed {
	container: detailed / inline-size;
}

.container-detailed.video-list {
	display: grid;
	gap: 25px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	flex-wrap: wrap;
	grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
}

.container-detailed .video-tile {
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: box-shadow .1s linear;
	user-select: none;
	flex-basis: 380px;
	flex-grow: 1;
}

.container-detailed .video-tile img {
	border-radius: var(--border-radius);
	transition: border-radius .4s ease-out;
}

.container-detailed .video-tile:hover {
	background: #EEEEEE;
}

.container-detailed .video-tile:hover img {
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.container-detailed .video-tile a {
	color: var(--colour-main);
	font-size: 20px;
	display: block;
	text-decoration: none;
}

.container-detailed .video-tile img {
	width: 100%;
	aspect-ratio: 16/9;
}

.container-detailed .pill-box {
	margin: 20px 10px 0;
}

.container-detailed .pill {
	font-size: 20px;
	margin: 10px;
	padding: 8px 15px;
	border-radius: var(--border-radius-pills-big);
}

.container-detailed .video-tile h2 {
	font-size: 25px;
	margin: 20px 20px 0;
}

.container-detailed .video-tile .description {
	text-align: justify;
	font-size: 18px;
	color: var(--colour-date);
	margin: 20px 10px 0;
	grid-area: description;
}

.container-detailed .video-tile .date {
	font-size: 18px;
	color: var(--colour-date);
	margin: 10px 10px;
}
.container-focus {
	container: focus / inline-size;
}

.container-focus.video-focus {
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: box-shadow .1s linear;
	user-select: none;
	flex-basis: 380px;
	flex-grow: 1;
}

.container-focus.video-focus img {
	width: 100%;
	aspect-ratio: 16/9;
}

.container-focus .pill-box {
	margin: 20px 10px 0;
}

.container-focus .pill {
	background: #DDDDDD;
	color: white;
	font-size: 20px;
	margin: 10px;
	padding: 8px 15px;
	border-radius: var(--border-radius-pills-big);
}

.container-focus.video-focus h2 {
	font-size: 32px;
	margin: 20px 20px 0;
}

.container-focus.video-focus .description {
	text-align: justify;
	font-size: 18px;
	color: var(--colour-date);
	margin: 20px 10px 0;
	grid-area: description;
}

.container-focus.video-focus .date {
	font-size: 18px;
	color: var(--colour-date);
	margin: 15px 10px;
}

.container-listinglarge {
	container: listinglarge / inline-size;
}

.container-listinglarge.video-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	flex-direction: column;
	gap: 30px;
}

.container-listinglarge .video-tile {
	overflow: hidden;
	transition: all .1s linear;
	user-select: none;
}

.container-listinglarge .video-tile a {
	color: var(--colour-main);
	font-size: 20px;
	display: grid;
	text-decoration: none;
	grid-template-areas:
				"thumbnail category"
				"thumbnail title"
				"thumbnail description"
				"thumbnail date";
	grid-template-columns: auto auto;
	gap: 0 28px;
}

.container-listinglarge .video-tile img {
	width: 352px;
	aspect-ratio: 16/9;
	grid-area: thumbnail;
	align-self: start;
	justify-self: left;
	border-radius: var(--border-radius);
}

.container-listinglarge .pill-box {
	grid-area: category;
	display: flex;
	align-items: flex-start;
}

.container-listinglarge .pill {
	font-size: 14px;
	padding: 2px 15px;
	border-radius: var(--border-radius-pills-small);
	text-transform: uppercase;

}

.container-listinglarge .video-tile h2 {
	font-size: 25px;
	margin: 10px 0 0;
	grid-area: title;
}

.container-listinglarge .video-tile .description {
	text-align: justify;
	font-size: 16px;
	color: var(--colour-date);
	margin: 10px 0 0;
	max-height: 72px;
	grid-area: description;
	overflow: hidden;
	line-height: normal;
}

.container-listinglarge .video-tile .date {
	font-size: 16px;
	color: var(--colour-date);
	margin: 10px 0 0;
	align-self: end;
}


.container-listing {
	container: listing / inline-size;
}

.container-listing.video-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	flex-direction: column;
}

.container-listing .video-tile {
	overflow: hidden;
	transition: all .1s linear;
	user-select: none;
}

.container-listing .video-tile a {
	color: var(--colour-main);
	font-size: 20px;
	display: grid;
	text-decoration: none;
	grid-template-areas:
				"category thumbnail"
				"title thumbnail"
				"date thumbnail";
	grid-template-columns: auto 200px;
	padding: 18px 0;
	min-height: 149px;
}

.container-listing .video-tile img {
	width: 165px;
	aspect-ratio: 16/9;
	grid-area: thumbnail;
	align-self: center;
	justify-self: right;
	border-radius: var(--border-radius);
}

.container-listing .video-tile:not(:first-child) {
	border-top: 1px solid #ECECEC;
}

.container-listing .pill-box {
	grid-area: category;
	display: flex;
	align-items: flex-start;
}

.container-listing .pill {
	font-size: 14px;
	padding: 2px 15px;
	border-radius: var(--border-radius-pills-big);
	text-transform: uppercase;
}

.container-listing .video-tile h2 {
	font-size: 20px;
	margin: 8px 0 0;
	line-height: 1;
	grid-area: title;

	--display: -webkit-box;
	--webkit-box-orient: vertical;
	--webkit-line-clamp: 3;
}

.container-listing .video-tile .date {
	font-size: 16px;
	margin: 0;
	color: var(--colour_date);
	align-self: end;
}
.container-player {
	container: player / inline-size;
}

.container-player h1 {
	font-size: 32px;
	margin: 0 0 20px;
}

#description {
	font-size: 20px;
	margin-bottom: 30px;
}

#tags {
	display: flex;
	list-style: none;
	gap:15px;
	padding:0;
	flex-wrap: wrap;
}

#tags li {
	background: #D10031;
	border-radius: var(--border-radius-pills-small);
}

#tags li a {
	display: block;
	padding:5px 10px;
	color: #FFF;
	text-decoration: none;
}

#video-player {
	width: 100%;
	aspect-ratio: 16/9;
}

#video-player iframe {
	border-radius: var(--border-radius);
}

.container-player .article-infos {
	font-weight: bold;
	font-size: 20px;
	display: flex;
	justify-content: space-between;
}

.container-player .article-infos p {
margin: 5px 0;
}

@media only screen and (min-width: 1080px){
    .jl_home_bw .e-con-inner{
        display: flex;
        --flex-direction: row;
        margin: 0;
        gap: 20px;
    }
    .col-left, .col-right{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .col-left{
        width: 73%;
    }
    .col-right{
        width: 35%;
    }
}

@container listinglarge (width < 800px) {
	.container-listinglarge .video-tile img {
		width: 300px;
	}
}

@container listinglarge (width < 700px) {
	.container-listinglarge .video-tile h2 {
		font-size: 20px;
	}

	.container-listinglarge .video-tile img {
		width: 250px;
	}
}

@container listinglarge (width < 600px) {
	.container-listinglarge .video-tile h2 {
		font-size: 20px;
	}

	.container-listinglarge .video-tile a {
		grid-template-areas:
				"category"
				"title"
		"thumbnail"
				"description"
				"date";
		grid-template-columns: auto;
	}

	.container-listinglarge .video-tile img {
		width: 100%;
		margin-top: 10px;
	}

	.container-listinglarge .video-tile .date {
		margin-top: 5px;
	}
}
@container listing (width < 500px) {
	.container-listing .video-tile a {
		grid-template-columns: auto 145px;
	}

	.container-listing .video-tile h2 {
		font-size: 18px;
	}

	.container-listing .video-tile img {
		width: 140px;
	}
}

@container listing (width < 300px) {
	.container-listing .video-tile a {

		grid-template-areas:
				"category"
				"title"
		"thumbnail"
				"date";
		grid-template-columns: auto;
	}

	.container-listing .video-tile img {
		width: 100%;
		margin-top: 10px;
	}

	.container-listing .video-tile .date {
		margin-top: 5px;
		text-align: right;
	}
}