* {
	scroll-behavior:smooth;
}

@font-face {
	font-family: 'eras';
	src: url('font/Eras.otf');
}

@font-face {
	font-family: 'Roboto';
	src: url('font/Roboto-Light.ttf');
}

body {
	background-color: #626262;
	background-size:100%;
	margin:0;
	z-index:1;
}

body a {
	text-decoration:none;
}

#header {
	background-color: rgba(223,223,223,.9);
	border-radius:0 0 33px 33px;
	position:fixed;
	z-index:10000;
	left:0;
	transition:1s;
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content: space-around;
	align-items:center;
}

.headerinvisi {
	top:-200px;
}

.navinvisi {
	top:-200px;
	display:none;
}

.navvisi {
	top:3%;
	display:block;
}

#navmobile {
	display:none;
}

.headervisi {
	top:0;
}

#lg {
	display: flex;
	flex-direction: column;
	align-items: center;
	width:11%;
}

#logo {
	width : 100%;
	padding:20px;
}

.imgburg #navmobile {
	display:none;
}

#fondaccueil {
	z-index:2;
	background-image:  url("img/rayoneglise.png");
	background-size:100%;
	background-repeat: no-repeat;
	height: 0;
    padding-bottom: 56%;
}

#fondaccueil section {
    display: flex;
    padding-top: 15%;
	flex-direction:column;
	align-items:center;
}

#fondaccueil section a {
	display: flex;
    justify-content: center;
}

#flechacc {
	margin: 30px calc(50% - 25px);
}

#flecheacc a {
	margin-top:35%;
}

#lgacc {
	width:35%
}

#lgacc img {
	width: 100%;
    background-color: rgba(223,223,223,0.8);
    padding: 8%;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bpnav {
	margin:5px 15px;
	padding:10px 25px;
	background-color:#495057;
	border-radius:20px;
	transition:0.25s;
	color:white;
	font-family: 'eras';
}

.bpnav:hover, .bpnav:active {
	margin:0 10px;
	padding:15px 30px;
	background-color:#A0A8B0;
	transition:0.25s;
	cursor:pointer;
}

.bplang {
	display: flex;
    justify-content: flex-end;
    width: 2%;
	position: absolute;
    top: 5%;
    right: 1%;
	font-family: 'eras';
	margin:5px;
	padding:5px 15px;
	background-color:#495057;
	border-radius:20px;
	transition:0.25s;
	color:white;
}

.bplang:hover, .bplang:active {
	margin:0;
	padding:10px 20px;
	background-color:#A0A8B0;
	transition:0.25s;
	cursor:pointer;
}

.bplang img {
	width:100%;
}

header nav ul {
	list-style:none;
	display:flex;
	flex-direction:row;
	justify-content: space-around;
}

header nav ul li a {
	text-decoration:none;
	color:white;
}

main p:not(#file-error-message)  {
	text-align:justify;
	font-family: 'Roboto';
	font-size:1.3rem;
	color:#ffffff;
}

main h1 {
    font-size: 3rem;
	color:#ffffff;
    margin: 100px;
	margin-top:200px;
    padding: 10px;
	font-family: 'eras';
	display:flex;
	justify-content:center;
	width:75%;
	border-bottom:solid 2px #7FA9C6;
}

#index h2 {
    font-size: 2rem;
	color:#ffffff;
    margin: 25px;
    padding: 10px;
	font-family: 'eras';
	display:flex;
	justify-content:center;
	width:500px;
	border-bottom:solid 2px #7FA9C6;
}

.invisible {
    opacity: 0;
}

.visible {
    opacity: 1;
    transition: opacity 1s ease;
}


#presrap {
	display:flex;
	flex-direction:column;
	align-items:center;
	background-color: #626262;
	padding-top:7%;
}

#presrap div {
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
}

#presrap div article a {
	text-decoration:none;
	font-size:1.25rem;
}

#moi {
	margin-top:100px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
}

#moi article {
	padding:0 14% 0 3%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

#moi img {
	width:25%;
	margin:0 100px 0 15%;
}

