/****************************************************************

	Description : Feuille de style globale CSS
	Auteur : 	Jason Deschênes
	Version (date) :  	25 mai 2015	
	Couleurs : 		
					
****************************************************************/
*
{
	margin : 0px;
	padding : 0px;
	font-weight : bold;
	font-family : 'Oswald', sans-serif;
	color : black;
	font-size:20px;
	background-size:100% 100%;
}

.leftContent img, .Adresse img
{
	width:16px;
	height:16px;
}

a
{
	text-decoration:none;
}

html
{
	background-color : #777777;
}

body
{
	background-color : #777777;
	margin : auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
	/*background-image:url("../images/bg.jpg");
	background-size:15px 15px;*/
}

header
{
	width : 100%;
	background-image : url("../images/header.jpg");
	height:200px;
	background-size:1200px 200px;
}

header a
{
	display:block;
	text-decoration:none;
	width:100%;
	height:100%;
	background-image : url("../images/button.jpg");
	text-align:center;
}

.logoContainer
{
	width:0px;
	height:100%;
	position:relative;
	z-index:1;
}

.logo
{
	height:100%;
}

#language
{
	float:right;
	position:relative;
	z-index:2;
}

#language a
{
	display:block;
	width:50px;
	height:40px;
	float:right;
	padding-top:10px;
	background-image : url("../images/top-left.jpg"),url("../images/top-right.jpg"),url("../images/bottom-left.jpg"),url("../images/bottom-right.jpg"), url("../images/leftSide.jpg"), url("../images/rightSide.jpg"), url("../images/top.jpg"), url("../images/bottom.jpg");
	background-position : top left, top right, bottom left, bottom right, left, right, top, bottom;
	background-size : 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 100%, 6px 100%, 100% 6px, 100% 6px;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-color:grey;
	
}

#language form
{
	float:left;
}

#language a:hover
{
	background-color:grey;
	background-image : url("../images/top-left.jpg"),url("../images/top-right.jpg"),url("../images/bottom-left.jpg"),url("../images/bottom-right.jpg"), url("../images/leftSide.jpg"), url("../images/rightSide.jpg"), url("../images/top.jpg"), url("../images/bottom.jpg");
	background-position : top left, top right, bottom left, bottom right, left, right, top, bottom;
	background-size : 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 100%, 6px 100%, 100% 6px, 100% 6px;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	
}

header p
{
	font-size : 70px;
	padding-left : 10px;
	padding-top:10px;
}

#GaiaTitle
{
	padding-left : 130px;
}

div.spacing
{
	width : 100%;
	height : 75px;
	background-image : url("../images/spacing.jpg");
	display:none;
	
}

.title
{
	text-align : center;
	font-size : 50px;
}

ul
{
	list-style:none;
	width:100%;
	margin:0px;
	padding:0px;
}

nav a
{
	display:block;
	text-decoration:none;
	width:100%;
	height:100%;
	background-image : url("../images/top-left.jpg"),url("../images/top-right.jpg"),url("../images/bottom-left.jpg"),url("../images/bottom-right.jpg"), url("../images/leftSide.jpg"), url("../images/rightSide.jpg"), url("../images/top.jpg"), url("../images/bottom.jpg"), url("../images/btnBG.jpg");
	background-position : top left, top right, bottom left, bottom right, left, right, top, bottom, left top;
	background-size : 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 100%, 6px 100%, 100% 6px, 100% 6px, auto;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	text-align:center;
	text-shadow: 1px 1px 3px white, -1px -1px 3px white, -1px 1px 3px white, 1px -1px 3px white;
}

a:hover, a:hover div, a:hover span p
{
	color:white;
	text-shadow: 1px 1px 3px black, -1px -1px 3px black, -1px 1px 3px black, 1px -1px 3px black;
}

