* {
	font-family: 'Poppins';
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: -0.5px;
}

h1 {
	font-size: 2.6rem;
	padding: 0;
	margin-bottom: 2rem;
	color: white;
}

h2 {
	font-size: 1.25rem;
	text-transform: uppercase;
}

h3 {
	font-size: 1.15rem;
	text-transform: uppercase;
}

p {
	font-size: 1rem;
	color: #373737;
	line-height: 1.2em;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 300;
}

a {
	color: #0067ff;
}

a:hover {
	color: #ab0007;
}

section #contact > h2 {
	margin-bottom: 1rem;
}

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

.align-self-center {
	align-self: center!important;
}

.badge {
	display: inline-flex;
	padding: .35em .65em;
	margin-bottom: 1rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	background-color: white;
	vertical-align: baseline;
	border-radius: .25rem;
}

.badge:hover {
	color: #fff;
	background-color: #0397D7;
}
/* -------------------------------------------------------- Animation ------------------------------------------------------------*/
.loader {
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #0397D7;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite;
 /* Safari */
	animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

:root {
	--animate-duration: 1s;
	--animate-delay: 1s;
	--animate-fill-mode: both;
}

.animation {
	animation-duration: var(--animate-duration);
	animation-fill-mode: var(--animate-fill-mode);
	-webkit-animation-duration: var(--animate-duration);
	-webkit-animation-fill-mode: var(--animate-fill-mode);
}

.animation.animation_delay_1s {
	animation-delay: var(--animate-delay);
	-webkit-animation-delay: var(--animate-delay);
}

.animation.animation_delay_500ms {
	animation-delay: 500ms;
	-webkit-animation-delay: 500ms;
}

.animation.animation_infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
/* ====================== [ Animation name for key frame ] ====================== */
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.animation.animation_fadeIn {
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
}

@keyframes pulse {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
}

.animation.animation_pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}
/* -------------------------------------------------------- Layout ------------------------------------------------------------*/
#main-split {
	display: flex;
	flex-direction: column;
	background-color: #f8f9fa;
}

#split-1 {
	background-image: url("../images/bg-split-1.jpg");
	background-size: cover;
}

#split-2 {
	height: 100%;
}

.split-container, .login-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
}

.flex-grow-1 {
	flex-grow: 1;
}

.col-1 {
	width: 8.33%;
}

.col-2 {
	width: 16.66%;
}

.col-3 {
	width: 25%;
}

.col-4 {
	width: 33.33%;
}

.col-5 {
	width: 41.66%;
}

.col-6 {
	width: 50%;
}

.col-7 {
	width: 58.33%;
}

.col-8 {
	width: 66.66%;
}

.col-9 {
	width: 75%;
}

.col-10 {
	width: 83.33%;
}

.col-11 {
	width: 91.66%;
}

.col-12 {
	width: 100%;
}

.col-sm-2 {
	flex: 0 0 auto;
	width: 16.66666667%;
}

.col-sm-10 {
	flex: 0 0 auto;
	width: 83.33333333%;
}
/* -------------------------------------------------------- Header ------------------------------------------------------------*/
.header-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
	height: 80px;
}

.svg-main-logo {
	fill: #fff;
	width: 9rem;
	height: 3.25rem;
}

.svg-tremblant-logo {
	width: 6rem;
	height: 3.25rem;
}

.secondary-header {
	position: sticky;
	top: 0;
	z-index: 99999;
	background-color: white;
	border: 1px solid #E2E2E3;
	-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.secondary-header.filter h2 {
	padding: .25rem;
}

.secondary-header.filter p {
	font-size: 1.10rem;
	padding: .25rem;
	text-align: end;
}

#btn-filter {
	border: 0;
	background: 0 0;
	display: flex;
	align-items: center;
	font-size: 1rem;
	flex-wrap: wrap;
	cursor: pointer;
}

#btn-filter svg {
	width: 30px;
	height: 30px;
	fill: #0397D7;
}

#btn-filter svg:hover, #btn-filter svg.open {
	fill: #ab0007;
}

#filter-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