.logi {
	display:flex;
	justify-content:center;
	justify-content:space-around;
	flex-direction:row;
	flex-wrap: wrap;
	
	transition: 1s;
}

#logiciel {
	display:flex;
	flex-direction:column;
	align-items:center;
}

.imglg {
	width:33%;
}

.infologi {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 400px;
    margin: 40px 0%;
    background-color: transparent;
    transition: background-color 0.5s ease;
}

.nomlogi {
	color:#ffffff;
	font-family: 'eras';
	font-size:1.2rem;
	font-weight:900;
}

iframe {
	border: none;
    min-width: 100%;
    height: 799px;
}

#rdv {
	width: 100%;
}



.fleche {
	width:50px;
    margin:30px calc(50% - 25px);
	transition:500ms;
}

.fleche:hover {
	width:70px;
    margin:20px calc(50% - 35px);
	transition:500ms;
}

.lightbox {
	display: none; 
	position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.8); 
    justify-content: center; 
    align-items: center;
    z-index: 1000;
}
  
.content { 
	display:flex;
	justify-content:center;
	align-items:center;
	margin: 0 16%;
}
  
.imgprlightbox, .vidprlightbox  { 
	width:100%;
}
  
.lightbox .close {
    cursor: pointer; 
	width:5%;
	position:fixed;
	top:10%;
	right:3%;
	transform:rotate(45deg);
}

.lightbox .prev {
    cursor: pointer; 
	width:5%;
	position:fixed;
	left:3%;
	transform:rotate(90deg);
	padding:3%;
}

.lightbox .next { 
    cursor: pointer; 
	width:5%;
	position:fixed;
	right:3%;
	transform:rotate(270deg);
	padding:3%;
}

.lightbox .close img, .lightbox .prev img, .lightbox .next img {
	width:100%;
}


.projet {
	display:flex;
	justify-content:center;
	flex-direction:column;
	align-items:center;
}

.prespr {
	margin:0% 20% 8% 20%;
}

.projet h2 {
	text-align:center;
	color:#ffffff;
	font-family: 'eras';
	font-size:2rem;
	width:500px;
	margin: 0px 0px 100px 0px;
	border-bottom:solid 2px #7FA9C6;
}

.projet section {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
}

.space {
	width:800px;
}

.group-preview {
	margin:3%;
}

.group-preview img {
	width:100%;
	border-radius:50px;
}

.group-preview :hover, .group-preview :active {
	cursor:pointer;
	transition:all 0.5s ease;
}

.group-preview figure {
	position:relative;
	margin:0;
}

.group-preview figcaption {
	position: absolute;
    top: 0px;
    left: 0px;
	background-color: rgba(223,223,223,0.8);
    padding: 28% 0 0 0;
    width: 100%;
    height: 50%;
    text-align: center;	
	opacity:0%;
	transition:0.5s ease;
	border-radius:50px;
}

.group-preview :hover figcaption {
	opacity:100%;
	transition:all 0.5s ease;
}

.group-preview figcaption span {
	font-size:2.5rem;
	font-family: 'eras';
}




.projet h3 {
	margin-top:200px;
	color:#ffffff;
	font-family: 'eras';
	display:flex;
	justify-content:center;
	font-size:2rem;
	width:500px;
	border-bottom:solid 2px #7FA9C6;
}



.bpa {
	margin:5px 50px 5px 50px;
	padding:15px;
	background-color:#495057;
	border-radius:20px;
	transition:0.25s;
	color:#DCDFE1;
	font-family: 'eras';
}

.bpa:hover, .bpa:active {
	margin:0 45px 0 45px;
	padding:20px;
	color:#495057;
	background-color:#DCDFE1;
	transition:0.25s;
	cursor:pointer;
}

.bptxt{
	color:#7FA9C6;	
	transition:0.5s;
}

.bptxt:hover, .bptxt:active {
	color:#7fc6ba;
}

#demoreal {
	display:flex;
	flex-direction:column;
	align-items:center;
}

