* {margin:0; padding:0; font-size:1em; box-sizing:border-box;}
a img {border:0; max-width:100%; height: auto}
img {border:0; max-width:90%; height: auto;}
.material-icons.orange { color: #dd5014; }
body {font-family:'Exo', sans-serif; font-weight:300;}
.footer {padding:2em 2em; text-align:center; font-size:1em;}

/* Header */
#header {background:url('images/Brasserie_banniere.png') no-repeat center; background-size:contain; width:90%; padding-top:10em; line-height:26em; text-align:center; position:center bottom;}
                                                    
/* Contents */
	/* Main-Block */
	#main-block {padding:2em 2em; text-align:center;}
	#main-block #main-title {margin-bottom:2em;}
	#main-block #main-title h1 {font-size:1.8em; text-align:center; color:#121212; text-transform:uppercase; margin-bottom:.2em; font-family:'Alegreya Sans SC', sans-serif;}
	#main-block #main-title h2 {font-size:1.2em; text-align:center; color:#636363;}
	#main-block #main-title h1::after {content:""; display:block; height:2px; width:10%; margin:1em auto 0; background:#f1c40f;}
	#main-block p,
	#main-block ul,
	#main-block ol {margin-bottom:1em; color:#444;}

	/* Second-Block */
	#second-block {padding:4em 8em; background:#F9F9F9; display:flex; flex-flow:row wrap;}
	#second-block #google-maps {width:48%; margin-right:4%;}
	#second-block #google-maps iframe {width:100%; box-shadow:2px 2px 0 #ddd;}
	#second-block #contact-form {width:48%; font-size:.9em;}
	#second-block #contact-form .form-header h2 {font-family:'Alegreya Sans SC', sans-serif; font-size:1.8em;}
	#second-block #contact-form .form-header h2::after {content:""; display:block; height:2px; width:10%; margin:.5em 0 1em; background:#f1c40f;}
	#second-block #contact-form .form-header p {font-size:.9em; color:#444; margin-bottom:2em;}
	#second-block #contact-form .form-block {margin-top:1em; display:flex; flex-flow:row wrap;}
	#second-block #contact-form .form-block label {width:30%; padding-top:.5em;}
	#second-block #contact-form .form-block input[type="text"],
	#second-block #contact-form .form-block input[type="tel"],
	#second-block #contact-form .form-block textarea {font-family:'Exo', sans-serif; font-weight:300; font-size:.9em; border:0; box-shadow:2px 2px 0 #ddd; padding:.5em; min-width:70%; width:70%;}
	#second-block #contact-form .form-block.form-button {float:right; margin-top:1.5em;}
	#second-block #contact-form .form-block.form-button input {padding:.4em .8em; font-family:'Alegreya Sans SC', sans-serif; font-weight:bold; background:#f1c40f; border:0; box-shadow:2px 2px 0 #ddd;}
	#second-block #contact-form .form-block.form-button input:hover {background:#e74c3c; transition:1s;}

/* Footer */
#footer {background:#00619c; padding:1.5em; text-align:center; color:#F1F1F1; font-size:.85em;}

/*================================*/
/*=== Partie sur le Swipe Menu ===*/
/*================================*/
/* Menu burger */
#menu-burger {position:absolute; top:1.5em; right:1.5em; display:inline-block; cursor:pointer;}
#menu-burger .bar1,
#menu-burger .bar2,
#menu-burger .bar3 {width:32px; height:5px; background-color:#dd5014; margin:6px 0; transition:0.4s;}
#menu-burger:hover {opacity:.75; transition:.5s;}
#menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-9px, 6px); transform:rotate(-45deg) translate(-9px, 6px);}
#menu-burger.clicked .bar2 {opacity: 0;}
#menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-8px, -8px); transform:rotate(45deg) translate(-8px, -8px);}

                  

/* Animations pour le menu slide 
@keyframes slideRight {
	from {left:-25%;}
	to {left:0%;}
}
@-webkit-keyframes slideRight {
	from {left:-25%;}
	to {left:0%;}
}
@keyframes slideLeft {
	from {left:0%;}
	to {left:-25%;}
}
@-webkit-keyframes slideLeft {
	from {left:0%;}
	to {left:-25%;}
}
   */
   
   
/* Responsive design */
@media (min-width:768px) {

#menu-burger {display:none;}
#menu-burger .bar1,
#menu-burger .bar2,
#menu-burger .bar3 {
        display: none;
    }
           
    #menu {
        position: absolute;
        background:#00619c;
        top: 150px;
        right: 10px;
        background: none;
    }
 
    #menu li {
        display: inline;
    }
 
    #menu li a {      
       color:#fff;
        text-decoration:none;
         font-weight:700;
        background:#00619c;
        float: left;
        border: none;
        padding: 0 10px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }
    #menu ul li a:hover {background:#dd5014; transition:background .5s;}
}    


@media (max-width:768px) {
	#menu-burger {top:1em; right:2em; z-index:9999;}
  #menu {position:fixed; z-index:9999; left:-100%; top:auto; background:#00619c; padding:4em 2em; width:100%; min-height:100%; box-shadow:1px 0 1px #9A2519;}

	/*#menu {left:-100%; width:100%;} */
	#second-block #google-maps {width:100%; margin-right:0;}
	#second-block #contact-form {width:100%; margin-top:2em;}

/* Main menu (slide) */

#menu ul li {list-style:none;}
#menu ul li a {display:block; color:#FFFFFF; text-decoration:none; font-weight:700; background:#2c3e50; transition:background .5s; padding:1em; text-align:center; margin-bottom:.5em; box-shadow:1px 1px 0 #666}
#menu ul li a:hover {background:#dd5014; transition:background .5s;}
#menu.visible {animation:.5s slideRight ease-in forwards; transition-delay:0;}
#menu.invisible {animation:1s slideLeft ease-out forwards; transition-delay:0;}

	/* Animations pour le menu slide */
	@keyframes slideRight {
		from {left:-100%;}
		to {left:0%;}
	}
	@-webkit-keyframes slideRight {
		from {left:-100%;}
		to {left:0%;}
	}
	@keyframes slideLeft {
		from {left:0%;}
		to {left:-100%;}
	}
	@-webkit-keyframes slideLeft {
		from {left:0%;}
		to {left:-100%;}
	}
}