@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,700,900&display=swap');@font-face{font-family:'lazer84';font-weight:lighter;src:url('sources/fonts/Lazer84.ttf')}
*{margin:0;padding:0;}

html, body {height:100%;}

body{width:100%;font-family:'Montserrat', sans-serif;color:#fff;font-size:2vh;;background-color:white;overflow-x:hidden;}

.slide{height:100vh;width:100%;}

/**************************** SLides général ****************************/


#sld1{z-index:100;top:0%;overflow-y:hidden;}
#sld2{background:url(sources/imgs/grid90.png) 100% 0 repeat fixed;z-index:100;top:100%;} 
#sld3{background:url(sources/imgs/neon.jpg) 100% 0 repeat fixed;background-size:cover;z-index:200;top:200%;}
#sld4{background:url(sources/imgs/carbon.png) 100% 0 repeat fixed;z-index:300;top:300%;overflow:hidden;}
#sld5{background:url(sources/imgs/IMGgrande.png) 100% 0 repeat fixed;z-index:400;top:400%;overflow:hidden;height:45vh;width:100%;}
#sld6{background:url("sources/imgs/agrid.png") 100% 0 no-repeat fixed;z-index:400;top:400%;overflow:hidden;height:50vh;width:100%;}
#sld7{background-color:#000;z-index:400;top:400%;overflow:hidden;height:25vh;width:100%;}

#Csld
{
    top:0%;
    height : 100vh;
    width : 100%;
    overflow:hidden;
}

#C2sld1
{
    background:url(sources/imgs/slide41.png) 100% 0 no-repeat fixed;
    background-position: bottom;
    position : absolute ;
    top : 300%;
    left : 0%;
    overflow:hidden;
}

#C2sld2
{
    background:url(sources/imgs/1.jpg) 100% 0 no-repeat fixed;
    position : absolute;
    background-size:cover;
    top : 300%;
    left : 100%;
    overflow:hidden;
}


#v1
{
    min-width : 100% ;
    min-height : 100vh ;
    overflow: hidden;
    z-index: -1000;
}

#v1 source{
    height: 100%;
    width: 100%;
}

h1
{
    font-family : "lazer84";
    font-size : 4vh;
    color : magenta;
    text-shadow: 3px 3px 0 #491190;
}
.ttr
{
    position : relative;
    top:15%;
    left : 5%;
    opacity : 1;
    z-index:8999;
}

#p2
{
    z-index:399;
}

h2
{
    font-family: "lazer84";
    color : white;
}

.w-100
{
    margin-top : 50px;
}

/**************************** Nav ****************************/

nav
{
    position : fixed ;
    z-index : 9100;
    left : 95%;
    top : 30px ;
    cursor : pointer;
    height : 50px;
    width : 50px;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px auto 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

#links1
{
    height : 100px;
    width : 100%;
    background : linear-gradient(to left, rgba(0,0,0,0.4), rgba(0,0,0,0.5));
    position : fixed ;
    top:0%;
    left : -100%;
    text-align : center ;
    line-height : 100px;
    z-index : 9099;
}

#links1 a
{
    color : magenta;
    text-shadow: 3px 3px 0 #491190 ;
    text-decoration: none;
    transition : all 0.5s ease-in-out;
    font-size : 20px;
    font-family : "lazer84";
    
}

#links1 a:hover
{
    color : white;
}

#links2
{
    height : 100%;
    width : 100%;
    top : 100%;
    background : linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.5));
    z-index : 9098;
    position : fixed;
}

#links2 a
{
    color : magenta;
    text-shadow : 4px 4px 0 #491190;
    text-decoration: none;
    text-align : center;
    font-size : 5vh;
    font-family : "lazer84";
}

.l
{
    height : 1vh;
    width : 100%;
    text-align : center;
}

#l1
{
    margin-top : 6vh;
    left : -100%;
}
#l2
{
    margin-top : 12vh;
    left : 100%;
}
#l3
{
    margin-top : 12vh;
    left : -100%;
}
#l4
{
    margin-top : 12vh;
    left : 100%;
}
#l5
{
    margin-top : 12vh;
    left : -100%;
}
#l6
{
    margin-top : 20vh;
    left : 100%;
    font-size : 40px;
}