#demoreal video {
	width:70%;
	height:700%;
	margin:10px;
}

#demoreal h4 {
	color:white;
	font-family: 'eras';
	font-size:2rem;
	display:flex;
	justify-content:center;
	margin:80px 0 60px 0;
	width:30%;
	border-bottom:solid 2px #7FA9C6;
}

.projet h4{
	color:white;
	font-family: 'eras';
	font-size:1.2rem;
	display:flex;
	justify-content:center;
	margin:40px 37%;
	border-bottom:solid 2px #7FA9C6;
}




footer {
	background-color: rgba(223,223,223,.9);
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	justify-content: space-between;
}

footer a {
	text-decoration:none;
	margin-left:50px;
}

footer a p {
	margin:15px;
    width: 200px;
    display: flex;
    justify-content: center;
	font-size:1.2rem;
}

.bp {
	margin:5px 50px 5px 50px;
	padding:10px;
	background-color:#495057;
	border-radius:20px;
	transition:0.25s;
	color:white;
	font-family: 'eras';
}

.bp:hover, .bp:active {
	margin:0 45px 0 45px;
	padding:15px;
	background-color:#79828A;
	transition:0.25s;
	cursor:pointer;
}

footer img {
	width:50px;
	margin:10px;
}

footer h1 {
	margin:5px;
    font-size: 2rem;
    padding: 10px;
	font-family: 'eras';
	display:flex;
	justify-content:center;
	width:300px;
	border-bottom:solid 2px #7FA9C6;
	color:#495057;
	transition: 1s;
}

footer h1:hover, footer h1:active {
	width:500px;
	color:#79828A;
	transition: 1s;
	margin:5px 0;
	cursor:pointer;
}

footer div {
	margin:1% 3%;
}

#espacefoot {
	width:15%;
	margin:5px 50px 5px 0;
}

