/*@font-face {
    font-family: 'twenyregular';
    src: url('fonts/roundspace-webfont.eot');
    src: url('fonts/roundspace-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roundspace-webfont.woff2') format('woff2'),
         url('fonts/roundspace-webfont.woff') format('woff'),
         url('fonts/roundspace-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}*/

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on October 15, 2016 */
@font-face {
    font-family: 'twenyregular';
    src: url('fonts/roundspace-webfont.woff2') format('woff2'),
         url('fonts/roundspace-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ############################# Send Message ############################ */
#divSendMessage form
{
	border:0px solid #ccc;
	border-radius: 20px;
	padding:20px;
	margin:auto;
	margin-bottom:20px;
	max-width:500px;
}

#divSendMessage form h1
{
	font-family:arial;
	margin-bottom:20px;
	color:#444;
}

#divSendMessage form p
{
	font-family:arial;
	font-size:0.8em;
	color:#555;
	text-shadow:0px 0px 0px;
}

#divSendMessage form a
{
	text-decoration: none;
	color:#55d;
}

#divSendMessage form a:hover
{
	text-decoration: underline;
}

#divSendMessage hr
{
    display: block;
    border:1px solid #eee;
    border-top:0px;
    margin-top:25px;
    margin-bottom:25px;

}

#divSendMessage label
{	
	font-family:arial;
	margin-left:2px;
	font-weight: bold;
	font-size:0.8em;
}

#divSendMessage .msg
{
	border:1px solid #faa;
	background-color:#fcc;
	margin-bottom:20px;
	border-radius:3px;
	padding:15px;
}

#divSendMessage .msg p
{
	color:#a55;
	font-family:arial;
	font-size:0.8em;
	margin:0px;
}

#divSendMessage input[type="text"], input[type="password"], input[type="submit"]
{
}

#divSendMessage input[type="text"], input[type="password"], textarea
{
	border-radius:3px;
	border:1px solid #ccc;
	padding:8px;
	width:calc(100% - 18px);
	margin-bottom:20px;
	margin-top:5px;
    box-shadow:0px 1px 3px 0px #ddd inset;
    font-size:0.9em;
    color:#555;
    display:block;
}

#divSendMessage input[type="submit"]
{
	border:0px;
	border-radius:6px;
	padding:12px;
	padding-right:18px;
	padding-left:18px;
	background-color: #3d3;
	font-size:1em;
	color:#fff;
}

#divSendMessage textarea{
	height:100px;
}
/*#divSendMessage{
	border:2px solid #000;
	margin:auto;
}

	#divSendMessage p{
		font-size:0.9em;
		font-family:arial;
		text-shadow:0px 0px 0px;
		font-weight: normal;
		color:#333;
	}

	#divSendMessage form{
		border:2px solid #f00;
		max-width:500px;
		margin:auto;
		text-align:left;
	}

		input[type="text"]{
			padding:12px;
			border:1px solid #ccc;
			width:100%;
			margin-bottom:20px;
		}

		textarea{
			border:1px solid #ccc;
			padding:12px;
			width:100%;
		}

	#divSendMessage h1{
		font-family:arial;
	}

	#divSendMessage p{
		font-family:arial;
		color:#444;
	}*/
/*########################################################################*/

body {
	margin:0px;
}

#wrapper {
	max-width:2000px;
	margin:auto;
}

section {
	vertical-align:top; /*ac inline-block*/
}

/*######################## Map ##########################*/
#map{
	width:100%;
	height:400px;
}
/*######################################################*/



.div-center-middle, #divSlide .div-center-middle{/* Align element of div in the center and middle - must add #divSlide otherwise it doesn't work */
	display:flex;
	justify-content:center;
	align-items:center;
	text-align: center;
}

/*######################## Slide ##########################*/
#sectionSlide
{
	border:0px solid #00f;
}

#divSlide{
	border:0px solid #f00;
	margin:20px;/*Le margin de .divCadre n'a pas d'effet sur divSlide. Il faut donc le rajouter ici*/
}

	#sectionSlide p {
		font-size:2em;
	}

	#divSlide1, #divSlide2, #divSlide3{
		height:500px;
	}

	#divSlide1
	{
		background: url('../pic/bg_humus.jpg') no-repeat center;
		background-size:cover;
	}

		#divSlide1 img{
			display:inline-block;
		}

	#divSlide2
	{
		background: url('../pic/bg_pancakes.jpg') no-repeat center;
		background-size:cover;
	}

	#divSlide3
	{
		background: url('../pic/slide_menu/slide_menu_maca_canela.png') no-repeat center;
		background-size:cover;
	}

		#divSlide3 img{
			display:inline-block;
		}
/*###############################################################*/

/*######################## Les 4 div de la page d'accueil ##########################*/
#div0{
	background: url('../pic/animal.jpg') no-repeat center;
	background-size:cover;
}

#div1 {
		background: url('../pic/newsletter.jpg') no-repeat center;
	background-size:cover;
}

	#div1 img {/*"Get it on Google*/
		width:150px;
	}

#div2 {
		background: url('../pic/newsletter2.jpg') no-repeat center;
	background-size:cover;
}

#div3 {
		background: url('../pic/smoothie_fruits.jpg') no-repeat center;
	background-size:cover;
}

#div4 {
		background: url('../pic/map.jpg') no-repeat center;
	background-size:cover;
}
/*################################################################################*/

.divCadre {
		margin:20px;/*Pas d'effet sur divSlide*/
		box-shadow: 0px 5px 10px #999;
		border:0px solid #fff;
}

.section-50-pr-cent {/* pour les sections dont la largeur doit faire la moitié de la page */
	width:50%;
	display: inline-block;
	border:0px dashed #0f0;
}

