body, html {
	/*font-family: nhaas;*/
	height: 100vh;
	cursor: url("cursor4.png"), auto;
	max-height: 100vh;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	background-color: white;
	font-family: NHG Reg;

	scroll-snap-type: y mandatory;
}
#body_sp {
	margin: 0;
	
	/*padding-left: 10px;
	padding-right: 5px;*/
}

/*.body {
	overflow-y: scroll;
  
	.lettrage {
	  animation-name: scale;
	  animation-timeline: scroll();
    animation-duration: 1ms; 
	}
  }*/

::-webkit-scrollbar {
       width: 0px;
       background: transparent; /* make scrollbar transparent */
}

a {
	text-decoration: none;
}

/*DESACTIVER ENREGISTREMENT IMAGES*/


@font-face {
	font-family: NHG Reg;
	src: url(nhaastextproreg.ttf);
}

@font-face {
	font-family: NHG Ital;
	src: url(nhaastextproitalic.otf);
}

@font-face {
	font-family: Magister;
	src: url(Magister-Regular.otf);
}

@font-face {
	font-family: Magister-Italic;
	src: url(Magister-Italic.otf);
}

@font-face {
	font-family: Romana;
	src: url(Romana-RHM-Regular.otf);
}

a {
	text-decoration: none;
	color: black;
}

a:hover {
	color: rgb(200, 200, 200);
}

span {
	font-style: italic;
}

#acc-screen {
	width: 100%;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;

	background-color: white;
}

.logo {
	display: none;
}

#thew {
	width: 100vw;
	height: fit-content;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: 1vh;

	font-family: Romana;
	font-size: 40px;
}

.lettrage {
	width: 9vw;
}



/*///////////////////////////////////////////////////////////////*/
/*/////////////////////////ACCEUIL////////////////////////////*/
/*///////////////////////////////////////////////////////////////*/
#main-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*border: 2px solid orange;*/
}

#first {
	height: 50vh !important;
	width: 100%;
	display: flex;
}

#main-container > div {
	height: fit-content;
	width: 100%;

	/*padding-bottom: 20px;*/
	/*scroll-margin-top: 20px;*/
	display: flex;
	justify-content: center;
	align-items: flex-end;

	/*border: 1px solid blue;*/

}

.snap {
	scroll-snap-align: center;
}

.snap > div {
	display: flex;
	flex-direction: column;
	max-width: 100vw;
	/*border: 1px solid violet;*/
	align-items: center;
	text-align: center;
	/*border: 1px solid red;*/
}


.img-projet, 
.img-projet-paysage {
	justify-content: center;
}

.img-projet:hover, 
.img-projet-paysage:hover {
	cursor: pointer;
}

.sizeXS {
	width: 3vw;
}

.sizeS {
	width: 5vw;
}

.sizeM {
	width: 8vw;
}

.sizeL{
	width: 12vw;
}

.sizeXL{
	width: 19vw;
}

.repro {
	z-index: 999;
	mix-blend-mode: multiply;
}

/*.img-projet:hover {
	height: 85vh;
	width: auto;
	padding-top: 35px;
	padding-bottom: 35px;
	justify-content: center;
}*/

.active {
	height: 70vh;
	width: auto;
	padding-top: 9vh;
	padding-bottom: 10px;
	justify-content: center;
}

.active-paysage {
	height: auto;
	width: 95vw;
	padding-top: 9vh;
	padding-bottom: 10px;
	justify-content: center;
}

.infos,
.infos-1,
.infos-2,
.infos-3,
.infos-4,
.infos-5,
.infos-6,
.infos-7,
.infos-8,
.infos-9,
.infos-10,
.infos-11,
.infos-12,
.infos-13,
.infos-14,
.infos-15,
.infos-16,
.infos-17,
.infos-18,
.infos-19,
.infos-20,
.infos-21,
.infos-22 {
	display: none;
	font-size: 11.3px;
	padding-top: 15px;
}

.infos-active {
	display: block;
	padding-bottom: 9vh;
}

/*///////////Ajustement offset et superposition images//////////*/
.img-2 {
	margin-bottom: -1.5px;
}

.img-3 {
	margin-bottom: -1.5px;
}

.img-6, .img-10, .img-11, .img-14, .img-15, .img-16, .img-19, .img-21 {
	margin-bottom: -2px;
}

.img-9, .img-17 {
	margin-bottom: -5px;
}

.img-12 {
	margin-bottom: -11.4px;
}

.img-13 {
	margin-bottom: -4px;
}

.img-20 {
	margin-bottom: -7px;
}

/*//////////////////////////*/
/*///////////INFOS//////////*/
/*//////////////////////////*/
#main-container-about {
	display: flex;
	flex-direction: row;
	width: 100vw;
	height: 100vh;
	/*border: 1px solid blue;*/
}

#main-container-about > div {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 45vh;
	font-size: 13px;
}

.about-column-1,
.about-column-2,
.about-column-3 {
	display: block;
	max-height: 100%;
}

.about-column-1 {
	width: 50%;
}

.about-column-2 {
	width: 41%;
}

.about-column-3 {
	width: 9%;
}



#back {
	display: flex;
	position: absolute;
	justify-content: center;

	margin-top: 10px;
	z-index: 999;

	width: 100vw;
	height: auto;
}

#back a {
	display: flex;
}


/*///////////////////////////////////////////////////////////////*/
/*/////////////////////////RESPONSIVE////////////////////////////*/
/*///////////////////////////////////////////////////////////////*/

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

html, body {
    max-width: 100%;
    overflow-x: hidden;
    background-color: white;
}

.lettrage {
	width: 40vw;
	padding-top: 8px;
}

.sizeXS {
	width: 8vw;
}

.sizeS {
	width: 20vw;
}

.sizeM {
	width: 32vw;
}

.sizeL{
	width: 48vw;
}

.sizeXL {
	width: 70vw;
}

.active {
	width: 80vw;
	height: auto;
	padding-top: 9vh;
	padding-bottom: 10px;
	justify-content: center;
}

.active-paysage {
	height: auto;
	width: 97vw;
	padding-top: 9vh;
	padding-bottom: 10px;
	justify-content: center;
}

#main-container-about {
	flex-direction: column;
	justify-content: flex-end;
	width: 100vw;
	height: 100vh;
}

#main-container-about > div {
	padding-left: 10px;
	padding-right: 200px;
	padding-top: 6px;
	font-size: 13px;
}

.about-column-1 {
	display: flex;
	width: 95%;
	/*border: 1px solid orange;*/
}

.about-column-2, 
.about-column-3 {
	display: block;
	width: 95%;
	/*border: 1px solid orange;*/
}

}