body{
	background-color: #f2f2f2;
	margin: 0;
	width: 100%;
	overflow-x: hidden;

}

@font-face{
    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'),
    url('WebFont.woff') format('woff'),
    url('WebFont.ttf') format('truetype'),
    url('WebFont.svg#webfont') format('svg');
}

video{
	position: fixed; 
	object-fit:cover;
	right: 0; 
	left:-5em;
	top:-5em;
  	min-height: 110%;
  	min-width: 110%;
  	max-height: 120%;
  	max-width: 120%;
  	width: auto; 
  	height: auto; 
  	z-index: -100;

}


h1 {
	font-family: 'WebFont', PP Formula, sans-serif;
	font-size: 40px;
	text-align: left;
	line-height: 40px;
	letter-spacing: 1px;
	color: #161616;
	padding-top: 1vh;
	padding-left: 3vh;
}


h4{
	font-family: 'WebFont', PP Formula, sans-serif;
	font-size: 20px;
	text-align: left;
	line-height: 25px;
	letter-spacing: 1px;
	color: #161616;

	margin-left: 0.5em;
	margin-top: 1em;
	margin-bottom: 0;
}

h2 {
	font-family: 'WebFont', PP Formula, sans-serif;
	font-size: 10px;
	text-align: left;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 1px;
	color: #161616;
	padding-left: 3vh;
	padding-bottom: 0vh;
}

h5{
	font-family: 'WebFont', PP Formula, sans-serif;
	font-size: 11px;
	text-align: left;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 1px;
	color: #161616;

	padding-left: 1em;
	padding-right: 1em;
	margin-top: .5em;
}

h3 {
	font-family: 'WebFont', PP Formula, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 1px;
	text-align: left;
	text-decoration: underline;
	color: #161616;
	margin: 0;
}

a h3:hover{
	background-color: #9783EB;
	color: #f2f2f2;
}

a h3{
	text-decoration: none;
}

#enter{
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
}

#enfant {
	z-index: 101;
    margin: auto;
}

p{
	font-family: 'WebFont', PP Formula, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 1px;
	text-align: center;
	color: #161616;
	background-color: #f2f2f2;
	padding: 1px;
	margin-top:-22px;

}

a{
	margin: 0;
	text-decoration: none;
}

img{
	width: 100%;
	margin-left: 0;
}

button{
	background-color: transparent;
	right:0;
}

/**-----------INDEX----------**/


#desktop-version{
	display: block;
}


#index{
	overflow-y: hidden;
}

#container_index{
	background-color: #f2f2f2;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 100;
	position: absolute;
}

#grille{
	display:grid;
	grid-template-columns: repeat(7, 1fr);
  	grid-auto-rows: minmax(15em, auto);
	column-gap: 0px;
}

--

#color1{
	display: grid;
	display: hidden;
}

#color1:hover{
	background-image: url("img/index/IMG_1.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color2{
	display: grid;
	display: hidden;
}

#color2:hover{
	background-image: url("img/index/IMG_2.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color3{
	display: grid;
	display: hidden;
}

#color3:hover{
	background-image: url("img/index/IMG_3.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color4{
	display: grid;
	display: hidden;
}

#color4:hover{
	background-image: url("img/index/IMG_4.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color5{
	display: grid;
	display: hidden;
}

#color5:hover{
	background-image: url("img/index/IMG_5.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color6{
	display: grid;
	display: hidden;
}

#color6:hover{
	background-image: url("img/index/IMG_6.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color7{
	display: grid;
	display: hidden;
}

#color7:hover{
	background-image: url("img/index/IMG_7.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color8{
	display: grid;
	display: hidden;
}

#color8:hover{
	background-image: url("img/index/IMG_8.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color9{
	display: grid;
	display: hidden;
}

#color9:hover{
	background-image: url("img/index/IMG_9.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color10{
	display: grid;
	display: hidden;
}