#filter-content .filter-wrapper {
	display: flex;
	justify-content: center;
	padding: 0 1rem 1rem 1rem;
}

#filter-content .filter-col {
	width: 50%;
	padding: 0.25rem;
}
/* -------------------------------------------------------- Section ------------------------------------------------------------*/
.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1rem;
	align-items: center;
}

.login-panel {
	background-color: #f8f9fa4f; 
	min-width: 375px;
	max-width: 750px;
	margin: 0 auto;
	padding: 3rem;
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
	text-align: center;
}

#countdown-status {
	font-size: 1.35em;
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	color: white;
	text-align: center;
}

#text-titre {
	font-size: 1.35em;
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	color: yellow;
	text-align: center;
}

#lots-container {
	scroll-margin-top: 80px;
	/* height header-container (80px) */
	align-items: stretch;
}

.svg-icon-lot-box {
	width: 25px;
	height: 25px;
	fill: black;
}

#split-1 > div > section .lien-donateur {
	text-decoration: none;
}

#split-1 > div > section .svg-icon-lot {
	width: 40px;
	height: 40px;
	margin: 1rem;
}

#split-1 > div > section p {
	color: #fff;
}

#split-1 > div > section .infos-supp {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: 1px solid #f8f9fa;
	border-bottom: 1px solid #f8f9fa;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin: 1rem 0;
}

#split-1 > div > section .infos-supp .money-container {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	width: 100%;
	margin-top: 1rem;
}

#split-1 > div > section .infos-supp .money-column {
	text-align: center;
	width: 50%;
	padding: 0.25rem;
	border-left: 1px solid #f8f9fa;
	border-right: 1px solid #f8f9fa;
}

#split-1 > div > section .infos-supp .money-column .money-titre {
	padding: 0.25rem;
}

#split-1 > div > section .infos-supp .money-column .money-currency {
	font-size: 1.25rem;
	font-weight: 600;
}

/* -------------------------------------------------------- Footer ------------------------------------------------------------*/
footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 80px;
	padding: 1rem;
}

footer p {
	font-size: 0.75rem!important;
	line-height: 1.2rem;
}

/* -------------------------------------------------------- Form ------------------------------------------------------------*/

.panel {
	background-color: white;
	max-width: 920px;
	width:90vw;
	border: 1px solid #dee2e6;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
	border-radius: 0.3rem;
	padding: 1.5rem;
}


/* -------------------------------------------------------- Form ------------------------------------------------------------*/
label {
	font-size: 1.15em;
	color: #0397D7;
	margin-bottom: 0.5rem;
	display: inline-block;
}
/* ====================== [ filter form (floating) ] ====================== */
.form-floating {
	position: relative;
}

.form-floating>.form-control, .form-floating>.form-select {
	height: calc(3.5rem + 2px);
	line-height: 1.25;
	padding-top: 1.625rem;
	padding-bottom: 0.625rem;
}

