@font-face {
	font-family: 'CastoPro Regular';
	src: url('../fonts/castopro/castopro-regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'CastoPro Bold';
	src: url('../fonts/castopro/castopro-bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'CastoPro Black';
	src: url('../fonts/castopro/castopro-black.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html,
body {
    background-color: #fff;
	margin: 0;
	padding: 0;
    font-family: 'CastoPro Regular', sans-serif;
	font-weight: 400;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: .02em;
	color: #000;
}

html {
    scroll-behavior: auto !important;
}

* {
	box-sizing: border-box;
}

h1,
h2 {
	font-family: 'CastoPro Black';
	margin: 0;
}

h2 {
	font-size: 2.3rem;
	margin-bottom: .8em;
}

p {
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0;
}

strong {
	font-family: 'CastoPro Bold';
}

sup {
	font-family: 'CastoPro Regular';
	font-size: .5em;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.img-rounded {
	border-radius: 15px;
}

.d-none {
	display: none;
}

.container {
	padding-left: 15px;
	padding-right: 15px;
}

.container-5 {
	margin: 0 5%;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}

.col {
	flex: 1;
	padding-left: 15px;
	padding-right: 15px;
}

.col-3,
.col-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
	flex: 0 0 auto !important;
}

.col-3 {
	width: 25% !important;
}

.col-4,
.col-sm-4,
.col-md-4 {
	width: 33.33% !important;
}

.col-5 {
	width: 42% !important;
}

.col-6 {
	width: 50% !important;
}

.col-7 {
	width: 58% !important;
}

.col-8 {
	width: 66.66% !important;
}

.col-9 {
	width: 75% !important;
}

.align-items-center {
	display: flex;
	align-items: center;
}

.justify-content-center {
	display: flex;
	justify-content: center;
}

.text-center {
	text-align: center;
}

.text-nowrap {
	white-space: nowrap;
}

.btn {
	display: inline-block;
	border-radius: 6px;
	background-color: #007e8f;
	padding: 2rem 5rem;
	font-family: 'CastoPro Black';
	font-size: 2.6rem;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: transform .2s;
}

.btn:hover {
	transform: scale(1.05);
}

.z-index-1 {
	position: relative;
	z-index: 1;
}

.ball {
	position: absolute;
	background-color: #e30613;
	border-radius: 50%;
	text-align: center;
	width: 225px;
	height: 225px;
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.25);
}

.ball > div {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.ball > div::after {
	content: '';
	position: absolute;
	top: -150px;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		url('../img/noeud.png')
		no-repeat
		center;
}

/**********/
/* Header */

header,
.hero {
	margin-left: 25px;
	margin-right: 25px;
}

header .caution {
	font-family: 'CastoPro Regular';
	font-size: 2.5rem;
	text-align: center;
	color: #888b8e;
	line-height: 1.2;
	margin: 30px 15px 40px;
}

header .logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 25px;
}

header .logos .col-logo {
	flex: auto;
	display: flex;
	align-items: center;
}

header .logos .col-logo.col-logo-left {
	justify-content: flex-end;
}

header .logos .col-logo.col-logo-right {
	justify-content: flex-start;
}

header .logos .divider {
	width: 1px;
	height: 50px;
	background-color: #000;
}

header .baseline {
	font-family: 'CastoPro Bold';
	font-size: 1.9rem;
	text-transform: uppercase;
	color: #005386;
	margin: 0 0 7px;
}

/********/
/* Hero */

.hero {
	background: #09a5b5 url(../img/bg_noel.png) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	border-top-right-radius: 40px;
	padding-top: 32px;
	padding-bottom: 150px;
	margin-bottom: 80px;
	position: relative;
	min-height: 600px;
}

.hero::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200"><path fill="%23ffffff" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,80C640,107,800,181,960,192C1120,203,1280,149,1360,122.7L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>')
		no-repeat
		bottom;
/*	background-size: cover;*/
}

.hero .cartridge-1 {
	display: inline-block;
	background-color: #ffdc00;
	border-radius: 25px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 13px 35px 13px 15px;
	font-family: 'CastoPro Bold';
	font-size: 2.1rem;
	color: #005386;
}

.hero .cartridge-2 {
	display: inline-block;
	background-color: #003366;
	border-radius: 60px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 18px 30px 18px 15px;
	font-family: 'CastoPro Regular';
	font-size: 1.4rem;
	color: #fff;
	line-height: 1.3;
}

.hero .cartridge-2 a {
	color: #fff;
}

.hero .logo-hotte {
	max-width: 65%;
	animation: hotte 10s infinite;
}

.hero .logo-hotte-mobile {
	max-width: 80%;
	margin: 40px auto 0;
	animation: hotte 10s infinite;
}

@keyframes hotte {
	0% {
		transform: translate(0, 0);
	}
	20% {
		transform: translate(0, -20px);
	}
	40% {
		transform: translate(0, -10px);
	}
	60% {
		transform: translate(0, -20px);
	}
	100% {
		transform: translate(0, 0);
	}
}

.hero .ball {
	top: -10px;
	right: 70px;
	animation: heroball 4s infinite;
}

@keyframes heroball {
	0% {
		transform: scale(1);
	}
	10% {
		transform: scale(1.1);
	}
	20% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.1);
	}
	40% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}

