@font-face {
    font-family: panPizza;
    src: url('GrandHotel-Regular.otf');
}
@font-face {
    font-family: arcon;
    src: url('Arcon-Regular.otf');
}
.fixed{
    top:0;
    position:fixed;
    width:inherit;
}
a {
    text-decoration: none;
}
#lienGoogleMaps{
    transition:0.8s;
    opacity:1;
}
#lienGoogleMaps:hover{
    transition:1s;
    opacity:0.5;
}
html,body{
    height:100%;
}
html{
    min-height:100%;
}
@media screen and (min-width:900px){
    html{
        background: url("images/background.jpg");
        background-position: center center;
		background-repeat:  no-repeat;
		background-attachment: fixed;
		background-size:  cover;
        overflow-y:scroll;
    }
}
@media screen and (max-width:900px){
    html {
        background: url("images/background.jpg");
        background-position: center center;
		background-repeat:  no-repeat;
		background-attachment: fixed;
		background-size:  cover;
        overflow-y:scroll;
    }
}
#bouton-content{
    margin: 0 auto;
    width: 90%;
}
input[type=submit],button{
    border:none;
    opacity:0.8;
    background-color: #bdc3c7;
}
button:focus,button:active,input[type=submit]:focus,input[type=submit]:active{
    outline:none;
    border:none;
}
input[type=submit]:hover,button:hover{
    border:none;
    transition-duration: 0.6s;
    opacity:0.9;
    background-color: #7f8c8d;
}

span{
    font-family: arcon;
    font-size: 16px
}
.carte-titre{
    font-size: 34px;
    font-family: arcon;
    text-align: center;
}

textarea,input,select,option,button{
    width:100%;
    height:50px;
    color:black;
    font-family: arial;
    font-size: 16px
}
input[name=image]{
    color:white;
}
#bouton_pizza,#bouton_pizzamoment{
    color:#FFF59D;
    border-left:2px solid black;
    border-right:2px solid black;
    height:30px;
    margin:0 auto;
    display:block;
    font-size: 85%;
    background-color: #546E7A;
    opacity:0.5;
    transition-duration: 0.8s;
}
#bouton_pizzamoment{
    border-bottom:2px solid black;
}
#bouton_pizza:hover,#bouton_pizzamoment:hover{
    transition-duration: 0.8s;
    opacity:0.9;
    color:#FFEB3B;
}
label{
    font-size:16px;
    font-family:arcon;
    margin-left: 5px;
}

 #NomCommentaire{
        display:inline-block; 
        font-family:arcon; 
        color:#95a5a6; 
        padding:15px 0 0 5px; 
        font-size:20px; 
        line-height:23px;
        width:100%; 
        word-break:break-all;
    }
    #MessageCommentaire{
        display:inline-block;
        vertical-align:top; 
        word-break:break-all; 
        padding-left:5px;
        font-family:arcon; 
        padding-left:5px; 
        color:#F5F5F5; 
        font-size:16px;
    }
