@font-face {
	font-family: 'montserratlight';
	src: url('../fonts/montserrat-light.woff2') format('woff2'), url('../fonts/montserrat-light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'montserratregular';
	src: url('../fonts/montserrat-regular.woff2') format('woff2'), url('../fonts/montserrat-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'montserratbold';
	src: url('../fonts/montserrat-bold.woff2') format('woff2'), url('../fonts/montserrat-bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'montserratmedium';
	src: url('../fonts/montserrat-medium-webfont.woff2') format('woff2'), url('../fonts/montserrat-medium-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
/* =============================================================================
   My CSS
   ========================================================================== */
/* ---- base ---- */
html {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html, body {
	width: 100%;
	height: 100%;
	background: #fff;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(226, 234, 231, 1) 100%) no-repeat;
	font-family: 'montserratmedium';
	overflow: hidden;
}
/* ---- UCLouvain ---- */
.navbar {
	padding: 1rem;
}
main {
	position: relative;
	padding-top: 0px;
}
.btn-primary, .disabled {
	background-color: #fff !important;
	border-color: #bdccd4 !important;
	color: #bdccd4 !important;
	opacity: 1 !important;
}
.btn-secondary {
	background-color: #bdccd4;
	border-color: #fff;
	color: #fff;
}
.btn-ucl {
	border-width: 1px;
	border-radius: 99em;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	transition: all 0.5s ease-out;
}
.btn:focus {
	outline: none;
	box-shadow: none;
}
button.submit {}

h1 {
	color: #bdccd4;
	text-align: center;
	text-transform: uppercase;
	font-family: 'montserratbold';
}

.modal-header {
	display: block;
}

.modal h4, .modal button, .modal textarea, .modal input, .modal label, .modal p {
	color: #749ba8;
}

.close {
	font-size: 2.2rem;
}

.div-nuages {
	position: absolute;
	height: 100%;
	width: 100%;
	background: no-repeat center/100% url("../../assets/img/uclouvain-arbre-nuages.png");
	opacity: 0.5;
}


.image-container {
	position: relative;
	width: 100%;
	height: auto; /* Ajuste la hauteur de l'image par rapport à la fenêtre */
	display: flex;
	justify-content: center; /* Centre horizontalement */
	align-items: flex-start;
	width: 100%; /* Assurez-vous que le conteneur occupe toute la largeur */
}

.img-arbre, .img-tags {
	position: absolute;
	top: 0;
	left: auto;
	object-fit: contain;
	max-height: 90vh; /* Ajuste la hauteur des images */
	width: auto; /* Garder les proportions */
	max-width: 100%;
}

.div-voeux {
	position: absolute;
	width: 100%;
	height: 100%
	max-height: 90vh; /* Ajuste la hauteur des images */
	width: auto; /* Garder les proportions */
	z-index: 10;
		
}

.btn-voeux {
}

/* .img-arbre.loaded, .img-tags.loaded {
    transform: scale(1); /* Retour à la taille normale */
/*    opacity: 1; /* Complètement visible */
/*transform: translateY(0); /* Revient à sa position normale */
/* } */

/* Sticky footer styles
-------------------------------------------------- */
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: auto; /* Set the fixed height of the footer here */
	line-height: auto; /* Vertically center the text there */
	padding: 1rem;
}
.footer .container-fluid {
	display: flex;
	align-items: center; /* Centre verticalement les enfants */
	justify-content: space-between; /* Sépare les éléments horizontalement */
}

.uclouvain-logo {
	max-height: 60px;
	max-width: 50%;
}

p.legal {
	margin: 0;
}

.legal a {
	color: #bdccd4;
	transition: all 0.5s ease-out;
}

.legal a:hover {
	color: #749ba8;
	text-decoration: none;
}

/* Responsive
-------------------------------------------------- */
@media (max-width: 575.98px) {
	nav {
		height: 60px;
	}

}
@media (max-width: 767.98px) {
.btn-voeux {
top:;
}

}
@media (max-width: 991.98px) {
.btn-voeux {
top: ;
}

}
@media (max-width: 1199.98px) {
	...
}
@media (max-width: 1399.98px) {
	...
}