nav a:active
{
	background-image : url("../images/top-left.jpg"),url("../images/top-right.jpg"),url("../images/bottom-left.jpg"),url("../images/bottom-right.jpg"), url("../images/leftSide.jpg"), url("../images/rightSide.jpg"), url("../images/top.jpg"), url("../images/bottom.jpg"), url("../images/btnBG-clicked.jpg");
	background-position : top left, top right, bottom left, bottom right, left, right, top, bottom, top left;
	background-size : 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 100%, 8px 100%, 100% 8px, 100% 8px, auto;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

nav li a div
{
	padding-top:25px;
}

.currentPage div, .currentPage span p
{
	color:white;
	text-shadow: 1px 1px 3px black, -1px -1px 3px black, -1px 1px 3px black, 1px -1px 3px black; 
}

.invisible
{
	display:none;
	height:0px;
	margin:0px;
	padding:0px;
}

.lienGros
{
	display:block;
}

.lienGros p
{
	display:inline;
}

#subMenu
{
	display:none;
	z-index: 2000;
}

#subMenu ul li
{
	width:240px;
	height:50px;
	text-align:center;
}

.subLink
{
	display:inline-block;
	text-decoration:none;
	width:100%;
	height:100%;
	background-image : url("../images/top-left.jpg"),url("../images/top-right.jpg"),url("../images/bottom-left.jpg"),url("../images/bottom-right.jpg"), url("../images/leftSide.jpg"), url("../images/rightSide.jpg"), url("../images/top.jpg"), url("../images/bottom.jpg"), url("../images/btnBG.jpg");
	background-position : top left, top right, bottom left, bottom right, left, right, top, bottom, top left;
	background-size : 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 100%, 6px 100%, 100% 6px, 100% 6px, auto;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	text-align:center;
}


.subLink div
{
	padding-top:15px;
	font-size:15px;
}

#content
{
	width:80%;
	margin:auto;
	clear:both;
	min-height:600px;
	padding-top:40px;
}

#content p
{
	clear:both;
	margin-bottom:40px;
	color:white;
}

#content .titre
{
	text-align:center;
	font-size:30px;
	color:black;
}

#content .sousTitre
{
	color:black;
	clear:both;
	margin-bottom:20px;
}

.text
{
	float:left;
	width:75%;
}

.text p
{
	text-align: justify;
}

.alignRight
{
	float:right;
	width:20%;
}

.alignRight img
{
	width:100%;
}

#content p span
{
	color:white;
}

.Adresse
{
	text-align:center;
	line-height:2;
}

.Adresse a
{
	color:white;
}

.listeMateriaux
{
	line-height:1.5;
}

.listeMateriaux div
{
	float:left;
	color:white;
	padding-right:10px;
}

.listeMateriaux span
{
	font-size:12px;
}

#clear
{
	clear:both;
	width:100%;
	height:1px;
}

footer
{
	margin-top:30px;
	width : 100%;
	height : 75px;
	background-image : url("../images/top-left.jpg"),url("../images/top-right.jpg"),url("../images/bottom-left.jpg"),url("../images/bottom-right.jpg"), url("../images/leftSide.jpg"), url("../images/rightSide.jpg"), url("../images/top.jpg"), url("../images/bottom.jpg"), url("../images/footer.jpg");
	background-position : top left, top right, bottom left, bottom right, left, right, top, bottom, center;
	background-size : 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 100%, 6px 100%, 100% 6px, 100% 6px, auto;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

#copyright
{
	text-align:center;
	padding-top:25px;
	text-shadow: 1px 1px 3px white, -1px -1px 3px white, -1px 1px 3px white, 1px -1px 3px white;
}

.item, .itemMod
{
	clear:both;
	width:100%;
	margin-bottom:20px;
	min-height:450px;
	background-image : url("../images/top-left.jpg"),url("../images/top-right.jpg"),url("../images/bottom-left.jpg"),url("../images/bottom-right.jpg"), url("../images/leftSide.jpg"), url("../images/rightSide.jpg"), url("../images/top.jpg"), url("../images/bottom.jpg");
	background-position : top left, top right, bottom left, bottom right, left, right, top, bottom;
	background-size : 10px 10px, 10px 10px, 10px 10px, 10px 10px, 10px 100%, 10px 100%, 100% 10px, 100% 10px;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-color:#777777;
}

.itemPreview
{
	float:left;
	text-align:center;
	margin-bottom:10px;
	width:25%;
	background-image : url("../images/top-left.jpg"),url("../images/top-right.jpg"),url("../images/bottom-left.jpg"),url("../images/bottom-right.jpg"), url("../images/leftSide.jpg"), url("../images/rightSide.jpg"), url("../images/top.jpg"), url("../images/bottom.jpg"), url("../images/bgItem.jpg");
	background-position : top left, top right, bottom left, bottom right, left, right, top, bottom, center center;
	background-size : 10px 10px, 10px 10px, 10px 10px, 10px 10px, 10px 100%, 10px 100%, 100% 10px, 100% 10px, 500px 400px;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-color:#777777;
	min-height:350px;
}

.itemPreview img
{
	width:85%;
	padding-top:15px;
    filter: drop-shadow(2px 4px 4px black);
    -webkit-filter: drop-shadow(2px 4px 4px black);
}

.itemPreview p
{
	padding-left:15px;
	padding-right:15px;
	font-size:20px;
}

.formModSupp
{
	text-align:center;
}

section
{
	width:22%;
	height:0px;
	float:left;
}

section img
{
	margin:15px;
	width:100%;
	position:relative;
	background-color:#777777;
}

.relpro
{
	width:200%;
}

.item div, .itemMod div
{
	text-align:justify;
	padding-right:20px;
	padding-left:25%;
	padding-top:15px;
	padding-bottom:10px;
}

.item div p:nth-of-type(1)
{
	font-size:30px;
}

.item div p:nth-of-type(2)
{
	font-size:15px;
}

.leftContent
{
	float:left;
	line-height:1.5;
}

.leftContent a
{
	color:white;
}

.rightContent
{
	float:right;
	width:59%;
}

.itemMod p
{
	color:black;
	font-size:20px;
}

.itemMod  div p.modifData
{
	color:white;
	font-size:15px;
}

label
{
	float:left;
	width:30%;
}

.formModSupp .boutton
{
	width:85%;
	margin-bottom:20px;
}

.boutton
{
	height:50px;
	background-color:white;
	color:black;
	border:0px;
	cursor:pointer;
}

#envoyerMail div
{
	clear:both;
	padding-top:10px;
	padding-bottom:10px;
}

input, select, option, textarea
{
	color:black;
}

#envoyerMail input, #envoyerMail textarea
{
	float:right;
	width:68%;
}

#envoyerMail textarea
{
	height:100px;
}

#envoyerMail .boutton
{
	margin-top:10px;
}

#loginForm, #addProductForm
{
	max-width:450px;
	margin:auto;
	text-align:center;
}

#loginForm div
{
	width:90%;
	margin:auto;
}

#loginForm input, #addProductForm input, #addProductForm textarea, #addProductForm select
{
	width:100%;
}

#addProductForm textarea
{
	height:200px;
}

.finisProduits
{
	line-height:1.5;
	height:260px;
}

.finisProduits div
{
	float:left;
	color:white;
	padding-right:10px;
}

.itemLink:hover, .itemLink:hover div
{
	text-shadow: 1px 1px 3px white, -1px -1px 3px white, -1px 1px 3px white, 1px -1px 3px white;
}

/* couleur placeholder */
::-webkit-input-placeholder {
   color: #8e8e8e;
}

:-moz-placeholder { /* Firefox 18- */
   color: #8e8e8e;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #8e8e8e;  
}

:-ms-input-placeholder {  
   color: #8e8e8e;  
}




/********************** 2019 **********************/

.liste-produits.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.liste-produits.flex .itemLink {
    width: calc(25% - 10px);
    margin-bottom:10px;
    transition:all 0.4s ease;
}

.liste-produits.flex .itemLink:hover {
    -webkit-filter: brightness(1) drop-shadow(2px 4px 6px black);
    filter: brightness(1) drop-shadow(2px 4px 6px black);
}

.liste-produits.flex .itemPreview {
    float:none;
    width:100%;
    box-sizing:border-box;
    min-height:unset;
    padding:10px;
    height:100%;
    margin-bottom:0px;
    background: unset;
    background-image: radial-gradient(white 0px, transparent 100px);
    background-size: 200px 200px;
    background-position: center center;
    background-repeat: no-repeat;
    border: 5px solid #222222;
    position:relative;
    border-radius:10px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    transition:all 0.4s ease;
}

.liste-produits.flex .itemPreview:before {
    content:"";
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    border:5px solid white;
    border-radius:5px;
}

.liste-produits.flex .titre {
    width:100%;
    text-align:center;
    margin-top:30px;
    margin-bottom:10px;
}