@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500,300,700);

body
{
  margin: 0;
  padding: 0;  
  color: #000;
  font-family: "Avenir Next", "Avenir", sans-serif;
  background-image: linear-gradient(to right, #efd0d5, #f4d0cd, #f6d1c3, #f3d3ba, #ebd7b4, #e6d6ad, #dfd5a6, #d8d4a0, #d7cc93, #d7c486, #d7bc7a, #d8b36e);
}

#logo {
position: absolute;
top: 290px;
left: 50%;
transform: translate(-50%);
z-index: 1000;
}

#logo img {
  max-width: 260px;  
}

/* [+] Slider (swiper) 
Source: https://swiperjs.com */
.swiper {
  height: 400px;  
}

.slide1 {
  background: url('../img/slider/pain_5.jpg') center center / cover no-repeat;
}
.slide2 {
  background: url('../img/slider/apero_1.jpg') center center / cover no-repeat;
}
.slide3 {
  background: url('../img/slider/patisseries_1.jpg') center center / cover no-repeat;
}
.slide4 {
  background: url('../img/boulangerie/pain_1.jpg') center center / cover no-repeat;
}
.slide5 {
  background: url('../img/boulangerie/pain_2.jpg') center center / cover no-repeat;
}
.slide6 {
  background: url('../img/boulangerie/pain_3.jpg') center center / cover no-repeat;
}
.slide7 {
  background: url('../img/boulangerie/pain_4.jpg') center center / cover no-repeat;
}
.slide8 {
  background: url('../img/boulangerie/pain_5.jpg') center center / cover no-repeat;
}
.slide9 {
  background: url('../img/boulangerie/boulangerie_1.jpg') center center / cover no-repeat;
}
.slide10 {
  background: url('../img/boulangerie/boulangerie_2.jpg') center center / cover no-repeat;
}
.slide11 {
  background: url('../img/boulangerie/boulangerie_3.jpg') center center / cover no-repeat;
}
.slide12 {
  background: url('../img/boulangerie/boulangerie_4.jpg') center center / cover no-repeat;
}
.slide13 {
  background: url('../img/boulangerie/boulangerie_5.jpg') center center / cover no-repeat;
}
.slide14 {
  background: url('../img/boulangerie/boulangerie_6.jpg') center center / cover no-repeat;
}
.slide15 {
  background: url('../img/boulangerie/apero_1.jpg') center center / cover no-repeat;
}
.slide16 {
  background: url('../img/boulangerie/apero_2.jpg') center center / cover no-repeat;
}
.slide17 {
  background: url('../img/boulangerie/apero_3.jpg') center center / cover no-repeat;
}
.slide18 {
  background: url('../img/boulangerie/apero_4.jpg') center center / cover no-repeat;
}
.slide19 {
  background: url('../img/patisserie/gateau_1.jpg') center center / cover no-repeat;
}
.slide20 {
  background: url('../img/patisserie/gateau_2.jpg') center center / cover no-repeat;
}
.slide21 {
  background: url('../img/patisserie/gateau_3.jpg') center center / cover no-repeat;
}
.slide22 {
  background: url('../img/patisserie/gateau_4.jpg') center center / cover no-repeat;
}
.slide23 {
  background: url('../img/patisserie/gateau_5.jpg') center center / cover no-repeat;
}
.slide24 {
  background: url('../img/patisserie/gateau_6.jpg') center center / cover no-repeat;
}
.slide25 {
  background: url('../img/patisserie/gateau_7.jpg') center center / cover no-repeat;
}
.slide26 {
  background: url('../img/patisserie/gateau_8.jpg') center center / cover no-repeat;
}
.slide27 {
  background: url('../img/patisserie/gateau2_1.jpg') center center / cover no-repeat;
}
.slide28 {
  background: url('../img/patisserie/gateau2_2.jpg') center center / cover no-repeat;
}
.slide29 {
  background: url('../img/patisserie/gateau2_3.jpg') center center / cover no-repeat;
}
.slide30 {
  background: url('../img/patisserie/gateau2_4.jpg') center center / cover no-repeat;
}
.slide31 {
  background: url('../img/patisserie/gateau2_5.jpg') center center / cover no-repeat;
}
.slide32 {
  background: url('../img/patisserie/gateau2_6.jpg') center center / cover no-repeat;
}
.slide33 {
  background: url('../img/patisserie/gateau2_7.jpg') center center / cover no-repeat;
}
/* [-] Slider (swiper) */

/* [+] Menu Burger pour les mobiles et écrans en dessous de 1200px 
Source: https://codepen.io/erikterwan/pen/EVzeRP */
#menuToggle {
  display: block;
  position: relative;
  top: 50px;
  left: 50px;  
  z-index: 1001;  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  color: #232323;  
  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: tomato;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;  
  cursor: pointer;  
  opacity: 0; 
  z-index: 2;   
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;         
  background: #D2B343;
  border-radius: 3px;         
  z-index: 1;  
  transform-origin: 4px 0px;  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #D2B343;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;  
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul {
  transform: none;
}
/* [-] Menu Burger */

/* [+] Menu Baguette (principal)  */
.navigation ul {
  list-style: none;
  margin:0;
  margin-top: 10px;
  margin-bottom: 10px;  
  padding:0;
  text-align:center;
  font-size: 0px;
}

