.transition-alt {
	transition: all 1s
}

.mask {
	background: rgba(0, 0, 0, .27)
}

.mask-alt {
	background: rgba(21, 47, 105, 0.81)
}

.shadow {
	box-shadow: 3px 4px 11px 2px rgba(0, 0, 0, 0.22);
}

.shadow-alt {
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .1);
}

.text-shadow {
	text-shadow: 0px 4px 4px rgba(0, 0, 0, .25);
}

.text-shadow-white {
	text-shadow: 0px 0px 4px rgba(255, 255, 255, .25);
}

.title-shadow-success {
	text-shadow: 1px 1px 0 var(--success-color),
		-1px -1px 0 var(--success-color),
		-1px 1px 0 var(--success-color),
		1px -1px 0 var(--success-color)
}

.blur {
	filter: blur(7px)
}

.transparent {
	opacity: 0.8
}

.transparent-alt {
	opacity: 0.27
}

.transparent-alt-2 {
	opacity: 0.57
}

.lh-alt {
	line-height: .8em
}

.icon.document-alt {
	background-image: url("../icons/document-alt.svg")
}

.icon.menu-alt {
	background-image: url("../icons/menu-alt.svg")
}

#btnMenu>span {
	border-bottom: 1px solid #fff
}

#header {
	z-index: 2;
}
#header.opaque {
	background: var(--success-color)
}

.logo {
	font-size: 3.0729167vw;
	font-weight: 900;
}

#menu.opened {
	max-height: 2000px;
	z-index: 2;

}

@media(max-width:768px) {
	#menu {
		max-height: 0px;
		overflow: hidden;
		z-index: -1;
	}

	.logo {
		font-size: 20px;
		font-weight: 900
	}

	
	#menu li:hover ul {
		display: block;
		background: none !important;
	}
}

#menu li ul {
	display: none;
}

#menu li:hover ul {
	display: block;
	/* background: none !important; */
}

#menu>ul>li:hover,
#menu li ul li:hover {
	color: var(--warning-color);
}

#homeBanner {
	min-height: 500px;
	height: 100vh;
	background-image: url("../images/background.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/*===================== SECTION BANNIERE OF WEBSITE ===========================*/

.section-banner {
	height: 44.73958vw;
	background: var(--color-white);
	/* height: auto; */
	transition: all .5s ease-in-out;
}

.section-banner .content-top {
	padding-top: 20.88541vw;
	background-color: blue;
	transition: all .5s ease-in-out;
}

.section-banner .list .content-first {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow: hidden;
	transition: all .5s ease-in-out;
}

.section-banner .list .content-first.show {
	/* display: flex; */
	opacity: 1 !important;
	visibility: visible !important;
	transition: all 0.5s ease-in-out;
}

.section-banner .list .content-first.hide {
	/* display: flex; */
	opacity: 0 !important;
	visibility: hidden !important;
	transition: all 0.5s ease-in-out;
}

.section-banner .list .content-first::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* height: 34.739583vw; */
	height: 100%;
	background: rgb(0 0 0 / 33%);
	/* background: linear-gradient(352deg, hsl(76.77deg 71.18% 44.08% / 42%), hsl(198deg 75% 53% / 11%)); */
	z-index: 1;
	transition: all .5s ease-in-out;
}

.section-banner .list .content-first figure {
	position: relative;
}

.section-banner .list .content-first img {
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
	opacity: 0;
	transition: all .5s ease-in-out;
}

@keyframes zoom-in {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.1);
	}
}

.section-banner .list .content-first.show img {
	opacity: 1;
	animation: zoom-in 15s ease-in-out forwards;
	transition: all .5s ease-in-out;
}

.section-banner .list .content-first .one-actuality {
	position: absolute;
	display: flex;
	flex-direction: column;
	z-index: 2;
	bottom: 10vw;
	left: 0;
	transition: all .5s ease-in-out;
}

.section-banner .list .content-first .one-actuality .text-accroche {
	font-weight: 900;
	font-size: 2.645833vw;
	font-family: var(--font-name);
	line-height: 3.444271vw;
	color: #FFF;
	text-shadow: 2px 2px 14px #000000;
	text-decoration: underline;
	width: 70vw;
}

.section-banner .list .content-first .one-actuality .btn-action {
	padding: 1.398958vw 1.614583vw;
	/* border-radius: 11px; */
	font-size: 1.375vw;
	font-weight: 800;
	line-height: 1.1427083vw;
	font-family: var(--font-name);
	background: var(--white-color);
	width: fit-content;
	color: #2d889d;
	margin-top: 2.34375vw;
	text-transform: uppercase;
}


.section-banner .dots {
	position: absolute;
	bottom: 6vw;
	color: var(--color-yellow-pme);
	left: 0;
	z-index: 2;
	cursor: pointer;
	width: 100%;
	margin: 0;
	display: flex;
}

