body, div, h1,h2, form, fieldset, input, textarea, footer,p {
	margin: 0; padding: 0; border: 0; outline: none;
}
body {color: rgba(255,255,255,.4); font-family: 'sylfaen';letter-spacing:1pt;overflow:hidden;width:800px;}
p {text-shadow:0 1px 0 #fff; font-size:18px;}
#wrap {width:480px; margin:0 0px 0 0; height:auto;position:relative;float:right;}
h1 {margin-bottom:-150px; text-align:center;font-size:48px; text-shadow:0 1px 0 #ede8d9; }

#form_wrap.hide:after, #form_wrap.hide:before {display:none;}

form { 
	position:relative;overflow:hidden;
	height:auto;width:auto;padding:10px 0px 10px 20px;
	/*border: 1px solid #fff;
	
	border-radius: 3px;
	-moz-border-radius: 3px; -webkit-border-radius: 3px;
	box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
	-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
	-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;*/}

#form_wrap form {height:540px;;position:absolute;}

label {
	margin: 11px 5px 0 0; 
	font-size: 14px; color: rgba(255,255,255,.4);
	text-transform: uppercase; 
	/*text-shadow: 0px 1px 0px #fff;*/
}

input[type=text], input[type=number],input[type=email], textarea {
	/*font: 14px normal normal uppercase helvetica, arial, serif;*/
	font-size: 14pt;
	font-family: 'sylfaen';
	letter-spacing:1pt;
	color:white;background:none;
	width:430px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;
	border:1px solid #f8f5f1;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: inset 0px 0px 1px #726959;
	-webkit-box-shadow:  inset 0px 0px 1px #b3a895; 
	box-shadow:  inset 0px 0px 1px #b3a895;
}

textarea { height: 80px; padding-top:14px;}

textarea:focus, input[type=text]:focus {background:rgba(255,255,255,.85);color: rgba(0,0,0,.6)}

#form_wrap input[type=submit] {
	position:relative;
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
	text-align: center;
    width: 250px;
	height:40px;
    cursor: pointer;
  	font-size: 14pt;
	font-family: 'sylfaen';
	letter-spacing:1pt;
	color:black;background-color:white;
	border:1px solid rgba(255,255,255,.4);
	-moz-box-shadow: inset 0px 0px 1px #726959;
	-webkit-box-shadow:  inset 0px 0px 1px #b3a895; 
	box-shadow:  inset 0px 0px 1px #b3a895;
	left:50%;
	margin-left:-125px;
}
#form_wrap input[type=submit]:hover {
color:white;background-color:black;
}
#nom{
position:relative;font-family: 'sylfaen'; letter-spacing:1pt;
	 width:100%; text-align:center;opacity:1;
	background:none;
	cursor: pointer;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 	
	font-size: 14pt;
	color:white;
	width:430px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;
	border:1px solid #f8f5f1;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: inset 0px 0px 1px #726959;
	-webkit-box-shadow:  inset 0px 0px 1px #b3a895; 
	box-shadow:  inset 0px 0px 1px #b3a895;
}
#prix{
position:relative;font-family: 'sylfaen'; letter-spacing:1pt;
	 width:100%; text-align:center;opacity:1;
	background:none;
	cursor: pointer;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 	
	font-size: 14pt;
	color:white;
	width:100px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;
	border:1px solid #f8f5f1;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: inset 0px 0px 1px #726959;
	-webkit-box-shadow:  inset 0px 0px 1px #b3a895; 
	box-shadow:  inset 0px 0px 1px #b3a895;
}

#nom:focus{background:rgba(255,255,255,.85);color: rgba(0,0,0,.6)}
#form_wrap input:hover[type=submit] {}

#logo{
position:relative;
color: rgba(255,255,255,.4); font-family: 'sylfaen';
float:left;
width:10%;height:8%;
/* border: red solid 1px; */
text-align:center;
padding-top:15px;
}

#titre{
position:relative;
color: rgba(255,255,255,.6); font-family: 'sylfaen';
float:right;
width:87%;height:10%;
/* border: red solid 1px; */
text-align:justify;
padding:10px 30px 0 0;
font-size: 14pt;
}			

#fonds{
background:url(../images/fondsboutique.jpg);
position:absolute;
width:1000px;
height:800px;
}	


.bouton{	
	 /*background-color: #719fee;*/
    -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
    cursor: pointer;
  	font-size: 14pt;
	font-family: 'sylfaen';
	letter-spacing:1pt;
	color:black;background-color:white;
	border:1px solid rgba(255,255,255,.4);
	-moz-box-shadow: inset 0px 0px 1px #726959;
	-webkit-box-shadow:  inset 0px 0px 1px #b3a895; 
	box-shadow:  inset 0px 0px 1px #b3a895;
}

#liste_produits {
	height:540px;
	width:495px;
	position:relative;
	float:left;
	margin:0 0 0 20px;
	text-align:center;
	overflow-y:scroll;
	overflow-x:hidden;
	background:none;
}
#liste_produits::-webkit-scrollbar{
background-color:black;
width:10px;
}

