/* 
	Project : Vivre Eco responsable
	Author : Le Blevec Elisa
	Date   : 21/05/2020
	Version : 1.0.0
/*

/*---------------------------------------------------------------*/
/* GLOBAL */
/*---------------------------------------------------------------*/


html {
	box-sizing: border-box; 
	font-size: 100%;
}
*, *:before, *:after {
	box-sizing: inherit; 
}
body {
	font-family: 'Tajawal', sans-serif;
	font-size: 1em; /* soit 16px*/ 
	color: #3f3f3f; 
	line-height: 1.5; 
	background-color: #fff; 
	
}
.p-like {
	font-family: 'Tajawal', sans-serif;
	font-size: 16px;
	color: #3f3f3f;
	font-weight: 400;
}

/* Typography */
/*----------------------------*/
h1, .h1-like,
h2, .h2-like,
h3, .h3-like,
h4, .h4-like,
h5, .h5-like,
h6, .h6-like { 
	font-weight: 700; 
	color: #3f3f3f;
	line-height: 1.2;
	margin: 0 0 0.625em 0;
}
h1, .h1-like {
	font-size: 2em;
}
h2, .h2-like {
	font-size: 3.5em;
	font-family: 'Abel', sans-serif;
}
h2, .col-t-4 .col-d-4  {
	color: #fff
}


h3, .h3-like {
	font-size: 1.8em;
	font-family: 'Abel', sans-serif;
}
h4, .h4-like {
    font-size: 1.5em;
	font-family: 'Abel', sans-serif;
}
h4, .col-t-8 .col-d-8 {
	color: #fff
}

h5, .h5-like {
	font-family: 'Abel', sans-serif;
	font-size: 20px;
}
h6, .h6-like {
	font-style: italic;
	font-size: 1em;
}

/* Links */
/*----------------------------*/
a {
	color: #085750;
	text-decoration: none;
}

a:hover { 
	text-decoration: none;
}

/* Others */
/*----------------------------*/
p {
	margin: 0 0 0.625em 0;
}
figure {
	margin: 0;
}
iframe {
	border:none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
li a .txt-none {
 	text-decoration: none;
}
ul {
	padding-inline-start: 0;
	list-style-type: none;
}


strong, em {
	color: #000;
}
blockquote {
	border-left: 10px solid #676767;
	margin: 40px 50px;
    padding-left: 20px;
}

code {
	font-family: monospace;
	color: #e34156;
    background-color: #e4dadc;
    border-radius: 5px;
    font-weight: 700;
    padding: 3px 5px;
}
dt {
	font-weight: 700;
}

	
dt + dt { 
	font-style: italic;
}
section {
	padding: 2em 0;
}
/* Browser  */
/*----------------------------*/
.browser {
	background-color: #f25648;
	color: #611e18;
	padding: 20px;
	margin: 20px 0;
	border: 10px solid;
	text-align: center;
}
.browser a {
	color: #fff;
	text-decoration: underline;
}
.browser a:hover {
	color: #fff;
	text-decoration: none;
}
/* iframe RWD  */
/*----------------------------*/
.box-iframe {
	position: relative;
	padding-bottom: 56.25%; /* 16:9*/
	padding-top: 25px; /* barre du player */
	height: 0;
}
.box-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border:none;
}

/* btn */
/*----------------------------*/
.btn {
	display: inline-block;
    background-color: #6ea007;
    color: #fff;
    border: none;
    padding: 6px 30px 0 30px;
    line-height: 2.5;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    text-transform: uppercase;
}

.btn:hover {
	background-color: #a9c821;
}
.btn-light {
    display: inline-block;
    background-color: #a9c821;
    color: #fff;
    border: none;
	padding: 3px 15px 0 15px;
    line-height: 2.5;
    text-decoration: none;
}
.btn-light:hover {
	background-color: #6ea007;
}

.btn-light-s {
    display: inline-block;
    background-color: #6ea007;
    color: #fff;
    border: none;
    line-height: 1.9;
    text-decoration: none;
    padding: 6px 20px 0 20px;
    border-radius: 30px;
}
.btn-light-s:hover {
	background-color: #a9c821;
}




/* helpers */
/*----------------------------*/
.img-left {
	float: left;
	margin-right: 10px;
}
.img-right {
	float: right;
	margin-left: 10px;
}
.right {
	float: right;
}
.left {
	float: left;
}
.clear { /* permet de stopper le débordement des floats
			à placer après un élément sur lequel on veut qu'il redescende */
	clear: both; 
}
.overflow { /* permet de stoper le débordement des float
			à palcer sur l'élément parent des éléments qui flottent */
	overflow: hidden;
}

.flex {
	display: flex;
}

.bg-light {
	background-color: #f1f1f1;
	padding: 20px;
}
.bg-medium {
	background-color: #6ea007;
	padding: 20px;
}
.bg-dark {
    background-color: #085750;
}
.card {
	display: block;
	text-decoration: none;
	border: 1px solid #ddd;
	background-color: #ededed;
	padding: 10px;
}
.bg-white {
	background-color: #fff;
	padding: 20px;
}

.ul-clean {
	margin: 0;
    padding: 0;
    list-style-type: none;
}

.v-top {
	vertical-align: top;
}
.v-middle {
	vertical-align: middle;
}
.v-bottom {
	vertical-align: bottom;
}

.opacity-hover:hover {
	opacity: 50%;
}

/*
	m = margin
	a, t, b = all, top, bottom
	n, s, m, l = none, small, medium, large
*/

.man {
	margin: 0;
}
.mas {
	margin: 20px;
}
.mam {
	margin: 40px;
}
.mal {
	margin: 60px;
}


.mtn {
	margin-top: 0;
}
.mts {
	margin-top: 20px;
}
.mtm {
	margin-top: 40px;
}
.mtl {
	margin-top: 60px;
}
.mtxxl {
	margin-top: 27%;
}

.mbn {
	margin-bottom: 0;
}
.mbs {
	margin-bottom: 20px;
}
.mbm {
	margin-bottom: 40px;
}
.mbl {
	margin-bottom: 60px;
}
.mrm {
	margin-right: 20px;	
}
.m-none {
	margin: 0;
}

.ptbs {
	padding: 0em 1em;
}
.ptbm {
	padding: 2em 2em;
}
.ptxs {
	padding-top: 10px;

}
.pts {
	padding-top: 0.5em;

}
.prl {
	padding-right: 4em;
}

.txt-left {
	text-align: left;
}
.txt-center {
	text-align: center;
}
.txt-right {
	text-align: right;
}

.txt-light {
	color: #fff;
}

.txt-medium {
	color: #a9c821;
}
.txt-dark {
	color: #085750;
}

.center-box {
	margin-right: auto;
	margin-left: auto;
}

.box-shadow {
	box-shadow: 3px 2px 8px #333333d4
}

