@media all and (max-device-width: 480px) {
	
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video 
	{
    max-width: 100%;	}

body
	{
	background-color: rgb(226,213,173);
	background-size: cover;
	font-family: 'Trebuchet MS', Arial, sans-serif;
	margin: 0;
	width: auto;
	}
	
#bloc_page
    {
        width: auto;
    }

#logo_header_mobile
	{
	width: auto;
	}
	
#logo_header
	{
	display: none;
	}
	
#pub4
	{
	display: none;
	}	

.number a
	{
	color: rgb(36,63,137);
	font-size: 200%;
	right: 670px;
	top: 370px;
	}

/* Navigation des liens */

/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
	
    background-color: #333;
	overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
	
}

/* Style the links inside the navigation bar */
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 15px; /*espace entre les liens*/
    text-decoration: none;
    font-size: 15px;
}




/* Add a green background color to the active link */
.navbar a.active {
    background-color: #4CAF50;
    color: white;
}
	
/* When the screen is less than 480 pixels wide, hide all links, except for the active one. Show the link that contains should open and close the navbar (.icon) */
.navbar a:not(.active)     /*.navbar a:not(:first-child)*/
	{display: none;}


.navbar a.icon {
    float: right; /*mettre les 3 barres à droite ou gauche*/
    display: block;
  }


/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
.navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  
.navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }


section
    {
        flex-direction: column;
    }	

#zoom_actu
		{
		display: none;
		}
	
#diaporama
		{
		display: none;
		}	
		
#camion
		{
		display: none;
		}

#nav_screen
		{
		display: none;
		}

#contact-screen
		{
		display: none;
		}

#paragraphe
	{
	width: auto;
	/*background-color: rgb(117,108,117);*/
	color: white;
	border-radius: 10px;
	}

#paragraphe p
{
margin: 10px;
}	
	
#bleu
	{
	font-size: 120%;
	color: rgb(36,63,137)
	}

		
.bleu
	{
	color: rgb(36,63,137)
	}

.bleu a
	{
	color: rgb(36,63,137)
	}

/*design formulaire contact"*/	
.ligne_formulaire
	{
	/*margin-left:50px;*/
	/*
	text-align: right;
	padding-right: 500px;
	*/
	}
	
.champ_formulaire
	{
	color: rgb(36,63,137);
	margin: 10px 5px 10px 5px;
	}	

input[type=text], input[type=email], textarea {
    width: 100%;
	box-sizing: border-box;
    padding: 10px 5px 10px 20px; /*distance entre le texte tapé*/
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}	

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: center;
}

input[type=submit]:hover {
    background-color: #45a049;
}		
		
#paragraphe-footer
	{
	width: auto;
	/*background-color: rgb(117,108,117);*/
	color: rgb(36,63,137);
	border-radius: 10px;
	}
	
section a
	{
    color: rgb(36,63,137); /*rgb(226,213,173);*/
	}	
	
section a:hover /*permet de colorer les liens quand la souris passe dessous*/
	{
    color: rgb(36,63,137);
	}	
	
section a:visited
	{
	color: rgb(36,63,137);
	}	

h3
	{
	color: rgb(133,133,133);
	/*background-color: rgb(23,53,91); /*rgb(148,230,55); vert */
	border-radius: 0px;
	/*padding-left: 10px;*/
	text-align: center;
	}
	
h4
	{
	color: rgb(36,63,137);
	/*background-color: rgb(23,53,91); /*rgb(148,230,55); vert */
	border-radius: 0px;
	/*padding-left: 10px;*/
	text-align: center;
	}
	
h5
	{
	color: rgb(23,53,91);
	/*background-color: rgb(23,53,91); /*rgb(148,230,55); vert */
	border-radius: 0px;
	padding-left: 10px;
	text-align: left;
	}
/*image ronde de l'accueil*/
.avatar {
    vertical-align: middle;
    width: 300px;
    height: 300px;
    border-radius: 50%;
} 	
	
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 4px 4px 4px;
  margin-left: auto;
  margin-right: auto;
  width: 300px; /* largeur obligatoire pour être centré */
}

.column {
     flex: 100%;
    max-width: 100%;
  }
  
.img-responsive {
    width: 100%;
    max-width: 300px;
    height: auto;
} 		

	
}	



