@import url(/css/normalize.css);
  @import url(/css/pure-grid.css);

html {
    font-size:7.5px;
    line-height:7.5px;
    font-family: 'Open Sans', sans-serif;
    color:#333;
    height:100%;
}
@media screen and (min-width: 64rem) {
    html {
        font-size:10px;
        line-height:10px;
    }
}


body{
    background:url(/images/fond.jpg) center center fixed #333;
    background-size:cover;
    height:100%;
}
.max-width {
    max-width:1000px;
    margin:0 auto;
}
p {
    padding:1rem 0;
}

.flex {
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
}

a {
    text-decoration:none;
    color:#009444;
    cursor:pointer;
}



 .haut {
    color:#fff;
    font-size:2.4rem;
    line-height:3.2rem;
    font-family: 'Open Sans Condensed', sans-serif;
    clear:both;
    position:relative;
}
 .haut .boite{
    padding:8rem 2rem;
}
 .haut h2{
    background:#009444;
    color:#fff;
    font-size:6rem;
    line-height:6rem;
    padding:6rem 2rem;
    text-align:center;
    text-transform:uppercase;
}
.haut .ancre{
    display:block;
    position:absolute;
    top:-60px;
}
.haut p{
    text-align:center;
    display:block;
}
 .haut h3{
    text-align:center;
    color:#009444;
    font-size:4rem;
    line-height:5rem;
    padding:0rem 2rem 2rem;
    text-align:center;
    text-transform:uppercase;
    position:relative;
}


/*menu*/
.menu{
    height:60px;
    background:rgba(0,0,0,0.87);
    position:fixed;
    width:100%;
    z-index:10000;  
}
.menu a.nom{
    float:left;
    padding:12px 2rem;
    display:block;
    font-family: 'Open Sans Condensed', sans-serif;
    color:#fff;
    font-size:14px;
    line-height:18px;
    text-decoration:none;
    font-weight:700;
    text-transform:uppercase;
}
.menu a.nom span{
    display:block;
    text-decoration:none;
    color:#AAA;
    font-weight:300;
    text-transform:initial;
}
.menu a.ui-mobile{
    width:60px;
    height:60px;
    float:right;
    overflow:hidden;
    position:relative;
    text-indent:-1000px;
}
.menu a.ui-mobile:before,
.menu a.ui-mobile:after{
    content:"";
    display:block;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    width:24px;
    height:6px;
    position:absolute;
    top:22px;
    left:18px;
}
.menu a.ui-mobile:after{
    border:0;
    border-bottom:1px solid #fff;
    top:30px;
    left:18px;
}

.menu .ui-menu{
    display:none;
    position:absolute;
    top:60px;
    width:100%;
}
.menu ul{
    border-bottom:5px solid rgba(0,0,0,0.9);
}

.menu ul a{
    font-size:16px;
    line-height:21px;
    font-weight:400;
    padding:2rem 2rem;
    text-transform:uppercase;
    color:#009444;
    background:#fff;
    border-top:1px solid #ccc;
    display:block;
    text-decoration:none;
    text-align:center;
    transition:all 0.2s linear;
}
.menu ul a:hover,
.menu ul a:focus{
    background:#009444;
    color:#fff;
}
.menu ul li:first-child a{
    border-top:0;
}

@media screen and (min-width: 35.5rem) {
.menu a.nom{
    padding:0px 2rem;
    font-size:18px;
    line-height:60px;
}
.menu a.nom span{
    display:inline-block;
}
.menu a.nom span:before{
    content:"///";
    display:inline-block;
    margin:0 8px;
    color:#fff;
}

}
@media screen and (min-width: 48rem) {
.menu .ui-menu{
    width:600px;
    right:0;
}
.menu ul{
    border-left:5px solid rgba(0,0,0,0.9);
}


}