.form-select {
	display: block;
	width: 100%;
	padding: .375rem 2.25rem .375rem .75rem;
	-moz-padding-start: calc(0.75rem - 3px);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 16px 12px;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.form-floating > label {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	padding: 1rem .75rem;
	pointer-events: none;
	border: 1px solid transparent;
	transform-origin: 0 0;
	transition: opacity .1s ease-in-out,transform .1s ease-in-out;
	/* opacity: .65;
	*/
	transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
/* ====================== [ Contact form ] ====================== */
section #contact {
	background-color: white;
	max-width: 920px;
	border: 1px solid #dee2e6;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
	border-radius: 0.3rem;
	padding: 1.5rem;
}

.contact-form {
	display: grid;
	gap: 0.75rem;
	width: 100%;
	margin-top: 1.5rem;
}

.form-control {
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.input-group {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

.input-group>.form-control, .input-group>.form-select {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.input-group-text {
	display: flex;
	align-items: center;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	white-space: nowrap;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-radius: .25rem;
}
/* -------------------------------------------------------- Breadcrumb (navigation)------------------------------------------------------------*/
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}

.breadcrumb-item.active {
	color: #6c757d;
}

.breadcrumb-item+.breadcrumb-item {
	padding-left: 1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E") no-repeat 0.25rem, left;
}
/* -------------------------------------------------------- Alert------------------------------------------------------------*/
.alert {
	position: relative;
	padding: 1rem 1rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.alert-success {
	color: #0f5132;
	background-color: #d1e7dd;
	border-color: #badbcc;
}

.alert-warning {
	color: #664d03;
	background-color: #fff3cd;
	border-color: #ffecb5;
}

.alert-danger {
	color: #842029;
	background-color: #f8d7da;
	border-color: #f5c2c7;
}
/* -------------------------------------------------------- Buttons ------------------------------------------------------------*/

.google-button {
	height: 40px;
	border-width: 0;
	background: white;
	color: #737373;
	border-radius: 5px;
	white-space: nowrap;
	box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.05);
	transition-property: background-color, box-shadow;
	transition-duration: 150ms;
	transition-timing-function: ease-in-out;
	padding: 0;
	cursor: pointer;
}

.google-button:focus,.google-button:hover {
	box-shadow: 1px 4px 5px 1px rgba(0,0,0,0.1);
}

.google-button:active {
	background-color: #e5e5e5;
	box-shadow: none;
	transition-duration: 10ms;
}

.google-button__icon {
	display: inline-block;
	vertical-align: middle;
	margin: 8px 0 8px 8px;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
}

.google-button__text {
	display: inline-block;
	vertical-align: middle;
	padding: 0 24px;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Roboto',arial,sans-serif;
}
			
.share-container {
	display: flex;
	padding: 1rem 0.5rem;
}

.share-container button {
	flex-grow: 1;
	margin-right: 0.25rem;
}

.btn-social {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
	border-radius: 0.2rem;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	user-select: none;
	border: 1px solid transparent;
}

.btn-social,
.btn-social:visited,
.btn-social:focus,
.btn-social:hover,
.btn-social:active {
	color: #ffffff;
	text-decoration: none;
	transition: opacity .15s ease-in-out;
}

.btn-social:hover,
.btn-social:active {
	opacity: .75;
	cursor: pointer;
}

.btn-fb {
	background-color: #3b5998;
}

.btn-fb .icon-fb {
	background: url('/assets/images/icons/facebook-icon.svg') no-repeat;
	float: left;
	width: 16px;
	height: 16px;
	margin: 2.5px;
}

.btn-in {
	background-color: #0077b5;
}

.btn-in .icon-in {
	background: url('/assets/images/icons/linkedin-icon.svg') no-repeat;
	float: left;
	width: 16px;
	height: 16px;
	margin: 2.5px;
	margin-right: 3px;
}

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

.btn-small {
	padding: 9px 11px;
}
.btn-medium {
	padding: 12px 15px;
}

.btn-curve {
	background: transparent;
	letter-spacing: 0.1em;
	line-height: 1;
	border: 1px solid #fff;
	border-radius: 0.25rem;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.btn-curve:focus {
	outline: none;
}

.btn-curve:hover {
	outline: none;
}

.btn-curve:hover:after {
	bottom: -30px;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

.btn-curve:hover span {
	color: #1e1e1e;
}

.btn-curve:after {
	content: '';
	position: absolute;
	top: -30px;
	left: -30px;
	right: -30px;
	bottom: 130%;
	background: #fff;
	-webkit-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
	-webkit-transition: all .8s;
	-o-transition: all .8s;
	transition: all .8s;
}

.btn-curve span {
	font-family: Poppins;
	color: white;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.1em;
	text-transform: uppercase;
	position: relative;
	z-index: 2;
	-webkit-transition: all .8s;
	-o-transition: all .8s;
	transition: all .8s;
}

.btn-curve.btn-color {
	background: linear-gradient(to right, #139cdc 0%, #127cd0 100%);
}

.btn-curve.btn-color:after {
	background: #fff;
}

.btn-curve.btn-color span {
	color: #fff;
}

.btn-curve.btn-color:hover span {
	color: #0397D7;
}

.btn-curve.btn-color:focus {
	outline: none;
	border: 1px solid #0397D7;
}

.btn-curve.btn-color:hover {
	outline: none;
	border: 1px solid #0397D7;
}

.btn-explication {
	padding: 0.60rem 0.60rem !important;
	margin: 1rem;
	display: none;
}

.btn-curve.btn-color.refuse {
	cursor: not-allowed;
	opacity: 0.5;
}
/* ====================== [ Scroll Button ] ====================== */
#scrolldown {
	display: flex;
	margin: 1rem;
	justify-content: center;
	height: 80px;
}

.btn-scrolldown {
	--color: white;
	--sizeX: 30px;
	--sizeY: 50px;
	position: relative;
	width: var(--sizeX);
	height: var(--sizeY);
	margin-left: var(sizeX / 2);
	border: calc(var(--sizeX) / 10) solid var(--color);
	border-radius: 50px;
	box-sizing: border-box;
	margin-bottom: 30px;
}

.btn-scrolldown:hover {
	cursor: pointer;
}

.btn-scrolldown::before {
	content: "";
	position: absolute;
	bottom: 30px;
	left: 50%;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: var(--color);
	border-radius: 100%;
	animation: scrolldown-anim 2s infinite;
	box-sizing: border-box;
	box-shadow: 0 -5px 3px 1px #ffffff66;
}

@keyframes scrolldown-anim {
	0% {
		opacity: 0;
		height: 6px;
	}

	40% {
		opacity: 1;
		height: 10px;
	}

	80% {
		transform: translate(0, 20px);
		height: 10px;
		opacity: 0;
	}

	100% {
		height: 3px;
		opacity: 0;
	}
}

.chevrons {
	padding: 6px 0 0 0;
	margin-left: -3px;
	margin-top: 48px;
	width: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.chevrondown {
	position: relative;
	border: solid var(--color);
	border-width: 0 3px 3px 0;
	display: inline-block;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
}

.chevrondown:nth-child(odd) {
	animation: pulse 500ms ease infinite alternate;
}

.chevrondown:nth-child(even) {
	animation: pulse 500ms ease infinite alternate 250ms;
}

@keyframes pulse {
	from {
		opacity: 0;
	}

	to {
		opacity: 0.5;
	}
}
/* ====================== [ Progress-wrap Button ] ====================== */
.progress-wrap {
	position: fixed;
	bottom: 30px;
	right: 30px;
	height: 50px;
	width: 50px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	z-index: 100;
	opacity: 0;
	background-image: url('/assets/images/icons/chevron-up.svg');
	background-repeat: no-repeat;
	background-position: center;
	visibility: hidden;
	-webkit-transform: translateY(20px);
	-ms-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-transition: all 400ms linear;
	-o-transition: all 400ms linear;
	transition: all 400ms linear;
}

.progress-wrap:hover {
	background-image: url('/assets/images/icons/chevron-up-hover.svg');
}

.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

.progress-wrap svg path {
	fill: none;
}

.progress-wrap svg.progress-circle path {
	stroke: #0397D7;
	stroke-width: 4;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 400ms linear;
	-o-transition: all 400ms linear;
	transition: all 400ms linear;
}
/* -------------------------------------------------------- Modal ------------------------------------------------------------*/
.modal {
	display: none;
	position: fixed;
	padding-top: 1rem;
	padding-bottom: 1rem;	
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	/* Fallback color */
	background-color: rgba(0,0,0,0.6);
	transition: opacity .15s linear;
}

.modal-content {
	position: relative;
	background-color: #fff;
	margin: auto;
	padding: 0;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 0.3rem;
	width: 100%;
	max-width: 800px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
}

@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

.modal-header .btn-close {
	padding: .5rem .5rem;
	margin: -.5rem -.5rem -.5rem auto;
}

.btn-close {
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	padding: .25em .25em;
	color: #000;
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
	border: 0;
	border-radius: .25rem;
	opacity: .5;
	cursor: pointer;
}

.btn-close:hover {
	color: #ab0007;
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.modal-header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1rem;
	border-bottom: 1px solid #dee2e6;
}

.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 1rem;
	text-align: justify;
}

.modal-footer {
	padding: 2px 16px;
}
/* -------------------------------------------------------- Modal Images ------------------------------------------------------------*/ 
#imgLot {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

#imgLot:hover {
	opacity: 0.7;
}

.imgModal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.9);
}

#imgModal .modal-content {
	margin: auto;
	display: block;
	max-width: 300px;
}

#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

#imgModal .modal-content, #caption {
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover,.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/* -------------------------------------------------------- Video Responsive ------------------------------------------------------------*/
.video-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}

