/*!
 * Start Bootstrap - 2 Col Portfolio HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 0px; /* 70px required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
	width:100%;
	margin:auto;
	font-family: 'Roboto', Arial, sans-serif;
	color: #000000
}

html{
    scroll-behavior: smooth;
} 

strong {font-family: 'Roboto', Arial, sans-serif;}

h1, button, .banner p {
    animation-name:opacity;
    animation-duration:6s;
	animation: 1s ease-out 0s 1 slideInFromBottom;
}
    @keyframes opacity{
    0%{opacity:0;}
	50%{opacity:0.5;}
    100%{opacity:1;}
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.banner h1 {height:50px}

.navbar-default .navbar-toggle {border: none; max-width: none}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color: transparent;}

#feature-text {height:30px; font-weight: bold}

h2, h3, h2 strong, h3 strong {font-family: 'Roboto', Arial, sans-serif;}

h4 {color: #aa8367; font-size: 16px}

.parallax {
  /* The image used */
  /* background-image: url("../img/LEMON-IDEA-AGENCE-BANNER.jpg");

  /* Set a specific height */
  /* min-height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
	box-shadow: 0px 1px 5px #ccc
}

button {
    text-align: center;
    background: transparent;
    color: #ffffff;
    border: #ffffff 1px solid;
    padding: 14px 40px 10px 40px;
    font-size: 16px;
	border-radius: 0px;
margin: auto;
display: block;
width:100%;
max-width: 200px}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

.navbar-default .navbar-nav > li > a {color: #ba9a82}

.nav > li > a > img {max-width: 50px}

.paddingleft {padding-left: 50px; margin-top: 15px}
.coordonnees {margin-top: 0px;margin-bottom: 60px}

.flex {	display: flex;}

#notrecarte {background-color: #ffffff; padding-top: 40px}

#notrecarte p{
    font-size:16px; text-align: center
	}

.lacarte p{
    font-size:16px;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: left;
	padding-left: 0px;
	text-align: left !important
}

#notrecarte h3 {color:#ffffff; margin-top: 20px; padding: 15px 10px 10px 10px; font-size: 16px;}

#notrecarte .apropos img {padding-bottom: 20px}

.price {float: right;
    color: #000000;}

.vignette {min-height: 25vh;}

.vignette:hover {
opacity: 0.5;	
    /* flip background vertically */
-webkit-transform:scaleX(-1);
-moz-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
	
}

/* undo the vertical flip for all child elements */
.vignette:hover * {
-webkit-transform:scaleX(-1);
-moz-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}

@media (max-width: 1400px) {
.vignette {min-height: 22vh;}
}

@media (max-width: 991px) {
.vignette {min-height: 35vh;}
}



#contact h2 {color: #d2bdad; font-size: 22px}

#contact hr {border: 4px solid #ffffff; width: 100px; margin-top: 0px; border-radius:10px; margin-bottom: 10px}

#contact a {color: #ffffff}

