/* GLOBALES *****************************************************/

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

	}

	* {
		outline: none !important;
	}
	
	html {
		height: 100%;
		width: 100%;
	}
	
	body {
		font-family: 'josefin_sans_stdlight', sans-serif;
		text-align: justify;
		background: #fff;
		font-size: 22px;
	}
	
	/* Opacité */
.opacityl {
  position: relative;
  width: 100%;
}



.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
}

.opacityl:hover .image {
  opacity: 0.3;
}

.opacityl:hover .middle {
  opacity: 1;
}

.gam {
  background-color: #8887ac80;
  color: white;
  font-size: 100%;
  padding: 16px 32px;
}
	
	.clr {
		clear: both;
	}
	
	.greyback {
		background: #f3f5f7;
	}
	
	.purpleback {
		background: #FF83AA;
	}
	
	.wisteriaback {
		background: #9B59B6;
	}
	
	.wistfulback {
		background: #AEA8D3;
	}
	
	.purplefore {
		color: #8887AC;
	}
	
	.wellness {
		color: #D47AFA;
	}
	
	.nutricosmetique {
		color: #FF83AA;
	}
	
	.sante {
		color: #5CDAED;
	}
	
	.bio {
		color: #4BF81E;
	}
	
	.gummies {
background-image: linear-gradient(to left, violet, indigo, blue, green, orange, red);   
      -webkit-background-clip: text;
      -moz-background-clip: text; 
      background-clip: text;
      color: transparent;
	}
	
		.gummies2 {
background-image: linear-gradient(to left, violet, indigo, blue, green, orange, red,violet, indigo, blue, green, orange, red,violet, indigo, blue, green, orange, red,violet, indigo, blue, green, orange, red); 
      -webkit-background-clip: text;
      -moz-background-clip: text; 
      background-clip: text;
      color: transparent;
	}

	
	
	.sport {
		color: #36363d;
	}
	
	.wisteriafore {
		color: #9B59B6;
	}
	
	.whitefore{
		color: #fff;
	}
	
	.top50 {
		margin-top: 50px;
	}
	
	.pad30 {
		padding-top: 20px;
		padding-bottom: 15px;
	}
	
	.pad60 {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	
	hr {
		border-color: #C8F7C5;
	}
	
	.nolink, .nolink:active, .nolink:hover, .nolink:focus {
		text-decoration: none;
		color: inherit;
	}
	
	.img-responsive{
		display: initial !important;
	}

	.centeredlogo {
		margin: auto;
		float: center;
		display: initial;
	}
	
	.bulletlink {
		color: #000 !important;
		text-decoration: none !important;
	}
	
	.bulletlink2 {
		color: white !important;
		text-decoration: none !important;
	}
	
	
	.bullet, .bullet a {
		background: rgba(255,255,255,0.7);
		width: 205px;
		height: 205px;
		float: center;
		margin: auto;
		text-align: center;
		border-radius: 50%;
		display: table;
	}
	
	.bullet {
		margin-top: 130px;
	}
	
	.bullet-content {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	
	.littlebullet {
		background: rgba(255,255,255,0.7);
		width: 45px;
		height: 45px;
		float: center;
		margin: auto;
		text-align: center;
		border-radius: 50%;
		margin-top: 15px;
	}
	
	.borderleft {
		border-left: 1px solid #AEA8D3;
	}
	
	.centercontainer {
		display: table;
		width: 100%;
	}
	
	.centercontent {
		display: table-cell;
		vertical-align: middle;
		
	}
	
	.calheight {
		margin-top: 30px;
	}
	
	.slide {
		position: relative;
}


	strong {
		font-weight: normal;
	}
	
	u {
		text-decoration: none;
	}
	
	b strong {
		font-weight: bold !important;
	}
	
	.totop, .totop a, .totop:hover {
		position: fixed;
		right: 20px;
		bottom: 20px;
		background: #8887AC;
		font-size: 25px;
		color: #fff !important;
		padding: 5px 3px 5px 5px;
		z-index: 99999;
		display: none;
		border: 1px solid #fff;
	}
	
	
	.textlink {
		color: #55bfb7 !important;
		text-decoration: none !important;
	}
	
	.textlink2 {
	color: #ffffff !important;
	text-decoration: none !important;
	}
/* LAYOUT *****************************************************/		
	
	.homebackground {
		background: url(../images/background-herbatech.jpg) center center no-repeat;
		background-size: cover;
	}
	
	.rdbackground {
		background: url(../images/recherche-developpement-complement-alimentaires.jpg) center center no-repeat;
		background-size: cover;
		height: 300px;
		border-bottom: 5px solid #8887AC;
	}
	
	.psbackground {
		background: url(../images/produits-et-services.jpg) center center no-repeat;
		background-size: cover;
		height: 300px;
		border-bottom: 5px solid #8887AC;
	}
	
	.rhbackground {
		background: url(../images/rh.jpg) center center no-repeat;
		background-size: cover;
		height: 300px;
		border-bottom: 5px solid #8887AC;
	}
	
	.gcmbackground {
		background: url(../images/gamme-complements-alimentaires.jpg) center center no-repeat;
		background-size: cover;
		height: 300px;
		border-bottom: 5px solid #8887AC;
	}
	
	.gbbackground {
		background: url(../images/marque-blanche-complement-alimentaire.jpg) center center no-repeat;
		background-size: cover;
		height: 100%;
		border-bottom: 5px solid #8887AC;
	}
	
	.sectiontitle {
		background: #8887AC;
		padding: 20px 0 20px 0;
		text-align: center;
		margin-bottom: 50px;
	}
	
	.etapeun {
		background: #D47AFA;
		padding: 5px 0 5px 0;
		text-align: center;
		margin-bottom: 50px;
			}
	
	.etapedeux {
		background: #5CDAED;
		padding: 5px 0 5px 0;
		text-align: center;
		margin-bottom: 50px;
	}
	
	.etapetrois {
		background: #FF83AA;
		padding: 5px 0 5px 0;
		text-align: center;
		margin-bottom: 50px;
	}
	
	.etapequatre {
		background: #4BF81E;
		padding: 5px 0 5px 0;
		text-align: center;
		margin-bottom: 50px;
	}
	
	.etapecinq {
		background: #AAAAAA;
		padding: 5px 0 5px 0;
		text-align: center;
		margin-bottom: 50px;
	}
	.galenique {
		background: url(../images/galenique.jpg) center center;
		background-size: cover;
	}
	
	.complement-fruit {
		background: url(../images/vitamines-mineraux.jpg) center center;
		background-size: cover;
	}
	
	.herbcaption {
		background: url(../images/background-herbatech.jpg) center center;
		background-size: cover;
	}
	
	.herbcles {
		background: url(../images/marque-blanche.png) center center;
		background-size: cover;
	}
	
	.globalfig {
		position: relative;
		margin-bottom: 30px;
	}
	
	.globalfig figcaption {
		padding: 15px;
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 20px;
	}
	
	.savoirfaire {
		width: 20%;
		float: left;
		background: #55bfb7;
		padding: 15px;
		text-align: center;
		border-radius: 20px;
		border: 5px solid #fff;
		color: #fff;
		font-family: arial;
		font-size: 15px;
	}
	
	button {
		padding: 15px 20px;
		color: #fff;
		text-transform: uppercase;
		border: none;
		margin: 5px;
		border-radius: 3px;
		background-color: #4BF81E;
		margin-top: 20px; 
		font-size: 15px;
	}
	
	.button2 {
		padding: 15px 20px;
		text-transform: uppercase;
		border: none;
		margin: 5px;
		border-radius: 3px;
		background-color: #4BF81E;
		margin-top: 20px; 
		font-size: 15px;
		min-width: 150px;
		line-height:10px;
		text-align:center;
		vertical-align:middle;
		color:white;
	}

	.form-control {
		font-size: 17px;
	}
	
	@media (max-width: 980px) {
		.savoirfaire {
			width: 33.33%
		}
		.savoirfaire:nth-child(4),.savoirfaire:nth-child(5){
			width: 50%
		}
	}
	
	@media (max-width: 768px) {
		.savoirfaire {
			width: 50%
		}
		.savoirfaire:nth-child(5){
			width: 100%
		}
	}
	
	@media (max-width: 768px) {

		.savoirfaire img {
			width: 50%;
		}
		
		.borderleft {
			border-top: 1px solid #AEA8D3;
			border-left: none;
			padding-top: 20px;
			margin-top: 20px;
		}
		
		footer ul {
			padding: 0;
			margin: 0;
		}
		
		footer ul li {
			display: block;
		}
	}
	
	
	.savoirfaire img {
		max-width: 100%;
	}

	footer, footer a, footer a:active, footer a:hover {
		color: #555;
	}
	
	footer {
		border-top: 10px solid #FF83AA;
		border-bottom: 10px solid #FF83AA;
	}

	@media (max-width: 768px) {
		footer {
			text-align: center;
		}
	}
	
/* TYPO *****************************************************/	
	
	.intro {
		font-size: 35px;
		margin-bottom: 15px;
	}
	
	.intro span {
		display: block;
	}	
	
	.sectiontitle {
		color: #fff;
		font-size: 30px !impotant;
		margin: 0;
	}
	
	.etapeun {
		color: #fff;
		font-size: 5px !impotant;
		margin: 0;
		padding-top: 20px;
	}
	
	.etapedeux {
		color: #fff;
		font-size: 5px !impotant;
		margin: 0;
		padding-top: 20px;
	}
	
	.etapetrois {
		color: #fff;
		font-size: 5px !impotant;
		margin: 0;
		padding-top: 20px;
	}
	
	.etapequatre {
		color: #fff;
		font-size: 5px !impotant;
		margin: 0;
		padding-top: 20px;
	}
	
	.etapecinq {
		color: #fff;
		font-size: 5px !impotant;
		margin: 0;
		padding-top: 20px;
	}

	
	

	.smallparagraph {
		font-size: 22px;
	}
	

	h2 {
		font-size: 35px;
		margin-bottom: 20px;
	}
	
	h2 span{
		margin-top: 15px;
		font-size: 30px;
		display: block;	
		color: #8887AC;		
	}
	
	h3 {
		font-size: 30px;
		margin-bottom: 20px;
	}
	
	h3 span{
		margin-top: 15px;
		font-size: 25px;
		display: block;	
		color: #8887AC;		
	}
	
	h5 {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 color: #8887AC;
 font-size: 15px;
 -webkit-transition: all 300ms ease;
 transition: all 300ms ease;
 text-transform: uppercase;
}
	
	
	
	.title {
		font-size: 50px;
	}
	.title span {
		font-size: 30px;
		display: block;
	}
	
	p {
		margin-bottom: 20px;
	}
	
	.phone, .phone a:hover {
		font-size: 30px;
		text-decoration: none !important;
	}
	
	footer h4 {
		font-size: 22px;
		font-weight: bold;
		margin-bottom: 15px;
	}
	
	footer {
		font-size: 20px;
		color: #fff;
	}
	
	footer a, footer a:hover {
		color: #fff;
	}
	
	@media (max-width: 768px){
	
		.phone {
		font-size: 20px;
	}
	
		.logo {
			height: 100px; 
			margin-bottom: 20px;
		}
		
		.title {
			font-size: 25px;
		}
		.title span {
			font-size: 20px;
			display: block;
		}
	}
	
	.indicator {
		font-size: 15px;
		top:10px;
	}
	
	
/* MENU *****************************************************/		
	
	@media (min-width: 769px) {
	
		.floatable {
			position: fixed;
			top: 0;
			bottom: initial;
			z-index: 9999;
			height: 60px;
			border-bottom: 1px solid #AEA8D3;
			box-shadow: 0 0 3px #000;
		}

		
		nav {
			width: 100%;
			background: #8887AC;
			z-index: 999;
		}
		
		.menunav {
			display: none;
		}
		
		nav .menu {
			padding: 0;
			margin: 0;
			text-align: center;
			display: block !important;
			position: relative;
			background-color:#FF83AA; 
		}
		
		nav ul li {
			display: inline-block;
		}
		
		nav ul li a, nav ul li span {
			display: inline-block;
			padding: 15px ;
			color: #fff;
			cursor: pointer;
			color: #fff !important;
			font-size: 
		}
	
		
		.submenu {
			display: none;
			position: absolute;
			background: #8887AC;
			z-index: 999;
			text-align: left;
			box-shadow:  0 0 3px #000;
			padding: 0;
		}
		
		.submenu li {
			display: block;
		}
		.submenu a, .submenu span {
			display: inline-block;
			padding: 10px;
			cursor: pointer;
		}
		
		nav ul li:hover >.submenu {
			display: block;
		}
		
		.active {
			border-bottom: 1px solid #fff;
		}
	}
	
	@media (max-width: 768px){
		
		.floatlogo {
			display: none;
		}
		
		
		nav {
			width: 100%;
			background: #8887AC;
			z-index: 999;
		}
		
		.menunav {
			display: block;
			padding: 20px;
			position: relative;
			font-size: 16px;
			color: #fff;
			cursor: pointer;
		}
		.glyphicon-menu-hamburger {
			font-size: 20px;
		}
		
		nav .menu {
			padding: 0;
			margin: 0;
			text-align: left;
			display: none;
			position: absolute;
			background: #fff;
			width: 100%;
			z-index: 9999;
		}
		
		.submenu {
			display: block;
		}
		.submenu li {
			display: block;
		}
		.submenu a, .submenu span {
			display: inline-block;
			padding: 10px;
			cursor: pointer;
		}

		nav ul li a, nav ul li span {
			display: block;
			padding: 15px 30px 15px 30px;
			color: #fff;
			cursor: pointer;
			color: #8887AC !important;
		}


	}
	

/* TIMELINE **********************************************************************/			
		
	/*TIMELINE*/

.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
	margin-top: 50px;
}

.timeline .title {
	font-weight: bold;

}

.timeline .titlered {
	font-weight: bold;
	color: #ea623d;

}

    .timeline:before {
        top: 45px;
        bottom: 50px;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: #ccc;
        margin-left: -1.5px;
    }

    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li > .timeline-panel {
            width: 100%;
            float: left;
            border: 1px solid #d4d4d4;
            border-radius: 2px;
            padding: 20px;
            position: relative;
            -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
			background: #fff;
        }

            .timeline > li > .timeline-panel:before {
                position: absolute;
                top: 26px;
                right: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 15px solid #ccc;
                border-right: 0 solid #ccc;
                border-bottom: 15px solid transparent;
                content: " ";
            }

            .timeline > li > .timeline-panel:after {
                position: absolute;
                top: 27px;
                right: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 14px solid #fff;
                border-right: 0 solid #fff;
                border-bottom: 14px solid transparent;
                content: " ";
            }

        .timeline > li > .timeline-badge {
            color: #fff;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 1.4em;
            text-align: center;
            position: absolute;
			padding-left: 1px;
            top: 16px;
            margin-left: -25px;
            background-color: #999999;
            z-index: 100;
            border-top-right-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .timeline > li.timeline-inverted > .timeline-panel {
            float: left;
			left: 60px;
        }

            .timeline > li.timeline-inverted > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            .timeline > li.timeline-inverted > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }

.timeline-badge.ensemble {
    background-color: #8887AC !important;
}

.timeline-badge.vous {
    background-color: #92d050 !important;
}

.timeline-badge.nous {
    background-color: #55bfb7 !important;
}

.timeline-title {
    margin-top: 0;
    color: inherit;
	font-size: 20px;
	text-decoration: underline;
	margin-bottom: 25px;
	text-align: center;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

    .timeline-body > p + p {
        margin-top: 5px;
		
    }

@media (max-width: 767px) {
	
	 .timeline:before {
        top: 45px;
        bottom: 70px;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: #ccc;
        margin-left: -1.5px;
    }
	
    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }

        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }
}

	
	.bubblevous {
		height: 90px;
		width: 90px;
		border-radius: 50%;
		background: #92d050;
		text-align: center;
		line-height: 90px;
		font-size: 13px;
		color: #fff;
		margin: auto;
		float: center;
		margin: 10px;
		display: inline-block;
	}
	
	.bubbleensemble {
		height: 90px;
		width: 90px;
		background:#8887AC;
		border-radius: 50%;
		text-align: center;
		line-height: 90px;
		font-size: 13px;
		color: #fff;
		margin: auto;
		float: center;
		margin: 10px;
		display: inline-block;
	}
	
	.bubblenous {
		height: 90px;
		width: 90px;
		border-radius: 50%;
		background: #55bfb7;
		text-align: center;
		line-height: 90px;
		font-size: 13px;
		color: #fff;
		margin: auto;
		float: center;
		margin: 10px;
		display: inline-block;
	}	
		
/* MAPS ******************************************************************************************************/
	.map {
		height: 500px;
		border-top: 2px solid #c2c2c2
	}
	
	#map-canvas, #map_canvas
	{
		height: 100%;
		width: 100%;
	}

	@media print {
	#map-canvas, #map_canvas 
		{
		height: 100%;
		}
	}	
	
	
/* BULLETS PRESENTER ******************************************************************************************************/
	
	.panel-title {
		font-size: 25px;
	}