*{
	padding: 0;
	margin: 0;
	scrollbar-color: #606060 #000000;
    scrollbar-width: thin;
}
body{
	background-color: #818181;
	font-family: "Valeria";
}
h1{
	text-align: center;
}

.sous{
	width: 23vw;
	position: static;
	background-color: #606060;
	text-align: center;
	margin: 1vh 0.5vw 1vh 0.5vw;
	border-color: #A2A2A2;
	border:solid 2px #FFFFFF;
	display: flex;
	align-content: center;
	justify-content: center;
	border-radius: 8px;
	
}
.column {
  	padding: auto;
 	margin: 0.5vw;
	max-height: 100%;
	max-width: 100%;
	display: flex;
	justify-content: center;
  	align-items: center;
}
.row {
	margin-top: 4vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

.photo{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    max-width: 100%;
		max-height: 30vh;
		position: relative;
		z-index: 5;
		border-radius: 4px;
}
.photo:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index:100;
}

#filtre{
	border-bottom: solid 2px;
	text-align: center;
	font-size: 2vw;
	padding-top: 1.5vh;
	padding-bottom: 1.5vh;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin: 0 auto 0 auto;
}
#filtre input{
	margin-left: 1.5vw;
	margin-right: 0.5vw;
}
#filtre input:hover{
	cursor: pointer;
}
#boutonFiltre{
	border: solid 0.5px;
	background-color: #ffcccc;
	border-radius: 5px;
	padding: 1vh;
	margin-right: 1vw;
	font-family: "Valeria";
	font-size: 1.5vw;
}
#boutonFiltre:hover{
	cursor: pointer;
	background-color: #FF6666;
}

#change{
  position: relative;
  color: #EFEFEF;
  font-size: 2vw;
  text-decoration: none;
  border: solid 2px;
  margin-top: 1vh;
  border-radius: 4px;
  padding: 1vh;
  cursor: pointer;
}
#change::before{
  background: #404040;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: all 0.4s ease;
}

#change::before{
  width: 0%;
  height: 100%;
}

#change:hover::before{
  width: 100%;
}
#couleur {
	margin-top: 1vh;
	left: 15px;
	padding: 0.75vw;
	color: #000000;
	position: absolute;
	border-radius: 3px;
	cursor: pointer;
  border: 3px solid #000000;
  background-image: -webkit-linear-gradient(30deg, #E0E0E0 50%, #303030 50%);
  background-image: linear-gradient(30deg, #E0E0E0 50%, #303030 50%);
  background-size: 500px;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
#couleur:hover {
  background-position: 100%;
  color: #FFFFFF;
}
#changement{
	width: 92vw;
	margin-left: 3.2vw;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
.boxImg{
	display: none;
	max-width: 100%;
	max-height: 100%;
}
.lien{
	max-width: 90vw;
	position:relative;
	display: flex;
	text-align: center;
	justify-content: center;
}