/*
╭━━━━━━━━━━━━╯ Karimba.net ╰━━━━━━━━━━━━╮
	Feuille de styles
 __________________________________________________________ 
	© 2019 https://www.karimba.net
╰━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╯
*/

@keyframes plateaucenter {
	0%   {opacity: 0;transform: translateY(-30px) perspective(400px) rotateX(20deg);}
	20%  {opacity: 0;transform: translateY(-30px) perspective(400px) rotateX(20deg);}
	100% {opacity: 1;transform: translateY(0px)   perspective(400px) rotateX(0deg) ;}
}
#KSlider-intro .plateau-centre {
    position: relative;
	left: 2%;
	display: block;
	margin: 19% auto 0;
    width: 27%;
	opacity: 0;
	animation: plateaucenter 0.6s ease-out forwards;
}
#KSlider-intro,
#KSlider-intro .KSliderUl,
#KSlider-intro .KSliderLi,
#KSlider-intro .KSliderLi .background .degrade {
	height: 0;
	padding-bottom: 28%;
}
#KSlider-intro .KSliderLi {
	overflow: hidden;
}

#KSlider-intro .KSliderLi .background img {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 60%;
}
#KSlider-intro .KSliderLi .background .degrade {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 60%;
	background:transparent;
	background-image: -webkit-linear-gradient(90deg, #FDF1E4 0%, #FDF1E4 70%, rgba(253,241, 228, 0) 100%);
	background-image:    -moz-linear-gradient(90deg, #FDF1E4 0%, #FDF1E4 70%, rgba(253,241, 228, 0) 100%);
	background-image:      -o-linear-gradient(90deg, #FDF1E4 0%, #FDF1E4 70%, rgba(253,241, 228, 0) 100%);
	background-image:         linear-gradient(90deg, #FDF1E4 0%, #FDF1E4 70%, rgba(253,241, 228, 0) 100%);
}
#KSlider-intro .KSliderLi .contenu {
	position: relative;
	width: 60%;
	padding: 6% 0 0 15%;
}
#KSlider-intro .KSliderLi .contenu h3,
#KSlider-intro .KSliderLi .contenu p {
	color: #3E3C3C;
	text-align: left;
	margin: 0 0 0.4em;
	line-height: 1.2em;
    text-shadow: 0 0 0.5em #FDF1E4,0 0 0.5em #FDF1E4,0 0 0.3em #FDF1E4;
}
#KSlider-intro .KSliderLi .contenu p {
	font-size: 0.85em;
}
#KSlider-intro .KSliderLi .contenu a.savoirplus {
	font-size: 0.7em;
	margin-top: 1em;
    text-shadow: none;
}
#KSlider-intro .KSliderFixed {height: 20%;}
#KSlider-intro .KSliderArrow {
	width: 15%;
	height: 500%;
}
#KSlider-intro .KSliderArrow span {
	width: 1.2em;
	opacity: 0.75;
}
#KSlider-intro .KSliderArrow:hover span {
	opacity: 1;
}
#KSlider-intro .KSliderArrow.KSliderPrev span {
	background-image: url(../img/slider/fleche-slider-gauche.png);
	left: 0.5em;
}
#KSlider-intro .KSliderArrow.KSliderNext span {
	background-image: url(../img/slider/fleche-slider-droite.png);
	right: 0.5em;
}
#KSlider-intro .KSliderNav {display: none;}

section.intro .bienmanger {
	padding: 13% 10% 4%;
    font-size: 0.55em;
    text-align: center;
}
section.intro .bienmanger h4 {
	font-size: 1.4em;
	font-weight: 400;
	color: #AF1917;
	margin-bottom: 0.8em;
}
section.intro .bienmanger p {
	margin-bottom: 0.3em;
	line-height: 1.3em;
}
section.intro .bienmanger div {position: absolute;}
section.intro .bienmanger div.carre1 {
    width: 3.5em;
    height: 3.5em;
    top: 1.5em;
    left: -1.8em;
	background: #FBE3C9;
}
section.intro .bienmanger div.carre2 {
	width: 1.8em;
    height: 1.8em;
    top: 6.5em;
    left: 4.5em;
	border: 1px solid #AF1917;
	opacity: 0.5;
}
section.intro .bienmanger div.carre3 {
	width: 0.6em;
    height: 0.6em;
    top: 3em;
    right: 5.5em;
	background: #AF1917;
}
section.intro .bienmanger div.carre4 {
    width: 1.6em;
    height: 1.6em;
    top: 6em;
    right: 7em;
	background: #FDF1E4;
}
section.intro .bienmanger div.carre5 {
    width: 3em;
    height: 3em;
    top: 11em;
    right: 1.5em;
	border: 1px solid #62AD23;
	opacity: 0.5;
}



