@import url('https://fonts.cdnfonts.com/css/catamaran');



html {

	scroll-behavior: smooth !important;

	max-width: 100%;

    overflow-x: hidden;

}



body{

	scroll-behavior: smooth !important;

	font-family: 'Catamaran', sans-serif;

	margin: 0px;

	color: #E7E7E7;

	background-color: rgb(13, 17, 20);

	max-width: 100%;

}



header{

	z-index: 1;

	position: fixed;

	height: 64px;

	width: 100%;

	display: flex;

	justify-content: space-between;

	background: linear-gradient(90deg, rgba(27, 93, 60, 0.3) 0%, rgba(8, 25, 18, 0.3) 75%, rgba(1, 33, 15, 0.6) 100%);

	backdrop-filter: blur(12px) opacity(95%) hue-rotate(15deg);

	-webkit-backdrop-filter: blur(12px) opacity(95%) hue-rotate(15deg);

}



header div{

	display: flex;

	justify-content: flex-start;

}



a p{

	margin: 0px;

}



main{

	height: initial;

	padding-bottom: 5vw;

}



footer{

	background-image: url("./img/footer_lines.png");

	background-position: center top;

	background-size: 100%;

	background-repeat: no-repeat;

}



footer .title{

	padding-top: 12vw;

}



#nav_container{

	display: flex;

	justify-content: space-between;

	list-style-type: none;

	margin: 0;

	padding: 0;

}



#nav_container li{

	display: flex;

	flex-direction: column;

	flex-wrap: nowrap;

	margin: 0px 16px;

}



#nav_container li a{

	margin-top: 8px;

	display: flex;

	color: #E7E7E7;

	text-decoration: none;

	white-space: nowrap;

	font-size: 28px;

}



@media all and (orientation: landscape){



	#nav_container li div{

		background-color: #FDFDFD;

		height: 2px;

		width: 0%;

		margin-left: 50%;

		transition: width 0.2s ease-in-out, margin-left 0.2s ease-in-out;

	}



	#nav_container li:hover > div{

		margin-left: 0%;

		width: 100%;

		visibility: visible;

	}



	#burger{

		visibility: hidden;

		display: none;

	}

}



#nav_container li:active > a img:nth-child(1){

	padding-top: 5px;

}



#nav_container li a img{

	height: 32px;

	padding-top: 7px;

	padding-right: 6px;

}



#nav_container li h1{

	z-index: -1;

	margin-left: 40px;

	margin-top: 12px;

	font-size: 28px;

	white-space: nowrap;

	position: absolute;

	font-weight: 400;

	-webkit-text-fill-color: rgba(0, 0, 0, 0.6);

	filter: blur(2px);

}



#main_logo{

	padding-left: 4px;

	height: 64px;

}



#main_logo:hover{

	content: url("./img/lg_logo_sel.png");

}



#main_logo:active{

	content: url("./img/lg_logo_act.png");

}



#page{

	background-image: url("./img/background_lines.jpg");

	background-size: 100%;

	background-repeat: no-repeat;

}



#colorful_zone{

	display: flex;

	justify-content: space-evenly;

	padding-top: 14vw;

	padding-bottom: 30vw;

}



#lerog_logo_container{

	height: 16vw;

}



#lerog_logo{

	height:inherit;

	margin: 3vw 5vw 0vw 5vw;

}



#welcome_text{

	z-index: 0;

	height:inherit;

	margin: 3.4vw 6vw 0vw 0.2vw;

	font-size: 1.75vw;

	font-weight: 400;

	background: rgba(204, 229, 214, 0.2);

	box-shadow: 0 1vw 4vw 0.14vw rgba(48, 83, 63, 0.5);

	backdrop-filter: blur(0.6vw) saturate(110%);

	-webkit-backdrop-filter: blur(0.6vw) saturate(110%);

	border-radius: 1vw;

	border: 0.12vw solid rgba(255, 255, 255, 0.18);

}



#welcome_text{

	background-attachment: scroll;

}



#welcome_text p{

	text-align: center;

	margin: 1vw 1.2vw;

}



#ctc{

	margin: 3vw 0vw 7vw 6vw;

	display: flex;

	justify-content: flex-start;

}



#ctc div{

	margin: 0vw 2vw;

}



#ctc div h2{

	margin-bottom: 0px;

	font-size: 16px;

	font-weight: 600;

}