.section-banner .dots li {
	list-style: none;
	width: 1vw;
	height: 1vw;
	background-color: #FFF;
	border-radius: 20px;
	margin-right: .81vw;
	transition: .5s;
	border: 1px solid white;
}

.section-banner .dots li.active {
	width: 3vw;
	background-color: #2d889d;
}

/* END BANNER */

#homeArticles {
	height: 46.6666667vw;
}

#homeArticles .articles {
	height: calc(100% + var(--20px));
}

#home .bio {
	height: 39.2708333vw;
}

article.bio figure {
	height: 34.375vw;
}

.doc figure {
	width: 8.8541667vw;
	min-width: 8.8541667vw;
}

.homeSupport {
	height: 11.0416667vw;
	min-width: 11.0416667w;
	width: 11.0416667vw;
}

.homeDoc figure {
	height: 21.6145833vw;
}

.articles figure,
.projects figure {
	height: 15.625vw;
	min-height: 15.625vw;
}

@media(max-width:768px) {
	#homeBanner {
		min-height: 144vw;
        height: 40vw;
		z-index: 0;
	}
	.section-banner .list .content-first .one-actuality .text-accroche {
		font-size: 6.645833vw;
		line-height: 9.444271vw;
		text-shadow: 2px 2px 14px #000000;
		width: 100%;
	}
	.section-banner .list .content-first .one-actuality {
		bottom: 16vw;
	}
	.section-banner .list .content-first .one-actuality .btn-action {
		padding: 4.398958vw 5.614583vw;
		font-size: 4.375vw;
		line-height: 2.142708vw;
		margin-top: 6.34375vw;
		margin-bottom: 3vw;
	}
	.section-banner .dots li {
		width: 5vw;
		height: 5vw;
		margin-right: 2.81vw;
	}
	.section-banner .dots li.active {
		width: 10vw;
		background-color: #2d889d;
	}

	#homeArticles {
		height: 125vw;
	}

	.articles article {
		width: 80vw;
		min-width: 80vw;
	}

	.articles figure {
		height: 50vw;
		width: 100%;
		min-width: 100%;
	}

	#home .bio {
		height: calc(100vw - var(--40px))
	}

	.homeSupport {
		height: 25vw;
		min-width: 25vw;
		width: 25vw;
	}

	.homeDoc figure {
		height: calc(100vw - var(--40px));
	}

	article.bio figure {
		height: 70vw;
	}

	.doc figure {
		width: 25vw;
		min-width: 25vw;
		margin-left: calc(-1 * var(--20px));
		margin-top: calc(-1 * var(--20px));
	}
}

.yt-preview {
	width: 56.5625vw;
	height: 31.6145vw;
}

.flickr-frame,
.youtube-frame,
#article .slide-box {
	height: 38vw;
}

.encart figure,
.video figure {
	height: 15vw;
}

.encart-alt figure {
	height: 10vw;
}

textarea {
	height: 12vw;
}

@media(max-width:768px) {
	.quote {
		transform: translateY(-60%);
	}

	.quote span {
		font-size: 80px;
	}

	.yt-preview {
		width: 80vw;
		height: 40vw
	}

	.encart figure {
		height: 125px;
	}

	.video figure {
		height: 180px;
	}

	.encart-alt figure {
		height: 90px;
	}

	.flickr-frame,
	.youtube-frame,
	#article .slide-box {
		height: 220px;
	}

	textarea {
		height: 150px;
	}
}


#homeSlider .slide {
	-webkit-transition: all 1s;
	transition: opacity 2s, z-index .2s 1.8s;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	opacity: 0;
	z-index: 0;
}

#homeSlider .slide.active {
	opacity: 1;
	z-index: 1;
}

#homeSlider .slide>div {
	transform: scale(1.05);
	transition: transform 2s;
}

#homeSlider .slide.active>div {
	transform: scale(1);
}

input[type='radio']:checked+label {
	background-color: var(--success-color);
	border-color: var(--success-color);
}

input[type='radio']:checked+label label i {
	background: var(--success-color);
}

.osform label {
	font-size: var(--p-size);
	/* color: var(--success-color); */
	display: block;
	margin-top: var(--15px);
}

.osform input,
.osform textarea,
.osform select {
	font-size: var(--p-size);
	border: var(--1px) solid var(--gray-color-alt);
	width: 100%;
	background: #fff;
	border-radius: 0;
	padding: var(--15px) var(--20px);
	margin-top: var(--5px);
	margin-bottom: var(--20px);
}

.osform label+div {
	margin-top: var(--5px);
	margin-bottom: var(--40px);
}

.osform input+label,
.osform input+label+label {
	margin-top: 0px;
	color: var(--black-color);
}

.osform label+ul {
	list-style-type: none;
	color: var(--error-color);
}