section.services {
	padding: 3% 0;
	background: #FDF1E4;
	text-align: center;
}

section.services nav ul {
	width: 27em;
    margin: 0 auto;
}
section.services nav ul li {
	display: inline-block;
	margin: 0 0.2em;
	vertical-align: bottom;
}
section.services nav ul li a,
section.services nav ul li a:visited {
	color: #3E3C3C;
	font-size: 0.5em;
	 -webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		  -o-transition: all 0.3s ease;
			 transition: all 0.3s ease;
}

section.services nav ul li a:hover,
section.services nav ul li a:focus,
section.services nav ul li.selected a {
	font-weight: 700;
	color: #62AD23;
}

section.services nav ul li a span {
	display: block;
}
section.services nav ul li a img {
	display: block;
	margin: 0 auto 0.05em;
	width:  9em;
	height: 9em;
	border: 1px solid #CCC;
	 -webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		  -o-transition: all 0.5s ease;
			 transition: all 0.5s ease;
}
@media (min-width : 701px) {
	section.services nav ul:hover li a img {
		opacity: 0.5;
	}
}
section.services nav ul li a:hover img,
section.services nav ul:hover li a:hover img {
	border-color: #62AD23;	
	opacity: 1;
}
section.services nav ul li.selected a img {
	width:  11em;
	height: 11em;
	border: 5px solid #62AD23;
}

div.service a.anchor {
	position: absolute;
	display: block;
	top: -9em;
}