.hero .ball > div {
	padding-bottom: 15px;
}

.hero .ball p:nth-child(1) {
	font-family: 'CastoPro Black';
	font-size: 2.8rem;
	color: #fff;
	line-height: 1.05;
}

.hero .ball p:nth-child(2) {
	font-family: 'CastoPro Black';
	font-size: 4.3rem;
	color: #ffdc00;
}

.hero .ball p:nth-child(3) {
	font-family: 'CastoPro Regular';
	font-size: 1.5rem;
	color: #fff;
}

.hero .card-container {
	position: absolute;
	top: 55%;
	right: 8%;
	width: 320px;
	display: flex;
	align-items: flex-end;
	flex-direction: row;
}

.hero .card-container p {
	font-family: 'CastoPro Regular';
	font-size: 1.3rem;
	color: #fff;
	min-width: 130px;
	margin-bottom: 20px;
	margin-left: -30px;
}

/*************/
/* Section 1 */

.section-1 {
	margin-bottom: 80px;
	padding-left: 25px;
	padding-right: 25px;
}

.section-1 .frame {
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 30px 25px 35px;
	border-radius: 15px;
	border: 1px solid rgba(0,0,0,0.2);
	position: relative;
	box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
}

.section-1 .frame .title {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}

.section-1 .frame .title:hover {
	transform: translate(-50%, -50%) scale(1.05);
}

.section-1 .frame .gifts-container {
	display: flex;
}

.section-1 .frame .gifts-container-text,
.section-1 .frame .gifts-container-img {
	flex: 1;
}

.section-1 .frame .gifts-container-text {
	flex: 0 0 360px;
}

.section-1 .frame .gifts-container-img {
	position: relative;
}

.section-1 .frame .gifts-container-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.section-1 .frame .gift-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	animation: section1gift 7s infinite;
	transform-origin: center;
}

.section-1 .frame .gift-container:nth-child(2) {
	animation-delay: 2s;
}

.section-1 .frame .gift-container:nth-child(3) {
	animation-delay: 4s;
}

@keyframes section1gift {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(.97);
	}
	50% {
		transform: scale(1);
	}
}

.section-1 .frame .gift-container .gift {
	width: 100%;
	border-radius: 8px;
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
	padding: 4px 2px 2px;
	text-align: center;
}

.section-1 .frame .gift-container .gift .gift-inner {
	background-color: #e32624;
	border-radius: 0 0 6px 6px;
}

.section-1 .frame .gift-container .gift .gift-top {
	background-color: #fff;
	border-radius: 0 0 8px 8px;
	padding: 5px 10px;
	text-transform: uppercase;
}

.section-1 .frame .gift-container .gift p {
	font-family: 'CastoPro Black';
	text-transform: uppercase;
	margin: 0;
}

.section-1 .frame .gift-container .gift .gift-top p:first-child {
	font-size: 3.5rem;
	color: #e32624;
	line-height: .9;
	position: relative;
}

.section-1 .frame .gift-container .gift .gift-top p:first-child::before {
	content: 'dès';
	position: absolute;
	top: 10px;
	left: -9px;
	font-family: 'CastoPro Bold';
	font-size: 1.4rem;
	text-transform: lowercase;
}

