/***********/
/*   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{
    margin:0;
    padding:0;
    background-color:#000012;
    color: white;
    font-family: "NouvelR-Regular";
   	overflow-x: hidden;
}

.loader{
	background: url('../images/ajax-loader.gif') 50% 50% no-repeat rgba(0, 0, 18, 0.8);
	cursor: wait;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}
	.loader h1{
		background: none;
		border: none;
		color: #458976;
		font-size: 22px;
		font-family: "Open Sans",sans-serif;
		font-variant: small-caps;
		font-weight: 700;
		height: 700px;
		line-height: 700px;
		margin: 0 0 10px;
		padding: 0;
		text-align: center;
	}
	
	
	
.data-scroll-container{overflow-x: hidden;}

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-Extrabold";}
h2{text-transform:uppercase;font-size:4rem; font-family: "NouvelR-Bold";text-align:center;}

h2.title-press{text-transform:uppercase;font-size:2.5rem; font-family:'NouvelR-Bold';text-align:center;margin: 100px 0 10px 0;color:#01e4e1;}
h4{text-transform:uppercase;}

.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;
	z-index:0;
}


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



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

section{margin-bottom: 50px;}

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


.soustitre {margin-right:10px;margin-left:10px;text-decoration:none;color:white;cursor:pointer;}
.soustitre:hover{color:#01e4e1;}

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


.display_video{margin: 40px 0;position: relative;clear:both;}

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

.toggle-scroll{
	color:white;
	display: flex;
    flex-direction: column;
    align-items: center;
	text-transform:uppercase;
	font-size:1.5rem;
	font-family:'NouvelR-Bold';
	line-height: 1.5rem;

}

.toggle-scroll:hover,.toggle-scroll:active,.toggle-scroll:focus{
	color:white;
}
.toggle-scroll span{font-size:2rem;}
/**tournette***/
.l-tournette{text-align:center;margin: 50px 0 10px 0;}
.tournette{}
.input-check{
	position: relative;
	width: 100px;
	height:30px;
	border: 3px solid #048f97; 
	background-color:#000012;
	-webkit-appearance:none;
	outline:none;
	border-radius: 20px;
	transition: .5s;
	cursor:pointer;
}



.input-check:before{
	content:""; 
	position:absolute;
	width:20px;
	height:20px;
	border-radius:100%;
	background-color:#048f97;
	top: 50%;
    left: 3px;
    transform: translateY(-50%);
    transition:.5s;
	
}

.input-check:checked:before{
	left: 72px;
	border: 3px solid #048f97;
	background-color:#000012;
}


.video-responsive { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}

.video-responsive iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
}

/*****************/
/* MODAL
/******************/
.my-modal{
	position:absolute;
	z-index:4;
	background-color: rgba(0,0,0, .7);
	height: 100%;
	width:100%;
	top:0;
}

.close-modal{
	color:white;
	font-size:2rem;
	position:absolute;
	right:5px;
	z-index:3;
	cursor:pointer;
}
.my-modal-content{
	width:100%;
	height:90vh;
	/*background-color:black;*/
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	color:black;
	text-align:center;
	
}
.my-modal-content iframe{width:95%;height:95%;}/*width:100%;height:100%;*/
/**************/
/* HEADER
***************/
header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	position:relative;
	z-index:1;
	margin-top:2%; /*5%;*/
}

.navigtaion{
	position:relative;
    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;}





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

.l-content-gif2{margin:0 auto 50px auto;width:60%;}
.l-content-gif2 img{width:100%;}

.clip{transition: 750ms}
.clip:hover{filter: saturate(2.5);}

section{position:relative;}

/**************/
/* 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:100px;font-family:'NouvelR-Bold';}

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

.top-description-content2{
	text-align:center;
	width:50%;
	margin: 10% auto;
	font-family: "NouvelR-Light";
	font-size:1rem;
}


.top-description-form{display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;}

.live{display:flex;width:100%; background-color: #000009;} /*width:100%*/
.form-img{width:100%;} /*70%;*/
.form-img img{width:100%;}

.live iframe{height: 300px;overflow:hidden;}


.live .iframeyoutube{height: 600px;width:100%;}

.live .vodalys{
	width: 80%;
	height: 720px;
}

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