.navigation li {
    display:inline;
    height: 40px;
    border: 0px solid #000;
    font-size: 18pt;
}

.navigation a{
    display:inline-block;
    text-decoration: none;    
    padding-left: 20px;
    padding-right: 20px;
    height: 40px;
    background: repeat-x url(../img/navigation/pain_millieu.png);
    background-size: 124px 40px;
    color: #ffffff;
    font-weight: bold;
    -webkit-text-stroke: 1px black;
    border: 0px solid #000;  
}

.navigation a:hover{
background: repeat-x url(../img/navigation/pain_millieu_croque.png);
background-size: 124px 40px;      
}

.nav_space {
  display: inline-block !important; 
  padding-left: 90px;
  padding-right: 90px;
  height: 40px !important;
  background: repeat-x url(../img/navigation/pain_millieu.png) !important;
  background-size: 120px 40px !important;
}

.pain_gauche {
  display: inline-block !important;
  width: 45px;
  height: 40px;
  background: no-repeat url(../img/navigation/pain_gauche.png);
  background-size: 45px 40px;
}

.pain_droit {
  display: inline-block !important;
  width: 45px;
  height: 40px;
  background: no-repeat url(../img/navigation/pain_droit.png);
  background-size: 45px 40px;
}
/* [-] Menu Baguette */

.clear::after {
  display: block;
  content: "";
  clear: both;
} 

/* On affiche un menu ou l'autre en fonction de la taille de l'écran */
@media (min-width: 1200px) {
  #menu_mobile {
    display: none;
  }   
}

@media (max-width: 1200px) {
  #menu_principal {
    display: none;
  }   
}

.main {
  width: 60%;  
  margin: 100px auto;  
  border: 0px solid #000; 
}

.img_croissant {
  float: right;
  width: 160px;
  margin-left: 20px;  
}

.img_pain {
  float: left;
  width: 160px;
  margin-right: 20px;  
}

.img_denner {  
  width: 160px;
  display: block;
  margin-left: auto;
  margin-right: auto;     
}

.img_gateau {  
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
    
}

.img_charb {  
  float: right;
  width: 340px;
  margin-left: 20px;    
}

.img_bioux {  
  float: left;
  width: 340px;
  margin-right: 20px;    
}

.img_denner_sentier, .img_denner_fabienne, .img_denner_brassus {  
  display: inline-block;
  width: 300px;
  margin-left: auto;
  margin-right: 5px;    
}

.img_denner_fabienne {  
  margin-left: 0;  
}

.img_denner_brassus {
  margin-left: 0; 
  margin-right: auto;    
}

.img_labo_patrons {
  display: block;
  width: 600px;
  margin-left: auto;    
  margin-right: auto;
}

.main_magasins {
  display: flex;    
  width: 80%;  
  margin: 100px auto;    
  border: 0px solid #ccc; 
}

.main_contact {
  width: 50%;
  margin: 100px auto;  
  border: 0px solid #ccc; 
}

.wrapper_title {
  height: 40px;
  background-color: #d2b343;
  border-radius: 13px 13px 0 0;
  text-align: center;
  color: #fff;
  line-height: 40px;
  font-family: 'Great Vibes';
  font-size: 24pt;  
}

.wrapper {
  padding: 20px;
  background-color: #fff;
  border-left: 1px solid #d2b343;
  border-right: 1px solid #d2b343;
  border-bottom: 1px solid #d2b343;
  font-family: 'Helvetica';  
  font-size: 14pt;
      
}

.content {
  padding: 10px;
  border: 0px solid #ccc;
  line-height: 30px; 

}

.aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}

.button_tel {
  color: #000;
  text-align: center;
  border: #000;
  border-radius: 5px;
}

/* [+] Formulaire de contact */
 /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #d2b343;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
} 
/* [-] Formulaire de contact */



.footer-distributed {
	background: #666;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;
	padding: 55px 50px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
	width: 40%;
}

/* The company logo */

.footer-distributed h3{
	color:  #ffffff;
	font: normal 36px 'Open Sans', cursive;
	margin: 0;
}

.footer-distributed h3 span{
	color:  lightseagreen;
}

/* Footer links */

.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
  font-weight:400;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name{
	color:  #222;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
	width: 35%;
}

.footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}

.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
  font-weight:400;
	vertical-align: middle;
	margin:0;
}

.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}

.footer-distributed .footer-center p a{
	color:  lightseagreen;
	text-decoration: none;;
}

.footer-distributed .footer-links a:before {
  content: "|";
  font-weight:300;
  font-size: 20px;
  left: 0;
  color: #fff;
  display: inline-block;
  padding-right: 5px;
}

.footer-distributed .footer-links .link-1:before {
  content: none;
}

/* Footer Right */

.footer-distributed .footer-right{
	width: 20%;
}

.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  #92999f;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}

.footer-distributed .footer-company-about span{
	display: block;
	color:  #ffffff;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}

.footer-distributed .footer-icons{
	margin-top: 25px;
}

.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;

	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;

	margin-right: 3px;
	margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

	.footer-distributed{
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

	.footer-distributed .footer-center i{
		margin-left: 0;
	}

}