@media screen and (min-width: 80rem) {

    .menu .ui-mobile {
        display:none;
    }

.menu .ui-menu{
    display:block!important;
    position:relative;
    top:0;
    right:0;
    width:auto;
    float:right;
}
.menu ul{
    border:0;
}
.menu ul li{
    float:left;
}
.menu ul li.tel{
    font-size:18px;
    line-height:60px;
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    padding-right:3rem;
}
.menu ul li.tel b{
    font-weight:700;
}
.menu ul a{
    font-size:18px;
    line-height:60px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:700;
    padding:0rem 2rem 0 1rem;
    text-transform:uppercase;
    color:#FFF;
    background:none;
    border-top:0;
    display:block;
    text-decoration:none;
    text-align:center;
    transition:all 0.2s linear;
}
.menu ul a:hover,
.menu ul a:focus{
    color:#009444;
    background:none;
}
.menu ul li:first-child a{
    border-top:0;
    padding-left:0;
}

.menu ul li.langue a{
    font-weight:400;
}
}


.hero{
    border-top:60px solid #009444;
}


.hero .logo{
    background:#fff;
    padding:5rem 0;
    text-align:center;
}
.hero .logo img.garev{
    width:70%;
    margin:0 auto 0;
}

.hero .logo img.vip{
    width:40%;
    max-width:200px;
    margin:0 auto 0;
}

.hero .titre{
    display:table;
    width:100%;
    height:100%;
}
.hero .titre .titre-boite{
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%;
}

.hero h1{
    color:#fff;
    font-size:4rem;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
    line-height:4.5rem;
    margin:0 4rem;
    padding:5rem 0;
}
.hero h1 small{
    color:#fff;
    font-size:2.8rem;
    display:block;
    font-weight:300;
    color:#009444;
}
.hero h1 span{
    color:#fff;
    font-size:2.4rem;
    line-height:2rem;
    border-top:1px solid #009444;
    padding-top:2rem;
    display:block;
    text-transform:none;
    color:#AAA;
    font-weight:300;
}

.hero .logo img.ui-show-me,
.hero h1.ui-show-me,
.hero h1 small.ui-show-me,
.hero h1 span.ui-show-me{
    opacity:0;
    transition:all 0.6s linear;
}
.hero .logo img.ui-show-me.ui-show-me-visible,
.hero h1.ui-show-me.ui-show-me-visible,
.hero h1 small.ui-show-me.ui-show-me-visible,
.hero h1 span.ui-show-me.ui-show-me-visible{
    opacity:1;
}
.hero .logo img.ui-show-me{transition-delay:0.2s;}
.hero h1.ui-show-me{transition-delay:0.3s;}
.hero h1 small.ui-show-me{transition-delay:0.6s;}
.hero h1 span.ui-show-me{transition-delay:0.9s;}

@media screen and (min-width: 35.5rem) {
.hero{
    padding-top:60px;
    border:0;
}
.hero .logo{
    padding:10rem 0;
}
}


@media screen and (min-width: 48rem) {
.hero h1{
    font-size:5vw;
    line-height:4.4vw;
}
.hero h1 small{
    font-size:3vw;
    border-bottom:1px solid #009444;
    padding-bottom:1rem;
}
.hero h1 span{
    font-size:1.6vw;
    line-height:3vw;
    padding-top:1rem;
    margin-top:4px;
}
}


/*MObile*/
.mobile-intro {
    height:100%;
    background:#009444;
    padding-top:60px;
    padding-bottom:100px;
    position:relative;
}
.mobile-intro p{
    text-align:center;
    font-size:2.4rem;
    line-height:3rem;
    color:#fff;
    font-weight:300;
    padding:2rem 1rem;
    margin:0 2rem;
    text-transform:uppercase;
    border-bottom:1px solid #43c780;
}
.mobile-intro h2{
    text-align:center;
    font-size:2.1rem;
    color:#fff;
    font-weight:700;
    padding:2rem 2rem;
    text-transform:uppercase;
    font-weight:400;
    font-family: 'Open Sans Condensed', sans-serif;
}
.mobile-intro h2 b{
    font-size:5rem;
    line-height:6rem;
    font-weight:700;
    font-family: 'Open Sans', sans-serif;
    color:#fff;
}
.mobile-intro h2 b a{
    color:#fff;
}
.mobile-intro a{
    display:block;
    width:100%;
    background:#fff;
    color:#009444;
    text-align:center;
    position:absolute;
    bottom:0;
    left:0;
    padding:20px 20px 40px;
    font-size:2.1rem;
    line-height:3rem;
    font-weight:300;
    text-transform:uppercase;
}
.mobile-intro a:before{
    position:absolute;
    left:50%;
    margin-left:-20px;
    width:40px;
    height:40px;
    content:"";
    display:block;
    top:60px;
    background:url(/images/sprite-ui.svg) no-repeat;
    background-size:700px 700px;
    background-position:0 -200px;
}



 
/*Presentation*/

