* {
	text-align: center;
	font-family: 'Poppins';
	font-weight: 100;
}

body {
	background-color: #050a14;
	color: white;
	margin: 0;
	padding: 0;
	position: relative;
}

@media only screen and (max-width : 1220px) {
	#eventishere {
		margin: 80px 0;
	}

	.container-header {
		width: 100%;
		margin: 40px 0;
	}

	.container-header-content h1 {
		font-size: 30px;
		text-transform: uppercase;
		text-decoration: underline;
		text-align: center;
	}

	.container-chapitre {
		width: 100%;
		margin: 50px auto 50px auto;
	}

	.chapter-title {
		margin: 10px 0 0 10px;
		font-family: var(--fontFamilyItemTitle);
		text-transform: uppercase;
		text-align: left;
		font-size: 20px;
	}

	.box-event {
		width: 100%;
		margin: 30px auto 0 auto;
		display: inline-flex;
		flex-flow: row wrap;
		justify-content: left;
	}

	/*  */
	.card-item-event {
		display: flex;
		flex-flow: row wrap;
		width: 150px;
		height: 250px;
		padding: 5px;
		margin: 10px;
		background-color: #3a3c4270;
		border-radius: 15px;
		box-shadow: 0 0 0 8px transparent;
		transition: .2s;
		overflow: hidden;
		cursor: pointer;
	}

	.card-item-event:hover {
		box-shadow: 0 0 0 4px white;
	}

	.card-item-event-banner {
		position: relative;
		width: 100%;
		height: 150px;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		border-radius: 15px;
		overflow: hidden;
	}

	.card-item-event-content-info {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.card-item-event-details {
		position: absolute;
		top: 0;
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card-item-event-details-btn {
		height: 30px;
		width: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-item-event-details .button-cta {
		background-color: #1c1e20;
	}

	.card-item-event-details .button-cta:hover {
		background-color: #1c1e20;
	}

	.card-item-event-details .button-cta p {
		font-size: 15px;
		color: white;
	}

	.card-item-event-banner-img {
		height: 100%;
	}

	.card-item-event-date {
		position: absolute;
		bottom: 0;
		height: 50px;
		display: flex;
		align-items: center;
		width: 100%;
	}

	.card-item-event-date-p {
		font-size: 15px;
		font-family: 'Oswald';
		text-align: left;
		text-transform: lowercase;
		text-wrap-mode: wrap;
		color: var(--itemColorTitleValue);
		padding: 0 5px;
	}

	.card-item-event-container-info {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}

	.card-item-event-title {
		width: 100%;
		letter-spacing: 0.1vh;
		font-size: 16px;
		font-family: 'Oswald';
		text-align: center;
		text-transform: uppercase;
		margin: 5px auto;
	}

	.card-item-event-season {
		width: 100%;
		font-size: 14px;
		text-align: center;
		text-transform: uppercase;
		margin: auto auto 0 auto;
	}

	/*  */

	.eventPlayer {
		position: absolute;
		z-index: 1;
		width: 100%;
		top: 70px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
	}

	.eventPlayer-container {
		height: 100%;
		width: 100%;
		display: flex;
		margin: auto;
		background-color: #050a14;
	}

	.loading {
		display: flex;
		margin: auto;
		width: 150px;
		height: 150px;
	}

	.loading img {
		width: 100%;
		height: 100%;
		animation: 3s loadingRotate linear infinite;
	}

	@keyframes loadingRotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(-365deg);
		}
	}

	.eventPlayer-content {
		width: 90%;
		height: 100%;
		display: block;
		margin: 50px auto;
	}

	.closeBtn {
		border: none;
		cursor: pointer;
		margin: 5px 5px auto auto;
		display: flex;
		width: 150px;
		height: 30px;
		border-radius: 20px;
		background-color: #101113;
		transition: .3s;
	}

	.closeBtn:hover {
		background-color: #cd9a00;
		box-shadow: 0 0 0 2px white;
	}

	.closeBtn p {
		font-size: 15px;
		display: flex;
		margin: auto;
		text-align: center;
		transition: .3s;
	}

	.closeBtn:hover p {
		color: black;
	}

	.eventPlayer-main {
		width: 100%;
		height: auto;
		background-color: #101113;
		border-radius: 20px;
		display: flex;
		flex-flow: row wrap;
		margin: 20px auto;
	}

	.eventPlayer-main-banner {
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20px;
		border-radius: 20px;
		height: 100%;
	}

	.eventPlayer-content-main-banner {
		width: 100%;
		display: flex;
		margin: auto;
		height: auto;
	}

	.eventPlayer-main-content {
		margin: 0 auto 20px;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
		width: 90%;
	}

	.eventPlayer-main-content-info {
		margin: auto;
		width: 100%;
	}

	.eventPlayer-main-content-info-date {
		margin: 2px 0;
		color: var(--itemColorTitleValue);
		font-size: 14px;
		text-align: left;
	}

	.eventPlayer-main-content-info-title {
		margin: 15px 0;
		font-family: 'Oswald';
		font-size: 22px;
		text-align: left;
		text-transform: uppercase;
	}

	.eventPlayer-main-content-info-short {
		margin: 2px 0;
		font-size: 18px;
		text-align: left;
	}

	.eventPlayer-main-content .button-cta {
		border-radius: 15px;
		height: 40px;
		margin: 20px auto 0;
	}

	.eventPlayer-main-content-info-link {
		margin: 0 auto;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.eventPlayer-main-content-info-link a {
		width: 100%;
	}

	.eventPlayer-main-content-info-link-p {}

	.eventPlayer-timer {
		width: 100%;
		height: 60px;
		background-color: #101113;
		border-radius: 20px;
		display: flex;
		flex-flow: row wrap;
		margin: 10px auto;
	}

	.eventPlayer-timer-p {
		font-family: 'Oswald';
		text-align: center;
		width: 100%;
		margin: 0;
	}

	.eventPlayer-timer-date {
		letter-spacing: 0.2vh;
		font-weight: bold;
		text-align: center;
		width: 100%;
		margin: 0;
	}

	.footer {
		height: auto;
	}
}

@media only screen and (min-width : 1220px) {
	.container-header {
		width: 100%;
		margin: 40px 0;
	}

	.container-header-content h1 {
		font-size: 35px;
		text-transform: uppercase;
		text-decoration: underline;
		text-align: center;
	}

	.container-chapitre {
		width: 90%;
		display: flex;
		flex-flow: row wrap;
		margin: 50px auto;
	}

	.chapter-title {
		width: 100%;
		margin: 10px 0 0 10px;
		font-family: var(--fontFamilyItemTitle);
		text-transform: uppercase;
		text-align: left;
		font-size: 20px;
	}

	.box-event {
		margin: 30px auto 0 auto;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		gap: 5px;
	}

	/*  */
	.card-item-event {
		display: flex;
		flex-flow: row wrap;
		width: 250px;
		height: 350px;
		padding: 5px;
		margin: 5px;
		background-color: #3a3c4270;
		border-radius: 15px;
		box-shadow: 0 0 0 12px transparent;
		transition: .2s;
		overflow: hidden;
		cursor: pointer;
	}

	.card-item-event:hover {
		box-shadow: 0 0 0 4px white;
	}

	.card-item-event-banner {
		position: relative;
		width: 100%;
		height: 250px;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		border-radius: 15px;
		overflow: hidden;
	}

	.card-item-event-content-info {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.card-item-event-details {
		position: absolute;
		top: 0;
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card-item-event-details-btn {
		height: 30px;
		width: 150px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-item-event-details .button-cta {
		background-color: #1c1e20;
	}

	.card-item-event-details .button-cta:hover {
		background-color: #1c1e20;
	}

	.card-item-event-details .button-cta p {
		font-size: 15px;
		color: white;
	}

	.card-item-event-banner-img {
		height: 100%;
	}

	.card-item-event-date {
		position: absolute;
		bottom: 0;
		height: 50px;
		display: flex;
		align-items: center;
		width: 100%;
	}

	.card-item-event-date-p {
		font-size: 15px;
		font-family: 'Oswald';
		text-align: left;
		text-transform: lowercase;
		text-wrap-mode: wrap;
		color: var(--itemColorTitleValue);
		padding: 0 5px;
	}

	.card-item-event-container-info {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}

	.card-item-event-title {
		width: 100%;
		letter-spacing: 0.1vh;
		/* font-size: 18px; */
		font-size: clamp(17px, 0.1vh, 20px);
		font-family: 'Oswald';
		text-align: center;
		text-transform: uppercase;
		margin: 5px auto;
	}

	.card-item-event-season {
		width: 100%;
		font-size: 16px;
		text-align: center;
		text-transform: uppercase;
		margin: auto auto 0 auto;
	}

	/*  */

	.eventPlayer {
		position: absolute;
		z-index: 1;
		width: 100%;
		top: 70px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
	}

	.eventPlayer-container {
		height: 100%;
		width: 100%;
		display: flex;
		margin: auto;
		background-color: #050a14;
	}

	.loading {
		display: flex;
		margin: auto;
		width: 150px;
		height: 150px;
	}

	.loading img {
		width: 100%;
		height: 100%;
		animation: 3s loadingRotate linear infinite;
	}

	@keyframes loadingRotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(-365deg);
		}
	}

	.eventPlayer-content {
		width: 50%;
		height: 100%;
		display: block;
		margin: 50px auto;
	}

	.closeBtn {
		border: none;
		cursor: pointer;
		margin: 5px 5px auto auto;
		display: flex;
		width: 150px;
		height: 30px;
		border-radius: 20px;
		background-color: #101113;
		transition: .3s;
	}

	.closeBtn:hover {
		background-color: #cd9a00;
		box-shadow: 0 0 0 2px white;
	}

	.closeBtn p {
		font-size: 15px;
		display: flex;
		margin: auto;
		text-align: center;
		transition: .3s;
	}

	.closeBtn:hover p {
		color: black;
	}

	.eventPlayer-main {
		width: 100%;
		height: auto;
		min-height: 500px;
		max-height: 600px;
		background-color: #101113;
		border-radius: 20px;
		display: flex;
		margin: 10px auto;
	}

	.eventPlayer-main-banner {
		overflow: hidden;
		max-width: 40%;
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20px;
		border-radius: 20px;
	}

	.eventPlayer-content-main-banner {
		height: 100%;
		display: flex;
		margin: auto;
		width: auto;
	}

	.eventPlayer-main-content {
		margin: 20px;
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
	}

	.eventPlayer-main-content-info {
		margin: auto;
		width: 100%;
	}

	.eventPlayer-main-content-info-date {
		margin: 2px 0;
		color: var(--itemColorTitleValue);
		font-size: 14px;
		text-align: left;
	}

	.eventPlayer-main-content-info-title {
		margin: 2px 0;
		font-family: 'Oswald';
		font-size: 22px;
		text-align: left;
		text-transform: uppercase;
	}

	.eventPlayer-main-content-info-short {
		margin: 2px 0;
		font-size: 18px;
		text-align: left;
	}

	.eventPlayer-main-content .button-cta {
		border-radius: 15px;
		height: 40px;
	}

	.eventPlayer-main-content-info-link {
		margin: 0 auto;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.eventPlayer-main-content-info-link a {
		width: 100%;
	}

	.eventPlayer-main-content-info-link-p {}

	.eventPlayer-timer {
		width: 100%;
		height: 60px;
		background-color: #101113;
		border-radius: 20px;
		display: flex;
		flex-flow: row wrap;
		margin: 10px auto;
	}

	.eventPlayer-timer-p {
		font-family: 'Oswald';
		text-align: center;
		width: 100%;
		margin: 0;
	}

	.eventPlayer-timer-date {
		letter-spacing: 0.2vh;
		font-weight: bold;
		text-align: center;
		width: 100%;
		margin: 0;
	}
}