@media all and (min-device-width: 481px) {


/*éléments principaux de la page */
body
	{
	background-color: rgb(226,213,173);
	background-size: cover;
	font-family: 'Trebuchet MS', Arial, sans-serif;
	}
#bloc_page
	{
	background-color: rgb(239,241,241);
	width: 1100px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	border: 0px solid black;
	border-radius: 0px;
	}


header 
	{
	display: inline-block;
	width: 1100px;
	height: 90px;
	background-color: rgb(239,241,241);
	border: 0px solid black;
	border-radius: 0px 0px 0px 0px;
	position: relative;
	}

header #logo_header
	{
	width: 1100px; 
	height: 90px;
	}	

#logo_header_mobile
	{
	display: none;
	}	
	
	
	
	

/*contact*/
.number a
	{
	color: rgb(36,63,137);
	font-size: 200%;
	right: 670px;
	top: 370px;
	}
	
.mail
	{
	color: rgb(226,213,173);
	font-size: 120%;
	right: 670px;
	top: 440px;
	}
	
   
/* Navigation des liens */

/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
	
    background-color: #333;
    /*display: inline-block;*/ 
	overflow: hidden;
    position: fixed;
    top: 0;
    width: 1100px;
	
}

/* Style the links inside the navigation bar */
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 20px 65px; /*espace entre les liens48pellet*/
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
 .navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a green background color to the active link */
.navbar a.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the navbar on small screens */
 .navbar .icon {
    display: none;
} 


	
section
	{
	display: inline-block;
	border: 0px solid green;
	vertical-align: top;
	margin-left: 10px;
	}

	
section a
	{
    color: rgb(36,63,137); /*rgb(226,213,173);*/
	}	
	
section a:hover /*permet de colorer les liens quand la souris passe dessous*/
	{
    color: rgb(36,63,137);
	}	
	
section a:visited
	{
	color: rgb(36,63,137);
	}

h3
	{
	color: rgb(133,133,133);
	/*background-color: rgb(23,53,91); /*rgb(148,230,55); vert */
	border-radius: 0px;
	/*padding-left: 10px;*/
	text-align: center;
	}
	
h4
	{
	color: rgb(36,63,137);
	/*background-color: rgb(23,53,91); /*rgb(148,230,55); vert */
	border-radius: 0px;
	/*padding-left: 10px;*/
	text-align: center;
	}
	
h5
	{
	color: rgb(23,53,91);
	/*background-color: rgb(23,53,91); /*rgb(148,230,55); vert */
	border-radius: 0px;
	padding-left: 100px;
	text-align: left;
	}
	
#diaporama
		{
		display: block;
		/*position: absolute;*/
		float: none;
		width: 700px;
		height: 215px;
		margin: auto;
		margin-top: 10px;
		border: 0px solid black;
		}

		
/*gallery*/		
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 4px 4px 4px;
  margin-left: auto;
  margin-right: auto;
  width: 900px; /* largeur obligatoire pour être centré */

}

/* Create four equal columns that sits next to each other */
.column {
  flex: 100%;
  max-width: 99%;
  padding: 4px 4px 4px 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}	
		
.img-responsive {
    width: 100%;
    max-width: 420px;
    height: auto;
} 		
		
table
	{
	/*border-collapse: separate;
	border-spacing: 2px 3px;*/
	}
td
	{
	border: 1px solid rgb(226,213,173);
	width: auto;
	font-size: 100%;
	}

#paragraphe
	{
	width: 1080px;
	background-color: rgb(239,241,241); /*rgb(117,108,117); */
	color: rgb(0,0,0);
	border-radius: 10px;
	}

#paragraphe p
{
margin: 10px;
}	
	
#bleu
	{
	font-size: 120%;
	color: rgb(36,63,137)
	}

		
.bleu
	{
	color: rgb(36,63,137)
	}

.bleu a
	{
	color: rgb(36,63,137)
	}

	
/*design formulaire contact"*/	
.ligne_formulaire
	{
	/*margin-left:50px;*/
	/*
	text-align: right;
	padding-right: 500px;
	*/
	}
	
.champ_formulaire
	{
	color: rgb(36,63,137);
	margin: 10px 5px 10px 5px;
	}	

input[type=text], input[type=email], textarea {
    width: 60%;
	box-sizing: border-box;
    padding: 10px 5px 10px 20px; /*distance entre le texte tapé*/
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}	

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: center;
}

input[type=submit]:hover {
    background-color: #45a049;
}	

#bois
	{
	margin-left:100px;
	}

#pellets
	{
	margin-left:100px;
	}
	
#charbon
	{
	margin-left:100px;
	}

#charbondebois
	{
	margin-left:100px;
	}

#nav_mobile
		{
		display: none;
		}

#accueil-mobile
		{
		display: none;
		}

#pub4-mobile
	{
	display: none;
	}
		
#contact-mobile
		{
		display: none;
		}

#paragraphe-footer
	{
	width: 1080px;
	/*background-color: rgb(117,108,117);*/
	color: rgb(36,63,137);
	border-radius: 10px;
	}		
		
#mailjet
	{
	margin-left: auto;
	margin-right: auto;
	max-width:320px
	}


		
}