.presentation{
    display:block;
}

.presentation p strong{
    font-weight:700;
}


/*SERVICES*/


.services .cle{
    min-height:250px;
    background:url(/images/wrench.jpg) #fff right 600px no-repeat;
    background-size:contain;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    display:none;
    transition:all 0.6s ease-out;
}
.services .cle.ui-show-me.ui-show-me-visible{
    background-position:right 0px;
}

.services ul{
    overflow:hidden;
    clear:both;
    border-bottom:1px solid #ccc;
    background:#fff;
    display:table;
    width:100%;
}
.services ul li {
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align:left;
    font-size:2.4rem;
    line-height:3rem;
    font-weight:700;
    position:relative;
}
.services ul li span{
    display:table-cell;
    vertical-align: middle;
    padding-left:70px;
    height:60px;
}
.services ul li:before{
    width:56px;
    height:56px;
    content:"";
    display:block;
    border-radius:50%;
    border:2px solid #009444;
    position:absolute;
    top:50%;
    margin-top:-30px;
}
.services ul li:after{
    width:32px;
    height:32px;
    content:"";
    display:block;
    position:absolute;
    background-image:url(/images/sprite-ui.svg);
    background-position:1000px 1000px;
    background-size:280px 280px;
    top:50%;
    left:29px;
    margin-top:-16px;
}
.services ul li.coussin:after{background-position:0 0;}
.services ul li.pneus:after{background-position:-32px 0;}
.services ul li.direction:after{background-position:-64px 0;}
.services ul li.remorquage:after{background-position:-96px 0;}
.services ul li.electricite:after{background-position:-128px 0;}
.services ul li.airclim:after{background-position:-160px 0;}
.services ul li.freins:after{background-position:-192px 0;}
.services ul li.mecanique:after{background-position:-224px 0;}
.services ul li.huile:after{background-position:0 -32px;}
.services ul li.electronique:after{background-position:-32px -32px;}
.services ul li.injection:after{background-position:-64px -32px;}
.services ul li.suspension:after{background-position:-96px -32px;}


@media screen and (min-width: 48rem) {
    .services .cle{
        order:1;
        display:block;
    }
    .services .icones{
        order:2;
    }

}


@media screen and (min-width: 64rem) {
.services ul li {
    text-align:center;
}
.services ul li span{
    padding:0;
    display:block;
    text-align:center;
    height:auto;
}
    .services ul li:before{
        width:14rem;
        height:14rem;
        margin:0 auto 1rem;
        position:relative;
    }
    .services ul li:after{
        width:8rem;
        height:8rem;
        background-image:url(/images/sprite-ui.svg);
        background-size:700px 700px;
        top:7rem;
        left:50%;
        margin-left:-4rem;
        margin-top:2px;
    }
.services ul li.coussin:after{background-position:0 0;}
.services ul li.pneus:after{background-position:-80px 0;}
.services ul li.direction:after{background-position:-160px 0;}
.services ul li.remorquage:after{background-position:-240px 0;}
.services ul li.electricite:after{background-position:-320px 0;}
.services ul li.airclim:after{background-position:-400px 0;}
.services ul li.freins:after{background-position:-480px 0;}
.services ul li.mecanique:after{background-position:-560px 0;}
.services ul li.huile:after{background-position:0 -80px;}
.services ul li.electronique:after{background-position:-80px -80px;}
.services ul li.injection:after{background-position:-160px -80px;}
.services ul li.suspension:after{background-position:-240px -80px;}




.services .icones{
    order:2;
}

}


.services ul li.ui-show-me:before{
    border-color:#fff;
    transition:all 0.5s linear;
    transition-delay:0.3s;
}
.services ul li.ui-show-me.ui-show-me-visible:before{
    opacity:1;
    border-color:#009444;
}

.services ul li.ui-show-me:after,
.services ul li.ui-show-me span{
    opacity:0;
    transition:all 0.5s linear;
    transition-delay:0.3s;
}
.services ul li.ui-show-me.ui-show-me-visible:after,
.services ul li.ui-show-me.ui-show-me-visible span{
    opacity:1;
}