/* @media screen and (max-width: 1250px){ */
	/* #moi { */
		/* margin-bottom:25px; */
	/* } */
	
	/* #navmobile { */
		/* display:block; */
	/* } */
	
	/* body { */
		/* background-color: #3c3c3b; */
	/* } */
	
	/* header nav { */
		/* display:none; */
	/* } */
	
	/* #fondaccueil { */
		/* background-image:  url("img/rayoneglisemob.png"); */
		/* padding-bottom:56%; */
	/* } */
	
	/* #flecheacc { */
		/* display:none; */
	/* } */
	
	/* #lg { */
		/* width:35%; */
	/* } */
	
	/* .bpnav { */
		/* width: 16%; */
		/* text-align: center; */
	/* } */
	
	/* .bpnav img { */
		/* width:70%; */
	/* } */
	
	/* .bplang { */
		/* display:none; */
	/* } */
	
	/* #naviburger { */
		/* display:flex; */
		/* flex-direction:column; */
		/* justify-content:center; */
		/* align-items:center; */
		/* position: absolute; */
		/* right: -15%; */
		/* top: 66%; */
	/* } */
	
	/* #navi { */
		/* display:none; */
	/* } */
	
	/* .imgburg { */
		/* display:block; */
		/* position: fixed; */
		/* left: 90%; */
		/* top: 3%; */
		/* width:6%; */
	/* } */
	
	/* .btn15 { */
		/* position: relative; */
		/* width: 60px; */
		/* height: 60px; */
		/* top: -16px; */
		/* left: -15px; */
		/* transition-duration: 0.5s; */
	/* } */
	
	/* .btn15 .icon { */
		  /* transition-duration: 0.5s; */
		  /* position: absolute; */
		  /* height: 4px; */
		  /* width: 30px; */
		  /* top: 30px; */
		  /* background-color: #212121; */
		  /* border-radius: 4px; */
		  /* left: 15px; */
	/* } */
	
	/* .btn15 .icon:before { */
		  /* transition-duration: 0.5s; */
		  /* position: absolute; */
		  /* width: 30px; */
		  /* height: 4px; */
		  /* background-color: #212121; */
		  /* content: ""; */
		  /* top: -10px; */
		  /* border-radius: 4px; */
	/* } */
	
	/* .btn15 .icon:after { */
		  /* transition-duration: 0.5s; */
		  /* position: absolute; */
		  /* width: 30px; */
		  /* height: 4px; */
		  /* background-color: #212121; */
		  /* content: ""; */
		  /* top: 10px; */
		  /* border-radius: 4px; */
	/* } */
	
	/* .btn15.open .icon { */
		  /* transition-duration: 0.5s; */
		  /* background: transparent; */
	/* } */
	
	/* .btn15.open .icon:before { */
		/* transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px); */
	/* } */
	
	/* .btn15.open .icon:after { */
		/* transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px); */
	/* } */
	
	/* .btn15:hover { */
		/* cursor: pointer; */
	/* } */
	
	/* #presrap img { */
		/* width: 25%; */
		/* margin: 5%; */
	/* } */
	
	/* #index h2 { */
		/* margin-top:75px; */
		/* width:80%; */
	/* } */
	
	/* .infologi { */
		/* width:70%; */
	/* } */
	
	/* .volet p { */
		/* font-size:0.85rem; */
		/* width:100%; */
	/* } */
	
	/* .ouvert { */
		/* left:9px; */
		/* width:70%; */
	/* } */
	
	/* #lvl div img { */
		/* width:65%; */
	/* } */
	
	/* #lvl section { */
		/* width:32%; */
	/* } */
	
	/* .infologi article h3 { */
		/* font-size:0.9rem; */
	/* } */
	
	/* .basbar { */
		/* width:50px; */
		/* height:15px; */
	/* } */
	
	/* .nivlogi { */
		/* height:15px; */
	/* } */
	
	/* #lg img { */
		/* transform: translateX(0%); */
	/* } */
	
	/* main p, .prespr { */
		/* font-size:1.2rem; */
	/* } */
	
	/* .imgpr { */
		/* width:45%; */
	/* } */
	
	/* form { */
		/* padding:4%; */
	/* } */
	
	/* .prespr { */
		/* margin: 120px 8% 60px 8%; */
	/* } */
	
	/* .fleche { */
		/* width:50px; */
		/* margin: 10px calc(50% - 25px); */
		/* transition:500ms; */
	/* } */

	/* .fleche:hover { */
		/* width:70px; */
		/* margin:0px calc(50% - 35px); */
		/* transition:500ms; */
		/* cursor:pointer; */
	/* } */
	
	/* .projet article article { */
		/* display: flex; */
		/* flex-wrap:wrap; */
		/* justify-content: center; */
		/* align-items: center; */
		/* padding: 0; */
	/* } */
	
	/* .voletpr section { */
		/* display: flex; */
		/* flex-wrap:wrap; */
	/* } */
	
	/* .video { */
		/* width:45%; */
		/* height:70%; */
		/* margin:10px; */
	/* } */
	
	/* #ma2 div article div a p { */
		/* width: 35%; */
		/* display: flex; */
		/* justify-content: center; */
		/* font-size: 1rem; */
		/* margin: 5px; */
	/* } */
	
	/* form div { */
		/* display: flex; */
		/* flex-direction: column; */
	/* } */
	
	/* form section { */
		/* width:111%; */
		/* display: flex; */
		/* flex-direction: column; */
	/* } */
	
	/* form label:not(form section > label) , #dom { */
		/* text-align:center; */
		/* width:200px; */
	/* } */
	
	/* footer a { */
		/* margin:0; */
		/* display: flex; */
		/* justify-content: center; */
		/* align-items: center; */
	/* } */
	
	/* footer a p { */
		/* font-size:1rem; */
		/* width:69%; */
	/* } */
	
	/* footer h1{ */
		/* font-size:1.5rem; */
		/* width:222px; */
	/* } */
	
	/* footer div { */
		/* display: flex; */
		/* flex-direction: row; */
	/* } */
/* } */