.section-1 .frame .gift-container .gift .gift-top p:last-child {
	font-size: 1.75rem;
	color: #003366;
	line-height: 1;
}

.section-1 .frame .gift-container .gift .gift-bottom {
	padding: 8px 5px 2px;
}

.section-1 .frame .gift-container .gift .gift-bottom p {
	color: #fff;
	line-height: 1;
}

.section-1 .frame .gift-container .gift .gift-bottom p:first-child {
	font-size: 1.3rem;
}

.section-1 .frame .gift-container .gift .gift-bottom p:first-child span {
	font-family: 'CastoPro Regular';
	font-size: 1.2rem;
	text-transform: lowercase;
}

.section-1 .frame .gift-container .gift .gift-bottom p:last-child {
	font-size: 4.7rem;
}

.section-1 .frame .gift-container .gift .gift-bottom p:last-child sup {
	font-family: 'CastoPro Black';
}

.section-1 .frame .gift-container .gift.gift-1 {
	max-width: 140px;
}

.section-1 .frame .gift-container .gift.gift-2 {
	max-width: 155px;
}

.section-1 .frame .gift-container .gift.gift-3 {
	max-width: 170px;
}

.section-1 .frame .gift-container .gift.gift-2 .gift-top p:first-child {
	font-size: 3.9rem;
}

.section-1 .frame .gift-container .gift.gift-2 .gift-top p:last-child {
	font-size: 1.9rem;
}

.section-1 .frame .gift-container .gift.gift-2 .gift-bottom p:first-child {
	font-size: 1.4rem;
}

.section-1 .frame .gift-container .gift.gift-2 .gift-bottom p:first-child span {
	font-size: 1.3rem;
}

.section-1 .frame .gift-container .gift.gift-2 .gift-bottom p:last-child {
	font-size: 5.2rem;
}

.section-1 .frame .gift-container .gift.gift-3 .gift-top p:first-child {
	font-size: 4.2rem;
}

.section-1 .frame .gift-container .gift.gift-3 .gift-top p:last-child {
	font-size: 2.1rem;
}

.section-1 .frame .gift-container .gift.gift-3 .gift-bottom p:first-child {
	font-size: 1.6rem;
}

.section-1 .frame .gift-container .gift.gift-3 .gift-bottom p:first-child span {
	font-size: 1.4rem;
}

.section-1 .frame .gift-container .gift.gift-3 .gift-bottom p:last-child {
	font-size: 5.2rem;
}

.section-1 .frame .gift-container .gift.gift-2 .gift-top p:first-child::before {
	top: 15px;
	left: -7px;
}

.section-1 .frame .gift-container .gift.gift-3 .gift-top p:first-child::before {
	top: 20px;
	left: -7px;
}

.section-1 .frame h3,
.section-1 .frame h4 {
	font-family: 'CastoPro Bold';
	font-size: 2.3rem;
	color: #004d45;
	margin-top: 0;
	margin-bottom: 1.6rem;
}

.section-1 .frame h3 strong {
	font-family: 'CastoPro Black';
}

.section-1 .frame h4 {
	color: #e32624;
}

.section-1 .frame p {
	font-family: 'CastoPro Regular';
	font-size: 1.65rem;
	color: #007e8f;
	margin-bottom: 1.6rem;
}

.section-1 .frame p strong {
	font-family: 'CastoPro Bold';
}

/*************/
/* Section 2 */

.section-2 {
	position: relative;
}

.section-2::before {
	content: '';
	position: absolute;
	top: -40px;
	left: 4.5vw;
	background-image: url(../img/bonhomme.svg);
	width: 64px;
	height: 114px;
	animation: bonhomme 3s infinite;
}

.section-2::after {
	content: '';
	position: absolute;
	top: 30px;
	right: 5vw;
	background-image: url(../img/flocon.svg);
	width: 64px;
	height: 60px;
	animation: flocon 10s infinite;
}

@keyframes bonhomme {
	0% {
		transform: rotate(-25deg);
	}
	50% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(-25deg);
	}
}

@keyframes flocon {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(0);
	}
}

@keyframes flocon {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(0);
	}
}

.section-2-bg {
	background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0.4), rgba(255,255,255,1)), url(../img/bg_noel.png) no-repeat center center;
	background-size: cover;
	padding-bottom: 80px;
}