/*PNEUS*/

    .pneus.services ul li:before{
        width:90px;
        height:50px;
        margin:0;
        border:0;
        display:block;
        background-image:url(/images/sprite-pneu.jpg);
        border-radius:0;
        top:50%;
        left:50%;
        margin-top:-25px;
        margin-left:-45px;
        background-size:90px 500px;
        background-repeat:no-repeat;
    }
    .pneus.services ul li.toyo:before{background-position:0 0;}
    .pneus.services ul li.pirelli:before{background-position:0 -50px;}
    .pneus.services ul li.yokohama:before{background-position:0 -100px;}
    .pneus.services ul li.bridge:before{background-position:0 -150px;}
    .pneus.services ul li.hankook:before{background-position:0 -200px;}
    .pneus.services ul li.michelin:before{background-position:0 -250px;}
    .pneus.services ul li.goodyear:before{background-position:0 -450px;}
    .pneus.services ul li.semperit:before{background-position:0 -300px;}
    .pneus.services ul li.kumho:before{background-position:0 -350px;}
    .pneus.services ul li.gislaved:before{background-position:0 -400px;}

.pneus.services ul li:after{display:none;}

.pneus.services ul li span{
    overflow:hidden;
    text-indent:-1000px;
}
.pneus .image{
    display:none;
}
.pneus.services ul li.image:before {
    background:none;
}

@media screen and (min-width: 48rem) {
    .pneus .image {
        background:url(/images/pneu.jpg) center 400px no-repeat;
        background-size:cover;
        display:block;
        transition:all 0.6s ease-out;
    }
    .pneus .image.ui-show-me-visible {
        background-position:center top;
    }
}
@media screen and (min-width: 64rem) {
    .pneus.services ul li:before{
        margin:0 auto 1rem;
        width:180px;
        height:100px;
        left:0;
        top:0;
    }

    .pneus.services ul li:before{
        background-size:180px 1000px;
    }
    .pneus.services ul li.toyo:before{background-position:0 0;}
    .pneus.services ul li.pirelli:before{background-position:0 -100px;}
    .pneus.services ul li.yokohama:before{background-position:0 -200px;}
    .pneus.services ul li.bridge:before{background-position:0 -300px;}
    .pneus.services ul li.hankook:before{background-position:0 -400px;}
    .pneus.services ul li.michelin:before{background-position:0 -500px;}
    .pneus.services ul li.goodyear:before{background-position:0 -900px;}
    .pneus.services ul li.semperit:before{background-position:0 -600px;}
    .pneus.services ul li.kumho:before{background-position:0 -700px;}
    .pneus.services ul li.gislaved:before{background-position:0 -800px;}
.pneus.services ul li span{
    height:1px;
}

}


.pneus.services ul li.ui-show-me:before{
    opacity:0;
    transition:all 0.3s linear;
    transition-delay:0.3s;
}
.pneus.services ul li.ui-show-me.ui-show-me-visible:before{
    opacity:1;
}


/*CARTE*/
    .carte {
        width:100%;
        height:240px;
    }
.adresse-boite{
    background:#fff;
    overflow:hidden;
}
.adresse-bloc{
    background:#fff;
    overflow:hidden;
}
.adresse-bloc .adresse{
}

.adresse h3 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:bold;
    font-size:4rem;
    line-height:5rem;
    padding:0;
    margin:0 0 2rem 0;
    text-transform:uppercase;
}
.adresse p {
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.4rem;
    padding:0;
    margin:0 0 2rem 0;
}
.adresse strong {
    font-weight:bold;
}
.adresse small {
    font-size:1.4rem;
}

@media screen and (min-width: 35.5rem) {
    .carte {
        height:400px;
    }
}
@media screen and (min-width: 48rem) {
    .carte {
        height:600px;
    }
}
@media screen and (min-width: 80rem) {
    .carte {
        height:750px;
    }
}


.message {
    background:#2985c6;
    color:#FFF;
    font-size:24px;
    line-height:30px;
    padding:20px;
    font-family: 'Open Sans Condensed', sans-serif;
    border-bottom:3px solid #fff;
    text-align:center;
}
.message b {
    font-weight:700;
    display:block;
    margin-top:4px;
}

@media screen and (min-width: 64rem) {
.message {
    font-size:36px;
    line-height:48px;
    padding:40px;
}
}