/* -------------------------------- 

Body

-------------------------------- */
*, *::after, *::before {
	box-sizing: border-box;
}
html {
	font-size: calc(1rem + 1vw); 
	margin: 0; 	
	overflow: scroll;	
}
body {
	background:#fff;
	color: #000; 
	display: flex;
	flex-direction: column;
 	transition: all 200ms;
	will-change: background;
}
h1 {font-family: "Le Murmure_Regular";
	color: #000;
	font-size: 2.5rem;
	line-height: 2.5rem;
	letter-spacing: 0.0rem;
	text-rendering: optimizeLegibility;
	padding-bottom: 1.8rem;
	
/* 	color: #000;
	font-size: 1.8rem;
	line-height: 2.2rem;
	font-weight: 600;
	letter-spacing: 0.05rem;
	text-rendering: optimizeLegibility;
	padding-bottom: 1.8rem; */	
	

}
h2 {font-family: "hkgroteskmedium",Helvetica, Arial;
	color: #000;
	font-size: 1.075rem;
	line-height: 1.25rem;
	text-rendering: optimizeLegibility;
	margin-bottom: 1.5rem;
	letter-spacing:0.025rem;
	position: relative;
}
h3 {font-family: "hkgroteskmedium",Helvetica, Arial;
	color: #000;
	font-size: 1.075rem;
	line-height: 1.25rem;;
	letter-spacing: 0.025rem;
	text-rendering: optimizeLegibility;
}
h4 {font-family: "hkgroteskmedium",Helvetica, Arial;
	color: #000;
	font-size: 0.65rem;
	line-height: 0.9rem;
	letter-spacing: 0.02rem;
	text-rendering: optimizeLegibility;
	text-align: center;
}
p {	font-family: "hkgroteskmedium",Helvetica, Arial;
	color: #000;
	font-size: 0.6rem;
	line-height: 0.90rem;
	letter-spacing: 0.02rem;
	text-rendering: optimizeLegibility;
}
img {
	width: 100%;
	height: auto;
	border: 0;
}
section {
	display: block;
	width: 100%;
	height: auto;
}
a {	text-decoration: none; 
}
figure { 	background: #fff;

	display: block;
}
figure figcaption {
    text-align: left;
	padding-top:-1rem;
	background: #fff;
	z-index: 99;
}
.light {font-size: 0.5em}

/*-------------------------------- 

Design

-------------------------------- */
.regular { 	
	font-family:"hkgroteskregular",Helvetica, Arial;}
.bold {
	font-family:"hkgroteskbold",Helvetica, Arial;}