.video-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

/* -------------------------------------------------------- Countdown ------------------------------------------------------------*/
#countdown {
	display: none;
}

.countdown {
	color: #fff;
	display: flex;
	justify-content: center;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.countdown-colum {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	width: 70px;
}

.countdown .wrapper {
	background-color: #fff;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
	border: 1px solid #dee2e6;
	min-width: 2.5rem;
	min-height: 2.5rem;
	border-radius: .5rem;
	line-height: 1;
}

.countdown-number {
	color: #3c6e03;
	font-size: 1.5rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.countdown-text {
	font-size: 0.85rem;
	padding-top: 5px;
	line-height: 1;
	font-weight: 300;
}

.countdown-separator {
	display: flex;
	align-items: center;
	height: 2.5rem;
}

.countdown-separator span {
	font-size: 1.5rem;
	line-height: 1;
}

#countdownHeading.countdown {
	color: #373737;
	margin: 0;
}

#countdownHeading .countdown-colum {
	width: 35px;
}

#countdownHeading.countdown .wrapper {
	background: none;
	box-shadow: none;
	border: none;
	min-width: 0;
	min-height: 0;
	border-radius: 0;
}

#countdownHeading .countdown-number {
	font-size: 1.2rem;
	color: #3c6e03;
	font-weight: 700;
}

