/* Styles additionnels */

@font-face {
	font-family: "MoreSugar";
	src: url("../fonts/moresugar/MoreSugar-Regular.ttf");
}

html {font-family: "Open Sans";}
.ms-font {font-family: "MoreSugar";}

.bg_offers {
	background: center / cover no-repeat url('../img/bg_bubbles.webp');
	min-width: 100%;
	max-height: 545px;
}

.bg_offers img {
	max-width: 150px;
	margin: 0 auto;
}

.bg_offers h1 {
	font-size: 4rem;
}

.bg-beige {background-color: #faf3dd;}
.bg-blue {background-color: #5ebfbe;}
.bg-purple {background-color: #8473e2;}
.bg-orange {background-color: #ff9039;}
.bg-pink {background-color: #fc67a9;}
.bg-green {background-color: #05a552;}
.bg-yellow {background-color: #ffc544;}
.bg-darkblue {background-color: #2a4674;}

.btn-outline-turquoise {background-color: #5ebfbe;color: #fff; text-decoration: underline;}
.btn-outline-turquoise:hover {background-color: transparent; color: #5ebfbe; border-color: #5ebfbe;}
.btn-outline-yellow {background-color: #ffc544;color: #000; text-decoration: underline;}
.btn-outline-yellow:hover {background-color: transparent;color: #ffc544; border-color: #ffc544;}
.btn-outline-purple {background-color: #8473e2;color: #fff; text-decoration: underline;}
.btn-outline-purple:hover {background-color: transparent;color: #8473e2; border-color: #8473e2;}
.btn-outline-green {background-color: #05a552;color: #fff; text-decoration: underline;}
.btn-outline-green:hover {background-color: transparent; color: #05a552; border-color: #05a552}
.btn-outline-pink {background-color: #fc67a9;color: #fff; text-decoration: underline;}
.btn-outline-pink:hover {background-color: transparent; color: #fc67a9; border-color: #fc67a9}

.section {padding: 40px!important;}
.custom-badge {border-radius: 20px;}

.splide__slide{margin-left: 25%;}

#backToTop {
	filter: invert(1);
	mix-blend-mode: difference;
	position: fixed;
	right: -40px;
	bottom: 20px;
	cursor: pointer;
	border-radius: 24px;
	transition-duration: 0.3s;
}

.single-article .featured-image {
	height: 200px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

@media screen and (min-width: 992px) {
	.bg_offers {
		min-height: 400px;
	}

	.bg_offers img {
		max-width: 250px;
	}
}