SITE PERSO

html{
  scroll-behavior: smooth;
}

body{
	font-family: "helvetica", sans-serif;
	background-color: black;
	margin: 0%;
	scroll-behavior: smooth;
	overflow: scroll;
	width: 100vw;
	overflow-x: hidden;
		}
	
nav{
	width :100%;
	height:12vh;
	display: flex;
	align-items: center;
	//border-bottom: 2px solid #000;
	justify-content: space-between;
	position: fixed;
	z-index: 1;
	top: 0;
	//background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,0.9738270308123249) 80%, rgba(255,255,255,0) 100%);
	color: white;
	}
	

nav .onglets{
	margin-top: 3px;
	margin-left: 20px;
	//background-color: green;
	justify-content: space-between
	display: inline-block;
	color: white;
}

.onglets{
	margin-right: 10px;
	color: white;

}


nav h1{
	color: #000;
	//font-size: 30px;
	justify-content: left;
	//margin-left: 3vw;
	text-decoration: none;
	color: white;
	margin-left:4vw;
	}


nav .onglets a{
	text-decoration: none;
	color: #000;
	margin-right: 25px;
	//border-bottom: 1px solid #000;
	padding-bottom: 5px;
	color: white;
}

.container{
	//background-color: red;
	width:100%;
	display:flex;
	margin: 12vh 0 0 0;
	height: 88vh;

}
.colgauche{
	//background-color: green;
	//border: 4px solid pink;
	//flex:1 1 33%;
	//text-align: center;
	padding: 0%;
	position: fixed;
	//background-color: green;
	height: 75vh;
	//width: 33vw;
	scroll-behavior: smooth;
	color: white;

}
.coldroite{
	//flex:1 1 66%;
	margin-left: 33vw;
	//background-color: yellow;
	margin-bottom: 8vh;

}


.liste{
	margin-top: 6vh;
	padding-left: 0%
	justify-content: end;
	padding-inline-start: 0%;
	margin-left:4vw;
	color: white;
	
}

img{
	width: 100%;
}


ul{
	list-style: none;
	text-decoration: none;
	color: white;
			
}

li{
	font-size: 20px;
	line-height: 2;
	text-align: start;
	color: white;
	text-transform: uppercase;
	
}

a{
	text-decoration: none;
	color: white;
	scroll-behavior: smooth;
}




	
	
.actif{
	display: none;
}

.static:hover + .actif{
	display: block;
}

.actif: hover{
	opacity: 0;
}

.articletetexte{
	width: 27vw;
	text-justify: distribute;
}

h1{
	text-transform: uppercase;
}


.contacts{
	margin-left:5vw;
	margin-top: 35vh;
}


.milogiftourne{
	//height: 70vh;
	z-index: 666666;
	position: absolute;
	//background-color: red;
	margin-left: 30vw;
	margin-bottom: 10vw;
}


#strokes{
	margin-top: 50vh;
	position: absolute;
}






V1

@font-face{
	font-family: 'Montserrat'; 
	scr: url(fonts/Montserrat-Regular.ttf)format('truetype');
	}

body{
	margin: 0px;
	padding: 0px;
font-family: "monserat", sans-serif;
	//display: block;
	background-color: black;
	color: white;
}

.main{
	display:flex;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;

}

.col1{
	width: 33vw;
	//background-color:blue;
	display: block;
	//padding-top: 10vh;
	visibility : hidden;
}

.col1content{
	padding-left: 3vw;
	padding-top: 3VW;
}

.col3content{
	padding-right: 3vw;
	padding-top: 3VW;
}

.xp{
	height: 8vh;
	//margin-top: 2vh;
	overflow: scroll;
	//transition: height 0.4s linear;
	-ms-overflow-style: none;
   	//object-position: top;
   	top: 0;
   	display: block;
   	width: 20vw;
   	//z-index: 7;
   //	margin-top: 3vw;
   	position: relative;
   	
}


.xp33{
	height: 8vh;
	//margin-top: 2vh;
	overflow: scroll;
	//transition: height 0.4s linear;
	-ms-overflow-style: none;
   	//object-position: top;
   	top: 0;
   	display: block;
   	width: 20vw;
   	//z-index: 7;
}


.xp::-webkit-scrollbar{
	display: none;
	
}

.xp:hover{
	height: 100%;
	//transition: height 0.5s linear;

}