#countdownHeading .countdown-text {
	font-size: 0.85rem;
	padding-top: 5px;
}

#countdownHeading .countdown-separator {
	height: 0.85rem;
}

#countdownHeading .countdown-separator span {
	font-size: 1.2rem;
	line-height: 1;
}

#timer-redirect span {
	color: #ab0007;
}
/* -------------------------------------------------------- isotope (lots) ------------------------------------------------------------*/
#isotope article {
	width: 100%;
	max-width: 600px;
	background-color: white;
	padding: 1rem;
	margin-bottom: 3rem;
	border-radius: 0.3rem;
	border: 1px solid #dee2e6;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

#isotope article:last-child {
	margin-bottom: 0;
}

#isotope article .article-header {
    display: flex;
    align-items: center;	
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

#isotope article .article-header h4 {
    margin-left: auto;
}

#isotope article .article-body {
	display: grid;
	grid-template-columns: 0.8fr 0.4fr 2fr;
	border-top: 1px solid #dee2e6;
	border-bottom: 1px solid #dee2e6;
	align-items: center;
	padding-top: 0.50rem;
	padding-bottom: 0.50rem;
	row-gap: 0.5rem;
	column-gap: 1rem;
}

#isotope article picture {
	grid-row: 1 / 3;
}

/*
.img-fluid {
  max-width: 100%;
  height: auto;
}
*/
.lot-img {
	min-width: 80px;
	border-radius: 0.3rem;
	padding: 0.25rem;
	border: 1px solid #dee2e6;
}

.img-thumbnail{
	width: 150px;
}

#isotope article .article-footer {
	display: flex;
	align-items: center;
	margin-top: 0.5rem;
}

#isotope article .nbrOffres {
	color: #ab0007;
}

#isotope article .gagnant {
	color: #ab0007;
	display: none;
}

/*
.fade {
  opacity: 0;
  transform: translate(0, 100vh);
  transition: all 1s;
}

.fade.visible {
  opacity: 1;
  transform: translate(0, 0);
}
*/

/* -------------------------------------------------------- ADMIN OFFRES ------------------------------------------------------------*/

.table-offres { 
	border-collapse: separate;
    border-spacing: 0 10px;
    margin: 5px 0;
	width: 100%;
	font-size: smaller;
}

.lot-offres th {
    color: #4272d7!important;
}

.table-offres th {
    padding: 0.5em;	
    text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: bold;
    color: white;
}


