body{
    background-color: white;
	margin:0;
	padding:0;
}

img{
    width: 100%;
}

p{
font-family: 'Courier New', Courier, monospace;
font-size: 1.2em;
color: #0078DB;
}
p1{
	font-family: 'Courier New', Courier, monospace;
	font-size: 1em;
	color: white;
}
p2{
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.8em;
	color:#FFA04F;
}
p3{
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.8em;
	color:#F39DA3;
}
p4{
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.8em;
	color:#0078DB;
}
p5{
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.6em;
	color: white;
}


.header{
    top:0;
    position:sticky;
	z-index:1;
	margin-bottom: 0%;
}

	.head-flex{
		display:flex;
		flex-wrap:wrap;
		height: 8vh;
		margin: 1%;
		padding: :1%;
		}

		.logo{
			flex: 1 1 150px;
			margin:0;
			height: 100%;
			border: 2px solid #0078DB ;
			}
			img[src*="img/logo.png"] {
				height: 100%;
				width: auto;
			}

		.vide{
			flex: 1 1 150px;
			margin:0;
			height: 100%;
			border: 2px solid #0078DB ;
			}

		.panier{
			flex: 1 1 150px;
			margin:0;
			text-align: right;
			height: 100%;
			border: 2px solid #0078DB ;
			}
			img[src*="img/panier-01.png"] {
				height: 100%;
				width: auto;
			}
			img[src*="img/panier-02.png"] {
				height: 100%;
				width: auto;
			}
			
.headertel{
	display: none;
}
.textemarque-flex{
	display:flex;
	height: 48vh;	
	margin: 1%;
	margin-top: 0%;
	padding: :1%;
	}

	.texte{
		flex: 1;
		margin:0;
		border: 2px solid #0078DB ;
		}
		.contenu-texte{
			padding: 5%;
		}
	.case2{
		flex: 1;
		margin:0;
		}
	.case3{
		flex: 1;
		margin:0;
		}
.preview{
	border: 2px solid #0078DB ;
	margin: 0% 1% 0% 1%;
}
.slide{
	overflow: auto;
	overflow-y: hidden;
	margin-top: 1%;
	white-space: nowrap
}
	.artslide{
		display: inline;
		height: 100%;
		margin-right: 10%;	
		border-radius: 30px;
		overflow: hidden;
	}

.categories-flex{
	z-index: 2;
	display:flex;
	flex-wrap:wrap;
	position: sticky;
	margin-top: 3%;
	}

	.boutonbas{
		flex: 1 1 150px;
		margin:0;
		align-content: center;
		}
	
	.boutonhauts{
		flex: 1 1 150px;
		margin:0;
		align-items: center;
		}
	.boutonaccessoires{
		flex: 1 1 150px;
		margin:0;
		align-items: center;
		}

				.lesbas{
					background-color:#FFA04F;
					margin: 10%;
					text-align: center;
					border-radius: 30px;
					overflow: hidden;
					height: 40%;
				}
				.leshauts{
					background-color: #F39DA3;			
					margin: 10%;
					text-align: center;
					border-radius: 30px;
					overflow: hidden;
					height: 40%;
				}
				.lesaccessoires{
					background-color: #0078DB;
					margin: 10%;
					text-align: center;
					border-radius: 30px;
					overflow: hidden;
					height: 40%;
				}

.nouvellecollection{
	position: relative;
}
.marquee{
	position: absolute;
	margin-top: 20%;
	width: 100%;
	z-index: 1;
	margin-top: 20vh;
}
.publi{
	z-index: 0;
	background-color: orangered;
	margin: 10%;
	width: 55%;
	border-radius: 30px;
	overflow: hidden;
}


.articles-flex{
	display:flex;
	flex-wrap:wrap;
	margin: 1%;
	padding: :1%;
	}

	.bas{
		flex: 1 1 150px;
		margin:0;
		border: 2px solid #0078DB ;
		}
		
	.hauts{
		flex: 1 1 150px;
		margin:0;
		border: 2px solid #0078DB ;
		}
		
	.accessoires{
	flex: 1 1 150px;
	margin:0;
	border: 2px solid #0078DB ;
	}

.artpantalon{
height: 20%;
margin: 15%;
}
	.pantalon{
		background-color:#FFA04F;
		border-radius: 30px;
		overflow: hidden;
	}
	.boutonpantalon{
		background-color:#FFA04F;
		height: 8%;
		margin-top: 5%;
		padding-top: 5%;
		padding-right: 8%;
		border-radius: 30px;
		text-align: right;
	}
