#menu, #buttons, #pga, #pgb, #pgc, #pgd, #pge, #pgf{
position:absolute;
display:block;
}

#menu{
width:100%;
left:0;
height:100%;
top:0;
z-index:2;
}

#buttons{width:100%;height:100%;text-align:center;}


/*position global des bouton*/
#pga{
top:2.5%;
height:15%;
width:100%;left:0;}

#pgb{
top:20%;
height:7.5%;
width:100%;left:0;}
#pgc{
top:27.5%;
height:7.5%;
width:100%;left:0;
}
#pgd{
top:35%;
height:7.5%;
width:100%;left:0;
}
#pge{
top:42.5%;
height:7.5%;
width:100%;left:0;
}
#pgf{
top:60%;
height:7.5%;
width:100%;left:0;}

/*PERSONALISATION DES ZONE BOUTON*/
/*------------1er bouton de la liste---------------------------*/
#pgb{background-image:url('../images/lignetop.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
z-index:1;}
/*------------bouton intermediare de la liste---------------------------*/
#pgc, #pgd{
background-image:url('../images/lignesep.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
z-index:1;}
/*------------dernier de la liste---------------------------*/
#pge{
background-image:url('../images/lignesep.gif'), url('../images/lignesep.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%, 50% 100%;
z-index:1;}
/*------------bouton reserver---------------------------*/
#pgf{background-image:url('../images/lignetop.gif');
background-size:100%;
background-repeat:repeat-y;
background-position:50% 0%;
z-index:1;}
/*------------fin zoning carde bouton---------------------------*/
/*-PERSONALISATION PLACE ET STYLE BOUTON -*/

#pgb button, #pgc button, #pgd button, #pge button{

width:80%;height:80%;
display:block;position:absolute;
top:10%; left:10%;
background-color:transparent;
border:none;
color:#a19172;
font-weight:800;

}
#pgb button:hover, #pgc button:hover, #pgd button:hover, #pge button:hover{
color:#a64447;
}
#pgb.selected button, #pgc.selected button, #pgd.selected button, #pge.selected button{
color:#a64447;
}

#pga button{
width:100%;height:100%;
display:block;position:absolute;
background-color:transparent;
border:none;
color:transparent;
}
#pgf button{
width:80%;height:80%;
display:block;position:absolute;
top:10%; left:10%;
background-color:transparent;
border:none;
color:#eee;
font-weight:800;
}

#pgb button, #pgc button, #pgd button, #pge button, #pgf button{
font-size:0.8em;cursor:pointer;
}


/*------------------------------------------------------------------------*/
/*---------------------------fin css standard---------------------------------------------*/
/*-------------------------------debut responsive-----------------------------*/
/*------------------------------------------------------------------------*/
/*Modif Responsive*/

@media only screen and (min-width :1240px) {

#pgf{
top:65%;
}

}

@media only screen and (max-width :800px) {
	#pga{
	top:0;
	height:12.5%;
	width:45%;left:0;
	}
	

/*position global des bouton*/

#pgb, #pgc, #pgd, #pge, #pgf {
height:12.5%;
top:87.5%;
width:20%;
}
#pgb{
left:0;}
#pgc{
left:20%;
}
#pgd{
left:40%;
}
#pge{
left:60%;
}
#pgf{
left:80%;}

/*image de fond des bouton en ligne*/
#pgb, #pgc, #pgd, #pge{background-image:url('../images/fond/fond_01.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
}



/*------style des bouton--------*/

#pgb button, #pgc button, #pgd button, #pge button, #pgf button{
font-size:0.7em;
}
	
}
/*---------------------------------*/
/*------------zoning horizontal-------------------*/
/*-------------------------------*/
@media only screen and (max-width :1000px) and (max-height:600px) {

/*position global des bouton*/

#pgb{
top:20%;
height:12.5%;
width:100%;left:0;}
#pgc{
top:32.5%;
height:12.5%;
width:100%;left:0;
}
#pgd{
top:45%;
height:12.5%;
width:100%;left:0;
}
#pge{
top:57.5%;
height:12.5%;
width:100%;left:0;
}
#pgf{
top:75%;
height:25%;
width:100%;left:0;}

