/* html,body { margin: 0; padding: 0; height: 100% } */

body {
	background-color: white;
	font-family: verdana, sans-serif;
	font-size: 20px;
	/* line-height: 25px; */
	color: black;
}

#auth{
	position: absolute;
	top: 150px;
	width: 312px;
	left: 50%;
	margin-left: -156px;
}

.wrapper{
	display: flex;
	flex-direction: column;
	height: 100vh;
	/* background-color: pink;
	align-items: center; */
	z-index: 0;
}

header, nav, produits, footer, mentions, .content {
	margin: auto;
	/* border-bottom: 1px solid black; */
	width: 100%;
}

header .section, nav .section, produits .section, footer .section, mentions .section, .content .section {
	height: 100%;
	width: 1100px;
	margin: auto;
}

header {
	flex: 0 0 35px;
	padding: 7px 0 0 0;
	background-color: black;
	font-size: 20px;
	font-weight: bold;
}

nav {
	background-color: lightslategray;
	/* padding: 20px 0 20px 0;	*/
}

produits {
	clear: both;
	padding: 50px 0 50px 0;	
    background-color: #CCC;
}

footer {
	padding: 30px 0 30px 0;	
    background-color: #333;
}

mentions {
	padding-bottom: 3px;
	flex: 0 0 35px;
	background-color: #336633;
	color: white;
}

a.navitem:link { color: black; }
a.navitem:hover { color: red !important; }

.fa-users:hover { color: red !important; }
.fa-truck:hover { color: red !important; }
.fa-cash-register:hover { color: red !important; }
.fa-file-invoice-dollar:hover { color: red !important; }
.fa-envelope:hover { color: red !important; }
.fa-sign-out-alt:hover { color: red !important; }
.fa-plus-square:hover { color: red !important; }
.fa-jar-wheat:hover { color: red !important; }
.fa-bottle-droplet:hover { color: red !important; }
.fa-shop:hover { color: red !important; }
.fa-person-military-pointing:hover { color: red !important; }
.fa-circle-info:hover { color: red !important; }
.fa-list:hover { color: red !important; }
.fa-backward:hover { color: red !important; }
.fa-address-card:hover { color: red !important; }
.fa-eye:hover { color: red !important; }
.fa-tint:hover { color: red !important; }
.fa-file-pdf:hover { color: red !important; }
.fa-file-export:hover { color: red !important; }
.fa-external-link-alt:hover { color: red !important; }
.fa-exclamation-triangle:hover { color: red !important; }
.fa-piggy-bank:hover { color: red !important; }
.fa-flask-vial:hover { color: red !important; }

.logo {
	clear: both;
	position: absolute;
	top: 0;
	width: 312px;
	left: 50%;
	margin-left: -156px;
	z-index: 99;
}

.content {
	flex: 1;
	background-color: white;
}

.mentions {
	/* clear: both; */
    height: 32px;
    background: #336633; /* #eda305; */
	font-size: 15px;
	color: white;
	bottom: 0;
}

.contenu {
	position: relative;
	left: 50%;
	margin-left: -550px;
	width: 1100px;
}

.imgpng {
	-webkit-filter: drop-shadow(1px 1px 10px #CCC);
	filter: drop-shadow(1px 1px 10px #CCC);
}

.texte { color: black }
a.texte:link { color: black; text-decoration:none }
a.texte:hover { color: red; text-decoration:none }
a.texte:active { color: red; text-decoration:none }

.texteblanc { color: white }
a.texteblanc:link { color: white; text-decoration:none }
a.texteblanc:hover { color: #eda305; text-decoration:none }
a.texteblanc:active { color: #eda305; text-decoration:none }

#myBtn {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 30px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: red; /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 15px; /* Some padding */
	border-radius: 10px; /* Rounded corners */
	font-size: 18px; /* Increase font size */
}

#myBtn:hover {
	background-color: #555; /* Add a dark-grey background on hover */
}