.arttailleur{
height: 20%;
margin: 15%;
margin-top:90%;
}
	.tailleur{
		background-color:#FFA04F;
		border-radius: 30px;
		overflow: hidden;
	}
	.boutontailleur{
		background-color:#FFA04F;
		height: 8%;
		margin-top: 5%;
		padding-top: 5%;
		padding-right: 8%;
		border-radius: 30px;
		text-align: right;
	}
.artsweat{
height: 20%;
margin: 15%;
margin-top:110%;
}
	.sweat{
		background-color: #F39DA3;
		border-radius: 30px;
		overflow: hidden;
	}
	.boutonsweat{
		background-color: #F39DA3;
		height: 8%;
		margin-top: 5%;
		padding-top: 5%;
		padding-right: 8%;
		border-radius: 30px;
		text-align: right;
	}
.artteeshirt{
height: 20%;
margin: 15%;
margin-top:100%;
}
	.teeshirt{
		background-color: #F39DA3;
		border-radius: 30px;
		overflow: hidden;
	}
	.boutonteeshirt{
		background-color: #F39DA3;
		height: 8%;
		margin-top: 5%;
		padding-top: 5%;
		padding-right: 8%;
		border-radius: 30px;
		text-align: right;
	}
.artchemise{
height: 20%;
margin: 15%;
margin-top:0%;
}
	.chemise{
		background-color: #F39DA3;
		border-radius: 30px;
		overflow: hidden;
	}
	.boutonchemise{
		background-color: #F39DA3;
		height: 8%;
		margin-top: 5%;
		padding-top: 5%;
		padding-right: 8%;
		border-radius: 30px;
		text-align: right;
	}
.artbob{
height: 20%;
margin: 15%;
margin-top:65%;
}
	.bob{
		background-color: #0078DB;
		border-radius: 30px;
		overflow: hidden;
	}
	.boutonbob{
		background-color: #0078DB;
		height: 8%;
		margin-top: 5%;
		padding-top: 5%;
		padding-right: 8%;
		border-radius: 30px;
		text-align: right;
	}
.artchaussettes{
height: 20%;
margin: 15%;
margin-top:120%;
}
	.chaussettes{
		background-color: #0078DB;
		border-radius: 30px;
		overflow: hidden;
	}
	.boutonchaussettes{
		background-color: #0078DB;
		height: 8%;
		margin-top: 5%;
		padding-top: 5%;
		padding-right: 8%;
		border-radius: 30px;
		text-align: right;
	}

.footer{
	width: 90%;
	margin-top: 5%;
	margin-bottom: 5%;
	background-color: #0078DB;
	border-radius: 30px;
	text-align: center;
}
img[src*="img/insta-01.png"] {
	height: 100%;
	width: auto;
}



@media (min-width:200px) and (max-width:600px)
{
	body{
	}
p2{
	font-family: 'Courier New', Courier, monospace;
	font-size: 1em;
	color:#FFA04F;
}
p3{
	font-family: 'Courier New', Courier, monospace;
	font-size: 1em;
	color:#F39DA3;
}
p4{
	font-family: 'Courier New', Courier, monospace;
	font-size: 1em;
	color:#0078DB;
}

.header{
  display: none;
}
.headertel{
	display: flex;
    top:0;
    position:sticky;
	z-index:1;
	margin-bottom: 0%;
}

	.head-flextel{
		width: 100%;
		display:flex;
		flex-wrap:wrap;
		height: 8vh;
		margin: 1%;
		padding: :1%;
		}

		.logotel{
			flex: 1 1 150px;
			margin:0;
			height: 100%;
			border: 2px solid #0078DB ;
			}
			img[src*="img/logo.png"] {
				height: 100%;
				width: auto;
			}

		.videtel{
			flex: 1 1 150px;
			margin:0;
			height: 100%;
			border: 2px solid #0078DB ;
			}
		.menutel{
			flex: 1 1 150px;
			margin:0;
			height: 100%;
			border: 2px solid #0078DB ;
			}
			
			#wrap {
				width: 100%;
				height: 100%;
				margin: 0;
				z-index: 99;
				position: relative;
			  }
			  .navbar {
				width: 100%;
				padding: 0;
				margin: 0;
				position: absolute;
			  }
			  .navbar li {
				width: 100%;
				float: left;
				text-align: center;
				list-style: none;
				padding: 0;
				margin: 0;
			  }
			  .navbar a {
				padding: 8% ;
				text-decoration: none;
				display: block;
			  }
			  .navbar li:hover,
			  a:hover {
			  }
			  .navbar li ul {
				display: none;
				height: auto;
				margin: 0;
				padding: 0;
			  }
			  .navbar li:hover ul {
				display: block;
			  }
			  .navbar li ul li {
				background-color:white;
			  }
			  .navbar li ul li a {
				border: 2px solid #0078DB ;
			  }
			  .navbar li ul li a:hover {
				background-color:azure;
			  }

		.paniertel{
			flex: 1 1 150px;
			margin:0;
			text-align: right;
			height: 100%;
			border: 2px solid #0078DB ;
			}
			img[src*="img/panier-01.png"] {
				height: 100%;
				width: auto;
			}
			img[src*="img/panier-02.png"] {
				height: 100%;
				width: auto;
			}