ul{
    text-align: left;
    list-style: none;
}



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

    * {
        font-size: 20px;
        color: white;
        /* panPizza; */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        letter-spacing: 0.5px;
        box-sizing: border-box;
    }
	footer{display:none;}
    .div-menu {
        display: inline-block;
        opacity: 0.5;
        padding: 5px 7px 5px 7px;
        border-bottom: 3px solid transparent;
        margin-bottom:-3px;
        transition-duration: 1s;
    }

    .div-menu:hover{
        transition-duration: 1s;
        border-bottom: 3px solid white;
        opacity:1;
    }
    .socialSmartphone img{
        vertical-align: bottom;
        margin-bottom: -5px;
    }
    .socialSmartphone {
        display:inline-block;
        opacity:0.5;
        margin-bottom:5px;
        transition-duration: 1s;
    }
    .socialSmartphone:hover {
        transition-duration: 1s;
        opacity:1;
    }
    .logo{
        width:100%;
        z-index:0;
        height:180px;
        position:relative;
        text-align: center;
    }
    #logo-img{
        margin-top:30px;
    }
    header {
        margin: 0 auto;
        width: 100%;
        border-bottom:3px solid black;
    }

    .top-bar-middle{
       display:table;
       margin:0 auto;
    }
    .top-bar-title{
        display:inline-block;
        width:100%;
        text-align: center;
    }
	 .top-bar-title > h1 > a{
	font-size:1.5rem;
    }

    .top-bar-right{
        position:absolute;
        top:0;
        right:0;
    }
    #main-content{
        margin:0 auto;
        background-color: rgba(0,0,0,0.6);
        width: 960px;
    }
    body{
        width:100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    #menuadmin{
        width:270px;
        height:25px;
        display:block;
    }
    #leftdiv{
        position:fixed;
        z-index:500;
        background-color: black;
    }

    div.image_plat_container img{
        object-fit: cover;
        width: 128px;
        height: 128px;
        margin-right:15px;
        border:2px solid white;
        border-radius:4px;
    }
    #container_plat{
        margin:0 auto; width:90%; margin-bottom:20px;
    }
    #container_image_plat{
        width:132px;height:132px; margin-right:15px; display:inline-block; vertical-align: top;
    }
    #container_nominfoingredient_plat{
    display:inline-block; width:700px;
    }
    .prix_plat{
    float:right;  font-size:80%;
    }
    .infoIngredient{
    display:inline-block; width:100%; font-size:0.90rem;    }
    .nomplat{
    display:inline-block; width:100%; color:yellow;
    }
    #menu{
        display:none;
    }
    #PosterCommentaireContainer{
        position:relative;
        height:300px;
    }
    .inputCommentaireNom{
    width:30%;
    margin-left:5px;
    display:block; 
    font-family:arcon; 
    height:35px;
    }
    .inputCommentaireMessage{
    width:99%;
    margin-left:5px;
    display:block; 
    font-family:arcon; 
    height:100px;
    margin-bottom:5px;
    }
    #PosterCommentaire{
        right:5px;
        font-family:arcon; 
        width:100px;
        height:35px;
        font-size:20px;
        background-color: #BDBDBD;
        position:absolute;
    }
    input[name=captcha]{
        display:inline-block; 
        width:150px; 
        height:30px; 
        margin-bottom:5px;
    }
      #NouveauCommentaire{
       width:50%;
       float:right;
        height:43px; 
        font-family:arcon;
        font-size:20px;
  }
        div.widget_pizza  > ol{
        background:rgba(0,0,0,0.5);
        opacity:0.5;
        padding:0;
        margin-top:0;
    }
    div.widget_pizza > ol > li{
        font-size:18px;
        font-family:arcon;
        list-style:none;
        text-align:left;
    }
    div.widget_pizza{
        display:block;
 
    }
        div.widget_sandwich  > ol{
        background:rgba(0,0,0,0.5);
        opacity:0.6;
        padding:0;
        margin-top:0;
    }
    div.widget_sandwich > ol > li{
        font-size:18px;
        font-family:arcon;
        list-style:none;
        text-align:left;

    }
    div.widget_sandwich{
        display:block;
		
    }
}
@media screen and (max-width: 900px){
	#hideSocial{display:none;}
	footer{display:block; width:100%; background:black; text-align:center;}
	
	#hideSocial{
		display:none;
	}
	
    div.widget_sandwich  > ol{
        background:rgba(0,0,0,0.5);
        opacity:0.5;
        padding:0;
    }
    div.widget_sandwich > ol > li{
        padding:0 0 3px 0;
        font-size:18px;
        font-family:arcon;
        list-style:none;
        text-align:left;
    }
    div.widget_sandwich{
       position:fixed;
       bottom:30px; 
       right:0;
    }
        div.widget_pizza  > ol{
        background:rgba(0,0,0,0.5);
        opacity:0.5;
        padding:0;
    }
    div.widget_pizza > ol > li{
        padding:0 0 3px 0;
        font-size:18px;
        font-family:arcon;
        list-style:none;
        text-align:left;
    }
    div.widget_pizza{
    position:fixed;
      bottom:30px; 
       right:0;
    }
     #grey,.grey{
        background-color:rgba(210, 215, 211,1);
    }
    #black,.black{
        background-color:rgba(149, 165, 166,1);
    }
    * {
        font-size: 22px;
        color: white;
        letter-spacing: 0.5px;
        font-family: panPizza;
        box-sizing: border-box;
    }

   .top-bar-middle {
        background-color:rgba(210, 215, 211,1);
        display:none;
        position: fixed;
        top:0;
        left:0;
        z-index:1;
        height:100vh;
        text-align: center;
        width:250px;
    }
        .top-bar-right{
        text-align:right;
    }
    .top-bar-title{
        padding-left:20px;
		top:-5px;
        position:absolute;
    }
    .div-menu {
        display: block;
        padding: 3px 0 3px 0;
    }
    #menu{
		display:inline-block;
    }
    #menu:hover{
        cursor:pointer;
    }
    #menu img{
        vertical-align: bottom;
    }
    .socialSmartphone{

        margin-right:-6px;
        display:inline-block;
    }
    .socialSmartphone img{
        vertical-align: bottom;
    }
    .logo{
        width:100%;
    }
    #logo-img{
        display: block;
        margin:10px auto;
        width:100%;
    }
    header {
        margin: 0 auto;
        width: 100%;
    }

    #main-content{
        border-top:2px solid white;
        background-color: rgba(0,0,0,0.6);
        overflow:hidden;
        min-height:100%;
    }
    body{
        width:100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    div.image_plat_container{
        width: 84px;
        height: 84px;
        margin:0 auto;
    }
    div.image_plat_container img{
        object-fit: cover;
        width: 84px;
        height: 84px;
        border:2px solid white;
        border-radius:4px;
    }
    #container_plat{
        margin:0 auto 20px; width:100%;
    }
    #container_image_plat{
        width:27%;height:84px;display:inline-block; vertical-align: top;
    }
    #container_nominfoingredient_plat{
        display:inline-block; width:70%; 
    }
    .prix_plat{
        float:right;  font-size:80%;
    }
    .infoIngredient{
        display:inline-block; width:100%; font-size:0.75rem;
    }
    .nomplat{
        display:inline-block; width:100%; color:yellow;
    }

   #PosterCommentaireContainer{
        position:relative;
        height:420px;

    }
    .inputCommentaireNom{
    width:100%;
    display:block; 
    font-family:arcon; 
    height:30px;
    }
    .inputCommentaireMessage{
    width:100%;
    display:block; 
    font-family:arcon; 
    height:100px;
    margin-bottom:5px;
    }
    #PosterCommentaire{
        font-family:arcon; 
        width:100%;
        height:35px;
        font-size:20px;
        background-color: #BDBDBD;
    }
    .loadingimg{
        vertical-align: middle;
        margin:0 auto;
    }
    input[name=captcha]{
        display:block; 
        width:100%; 
        height:30px; 
        margin-bottom:15px;
    }
      #NouveauCommentaire{
       width:50%;
       float:right;
        height:44px; 
        font-family:arcon;
        font-size:20px;
  }




}