/********** SLIDES *********/

.contact
{
    position : fixed;
    top : 97.5%;
    margin-top : -60px;
    left : 1%;
    height:60px;
    width:60px;
    background-color: magenta;
    border : 4px solid #fff;
    border-radius : 4px;
    box-shadow: 0 0 4px #fff;
    padding:6px;
}
.contact img
{
    height : auto;
    width : 100%;
}
h5
{
    color:#000;
}

/* CAROUSSEL */

.fleche
{
    font-size : 60px;
    color : white ;
    font-weight : bold ;
    cursor : pointer ;
    position : relative ;
}

.fleche_b
{
    top : 90% ;
    margin-top : -100px;
    left : 50%;
    margin-left:-30px;
    opacity:0;
}
.fleche_d
{
    top : 50% ;
    margin-top:-60px;
    left : 95%;
}

.fleche_g
{
    top : 50% ;
    margin-top : -60px;
    left : 5%;
}



/*************** SLIDE 1 **************/

.bgc
{
    position : absolute ;
    min-width: 100%;
    min-height: 100%;
    top : 50% ;
    left : 50% ;
    background-size: cover;
    display : block;
    transform: translateX(-50%) translateY(-50%);
}

.imgh
{
    position : absolute;
    top : 10%;
    width : 100%;
    z-index : 199;
}


#logo
{
    margin-top:25px;
    width : auto ;
    opacity : 0;
}


.arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

/*************** SLIDE 2 **************/

#pola1
{
    position : absolute;
    height : 60vh;
    top:145%;
    left:175%;
    -webkit-transform: rotate(15deg);
    z-index:101;
}
#pola2
{
    position : absolute;
    height : 30vh;
    top:145%;
    left:175%;
    -webkit-transform: rotate(15deg);
    z-index:101;
}

#sld2ttr
{
    text-align : center;
    margin-top : 20%;
    margin-bottom : 100px;
    opacity : 0;
}

.sld2txt
{
    position : relative;
    left:-200%;
    line-height : 50px;
    width : inherit;
    background-color : magenta;
    padding : 8px;
}
.sld2txtbis
{
    position : relative;
    text-align:center;
    left:-200%;
    line-height : 30px;
    background-color: magenta;
    padding : 4px;
}
#sld2txtbis1
{
    left:200%;
    text-align:center;
}
#sld2txtbis2
{
    left:200%;
    text-align:center;
}
#sld2txtbis3
{
    left:200%;
    text-align:center;
}
#sld2txtbis4
{
    left:-200%;
    text-align:center;
}
#sld2txtbis5
{
    left:-200%;
    text-align:center;
}

/************** SILDE 3  **************/
#sld3txt1
{
    position : relative;
    top : 45%;
    left:20%;
    opacity:0;
    text-align:right;
}
#sld3txt2
{
    position : relative;
    top : 125%;
    left:20%;
    opacity:0;
    text-align:right;
}

#sld3txt3
{
    position : relative;
    top:30%;
    left:50%;
    opacity:0;
}

#polas1
{
    height:50vh;
    position:relative;
    cursor:pointer;
    opacity:0;
    left:-10%;
    
    transition : all 0.5s ease-in-out;
    top:50%;
}
#polas1:hover
{
    top:48%;
}

#polas2
{
    height : 30vh;
    position:relative;
    opacity:0;
    top:80%;
}

/*********** SLIDE 4 *************/

