* {
	padding : 0;
	margin : 0;
	scroll-behavior: smooth;
}
body, html {
	height : 0%;
	background-color: #f3ecff;
}
@font-face {
	font-family: BerkshireSwash;
	src: url("../fonts/BerkshireSwash-Regular.ttf");
}

@font-face {
	font-family: Amarante;
	src: url("../fonts/Amarante-Regular.ttf");
}

@font-face {
	font-family: Corp;
	src: url("../fonts/Corp-Light.otf");
}
#bandeau {
	display: flex;
	justify-content: space-between;
	height: 90px;
	background-color: #f3ecff;
	border-bottom: 3px #8678a1 solid;
}
#bienvenue {
	font-family: Amarante;
	font-size: xxx-large;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 55;
}

#mesProjets {
	font-family: Amarante;
	display: flex;
	margin-left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size: xxx-large;
	width: fit-content;
}

#imgLogo {
	width: 80px;
	height: 80px;
	margin-left: 10px;
	margin-top: 5px;
}

#byDemaraisCamille {
	font-family: BerkshireSwash;
	font-size: xxx-large;
	margin-top: 5px;
}

#carouselCamille {
	z-index: 0;
	border-bottom: 3px #8678a1 solid;
}

#carouselCamille img {
	height: 760px;
	filter: opacity(60%);
}
#carouselCamille .carousel-indicators button {
	background-color: #8678a1;
}
#carouselCamille .carousel-control-prev-icon, #carouselCamille .carousel-control-next-icon {
	color: #8678a1;
}
#textImg {
	display: flex;
	justify-content: space-between;
}
#textImg p {
	text-indent: 10%;
	text-align: justify;
	margin-left: 80px;
	width: 1450px;
	font-family: Corp;
	font-size: larger;
}
#aPropos img {
	width: 300px;
	height: 300px;
	margin-top: -20px;
}
#aPropos h5 {
	margin-left: 80px;
	text-decoration: underline;
	font-family: Corp;
}

#breadcrumb {
	display: flex;
	margin-left: 50%;
	transform: translateX(-50%);
	width: fit-content;
	color: white;
	z-index: 55;
}

#breadcrumb div:nth-child(2) {
	display: flex;
}

#breadcrumb div:nth-child(2) span {
	margin-right: 5px;
	margin-left: 5px;
}

#breadcrumb div:nth-child(1), #breadcrumb div:nth-child(3), .titreStylised div:nth-child(1), .titreStylised div:nth-child(3) {
	width: 200px;
	height: 3px;
	background-color: white;
}

#breadcrumb div:nth-child(1), #breadcrumb div:nth-child(3) {
	margin-top: 2%;
}

.titreStylised div:nth-child(2) {
	margin-left: 5px;
	margin-right: 5px;
}

.titreStylised div:nth-child(1), .titreStylised div:nth-child(3) {
	width: 200px;
	height: 3px;
	background-color: black;
	margin-top: 5%;
}

#imagesDiv, #imagesDivPhotoshop, #imagesDivPhotographie, #imagesDivPeinture {
	width : 1400px;
	margin-left: 50%;
	transform: translateX(-50%);
	column-count: 4;
	column-gap: 1em;
}

.imgs {
	filter: drop-shadow(2px 4px 6px black);
	cursor: pointer;
	transition: 0.35s all ease-in;
	display: inline-block;
	margin: 0 0 1em;
	width: 100%;
}

.imgs:hover {
	filter: drop-shadow(2px 4px 6px white);
}

.imgs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#imgModal img {
	width : -moz-available;
	width : -webkit-fill-available;
}

.btnPortFolio {
	padding: 0.5em;
	background-color: #ccaee6;
	border-radius: 3px;
	width: fit-content;
	cursor: pointer;
	transition: 0.35s all ease-in;
}
.btnPortFolio:hover {
	background-color: #8678a1;
}
.eteint {
	background-color: #ccaee6;
}
.allumer {
	background-color: #8678a1;
}