@media screen and (max-width: 1250px){
	body {
		background-color: #626262;
	}
	
	header nav {
		display:none;
	}
	
	#lg {
		width:27%;
	}
	
	#fondaccueil {
		background-image:  url("img/rayoneglisemob.png");
		padding-bottom:143%;
	}
	
	#flecheacc {
		display:none;
	}
	
	#lgacc img {
		width:200%;
		padding:15%;
	}
	
	#lgacc {
		width:85%;
	}
	
	#fondaccueil section {
		padding-top:25%;
	}
	
	.bpnav {
		width: 50%;
		text-align: center;
	}
	
	.bpnav img {
		width:70%;
	}
	
	.bplang {
		display:none;
	}
		
	#navmobile {
		display:block;
		position: fixed;
		left: 87%;
		transition:1s;
	}
	
	#naviburger {
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		position: absolute;
		left: -230%;
		top: 120%;
	}
	
	#navi {
		display:none;
	}
	
	.imgburg {
		display:block;
		position: fixed;
		left: 90%;
		top: 3%;
		width:6%;
	}
	
	.btn15 {
		position: relative;
		width: 60px;
		height: 60px;
		top: -16px;
		left: -15px;
		transition-duration: 0.5s;
	}
	
	.btn15 .icon {
		  transition-duration: 0.5s;
		  position: absolute;
		  height: 4px;
		  width: 30px;
		  top: 30px;
		  background-color: #212121;
		  border-radius: 4px;
		  left: 15px;
	}
	
	.btn15 .icon:before {
		  transition-duration: 0.5s;
		  position: absolute;
		  width: 30px;
		  height: 4px;
		  background-color: #212121;
		  content: "";
		  top: -10px;
		  border-radius: 4px;
	}
	
	.btn15 .icon:after {
		  transition-duration: 0.5s;
		  position: absolute;
		  width: 30px;
		  height: 4px;
		  background-color: #212121;
		  content: "";
		  top: 10px;
		  border-radius: 4px;
	}
	
	.btn15.open .icon {
		  transition-duration: 0.5s;
		  background: transparent;
	}
	
	.btn15.open .icon:before {
		transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
	}
	
	.btn15.open .icon:after {
		transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
	}
	
	.btn15:hover {
		cursor: pointer;
	}
	
	#presrap img {
		width: 43%;
		margin: 5%;
	}
	
	#bpa {
		margin:5px 40px 5px 40px;
	}
	
	#index h2 {
		margin-top:75px;
		width:80%;
	}
	
	.infologi {
		width:100%;
		display:flex;
		flex-direction:column;
	}
	
	.logi section {
		width:50%;
	}
	
	#lg img {
		transform: translateX(0%);
	}
	
	#presrap div {
		flex-direction:column;
	}
	
	#presrap div article a {
		font-size:1rem;
	}
	
	#moi {
		margin:0;
		display:flex;
		flex-direction:column;
	}
	
	#presrap article {
		padding: 0 14%;
	}
	
	main h1 {
		margin:10px;
		margin-top:133px;
	}
	
	main p, .prespr {
		font-size:0.85rem;
	}
	
	.imgpr {
		width:90%;
	}
	
	.remplir {
		width:100%;
	}
	
	.prespr {
		margin: 31px 8% 31px 8%;
	}
	
	.fleche {
		width:50px;
		margin: 10px calc(50% - 25px);
		transition:500ms;
	}

	.fleche:hover {
		width:70px;
		margin:0px calc(50% - 35px);
		transition:500ms;
		cursor:pointer;
	}
	
	.projet h4 {
		margin:35px 16%;
	}
	
	.projet div h2 {
		width:80%;
		font-size:1.5rem;
		margin: 20px 50px 20px 0px;
	}
	
	.space {
		width:75%;
	}
	
	footer {
		display: flex;
		flex-direction:column;
	}
	
	footer a {
		margin:0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	footer a p {
		font-size:1rem;
		width:69%;
	}
	
	footer h1{
		font-size:1.5rem;
		width:222px;
	}
	
	footer div {
		display: flex;
		flex-direction: row;
	}
}