/* CSS GRID */
/*----------------------------*/
/*
Flex container = grid
Flex items     = les enfants DIRECTS de grid recevront le display flex

Utilisation de la grille
1- j'ai besoin d'un container pour les colonnes = .grid
2- Je pose des classes de tailles col-XXX surr les éléments enfant de grid (donc les colonnes)
	ex : section.grid > enfants article.col-6
	==> si j'ai un titre entre les 2, je met un col-12 sur le titre 
		pour pousser les articles
3- je ne met JAMAIS JAMAIS JAMAIS un wrap et un grid sur le même élément html
	==> car wrap et grid ont tous les deux des margin ( auto et negatif) 
4- Si j'ai besoin d'un fond de couleur sur un élément html qui porte une classe col-xxx
	je rajoute une div à l'intérieur qui recevra le fond de couleur (sinon nous perdons les gouttières)
5- pour faire des grilles dans des grilles
	==> je remet un grid sur le parent des autres élément col-xxx
	ex : div.grid > main.col-8 + aside.col-4
			==> main.col-8 > article.grid > div.col-6 + div.col-6
6- on ne mettra jamais JAMAIS un col-x sur une img ==> sinon elle se fait strecher 
	(à cause de align-item strech par défaut sur le flex)
*/

.grid {
	display: flex;
	flex-wrap: wrap; /* retour à la ligne des flex items en fonction de leur tailles*/
	margin-right: -10px;
	margin-left: -10px;
}

[class*="col-"] {
	width: 100%;
}

.grid [class*="col-"] { /* 	sélecteur hiérarchique d'attribut 
							CSS3 car il y a class* */
	padding-left: 10px;
	padding-right: 10px;
}

/* calcul pour une col = 100% / 12 colonnes*/
.col-m-1 { 
	width: 8.333%;
}
.col-m-2 { 
	width: 16.667%;
}
.col-m-3 { 
	width: 25%;
}
.col-m-4 { 
	width: 33.333%;
}
.col-m-5 { 
	width: 41.667%;
}
.col-m-6 { 
	width: 50%;
}
.col-m-7 { 
	width: 58.333%;
}
.col-m-8 { 
	width: 66.667%;
}
.col-m-9 { 
	width: 75%;
}
.col-m-10 { 
	width: 83.333%;
}
.col-m-11 { 
	width: 91.667%;
}
.col-m-12 { 
	width: 100%;
}


.order-m-1 {
	order: 1;
}
.order-m-2 {
	order: 2;
}
.order-m-3 {
	order: 3;
}
.order-m-4 {
	order: 4;
}
.order-m-5 {
	order: 5;
}
.order-m-6 {
	order: 6;
}
.order-m-7 {
	order: 7;
}
.order-m-8 {
	order: 8;
}
.order-m-9 {
	order: 9;
}
.order-m-10 {
	order: 10;
}
.order-m-11 {
	order: 11;
}
.order-m-12 {
	order: 12;
}



.offset-m-0 {
	margin-left: 0;
}
.offset-m-1 {
	margin-left: 8.333%;
}
.offset-m-2 {
	margin-left: 16.667%;
}
.offset-m-3 {
	margin-left: 25%;
}
.offset-m-4 {
	margin-left: 33.333%;
}
.offset-m-5 {
	margin-left: 41.667%;
}
.offset-m-6 {
	margin-left: 50%;
}
.offset-m-7 {
	margin-left: 58.333%;
}
.offset-m-8 {
	margin-left: 66.667%;
}
.offset-m-9 {
	margin-left: 75%;
}
.offset-m-10 {
	margin-left: 83.333%;
}
.offset-m-11 {
	margin-left: 91.667%;
}
.offset-m-12 {
	margin-left: 100%;
}

.hide-m {
	display: none;
}
.show-m {
	display: block;
}
/* tablet view */
/*--------------------------*/
@media (min-width: 481px){
	.col-t-1 {
		width: 8.333%;
	}
	.col-t-2 {
		width: 16.667%;
	}
	.col-t-3 {
		width: 25%;
	}
	.col-t-4 {
		width: 33.333%;
	}
	.col-t-5 {
		width: 41.667%;
	}
	.col-t-6 {
		width: 50%;
	}
	.col-t-7 {
		width: 58.333%;
	}
	.col-t-8 {
		width: 66.667%;
	}
	.col-t-9 {
		width: 75%;
	}
	.col-t-10 {
		width: 83.333%;
	}
	.col-t-11 {
		width: 91.667%;
	}
	.col-t-12 {
		width: 100%;
	}


	.order-t-1 {
		order: 1;
	}
	.order-t-2 {
		order: 2;
	}
	.order-t-3 {
		order: 3;
	}
	.order-t-4 {
		order: 4;
	}
	.order-t-5 {
		order: 5;
	}
	.order-t-6 {
		order: 6;
	}
	.order-t-7 {
		order: 7;
	}
	.order-t-8 {
		order: 8;
	}
	.order-t-9 {
		order: 9;
	}
	.order-t-10 {
		order: 10;
	}
	.order-t-11 {
		order: 11;
	}
	.order-t-12 {
		order: 12;
	}


	.offset-t-0 {
		margin-left: 0;
	}
	.offset-t-1 {
		margin-left: 8.333%;
	}
	.offset-t-2 {
		margin-left: 16.667%;
	}
	.offset-t-3 {
		margin-left: 25%;
	}
	.offset-t-4 {
		margin-left: 33.333%;
	}
	.offset-t-5 {
		margin-left: 41.667%;
	}
	.offset-t-6 {
		margin-left: 50%;
	}
	.offset-t-7 {
		margin-left: 58.333%;
	}
	.offset-t-8 {
		margin-left: 66.667%;
	}
	.offset-t-9 {
		margin-left: 75%;
	}
	.offset-t-10 {
		margin-left: 83.333%;
	}
	.offset-t-11 {
		margin-left: 91.667%;
	}
	.offset-t-12 {
		margin-left: 100%;
	}

	.hide-t {
		display: none;
	}
	.show-t {
		display: block;
	}
}/*--end of tablet view-----*/