.arrow2{
    position: absolute;
    top: 50%;
    margin-top:30px;
    left: 95%;
    cursor:pointer;
}
.arrow2 span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    transform: rotate(45deg);
    margin: -35px;
    animation: animate2 2s infinite;
}
.arrow2 span:nth-child(2){
    animation-delay: -0.4s;
}
.arrow2 span:nth-child(3){
    animation-delay: -0.8s;
}
@keyframes animate2 {
    0%{
        opacity: 0;
        transform: rotate(-45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(-45deg) translate(20px,20px);
    }
}

.arrow3{
    position: absolute;
    top: 50%;
    margin-top:30px;
    left: 5%;
    transform: translate(-50%,-50%);
    cursor:pointer;
}
.arrow3 span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    transform: rotate(45deg);
    margin: -35px;
    animation: animate3 2s infinite;
}
.arrow3 span:nth-child(2){
    animation-delay: -0.4s;
}
.arrow3 span:nth-child(3){
    animation-delay: -0.8s;
}
@keyframes animate3 {
    0%{
        opacity: 0;
        transform: rotate(135deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(135deg) translate(20px,20px);
    }
}




#btns21, #btns22
{
    z-index:9000;
}

.sld4txt
{
    cursor : pointer;
    position : absolute;
    width : 350px;
}

.sld4txt1
{
    font-weight : 900;
    text-align:center;
    
    transition: all 1s ease-in-out;
    font-size : 3vh;
    color : grey;
    text-shadow: 0 0 3px rgba(0,0,0,0);
}

.sld4txt2
{
    font-style: italic;
    text-align:center;
    
    transition : all 1s ease-in-out;
    font-size : 2.2vh;
}

#sld4txtp1
{
    top : 45%;
    left : 10%;
}
#sld4txtp2
{
    top : 20%;
    left : 25%;
}
#sld4txtp3
{
    top : 20%;
    left : 55%;
}
#sld4txtp4
{
    top : 45%;
    left : 70%;   
}


.sld4txt:hover .sld4txt1
{
    font-size:3.05vh;
    color : magenta;
    text-shadow: 0 0 3px rgba(245,0,245,0.8);
}
.sld4txt:hover .sld4txt2
{
    font-size:2.25vh;
}

.sld4txtRES
{
    margin-top : 20%;
}

.sld4txt3
{
    font-weight : 900;
    text-align:center;
    font-size : 3vh;
    color : magenta;
    text-shadow: 0 0 3px rgba(245,0,245,0.8);
}
.sld4txt4
{
    font-style: italic;
    text-align:center;
    font-size : 2.2vh;
}

.w-100
{
    margin-top : 50%;
}

/********pt2********/

.imgo
{
    height : 350px;
    text-align : center;
}

#imgo1
{
    position : relative;
    top : 0px;
    opacity : 1;
}
#imgo2
{
    position : relative;
    top : -340px;
    opacity : 0;
}
#imgo3
{
    position : relative;
    top : -690px;
    opacity : 0;
}
#imgo4
{
    position : relative;
    top : -1040px;
    opacity : 0;
}


.imgobis
{
    height : 150px;
    text-align : center;
}

#imgo5
{
    position : relative;
    text-align : center;
    top : 0px;
    opacity : 1;
}
#imgo6
{
    position : relative;
    text-align : center;
    top : -140px;
    opacity : 0;
}
#imgo7
{
    position : relative;
    text-align : center;
    top : -290px;
    opacity : 0;
}
#imgo8
{
    position : relative;
    text-align : center;
    top : -440px;
    opacity : 0;
}

.carcol
{
    height : 75px;
    width : 75px;
    border : 5px solid #fff;
    box-shadow: 0 0 3px #fff;
    border-radius : 5px;
}
.carcol:hover
{
    cursor:pointer;
}

#carcol1, #carcol5
{
    background-color: darkmagenta;
}
#carcol2, #carcol6
{
    background-color: darkcyan;
}
#carcol3, #carcol7
{
    background-color: darkorange;
}
#carcol4, #carcol8
{
    background-color: rebeccapurple;
}

.reccol
{
    height : 100px;
    width : auto;
    border : 5px solid #fff;
    box-shadow: 0 0 5px #fff;
    border-radius : 5px;
    padding : 10px;
    text-align : center;
    cursor:pointer;
    
    transition : all 0.4s ease-in-out;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.reccol:hover
{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.reccol img
{
    height : 90%;
    width : auto;
}

#reccol1
{
    background-color: darkmagenta;
}
#reccol2
{
    background-color: darkcyan;
}
#reccol3
{
    background-color: darkorange;
    padding : 20px;
}

.reccoltxt
{
    width : 100%;
    height : 175px;
    padding : 25px;
    border : 5px solid #fff;
    box-shadow: 0 0 5px #fff;
    border-radius : 5px;
    text-align:left;
}
#reccoltxt1
{
    background-color: darkmagenta;
    position : relative;
    margin-top : 25px;
    opacity : 0;
}
#reccoltxt2
{
    background-color: darkcyan;
    position : relative;
    margin-top : -175px;
    opacity : 0;
}
#reccoltxt3
{
    background-color: darkorange;
    position : relative;
    margin-top : -175px;
    opacity : 0;
}

.carlg
{
    width:250px;
    height : 100px;
    padding : 10px;
    border : 5px solid #fff;
    box-shadow : 0 0 5px #fff;
    border-radius : 5px;
    text-align:center;
    margin-top : 5%;
}
.carlg img
{
    height : 100%;
    width : auto;
}

#carlg1
{
    background-color: darkmagenta;
}
#carlg2
{
    background-color: darkcyan;
    line-height:75px;
}
#carlg3
{
    background-color: darkorange;
    line-height:75px;
}
#carlg3 img
{
    height : 75%;
}

#dealer
{
    text-shadow: 2px 2px 0 #491190;
    text-align:center;
    float:right;
    height : 75px;
    width : 300px;;
    padding : 10px;
    cursor : pointer;
    border-radius : 5px;
    
    transition : all 0.5s ease-in-out;
    color : magenta;
    background-color : #fff;
    border : 4px solid magenta;
    box-shadow : 0 0 4px magenta;
}
#dealer:hover
{
    color:#fff;
    background-color: magenta;
    border : 4px solid #fff;
    box-shadow : 0 0 4px #fff;
}

#carres
{
    margin-top:-950px;
}

.sldres
{
    position : absolute;
    height : auto ;
    width : 85%;
    top : 35%;
    left : 105%;
    padding : 12px;
    border : 8px solid #fff;
    border-radius : 10px;
    box-shadow : 0 0 8px #fff;
}
.sldres p
{
    font-size : 3.5vh;
}
.sldres span
{
    color :white;
}
.sldres button
{
    float : left;
    margin-bottom : 10px;
}


#sldres1
{
    background-color: darkmagenta;
}
#sldres2
{
    background-color: darkcyan;
}
#sldres3
{
    background-color: darkorange;
}

/***************** SLIDE 5 *****************/

#contact
{
    margin-top : 6%;
}

#h2ctc
{
    text-align : center;
    margin-bottom : 2.5%;
    font-size : 3vh;
}

.input-group
{
    margin-top : 2%;
}

button
{
    float:right;
}


footer
{
    position : absolute;
    overflow:hidden;
    top : 520%;
    width : 100%;
    height:32px;
    margin-top : -30px;
    background-color : rgba(255,0,255,0.25);
    font-size : 1.5vh;
    line-height : 30px;
    border-radius : 30px 30px 0 0;
    z-index : 8999;
}


#footer1
{
    margin-top:1.5%;
}

#footer1 h2
{
    font-size : 2.2vh;
    margin-bottom:2.5vh;
    color : magenta;
}

#footer1 p
{
    text-align:right;
    font-size:1.2vh;
    color : magenta;
}

.lgr
{
    padding : 0.5vh;
    text-align:center;
}

.lgr img
{
    height : 4vh;
    width : auto;
}

/**********************************************************************/

@media all and (max-width: 992px)
{
    nav
    {
        left:90%;
    }
    
    .ttr
    {
        top:7.5%;
    }
    
    #C2sld1
    {
        background:url(sources/imgs/slide41bis.png) 100% 0 no-repeat fixed;
    }
    
    h2
    {
        font-size : 3vh;
    }
    
    #dealer
    {
        height:75px;
        width:175px;
        line-height:20px;
    }
    
    #carres
    {
        margin-top:-400px;
        margin-left:50px;
    }
    #carres2
    {
        margin-top:50px;
        margin-left:50px;
    }
    
    #h2ctc
    {
        text-align:right;
        font-size : 2.5vh;
    }
}

@media all and (max-width: 768px){
    
    nav
    {
        left : 85%;    
    }
    
    .carlg{
        width:auto;
    }

    #carres
    {
        margin-top:-400px;
	margin-left:5px;
    }
    
    #carres2
    {
	margin-left:5px;
    }

    #footer1 p
    {
        font-size : 1vh;
    }
}