#GalerieContainer > div.GalerieImage:hover{
    cursor: pointer;
    border: 2px dashed white;
}
.clickedGalerieImage{
	width:100%;
	height:100vh;
    top:0;
    left:0;
    position:fixed;
	z-index:600;
}


@media screen and (max-width: 600px){
.clickedGalerieImage > img{
	background-color:rgba(0,0,0,0.8);
	border:6px solid white;
	border-radius:7.5px;
	position:fixed;
    max-width:80%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

#GalerieContainer > div.GalerieImage > img{
    width:64px;
    height:64px;
    object-fit:cover;
}
#GalerieContainer > div.GalerieImage{
    margin-left: 15px;
    margin-top: 15px;
    border: 2px solid white;
    border-radius: 3px;
    display: inline-block;
    width: 68px;
    height: 68px;
}
button[name=deleteImageBtn]{
	height:25px;
	width:64px;
}

button[name=deleteImageBtn]:after{
	content: "Supp";
}
}
@media screen and (min-width:600px) {
.clickedGalerieImage > img{
	background-color:rgba(0,0,0,0.8);
	border:12px solid white;
	border-radius:15px;
	position:fixed;
    max-width:70%;
	max-height:100%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}
#GalerieContainer > div.GalerieImage > img{
    width:128px;
    height:128px;
    object-fit:cover;
}
#GalerieContainer > div.GalerieImage{
    margin-left: 15px;
    margin-top: 15px;
    border: 2px solid white;
    border-radius: 3px;
    display: inline-block;
    width: 132px;
    height: 132px;
}
button[name=deleteImageBtn]{
	height:25px;
	width:130px;
}
button[name=deleteImageBtn]:after{
	content: "Supprimer";
}
}