div.service div.instructions {
	padding: 2% 0 0.5%;
}
div.service div.instructions h5 {
	color: #AF1917;
	font-size: 0.7em;
	margin-bottom: 0.4em;
}
div.service div.instructions h6 {
	font-size: 0.5em;
	margin-bottom: 0.4em;
	font-weight: 600;
}
div.service div.instructions h6 strong {
	font-weight: 700;
	font-size: 1.1em;
	color: #62AD23;
}
div.service div.instructions dl {
	font-size: 0.5em;
	width: 42em;
    margin: 0.5em auto;
}
div.service div.instructions dt {
	display: block;
	color: #AF1917;
	font-weight: 600;
    float: left;
    width: 7em;
    margin-right: 0.5em;
	text-align: right;
}
div.service div.instructions dd {
	display: block;
	margin-bottom: 0.3em;
	text-align: left;
	margin-left: 7.5em
}
div.service div.instructions p {
	font-size: 0.5em;
}
div.service .commander {
	font-size: 0.5em;
	padding: 2% 0 0;
}
div.service .commander a {
	color: #AF1917;
}
div.service .commander a.savoirplus:hover,
div.service .commander a.savoirplus:focus {color: #FFF;}

@media (max-width : 900px) {
	section.services nav {font-size: 1.25em;}
	section.services nav ul {width: auto;}
	div.service div.instructions h5 {font-size: 0.9em;}
	div.service div.instructions h6 {font-size: 0.65em;}
	div.service div.instructions p {font-size: 0.6em;}
	div.service div.instructions dl {font-size: 0.6em;}
	div.service .commander {font-size: 0.8em;}
}
@media (max-width : 800px) {
	section.intro .bienmanger {font-size: 0.7em;}
}
@media (max-width : 700px) {
	section.services nav {font-size: 1.35em;}
	div.service div.instructions h5 {font-size: 1.1em;}
	div.service div.instructions h6 {font-size: 0.8em;}
	div.service div.instructions p {font-size: 0.7em;}
	div.service div.instructions dl {font-size: 0.7em;width: 100%;}
}
@media (max-width : 600px) {
	#KSlider-intro,
	#KSlider-intro .KSliderUl,
	#KSlider-intro .KSliderLi,
	#KSlider-intro .KSliderLi .background .degrade {padding-bottom: 70%;}
	#KSlider-intro .KSliderLi .background img {width: 100%;}
	#KSlider-intro .KSliderLi .background .degrade {
	    margin-top: 25%;
		width: 100%;
		background-image: -webkit-linear-gradient(0deg, #FDF1E4 0%, #FDF1E4 80%, rgba(253,241, 228, 0) 100%);
		background-image: 	 -moz-linear-gradient(0deg, #FDF1E4 0%, #FDF1E4 80%, rgba(253,241, 228, 0) 100%);
		background-image: 	   -o-linear-gradient(0deg, #FDF1E4 0%, #FDF1E4 80%, rgba(253,241, 228, 0) 100%);
		background-image: 		  linear-gradient(0deg, #FDF1E4 0%, #FDF1E4 80%, rgba(253,241, 228, 0) 100%);
	}
	#KSlider-intro .KSliderLi .contenu {width: 100%;padding: 33% 10% 0;}
	#KSlider-intro .KSliderLi .contenu h3,
	#KSlider-intro .KSliderLi .contenu p {text-align: center;}
	#KSlider-intro .KSliderLi .contenu p {font-size: 1em;}
	#KSlider-intro .plateau-centre {width: 33%;margin: 56% auto 0;}
	#KSlider-intro .KSliderArrow {width: 10%;}
	section.intro .bienmanger {font-size: 0.9em;padding: 13% 20px 3%;}
	section.intro .bienmanger div.carre2,
	section.intro .bienmanger div.carre5 {opacity: 0.2;}
	section.intro .bienmanger div.carre2 {top: 4.5em;left: 3.5em;}
	section.intro .bienmanger div.carre3 {top: 1em;right: 1.5em;}
	section.intro .bienmanger div.carre4 {top: 3em;right: 3em;}
	section.intro .bienmanger div.carre5 {top: 12em;right: 0;}
	section.services nav {font-size: 1.5em;margin-bottom: 1em;}
	section.services nav ul li {margin: 0 0.4em 0.4em;}
	section.services nav ul li.selected a img {width: 9em;height: 9em;}
	div.service {font-size: 20px;}
	div.service div.instructions h5 {line-height: 1.1em;margin-bottom: 0.6em;}
}
@media (max-width : 500px) {
	#KSlider-intro .plateau-centre {width: 30%;margin: 60% auto 0;}
}
@media (max-width : 400px) {
	#KSlider-intro,
	#KSlider-intro .KSliderUl,
	#KSlider-intro .KSliderLi,
	#KSlider-intro .KSliderLi .background .degrade {padding-bottom: 100%;}
	#KSlider-intro .plateau-centre {width: 45%;margin: 75% auto 0;}
}
@media (max-width : 350px) {
	#KSlider-intro .plateau-centre {width:30%;margin: 85% auto 0;}
}

section.produits {
	padding: 7% 0;
	position: relative;
}
section.produits:before,
section.produits:after {
	position: absolute;
	display: block;
	content: "";
}
section.produits:before {
	width: 1em;
	height: 1em;
	right: 1.5em;
	top: 2em;
	border: 1px solid #AF1917;
}
section.produits:after {
	width: 0.4em;
    height: 0.4em;
    right: 0.5em;
    top: 3.5em;
	background: #DDD;
}

section.produits .maxwidth {
	display: table;
	min-height: 11em;
}
section.produits .left,
section.produits .right {
	display: table-cell;
}
section.produits .left {
	position: relative;
	width: 15em;
	padding-right: 5%;
}
section.produits .left div,
section.produits .left img {
	position: absolute;
}
section.produits .left img {
	-webkit-box-shadow:0.1em 0.1em 0.3em rgba(0,0,0,0.4);
	   -moz-box-shadow:0.1em 0.1em 0.3em rgba(0,0,0,0.4);
			box-shadow:0.1em 0.1em 0.5em rgba(0,0,0,0.4);
}
section.produits .left div.carre1 {
	width: 6.5em;
    height: 6.5em;
    top: 0em;
    left: 0.7em;
	border: 1px solid #AF1917;
}
section.produits .left div.carre2 {
	width: 1.5em;
    height: 1.5em;
    top: 9.6em;
    left: 7em;
	background: #AF1917;
}
section.produits .left div.carre3 {
	width: 0.7em;
    height: 0.7em;
    top: 8.2em;
    left: 9.5em;
    background: #FBE1C6;
}
section.produits .left div.carre4 {
	width: 0.3em;
    height: 0.3em;
    top: 12em;
    left: 11.5em;
	background: #FFF4EA;
}

section.produits .left .illus1 {
	width: 11em;
    left: 2em;
    top: 1.3em;
}
section.produits .left .illus2 {
	width: 5.5em;
    top: 4em;
    left: 0;
}
section.produits .right {
	padding-right: 5%;
	vertical-align: middle;
}
#main section.produits h3 {
	margin: 12% 0 1.5em;
	color: #AF1917;
	text-align: left;
}
section.produits p {
	font-size: 0.5em;
	margin-bottom: 1.5em;
	line-height: 2em;
}

@media (max-width : 900px) {
	section.produits p {font-size: 0.65em;}
}
@media (max-width : 700px) {
	section.produits p {font-size: 0.8em;}
	section.produits p .savoirplus {padding: 0.2em 4em;}
}
@media (max-width : 600px) {
	section.produits .maxwidth,
	section.produits .left, section.produits .right {display: block;min-height: 0;width: 100%;}
	section.produits .left {
		padding: 0;
		height: 12.5em;
		width: 13em;
		margin: 0 auto;
	}
	#main section.produits h3 {margin: 0 0 1em;text-align: center;}
	section.produits p {text-align: center;}
}




/* ╰━━┅┉┈  © KARIMBA.NET - www.karimba.net  ┈┉┅━━╯ */