.div-height-2 {/* la deuxième taille de cadre */
	height:400px;
	padding:8px;
}

.div-inside-left, .div-inside-right{
	display: inline-block;
	width:50%;
	vertical-align:middle;
	text-align:center;
}

	.div-inside-left img{
		width:100%;
		vertical-align: middle;
	}

	.div-inside-right h1{
		font-family:arial;
		color: #000;
		margin:20px;
	}

	.div-inside-right p{
		font-family:arial;
		color:#444;
		text-shadow: 0px 0px 0px;
		font-size:1em;
		font-weight: normal;
		margin:20px;
	}

		.div-inside-right p span{
			font-size:0.8em;
		}

.h-ul{
	border:0px solid #5e5;
	list-style-type: none;
	overflow: hidden;
	margin:0px;
	display:inline-block;
	vertical-align: top;
	padding:0px;
}

	.h-ul li{
		float: left;
	}


		.h-ul li {
			text-transform: uppercase;
			font-weight: bold;
			display:block;
		}

		.h-ul li a{
			text-decoration: none;
		}

	.divNavBtn ul{
		margin-left:20px;
	}

		.li1 a
		{
			color:#777;
		}

		.li2 a
		{
			color:#b58;
		}

		.li3 a
		{
			color:#e29;
		}

			.divNavBtn li a{
				font-family: verdana;
				font-size:0.8em;
				margin-right:10px;
			}

				.divNavBtn li a:hover{
					color:#000;
				}

.divRsBtn{
	margin-left:20px;
	padding-top:2px;
}

.fb-like{
	margin:0px;
	vertical-align: top;
}

/* /!\ */
p {
	font-family:verdana;
	color:#DBE343;
	font-size:1.2em;
	font-weight: bold;
	text-shadow: 0px 1px 1px #444;
}

	strong {
		font-family:twenyregular;
		text-transform: uppercase;
		color:white;
		font-weight: normal;
		font-size: 2.5em;
	}

	.spanBtn {
		font-size:0.7em;
		font-family:arial;
		display:inline-block;
		margin-top:3%;
	}

		.spanBtn a {
			background-color:#E3278A;
			padding:10px;
			padding-right:15px;
			padding-left:15px;
			border-radius:20px;
			color:white;
			text-decoration: none;
			display:block;
		}

/*############################# TOP ##################################*/
#sectionMenuTop {
	border:0px solid #555;
	padding:20px;
}

	.divMenuTopLeft, .divMenuTopRight, .divMenuTopMiddle{
		display: inline-block;
		vertical-align: top;
	}

	.divMenuTopLeft{
		width:20%;
		text-align: left;
	}

		#imgLogo{
			width:120px;
		}

	.divMenuTopRight{
		width:20%;
		text-align: right;
	}

	.divMenuTopMiddle{
		width:60%;
		text-align:center;
	}

	#sectionMenuTop li a {
		border-bottom:3px solid #fff;/*pour le border-bottom qd a:hover*/
		padding-bottom: 8px;/*pour le border-bottom qd a:hover*/
		margin:12px;/*à la place de padding pour que lorsque a:hover, le border-bottom ne dépasse pas le texte*/
		font-family: arial;
		display: block;
		color: #999;
		font-size: 0.7em;

	}

	#sectionMenuTop li a:hover {
		border-bottom:3px solid #DBE343;
	}
/* #####################################################*/

#sectionBottom {
	border:0px solid #555;
	background-color:#eee;
	padding:1px;/* ou alors définir au moins 1px border - Sinon Section ne prend pas la hauteur souhaitée*/
}

#divBottom {
	margin:20px;
}

#divBottom ul {
	margin-top:6px;
}

#divBottom li  {
	margin:8px;
	font-family: arial;
	color: #555;
	font-size: 0.7em;
}

#divBottom li a{
	color:#555;
}

#divBottom li a:hover {
	color:#aaa;
}

.imgRsBottom{
	width:50px;
	margin:5px;
}

/* ################################################################### */

#googleMap {
	border:0px solid #0ff;
	width:100%;
	height:100%;
	/*z-index: 0;
	position:absolute; 
	bottom: -555px; 
	left: 0; 
	right: 0;*/
}

@media all and (max-width:954px){/*qd width plus petit que 955px*/
	#sectionRsBtn{/*on enlève les btn des réseaux sociaux*/
		display:none;
	}

	.div-height-2{
		height:250px;
	}

	p {
		font-size:1em;
	}

	#sectionSlide p {
		font-size:1.5em;
	}

	.spanBtn {
		margin-top:4%;
	}


	.divMenuTopLeft, .divMenuTopRight, .divMenuTopMiddle{/*les éléments du top sont mis un au dessus de l'autre*/
		display: block;
		width:100%;
		vertical-align: top;
		text-align:center;
	}

	.div-inside-right, .div-inside-left{
		display:block;
		width:100%;
	}

	.div-inside-right{
		padding-top:10%;
		padding-bottom:10%;
	}



		#divSlide1 img{
			height:240px;
		}

		#divSlide3 img{
			height:240px;
		}
}

@media all and (max-width:750px) {/*qd width plus petit que 751px*/
	.section-50-pr-cent {/*les section 50% passent à être affichés à 100% */
		display:block;
		width:100%;
	}

	.divCadre, #divSlide {/* on enlève les margin */
		margin:0px;
		box-shadow:0px 0px 0px #000;
		border-bottom:1px solid #fff;
	}

	#sectionSlide p {
		font-size:1em;
	}

	.divMenuTopLeft{/*on enlève le logo*/
		display:none;
	}
}