.lot-offres tbody tr:first-of-type td {
	background-color: #4272d717;
}

.table-offres tbody td {
    border: solid 1px #1113;
    border-style: solid none;
    padding: 0.5em;
	color: gray;
    line-height: 1.4;
    background-color: #f7f7f7;
}
.table-offres tbody td:first-child {
   border-left-style:solid;
   border-top-left-radius:0.5em;
   border-bottom-left-radius:0.5em;
}

.table-offres tbody td:last-child {
   border-right-style:solid;
   border-bottom-right-radius:0.5em;
   border-top-right-radius:0.5em;
}


@media screen and (max-width: 576px) {
 
  .table-offres thead {
	border-collapse: collapse;
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
	font-size: small;	
  }
  
  .table-offres tbody tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 1.5em;
	box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
  }
 
.table-offres tbody tr:last-of-type {
	border: solid 1px #4272d7;
}

.table-offres tbody tr:last-of-type td {
	border: none;
    border-style: none;
}
 
  .table-offres tbody td {
    border: none;
    border-style: none;	  
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  .table-offres td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
}

/* -------------------------------------------------------- Color Splitting ------------------------------------------------------------*/
.splitting {
	--text-weight-min: 100;
	--text-weight-max: 900;
	--text-slant-min: 1;
	--text-slant-max: 12;
	--text-width-min: 75;
	--text-width-max: 100;
	--glow-hue-min: 0;
	--glow-hue-max: 255;
	--glow-size-min: 0;
	--glow-size-max: 15;
	--glow-lightness: 57%;
	--delay: 0;
	--duration: 3s;
	--percent: 0;
}

.char {
	font-stretch: var(--text-width);
	font-style: oblique var(--text-slant);
	font-weight: var(--text-weight);
	animation: wave var(--duration) ease-in-out var(--delay) infinite alternate;
	animation-fill-mode: backwards;
	--percent: calc(var(--char-index) / var(--char-total));
	// --val1: calc(2 * var(--percent) - 1);
	// --val2: calc((var(--val1) * var(--val1)) * -1 + 1);
	--delay: calc(var(--percent) * var(--duration));
	--glow-hue: calc(var(--percent) * 510);
}

@keyframes wave {
	0% {
		font-variation-settings: "wght" var(--text-weight-min),"wdth" var(--text-width-min), "slnt" var(--text-slant-min);
		text-shadow: 0 0 calc(var(--glow-size-min) * 1px)hsla(var(--glow-hue), 100%, var(--glow-lightness), 1);
	}

	50% {
		font-variation-settings: "wght" var(--text-weight-max),"wdth" var(--text-width-max), "slnt" var(--text-slant-max);
		text-shadow: 0 0 calc(var(--glow-size-max) * 1px)hsla(calc(var(--glow-hue) + 255), 100%, var(--glow-lightness), 1);
	}

	100% {
		font-variation-settings: "wght" var(--text-weight-min),"wdth" var(--text-width-min), "slnt" var(--text-slant-min);
		text-shadow: 0 0 calc(var(--glow-size-min) * 1px)hsla(var(--glow-hue), 100%, var(--glow-lightness), 1);
	}
}

.chevron::before {
	border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.70em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.70em;
}

.chevron.right:before {
	left: 0;
	transform: rotate(45deg);
}

.chevron.bottom:before {
	top: 0;
	transform: rotate(135deg);
}