@media only screen and (min-width: 2700px) {
	#imagesDiv, #imagesDivPhotographie, #imagesDivPhotoshop, #imagesDivPeinture  {
		column-count: 5;
		width: 1800px;
	}
	.titreStylised div:nth-child(1), .titreStylised div:nth-child(3) {
		width: 300px;
		height: 6px;
		margin-top: 7%;
	}
	#bienvenue {
		font-size: 6em;
		top:25%;
	}
	#aPropos {
		font-size: 2em;
	}
	#textImg p {
		width: 2100px;
	}
	#mesProjets {
		font-size: 6em;
	}
	#breadcrumb div:nth-child(1), #breadcrumb div:nth-child(3) {
		width: 600px;
		height: 6px;
		margin-top: 4%;
	}
	#breadcrumb {
		width: 1500px;
	}
	.btnPortFolio {
		font-size: xxx-large;
	}
}

@media only screen and (min-width: 2000px) {
	#imagesDiv, #imagesDivPhotographie, #imagesDivPhotoshop, #imagesDivPeinture  {
		column-count: 5;
		width: 1800px;
	}
	.titreStylised div:nth-child(1), .titreStylised div:nth-child(3) {
		width: 300px;
		height: 6px;
		margin-top: 7%;
	}
	#bienvenue {
		font-size: 6em;
		top:30%;
	}
	#aPropos {
		font-size: 2em;
	}
	#aPropos h5 {
		font-size: 2em;
	}
	#textImg p {
		width: 2100px;
	}
	#mesProjets {
		font-size: 6em;
	}
	#breadcrumb div:nth-child(1), #breadcrumb div:nth-child(3) {
		width: 600px;
		height: 6px;
		margin-top: 4%;
	}
	#breadcrumb {
		width: 1500px;
	}
	.btnPortFolio {
		font-size: xxx-large;
	}
}

/* Masonry on small screens */
@media only screen and (max-width: 1024px) {
	#imagesDiv, #imagesDivPhotographie, #imagesDivPhotoshop, #imagesDivPeinture  {
		column-count: 3;
		width: 800px;
	}
	#byDemaraisCamille {
		font-size: x-large;
		margin-top: 25px;
	}
	#carouselCamille img {
		height: 250px;
	}
	#textImg img {
		width: 120px;
		height: 120px;
	}
	#textImg p {
		margin-left: 20px;
		width: 800px;
		font-size: smaller;
	}
	#aPropos h5 {
		margin-left: 20px;
	}
	#mesProjets {
		font-size: xx-large;
		width: 200px;
	}
	.titreStylised div:nth-child(1), .titreStylised div:nth-child(3) {
		width: 50px;
		height: 3px;
		background-color: black;
		margin-top: 20%;
	}
	#bienvenue {
		font-size: smaller;
		top: 23%;
	}
	#breadcrumb {
		top: 80%;
		left: 50%;
		transform: translateX(-50%);
	}
}
@media only screen and (max-width: 768px) {
	#breadcrumb {
		left:50%;
		transform: translateX(-50%);
	}
	#breadcrumb div:nth-child(1),#breadcrumb div:nth-child(3)  {
		width: 0;
		height: 0;
	}
	#textImg p {
		width: 600px;
	}
	#breadcrumb {
		top : 80%;
	}
	#imagesDiv, #imagesDivPhotographie, #imagesDivPhotoshop, #imagesDivPeinture  {
		top : 90%;
		width: 600px;
	}
}
@media only screen and (max-width: 430px) {
	#textImg p {
		width: 300px;
	}
	#breadcrumb {
		left:50%;
		transform: translateX(-50%);
		top : 123%;
	}
	.btnPortFolio {
		font-size: x-small;
	}
	#imagesDiv, #imagesDivPhotographie, #imagesDivPhotoshop, #imagesDivPeinture  {
		top : 130%;
		column-count: 1;
		width: 300px;
	}
}
/*@media screen and (max-width: 1250px) {
	#imagesDiv {
		width: 900px;
	}
}

@media screen and (max-width: 768px) {
	#imagesDiv {
		width: 700px;
		top: 50%;
	}
	.imgs {
		margin : 10px;
	}
	#carouselExampleIndicators {
		display: none;
	}
}

@media screen and (max-width: 500px) {
	#imagesDiv {
		width: 300px;
		top: 30%;
	}
	#imagesDiv img {
		width: 130px;
	}
	.imgs {
		margin : 10px;
	}
	#carouselExampleIndicators {
		display: none;
	}
} */