#color10:hover{
	background-image: url("img/index/IMG_10.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color11{
	display: grid;
	display: hidden;
}

#color11:hover{
	background-image: url("img/index/IMG_11.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color12{
	display: grid;
	display: hidden;
}

#color12:hover{
	background-image: url("img/index/IMG_12.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color13{
	display: grid;
	display: hidden;
}

#color13:hover{
	background-image: url("img/index/IMG_13.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color14{
	display: grid;
	display: hidden;
}

#color14:hover{
	background-image: url("img/index/IMG_14.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color15{
	display: grid;
	display: hidden;
}

#color15:hover{
	background-image: url("img/index/IMG_15.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color16{
	display: grid;
	display: hidden;
}

#color16:hover{
	background-image: url("img/index/IMG_16.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color17{
	display: grid;
	display: hidden;
}

#color17:hover{
	background-image: url("img/index/IMG_17.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color18{
	display: grid;
	display: hidden;
}

#color18:hover{
	background-image: url("img/index/IMG_18.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color19{
	display: grid;
	display: hidden;
}

#color19:hover{
	background-image: url("img/index/IMG_19.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color20{
	display: grid;
	display: hidden;
}

#color20:hover{
	background-image: url("img/index/IMG_20.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color21{
	display: grid;
	display: hidden;
}

#color21:hover{
	background-image: url("img/index/IMG_21.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color22{
	display: grid;
	display: hidden;
}

#color22:hover{
	background-image: url("img/index/IMG_22.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color23{
	display: grid;
	display: hidden;
}

#color23:hover{
	background-image: url("img/index/IMG_23.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color24{
	display: grid;
	display: hidden;
}

#color24:hover{
	background-image: url("img/index/IMG_24.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color25{
	display: grid;
	display: hidden;
}

#color25:hover{
	background-image: url("img/index/IMG_25.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color26{
	display: grid;
	display: hidden;
}

#color26:hover{
	background-image: url("img/index/IMG_26.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color27{
	display: grid;
	display: hidden;
}

#color27:hover{
	background-image: url("img/index/IMG_27.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color28{
	display: grid;
	display: hidden;
}

#color28:hover{
	background-image: url("img/index/IMG_28.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color29{
	display: grid;
	display: hidden;
}

#color29:hover{
	background-image: url("img/index/IMG_29.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color30{
	display: grid;
	display: hidden;
}

#color30:hover{
	background-image: url("img/index/IMG_30.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color31{
	display: grid;
	display: hidden;
}

#color31:hover{
	background-image: url("img/index/IMG_31.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color32{
	display: grid;
	display: hidden;
}

#color32:hover{
	background-image: url("img/index/IMG_32.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color33{
	display: grid;
	display: hidden;
}

#color33:hover{
	background-image: url("img/index/IMG_33.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color34{
	display: grid;
	display: hidden;
}

#color34:hover{
	background-image: url("img/index/IMG_34.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color35{
	display: grid;
	display: hidden;
}

#color35:hover{
	background-image: url("img/index/IMG_35.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color36{
	display: grid;
	display: hidden;
}

#color36:hover{
	background-image: url("img/index/IMG_30.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color37{
	display: grid;
	display: hidden;
}

#color37:hover{
	background-image: url("img/index/IMG_15.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color38{
	display: grid;
	display: hidden;
}

#color38:hover{
	background-image: url("img/index/IMG_7.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color39{
	display: grid;
	display: hidden;
}

#color39:hover{
	background-image: url("img/index/IMG_1.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color40{
	display: grid;
	display: hidden;
}

#color40:hover{
	background-image: url("img/index/IMG_27.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color41{
	display: grid;
	display: hidden;
}

#color41:hover{
	background-image: url("img/index/IMG_19.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--

#color42{
	display: grid;
	display: hidden;
}

#color42:hover{
	background-image: url("img/index/IMG_14.png");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: grid;
}

--