.color {
	color: #3001ab;}
.bleu {
	color: #3001ab;}
.blanc {
	color: #fff;}
.noir {
	color: #000;}
.italique {
	font-family: "hkgroteskitalic",Helvetica, Arial;}
.disponible {
	color: #000;}
.marge { 
	margin: 0.75rem;}
.marge-mini-a { 
	margin: 0.75rem; margin-bottom: 10px;}
.marge-mini-b { 
	margin: 0.75rem; margin-top: 0; margin-bottom: 10px;}
.marge-mini-c { 
	margin: 0.75rem; margin-top: 0;}
.marge-3 { 
	top:-300px;
	margin: 0.75rem;}
.marge-section { 
	margin-bottom: 5rem;}
.marge-top {
	top:15vh;
}
.var {
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}

.header {
	font-family: "Le Murmure_Regular";
	font-size: 1.5rem;
	color: #000;
	letter-spacing: -0.02rem;
	margin-top: 1.5rem;
	margin-bottom: 40px;
	margin-left: calc(7% + 1rem);
	z-index:5;
	position: relative;
	height: 80px;	
}
.header-png {

	color: #000;
	margin-top: 1.5rem;
	margin-bottom: 40px;
	margin-left: calc(7% + 1rem);
	z-index:5;
	position: relative;
}

.header-png img {
	height: 0.5rem;
	width: auto;

}

.header-2 {
	font-family: "Le Murmure_Regular";
	font-size: 1.5rem;
	top:   1.5rem;
	margin-left: calc(7% + 1rem);
	z-index: 9999;
	position: sticky;
}
.header-png2 {
	top:   1.5rem;
	margin-left: calc(7% + 1rem);
	z-index: 9999;
	position: sticky;
}
.header-png2 img {
	height: 0.5rem;
	width: auto;

}
.divdispo {
	top: 0;
	left: 0;
	z-index: 2;
	padding: 0 7% 0 7%;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	height: 2rem;;
	width: 100%;
 	background:	#28d370;
}
.divindispo {
	top: 0;
	left: 0;
	z-index: 2;
	padding: 0 7% 0 7%;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	height: 2rem;;
	width: 100%;
 	background: #e27533;
}

.resume {
	position: relative;
	top:-150px;
   	z-index: 2; 
	display:block;
	font-family: "Le Murmure_Regular";
	align-items: center;
}
.intro {
	width: 100%;
	height: 100%;
	top: -1.5rem;
	left: 0;
	z-index: 10;
	position: relative;
}
.grid {
	position: relative;
	display: grid;
	grid-template-columns: 7% repeat(17, 1fr) 7% ;
	grid-template-rows: 15vh repeat(15, min-content) ;
	
}
.grid-2 {
	position: relative;
	display: grid;
	grid-template-columns: 10% 1fr 1fr 1fr 1fr 10% ;
	grid-template-rows:  repeat(15, min-content) ;
}
.grid-3 {
	position: relative;
	display: grid;
	grid-template-columns: 7% 1fr 1fr 1fr 7% ;
	grid-template-rows:  90vh 25px ;
	justify-items: center;
	justify-content: space-evenly;
	z-index: 25; 	
	margin-bottom: 1rem;
}
.grid-about {
	position: relative;
	display: grid;
	grid-template-columns: 7% repeat(17, 1fr) 7%  ;
	grid-template-rows: repeat(15, min-content) ;
	margin-bottom: 0vh;
}
.panel {
	height: 2vh;
	max-height: 100vh;
	z-index: 25;
}

.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
	
@media only screen and (max-width: 768px) {
	body {overflow: hidden}
	
	.header {
		z-index: 5;
		margin-left: 5%; 
		margin-right: 5%;
		position: relative;
		display:block;
		text-align:right;
		margin-bottom: 0;
		font-size: 1.8rem;
}
	.header-png {
		margin-top: 1.5rem;
		margin-bottom: 40px;
		margin-right: calc(5% + 1rem);
		z-index:5;
		position: relative;
		display:block;
		text-align:right;}
	
	.resume {
		position: relative;
		margin-left: 5%; 
		margin-right: 5%;
   		z-index: 2; 
		top: -2rem;
		margin-bottom: 2rem;
}
	.grid {
		display: inline;
		grid-template-columns: 5% 1fr 2fr 5%;
		grid-template-rows: 15% repeat(15, 15vh);
		top:10vh;
		margin-bottom: 2rem;
		padding-bottom: 2rem;
}
	.grid-2 {
		display: inline;
		grid-template-columns: 5% 90% 5%;
		grid-template-rows: repeat(25, 15vh);
}
	.intro {
		margin: 0; 
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 25;
}
	.grid-3 {
		display: grid;
		grid-template-columns: 5%  1fr  5%;
		grid-template-rows:  90vh 25px ;
		justify-items: center;
		justify-content: space-evenly;}
	
	.panel {
 	 	height: 15vh;
		max-height: 25vh;
		z-index: 25;
		margin-bottom: 2rem;
}
	.grid-about {
		position: relative;
		display: grid;
		grid-template-columns: 5% 1fr 5%  ;
		grid-template-rows: repeat(15, min-content) ;
		margin-bottom: 0vh;
		padding-top: 10vh;
}
}
.titre-projet {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
	position: relative;
}
.description {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 4;
	font-family: "hkgroteskmedium",Helvetica, Arial;
	color: #000;
	font-size: 0.9rem;
	letter-spacing: 0.05rem;
	line-height: 1.3;	
	margin-bottom: 8vh;
	top:0.3rem;
}
.contact {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 2;
	display: inherit;
		text-align: center;
	justify-content: center;
	align-content: center;

	font-family: "Le Murmure_Regular";
	color: #ffffff;
	
	font-size: 2.5rem;
	line-height: 2.6rem;
	/*
	letter-spacing: -0.05rem;
	text-decoration: none;
*/}
.border-grow-center-b {
	color: #fff;
	position: relative;
	padding-bottom: 3px;	
	transition: all .3s ease-in-out;
}
.border-grow-center-b:after {
    content: "";
    height: 3px;
    background: #fff;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}
.border-grow-center-b:hover::after {
    width: 100%;
    animation-duration: .3s;
    animation-name: bordergrow;
    animation-iteration-count: 1;
}
.border {border: 5px solid #fff;
background: #fff;}
@keyframes bordergrow {
  0% {
    left: 50%;
    width: 10%;
  }

  100% {
    left: 0;
    width: 100%;
  }
}


.behance {
	position: relative;
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 3;	
	justify-self: center;
	align-self: center;
	font-size: 0.55rem;
	line-height: 1.3rem;
	letter-spacing: 0.02rem;
	font-weight: 400;
	font-family: "hkgroteskmedium",Helvetica, Arial;
	text-decoration: none;
	display: inline;
	color: #fff;
}
	
.underline-right-b  {
	color: #fff;
	position: relative;
	padding-bottom: 2px; 
}
.underline-right-b:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #fff;
    width: 0%;
    display: block;
    transition: width .3s ease-in-out;
}
.underline-right-b:hover:after {
	width: 100%;
}
.underline-left-b  {
	color: #fff;
	position: relative;
	padding-bottom: 2px; 
}
.underline-left-b:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2px;
    background-color: #fff;
    width: 0%;
    display: block;
    transition: width .3s ease-in-out;
  }
.underline-left-b:hover:after {
	width: 100%;
}

/* -------------------------------- 

Galeries

-------------------------------- */
.galerie-1 {		
	position: relative;
	grid-column-start: 11;
	grid-column-end: 19;
	grid-row-start: 2;
	grid-row-end: 4;
 display: flex;
  align-items: center;
  justify-content: center;
}
.galerie-2 {;
	grid-column-start: 2;
	grid-column-end: 9;
	grid-row-start: 1;
	grid-row-end: 4;
}

.galerie-2>img { 	
	width: 100%;
	height: 100%;
}
.galerie-3 {

	grid-column-start: 2;
	grid-column-end: 12;
	grid-row-start: 4;
	grid-row-end: 6;	
}


.galerie-3>img {
	width: 100%;
	height: 100%;
}
.galerie-4 {	
	grid-column-start: 13;
	grid-column-end: 18;
	grid-row-start: 4;
	grid-row-end: 5;
}
.galerie-4>img {
	width: 100%;
	height: 100%;
}
.galerie-5 {	
	grid-column-start: 2;
	grid-column-end: 19;
	grid-row-start: 6;
	grid-row-end: 7;

}
.galerie-5>img {
	width: 100%;
	height: 100%;

}
.galerie-6 {	
	grid-column-start: 2;
	grid-column-end: 7;
	grid-row-start: 7;
	grid-row-end: 8;
}
.galerie-6>img {
	width: 100%;
	height: 100%;
}
.galerie-7 {	
	grid-column-start: 9;
	grid-column-end: 19;
	grid-row-start: 7;
	grid-row-end: 8;
}
.galerie-7>img {
	width: 100%;
	height: 100%;
}
.galerie-8 {	
	grid-column-start: 2;
	grid-column-end: 11;
	grid-row-start: 9;
	grid-row-end: 11;
}
.galerie-8>img {
	width: 100%;
	height: 100%;
}
.galerie-9 {	
	grid-column-start: 13;
	grid-column-end: 19;
	grid-row-start: 9;
	grid-row-end: 10;
}
.galerie-9>img {
	width: 100%;
	height: 100%;
}
.galerie-10 {	
	grid-column-start: 2;
	grid-column-end: 7;
	grid-row-start: 21;
	grid-row-end: 22;
}
.galerie-10>img {
	width: 100%;
	height: 100%;
}
.galerie-11 {	
	grid-column-start: 8;
	grid-column-end: 13;
	grid-row-start: 21;
	grid-row-end: 22;
}
.galerie-11>img {
	width: 100%;
	height: 100%;
}
.galerie-12 {	
	grid-column-start: 14;
	grid-column-end: 19;
	grid-row-start: 21;
	grid-row-end: 22;
}
.galerie-12>img {
	width: 100%;
	height: 100%;
}
/* -------------------------------- 

About

-------------------------------- */
.agence {
	font-family: "hkgroteskmedium",Helvetica, Arial;
	color: #3001ab;
	font-size: 0.55rem;
	letter-spacing: 0.02rem;

}


.about-1{
	grid-column-start: 2;
	grid-column-end: 8;
	grid-row-start: 1;
	grid-row-end: 2;	
	align-items: flex-end;
	margin-bottom: 2rem;
}
.about-2{
	grid-column-start: 12;
	grid-column-end: 19;
	grid-row-start: 1;
	grid-row-end: 2;
	margin-top: 2rem;	
	align-items: flex-end;				
}
.about-3{

	grid-column-start: 2;
	grid-column-end: 7;
	grid-row-start: 3;
	grid-row-end: 4;	
	margin-top: 2rem;	
	align-items: flex-end;								
}
.about-4{
	grid-column-start: 8;
	grid-column-end: 13;
	grid-row-start: 3;
	grid-row-end: 4;
	margin-top: 2rem;
	align-items: flex-end;					
}
.about-5{
	grid-column-start: 14;
	grid-column-end: 17;
	grid-row-start: 3;
	grid-row-end: 4;	
	margin-top: 2rem;	
	align-items: flex-end;
}

@media only screen and (max-width: 768px) {
	
.grid-about {
	position: relative;
	display: inline;
	grid-template-columns: 5%  90% 5%  ;
	grid-template-rows: repeat(15, min-content) ;
	margin-bottom: 0vh;
}
.about-1{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;	
}
.about-2{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	margin-top: 2rem;	

}
.about-3{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 4;	
	margin-top: 2rem;	
}
.about-4{
	grid-column-start: 8;
	grid-column-end: 16;
	grid-row-start: 3;
	grid-row-end: 4;	
	margin-top: 2rem;	
}
.about-5{
	grid-column-start: 14;
	grid-column-end: 19;
	grid-row-start: 3;
	grid-row-end: 4;	
	margin-top: 2rem;	
}	
	
	
	
	
}










/* -------------------------------- 

Galerie Portfolio

-------------------------------- */

.galerie-a {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 3;
	grid-row-end: 4;	
}
.galerie-a > img { 	
	width: 100%;
	height: 100%;
}
.galerie-a2 {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;	
}
@media only screen and (max-width: 768px) {
	.galerie-a2 { text-align: center;}
	.galerie-b2 { text-align: center;}
	
}
.galerie-b2 {
	position: relative;
	grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 3;	
}
.galerie-b2 > img { 	
	width: 100%;
	height: 100%;
}
.galerie-b {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 4;
	grid-row-end: 5;	
}
.galerie-b > img { 	
	width: 100%;
	height: 100%;
}

.galerie-c {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 5;
	grid-row-end: 6;	
}
.galerie-c > img { 	
	width: 100%;
	height: 100%;
}
.galerie-d {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 6;
	grid-row-end: 7;	
}
.galerie-d > img { 	
	width: 100%;
	height: 100%;
}
.galerie-e {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 7;
	grid-row-end: 8;	
}
.galerie-e > img { 	
	width: 100%;
	height: 100%;
}
.galerie-d2 {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 6;
	grid-row-end: 7;	
}
.galerie-d2 > img { 	
	width: 100%;
	height: 100%;
}
.galerie-e2 {
	position: relative;
	grid-column-start: 5;
	grid-column-end: 7;
	grid-row-start: 6;
	grid-row-end: 7;	
}
.galerie-e2 > img { 	
	width: 100%;
	height: 100%;
}
.galerie-f {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 8;
	grid-row-end: 9;
}
.galerie-f > img { 	
	width: 100%;
	height: 100%;
}
.galerie-f2 {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 8;
	grid-row-end: 9;
}
.galerie-f2 > img { 	
	width: 100%;
	height: 100%;
}
.galerie-g {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 9;
	grid-row-end: 10;
}
.galerie-g > img { 	
	width: 100%;
	height: 100%;
}
.galerie-g2 {
	position: relative;
	grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 8;
	grid-row-end: 9;
}
.galerie-g2 > img { 	
	width: 100%;
	height: 100%;
}
.galerie-h {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 10;
	grid-row-end: 11;
}
.galerie-h > img { 	
	width: 100%;
	height: 100%;
}
.galerie-i {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 11;
	grid-row-end: 12;
}
.galerie-i > img { 	
	width: 100%;
	height: 100%;
}
.galerie-j {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 12;
	grid-row-end: 13;
}
.galerie-j > img { 	
	width: 100%;
	height: 100%;
}
.galerie-k {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 13;
	grid-row-end: 14;
}
.galerie-k > img { 	
	width: 100%;
	height: 100%;
}
.galerie-k2 {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 13;
	grid-row-end: 14;
}
.galerie-k2 > img { 	
	width: 100%;
	height: 100%;
}

.galerie-l {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 14;
	grid-row-end: 15;
}
.galerie-l > img { 	
	width: 100%;
	height: 100%;
}
.galerie-l2 {
	position: relative;
	grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 13;
	grid-row-end: 14;
}
.galerie-l2 > img { 	
	width: 100%;
	height: 100%;
}
.galerie-m {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 15;
	grid-row-end: 16;
}
.galerie-m > img { 	
	width: 100%;
	height: 100%;
}
.galerie-n {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 16;
	grid-row-end: 17;
}
.galerie-n > img { 	
	width: 100%;
	height: 100%;
}
.galerie-o {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 17;
	grid-row-end: 18;
}
.galerie-o > img { 	
	width: 100%;
	height: 100%;
}
.galerie-p {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 18;
	grid-row-end: 19;
}
.galerie-p > img { 	
	width: 100%;
	height: 100%;
}
.galerie-q {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 19;
	grid-row-end: 20;
}
.galerie-q > img { 	
	width: 100%;
	height: 100%;
}
.galerie-r {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 20;
	grid-row-end: 21;
}
.galerie-r > img { 	
	width: 100%;
	height: 100%;
}

.galerie-s {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 21;
	grid-row-end: 22;
}
.galerie-s > img { 	
	width: 100%;
	height: 100%;
}

.galerie-t {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 22;
	grid-row-end: 23;
}
.galerie-t > img { 	
	width: 100%;
	height: 100%;
}
.galerie-u {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 23;
	grid-row-end: 24;
}
.galerie-u > img { 	
	width: 100%;
	height: 100%;
}
/*
/* -------------------------------- 

Portfolio

-------------------------------- */

.navigation {
	position: relative;
	display: grid;
	grid-template-columns: 10% 1fr 1fr 1fr 10%;
	grid-template-rows: 75px auto 125px  ;
}
.previous {
	position: relative;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 2;
	font-family: "hkgroteskmedium",Helvetica, Arial;
	font-size: 0.6rem;
	letter-spacing: 0.02rem;
	color: #000;
	justify-self: center;
	 display: block;
	text-decoration: none;
}	
.retour {
	position: relative;
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 2;
	font-family: "hkgroteskmedium",Helvetica, Arial;
	font-size: 0.6rem;
	letter-spacing: 0.02rem;
	color: #000;
	justify-self: center;
	display: block;
}
.next {
	position: relative;
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 2;
	font-family: "hkgroteskmedium",Helvetica, Arial;
	font-size: 0.6rem;
	letter-spacing: 0.02rem;
	color: #000;
	justify-self: center;
	display: block;
}

/* -------------------------------- 

Animation

-------------------------------- */

/*
.pic{
isolation: isolate;
background: #3001ab;
transition: background 0.6s;


}

.pic > img{

mix-blend-mode: luminosity;

	position: relative;

}

.pic:hover{

background: inherit

}
*/
.vignette { 
	transition: -webkit-transform 100ms;
    transition: transform 100ms;
    transition: transform 100ms, 
	-webkit-transform 100ms; 
}
.vignette:hover .vignette_image {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);

    transition: -webkit-transform 200ms;
    transition: transform 200ms;
    transition: transform 200ms, 
	-webkit-transform 200ms; 

}
.vignette_image { 

	transition: -webkit-transform 600ms;
	transition: transform 600ms;
	transition: transform 600ms, -webkit-transform 600ms; 

}

.vignette_image img:hover {
	width: 100%;

    transition: -webkit-ransform 600ms;
    transition: transform 600ms;
    transition: transform 600ms, -webkit-transform 600ms; 
}
.titre {
	font-family: "hkgroteskmedium",Helvetica, Arial;
	color: #3001ab;
	font-size: 0.55rem;
	letter-spacing: 0.02rem;
	z-index: 50;
	top: -0.2rem;
	position: relative;
	background: #fff;
	padding-top: 0.2rem
}
.categorie {
	font-family: "hkgroteskmedium",Helvetica, Arial;
	font-size: 0.55rem;
	color: #000;
	top:-1.1rem;
	position: relative;
	letter-spacing: 0.02rem;
	font-weight: 400;
}
.border-grow-center {
	color: #181818;
	position: relative;
	padding-bottom: 3px;	
	transition: all .3s ease-in-out;}

.border-grow-center:after {
    content: "";
    height: 2px;
    background: #181818;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}
.border-grow-center:hover::after {
	width: 100%;
    animation-duration: .3s;
    animation-name: bordergrow;
    animation-iteration-count: 1;
}
@keyframes bordergrow {
  0% {
    left: 50%;
    width: 10%;
  }

  100% {
    left: 0;
    width: 100%;
  }
}

.underline-right  {
	color: #181818;
	position: relative;
	padding-bottom: 2px;
}
.underline-right:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #181818;
    width: 0%;
    display: block;
    transition: width .3s ease-in-out;
}
.underline-right:hover:after {
	width: 100%;
}
.underline-left  {
	color: #181818;
	position: relative;
	padding-bottom: 2px;
}
.underline-left:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2px;
    background-color: #181818;
    width: 0%;
    display: block;
    transition: width .3s ease-in-out;
}
.underline-left:hover:after {
	width: 100%;
}

.yourModalClass {
  background-color: #fff;
  border: none;
  padding: 0 1.5em 1.5em;
  max-width: 85vh; width: 720px; min-width: 720px;
	height: auto;
  color:#fff;
	display: block;
}

@media only screen and (max-width: 500px) {
.yourModalClass {

  max-width: 400px; width: 400px; min-width: 400px;
	padding: 15px;
	margin: 0;

}	
}
.arrow-right.icon {
  color: #000;
  position: absolute;
  margin-left: 2px;
  margin-top: 10px;
  width: 16px;
  height: 1px;
  background-color: currentColor;
}
.arrow-right.icon:before {
  content: "";
  position: absolute;
  right: 1px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.arrow-left.icon {
  color: #000;
  position: absolute;
  margin-left: 3px;
  margin-top: 10px;
  width: 16px;
  height: 1px;
  background-color: currentColor;
}
.arrow-left.icon:before {
  content: "";
  position: absolute;
  left: 1px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.arrow-down.icon {
  color: #000;
  position: absolute;
  margin-left: 10px;
  margin-top: 2px;
  width: 1px;
  height: 16px;
  background-color: currentColor;
}
.arrow-down.icon:before {
  content: "";
  position: absolute;
  left: -5px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}