/* desktop view */
/*--------------------------*/
@media (min-width: 769px){
	.col-d-1 {
		width: 8.333%;
	}
	.col-d-2 {
		width: 16.667%;
	}
	.col-d-3 {
		width: 25%;
	}
	.col-d-4 {
		width: 33.333%;
	}
	.col-d-5 {
		width: 41.667%;
	}
	.col-d-6 {
		width: 50%;
	}
	.col-d-7 {
		width: 58.333%;
	}
	.col-d-8 {
		width: 66.667%;
	}
	.col-d-9 {
		width: 75%;
	}
	.col-d-10 {
		width: 83.333%;
	}
	.col-d-11 {
		width: 91.667%;
	}
	.col-d-12 {
		width: 100%;
	}


	.order-d-1 {
		order: 1;
	}
	.order-d-2 {
		order: 2;
	}
	.order-d-3 {
		order: 3;
	}
	.order-d-4 {
		order: 4;
	}
	.order-d-5 {
		order: 5;
	}
	.order-d-6 {
		order: 6;
	}
	.order-d-7 {
		order: 7;
	}
	.order-d-8 {
		order: 8;
	}
	.order-d-9 {
		order: 9;
	}
	.order-d-10 {
		order: 10;
	}
	.order-d-11 {
		order: 11;
	}
	.order-d-12 {
		order: 12;
	}


	.offset-d-0 {
		margin-left: 0;
	}
	.offset-d-1 {
		margin-left: 8.333%;
	}
	.offset-d-2 {
		margin-left: 16.667%;
	}
	.offset-d-3 {
		margin-left: 25%;
	}
	.offset-d-4 {
		margin-left: 33.333%;
	}
	.offset-d-5 {
		margin-left: 41.667%;
	}
	.offset-d-6 {
		margin-left: 50%;
	}
	.offset-d-7 {
		margin-left: 58.333%;
	}
	.offset-d-8 {
		margin-left: 66.667%;
	}
	.offset-d-9 {
		margin-left: 75%;
	}
	.offset-d-10 {
		margin-left: 83.333%;
	}
	.offset-d-11 {
		margin-left: 91.667%;
	}
	.offset-d-12 {
		margin-left: 100%;
	}

	.hide-d {
		display: none;
	}
	.show-d {
		display: block;
	}
}/*--end of desktop view-----*/


/*---------------------------------------------------------------*/
/* LAYOUT */
/*---------------------------------------------------------------*/
/* CSS Mobile First */
.wrap {
	max-width: 960px;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	/*background-color: #fff;*/
	margin-right: auto; 
	margin-left: auto;
}

/* Header */
/*----------------------------*/
#header {
	background-image: url("../img/img-bg4-.jpg");
	background-color: #085750;
    background-size: 118%;
    background-repeat: no-repeat;
	margin:0;
  	padding:0;
}

#header .grid {
	padding-bottom: 2em;
}



.img-none {
	background-color: none;
}
/* logo */
	/*----------------------------*/
.logo {
    text-align: center;
    padding-bottom: 2em;
	padding-top: 1em;
	width: 55%;
	margin-right: auto;
	margin-left: auto;
}

/* Nav */
/*----------------------------*/
.menu {
	height: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.menu-collapse {
	opacity: 1;
    height: auto;
    background-color: #fff;
    box-shadow: 10px 4px 8px #383838;
}
.btn-menu {
    position: absolute;
    top: 20px;
    right: 10px;
    color: #ffffff;

 }
 .btn-menu a:hover {
 	opacity: 1;

 }
.menu a {
	display: block;
	text-align: center;
    padding: 0.8em 0.6em 0.6em 0.6em;
	color: #085750;
	text-decoration: none;
}
.menu a:hover {
	color: #6ea007;
}

.menu .current {
	border-bottom: solid 1px;
	color: #085750;
}
/* Banner */
/*----------------------------*/
/*.bg-dark-banner {
    background-color: #5c344f;
    opacity: 0.9;
    padding: 20px 0 0px 0;
}*/
/* Main */
/*----------------------------*/
.titre {
	text-align: center;
	padding: none;
	margin: none;
}
/*.puces {
	font-size: 100%;
 	list-style-type: none;
	background-image: url(../img/puces.png);
	background-repeat: no-repeat;
	padding-left: 35px;
	font-weight: 700;
	line-height: 2;
}*/


/* Snipet portfolio*/

.snip1504 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 292px;
  width: 100%;
  color: #000000;
  text-align: left;
  font-size: 16px;
  background-color: #085750;
  margin-right: auto;
  margin-left: auto;
}

.snip1504 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1504 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.snip1504 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.snip1504 h3,
.snip1504 h5 {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
  color: #fff;
}

.snip1504 h3 {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  text-transform: uppercase;
  font-weight: 400;
}