.chevron.left:before {
	left: 0.25em;
	transform: rotate(-135deg);
}
/*----------------------------------------------------
------------- All ------------------------------------
--------------------- Media --------------------------
------------------------------- Queries --------------
-----------------------------------------------------
-------------------MOBILE FIRST----------------------*/
@media only screen and (min-width: 1920px) {
	h1 {
		font-size: 4.6rem!important;
		margin-bottom: 4rem!important;
	}

	h2 {
		font-size: 1.65rem!important;
	}

	h3 {
		font-size: 1.35rem!important;
	}

	p {
		font-size: 1.25rem!important;
		line-height: 1.4em!important;
	}

	.header-container > p {
		font-size: 1.35rem!important;
	}

	#countdown-status {
		font-size: 2rem!important;
	}

	#countdown.countdown {
		margin-top: 3rem!important;
		margin-bottom: 4rem!important;
	}

	#countdown .countdown-colum {
		width: 150px!important;
	}

	#countdown.countdown .wrapper {
		min-width: 6rem!important;
		min-height: 6rem!important;
	}

	#countdown .countdown-number {
		font-size: 4rem!important;
	}

	#countdown .countdown-text {
		font-size: 1.8rem!important;
		padding-top: 15px!important;
	}

	#countdown .countdown-separator {
		height: 6rem!important;
	}

	#countdown .countdown-separator span {
		font-size: 4rem!important;
	}

	#countdownHeading .countdown-text {
		font-size: 1rem;
	}

	#countdownHeading .countdown-separator {
		height: 1rem;
	}

	#btn-filter {
		font-size: 1.25rem!important;
	}

	#btn-filter svg {
		width: 45px!important;
		height: 45px!important;
	}

	.svg-icon-lot-box {
		width: 40px!important;
		height: 40px!important;
	}

	#isotope > article {
		max-width: 750px!important;
		padding: 1.5rem 1.5rem 1rem 1.5rem!important;
	}

	#isotope > article .lot-img {
		min-width: 150px!important;
	}

	.badge {
		font-size: 1.5rem!important;
	}

	#split-1 > div > section .infos-supp .money-column {
		width: 35%!important;
	}

	.content {
		padding: 2rem;
	}

	#imgModal .modal-content {
		max-width: 950px!important;
	}
}

@media only screen and (min-width: 992px) {
	#main-split {
		flex-direction: row;
	}

	#split-1 footer {
		display: none;
	}

	#split-2 {
		height: 100vh;
		overflow-y: auto;
	}

	.split-container {
		width: 50%;
	}

	.panel {
		width:45vw;
	}
	
	#scrolldown {
		display: none;
	}

	#imgModal .modal-content {
		max-width: 750px!important;
	}
}

@media only screen and (min-width: 576px) {
	h1 {
		font-size: 2.8rem;
	}

	h2 {
		font-size: 1.40rem;
	}

	h3 {
		font-size: 1.20rem;
	}

	.svg-main-logo {
		width: 10rem;
	}

	.svg-tremblant-logo {
		width: 7rem;
	}

	.header-container {
		padding: 1rem;
	}

	.header-container > p {
		font-size: 1.20rem;
	}

	#countdown-status {
		font-size: 1.65rem;
	}

	.countdown {
		margin-top: 2rem;
		margin-bottom: 3rem;
	}

	.countdown-colum {
		width: 112.50px;
	}

	.countdown .wrapper {
		min-width: 4.5rem;
		min-height: 4.5rem;
	}

	.countdown-number {
		font-size: 3rem;
	}

	.countdown-text {
		font-size: 1.4rem;
		padding-top: 10px;
	}

	.countdown-separator {
		height: 4.5rem;
	}

	.countdown-separator span {
		font-size: 3rem;
	}

	#btn-filter {
		font-size: 1.20rem;
	}

	#btn-filter svg {
		width: 40px;
		height: 40px;
	}

	.svg-icon-lot-box {
		width: 35px;
		height: 35px;
	}

	#split-1 > div > section .infos-supp {
		flex-direction: row!important;
		padding: 1.5rem;
	}

	#split-1 > div > section .infos-supp .money-column {
		width: 40%;
	}

	#split-1 > div > section .svg-icon-lot {
		width: 50px;
		height: 50px;
	}

	#isotope article {
		padding: 1rem 1rem 0.5rem 1rem;
	}

	#isotope article .article-body {
		padding: 1rem;
	}

	.lot-img {
		min-width: 115px;
	}

	.panel {
		padding: 3rem;
	}
	
	section #contact {
		padding: 3rem;
	}

	.contact-form {
		grid-template-columns: repeat(2,1fr);
	}

	.contact-form > .colspan-2 {
		grid-column: 1 / span 2;
	}

	#imgModal .modal-content {
		max-width: 500px;
	}

	.badge {
		font-size: 1.25em;
	}
}