/*************************************************************************
 _____   _____   _   __   _   _____        _          __  _____   _____  
|  _  \ /  _  \ | | |  \ | | |_   _|      | |        / / | ____| |  _  \ 
| |_| | | | | | | | |   \| |   | |        | |  __   / /  | |__   | |_| | 
|  ___/ | | | | | | | |\   |   | |        | | /  | / /   |  __|  |  _  { 
| |     | |_| | | | | | \  |   | |        | |/   |/ /    | |___  | |_| | 
|_|     \_____/ |_| |_|  \_|   |_|        |___/|___/     |_____| |_____/ 

**************************************************************************

    @ Copyright © 2019 POINT WEB
    @ Catégorie : Structure site
    @ Site : 
    @ Auteur : SERCO POINT WEB / www.point-web.fr

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

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

    #explicitsubmit, #explicitsubmit:focus{border:none;background:transparent;color:#FFF;margin-left:0.5em;outline:none;}
    input#impliedsubmit{background-color:#FFF;color:#3e4035;border:none;border-radius:100px;margin:0 0 0 1em;padding:0 0.5em;font-size:10px;}
    *, *:after, *:before{-webkit-tap-highlight-color:transparent;list-style-position:inside;list-style-type:none;color:inherit;box-sizing:border-box;margin:0;padding:0;outline:none;position:relative;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
    *:after,*:before{display:inline-block;z-index:1;}
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
    form,fieldset,input,textarea,p,blockquote,th,td,p,figure,figcaption,button,var,abbr{font-family: 'Mada', sans-serif;font-style:normal;border:0;font-size:inherit;color:inherit;background:transparent;text-decoration:none;}
    section,article,header,footer,nav,aside{display:block;}
    table,td,blockquote,code,pre,textarea,input,video{max-width:100%;}
    p,dd,ul{word-wrap:break-word;-webkit-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;}
    input,textarea,button{resize:none;-webkit-appearance:none;font-family:inherit;}
    img{border:none;max-width:100%;height:auto;}
    a,button{border:0;cursor:pointer;color:inherit;text-decoration:none;transition:.25s;}
    a,a:hover,a:active,a:focus,button,button:hover,button:focus,button:active{text-decoration:none;outline:none;}
    .clear{clear:both;background:none;outline:none;border:none;height:1px;margin:0;}
    .swiper-slide{display:flex;align-items:center;overflow:hidden;flex:1 0 auto;height:100%;}
    .swiper-wrapper{display:flex;flex-wrap:nowrap;height:100%;}
    [data-link]{cursor:pointer;}
    [data-bg]{background-size:cover;background-position:center center;}
    [data-mail]{cursor:pointer;display:inline!important;}
    [data-zoom]{cursor:zoom-in!important;}
    [data-grid] > *{position:absolute;transition:transform .5s;transform:scale(0);}
    [data-grid] > *.show{position:absolute;transform:scale(1);}
    strong{font-weight:bold;}
    i.fa-at{font-size:90%!important;top:1px!important;margin:0!important;}
    hr{outline:none;border:none;}
    h2,h3,h4,h5,h6 {font-weight: 900; text-transform: uppercase; color: #d1001a; }
    h3{font-size: 25px; padding-bottom: 1em;}
    h4 a:hover {color:#333;}
    .separator{display:block;width:100%;height:1px;background:#d0d0d0;margin:10px auto;}
    .important{font-weight:bold;color: #d1001a;font-size:1em;margin-bottom:1em;}
    .paragraphe {font-size: 14px; color:#6f6f6f; line-height: 1.8;}
    .paragraphe p + p {margin-top: 10px;}
    /* autocomplete styles in Chrome */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus
        textarea:-webkit-autofill,
        textarea:-webkit-autofill:hover
        textarea:-webkit-autofill:focus,
        select:-webkit-autofill,
        select:-webkit-autofill:hover,
        select:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 0 #000 inset;transition:background-color 5000s ease-in-out 0s;background-color:inherit!important;}
            
    /* selection styling */
        *::-moz-selection{background: rgba(209, 0, 26, 0.5);color:#fff;}
        *::selection{background: rgba(209, 0, 26, 0.5);color:#fff;}

    /* selection placeholder */
        ::-webkit-input-placeholder{color:inherit;opacity:.5;}
        ::-moz-placeholder{color:inherit;opacity:.5;}
        ::-ms-input-placeholder{color:inherit;opacity:.5;}

    /* scroll fix */
        [data-scrollfix]{cursor:pointer;transition:.25s;background: #d1001a;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;text-align:center;position:fixed;bottom:25px;right:25px;opacity:0;visibility:hidden;}
        .fix [data-scrollfix]{opacity:1;visibility:visible;}
        [data-scrollfix].down{transform:rotate(180deg);}


    /* reset bootstrap */
        .btn-link{color: #cacaca;}
        .btn-link:hover{color: #d1001a;}

    /* error */
        .error-page{text-align:center;padding:calc(20px + 5%) 0;}
        .error-page img{width:300px;max-width:70%;}
        .error-page .error-code{letter-spacing:2px;margin-top:calc(25px + 2%);font-size:calc(18px + 20 * (100vw - 320px) / 1080);font-weight:bold;text-transform:uppercase;}
        .error-page p{font-size:calc(13px + 2.5 * (100vw - 320px) / 1080);margin:10px 0 calc(15px + 2%);}
    
    /* html body */
        html{width:100%;overflow-x:hidden;line-height:1;}
        body{width:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

    .btn-primary {color: #fff;background-color: #d1001a;border-color: #d1001a;border-radius: 0;padding: 1em;}
    .btn-primary:hover {color: #d1001a;background-color: transparent;border-color: #d1001a;}
    .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(209, 0, 26, 0.5);}
    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {color: #fff;background-color: #d1001a;border-color: #d1001a;}

    .btn-secondary {color: #fff;background-color: #262626;border-color: #262626;border-radius: 0;padding: 1em;}
    .btn-secondary:hover {color: #262626;background-color: transparent;border-color: #262626;}
    .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(209, 0, 26, 0.5);}
    .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {color: #fff;background-color: #d1001a;border-color: #d1001a;}

    .link {color: #6f6f6f;}
    .link:hover {color: #333;}
    .link i {color: #d1001a; margin-right: 10px;}

    .breadcrumb {background-color: transparent; padding: 0; font-weight: 300;letter-spacing: 2px; padding-bottom: 2;}
    .breadcrumb::before {  font-family: "Font Awesome 5 Pro", sans-serif;content: "\f015"; padding-right: .5em;}
    .breadcrumb-item + .breadcrumb-item::before {display: inline-block;padding-right: .5rem;padding-left: .5rem;color: #2f2b2b;content: "\f105";font-family: "Font Awesome 5 Pro", sans-serif;font-weight: 300;}
    .breadcrumb a{ color: #353535; }
    .breadcrumb-item a:focus{ color: #d1001a;}
    .breadcrumb-item a:active{ color: #d1001a;}
    .breadcrumb-item.active {color: #d1001a;}


    .sitemaPage .breadcrumb li{ list-style-type: none;color: #939393; }
    .sitemaPage li{  list-style-position: inside; line-height: 24px;color: #939393;}
    .sitemaPage li a,#sitemap li{ color: #d1001a;}
    .sitemaPage li:nth-child(odd) a {color: #262626;}
    .sitemaPage li:nth-child(odd){color: #d1001a;}
    .sitemaPage li a:hover{ text-decoration: underline;}
    
    @media screen and (min-width:0\0) {
        .d-flex {width: 100%;}
        #slider .container{left: auto!important; }
        .logo {width: 170px!important;}
        #header .top .groupe-img { max-width: 70%;  width: 50% !important; height: 80%!important;}
        #header .top .groupe-img img {width: 100%!important;}
        #header .top .groupe-img img {width: 100%!important;}
    }

/*----------------------------------------------------< APP >---------------------------------------------------*/
    
/************* header **************/
    
    #header{z-index:9999999;transition:transform .6s;width:100%;position:absolute;}
    .fix #header{position:fixed;}
    .down #header{transform:translateY(-100%);}
    #header .top{background:#fff;color:#ccc;padding:10px 0;}
    #header .top .groupe-img {max-width: 50%; display: flex; width: 30%;}
    #header .top .groupe-img img {margin:1em; }
    #header .top .groupe-img img[alt="Logo Isuzu"]{width: 50%;}
    #header .top i {margin-right: 1em;}
    #header .top span {color: #d1001a; font-weight: 700; letter-spacing: 1px; }
    #header .top p,  #header .top {padding-top: 1em }
    #header .bottom{padding:20px 0; background: #262626;}
    #header .bottom .container{display:flex;align-items:center;justify-content:space-between;}
    h1 {color: transparent; }
    #logo {width: 100%;height: 100%; }
    
/************* data-nav **************/
    
    [data-nav]{transition:.3s;display:none;justify-content:center;width:60px;height:60px;border-radius:50%;align-items:center;cursor:pointer; margin: auto;}
    [data-nav]:hover{border-color: #d1001a;}
    .openNav [data-nav]{transform:rotate(90deg);}
    [data-nav] > div{background:#888;transition:.3s;margin:auto;align-self:center;width:25px;height:2px;}
    [data-nav]:hover > div,
    [data-nav]:hover > div:before{background: #d1001a;}
    [data-nav]:hover > div:after{background: #d1001a;}
    .openNav [data-nav] > div{width:0;}
    [data-nav] > div:before,
    [data-nav] > div:after{left:0;transition:.3s;content:'';width:25px;height:2px;background:#888;position:absolute;}
    [data-nav] > div:before{top:-7px;}
    [data-nav] > div:after{bottom:-7px;}
    .openNav [data-nav] > div:before{transform:rotate(45deg);left:-7px;top:-8px;transform-origin:top left;}
    .openNav [data-nav] > div:after{transform:rotate(-45deg);left:-7px;bottom:-9px;transform-origin:bottom left;}

    
/************* slider **************/
    
    #slider{width:100%;height:60vh;min-height:400px;background:#eee;}
    #slider > div{width:100%;height:100%;}
    #slider .swiper-slide{padding:0 calc(20px + 3%);overflow:hidden;align-items:center;justify-content:center;height:100%; }
    #slider .container{line-height:1;text-shadow:0 3px 5px rgba(0,0,0,.3);z-index:1000;color:#fff;}
    #slider .title{transition:opacity 1s, top 1s;opacity:0;top:-50px;font-size: 40px;font-weight:900; text-transform: uppercase;}
    #slider .end .title{opacity:1;top:0;}
    #slider p{margin: 1em 0 1em 0;transition:opacity 1s, left 1s;opacity:0;left:-80px;color:rgba(255,255,255,.7);font-size:16px;}
    #slider .end p{left:0;opacity:1;}
    #slider .btn{transition:all .25s, opacity 1s, bottom 1s;bottom:-40px;opacity:0;}
    #slider .end .btn{bottom:0;opacity:1;}
    #slider [data-bg]{transition:transform 1s;z-index:0;position:absolute;width:100%;height:100%;top:0;left:0;}
    #slider .end [data-bg]{transform:scale(1.05);}
    #slider .nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;}
    #slider .nav button{width:50px;height:50px;background: transparent;margin:2px; color:#fff; font-size: 40px; position: absolute;}
    #slider .nav button:hover{background:none;}
    #slider .nav button.next {right: 10%;}
    #slider .nav button.prev {left: 10%;}

    .slider-interne {position: relative;z-index: 10;width: 100%;clear: both;height: 260px; background-size: cover;background-position: center center; overflow: hidden; }
    .slider-interne::before {content: ''; background-color: rgba(38, 38, 38, 0.57);position:absolute; width: 100% ; height: 100%; top:0; left: 0;}
    .accroche-slider-interne { text-align: center;position: absolute;top: 8%;transform: translate(-50%,50%);left: 50%; color:#fff; display: inline-block; z-index: 9;}
    .accroche-slider-interne h2 {padding: 0.5em; color: #fff; font-size: 30px; text-transform: uppercase; letter-spacing: 2px ; font-weight: 700;}
    .accroche-slider-interne h2 span{ color: #d1001a !important;}
    .accroche-slider-interne .paragraphe { color: #efefef;font-size: 14px;white-space: pre-line; text-transform: uppercase; letter-spacing: 2px;padding: 0;}
    .slider-interne .container{ position: relative; height: 100%;}
    .slide-in-top {-webkit-animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
    @-webkit-keyframes slide-in-top { 0% {-webkit-transform: translateY(-1000px);transform: translateY(-1000px);opacity: 0;} 100% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} }
    @keyframes slide-in-top { 0% {-webkit-transform: translateY(-1000px);transform: translateY(-1000px);opacity: 0;} 100% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} }
    .slide-in-bottom {-webkit-animation: slide-in-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: slide-in-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
    @-webkit-keyframes slide-in-bottom { 0% {-webkit-transform: translateY(1000px);transform: translateY(1000px);opacity: 0;} 100% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} }
    @keyframes slide-in-bottom { 0% {-webkit-transform: translateY(1000px);transform: translateY(1000px);opacity: 0;} 100% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} }

/************* content **************/
    
    aside{background-color:#fff;padding:1em 0;}
    #content{width:100%;float:left;padding:3em 0;}
    #content h2{margin-bottom:1em;}
    h2 {color: #d1001a; font-size: 26px;}
    .indexPage .col-index .paragraphe {}
    .indexPage .col-index .paragraphe span {color: #d1001a; text-transform: uppercase; }
   .soustitre {color: #d1001a; list-style-type: disc; font-weight: 700; font-size: 16px; text-decoration: underline;padding: 1em 0 0.5em;}
    #services h3 {color: #d1001a; font-size: 25px; padding: 1em 0 1em 0;}
    #services .paragraphe{white-space: normal;}


    .depannagePage ul li {list-style-type: disc;}
    .depannagePage #bloc {background-color: #d1001a;}
    .entretienPage ul {display: inline-block}
    .entretienPage ul li {list-style-type: disc}
    .entretienPage [data-bg] {height: 350px; background-size: cover; width: 100%;}
    .entretienPage .entretien {background-color: #d1001a; color:#fff;}
    .entretienPage .entretien h3, .entretienPage .entretien h4 {color:#fff;}
    .entretienPage .entretien a:hover {color:#999;}
    .entretienPage .entretien .paragraphe {color: #fff;}
    .piecesPage ul li {list-style-type: disc;}
    .manPage  #list02  {height: 100%; width: 100%; justify-content: center;}
    .titre { text-transform: uppercase; font-size: 18px; white-space: pre-line; color:#fff; padding: 2em;}

    #list {height: 100%; width: 100%; justify-content: center;overflow: hidden}
    #list .nav {transition:.2s;opacity:1;z-index:1000;position:absolute;top:50%;transform:translateY(-50%);width:100%; font-size: 20px}
    #list .nav button{color:#fff;position:absolute;background: #262626;width:40px;height:40px;}
    #list .nav button.next{right:0;}
    .manPage [data-bg] {height: 250px; }
    .manPage .btn { margin-top: 2em; margin-bottom: 3em;}

     .bloc{margin: 2em 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: justify;-ms-flex-pack: justify; padding: .1em;}
    .listingCatalog h4 {padding-top: 1em; font-size: 18px; letter-spacing: 2px}
      #photo [data-bg]{height: 350px; background-size: cover}
    .listingCatalog .paragraphe {padding: 1em;  white-space: normal}
    .listingCatalog .btn-secondary {margin-bottom: 2em}
    .custom-select:focus {border-color: #d1001a;outline: 0;box-shadow: inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(209, 0, 26, 0.5);}
    .bg-card-img-top {padding: 0;width: 100%;text-align: center;background-color: #FFF;-webkit-transition: all ease 0.2s;-ms-transition: all ease 0.2s;-moz-transition: all ease 0.2s;transition: all ease 0.2s;position: relative;top: 0;margin: 2em;}
    .card:hover .bg-card-img-top, .bg-card-img-top:hover {transform: translateY(-5px);}
    .card .card-img-top {margin: 0 auto;-webkit-transition: all ease 0.3s;-ms-transition: all ease 0.3s;-moz-transition: all ease 0.3s;transition: all ease 0.3s;}
    .card-text {text-align: center;font-size: 13px;color: #848484;font-weight: 400;line-height: 20px;margin-bottom: 1em;}
     .styled-link {text-decoration: none;outline: none;color: #d1001a;transition: all 0.25s ease-in; }
    .styled-link:hover, .fournituresPage .styled-link:focus, .fournituresPage .styled-link:active {color: #262626;}
    .shadow-1 {box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15);}
    .blue-hover {transition: all 0.25s ease-in;border-bottom: 5px solid transparent; margin: 0.5em; padding: 0;}
    .blue-hover:hover {transform: translateY(-5px);border: none;border-bottom: 5px solid #d1001a;}
    .card-heading {padding: 1em 0;}
    .card-heading h4 {color: #6f6f6f; font-size: 20px; font-weight: 500;}
    .servicesPage h4 {text-align: center;font-size: 20px;}


/************* aside **************/
    
    .productListing{cursor:pointer;margin-bottom:1.5em;}
    .productListing:hover h3 a{color: #000000;}
    .productListing h3{overflow:hidden;height:55px;}
    .productListing h3 a{color: #d1001a;}
    .productListing img{border:#ccc solid 1px;display:block;margin:1em 0;}
    .productListing .paragraphe{overflow:hidden;height:96px;}
    #loading-div{text-align:center;}
    #loading-div > img{width:100px;}
    #no-results{display:none;}


/************* show **************/
    
    #productShow h3{margin-bottom:1.5em;}
    .owl-carousel-page img{border:#ccc solid 1px;width:100%;}


/************* pagination **************/
    
    .zui-pager{display:inline-block;}
    .zui-pager .pagination{list-style-type:none;margin:0;padding:0;display:inline-block;}
    .zui-pager .page-item{display:inline-block;margin:0;padding:0;height:40px;float:left;}
    .zui-pager .page-item .page-link{cursor:pointer;border-radius:0;margin:0;padding:0.5em 1em;border:0;font-weight:300;background-color:transparent;-webkit-box-shadow:inset 0 -2px 0 0 #bbb;color:#bbb;}
    .zui-pager .page-item .page-link:hover{-webkit-box-shadow:inset 0 -4px 0 0 #bbb;}
    .zui-pager .page-item.active span{-webkit-box-shadow:inset 0 -4px 0 0 #d1001a;box-shadow:inset 0 -4px 0 0 #d1001a;color: #d1001a;font-weight:600;}
    .zui-pager .page-item.active span:hover{-webkit-box-shadow:inset 0 -4px 0 0 #d1001a;box-shadow:inset 0 -4px 0 0 #d1001a;cursor:default;}
    .zui-pager .page-link[disabled]{-webkit-box-shadow:inset 0 -2px 0 0 #d1001a;box-shadow:inset 0 -2px 0 0 #d1001a;color: #d1001a;}
    .zui-pager .page-link[disabled]:hover{-webkit-box-shadow:inset 0 -2px 0 0 #d1001a;box-shadow:inset 0 -2px 0 0 #e6e6e6;cursor:default;}
    .zui-pager .i-chevron-left,
    .zui-pager .i-chevron-right{margin:15px;border-style:solid;border-color:#3a3a3a;width:6px;height:6px;display:block;cursor:pointer;}
    .zui-pager .i-chevron-left{border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
    .zui-pager .i-chevron-right{border-width:1px 1px 0 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}


/************* partners listing **************/
    
    .partnersListing{cursor:pointer;margin-bottom:1.5em;}
    .partnersListing h3{overflow:hidden;height:55px;}
    .partnersListing a.btn-link{color: #d1001a;display:inline-block;margin:1em 0;}
    .partnersListing:hover a{color: #d1001a;}
    .partnersListing img{border:#ccc solid 1px;display:block;margin:1em 0;}
    .partnersListing .paragraphe{overflow:hidden;height:60px;}


/************* news listing **************/
    
    .listingNews{margin-bottom:2em;cursor:pointer;}
    .listingNews:hover h3 a{color: #d1001a;}
    .listingNews img{border-left:#ccc solid 1px;border-right:#ccc solid 1px;border-bottom:#ccc solid 1px;}
    .listingNews h3{font-size:1.5em;overflow:hidden;height:25px;margin-bottom:0.5em;}
    .listingNews h3 a{color:#333;}
    .listingNews .paragraphe{color:#999;overflow:hidden;height:80px;}
    .listingNews div:first-child{padding-left:0;}


/************* news show **************/
    
    .newsShow .date{display:inline-block;padding:0.5em 1em;text-align:center;}
    .newsShow h3{margin:1em 0;}
    .colImg{padding-left:0;}
    .colInfos{padding-right:0;}


/************* footer**************/
    
    #footer{background:#191919;color:#fff;padding:2em 0;clear:both;}
    #footer a{color:#fff;}


/************* contact **************/
    
    .contactPage form{margin-top:1.5em;clear:both;width:100%;float:left;}
    .contactPage form input[type=submit]{margin-top:1em;}
    input[type="checkbox"]{-webkit-appearance:checkbox;}
    input[type="radio"]{-webkit-appearance:radio;}
    input[type="submit"],
    input[type="button"]{-webkit-appearance:button;}
    select{-webkit-appearance:textfield;}
    

/************* galerie **************/
    
    [data-swiper="galerie"]{overflow:hidden;padding:0;}
    [data-swiper="galerie"] .swiper-slide{height:100%;width:100%;}
    [data-swiper="galerie"] .nav{transition:.2s;opacity:0;z-index:1000;position:absolute;top:50%;transform:translateY(-50%);width:100%;}
    [data-swiper="galerie"]:hover .nav{opacity:1;}
    [data-swiper="galerie"] .nav button{color:#fff;position:absolute;background:#1f1d14;width:40px;height:40px;}
    [data-swiper="galerie"] .nav button:hover{background: #d1001a;color:#1f1d14;}
    [data-swiper="galerie"] .nav button.next{right:0;}

/************* gallery **************/

    [data-swiper="gallery"]{overflow:hidden;padding:0;}
    [data-swiper="gallery"] .swiper-slide{height:100%;width:100%;}
    [data-swiper="gallery"] .swiper-pagination-gallery {bottom: -20px;width: 100%;text-align: center; opacity: 1; }
    [data-swiper="gallery"] .swiper-pagination-bullet {margin: 1em 4px;}
    [data-swiper="gallery"] .swiper-pagination-gallery .swiper-pagination-clickable .swiper-pagination-bullet {cursor: pointer;}
    [data-swiper="gallery"] .swiper-pagination-gallery .swiper-pagination-bullet-active {opacity: 1;background: #d1001a !important;}
    [data-swiper="gallery"] .swiper-pagination-gallery .swiper-pagination-bullet {width: 8px;height: 8px;display: inline-block;border-radius: 100%;background: #cacaca;opacity: 1;}



/************* galerie product photo **************/

    #photo .box{box-shadow:0 3px 10px rgba(0,0,0,.02);background:#fff;border:1px solid #eee;border-radius:3px;}
    #photo > [data-swiper]{overflow:hidden;}
    #photo .swiper-slide{text-align:center;display:flex;align-items:center;justify-content:center;}
    #photo .swiper-slide > *{margin:auto;align-self:center;}
    #photo .thumbs{user-select:none;-moz-user-select:none;padding:10px 40px;margin-top:16px;}
    #photo .thumbs > div{overflow:hidden;}
    #photo .thumbs .swiper-wrapper{display:flex;}
    #photo .thumbs .swiper-slide{max-height:100px;cursor:pointer;padding:5px;width:16.66%;max-width:16.66%;flex-basis:16.66%;}
    #photo .thumbs .swiper-slide > div{border:1px solid #eee;transition:border-color .2s;display:flex;align-items:center;justify-content:center;}
    #photo .thumbs .swiper-slide img{max-height:100%;}
    #photo .thumbs .swiper-slide:hover > div{border-color:#d8d8d8;}
    #photo .thumbs .swiper-slide-thumb-active > div{border-color: #d1001a !important;}
    #photo .thumbs button{padding:0;background:#fafafa;color:#333;position:absolute;top:0;width:35px;height:100%;text-align:center;}
    #photo .thumbs button i{margin-left:0;}
    #photo .thumbs button:hover{color: #d1001a;}
    #photo .thumbs button.prev{left:0;border-right:1px solid #eee;}
    #photo .thumbs button.next{right:0;border-left:1px solid #eee;}


/*----------------------------------------------------< MEDIA QUERIES >---------------------------------------------------*/


/************* min 1200 **************/ @media screen and (min-width:1200px){

    #nav nav > ul{margin-bottom:0;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.1);text-transform:uppercase;font-size:15px;font-weight:700;letter-spacing:0;display:flex; padding: 1em; justify-content: center; }
    #nav nav > ul > li{padding:0 10px; color:#fff;}
    #nav nav > ul > li:first-child{display:none;}
    #nav nav > ul > li a:hover{color: #ffffff;}
    #nav nav > ul > li > a:before{transition:.3s;content:'';position:absolute;width:0;height:2px;bottom:-15px;background: #d1001a;left:50%;transform:translateX(-50%);}
    #nav nav > ul > li > a:hover:before{width:100%;}
    #nav nav > ul > li[data-sub] > a:after{transition:.2s;margin-left:8px;font-size:10px;top:-1px;content:'\f078';font-family:'Font Awesome 5 Pro';font-weight:300; justify-content: center;}
    #nav nav > ul > li[data-sub] > a.open:after{transform:rotate(180deg);top:0;}
    #nav nav > ul > li ul{display:block!important;transition:.4s;opacity:0;visibility:hidden;text-align:center;padding:0;font-size:14px;color:#fff;background:#1f1d14;position:absolute;min-width:160px;left:50%;transform:translateX(-50%);top:50px;}
    #nav nav > ul > li > a.open + ul{opacity:1;visibility:visible;top:30px;}
    #nav nav > ul > li ul li{padding:2px;display:block;}
    #nav nav > ul > li ul li > *:not(ul){text-transform:none;letter-spacing:0;padding:15px 10px;font-weight:400;display:block;}
    #nav nav > ul > li ul li ul{position:absolute;left:100%;top:0;}
    #nav nav > ul > li ul li ul.left{left:auto;right:100%;}
    #nav nav > ul > li ul li ul:hover,
    #nav nav > ul > li ul li *:hover + ul{opacity:1;visibility:visible;display:block;transform:none;}
    #nav [data-bg]{background-image:none}


}
/************* max 1199 **************/ @media screen and (max-width:1199px){

    [data-nav]{display:flex;}
    #nav{background-color: #262626;z-index:99999;transform:translateX(-100%);transition:box-shadow .6s, transform .6s;max-width:110%;width:110%;overflow:hidden;font-size:20px;color:#fff;position:fixed;top:0;left:0;height:100vh;}
    .openNav #nav{transform:translateX(0);box-shadow:0 0 2000px 300px rgba(209, 0, 26, 0.3), 0 0 500px 100px #d1001a; }
    #nav nav > ul{margin-bottom:0;margin-left:0;overflow-y:scroll;height:100vh;width:100%}
    #nav nav > ul li{transition:.6s;width:100%;padding:0;}
    #nav nav > ul > li:not(.show){opacity:0;top:-50px;}
    #nav nav > ul > li.show{top:0;opacity:1;}
    #nav nav > ul > li:first-child{cursor:pointer;padding:10px 15px;font-size:11px;opacity:.5;}
    #nav nav > ul > li:hover:first-child{opacity:1;}
    #nav nav > ul li a{padding:calc(22px + .6%) calc(20px + .6%) calc(20px + .6%);display:block;}
    #nav nav > ul li a:hover{background: transparent;color: #808080;}
    #nav nav > ul li[data-sub] > a:after{display:flex;align-items:center;justify-content:center;text-align:right;width:30%;position:absolute;height:100%;left:0;transition:.2s;font-size:16px;top:0;content:'\f078';font-family:'Font Awesome 5 Pro';font-weight:300;}
    #nav nav > ul li[data-sub] > a.open:after{content:'\f077';}
    #nav nav > ul li ul{display:none;}
    #nav nav > ul li ul li:last-child{border-bottom:0;}
    #nav nav > ul li ul li a{font-size:14px;padding:calc(18px + .6%) calc(20px + .6%) calc(16px + .6%); letter-spacing: 1px}
    #header .bottom .container {justify-content: end!important; -webkit-justify-content: end; right: 0!important; position: relative;}
    #header .bottom {padding: 0;}
}


/************* max 991 **************/ @media screen and (max-width:991px){

    #slider {height: 50vh;}
    .col-img {display: none;}
    h2 {font-size: 20px;}
    #services h3 {font-size: 20px;}
    .indexPage .col-index .paragraphe {-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}
    .indexPage, #services, #footer, .contactPage, .depannagePage, .servicesPage, .controlePage, .entretienPage , .flexiblePage, .rgpdPage, .cookiesPage, .legalPage, .manPage, .piecesPage, .listingCatalog ,.showCatalogPage {text-align: center;}
    #slider .nav{justify-content:center;width:100%;}
    #slider .nav button{width:40px;height:40px;display:inline-block;}
    #slider {height: 20vh;}
    .accroche-slider-interne h2 {padding: 0;font-size: 26px;}
    #nav nav > ul li[data-sub] > a::after {width: 130%;}
    .entretienPage .entretien {padding-bottom: 1em}
    #nav {text-align: center;  width: 100%;}


}

/************* max 767 **************/ @media screen and (max-width:767px){


    #nav nav > ul li[data-sub] > a::after {left: 50%; width: 50%;}
    #slider {min-height: 370px;}
    h2 {font-size: 18px;}
    #slider .nav button {font-size: 35px;}
    .accroche-slider-interne .paragraphe {letter-spacing: 1px;}

}

/************* max 571 **************/ @media screen and (max-width:571px){

    .col-infos-header{display: none;}
    #slider {min-height: 310px;}
    .slider-interne {height: 230px;}
    .accroche-slider-interne h2 {padding: 0;font-size: 23px;}
    #logo {left: 20%;transform: translateY(50%);}
}
/************* max 545 **************/ @media screen and (max-width:545px){

    #slider {min-height: 260px;}
    h2 {font-size: 16px;}
    #slider .nav button {font-size: 30px;}
    #logo {left: 20%;}


}

/************* max 545 **************/ @media screen and (max-width:495px){

    .slider-interne {height: 210px;}
    .accroche-slider-interne .paragraphe {font-size: 12px;}
}


/************* max 545 **************/ @media screen and (max-width:470px){

    .accroche-slider-interne h2 {padding: 0;font-size: 18px;}
    .accroche-slider-interne .paragraphe {letter-spacing: 0;}
}


/************* max 380 **************/ @media screen and (max-width:380px){

    #slider {min-height: 200px;}
    h2 {font-size: 14px;}
    #slider .nav button {font-size: 25px;}
    .accroche-slider-interne h2 {font-size: 16px;}
    #logo {left: 5%;}

}


/************* max 380 **************/ @media screen and (max-width:360px){

    .accroche-slider-interne .paragraphe {font-size: 11px;}
    .slider-interne {height: 200px;}

}



/************* max 380 **************/ @media screen and (max-width:320px){

    .accroche-slider-interne h2 {font-size: 14px;}
    #logo {left: 0%;}


}