#ctc div a{

	text-decoration: none;

	font-size: 16px;

	font-weight: 500;

	background-clip: text;

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

}



#ctc1{background: linear-gradient(to right, #9FDB45 0%, #95D746 100%);}

#ctc2{background: linear-gradient(to right, #95D746 0%, #85D047 100%);}

#ctc3{background: linear-gradient(to right, #85D047 0%, #77CB48 100%);}

#ctc4{background: linear-gradient(to right, #77CB48 0%, #69C44B 100%);}

#ctc5{background: linear-gradient(to right, #69C44B 0%, #5ABF4B 100%);}



#ctc1:hover{

	background: linear-gradient(to top, #4487eb 0%, #5ea9ff 90%);

	background-clip: text;

	-webkit-background-clip: text;

}



#ctc2:hover{

	background: linear-gradient(to top, #404EED 0%, #6673ff 70%);

	background-clip: text;

	-webkit-background-clip: text;

}



#ctc3:hover{

	background: linear-gradient(to top, #bb1116 0%, #E52D27 70%);

	background-clip: text;

	-webkit-background-clip: text;

}



#ctc4:hover{

	background: linear-gradient(to top, #00ACED 0%, #1DCAFF 70%);

	background-clip: text;

	-webkit-background-clip: text;

}



#ctc5:hover{

	background: linear-gradient(to top, #9230aa 0%, #b943d1 70%);

	background-clip: text;

	-webkit-background-clip: text;

}



#info{

	display: flex;

	justify-content: space-between;

	padding: 2px 10px;

	background-color: #151B24;

}



#info a, #info div{

	font-size: 18px;

	color: #566364;

}



#info a:hover{

	background: linear-gradient(to bottom, #CCFFFA 0%, #5EC9FF 90%);

	background-clip: text;

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

}



.shadow{

	z-index: -1;

	color: red;

	margin-top: 4px;

	position: absolute;

}



.nav_text a p{

	background: linear-gradient(to bottom, #FFFFFF 0%, #C9CAC9 100%);

	background-clip: text;

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

}



.glass_text{

	font-weight: 300;

	text-shadow: 0.1vw 0.1vw 0.3vw rgba(0, 0, 0, 0.3);

}



.fr_flag:hover{

	content: url("./img/lang/fr_flag_sel.png");

}



.fr_flag:active{

	content: url("./img/lang/fr_flag_act.png");

}



.en_flag:hover{

	content: url("./img/lang/en_flag_sel.png");

}



.en_flag:active{

	content: url("./img/lang/en_flag_act.png");

}



.es_flag:hover{

	content: url("./img/lang/es_flag_sel.png");

}



.es_flag:active{

	content: url("./img/lang/es_flag_act.png");

}



.title{

	display: flex;

	margin-left: 8vw;

	padding-top: 96px;

}



.title img{

	margin: 8px 8px 0px 0px;

	height: 32px;

}



.title h1{

	margin: 0;

	font-weight: 400;

}



.content{

	margin-left: 10vw;

}



.content a{

	text-decoration: none;

	font-weight: 300;

	color: #9fd9ff;

}



.content a:hover{

	text-decoration: underline;

	color: #4eafe7;

}



.content h2{

	font-size: 26px;

	font-weight: 300;

	margin-bottom: 4px;

	color: azure;

}



.content p{

	font-size: 20px;

	font-weight: 200;

	margin-bottom: 5px;

	margin-top: 0px;

	color: #E1E1E1;

}



.content_line{

	display: flex;

	flex-direction: row;

	justify-content: flex-start;

}



.text_paragraph{

	width: 40vw;

	margin: 4vw 0vw 2vw 0vw;

}



.reg_content_img, .wide_content_img, .thin_content_img{

	height: fit-content;

	width: 34vw;

	margin: 3vw;

}



.left_correction{

	margin: 3vw 6vw 3vw 0vw;

}



@media screen and (max-width: 1134px){

	header{

		height: 48px;

	}

	

	#nav_container li{

		margin: 0px 12px;

	}

	

	#nav_container li a{

		margin-top: 6px;

		font-size: 21px;

	}

	

	#nav_container li div{

		height: 2px;

	}

	

	#nav_container li:active > a img:nth-child(1){

		padding-top: 3px;

	}

	

	#nav_container li a img{

		height: 24px;

		padding-top: 5px;

		padding-right: 4px;

	}

	

	#nav_container li h1{

		margin-left: 30px;

		margin-top: 9px;

		font-size: 21px;

	}

	

	#main_logo{

		padding-left: 3px;

		height: 48px;

	}



	#ctc div h2, #ctc div a{

		font-size: 1.6vw;

	}



	#legal.fadable_text, #madeby.fadable_text{

		font-size: 16px;

	}



	.fr_flag, .en_flag, .es_flag{

		height: 48px;

	}



	.title img{

		margin: 7px 6px 0px 0px;

		height: 24px;

	}



	.title h1{

		font-size: 25px;

	}



	.title{

		padding-top: 72px;

	}



	.content h2{

		font-size: 22px;

	}

	

	.content p{

		font-size: 16px;

	}

}