.video-kangoo{left: 10%;}



/**************/
/* 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;
	float:right;
	margin: 20px 0;
}



/**************/
/* SECTION 4
***************/

#trafic-article-be-elangant,#trafic-article-be-enjoyable,#trafic-article-be-safe{
	position:relative;
	top:-127px;
}
.content-trafic-combi{position: relative;bottom: 200px;}


.l-content-trame-3{position:relative;left:13%;z-index:1;bottom:0px;} /*bottom:-155px*/
.l-content-trame-4{
	width: 285px;
    position: relative;
    left: 80%;
        top: -255px;/*sam*/
}

.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: -155px; /*sam*/
}


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

.spaceclass{text-align: right}


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

.content-slide{display:flex;justify-content:space-between;margin: 20px 0;} /*flex-wrap:wrap;*/
.card-slide{cursor: pointer;transition:750ms;display: inline-block;}
.card-slide:hover{color:#01e4e1;}
.card-slide-img{overflow:hidden;padding: 5px;} /*width:380px;height:255px;*/
.card-slide-img img{width:100%;}

.card-slide p{text-transform:uppercase;font-family: "NouvelR-Bold";font-size:1.5rem;text-align: center;margin-top: 10px;} /*2rem*/


.article-slide-visible{
	width: 100%;
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 999;
}




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



.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;width:60%;}
.upload a{color:white;font-family: "NouvelR-Light";text-transform:uppercase;padding-top: 18px;padding-left:10px;}
.close{cursor:pointer}

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

.lienmedia{font-family:'NouvelR-Bold';text-transform:uppercase;}
.lienmedia a{display:block;text-decoration:none;margin: 10px 0 30px 0;font-size:2.5rem;color:#ffffff;}
.lienmedia a:hover{color:#01e4e1;}

/***************/
/* FOOTER
****************/
footer{height:400px;width:100%;}
.logo-fin{margin:100px 0 50px 0;text-align: center;}
.logo-fin img{width:3%;}

.clip-path-footer{
	background-image: linear-gradient(140deg, #009a9e 0%,  #002b39 60%, #000e1f 100%);
	-webkit-clip-path: circle(63.6% at 64% 87%);
	clip-path: circle(63.6% at 64% 87%);
	width:400px;
	height:400px;
	float:right;
}



/***************/
/* VIDEO
****************/
.l-container-global{visibility:hidden;transition:700ms;}
.player{
	width:100%;
	height:100%;
	position:absolute;
	z-index:5;
}
.video-full{width:100%;min-height:100vh;}
.stop{position:absolute;top:20px;z-index:6;right:15px;cursor:pointer;width:21px;height:21px;}
.stop img{width:100%;}


.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 700ms;
  animation-duration: 700ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index:-1;
}
@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;display:none;}
}
@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;display:none;}
}





/********************/
/* navigation langue
*********************/

.l-content-language{
	display: flex;
    justify-content: space-around;
    align-items: center;
    width:20%;
}

.l-content-language li a{color:#262626;text-transform:uppercase;transition:500ms;}
.l-content-language li a:hover,.l-content-language li a:active{color:white;}
.cercle-green{width:5px;height:5px;border-radius:100%;background-color:#009a9e;display:block;}




@media screen and (min-width: 1900px) {
	h1{text-align:center;font-size:4rem;position:relative;left:-10%;}
	.top-description-content{font-size: 1.2rem;}
	.top-description-content2{font-size: 1.2rem;}
	.footer-content{left: 400px;}
	.display_video{padding: 0 65px 0 10px;}
	
	.ligne-full{left:15%;} 
	.content-section{margin-top:1%;} /*15%*/
	
	.l-content-trame-3{left:10%;}
	.footer-content img{width:100%;
	.footer-content a{font-size:1.5rem}
}


@media screen and (min-width: 1281px) and (max-width: 1500px) {
	.content-section{margin-top:10%;}
	.top-description {
    margin-top: 50px;
	}


}

@media screen and (min-width: 499px) and (max-width: 1280px) {
	.content-section{margin-top:10%;}


}
@media screen and (max-width:  499px) {
    body{background-color:#ffffff;}
	h2.title-press{font-size:1.5rem; }
}