@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pochaevsk&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Pochaevsk&display=swap');

.roboto-thin
{
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.roboto-light
{
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular 
{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium
{
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold 
{
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black 
{
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-thin-italic 
{
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.roboto-light-italic 
{
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic 
{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium-italic 
{
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold-italic 
{
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic 
{
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
}

.pochaevsk-regular 
{
	font-family: "Pochaevsk", serif;
	font-weight: 400;
	font-style: normal;
}

.covered-by-your-grace-regular {
  font-family: "Covered By Your Grace", serif;
  font-weight: 400;
  font-style: normal;
}

:root {
  color-scheme: only light;
}

html 
{
   scroll-padding-top: 74px;
}

nav,
.big-logo,
.small-logo
{
	transition: all 0.8s;
}

.line-height-11
{
	line-height:1.1!important;
}

img,
.max-w-100
{
	max-width:100%;
}

.dvh-100
{
	height:100dvh;
}

.xs-menu
{
	z-index: -1;
	opacity: 0;
	transition: all 0.5s;
	background-color:#1C1C1B;
	color:white;
}

.xs-menu-open
{
	opacity: 1 !important;
	z-index:9999;
}

.overflow-hidden 
{
	overflow: hidden !important;
}

.taganim
{
	opacity: 0;
	transform: translate(0, 10vh);
	transition: all 1s;
}

.taganim.visible
{
	opacity: 1;
	transform: translate(0, 0);
}

.bg-navbar
{
	background-color:rgba(0,0,0,0.70);
	color:white!important;
}

.bg-navbar .big-logo
{
	opacity:0;
	width:0!important;
}

.bg-navbar .small-logo
{
	opacity:1;
}

.bg-blur
{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.navbar-logo
{
	height:42px;
}

.bg-img
{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.bg-img-video
{
	background-image:url('/imgs/video.jpg');
}

.bg-img-projet-1
{
	background-image:url('/imgs/projet-1.jpg');
}

.bg-img-projet-2
{
	background-image:url('/imgs/projet-2.jpg');
}

.bg-img-projet-3
{
	background-image:url('/imgs/projet-3.jpg');
}

.bg-img-projet-4
{
	background-image:url('/imgs/projet-4.jpg');
}

.bg-img-team-1
{
	background-image:url('/imgs/antoine.webp');
}

.bg-img-team-2
{
	background-image:url('/imgs/corentin.webp');
}

.bg-img-team-3
{
	background-image:url('/imgs/maud.webp');
}

.bg-img-ours
{
	background-image:url('/imgs/ours.jpg');
	background-position:center left;
}

.bg-img-chamois
{
	background-image:url('/imgs/chamois.jpg');
}

.bg-img-aigle
{
	background-image:url('/imgs/aigle.jpg');
}

.bg-img-bouquetin
{
	background-image:url('/imgs/bouquetin.jpg');
}

.bg-img-bisons
{
	background-image:url('/imgs/bisons.jpg');
}

.bg-img-vautour
{
	background-image:url('/imgs/vautour.jpg');
}

.bg-img-ours2
{
	background-image:url('/imgs/ours2.webp');
}

.bg-img-renards
{
	background-image:url('/imgs/renards.webp');
}

.pt-100
{
	padding-top:100%;
}

.pt-50
{
	padding-top:50%;
}

.pt-35
{
	padding-top:35%;
}

.bg-black-video
{
	background: rgb(0,0,0);
	background: -moz-linear-gradient(331deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5998774509803921) 49%);
	background: -webkit-linear-gradient(331deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5998774509803921) 49%);
	background: linear-gradient(331deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5998774509803921) 49%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

.bg-gray-gradient-top
{
	background: rgb(20,23,25);
	background: -moz-linear-gradient(0deg, rgba(20,23,25,1) 0%, rgba(33,37,41,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(20,23,25,1) 0%, rgba(33,37,41,1) 100%);
	background: linear-gradient(0deg, rgba(20,23,25,1) 0%, rgba(33,37,41,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#141719",endColorstr="#212529",GradientType=1);
}

.bg-gray-gradient-bottom
{
	background: rgb(20,23,25);
	background: -moz-linear-gradient(180deg, rgba(20,23,25,1) 0%, rgba(33,37,41,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(20,23,25,1) 0%, rgba(33,37,41,1) 100%);
	background: linear-gradient(180deg, rgba(20,23,25,1) 0%, rgba(33,37,41,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#141719",endColorstr="#212529",GradientType=1);
}

.bg-img-shadowl
{
	background-image:url('/imgs/bottom-left-shadow.png');
}

.bg-img-shadowr
{
	background-image:url('/imgs/bottom-right-shadow.png');
}

.bg-img-shadowtr
{
	background-image:url('/imgs/top-right-shadow.png');
}

.bg-img-shadowtl
{
	background-image:url('/imgs/bottom-top-left-shadow.png');
}

.scroll-container
{
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-height: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-container::-webkit-scrollbar 
{
	display: none;
}

.vh-75
{
	height:75vh;
}

.vw-75
{
	width:75vw;
}

.feature-card
{
    transition: transform .3s cubic-bezier(0,0,0.5,1);
}

.border-radius-card
{
	border-radius:28px;
}

.link-bi
{
	text-decoration:none;
	opacity:0.65!important;
	transition:all 0.5s ease-out allow-discrete;
}

.link-bi:hover
{
	opacity:1!important;
}

.h-80px
{
	height:80px;
}

.w-70
{
	width:70%;
}

.icon-link .bi
{
	margin-left:1rem;
	margin-top:-0.8rem;
}

.white-space-normal
{
	white-space:normal;
}

.gallery > div:first-child
{
	margin-left:0.75rem!important;
}

.gallery > div:last-child
{
	margin-right:0.75rem!important;
}

.margin-top-createur
{
	margin-top:-22%;
}

.h-120px
{
	height:120px;
}

@media (max-width: 768px) 
{
	.vh-50-xs
	{
		height: 50vh !important;
	}
	
	.vh-33-xs
	{
		height: 33vh !important;
	}
	
	.big-logo
	{
		opacity:0;
	}
	
	.bg-gray-gradient-top
	{
		height:80px;
	}

	.bg-gray-gradient-bottom
	{
		height:80px;
	}
}

@media (min-width: 576px) 
{
	.gallery > div:first-child
	{
		margin-left:calc((100% - 540px) / 2)!important;
	}
	
	.gallery > div:last-child
	{
		margin-right:calc((100% - 540px) / 2)!important;
	}
}

@media (min-width: 768px) 
{
	.gallery > div:first-child
	{
		margin-left:calc((100% - 720px) / 2)!important;
	}
	
	.gallery > div:last-child
	{
		margin-right:calc((100% - 720px) / 2)!important;
	}
	
	.w-md-75
	{
		width:75%;
	}
	
	.vh-75-md
	{
		height: 75vh !important;
	}
	
	.w-md-50
	{
		width:50%;
	}
	
	.text-end-md
	{
		text-align:right!important;
	}
	
	.small-logo
	{
		opacity:0;
	}
	
	.bg-gray-gradient-top
	{
		height:140px;
	}

	.bg-gray-gradient-bottom
	{
		height:140px;
	}
}

@media (min-width: 992px) 
{
	.gallery > div:first-child
	{
		margin-left:calc((100% - 960px) / 2)!important;
	}
	
	.gallery > div:last-child
	{
		margin-right:calc((100% - 960px) / 2)!important;
	}
}

@media (min-width: 1200px) 
{
	.gallery > div:first-child
	{
		margin-left:calc((100% - 1140px) / 2)!important;
	}
	
	.gallery > div:last-child
	{
		margin-right:calc((100% - 1140px) / 2)!important;
	}
}

@media (min-width: 1400px) 
{
	.gallery > div:first-child
	{
		margin-left:calc((100% - 1320px) / 2)!important;
	}
	
	.gallery > div:last-child
	{
		margin-right:calc((100% - 1320px) / 2)!important;
	}
}