.xp33:hover{
	height: 20vh;
	//transition: height 0.5s linear;
}

.xpt {
	position: sticky;
	top: 0px;
	background-color: black;
	margin: 0px;
	padding-bottom: 1vh;
	//transition: height 0.4s linear;
	height: 6vh;
	width: &ÀVW;
	align-content: center;
	//height: 50px;
	//border: solid black 5px; 

  }
 
 
 .col2{
	width: 33vw;
	//background-color: RED;
	//display: block;
	//position: relative;
	justify-content: space-between;
	padding-top: 30px;
	z-index: 10;

}


//.milostatic:hover{
  opacity:0;
  display: block;
  cursor: pointer;
}





.romainstatic {
  position:absolute;
  cursor: pointer;
}

//.romainstatic:hover{
  opacity:0;
  display: block;
  cursor: pointer;
}

.romainactif{
  position:absolute;
  cursor: pointer;
	
}

.romainactif: hover{
  position:absolute;
  cursor: pointer;
	
}

.col3{
	width: 33vw;
	//background-color:green;
	text-align: end;
	justify-content: end;
	//padding-top: 10vh;
	visibility: hidden;
	//padding-right: 10px;

}

.textcol3{
	
}

.xp2{
	height: 8vh;
	//margin-top: 2vh;
	overflow: scroll;
	//background-color: blue;
	//transition: height 0.4s linear;
	-ms-overflow-style: none;
	//object-position: top;
	top: 0;
	display: block;
	width: 20vw;
	margin-left: auto;
}

//.xp2::-webkit-scrollbar{
	display: none;
	
}

.xp2:hover{
	height: 40vh;
	//transition: height 0.5s linear;

}

.imgmilo: hover{
	cursor: pointer;
}

.imgmilo{
	cursor: pointer;
	margin-top: 3.5vh;
	
}

.imgromain{
	cursor: pointer;
	margin-left: 4vw;
	
}

.imgromain:hover {
	cursor: pointer;
}


.contactro{
	width: 25vw;
	//overflow-wrap: break-word;
	//margin-left: auto;
	//bottom: 0;
	margin-bottom: 10vh;
}

.page{
	position: relative;
	display: block;
}

#milogiftourne{
	width:11vw;
	margin-top:4vh;
	margin-left: 5vw;
}
.milogiftourne{
	margin-bottom:50vh;
	position: absolute;
}

.coltext{
	margin-top: 5vh;
}



.article{
	//justify-content: center;
	width: 66vw;
	//background-color: green;
	margin-bottom: 13vh;
	position: relative;
	text-decoration: none;
}


.images1{
	width: 30vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20vh;
	margin-bottom: 20vh;
}

.texte1{
	width: 25vw;
	//text-align: end;
}

#gifmeta{
	width: 17vw;

}

.gifntxt{
	position: absolute;
	//width: 17vw;
	top:0;
	left: 0;
	MARGIN-top: 96vh;
}

.texte3{
	position: absolute;
	width: 30vw;
	top:0;
	left: 0;
	MARGIN-top: 10vh;
}

.images4{
	width: 60vw;
	margin-left: auto;
	//margin-right: auto;
	margin-top: 10vh;
	margin-bottom: 10vh;
}


.texte4{
	position: absolute;
	width: 20vw;
	bottom:0;
	right: 0;
	MARGIN-bottom: 17vh;
	margin-right: 8.5vw;
	//position: fixed;
}


.space{
	height:10vh;
}

.gifdiangephotos{
	width: 10vw;
	position: absolute;
	margin-left: 10vw;
	margin-top: 16vh;
	top:0;
	left: 0;
}
.gifdiangetexte{
	width: 18vw;
	position: absolute;
	margin-left: 40vw;
	margin-top: 44vh;
	top:0;
	left: 0;
}

#section5{
	margin-bottom: 10vh;
}

.preloader{
	position:fixed;
	top:0;
	left:0;
	background-color: black;
	z-index: 40;
	display:flex;
	align-items:center;
	justify-content:center;
	width: 100vw;
	height: 100vh;
}

.image0{
	align-items:center;
	width: 40%;
	position: absolute;

	margin-top: auto;
}

.image120{
	align-items:center;
	width: 3%;
	position: absolute;
	bottom:0;
	left: 0;
	margin-left: 41.5vw;
	margin-bottom: 2vh;
}

.copyright{
	position: absolute;
	bottom: 0;
}