.section-2 .section-2-container {
	max-width: 1150px;
	margin: 0 auto;
	padding-left: 35px;
	padding-right: 35px;
}

.section-2 h2 {
	font-family: 'CastoPro Bold';
	font-size: 2.2rem;
	color: #007e8f;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 70px;
}

.section-2 h2 span.red {
	color: #e32624;
}

.section-2 .option {
	max-width: 190px;
	margin: 0 auto;
	transition: all .25s ease-in-out;
}

.section-2 .option:hover {
	transform: scale(1.1);
}

.section-2 .option .rounded {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 190px;
	background-color: #fff;;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
}

.section-2 .option h3 {
	background-color: #e32624;
	padding: 10px 0;
	border-radius: 8px;
	font-family: 'CastoPro Bold';
	font-size: 1.7rem;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	transform: translate(0, -30px);
}

/*************/
/* Section 3 */

.section-3 {
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.8)),  url(../img/bg_noel1.jpg) no-repeat center top;
	background-size: cover;
	background-attachment: fixed;
	margin: 0 auto;
	padding: 180px 3% 170px 4%;
	position: relative;
}

.section-3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="1" d="M0,96L80,106.7C160,117,320,139,480,128C640,117,800,75,960,58.7C1120,43,1280,53,1360,58.7L1440,64L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path></svg>')
		no-repeat
		top;
}

.section-3::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200"><path fill="%23e6f2f4" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,80C640,107,800,181,960,192C1120,203,1280,149,1360,122.7L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>')
		no-repeat
		bottom;
}

.section-3 .reindeers {
	position: absolute;
/*	top: -260px;*/
	top: -120px;
	left: 50%;
	width: 800px;
	transform: translate(-49%, 0) rotate(7deg);
	animation: reindeers 10s infinite;
}

@keyframes reindeers {
	0% {
		transform: translate(-49%, 0) rotate(7deg);
	}
	50% {
		transform: translate(-51%, 0) rotate(6deg);
	}
	100% {
		transform: translate(-49%, 0) rotate(7deg);
	}
}

.section-3 .cloche {
	position: absolute;
	top: -100px;
	left: 60%;
	width: 60px;
	height: 79px;
	display: none;
	animation: cloche 8s infinite;
}

@keyframes cloche {
	0% {
		transform: scale(1);
	}
	10% {
		transform: scale(1.2);
	}
	20% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.2);
	}
	40% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}

.section-3 .card-container {
	padding: 30px 40px 0 0;
	margin: 0 auto 35px;
	max-width: 320px;
}

.section-3 .card-container p {
	font-family: 'CastoPro Regular';
	font-size: 1.3rem;
	color: #fff;
}

.section-3 .gift-container {
	text-align: right;
	padding-right: 55px;
}

.section-3 .gift-container img:first-child {
	animation: gift1 7s infinite;
}

.section-3 .gift-container img:last-child {
	transform: translate(0, 20px);
	animation: gift2 4s infinite;
}

@keyframes gift1 {
	0% {
		transform: rotate(-5deg);
	}
	50% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(-5deg);
	}
}

@keyframes gift2 {
	0% {
		transform: rotate(10deg);
	}
	50% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(10deg);
	}
}

.section-3 .frame {
	background-color: #fff;
	margin-bottom: 35px;
	padding: 25px 35px 5px 80px;
	margin-right: 115px;
	position: relative;
}

.section-3 .frame::after {
	content: '';
	position: absolute;
	bottom: -80px;
	right: -70px;
	background-image: url(../img/sapin_blanc.svg);
	width: 70px;
	height: 83px;
	animation: sapin 3s infinite;
}

@keyframes sapin {
	0% {
		transform: rotate(-25deg);
	}
	50% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(-25deg);
	}
}

.section-3 .frame h2 {
	font-family: 'CastoPro Black';
	font-size: 3rem;
	color: #0078d7;
}

.section-3 .frame .step {
	position: relative;
	margin-bottom: 25px;
}

.section-3 .frame .step.step-first {
	padding-right: 115px;
}

