/** Web banner **/
.web-banner {
	margin: 0px auto 0px auto;
	padding-top: 180px;
	padding-bottom: 80px;
}
.web-banner-content {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1200px;
}
/*******************************************************************/
/** Blocks groups **/
/** Group manage mediums blocks or small blocks groups **/
.is-web-banner-groupe-1 {
	height: 500px;
	width: 60%;
}
/** Groups manage only smalls blocks **/
.is-web-banner-groupe-2,
.is-web-banner-groupe-3 {
	width: 100%;
}
.is-web-banner-groupe-3 {
	margin-top: 30px;
}
/*******************************************************************/
/** Blocks positionnements  **/
.is-web-banner-block-1,
.is-web-banner-block-2,
.is-web-banner-block-3,
.is-web-banner-block-4,
.is-web-banner-block-5,
.is-web-banner-block-6,
.is-web-banner-block-7,
.is-web-banner-block-8 {
	cursor: pointer;
	box-shadow: var(--box-shadow);
	border-radius: var(--primary-border-radius);
	position: relative;
}
/** Large blocks **/
.is-web-banner-block-1,
.is-web-banner-block-2 {
	height: 500px;
	width: 40%;
}
.is-web-banner-block-1 {
	margin-right: 30px;
}
.is-web-banner-block-2 {
	margin-left: 30px;
}
.is-web-banner-50 {
	width: 50%;
}
.is-web-banner-block-2.is-web-banner-50 {
	margin-left: 0px;
}
.is-web-banner-100 {
    width: 100%;
    margin: 0px;
}
/** Medium blocks **/
.is-web-banner-block-3,
.is-web-banner-block-4 {
	width: 100%;
	height: 235px;
}
.is-web-banner-block-4 {
	margin-top: 30px;
}
/** Small blocks **/
.is-web-banner-block-5,
.is-web-banner-block-6,
.is-web-banner-block-7,
.is-web-banner-block-8 {
	cursor: pointer;
	box-shadow: var(--box-shadow);
	border-radius: var(--primary-border-radius);
	width: 50%;
	height: 235px;
}
.is-web-banner-block-5,
.is-web-banner-block-7 {
	margin-right: 15px;
}
.is-web-banner-block-6,
.is-web-banner-block-8 {
	margin-left: 15px;
}
/*******************************************************************/
/** Responsive **/
@media screen and (max-width: 1300px) {
	.web-banner-content {
		width: calc(100% - 100px);
	}
}
@media screen and (max-width: 980px) {
	.web-banner {
		padding-top: 150px;
	}
	.web-banner-content {
		display: block !important;
	}
	.is-web-banner-groupe-1 {
		width: 100%;
		margin-left: 0px;
		margin-top: 30px;
		height: auto;
	}
	.is-web-banner-block-1,
	.is-web-banner-block-2 {
		width: 100%;
		margin-right: 0px;
		margin-left: 0px;
	}
	.is-web-banner-block-2 {
		margin-top: 30px;
	}
}
@media screen and (max-width: 600px) {
	.is-web-banner-groupe-1,
	.is-web-banner-groupe-2,
	.is-web-banner-groupe-3 {
		margin-top: 15px;
	}
	.is-web-banner-groupe-2,
	.is-web-banner-groupe-3 {
		display: block !important;
	}
	.is-web-banner-block-2,
	.is-web-banner-block-4,
	.is-web-banner-block-5,
	.is-web-banner-block-6,
    .is-web-banner-block-7,
    .is-web-banner-block-8 {
		margin-top: 15px;
	}
	.is-web-banner-block-5,
	.is-web-banner-block-6,
    .is-web-banner-block-7,
    .is-web-banner-block-8 {
		width: 100%;
	}
	.is-web-banner-block-5,
    .is-web-banner-block-7 {
		margin-right: 0px;
	}
	.is-web-banner-block-6,
    .is-web-banner-block-8 {
		margin-left: 0px;
	}
}
@media screen and (max-height: 700px) {
	main:has(> #progressbar) .web-banner {
		padding-top: 240px;
	}
}
@media screen and (max-width: 530px) {
	main:has(> #progressbar) .web-banner {
		padding-top: 240px;
	}
}
@media screen and (max-width: 470px) {
	.web-banner {
		padding-top: 120px;
	}
	main:has(> #progressbar) .web-banner {
		padding-top: 240px;
	}
	.web-banner-content {
		width: 100%;
	}
	.is-web-banner-block-1,
	.is-web-banner-block-2,
	.is-web-banner-block-3,
	.is-web-banner-block-4,
	.is-web-banner-block-5,
	.is-web-banner-block-6,
    .is-web-banner-block-7,
    .is-web-banner-block-8 {
		border-radius: 0px;
	}
}