h3 {text-align: center; color: #ffffff;}

.lacarte {padding-left: 7%; padding-right: 7%; background-color: #faf5f4; padding-bottom: 25px}

.lacarte h3 {width: 100%; background-color: #aa8367; color: #ffffff}

.lacarte2 {padding-left: 7%; padding-right: 7%; background-color: #ffffff}

.lacarte2 h3 {width: 100%; background-color: #aa8367; color: #ffffff; margin-bottom:25px}

.lacarte2 p{text-align: center !important}

#nosservices {background-color: #faf5f4}
#formuleslivraison {background-color: #ffffff}

#formuleslivraison .formules {padding-left: 7%; padding-right: 7%}

#formuleslivraison h4, #formuleslivraison p {text-align: center !important}

#nosservices h3, #onparledenous h3 {color: #aa8367; margin-top:20px; font-family: 'Roboto', Arial, sans-serif; font-size: 18px}

#onparledenous h3 {text-align: left; padding-left: 5%; padding-right: 5%;}

.service {background-color: #ffffff; padding-bottom: 200px}

.temoignage {background-color: #ffffff; padding-bottom: 20px; padding-top: 15px;}

.formule {background-color: #faf5f4; padding-bottom: 25px}

.frise img {width:100%; display: block;}

#nosservices p {text-align: center; padding-top:20px}

#nosservices span {color: #ddd566}
.apropos img {width:100%}

.nosservices {display: flex}


#onparledenous {background-color: #faf5f4; padding-bottom: 30px;}

#onparledenous .nosservices {background-color: #ffffff}

#onparledenous .apropos {padding-bottom: 0px}

#feature-text {font-weight: bold}

.rating {padding-top: 0px !important}

.fa-plus-circle {color: #ddd566; width: 100%; text-align: center; font-size: 22px}

.banner p {color: #ffffff; padding-left: 25%; padding-right: 25%; font-size: 18px}
.bluebackground h2 {text-align: left; color: #ffffff; padding-left: 5%; padding-right: 5%;	font-weight: bold}

hr {border: 4px solid #ddd566; width: 100px; margin-top: 0px; border-radius:10px; margin-bottom: 10px}

.bluebackground a {color: #ffffff; text-decoration: underline}
a {color:#000000}

.contact a {color:#ffffff}

#contact {
	background: #333333;}


.apropos {
    padding-left:7%;
	padding-right:7%;
	display: flex;
	padding-top:20px;
	padding-bottom:40px}

.apropos p{text-align: left; font-size: 15px }

.services {
    padding-left:0%;
	padding-right:0%;
	display: flex;
	padding-top:50px;
	padding-bottom:0px}

.services p{
    text-align:justify;
	font-size:18px
}

#notrecuisine {margin-top: 10px; padding-left:7%; padding-right:7%;}

#notrecuisine h2 {color: #aa8367; font-size:24px; font-family:'Roboto', Arial, sans-serif !important; margin-top: 20px; font-weight: normal}

#notrecuisine p{
    font-size:16px;
	margin-top: 5px;
	margin-bottom: 10px;
	padding-left: 15%;
    padding-right: 15%;
}

#notrecuisine img {
	width: 100%;
	padding-bottom: 20px;
	max-width: 90px;
	max-width: 90px;
    margin: auto;
    text-align: center;
    display: block;}

#references {padding-top:70px;}

.temoignages {
    padding-left:7%;
	padding-right:7%;
	padding-bottom:70px}

.contact {
    padding-left:7%;
	padding-right:7%;
	padding-top:40px;
	padding-bottom:20px}

.apropos2 {color:#ffffff; z-index:1; display:flex; flex-direction: column; padding:0px}
.apropos3 {display:flex; padding:0px}

.bluebackground {background-color:#ddd566;color:#ffffff;z-index:1; margin:auto; padding-top:3em; padding-bottom:3em; margin-right: -15%}

.greybackground {
	background-color:#333333;
		padding-top:25px;
	padding-bottom:15px
	}

.equipe {
	padding-top:0px;
	padding-bottom:30px;
	padding-left: 7%;
	padding-right: 7%
	}

.equipe img {border-radius: 50%; margin-bottom: 10px}

.equipe p {font-size:12px}

.circle {
	background-image: url(https://maffre-id.com/img/PICTO-CERCLE.png);
    background-position: bottom right;
    background-repeat: no-repeat;
	background-size: 25%;
	padding-bottom: 150px
}

.greybackground h2 {color:#ebd7d4; font-size: 20px; text-transform: uppercase}

.greybackground p {color:#ffffff}

.whitebackground {background-color:#ffffff; padding:30px}

.whitebackground img {margin: auto; width: 30%}

.whitebackground h2 {text-align:center; color: #000000; font-size: 14px}

.whitebackground p {text-align:center; color: #000000; font-size: 12px;}

.team {
	border-left: 10px solid transparent;
    border-right: 10px solid transparent;
	margin-top:20px
}

.team img:hover {
	opacity:0.5;
    /* flip horizontally */
-webkit-transform:scaleX(-1);
-moz-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}

#services p {padding-left: 7%;
	padding-right: 7%;
font-size: 15px}

#services h2 {font-size: 18px}

.shadow {-webkit-box-shadow: 0 26px 7.5px -18px rgba(0, 0, 0, 0.20);
	-moz-box-shadow: 0 26px 7.5px -18px rgba(0, 0, 0, 0.20);
	box-shadow: 0 26px 7.5px -18px rgba(0, 0, 0, 0.20);}

.borderleft {border-left:1px solid white}
.bordertop {border-top:1px solid white}


.services {
	padding-left:7%;
	padding-right:7%;
	display: flex;}

.whitebackgroundform {
	background-color:#ffffff;
	padding-left:7%;
	padding-right:7%;
	display: flex;
	padding-top:50px;
	padding-bottom:90px;
	}
.whitebackgroundform p {color: #000000; font-size: 14px; text-align: left; padding: 0px 0px 5px 0px}

.whitebackgroundform .coordonnees {border-top-right-radius: 30px; padding: 10px 30px}

.whiteborder {border:5px solid white}

.imagetemoin {z-index: 10}


.yellow {background-color: #e8d961; color: #ffffff; padding: 20px; font-size: 18px}

.lemonfont {color: #e8d961;
	font-weight: bold; font-size: 15px;
	background-image: url("../img/SITE-LEMON-IDEA-AOUT2023-LEMON-PICTO.png");
	background-repeat: no-repeat;
    background-position: center left;
	line-height: 25px}

.lemonfont span {padding-left:25px; font-size: 18px}

.impressionetroutage p {font-size: 15px; padding-left: 0px}

.impressionetroutage {padding-top: 40px; padding-bottom: 60px}

.imagetemoin img {width:80%}

.temoin {margin-left: 20px; margin-right: 20px}

.arrow::before {
    font-family: "Font Awesome 5 Brands"; 
	font-weight: 400;
	content: "\F0DA";
}

.marginbottom {margin-bottom:30px}

@media (max-width: 991px) {
	.row {display:inherit}
	#nosservices .row {display: inline}
	.borderleft {border-left:none}
	.marginbottom {margin-bottom:6em}
	.marginbottomsm {margin-bottom:3em}
	.team {margin-left:0px}
	h1 {font-size:18px !important}
	.bluebackground {margin-right:0px}
	.apropos3 {margin-top: -90px}
	.paddingleft {padding-left: 0px}
	.temoin {margin-left: 0px; margin-right: 0px}
}



@media (max-width: 767px) {
	h2 {font-size: 16px}
	button {padding: 5px 20px;
    font-size: 12px;}
	.banner p {font-size: 12px}

}

@media (max-width: 390px) {
	h2 {font-size: 14px}
		button {padding: 5px 20px;
    font-size: 10px;}
}

.contact {bottom:20px; text-align:center; margin:auto; width:90%; position: absolute}

.coordonnees p {text-align: left}

#contact {padding-left: 7%; padding-right: 7%; padding-top: 30px; margin-bottom: 0px;}

#contact h2 {text-transform: uppercase}

.button {width:80%; background-color:#333333; margin:auto; padding:20px; color:#ffffff; font-weight:bold; font-size:1.3em; display: block; max-width: 200px}

footer {
    padding-top:60px;
	padding-bottom:100px;
	background-color: #333333;
	padding-left: 7%;
	padding-right: 7%;
	
	
}


footer p{
    text-align:left; padding-top: 15px; font-size: 11px 
}



#contact p{
    text-align:center; color: #ffffff 
}

.insta img{
    float:right; width: 60px; margin-right: 10px; margin-top: 10px }

.fb img{
    float:left; width: 60px; margin-right: 10px; margin-top: 10px }

@media (max-width: 991px) {
footer p {text-align: center}
	.social {width:100%; text-align: center}
	footer img {float:none; text-align: center; display: unset !important; margin-right: 0px !important}
	
}

.newsletter img {position: absolute;margin-top: 15px; margin-left: 10px}

footer .row{margin:0px; margin-top: -30px; }

.nopadding {padding:0px !important}

.mainmenu {height:auto; padding:0px; z-index:1;}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {border-color:#333333}

.navbar-default {
    background-color: #333333;
    border-color: #333333;
	margin:auto;
	height:auto}
	
.menu {background-color:#333333; margin-top:0px; z-index:10000; padding-top: 0px}

.logo {z-index:10000;}

.logo img {padding-bottom:20px; max-width: 250px}


.banner {top:0; z-index:1000;margin-left:0px; margin-right:0px}

.productbanner { padding-top: 50px; padding-bottom: 40px;
    background-size: 100% auto;
    background-position: center top;
    top: 0;
	margin-left:0px; margin-right:0px;
	background-size: cover !important;
}

.impressionbanner {background: url(../img/SITE-LEMON-IDEA-AOUT2023-BANNER-IMPRESSION.jpg) no-repeat;}

.mobilebanner {background: url(../img/SITE-LEMON-IDEA-AOUT2023-BANNER-MOBILE.jpg) no-repeat;}

.evenementbanner {background: url(../img/SITE-LEMON-IDEA-AOUT2023-BANNER-EVENEMENT.jpg) no-repeat;}

.callbanner {background: url(../img/SITE-LEMON-IDEA-AOUT2023-BANNER-CALL-CENTER.jpg) no-repeat;}

.productbanner h1 {font-family: 'Roboto', Arial, sans-serif; text-transform: uppercase} 
.productbanner h1 strong {font-family: 'Roboto', Arial, sans-serif; font-weight: bold} 

#product2 {background-color:  #ebecec}

.headerhome {     padding-top: 0px;
    background: url(../bg-top.jpg) no-repeat;
    background-size: 100% auto;
    background-position: center top;
    top: 0;
	margin-left:0px; margin-right:0px
}

.header {
	padding-top: 20px;
    top: 0;
	margin-left:0px; margin-right:0px
}

.navbar-nav > li > a {
color: #ba9a82;
font-size: 14px;
line-height: 25px;
	padding-bottom: 20px;
	padding-left: 2.5em;
    padding-right: 2.5em;
	font-weight: bold
}

@media (min-width:1550px) {h3 {margin-top: 30%;}}

@media (max-width: 1165px) {
.navbar-nav > li > a {padding-left: 2em; padding-right: 2em;}
	
}

@media (max-width: 2000px) {
.navbar-nav > li > a {padding-left: 2em; padding-right: 2em;}
}

@media (max-width: 1200px) {
.navbar-nav > li > a {padding-left: 1em; padding-right: 1em;}
}

@media (max-width: 1100px) {
.navbar-nav > li > a {padding-left: 1.2em; padding-right: 1.2em;}
}

@media (max-width: 1000px) {
.navbar-nav > li > a {padding-left: 0.7em; padding-right: 0.7em;}
}

.navbar-nav > li > a:hover {
background-color: #ede3dd !important;
	color: #333333 !important
}

@media (max-width: 768px) {
#primarymenu {float:left !important; margin-left: 7em}
	.navbar-nav > li > a {padding-left: 0.5em; padding-right: 0.5em;}
	.flex {	display: block;}
	.nosservices {display: block}

}

p {text-align:center;}

.banner h1 {margin-top:0%; margin-bottom:20%;}
.banner .logo {margin-top: -30%;
    text-align: center;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

h1 {font-size:20px; text-align:center; color:##333333; font-weight: normal}

@media (max-width: 600px) {
	h1 {margin-bottom:5%}
	}
	
h2 {font-size: 34px;
    margin: auto;
	padding-top:25px;
	padding-bottom:15px;
	color:#000000;
	text-align:center;
font-family: "fairplex-narrow", serif;
font-style: normal;}

.cta {position: absolute;
	bottom:0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;}

.cta button {font-size: 14px}

	.dropdown-menu {border-color:#ffffff; border-radius:0 !important; min-width:140px;}
	
	.navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
		background-color:#ffffff !important; font-weight:bold
		}
		
	.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {background-color:#ffffff !important; font-weight:bold}
	
	.dropdown-menu > li > a {
    display: block;
    padding: 5px 0px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #000000;
    white-space: nowrap;
    border-bottom: #ddd566 solid 1px;
    margin-left: 10px;
    margin-right: 10px;
	text-align: center;
	}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {border-color: #ddd566}
	
	.container {
    width: 100%;
	padding:0px}
	
	.row {margin-right:0px;
	margin-left:0px}
		
	p{padding-left:5%;padding-right:5%}
	
@media (max-width: 480px) {

  .menu {background-color:none;}
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {border-color:#ffffff}

.navbar-default {
    background-color: none;
	margin:auto;
	height:auto;
	font-size: 16px;
    line-height: 40px;}
	


}
	
	@media (max-width: 	767px) {
			.menu {
    padding-right:15px!important;
	padding-left:15px!important;}
	
	h3 {margin-top: 13vh}
	

}

select
{
	border: solid 1px #f5f5f5;
	color:#848788;
	line-height:40px;
	font-size:13px;
	border-radius:0px;
	width:100%;
	height:30px;
	text-align:center
}

input[type=text]
{
	border: solid 1px #f5f5f5;
	color:#848788;
	line-height:28px;
	font-size:13px;
	-webkit-appearance: none;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-radius:0px;
	width:100%;
	text-align:left;
	margin-bottom: 12px;
	padding-left: 5px
}

.newsletter input[type=text]
{
	border: solid 1px #f5f5f5;
	color:#848788;
	line-height:30px;
	font-size:13px;
	-webkit-appearance: none;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-radius:10px;
	width:100%;
	text-align:center;
	margin-top: 12px;
	padding-left: 50px;
	min-width: 180px
}

input[type=textarea]
{
	color:#848788;
	width:100%;
	height:150px;
	-webkit-appearance: none;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-radius:0px;
	text-align:left;
	padding-top: 70px;
    font-size: 13px;
	padding-left: 5px;
	margin-bottom: 12px;
}
input[type=submit]
{
	border: solid 1px #aa8367;
	color:#ffffff;
	background-color:#aa8367;
	cursor:pointer;
	font-size:18px;
	margin-top:12px;
	padding:5px;
	-webkit-appearance: none;
	text-align:center;
	width:100%;
	float: right;
	border-radius: 0px
}
input[type=submit]:hover
{
	border:solid 1px #ffffff;
	color:#aa8367;
	background-color:#ffffff;
	-webkit-appearance: none;
	text-align:center
}
#contact span
{
	color:#ef3e61;
	font-size:18px;
}

	
#adress
{
	display:none
}
label
{
	color:#000000;
	font-size:15px;
	font-weight:normal
}

textarea
	{
	border: solid 1px #f5f5f5;
	color:#848788;
	width:100%;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-radius:0px;
	text-align:left;
	padding-bottom: 70px;
    font-size: 13px;
	padding-left: 5px;
}

td {padding-right:5px; background-color:#ffffff; font-size:15px}
table {max-width:100%; background-color:#ffffff}
.right {text-align:right}
.left {text-align:left}
.fields {padding-left:12%; padding-right:12%}
.topmargin {margin-top:10px}

@media (max-width: 992px) {
.right {text-align:center}
.left {text-align:center}
.fields {padding-left:0%; padding-right:0%}
}