.section-3 .frame .step-number {
	position: absolute;
	top: 0;
	left: -102px;
	width: 80px;
	background-color: #ffdc00;
	padding: 8px 25px 8px 0;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	font-family: 'CastoPro Bold';
	font-size: 2.3rem;
	text-align: right;
	color: #0078d7;
}

.section-3 .frame .step p {
	font-family: 'CastoPro Regular';
	font-size: 1.8rem;
	color: #575756;
	line-height: 1.3;
}

.section-3 .frame .step p .small {
	font-size: 1.6rem;
}

.section-3 .frame .step p .blue {
	color: #0078d7;
}

.section-3 .ball {
	top: 0;
	right: 0;
	transform: translate(50%, -7%);
	animation: ball 1s infinite;
}

@keyframes ball {
	0% {
		transform: translate(50%, -7%) rotate(-2deg);
	}
	50% {
		transform: translate(50%, -7%) rotate(2deg);
	}
	100% {
		transform: translate(50%, -7%) rotate(-2deg);
	}
}

.section-3 .ball p:nth-child(1) {
	font-family: 'CastoPro Black';
	font-size: 2.8rem;
	color: #fff;
	line-height: 1.05;
	margin-bottom: .2em;
}

.section-3 .ball p:nth-child(2) {
	font-family: 'CastoPro Bold';
	font-size: 1.5rem;
	color: #ffdc00;
	margin-bottom: .1em;
}

.section-3 .ball p:nth-child(3) {
	font-family: 'CastoPro Regular';
	font-size: 1.5rem;
	color: #fff;
	line-height: 1.3;
}

/**********/
/* Footer */

footer {
	background-color: #e6f2f4;
	padding: 50px 0 50px;
	overflow: hidden;
}

footer .frame {
	display: inline-block;
	margin: 0 auto;
	background: #0078d7 url(../img/bg_noel2.jpg) no-repeat center center;
	background-size: cover;
	border-radius: 8px;
	padding: 3.5rem 5.5rem 4.5rem;
	margin-bottom: 52px;
	position: relative;
}

.element {
	position: absolute;
}

footer .frame .star1 {
	top: 0;
	left: -15vw;
	width: 120px;
	animation: star1 5s infinite;
}

footer .frame .star2 {
	bottom: -70px;
	left: -19vw;
	width: 40px;
	animation: star2 60s infinite;
}

footer .frame .star3 {
	top: 10%;
	right: -5vw;
	width: 30px;
	animation: star3 30s forwards infinite;
}

footer .frame .star4 {
	bottom: -20px;
	right: -18vw;
	width: 90px;
	animation: star4 60s infinite;
}

@keyframes star1 {
	0% {
		transform: scale(1);
		opacity: .5;
	}
	50% {
		transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: .5;
	}
}

@keyframes star2 {
	0% {
		transform: translate(0, 0);
		opacity: 1;
	}
	50% {
		transform: translate(20px, 70px) rotate(360deg) scale(2);
		opacity: .8;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

@keyframes star3 {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: rotate(180deg) scale(1.2);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes star4 {
	0% {
		transform: translate(0, 0);
		opacity: 1;
	}
	50% {
		transform: translate(-20px, -70px) rotate(-180deg) scale(.7);
		opacity: .8;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

footer .frame p.frame-top {
	font-family: 'CastoPro Bold';
	font-size: 2.3rem;
	color: #fff;
	line-height: 1.2;
	margin: 0 0 3rem;
}

footer .frame p.frame-top strong {
	font-family: 'CastoPro Black';
}

footer .frame .frame-bottom {
	display: inline-block;
	margin: 0 auto;
	background-color: #ffdc00;
	border-radius: 60px;
	color: #0078d7;
	padding: 2.1rem 3.6rem;
}

footer .frame .frame-bottom > p {
	margin: 0;
	line-height: 1.2;
}

footer .frame .frame-bottom > p:first-child {
	font-family: 'CastoPro Black';
	font-size: 4rem;
}

footer .frame .frame-bottom > p:first-child sup {
	font-family: 'CastoPro Bold';
}

footer .frame .frame-bottom > p:last-child {
	font-family: 'CastoPro Bold';
	font-size: 1.5rem;
}

footer .rules {
	margin-bottom: 45px;
}

footer p.mentions {
	font-family: 'CastoPro Regular';
	font-size: 1.2rem;
	color: #575756;
	text-align: justify;
	margin: 0;
}

footer p.mentions a {
	text-decoration: underline;
	color: #575756;
}

/**********/
/* Thanks */

#thanks .hero {
	margin-bottom: 0;
	min-height: 0;
}

#thanks .hero::after {
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200"><path fill="%23e6f2f4" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,80C640,107,800,181,960,192C1120,203,1280,149,1360,122.7L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>')
		no-repeat
		bottom;
}

#thanks .hero-flex {
	display: flex;
}

#thanks .hero-flex .hero-flex-left {
	width: 480px;
}

#thanks .hero-flex .hero-flex-right {
	flex: 1;
	padding-right: 80px;
}