.snip1504 h5 {
  font-weight: normal;
  font-style: italic;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.snip1504 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1504:hover > img,
.snip1504.hover > img {
  opacity: 0.1;
}

.snip1504:hover h3,
.snip1504.hover h3,
.snip1504:hover h5,
.snip1504.hover h5 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


.simplefilter {
	display: flex;
	flex-wrap: wrap;
}

.fltr-controls {
    cursor: pointer;
    background-color: #5c344f;
    padding: 0.3em 0.7em 0;
    color: #fff;
    margin-right: 5px;
    font-size: 90%;
}

.fltr-controls.active {
	background-color: #6ea007;
}

.txt-error {
	font-size: 125px;
    color: #a9c821;
    margin-top: 1em;
    margin-bottom: 0
}



/* progress bar */

.skills {
	text-align: right;
    color: white;
    padding-right: 4px;
    border-radius: 16px;
    font-size: 14px;
}

.html {width: 80%;} 
.css {width: 80%;} 
.js {width: 40%;} 
.wp {width: 60%;} 
.php {width: 10%;}


.linear-gradient {
  background: linear-gradient(70deg, #085750, #A9C821);
}

.progress {
    width: 100%;
    background-color: #ddd;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    display: flex;
    border-radius: 16px;
}

.progress-value-html{
	animation: html 3s normal forwards;
    background: linear-gradient(70deg, #085750, #A9C821);
    height: 20px;
}
.progress-value-css{
  animation: css 3s normal forwards;
  background: linear-gradient(70deg, #085750, #A9C821);
  height: 20px;
}
.progress-value-js{
  animation: js 3s normal forwards;
  background: linear-gradient(70deg, #085750, #A9C821);
  height: 20px;
}
.progress-value-wp{
  animation: wp 3s normal forwards;
  background: linear-gradient(70deg, #085750, #A9C821);
  height: 20px;
}
.progress-value-php{
  animation: php 3s normal forwards;
  background: linear-gradient(70deg, #085750, #A9C821);
  height: 20px;
}
@keyframes html {
  0% { width: 0; }
  100% { width: 80%; }
}
@keyframes css {
  0% { width: 0; }
  100% { width: 80%; }
}
@keyframes js {
  0% { width: 0; }
  100% { width: 40%; }
}	/* footer */
@keyframes wp {
  0% { width: 0; }
  100% { width: 60%; }
}
@keyframes php {
  0% { width: 0; }
  100% { width: 10%; }
}


/* progress circle */

.circle-box {
	margin: 0px 0px 10px 13px
}

.progress-circle {
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    height: 5rem;
    margin: 1rem 1rem 0;
    position: relative;
    width: 5rem;
}
.progress-circle:before {
  -webkit-box-align: center;
          align-items: center;
  background-color: #fff;
  border-radius: 50%;
  content: attr(data-progress) '%';
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  top: 0.7rem;
  bottom: 0.7rem;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.progress-circle:after {
  background-color: #0083ff;
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 100%;
  width: 100%;
}
.progress-circle:hover:before,
.progress-circle:focus:before {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
/**
* $step is set to 5 by default, meaning you can only use percentage classes in increments of five (e.g. 25, 30, 45, 50, and so on). This helps to reduce the size of the final CSS file. If you need a number that doesn't end in 0 or 5, you can change the text percentage while rounding the class up/down to the nearest 5.
*/
.progress-circle[data-progress="0"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ddd), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, left top, right top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(90deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="1"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(93.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="2"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(97.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="3"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(100.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="4"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(104.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="5"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(108deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="6"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(111.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="7"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(115.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="8"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(118.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="9"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(122.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="10"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(126deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="11"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(129.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="12"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(133.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="13"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(136.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="14"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(140.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="15"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(144deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="16"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(147.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="17"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(151.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="18"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(154.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="19"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(158.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="20"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(162deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="21"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(165.60000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="22"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(169.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="23"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(172.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="24"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(176.4deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="25"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ddd), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(180deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="26"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(183.60000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="27"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(187.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="28"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(190.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="29"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(194.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="30"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(198deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="31"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(201.60000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="32"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(205.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="33"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(208.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="34"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(212.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="35"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(216deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="36"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(219.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="37"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(223.20000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="38"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(226.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="39"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(230.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="40"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(234deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="41"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(237.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="42"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(241.20000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="43"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(244.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="44"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(248.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="45"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(252deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="46"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(255.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="47"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(259.20000000000005deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="48"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(262.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="49"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(266.4deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="50"]:after {
  background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #a9c821), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(-90deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="51"]:after {
  background-image: linear-gradient(-86.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="52"]:after {
  background-image: linear-gradient(-82.8deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="53"]:after {
  background-image: linear-gradient(-79.2deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="54"]:after {
  background-image: linear-gradient(-75.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="55"]:after {
  background-image: linear-gradient(-72deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="56"]:after {
  background-image: linear-gradient(-68.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="57"]:after {
  background-image: linear-gradient(-64.8deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="58"]:after {
  background-image: linear-gradient(-61.2deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="59"]:after {
  background-image: linear-gradient(-57.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="60"]:after {
  background-image: linear-gradient(-54deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="61"]:after {
  background-image: linear-gradient(-50.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="62"]:after {
  background-image: linear-gradient(-46.8deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="63"]:after {
  background-image: linear-gradient(-43.199999999999996deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="64"]:after {
  background-image: linear-gradient(-39.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="65"]:after {
  background-image: linear-gradient(-36deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="66"]:after {
  background-image: linear-gradient(-32.4deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="67"]:after {
  background-image: linear-gradient(-28.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="68"]:after {
  background-image: linear-gradient(-25.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="69"]:after {
  background-image: linear-gradient(-21.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="70"]:after {
  background-image: linear-gradient(-18deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="71"]:after {
  background-image: linear-gradient(-14.399999999999991deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="72"]:after {
  background-image: linear-gradient(-10.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="73"]:after {
  background-image: linear-gradient(-7.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="74"]:after {
  background-image: linear-gradient(-3.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="75"]:after {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #a9c821), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(0deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="76"]:after {
  background-image: linear-gradient(3.600000000000009deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="77"]:after {
  background-image: linear-gradient(7.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="78"]:after {
  background-image: linear-gradient(10.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="79"]:after {
  background-image: linear-gradient(14.400000000000006deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="80"]:after {
  background-image: linear-gradient(18deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="81"]:after {
  background-image: linear-gradient(21.60000000000001deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="82"]:after {
  background-image: linear-gradient(25.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="83"]:after {
  background-image: linear-gradient(28.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="84"]:after {
  background-image: linear-gradient(32.400000000000006deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="85"]:after {
  background-image: linear-gradient(36deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="86"]:after {
  background-image: linear-gradient(39.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="87"]:after {
  background-image: linear-gradient(43.20000000000002deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="88"]:after {
  background-image: linear-gradient(46.80000000000001deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="89"]:after {
  background-image: linear-gradient(50.400000000000006deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="90"]:after {
  background-image: linear-gradient(54deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="91"]:after {
  background-image: linear-gradient(57.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="92"]:after {
  background-image: linear-gradient(61.20000000000002deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="93"]:after {
  background-image: linear-gradient(64.80000000000001deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="94"]:after {
  background-image: linear-gradient(68.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="95"]:after {
  background-image: linear-gradient(72deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="96"]:after {
  background-image: linear-gradient(75.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="97"]:after {
  background-image: linear-gradient(79.20000000000002deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="98"]:after {
  background-image: linear-gradient(82.80000000000001deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="99"]:after {
  background-image: linear-gradient(86.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="100"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #a9c821), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}




/**
* $step is set to 5 by default, meaning you can only use percentage classes in increments of five (e.g. 25, 30, 45, 50, and so on). This helps to reduce the size of the final CSS file. If you need a number that doesn't end in 0 or 5, you can change the text percentage while rounding the class up/down to the nearest 5.
*/

$step      = 1
$loops     = round(100 / $step)
$increment = 360 / $loops
$half      = round($loops / 2)

for $i in (0)..($loops)
  .progress-circle[data-progress={'"'+$i * $step+'"'}]:after
    if $i < $half
      $next-deg = 90deg + $increment * $i
      background-image linear-gradient(90deg, $back-color 50%, transparent 50%, transparent), linear-gradient($next-deg, $theme-color 50%, $back-color 50%, $back-color)
    else
      $next-deg = -90deg + $increment * ($i - $half)
      background-image linear-gradient($next-deg, $theme-color 50%, transparent 50%, transparent), linear-gradient(270deg, $theme-color 50%, $back-color 50%, $back-color)




/* Gallery Portfolio */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.row {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0;
  clear: both;
  height: 500px;
}
.row img {
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.gallery ul li {
  float: left;
  margin: 0 0.8771929825%;
  overflow: hidden;
}

.gallery {
  padding: 40px 0 300px;
  position: relative;
  overflow: hidden;
}
.gallery ul {
  position: relative;
}
.gallery ul li {
	margin-bottom: 20px;
    width: 93%;
    position: relative;
    margin-left: 3%;
}
.gallery ul li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.gallery ul li a h3 {
 line-height: 1.5em;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 color: #fff;
 z-index: 3;
 opacity: 0;
}

.gallery ul li a h3:hover {
 opacity: 1;
}


.gallery ul li a:before {
	position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.gallery ul li a:hover:before {
  opacity: 0.8;
  background-color: #085750;
}

.gallery ul li a:after {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  content: "";
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.gallery ul li a:hover:after {
  opacity: 1;
}

/*.titre-pf {
 line-height: 1.5em;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 color: #fff;
 z-index: 3;

}*/


.port {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-top: 100px;
  background: #ffffff;
  background-color: #fafafa;
  z-index: 103;
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  border-bottom: 1px solid #d0d0d0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.port img {
    width: 95%;
    margin: 10px;
}


.port .description {
  float: left;
  width: 70%;
  max-height: 100%;
  padding: 0 40px 40px;
  overflow: auto;
}

.port > * {
  opacity: 0;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.port.item_open {
  visibility: visible;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.port > * {
  opacity: 1;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.close {
  width: 21px;
  height: 21px;
  background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
  position: absolute;
  right: 10px;
  top: -121px;
  opacity: 1;
  z-index: 1004;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.item_open .close {
  opacity: 1;
  top: 0px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;

}

/* SLIDER */

#slider1, #slider2, #slider3, #slider4, 
#slider5, #slider6, #slider7 {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  width: 400px;
  height: 300px;
}

div#slider {
	width: 400px;
	height: 300px;
}

#slider1 ul, #slider2 ul, #slider3 ul, #slider4 ul, 
#slider5 ul, #slider6 ul, #slider7 ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider1 ul li, #slider2 ul li, #slider3 ul li, #slider4 ul li, 
#slider5 ul li, #slider6 ul li, #slider7 ul li {
	position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 380px;
    height: 300px;
    text-align: center;
    line-height: 300px;
}

#slider1 img, #slider2 img, #slider3 img, #slider4 img, 
#slider5 img, #slider6 img, #slider7 img {
    margin-bottom: 20px;
    width: 85%;
    position: relative;
    margin-left: -3%;
}

a.control_prev, a.control_next {
	position: absolute;
    top: 47%;
    z-index: 999;
    display: block;
    padding: 1% 1%;
    width: auto;
    height: auto;
    background: #085750;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  left: 18px;
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 40px;
  border-radius: 2px 0 0 2px;
}


/* TIMELINE */


.timeline-container {
   width: 80%;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}
.timeline-container:before { /*This is the line down the middle*/
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1
}
.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}
.timeline-block-right {
   float: right;
}
.timeline-block-left {
   float: left;
   direction: rtl
}
.marker {
	width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #F5F7FA;
    background: #a9c821;
    margin-top: 10px;
    z-index: 9999;
}
.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: #666
}
.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500;
   color: #085750;
}
.timeline-content span {
    font-size: 16px;
    color: #777777;
}
.timeline-content p {
	font-size: 16px;
    color: #424242;
}
@media screen and (max-width: 768px) {
   .timeline-container:before {
      left: 8px;
      width: 2px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 30px;
   }
   .timeline-block-right {
      float: none;
   }
   .timeline-block-left {
      float: none;
      direction: ltr;
   }
}



#video {
	width: 90%;
    outline: 0;
    margin: 20px;
}


/*Contact */


.contact {
	color: #6ea007;
    padding: 0.5em 0.5em;
    margin-bottom: 2em;
    width: 100%;
    border: solid;
}
.contact-img {
	background-image: none;
}


/* footer */
/*----------------------------*/
#footer {
    background-color: #f1f1f1;
}
#footer small {
	text-align: center;
}
#footer h3 {
	color: #fff;
}
input#courriel {
	width: 100%;
}
.copyright {
	line-height: 2em;
    background-color: #fff;
    color: #3f3f3f;

}
.footer-mpxxl {
	margin-top: 164%;
}

#footer a .totop {
	color: #fff;
}
.totop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: block;
    background-color: #085750;
    color: #fff;
    border-radius: 20px;
    padding: 0.1em 0.3em;
    text-align: center;
    margin-top: 20px;
    box-shadow: 2px 1px 2px #a9c821;
	}


/*--------------------------------------------------------------*/
/* LAYOUT RWD */
/*--------------------------------------------------------------*/

/* Tablet view */
/*----------------------*/
@media (min-width: 481px) {

	/* Header */
	/*----------------------------*/
	#header {
		background-image: url("../img/img-bg4-.jpg");
		background-color: #085750;
		background-size: 100%;
    	background-repeat: no-repeat;
		margin:0;
  		padding:0;
	}
	#header .grid {
		padding-bottom: 4em;
	}
	.header img {
		width: 50%;
	}
	.titre-name {
		font-size: 3em;
	}
	/* logo */
	/*----------------------------*/
	.logo {
	padding-top: 0.6em;
    width: 35%;
    margin-right: auto;
    margin-left: auto;
	}
	.logo a {
		display: inline-block;
	}
	/* nav */
	/*----------------------------*/
	.menu {
    display: flex;
    justify-content: center;
    opacity: 1;
    height: auto;
    transition: none;
    margin-bottom: 1em;
    margin-top: -29px;
	}
	.menu a {
	display: block;
	text-align: center;
    padding: 0.5em 1em 0.2em 1em;
	color: #ffffff;
	text-decoration: none;
	}

	.menu a:hover {
	color: #fff;
	border-bottom: solid 1px;
	}
	.menu-collapse {
    background-color: none;
	}
	.menu .current {
	border-bottom: solid 1px;
	color: #fff;
	}
	.eco img {
	margin-bottom: 20px;
	}
	/* btn-menu */
	/*----------------------------*/
	.btn-menu {
		display: none;
	}
	/* Banner */
	/*----------------------------*/
	/* main */
	/*----------------------------*/

		/* progress bar */

.skills {
	text-align: right;
    color: white;
    padding-right: 10px;
    font-size: 14px;
}

.html {width: 80%;} 
.css {width: 80%;} 
.js {width: 40%;} 
.wp {width: 60%;} 
.php {width: 10%;}


.linear-gradient {
  background: linear-gradient(70deg, #085750, #A9C821);
}

.progress {
	width: 100%;
    background-color: #ddd;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    display: flex;
    margin-bottom: 10px;
}

.progress-value-html{
  animation: html 3s normal forwards;
}
.progress-value-css{
  animation: css 3s normal forwards;
  background: linear-gradient(70deg, #085750, #A9C821);
  width: 0%;
}
.progress-value-js{
  animation: js 3s normal forwards;
  background: linear-gradient(70deg, #085750, #A9C821);
  width: 0%;
}
.progress-value-wp{
  animation: wp 3s normal forwards;
  background: linear-gradient(70deg, #085750, #A9C821);
  width: 0%;
}
.progress-value-php{
  animation: php 3s normal forwards;
  background: linear-gradient(70deg, #085750, #A9C821);
  width: 0%;
}
@keyframes html {
  0% { width: 0; }
  100% { width: 80%; }
}
@keyframes css {
  0% { width: 0; }
  100% { width: 80%; }
}
@keyframes js {
  0% { width: 0; }
  100% { width: 40%; }
}	/* footer */
@keyframes wp {
  0% { width: 0; }
  100% { width: 60%; }
}
@keyframes php {
  0% { width: 0; }
  100% { width: 10%; }
}


/* progress circle */

.circle-box {
	margin-left: 12%;
}

.progress-circle {
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    height: 6rem;
    margin: 1rem 2rem 0;
    position: relative;
    width: 6rem;
}
.progress-circle:before {
  -webkit-box-align: center;
          align-items: center;
  background-color: #fff;
  border-radius: 50%;
  content: attr(data-progress) '%';
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  top: 0.7rem;
  bottom: 0.7rem;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.progress-circle:after {
  background-color: #0083ff;
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 100%;
  width: 100%;
}
.progress-circle:hover:before,
.progress-circle:focus:before {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
/**
* $step is set to 5 by default, meaning you can only use percentage classes in increments of five (e.g. 25, 30, 45, 50, and so on). This helps to reduce the size of the final CSS file. If you need a number that doesn't end in 0 or 5, you can change the text percentage while rounding the class up/down to the nearest 5.
*/
.progress-circle[data-progress="0"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ddd), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, left top, right top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(90deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="1"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(93.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="2"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(97.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="3"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(100.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="4"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(104.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="5"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(108deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="6"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(111.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="7"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(115.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="8"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(118.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="9"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(122.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="10"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(126deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="11"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(129.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="12"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(133.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="13"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(136.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="14"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(140.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="15"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(144deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="16"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(147.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="17"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(151.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="18"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(154.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="19"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(158.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="20"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(162deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="21"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(165.60000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="22"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(169.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="23"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(172.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="24"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(176.4deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="25"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ddd), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(180deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="26"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(183.60000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="27"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(187.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="28"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(190.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="29"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(194.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="30"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(198deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="31"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(201.60000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="32"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(205.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="33"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(208.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="34"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(212.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="35"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(216deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="36"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(219.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="37"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(223.20000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="38"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(226.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="39"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(230.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="40"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(234deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="41"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(237.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="42"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(241.20000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="43"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(244.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="44"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(248.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="45"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(252deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="46"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(255.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="47"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(259.20000000000005deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="48"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(262.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="49"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(266.4deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="50"]:after {
  background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #a9c821), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(-90deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="51"]:after {
  background-image: linear-gradient(-86.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="52"]:after {
  background-image: linear-gradient(-82.8deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="53"]:after {
  background-image: linear-gradient(-79.2deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="54"]:after {
  background-image: linear-gradient(-75.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="55"]:after {
  background-image: linear-gradient(-72deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="56"]:after {
  background-image: linear-gradient(-68.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="57"]:after {
  background-image: linear-gradient(-64.8deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="58"]:after {
  background-image: linear-gradient(-61.2deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="59"]:after {
  background-image: linear-gradient(-57.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="60"]:after {
  background-image: linear-gradient(-54deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="61"]:after {
  background-image: linear-gradient(-50.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="62"]:after {
  background-image: linear-gradient(-46.8deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="63"]:after {
  background-image: linear-gradient(-43.199999999999996deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="64"]:after {
  background-image: linear-gradient(-39.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="65"]:after {
  background-image: linear-gradient(-36deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="66"]:after {
  background-image: linear-gradient(-32.4deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="67"]:after {
  background-image: linear-gradient(-28.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="68"]:after {
  background-image: linear-gradient(-25.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="69"]:after {
  background-image: linear-gradient(-21.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="70"]:after {
  background-image: linear-gradient(-18deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="71"]:after {
  background-image: linear-gradient(-14.399999999999991deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="72"]:after {
  background-image: linear-gradient(-10.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="73"]:after {
  background-image: linear-gradient(-7.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="74"]:after {
  background-image: linear-gradient(-3.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="75"]:after {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #a9c821), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(0deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="76"]:after {
  background-image: linear-gradient(3.600000000000009deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="77"]:after {
  background-image: linear-gradient(7.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="78"]:after {
  background-image: linear-gradient(10.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="79"]:after {
  background-image: linear-gradient(14.400000000000006deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="80"]:after {
  background-image: linear-gradient(18deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="81"]:after {
  background-image: linear-gradient(21.60000000000001deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="82"]:after {
  background-image: linear-gradient(25.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="83"]:after {
  background-image: linear-gradient(28.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="84"]:after {
  background-image: linear-gradient(32.400000000000006deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="85"]:after {
  background-image: linear-gradient(36deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="86"]:after {
  background-image: linear-gradient(39.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="87"]:after {
  background-image: linear-gradient(43.20000000000002deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="88"]:after {
  background-image: linear-gradient(46.80000000000001deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="89"]:after {
  background-image: linear-gradient(50.400000000000006deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="90"]:after {
  background-image: linear-gradient(54deg,  #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg,  #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="91"]:after {
  background-image: linear-gradient(57.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="92"]:after {
  background-image: linear-gradient(61.20000000000002deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="93"]:after {
  background-image: linear-gradient(64.80000000000001deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="94"]:after {
  background-image: linear-gradient(68.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="95"]:after {
  background-image: linear-gradient(72deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="96"]:after {
  background-image: linear-gradient(75.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="97"]:after {
  background-image: linear-gradient(79.20000000000002deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="98"]:after {
  background-image: linear-gradient(82.80000000000001deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="99"]:after {
  background-image: linear-gradient(86.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="100"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #a9c821), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}

/* Snipet portfolio*/

.snip1504 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 292px;
  width: 100%;
  color: #000000;
  text-align: left;
  font-size: 16px;
  background-color: #085750;
  margin-right: auto;
  margin-left: auto;
}

.snip1504 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1504 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.snip1504 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.snip1504 h3,
.snip1504 h5 {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
  color: #fff;
}

.snip1504 h3 {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  text-transform: uppercase;
  font-weight: 400;
}

.snip1504 h5 {
  font-weight: normal;
  font-style: italic;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.snip1504 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1504:hover > img,
.snip1504.hover > img {
  opacity: 0.1;
}

.snip1504:hover h3,
.snip1504.hover h3,
.snip1504:hover h5,
.snip1504.hover h5 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}



/**
* $step is set to 5 by default, meaning you can only use percentage classes in increments of five (e.g. 25, 30, 45, 50, and so on). This helps to reduce the size of the final CSS file. If you need a number that doesn't end in 0 or 5, you can change the text percentage while rounding the class up/down to the nearest 5.
*/

$step      = 1
$loops     = round(100 / $step)
$increment = 360 / $loops
$half      = round($loops / 2)

for $i in (0)..($loops)
  .progress-circle[data-progress={'"'+$i * $step+'"'}]:after
    if $i < $half
      $next-deg = 90deg + $increment * $i
      background-image linear-gradient(90deg, $back-color 50%, transparent 50%, transparent), linear-gradient($next-deg, $theme-color 50%, $back-color 50%, $back-color)
    else
      $next-deg = -90deg + $increment * ($i - $half)
      background-image linear-gradient($next-deg, $theme-color 50%, transparent 50%, transparent), linear-gradient(270deg, $theme-color 50%, $back-color 50%, $back-color)



/* Gallery Portfolio */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.row {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0;
  clear: both;
  height: 500px;
}
.row img {
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.gallery ul li {
  float: left;
  margin: 0 0.8771929825%;
  overflow: hidden;
}

.gallery {
  padding: 40px 0 300px;
  position: relative;
  overflow: hidden;
}
.gallery ul {
  position: relative;
}
.gallery ul li {
  margin-bottom: 20px;
  width: 31%;
  position: relative;
}
.gallery ul li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.gallery ul li a h3 {
 line-height: 1.5em;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 color: #fff;
 z-index: 3;
 opacity: 0;
}

.gallery ul li a h3:hover {
 opacity: 1;
}


.gallery ul li a:before {
	position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.gallery ul li a:hover:before {
  opacity: 0.8;
  background-color: #085750;
}

.gallery ul li a:after {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  content: "";
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.gallery ul li a:hover:after {
  opacity: 1;
}

/*.titre-pf {
 line-height: 1.5em;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 color: #fff;
 z-index: 3;

}*/


.port {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-top: 100px;
  background: #ffffff;
  background-color: #fafafa;
  z-index: 103;
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  border-bottom: 1px solid #d0d0d0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.port img {
    width: 90%;
    margin: 10px;
}


.port .description {
  float: left;
  width: 70%;
  max-height: 100%;
  padding: 0 40px 40px;
  overflow: auto;
}

.port > * {
  opacity: 0;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.port.item_open {
  visibility: visible;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.port > * {
  opacity: 1;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.close {
  width: 21px;
  height: 21px;
  background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
  position: absolute;
  right: 10px;
  top: -121px;
  opacity: 1;
  z-index: 1004;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.item_open .close {
  opacity: 1;
  top: 0px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


/* SLIDER */

#slider1, #slider2, #slider3, #slider4, 
#slider5, #slider6, #slider7 {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
}

div#slider {
	width: 500px;
	height: 375px;
}

#slider1 ul, #slider2 ul, #slider3 ul, #slider4 ul, 
#slider5 ul, #slider6 ul, #slider7 ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider1 ul li, #slider2 ul li, #slider3 ul li, #slider4 ul li, 
#slider5 ul li, #slider6 ul li, #slider7 ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  background: #ccc;
  height: 375px;
  text-align: center;
  line-height: 300px;
}

#slider1 img, #slider2 img, #slider3 img, #slider4 img, 
#slider5 img, #slider6 img, #slider7 img {
  width: 100%;
  margin: 0;
}

a.control_prev, a.control_next {
	position: absolute;
    top: 45%;
    z-index: 999;
    display: block;
    padding: 1% 1%;
    width: auto;
    height: auto;
    background: #085750;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
  left: 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}


/* TIMELINE */


.timeline-container {
   width: 80%;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}
.timeline-container:before { /*This is the line down the middle*/
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1
}
.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}
.timeline-block-right {
   float: right;
}
.timeline-block-left {
   float: left;
   direction: rtl
}
.marker {
	width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #F5F7FA;
    background: #a9c821;
    margin-top: 10px;
    z-index: 9999;
}
.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: #666
}
.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500;
   color: #085750;
}
.timeline-content span {
    font-size: 16px;
    color: #777777;
}
.timeline-content p {
	font-size: 16px;
    color: #424242;
}
@media screen and (max-width: 768px) {
   .timeline-container:before {
      left: 8px;
      width: 2px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 30px;
   }
   .timeline-block-right {
      float: none;
   }
   .timeline-block-left {
      float: none;
      direction: ltr;
   }
}


/* Contact */

.opacity {
	opacity: 0.9;
}
.contact {
	color: #6ea007;
    padding: 0.5em 0.5em;
    margin-bottom: 2em;
    width: 100%;
    border: solid;
}
.contact-img {
	background-image: none;
}



/* Footer */
/*----------------------------*/
	#footer small {
		text-align: left;
	}
	.footer-mpxxl {
	margin-top: 45%;
}


}/* end of tablet view*/


/* Desktop view */
/*----------------------*/
@media (min-width: 769px) {
	/* Header */
	/*----------------------------*/
	#header {
		background-color: #085750;
		background-size: 100%;
	    background-repeat: no-repeat;
		margin:0;
	  	padding:0;
	}	
	 #header .grid {
		padding-bottom: 15em;
	 }

	.titre-name {
	font-size: 4.5em;
	}

	/* logo */
	/*----------------------------*/
	.logo {
		text-align: left;
		width: 25%;
	}
	/* nav */
	/*----------------------------*/
	.menu {
		margin-top: 2.5em;
    	align-items: end;
    	justify-content: flex-end;
    }
	.menu a {
		/*padding: 0.5em 1em 0.2em 1em;*/
	}
	.menu a:hover { /* poids : 11*/
		border-bottom: solid 1px;
		color: #fff;
	}
	.menu .current {
	border-bottom: solid 1px;
	color: #fff;
	}
	.menu-collapse {
    	background-color: none;
}
	/* btn-menu */
	/*----------------------------*/

	/* main */
	/*----------------------------*/



	.eco img {
	margin-bottom: 20px;
	}


	.progress-circle {
	background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    height: 7rem;
    margin: 1rem 0.5rem 0;
    position: relative;
    width: 7rem;
	}

/* progress circle */

.circle-box {
	margin: 0px 0px 10px 50px;
}
.progress-circle {
	background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    height: 6rem;
    margin: 1rem 0.6rem 0;
    position: relative;
    width: 6rem;
}
.progress-circle:before {
  -webkit-box-align: center;
          align-items: center;
  background-color: #fff;
  border-radius: 50%;
  content: attr(data-progress) '%';
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  top: 0.7rem;
  bottom: 0.7rem;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.progress-circle:after {
  background-color: #a9c821;
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 100%;
  width: 100%;
}
.progress-circle:hover:before,
.progress-circle:focus:before {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
/**
* $step is set to 5 by default, meaning you can only use percentage classes in increments of five (e.g. 25, 30, 45, 50, and so on). This helps to reduce the size of the final CSS file. If you need a number that doesn't end in 0 or 5, you can change the text percentage while rounding the class up/down to the nearest 5.
*/
.progress-circle[data-progress="0"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ddd), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, left top, right top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(90deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="1"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(93.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="2"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(97.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="3"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(100.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="4"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(104.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="5"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(108deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="6"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(111.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="7"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(115.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="8"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(118.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="9"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(122.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="10"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(126deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="11"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(129.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="12"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(133.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="13"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(136.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="14"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(140.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="15"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(144deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="16"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(147.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="17"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(151.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="18"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(154.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="19"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(158.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="20"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(162deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="21"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(165.60000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="22"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(169.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="23"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(172.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="24"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(176.4deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="25"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ddd), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(180deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="26"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(183.60000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="27"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(187.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="28"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(190.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="29"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(194.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="30"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(198deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="31"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(201.60000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="32"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(205.2deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="33"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(208.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="34"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(212.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="35"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(216deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="36"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(219.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="37"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(223.20000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="38"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(226.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="39"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(230.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="40"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(234deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="41"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(237.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="42"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(241.20000000000002deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="43"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(244.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="44"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(248.4deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="45"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(252deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="46"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(255.6deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="47"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(259.20000000000005deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="48"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(262.8deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="49"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(266.4deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="50"]:after {
  background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #a9c821), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(-90deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="51"]:after {
  background-image: linear-gradient(-86.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="52"]:after {
  background-image: linear-gradient(-82.8deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="53"]:after {
  background-image: linear-gradient(-79.2deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="54"]:after {
  background-image: linear-gradient(-75.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="55"]:after {
  background-image: linear-gradient(-72deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="56"]:after {
  background-image: linear-gradient(-68.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="57"]:after {
  background-image: linear-gradient(-64.8deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="58"]:after {
  background-image: linear-gradient(-61.2deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="59"]:after {
  background-image: linear-gradient(-57.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="60"]:after {
  background-image: linear-gradient(-54deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="61"]:after {
  background-image: linear-gradient(-50.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="62"]:after {
  background-image: linear-gradient(-46.8deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="63"]:after {
  background-image: linear-gradient(-43.199999999999996deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="64"]:after {
  background-image: linear-gradient(-39.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="65"]:after {
  background-image: linear-gradient(-36deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="66"]:after {
  background-image: linear-gradient(-32.4deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="67"]:after {
  background-image: linear-gradient(-28.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="68"]:after {
  background-image: linear-gradient(-25.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="69"]:after {
  background-image: linear-gradient(-21.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="70"]:after {
  background-image: linear-gradient(-18deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="71"]:after {
  background-image: linear-gradient(-14.399999999999991deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="72"]:after {
  background-image: linear-gradient(-10.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="73"]:after {
  background-image: linear-gradient(-7.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="74"]:after {
  background-image: linear-gradient(-3.599999999999994deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="75"]:after {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #a9c821), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(0deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="76"]:after {
  background-image: linear-gradient(3.600000000000009deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="77"]:after {
  background-image: linear-gradient(7.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="78"]:after {
  background-image: linear-gradient(10.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="79"]:after {
  background-image: linear-gradient(14.400000000000006deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="80"]:after {
  background-image: linear-gradient(18deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="81"]:after {
  background-image: linear-gradient(21.60000000000001deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="82"]:after {
  background-image: linear-gradient(25.200000000000003deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="83"]:after {
  background-image: linear-gradient(28.799999999999997deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="84"]:after {
  background-image: linear-gradient(32.400000000000006deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="85"]:after {
  background-image: linear-gradient(36deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="86"]:after {
  background-image: linear-gradient(39.599999999999994deg,  #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #0083ff 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="87"]:after {
  background-image: linear-gradient(43.20000000000002deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="88"]:after {
  background-image: linear-gradient(46.80000000000001deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="89"]:after {
  background-image: linear-gradient(50.400000000000006deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="90"]:after {
  background-image: linear-gradient(54deg,  #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="91"]:after {
  background-image: linear-gradient(57.599999999999994deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="92"]:after {
  background-image: linear-gradient(61.20000000000002deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="93"]:after {
  background-image: linear-gradient(64.80000000000001deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="94"]:after {
  background-image: linear-gradient(68.4deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="95"]:after {
  background-image: linear-gradient(72deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="96"]:after {
  background-image: linear-gradient(75.6deg, #0083ff 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="97"]:after {
  background-image: linear-gradient(79.20000000000002deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="98"]:after {
  background-image: linear-gradient(82.80000000000001deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg,#a9c821  50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="99"]:after {
  background-image: linear-gradient(86.4deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}
.progress-circle[data-progress="100"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #a9c821), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #0083ff), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #a9c821 50%, transparent 50%, transparent), linear-gradient(270deg, #a9c821 50%, #ddd 50%, #ddd);
}



/**
* $step is set to 5 by default, meaning you can only use percentage classes in increments of five (e.g. 25, 30, 45, 50, and so on). This helps to reduce the size of the final CSS file. If you need a number that doesn't end in 0 or 5, you can change the text percentage while rounding the class up/down to the nearest 5.
*/

$step      = 1
$loops     = round(100 / $step)
$increment = 360 / $loops
$half      = round($loops / 2)

for $i in (0)..($loops)
  .progress-circle[data-progress={'"'+$i * $step+'"'}]:after
    if $i < $half
      $next-deg = 90deg + $increment * $i
      background-image linear-gradient(90deg, $back-color 50%, transparent 50%, transparent), linear-gradient($next-deg, $theme-color 50%, $back-color 50%, $back-color)
    else
      $next-deg = -90deg + $increment * ($i - $half)
      background-image linear-gradient($next-deg, $theme-color 50%, transparent 50%, transparent), linear-gradient(270deg, $theme-color 50%, $back-color 50%, $back-color)



.port {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-top: 100px;
  background: #ffffff;
  background-color: #fafafa;
  z-index: 103;
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  border-bottom: 1px solid #d0d0d0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.port img {
    width: 45%;
    margin: 10px;
}


.port .description {
  float: left;
  width: 70%;
  max-height: 100%;
  padding: 0 40px 40px;
  overflow: auto;
}


/* SLIDER */

#slider1, #slider2, #slider3, #slider4, 
#slider5, #slider6, #slider7 {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
}

div#slider {
	width: 800px;
	height: 600px;
}

#slider1 ul, #slider2 ul, #slider3 ul, #slider4 ul, 
#slider5 ul, #slider6 ul, #slider7 ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider1 ul li, #slider2 ul li, #slider3 ul li, #slider4 ul li, 
#slider5 ul li, #slider6 ul li, #slider7 ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 600px;
  background: #ccc;
  height: 450px;
  text-align: center;
  line-height: 300px;
}

#slider1 img, #slider2 img, #slider3 img, #slider4 img, 
#slider5 img, #slider6 img, #slider7 img {
  width: 100%;
  margin: 0;
}

a.control_prev, a.control_next {
	position: absolute;
    top: 45%;
    z-index: 999;
    display: block;
    padding: 1% 1%;
    width: auto;
    height: auto;
    background: #085750;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
  left: 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}


/* TIMELINE */


.timeline-container {
	width: 70%;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
    margin-top: 0;
}


/* Contact */

.opacity {
	opacity: 0.9;
}
.contact {
	color: #6ea007;
    padding: 0.5em 0.5em;
    margin-bottom: 2em;
    width: 100%;
    border: solid;
}
.contact-img {
	background-image: url("../img/img-bg5--.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
}

	/* footer */
	/*----------------------------*/
	.footer-mpxxl {
	margin-top: 30%;
	}

	/* seulement si vous voulez pas que le hover surclasse le current*/
	.menu a.current { /* =11 */
		color: #fff;
		border-bottom: solid 1px;
	}


}/* end of desktop view*/