@media screen and (max-width: 852px){

	header{

		height: 32px;

	}

	

	#nav_container li{

		margin: 0px 8px;

	}

	

	#nav_container li a{

		margin-top: 4px;

		font-size: 14px;

	}

	

	#nav_container li div{

		height: 1px;

	}

	

	#nav_container li:active > a img:nth-child(1){

		padding-top: 2px;

	}

	

	#nav_container li a img{

		height: 16px;

		padding-top: 4px;

		padding-right: 3px;

	}

	

	#nav_container li h1{

		margin-left: 20px;

		margin-top: 6px;

		font-size: 14px;

	}

	

	#main_logo{

		padding-left: 2px;

		height: 32px;

	}



	#ctc div h2, #ctc div a{

		font-size: 1.8vw;

	}



	#legal.fadable_text, #madeby.fadable_text{

		font-size: 14px;

	}



	.fr_flag, .en_flag, .es_flag{

		height: 32px;

	}



	.title img{

		margin: 7.5px 4px 0px 0px;

		height: 16px;

	}



	.title h1{

		font-size: 20px;

	}



	.title{

		padding-top: 48px;

	}



	.content h2{

		font-size: 16px;

	}

	

	.content p{

		font-size: 12px;

	}

}



@media all and (orientation: portrait){



	#header{

		visibility: visible;

		display: block;

		transition: left 0.14s ease-in-out;

		left: 100%;

		z-index: 1;

		position: fixed;

		height: 100%;

		width: 100%;

		justify-content: space-around;

		background: linear-gradient(rgba(33, 54, 48, 0.2) 0%, rgba(53, 53, 53, 0.5) 100%);

		backdrop-filter: blur(10px) opacity(95%) sepia(80%) hue-rotate(-60deg) brightness(60%) saturate(65%) contrast(85%);

		-webkit-backdrop-filter: blur(10px) opacity(95%) sepia(80%) hue-rotate(-60deg) brightness(60%) saturate(65%) contrast(85%);

	}

	

	#header div:nth-child(1){

		display: block;

		justify-content: flex-start;

	}



	#header div:last-child{

		position: absolute;

		left: 50%;

		bottom: 0px;

		transform: translate(-50%, -50%);

		display: flex;

		justify-content: space-around;

	}



	footer{

		background-size: 160%;

		padding-top: 8vw;

	}



	a p{

		margin: 0px;

	}

	

	main{

		height: initial;

		padding-bottom: 7vw;

	}



	main:first-child{

		z-index: 2;

	}

	

	footer .title{

		padding-top: 12vw;

	}

	

	#nav_container{

		display: block;

		justify-content: space-between;

		list-style-type: none;

		margin: 0;

		padding: 0;

	}

	

	#nav_container li{

		display: flex;

		flex-direction: row;

		flex-wrap: nowrap;

		margin: 3vh 0px;

	}

	

	#nav_container li a{

		display: flex;

		color: #E7E7E7;

		text-decoration: none;

		white-space: nowrap;

		font-size: 28px;

	}

	

	#nav_container li div{

		background-color: #FDFDFD;

		height: 0px;

		width: 2px;

		margin-top: 27px;

		margin-right: 10px;

		transition: height 0.2s ease-in-out, margin-top 0.2s ease-in-out;

	}

	

	#nav_container li:hover > div{

		height: 45px;

		margin-top: 5px;

		visibility: visible;

	}

	

	#nav_container li:active > a img:nth-child(1){

		padding-top: 5px;

		padding-left: 10px;

	}

	

	#nav_container li a img{

		height: 32px;

		padding-top: 7px;

		padding-left: 10px;

		padding-right: 20px;

	}

	

	#nav_container li h1{

		z-index: -1;

		margin-left: 76px;

		margin-top: 6px;

		font-size: 28px;

		white-space: nowrap;

		position: absolute;

		font-weight: 400;

		-webkit-text-fill-color: rgba(0, 0, 0, 0.6);

		filter: blur(2px);

	}

	

	#main_logo{

		padding-top: 2px;

		padding-left: 4px;

		height: 64px;

	}

	

	#main_logo:hover{

		content: url("./img/lg_logo_sel.png");

	}

	

	#main_logo:active{

		content: url("./img/lg_logo_act.png");

	}



	#burger{

		z-index: 2;

		position: fixed;

		height: 64px;

		width: 64px;

		top: 0px;

		right: 0px;

		padding-right: 4px;

		padding-top: 4px;

	}



	#burger img{

		height: 64px;

		width: 64px;

	}



	#page{

		background-size: 184%;

		background-repeat: no-repeat;

	}



	#colorful_zone{

		flex-direction: column;

		align-items: center;

	}



	#lerog_logo_container{

		height: 30vw;

		margin-bottom: 8vw;

	}

	

	#lerog_logo{

		height:inherit;

		margin: 0px;

		padding: 0px;

	}

	

	#welcome_text{

		font-size: 3.8vw;

		margin: 0px;

		padding: 0px;

		box-shadow: 0 1.76vw 4vw 1.8vw rgba(48, 83, 63, 0.28);

		background: rgba(154, 169, 161, 0.3);

		backdrop-filter: blur(1.4vw) saturate(110%);

		-webkit-backdrop-filter: blur(1.4vw) saturate(110%);

		border-radius: 2.5vw;

		border: 0.3vw solid rgba(255, 255, 255, 0.2);

	}



	#welcome1, #welcome2{

		padding: 0vw 1vw 0vw 1vw;

	}



	#ctc div h2, #ctc div a{

		font-size: 2.7vw;

	}



	.fr_flag, .en_flag, .es_flag{

		height: 20vw;

	}



	.glass_text{

		text-shadow:

			0.3vw 0.3vw 1.5vw rgba(0, 0, 0, 0.4);

	}



	.title img{

		margin: 1.8vw 2vw 0vw 0vw;

		height: 6vw;

	}



	.title h1{

		font-size: 6vw;

	}



	.content{

		margin: 0vw 5vw 0vw 8vw;

	}



	.content h2{

		font-size: 4.6vw;

		font-weight: 400;

	}



	.content p{

		font-size: 4vw;

		font-weight: 300;

	}



	.content_line{

		display: flex;

		flex-direction: column;

		justify-content: flex-start;

	}



	.text_paragraph{

		width: auto;

	}

	

	.reg_content_img, .wide_content_img, .thin_content_img{

		height: fit-content;

		width: 78vw;

		margin: 3vw;

	}

	

	.left_correction{

		margin: 3vw;

	}



	@media screen and (max-width: 360px){

		#nav_container li a {

			font-size: 20px;

		}



		#nav_container li h1{

			margin-left: 72px;

			font-size: 20px;

		}



		#nav_container li:active > a img:nth-child(1){

			padding-top: 0px;

		}

		

		#nav_container li a img{

			padding-top: 2px;

			padding-right: 18px;

		}



		#nav_container li div{

			margin-top: 8px;

		}



		#nav_container li:hover > div{

			height: 30px;

		}

	}



	@media screen and (min-width: 470px){

		.fr_flag, .en_flag, .es_flag{

			height: 94px;

		}

	}

}



/* Gestion de cas : la page est chargée avec firefox */

@-moz-document url-prefix() {

	header{

		background-image: url("./img/moz/nav_bg.png");

		background-position: center;

		background-size: cover;

		background-repeat: no-repeat;

	}



	#welcome_text{

		background-image: url("./img/moz/glass_bg_landscape.png");

		background-position: center;

		background-size: cover;

		background-repeat: no-repeat;

	}



	@media all and (orientation: portrait){

		#welcome_text{

			background-image: url("./img/moz/glass_bg_portrait.png");

			background-position: center;

			background-size: cover;

			background-repeat: no-repeat;

		}



		#header{

			background-image: url("./img/moz/portrait_menu_bg.png");

			background-position: center;

			background-size: cover;

			background-repeat: no-repeat;

		}

	}

}