#thanks .hero-flex .hero-flex-right .logo-hotte {
	max-width: 700px;
	margin: 0 0 0 auto;
}

#thanks .hero .logo-hotte-mobile {
	margin-top: 0;
}

#thanks .thanks,
#thanks footer {
	margin-left: 25px;
	margin-right: 25px;
}

#thanks .thanks {
	padding-top: 20px;
	padding-bottom: 50px;
	position: relative;
}

#thanks .thanks::before {
	content: '';
	position: absolute;
	bottom: -40px;
	left: 4.5vw;
	background-image: url(../img/bonhomme.svg);
	width: 64px;
	height: 114px;
	animation: bonhomme 3s infinite;
}

#thanks .thanks::after {
	content: '';
	position: absolute;
	top: 0;
	right: 5vw;
	background-image: url(../img/flocon.svg);
	width: 64px;
	height: 60px;
	animation: flocon 10s infinite;
}

#thanks .thanks .star {
	top: 10px;
	left: 5vw;
	width: 80px;
	animation: star1 5s infinite;
}

#thanks .thanks .gift {
	bottom: -40px;
	right: 10vw;
	width: 40px;
	animation: star1 2s forwards infinite;
}

#thanks .thanks h1 {
	font-family: 'CastoPro Bold';
	font-size: 5.1rem;
	text-align: center;
	text-transform: uppercase;
	color: #004d45;
	line-height: 1.25;
}

#thanks .thanks h1 span {
	color: #fff;
}

#thanks footer {
	background-color: #e6f2f4;
	background: linear-gradient(rgba(230, 242, 244, 1), rgba(230, 242, 244, .5)), url(../img/bg_noel.png) no-repeat center top;
}

/**************/
/* Responsive */

@media (min-width: 1200px) {
	.col-xl-5,
	.col-xl-7 {
		flex: 0 0 auto;
	}
	.col-xl-3 {
		width: 25%;
	}
	.col-xl-5 {
		width: 42%;
	}
	.col-xl-7 {
		width: 58%;
	}
	.col-xl-9 {
		width: 75%;
	}
}

@media (min-width: 992px) {
	.d-lg-block {
		display: block;
	}
	.d-lg-none {
		display: none;
	}
	.col-lg-3,
	.col-lg-5,
	.col-lg-7,
	.col-lg-9 {
		flex: 0 0 auto;
	}
	.col-lg-3 {
		width: 25%;
	}
	.col-lg-4 {
		width: 33.33%;
	}
	.col-lg-5 {
		width: 42%;
	}
	.col-lg-7 {
		width: 58%;
	}
	.col-lg-8 {
		width: 66.66%;
	}
	.col-lg-9 {
		width: 75%;
	}
	.text-lg-left {
		text-align: left;
	}
	.hero .logo-hotte-mobile {
		display: none;
	}
}

@media (min-width: 768px) {
	.d-md-block {
		display: block;
	}
	.d-md-none {
		display: none;
	}
	.col-md-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-md-4 {
		width: 33.33%;
	}
	.col-md-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-md-8 {
		flex: 0 0 auto;
		width: 66.66%;
	}
	.col-md-9 {
		width: 75%;
	}
	.text-md-left {
		text-align: left;
	}
}

@media (min-width: 550px) {
	.d-sm-block {
		display: block;
	}
}

@media (max-width: 1599px) {
	.section-3 .reindeers {
/*		top: -280px;*/
	}
}

@media (max-width: 1399px) {
	.section-3 .reindeers {
/*		top: -300px;*/
	}
}