.textemarque-flex{
	display:flex;
	height: 52vh;	
	margin: 1%;
	margin-top: 14%;
	padding: :1%;
	}

	.texte{
		flex: 1;
		margin:0;
		border: 2px solid #0078DB ;
		}
		.contenu-texte{
			padding: 5%;
		}
	.case2{
		flex: 0;
		margin:0;
		}
	.case3{
		flex: 1;
		margin:0;
		}

.categories-flex{
	z-index: 2;
	display:none;
	flex-wrap:wrap;
	position: sticky;
	margin-top: 3%;
	}

.articles-flex{
	display:flex;
	flex-wrap:wrap;
	margin: 1%;
	padding: :1%;
	}

	.bas{
		flex: 1 1 400px;
		margin:0;
		border: 2px solid #0078DB ;
		height: 100%;
		}
		
	.hauts{
		flex: 1 1 400px;
		margin:0;
		border: 2px solid #0078DB ;
		height: 100%;
		}
		
	.accessoires{
	flex: 1 1 400px;
	margin:0;
	border: 2px solid #0078DB ;
	height: 100%;
	}

.artpantalon{
margin: 15%;
}
	.boutonpantalon{
		height: 5%;
		padding-bottom: 5%;	
	}
.arttailleur{
margin: 25% 15% 15% 15%;
}
	.boutontailleur{
		height: 5%;
		padding-bottom: 5%;	
	}
.artsweat{
margin: 15%;
}
	.boutonsweat{
		height: 5%;
		padding-bottom: 5%;	
	}
.artteeshirt{
margin: 25% 15% 15% 15%;
}
	.boutonteeshirt{
		height: 5%;
		padding-bottom: 5%;	
	}
.artchemise{
margin: 25% 15% 15% 15%;
}
	.boutonchemise{
		height: 5%;
		padding-bottom: 5%;	
	}
.artbob{
margin: 15%;
}
	.boutonbob{
		height: 5%;
		padding-bottom: 5%;	
	}
.artchaussettes{
margin: 25% 15% 15% 15%;
}
	.boutonchaussettes{
		height: 5%;
		padding-bottom: 5%;	
	}

	.footer{
		border-radius: 40px;
	}
}

@media (min-width:600px) and (max-width:1000px)
{
	body{
	}

	p{
		font-family: 'Courier New', Courier, monospace;
		font-size: 1em;
		color: #0078DB;
		}

		.panier{
			flex: 1 1 150px;
			margin:0;
			overflow: hidden;
			text-align: right;
			height: 100%;
			border: 2px solid #0078DB ;
			}
			img[src*="img/panier-01.png"] {
				display: inline-block;
				height: auto;
				width: 30%;
			}
			img[src*="img/panier-02.png"] {
				display: inline-block;
				height: auto;
				width: 60%;
			}

	.textemarque-flex{
		display:flex;
		height: 48vh;	
		margin: 1%;
		margin-top: 0%;
		padding: :1%;
		}
	
		.texte{
			flex: 1 1  0px;
			margin:0;
			border: 2px solid #0078DB ;
			}
			.contenu-texte{
				padding: 5%;
			}
		.case2{
			flex: 1 1 0px;
			margin:0;
			}
		.case3{
			flex: 1 1  0px;
			margin:0;
			}
			.footer{
				border-radius: 40px;
			}

}