#liste_produits::-webkit-scrollbar-thumb{
background-color:transparent;
border:1px solid #757575;
}
#liste_produits::-webkit-scrollbar {
    /*width: 0 !important;*/
}
/* Les descendants de rang impair sont stylés avec une couleur     */
tbody:nth-child(odd)  { background-color : rgba(255,255,255,.2);color: rgba(255,255,255,.4); font-family: 'sylfaen';}
/* Les descendants de rang pair sont stylés avec une autre couleur */
tbody:nth-child(even){ background-color : rgba(0,0,0,.6);color: rgba(255,255,255,.4); font-family: 'sylfaen'; }
th { background-color : white; padding:0.7em; color:black; }
td { padding:0.5em; }

td :hover{
transform: scale(1.1);
border:1px solid white;
z-index:2;
}
#tableID tbody tr:hover {
	color:white;
}
#tableID tbody tr.clicked {
   background-color:white; color:black;
 
}
#panier{
position:relative;
color: rgba(255,255,255,.4);
font-family: 'sylfaen';
float:left;
width:38px;height:38px;
/*border: red solid 1px;*/
 margin-top:13px;
}

#affichage {
height:540px;
width:460px;
position:relative;
margin-right:15px;
float:right;
}
#nbrepanier{
position:absolute;
color:black;
font-family: 'sylfaen';
font-size:10pt;
width:18px;height:18px;
text-align:center;
left:100px;
display:none;
background-color:white;
-moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px;
	
}
#livraison{
position:absolute;
top:70px;
width:100%;
height:20px;
font-size:8pt;
display:none;
text-decoration:none;
color: rgba(255,255,255,.4); font-family: 'sylfaen';letter-spacing:1pt;
}
#offerte{
position:absolute;width:180px;height:100%;
}
#reste{
position:absolute;left:190px;height:50%;
color: rgba(255,255,255,.4); font-family: 'sylfaen';letter-spacing:1pt;
margin-top:10px;
text-align:center;
width:260px;
}
#barre{
	background-color:black;
	height:5px;
	width:260px;
	position:absolute;left:190px;margin-top:5px;
}
#barre::-webkit-progress-bar {
  background-color: white;
  border-radius: 40px;
}

#barre::-webkit-progress-value {
  border-radius: 40px;
  background-color:grey;
}
#photos{
position:absolute;
width:460px;
height:540px;
display:none;
left:520px;
top:90px;
/*padding:20px;*/
box-sizing:border-box;
overflow:hidden;
background:#121212;
}
#grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(105px,1fr));
grid-auto-rows:140px;
gap:5px;
height:100vh;
/*overflow-y:scroll;*/
/*padding-right:10px;*/
grid-auto-flow:dense;
}
#grid::-webkit-scrollbar{
background-color:#dedede;
width:10px;
}

#grid::-webkit-scrollbar-thumb{
background-color:#757575;
}

.grid-item{
overflow:hidden;
cursor:pointer;
transition: all 0.2s ease;
}
.grid-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition: transform 0.2s ease;
}
.grid-item:hover{
transform: scale(1.05);
box-shadow:0 0 10px rgba(0,0,0,0.6);
z-index:2;
}
.grid-img:hover{
transform: scale(1.2);
}
#boutique_ricardo_collado_4,
#boutique_ricardo_collado_10,
#boutique_ricardo_collado_6{
	grid-column:span 2;
}
#boutique_ricardo_collado_7,
#boutique_ricardo_collado_5,
#boutique_ricardo_collado_11{
grid-row:span 2;
}

#popup-bg{
display:none;
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.8);
z-index:3;
align-items:center;
justify-content:center;
}
#popup-bg.active{
display:flex;
}
#popup-content{
max-width:45%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
#popup-img{
width:100%;
height:auto;	
}
#popup-close{
position:absolute;
top:-42px;
right:0;

}
.popup-close:hover{
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.6)";
filter: alpha(opacity=0.6);
}
.popup-close{
color:white;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.6)";
filter: alpha(opacity=0.6);
font-size:22px;
text-decoration:none;
opacity:0.6;
background:none;
border:0;
font-family:Comic Sans MS, Comic Sans, cursive;
cursor:pointer;
width:40px;
height:40px;
line-height:40px;
text-align:right;
}
#bouton_photos{

background:url(../images/photos.png) white no-repeat;
background-size: 20px 20px;
background-position-y:center;
background-position-x:30px;
position:absolute;
top:17px;
left:300px;
width: 150px;
height:36px;
}
#bouton_photos:hover{
color:white;background-color:black;
background:url(../images/photosblack.png) no-repeat;
background-size: 20px 20px;
background-position-y:center;
background-position-x:30px;
}

#bouton_fermer_photos{
position:absolute;
top:14px;
left:300px;
width: 150px;
height:36px;
z-index:3;
color:white;background-color:black;
}
#bouton_fermer_photos:hover{
color:black;background-color:white;
z-index:4;
}