/***********/
/*   GENERAL
/************/


/**********/
/* FONT
**********/

@font-face {
    font-family: "NouvelR-Extrabold;
    src: url("../fonts/NouvelR-Extrabold.ttf") format("truetype"),
    	 url("../fonts/NouvelR-Extrabold.otf") format("openType"),
         url("../fonts/NouvelR-Extrabold.woff") format("woff"),
         url("../fonts/NouvelR-Extrabold.woff2") format("woff2");
}


@font-face {
	font-family: "NouvelR-Bold";
    src: url("../fonts/NouvelR-Bold.ttf") format("truetype"),
         url("../fonts/NouvelR-Bold.otf") format("openType"),
         url("../fonts/NouvelR-Bold.woff") format("woff"),
         url("../fonts/NouvelR-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "NouvelR-Light";
    src: url("../fonts/NouvelR-Light.ttf") format("truetype"),
         url("../fonts/NouvelR-Light.otf") format("openType"),
         url("../fonts/NouvelR-Light.woff") format("woff"),
         url("../fonts/NouvelR-Light.woff2") format("woff2");
}

@font-face {
    font-family: "NouvelR-Regular";
    src: url("../fonts/NouvelR-Regular.ttf") format("truetype"),
     	 url("../fonts/NouvelR-Regular.otf") format("openType"),
         url("../fonts/NouvelR-Regular.woff") format("woff"),
         url("../fonts/NouvelR-Regular.woff2") format("woff2");
}



body{font-family: "NouvelR-Regular";}

a{text-decoration: none;}
.content-language a{text-transform: uppercase;color:#74a4a8;}
.content-language a.active{color:white}

ul{list-style: none;}

h1{text-transform:uppercase;text-align:center;font-size:3rem; font-family: "NouvelR-Regular";margin-block-start: 0em;}
h2{text-transform:uppercase;font-size:4rem; font-family: "NouvelR-Bold";text-align:center;}




.ligne-full{
	width:1px;
	height:100%;
	position:absolute;
	left:20%;
	top:0;
	background-image: linear-gradient(to bottom, #01e4e1 0%, #1e1e2e 50% , #1e1e2e 100%);
}


.ligne{
	width:1px;
	height:100%;
	background-color: #1e1e2e;
	position:fixed;
	right:20%;
	text-align:center;
}


.ligne::after{
	content:'';
	position:absolute;
	width:3px;
	height:121px;
	background-color:white;
	top:60%;
	z-index:0;
}



.text-right{text-align:right;}

section{margin-bottom: 50px;}

.trame img{	transition: 750ms;}
.trame img:hover{filter: saturate(15);}

@keyframes opa{from{opacity: 0;}to{ opacity: 1;}}

/**************/
/* HEADER
***************/
header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	position:relative;
	z-index:1;
	margin-top:5%;
}

.navigtaion{
    text-transform: uppercase;
    -moz-transform: rotate(90deg) translate(250px, -230px);
    -webkit-transform: rotate(90deg) translate(250px, -230px);
    -o-transform: rotate(90deg) translate(250px -230px);
    -ms-transform: rotate(90deg) translate(250px, -230px);
    transform: rotate(90deg) translate(250px, -230px);
}
.navigtaion ul{display: flex;}
.navigtaion ul li{padding:0 20px;}
.navigtaion ul li a{color:#4d4d5a;font-family: "NouvelR-Bold";transition: 500ms;}
.navigtaion ul li a.active{color:white}
.navigtaion ul li a:hover{color:white;}


.content-language{display:flex;justify-content:space-around;align-items:center;margin-left:15px;}
.content-language a{padding: 0 10px;}
.cercle{width:6px;height:6px;border-radius:100%;background-color:white;display:inline-block;}


.logo{margin:30px 0 50px 0;}

.l-content-gif{margin: 0 auto;width:60%;}
.l-content-gif img{width:60%;}


/**************/
/* SECTION 1
***************/

.clip-path-section-1{
	background-image: linear-gradient(140deg, #009a9e 0%,  #002b39 60%, #000e1f 100%);
	-webkit-clip-path: circle(94.5% at 5% 5%);
	clip-path: circle(94.5% at 5% 5%);
	width:350px;
	height:350px;
	position: absolute;
    top: -5%;
    z-index:1;
}





.top-description{text-align:center;margin-top:10%;}

.top-description-content{
	text-align:center;
	width:50%;
	margin: 15% auto;
	font-family: "NouvelR-Light";
}


.top-description-form{display:flex;align-items:flex-end;justify-content:center;}
textarea{background-color: transparent;border: 1px solid white; resize:none;width: 20%;height:200px;}
.form-img{width:80%;}
.form-img img{width:100%;}

.content-section{}



/**************/
/* SECTION 2
***************/
img[alt='kangoo']{width:58%;}
.l-content-trame-2 {
    width: 250px;
    position: relative;
    left: 84%;
}


/**************/
/* SECTION 3
***************/
img[alt='express-van']{width:60%;}
.content-title-express{text-align:center;}
.clip-path-section-3{
	background-image: linear-gradient(-120deg, #009a9e 0%,  #002b39 60%, #000e1f 100%);
	-webkit-clip-path: circle(56.7% at 57% 5%);
	clip-path: circle(56.7% at 57% 5%);
	width:500px;
	height:400px;
	position:relative;
	left: 65%;
}


.l-content-trame-1{position:relative;top:-60px;}
/**************/
/* SECTION 4
***************/

.l-content-trame-3{position:relative;left:13%;z-index:1;}
.l-content-trame-4{
	width: 285px;
    position: relative;
    left: 80%;
    top:650px;
}

.clip-path-section-4{
    background-image: linear-gradient(140deg, #009a9e 0%,  #002b39 60%, #000e1f 100%);
	-webkit-clip-path: circle(58.4% at 41% 11%);
	clip-path: circle(58.4% at 41% 11%);
	width:500px;
	height:400px;
	position: relative;
    z-index:0;
    left:-50px;
    top:-150px;
}


img[alt='Trafic-Combi'],img[alt='SpaceClass']{width:60%;}




/***************/
/* SLIDE
****************/

.content-slide{display:flex;}
.card-slide{cursor: pointer;margin:0 10px;}
.card-slide-img{width:380px;height:255px;overflow:hidden;}
.card-slide-img img{width:100%;}

.card-slide h3{color: #01e4e1;text-transform:uppercase;margin: 15px 0 5px 0;}
.card-slide p{text-transform:uppercase;font-family: "NouvelR-Bold";font-size:2rem;}

.is-inactive{display:none;}
.is-inactive.active{display:block;}



/***************/
/* ARTICLE
****************/


.content-slide{margin:10px 0;}
.img{width:100%;}
.article-content{background-color:black;padding: 18px;}

.article-content-top{display: flex;align-items: center;justify-content: space-between}
.upload{display: flex;align-items: center;justify-content: space-around;width:60%;}
.upload a{color:white;font-family: "NouvelR-Light";text-transform:uppercase;padding-top: 18px;}
.close{cursor:pointer}

h3.article-body-title{font-family: "NouvelR-Bold";text-transform:uppercase;text-align: left;padding: 10px 0}
p.article-body-content{padding:10px 0;}



/***************/
/* FOOTER
****************/
footer{text-align:center;position:relative}
.clip-path-footer{
	background-image: linear-gradient(140deg, #009a9e 0%,  #002b39 60%, #000e1f 100%);
	-webkit-clip-path: circle(64.0% at 64% 87%);
	clip-path: circle(64.0% at 64% 87%);
	width:500px;
	height:500px;
	position: relative;
    left: 65%;
}

.footer-content{position:absolute;top:50%;transform:translateY(-50%);z-index:1;left: 40px;}
.footer-content img{width:70%;}
.footer-content a{display:block;color:#01e4e1;text-decoration:underline;font-family: "NouvelR-Regular";margin: 30px 0;}