@media (max-width: 1199px) {
	.section-3 .reindeers {
/*		top: -320px;*/
	}
}

@media (max-width: 991px) {
	.col-xl-3,
	.col-xl-5,
	.col-xl-7,
	.col-xl-9 {
		flex: 0 0 auto;
		width: 100%;
	}
	.col-lg-3 {
		flex: 0 0 auto;
		width: 50%;
	}
	.ball {
		width: 180px;
		height: 180px;
	}
	.ball > div::after {
		top: -126px;
	}
	header .caution {
		font-size: 2rem;
	}
	.hero {
		padding-bottom: 120px;
	}
	.hero .logo-hotte {
		display: none;
	}
	.hero-floating {
		display: flex;
		justify-content: space-evenly;
	}
	.hero .ball {
		margin-top: 100px;
	}
	.hero .card-container {
		display: block;
		width: 150px;
	}
	.hero .card-container p {
		margin-top: 10px;
		margin-left: 20px;
	}
	.hero .ball,
	.hero .card-container {
		position: static;
	}
	.hero .ball p:nth-child(1) {
		font-size: 2.3rem;
	}
	.hero .ball p:nth-child(2) {
		font-size: 3.3rem;
	}
	.hero .ball p:nth-child(3) {
		font-size: 1.3rem;
	}
	.section-1 {
		margin-left: auto;
		margin-right: auto;
	}
	.section-1 .frame {
		max-width: 700px;
		text-align: center;
	}
	.section-1 .frame .gifts-container-inner {
		position: static;
	}
	.section-1 .frame .gifts-container {
		display: block;
	}
	.section-1 .frame .gifts-container-text {
		flex: none;
		min-width: auto;
	}
	.section-2-bg {
		background-size: auto;
	}
	.section-3 {
		padding-top: 100px;
		padding-left: 22px;
		padding-right: 35px;
	}
	.section-3 .reindeers {
		width: 600px;
/*		top: -220px;*/
	}
	.section-3 .cloche {
		display: block;
	}
	.section-3 .gift-container {
		display: none;
	}
	.section-3 .card-container {
		padding: 30px 40px 0 0;
		margin: 0 auto 35px;
		max-width: 260px;
	}
	.section-3 .card-container p {
		margin-left: 25px;
	}
	.section-3 .card-container img {
		padding-left: 20px;
	}
	.section-3 .frame {
		padding-top: 60px;
		padding-left: 50px;
		padding-right: 25px;
		margin-right: 0;
	}
	.section-3 .frame .step.step-first {
		padding-right: 0;
	}
	.section-3 .frame .step-number {
		width: 55px;
		left: -72px;
	}
	.section-3 .ball {
		transform: translate(10%, -80%);
	}
	@keyframes ball {
		0% {
			transform: translate(10%, -80%) rotate(-2deg);
		}
		50% {
			transform: translate(10%, -80%) rotate(2deg);
		}
		100% {
			transform: translate(10%, -80%) rotate(-2deg);
		}
	}
	.section-3 .ball p:nth-child(1) {
		font-size: 2.3rem;
	}
	.section-3 .ball p:nth-child(3) {
		font-size: 1.3rem;
	}
	footer .frame .star1 {
		left: -145px;
	}
	footer .frame .star2 {
		bottom: -80px;
		left: -20px;
	}
	footer .frame .star3 {
		right: -65px;
	}
	footer .frame .star4 {
		bottom: -140px;
		right: -25px;
	}
	.section-3 .frame::after {
		bottom: -200px;
		right: -10px;
	}
	#thanks .hero-flex .hero-flex-right {
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.col-lg-3,
	.col-lg-5,
	.col-lg-7,
	.col-lg-9 {
		flex: 0 0 auto;
		width: 100%;
	}
	.col-md-4 {
		flex: 0 0 auto;
		width: 100% !important;
	}
	header .caution {
		font-size: 1.6rem;
	}
	header .baseline {
		text-align: center;
	}
	header .logos {
		gap: 10px;
	}
	header .logos .col-logo {
		flex: auto;
	}
	.hero,
	.section-3 {
		background-attachment: scroll;
	}
	.hero {
		margin-left: 0;
		margin-right: 0;
		padding-bottom: 90px;
		border-top-right-radius: 0;
		background-position: left center;
	}
	.hero .cartridge-1 {
		font-size: 1.9rem;
	}
	.hero .cartridge-2 {
		font-size: 1.3rem;
	}
	.section-1 {
		padding-left: 35px;
		padding-right: 35px;
		margin-bottom: 100px;
	}
	.section-1 .frame .gifts-container-inner {
		display: block;
	}
	.section-1 .frame .gift-container {
		margin-bottom: 35px;
		transform-origin: center;
	}
	.section-1 .frame .gift-container:nth-child(2) {
			animation-direction: reverse;
			animation-delay: 0s;
	}
	.section-1 .frame .gift-container:nth-child(3) {
			animation-delay: 0s;
	}
	@keyframes section1gift {
		0% {
			transform: rotate(-10deg);
		}
		50% {
			transform: rotate(10deg);
		}
		100% {
			transform: rotate(-10deg);
		}
	}
	.section-1 .frame h3, .section-1 .frame h4 {
		font-size: 2.2rem;
	}
	.section-2::before {
		top: -70px;
		left: 15vw;
		width: 30px;
		height: 53px;
	}
	.section-2::after {
		top: -70px;
		right: 25vw;
		width: 45px;
		height: 42px;
	}
	.section-2 h2 {
		margin-bottom: 40px;
	}
	.section-3 {
		padding-top: 60px;
		padding-bottom: 110px;
	}
	.section-3 .reindeers {
/*		top: -180px;*/
		width: 90%;
	}
	footer .frame {
		padding: 1.7rem 3.5rem 2.5rem;
	}
	footer .frame .star1,
	footer .frame .star3 {
		display: none;
	}
	footer .frame p.frame-top {
		font-size: 1.7rem;
		margin-bottom: 1.5rem;
	}
	footer .frame .frame-bottom > p:first-child {
		font-size: 2.2rem;
	}
	footer .frame .frame-bottom > p:last-child {
		font-size: .8rem;
	}
	#thanks .thanks,
	#thanks footer {
		margin-left: 0;
		margin-right: 0;
	}
	#thanks .hero {
		min-height: 0;
		padding-top: 10px;
	}
	#thanks .hero-flex {
		display: block;
	}
	#thanks .hero-flex .hero-flex-left {
		width: auto;
	}
	#thanks .hero .logo-hotte-mobile {
		width: 50%;
		margin-top: 30px;
	}
	#thanks .thanks {
		padding-top: 0;
	}
	#thanks .thanks h1 {
		font-size: 4rem;
	}
}