/*PERSONALISATION DES ZONE BOUTON*/
/*------------1er bouton de la liste---------------------------*/
#pgb{background-image:url('../images/lignetop.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
z-index:1;}
/*------------bouton intermediare de la liste---------------------------*/
#pgc, #pgd{
background-image:url('../images/lignesep.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
z-index:1;}
/*------------dernier de la liste---------------------------*/
#pge{
background-image:url('../images/lignesep.gif'), url('../images/lignesep.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%, 50% 100%;
z-index:1;}
/*------------bouton reserver---------------------------*/
#pgf{background-image:url('../images/lignetop.gif');
background-size:100%;
background-repeat:repeat-y;
background-position:50% 0%;
z-index:1;}

}



@media only screen and (max-width :580px) {

/*position global des bouton*/

#pgb, #pgc, #pgd, #pge, #pgf {
height:12.5%;
top:87.5%;
width:20%;
}
#pgb{
left:0;}
#pgc{
left:20%;
}
#pgd{
left:40%;
}
#pge{
left:60%;
}
#pgf{
left:80%;}

/*Taille des bouton place du texte */

#pgb button, #pgc button, #pgd button, #pge button, #pgf button{
width:95%;
left:2.5%;
}

/*--bouton logo-*/
	#pga{
	top:0;
	height:12.5%;
	width:45%;left:0;}

/*------style des bouton--------*/

#pgb button, #pgc button, #pgd button, #pge button, #pgf button{
font-size:0.6em;
}
/*image de fond des bouton en ligne*/
#pgb, #pgc, #pgd, #pge{background-image:url('../images/fond/fond_01.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
}


	
}



@media only screen and (max-width :580px) and (max-height:420px) {
/*position global des bouton*/
#pga{
top:2.5%;
height:15%;
width:100%;left:0;}

#pgb{
top:20%;
height:12.5%;
width:100%;left:0;}
#pgc{
top:32.5%;
height:12.5%;
width:100%;left:0;
}
#pgd{
top:45%;
height:12.5%;
width:100%;left:0;
}
#pge{
top:57.5%;
height:12.5%;
width:100%;left:0;
}
#pgf{
top:75%;
height:25%;
width:100%;left:0;}

/*PERSONALISATION DES ZONE BOUTON*/
/*------------1er bouton de la liste---------------------------*/
#pgb{background-image:url('../images/lignetop.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
z-index:1;}
/*------------bouton intermediare de la liste---------------------------*/
#pgc, #pgd{
background-image:url('../images/lignesep.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
z-index:1;}
/*------------dernier de la liste---------------------------*/
#pge{
background-image:url('../images/lignesep.gif'), url('../images/lignesep.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%, 50% 100%;
z-index:1;}
/*------------bouton reserver---------------------------*/
#pgf{background-image:url('../images/lignetop.gif');
background-size:100%;
background-repeat:repeat-y;
background-position:50% 0%;
z-index:1;}

}

@media only screen and (max-width :420px) {

/*position global des bouton*/

#pgb, #pgc, #pgd, #pge, #pgf {
height:12.5%;
top:87.5%;
width:20%;
}
#pgb{
left:0;}
#pgc{
left:20%;
}
#pgd{
left:40%;
}
#pge{
left:60%;
}
#pgf{
left:80%;}


/*image de fond des bouton en ligne*/
#pgb, #pgc, #pgd, #pge{background-image:url('../images/fond/fond_01.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
}
}

@media only screen and (max-width :420px) and (max-height:380px) {
/*position global des bouton*/
#pga{
top:2.5%;
height:15%;
width:100%;left:0;}

#pgb{
top:20%;
height:12.5%;
width:100%;left:0;}
#pgc{
top:32.5%;
height:12.5%;
width:100%;left:0;
}
#pgd{
top:45%;
height:12.5%;
width:100%;left:0;
}
#pge{
top:57.5%;
height:12.5%;
width:100%;left:0;
}
#pgf{
top:75%;
height:25%;
width:100%;left:0;}

/*PERSONALISATION DES ZONE BOUTON*/
/*------------1er bouton de la liste---------------------------*/
#pgb{background-image:url('../images/lignetop.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
z-index:1;}
/*------------bouton intermediare de la liste---------------------------*/
#pgc, #pgd{
background-image:url('../images/lignesep.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
z-index:1;}
/*------------dernier de la liste---------------------------*/
#pge{
background-image:url('../images/lignesep.gif'), url('../images/lignesep.gif');
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%, 50% 100%;
z-index:1;}
/*------------bouton reserver---------------------------*/
#pgf{background-image:url('../images/lignetop.gif');
background-size:100%;
background-repeat:repeat-y;
background-position:50% 0%;
z-index:1;}

}