/***************
    RESET
**************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}


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


/**************
FONTS RENAULT
***************/
@font-face{
    font-family: "Read-bold";
    src: url('../fonts/Read-Bold.eot');
    src: url('../fonts/Read-Bold.eot?#iefix') format("embedded-opentype"), url('../fonts/Read-Bold.woff2') format("woff2"), url('../fonts/Read-Bold.woff') format("woff"), url('../fonts/Read-Bold.ttf') format("truetype"), url('../fonts/Read-Bold.svg') format("svg");
}
@font-face{
    font-family: "Read-Regular";
    src: url('../fonts/Read-Regular.eot');
    src: url('../fonts/Read-Regular.eot?#iefix') format("embedded-opentype"), url('../fonts/Read-Regular.woff2') format("woff2"), url('../fonts/Read-Regular.woff') format("woff"), url('../fonts/Read-Regular.ttf') format("truetype"), url('../fonts/Read-Regular.svg') format("svg");
}

@keyframes slideDown{
    from{transform: translateY(-30px);opacity: 0;}
    to{transform: translateY(0);opacity: 1;}
}

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




body{
    font-family: "Read-Regular";
    background-color: rgb(62, 62, 62); /*À modifier*/
    color: rgb(186, 186, 186);
    overflow-x: hidden;
}

p{margin-bottom: 10px;}



/**************
    CONTENT
*************/
main{box-sizing: border-box;}
.container{overflow-x: hidden;}
.l-container-porte{display: flex;width:100%;height: 100vh;position: relative;z-index: 2;}


/***************
    INDEX
**************/
.left{
	width:50%;
	background-color: brown; /*À modifier*/
    transition: 4000ms;
}

.right{
	width:50%;
	background-color: pink; /*À modifier*/
    transition: 4000ms;
}

.left.moveToleft{transform: translateX(-2000px);}
.right.moveToRight{transform: translateX(2000px);}

.video-full{width:100%;height: 100%;}

.stop{
    color:red; /*À modifier*/
    position: absolute;
    z-index: 2;
    bottom:50px;
    right: 25px;
    cursor: pointer;
}

.enter{
    cursor: pointer;
    width:50px;  /*À modifier*/
    height: 50px;  /*À modifier*/
    background-color: black;  /*À modifier*/
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

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

.l-container-video-full{position: absolute;top:0;}


/***************
    HOME
**************/
.home{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}



/**SECTION 1***/
.l-container-top{display: flex;justify-content: space-between;padding: 15px;}
.card{width: 50%;} /**À modifier*/
.card-video{border-radius: 10px;}
.video-top{width: 100%;border-radius: 10px;height: 100%;}
.card-content{display: flex; flex-direction: column;align-items: center;justify-content: space-between;}

.card-content-text{text-align: center;padding: 0 60px;}
.card-content-text h1{color: white;font-size: 1.5rem;}
.card-content-text h2{font-size: 1rem;}
.card-content-text p{padding: 5px 0;font-size: .8rem;}


/****SECTION 2****/
.l-container-middel{display: flex;justify-content: flex-end;align-items: center; height: 200px;}

/*****Filtre*****/
.card-car.active{opacity: 1;}
.card-car{
    width: 150px;
    height: 150px;
    background-color: black;
    color:white;
    margin: 0 50px;
    cursor: pointer;
    text-align: center;
    line-height: 150px; 
    opacity: .2;
    transition: 700ms;
}

/*****SECTION 3*****/

.l-container-bottom{animation: slideDown 800ms;}
.l-container-bottom.is-inactive{display: none;}
.grey{background-color: gray; min-height: 170px;}
.grey-dark{background-color: rgb(87, 86, 86); min-height: 170px;}

.container-bottom{
    display: flex;
    justify-content: space-between;    
}
.card-content-bottom-slide{
    padding: 20px;
    width: 60%;
}

.card-slide{
    width: 100px;
    height: 120px;
    background-color: black;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
   
}



/**Article**/

.article-car-content.is-inactive.active{
    display: flex;
    justify-content: space-between;
    width:100%;
    padding: 10px 0;
}
.article-car-content.is-inactive{display: none;}
.article-media,.article-content{width:50%;animation: opacity 700ms;}
.article-media img{width:100%;height: 100%;}
.article-media video{width:100%;height: 100%;}
.article-content{padding:10px;background-color: black; color:white;}



/**************
RESPONSIVE
***************/

@media screen and (max-width:  766px) {
    .l-container-top {flex-wrap: wrap;}

    .l-container-middel{justify-content: center;}
    .card-car{width:100px;height: 100px;margin: 0 30px;line-height: 100px;}

    .card{width:100%;padding-bottom: 15px;}
    .content-slider{
        display: flex;
        align-items: center;
        overflow: hidden;
        max-width: 210px;
    }
    .card-slide{
        min-width: 200px;
        height: 120px;
        background-color: black;
        border-radius: 10px;
        margin: 0 5px;
        cursor: pointer;
    
    }
}