@media (max-width: 599px) {
	.section-1 .frame .title {
		font-size: 2rem;
	}
}

@media (max-width: 449px) {
	.col-sm-4 {
		flex: 0 0 auto;
		width: 100% !important;
	}
	.btn {
		font-size: 2.1rem;
		padding-left: 3.2rem;
		padding-right: 3.2rem;
	}
	header .caution {
		font-size: 1.3rem;
	}
	.hero .cartridge-1,
	.hero .cartridge-2 {
		padding-left: 8px;
		padding-right: 30px;
		margin-right: 10px;
	}
	.hero .cartridge-1 {
		font-size: 1.6rem;
	}
	.hero .cartridge-2 {
		font-size: 1rem;
	}
	.section-1 {
		padding-left: 25px;
		padding-right: 25px;
	}
	.section-1 .frame .title {
		font-size: 1.6rem;
	}
	.section-2-container {
		padding-left: 25px;
		padding-right: 25px;
	}
	.section-2 h2 {
		font-size: 2rem;
	}
	.section-3 {
		padding-bottom: 90px;
	}
	.section-3 .reindeers {
/*		top: -140px;*/
		top: -80px;
	}
	.section-3 .card-container {
		max-width: 240px;
	}
	.section-3 .card-container img {
		padding-left: 0;
	}
	.section-3 .card-container p {
		margin-left: 10px;
	}
	#thanks .thanks {
		padding-bottom: 100px;
	}
}

@media (max-width: 374px) {
	.section-3 .card-container {
		max-width: 200px;
		margin-bottom: 120px;
	}
	.section-3 .card-container p {
		margin-left: 0;
	}
}

.link-card img {
	transition: all .2s ease-in-out;
}

.link-card:hover img {
	transform: scale(1.05);
}