body{overflow-x: hidden;}
a {color: #fff; text-decoration: none;}
.container{width:100%; max-width: 1240px; padding: 0 25px;}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    height: 140px;
    background: #000 url(../images/entete-site-motomax.jpg) no-repeat center center;
    background-size: cover;
    box-shadow: 0px 9px 21px -9px rgb(0 0 0 / 69%);
    position: relative;
    z-index: 10;
}

header .logo-motomax{display: flex; max-width: 340px;}
header .logo-motomax img{width: 100%; filter: drop-shadow(0 2px 15px rgba(255,255,255,0.5));}

.concessions-motomax{display:flex; flex-direction: column; align-items:center; gap: 40px; margin-bottom: 110px;}

.concessions-motomax > h2{
    text-align: center;
    font-weight: 800;
    font-size: 40px;
    margin-top: 80px;
    letter-spacing: 0.02em;
    color: #000;
}

.concessions-motomax__liste{display:flex; justify-content: space-between; align-items: stretch; gap:1px; width:100%; max-width: 1400px;}

.concessions-motomax__detail{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 25%;
    padding: 40px 30px;
}

.concessions-motomax__detail::before{
    background-color: rgba(0,0,0,0.6);
    content: "";
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.concessions-motomax__detail.motomax-metz{
    background: url(../images/img-accueil-motomax-metz.jpg) no-repeat center;
    background-size: cover;
}

.concessions-motomax__detail.motomax-thionville{
    background: url(../images/img-accueil-motomax-thionville.jpg) no-repeat center;
    background-size: cover;
}

.concessions-motomax__detail.motomax-thionville2{
    background: url(../images/img-accueil-motomax-thionville2.jpg) no-repeat center;
    background-size: cover;
}

.concessions-motomax__detail.maxxess-metz{
    background: url(../images/img-accueil-maxxess-metz.jpg) no-repeat center;
    background-size: cover;
}

.concessions-motomax__detail .concessions-motomax__adresse,
.concessions-motomax__detail .concessions-motomax__marques{position: relative; z-index: 2;}

.concessions-motomax__detail .concessions-motomax__adresse{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #FFF;
    font-weight: 300;
    text-align: center;
}

.concessions-motomax__detail .concessions-motomax__adresse svg{fill:#FFF;}

.concessions-motomax__adresse strong{font-size: 22px; font-weight: 500; line-height: 24px; text-align: center;}

.concessions-motomax__adresse .concessions-motomax__tel{
    display:flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
}

.concessions-motomax__adresse .concessions-motomax__tel:hover{text-decoration:none;}

.concessions-motomax__detail .concessions-motomax__marques{
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px 28px;
    width: 120px;
    border-radius: 70px;
}

.concessions-motomax__detail.motomax-thionville .concessions-motomax__marques,
.concessions-motomax__detail.maxxess-metz .concessions-motomax__marques{
    padding: 24px 12px;
    width: 170px;
    border-radius: 15px;
    gap: 25px;
}

.concessions-motomax__marques a{display: flex;}
.concessions-motomax__marques a img{width: 100%; max-height: 55px; object-fit: contain; transition: all 300ms ease;}
.concessions-motomax__marques a:hover img{transform: scale(1.15);}


.tel-footer{margin: 10px 0; display: inline-block;}
.titre-horaire{font-size: 18px; margin-bottom: 10px;}
.adresse-footer{margin: 10px 0;}
a:focus, a:hover{color: #fff;}

.nom-concess-footer{
    color: #c00;
    font-size: 18px;
}

.footer-max {
    background-color: #222;
    display: flex;
    align-items: stretch;
    height: 600px;
}

.footer-max #map{width:50%; height: 600px;}

.footer-max #map .leaflet-popup .leaflet-popup-content{font-size: 13px; font-weight: 600;}

.popup-footer{
    background: #222 url(../images/man-repairing-bike.jpg) no-repeat center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
    width: 50%;
    height: 100%;
}

.popup-footer::before{
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
}

.popup-footer .popup-footer__adresse{
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    width:100%;
    max-width:48%;
}

.popup-footer__adresse strong{
    background-color: #FFF;
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #000;
    padding: 4px 12px;
    font-size: 20px;
    color: #000;
    letter-spacing: 0.02em;
}

.popup-footer__adresse  span{display: block; padding-left: 12px;}

.popup-footer__adresse .concessions-motomax__tel{gap: 10px; font-size: 18px; font-weight: 700; margin: 5px 0; padding-left: 12px;}
.popup-footer__adresse .concessions-motomax__tel:hover{color:#FFF;}
.popup-footer__adresse .concessions-motomax__tel svg{fill:#FFF;}

.popup-footer__adresse .popup-footer__cta{display: flex; align-items:center; gap: 15px; font-size: 18px; font-weight: 500; padding-left: 12px;}
.popup-footer__cta .cta-contact{font-size: 16px; text-transform: uppercase;}

.popup-footer__adresse .popup-footer__marques{display: flex; align-items:center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-left: 12px;}
.popup-footer__adresse .popup-footer__marques a{border-right: 1px dotted #FFF; padding-right: 8px; line-height: 16px;}
.popup-footer__adresse .popup-footer__marques a:last-child{border-right: none; padding-right: 0;}

.footer-max{position: relative;}
.titre-occasion-accueil{margin: 11px 0 7px;}
.detail-occasion-accueil{height: 27px;}
.owl-dots{margin-top: 25px;}
.owl-nav{display: none;}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form{background: #fff;}
.navbar-right{
    background-color: #000;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}
.navbar-default .navbar-nav>li>a{color: #fff;}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover{color: red;}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover{
    color: red;
    background: black;
}
.les-logos {
    margin: 15px 0px 0px;
    float: right;
}
.les-logos ul{display: flex;}
.les-logos ul li{list-style: none;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
    color: red;
    background: black;
}
.navbar-nav>li>.dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: rgba(0,0,0,0.7);
    border-radius: 0;
}
.dropdown-menu>li>a{color: white;}

.dropdown-menu>li>a:hover{
    color: red;
    background: none;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {background: #fff;}

.navbar-default {
    background-color: white;
    border: none;
}
.titre-presentation {
    padding: 15px;
    font-size: 25px;
    background: #f2f2f2;
    color: black;
    font-family: 'Play', sans-serif;
    text-align: center;
    font-weight: bold;
}
.titre-accueil{
    font-family: 'Montserrat', sans-serif;;
    font-size: 25px;
    color: #000;
    font-weight: bold;
    margin-top: 50px;
}
.sous-titre-accueil{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sous-titre-accueil span{
    color: #C00000;
    font-family: 'Arial', sans-serif;
    font-size: 22px;
}
a.voir-tout-accueil{
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}
a.voir-tout-accueil:hover{color: black;}

.occasions-accueil {
    padding: 0 10px 30px;
    margin-bottom: 20px;
    border-top: 1px solid #838383;
    margin-top: 20px;
    padding-top: 30px;
}
.carousel-control.right{
    right: 2px;
    background: none;
}
.carousel-control.left{
    left: -46px;
    background: none;
}
.carousel-control{color: black;}
.carousel-control:focus,
.carousel-control:hover{color: black;}

.container-magasini{
    background: black;
    padding: 25px;
    color: #fff;
    font-family: 'Play', sans-serif;
}
.nom-magasini {
    font-weight: bold;
    font-size: 23px;
    text-align: center;
    padding: 11px 7px 7px;
}
.slogan-magasini{
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}
.titre-horaires{
    color: red;
    font-size: 16px;
}
.tel-magasini a{
    color: #fff;
    font-size: 20px;
    margin: 12px 0;
    display: inline-block;
}
.tel-magasini a:hover{
    color: red;
    text-decoration: none;
}
.button-magasini a {
    color: white;
    background: red;
    display: block;
    text-align: center;
    margin-bottom: 10px;
    padding: 5px;
}
.rs-magasini {
    display: flex;
    justify-content: center;
}
.rs-magasini a {
    color: white;
    display: block;
    margin: 0 15px;
}
.rs-magasini a:hover {
    color: white;
    display: block;
    margin: 0 15px;
}
.button-magasini a:hover{
    text-decoration: none;
    opacity: 0.7;
}
.rs-magasini a i{font-size: 27px;}

.rs-magasini{
    margin-top: 5px;
    margin-bottom: 45px;
}
.rs-magasini a:hover{opacity: 0.7;}

.logos-footer {
    display: flex;
    background: white;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.logos-footer img{margin: 0 20px;}

footer {
    border-top: 4px solid #c00;
    margin-top: 20px;
    padding-top: 0;
    padding-bottom: 0;
    color: #fff;
    background: white;
}
.mentions-footer{
    background: #20201d;
    text-align: right;
    padding: 15px 0;
}
.liens-footer {color: black;}
.liens-footer span{color: white;}

.navbar-brand{height: auto;}
.navbar-nav li ul li {background: none;}

@media (min-width: 768px){
    .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
        margin-right: -15px;
        margin-left: -15px;
    }
}

.navbar-default {background-color: #000;}
.navbar-brand h1 {
    color: white;
    font-family: 'Montserrat';
    font-size: 24px;
}
.titre-univers{
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: 'Montserrat', sans-serif;;
    font-size: 25px;
    color: #000;
    font-weight: bold;
}
.custom-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-between;
}

.les-logos li {
    margin-left: 5px;
    margin-right: 5px;

}
.logo-header h1{
    position: relative;
    margin: 0;
}
.logo-header h1:before{
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 10px;
    height: 4px;
    background-color: #c00;
    top: 11px;
    left: -15px;
}
.logo-header h1:after{
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 10px;
    height: 4px;
    background-color: #c00;
    top: 11px;
    right: -15px;
}
.btn-default{background: #c00;}
.navbar-default{
    margin-top: 0;
    border-radius: 0;
}
.univers{
    display: flex;
    width: 143px;
    margin: 0 10px;
    box-shadow: 10px 10px 21px -9px rgba(0,0,0,0.69);
    -webkit-box-shadow: 10px 10px 21px -9px rgba(0,0,0,0.69);
    -moz-box-shadow: 10px 10px 21px -9px rgba(0,0,0,0.69);
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.container-flex{
    display: flex;
    padding-bottom:50px;
    justify-content: center;
}
.contenu-presentation{
    padding: 25px;
    background-color: #efefef;
}

.contenu-presentation .row{display: flex; align-items: center;}
.contenu-presentation .row::before,
.contenu-presentation .row::after{display:none;}

.col-sm-6 i{
    margin-left: 0;
    margin-right: 8px;
    position: relative;
    top: -1px;
}

.main-footer{
    background-color: black;
    color: white;
    padding-top: 40px;
    padding-bottom: 40px;
}
.info-presentation{
    text-align: center;
    background-color: white;
}
.info-presentation .img-responsive{margin: 0 auto;}

.text-presentation{
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.info-lien{padding: 20px 0;}
.CLBlockcontent-footer .CLPrix{color: #C00000;}
.titre-footer-noir{
    font-size: 17px;
    font-weight: bold;
}
.bi-telephone-fill{margin-right: 10px;
}
.bi-envelope{margin-right: 10px;}
.lefty{text-align: left;}
.lefty span{font-size: 12px;}

footer a{display: flex; align-items: center; color: #fff;}
footer a:hover{color: #f55; text-decoration:none;}

.righty{
    font-size: 12px;
    text-align: right;
    color: #fff;
}

.horaire{text-align: right;}
.img-moto{width: 100%;}
.container-img-moto{height: 140px;}

.info-lien a{
    color: #000;
    display: inline-block;
    margin: 0 10px;
}
#IDVignettes a:hover .CLBlockcontent-header {background: #C00000;}
.univers{transition: all .3s cubic-bezier(.25,.46,.45,.94);}

.univers:hover{
    cursor: pointer;
    box-shadow: 2px 3px 5px 0px rgb(0 0 0);
    -webkit-box-shadow: 2px 3px 5px 0px rgb(0 0 0);
    -moz-box-shadow: 2px 3px 5px 0px rgb(0 0 0);
    transition: all .3s cubic-bezier(.25,.46,.45,.94);
}
.owl-carousel .owl-stage-outer {
    border-bottom: 4px solid #404040;
    box-shadow: 0px 9px 21px -9px rgb(0 0 0 / 69%);
    -webkit-box-shadow: 0px 9px 21px -9px rgb(0 0 0 / 69%);
    -moz-box-shadow: 0px 9px 21px -9px rgb(0 0 0 / 69%);
}
.info-presentation .owl-carousel .owl-stage-outer {
    border-bottom: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
.voir-detail-occasion{left: 78px; top: 87px;}


@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 40%, 0);
        transform: translate3d(0, 40%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 40%, 0);
        transform: translate3d(0, 40%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
    
.owl-item.active .txt-slideshow{
  animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.5s;
}

.txt-slideshow {
    font-family: 'Montserrat', sans-serif;;
    color: #fff;
    position: absolute;
    display: flex;
    width: 33%;
    top: 0;
    left: 150px;
    align-items: center;
    bottom: 0;
}
.txt-slideshow .titre{
    font-size: 70px;
    margin-left: -4px;
    text-shadow: 0 1px 2px #000;
}
.txt-slideshow .desc{
    font-size: 37px;
    line-height: 37px;
    margin-bottom: 20px;
    text-shadow: 0 1px 2px #000;
}
.txt-slideshow .btn{
    text-transform: uppercase;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;    
}
.article-texte{padding: 15px 0;}
.logo-header{margin-top: 5px;}
.prix-barree{
    color: #333;
    text-align: right;
    display: block;
    text-decoration: line-through;
    margin-top: 2px;
}
.main-footer{background: #000;}
.les-logos ul img{max-height: 70px;}


.owl-carousel .owl-item img.permis-a2-liste{width: auto; max-width: 28px;}

.owl-occasions .owl-stage-outer{border: none; box-shadow: none;}

.article-texte a{color: #c00;}
.article-texte a:hover{text-decoration: underline}

.article-texte .btn-primary {
    color: #fff;
    background-color: #C00000;
    border-color: #f00;
    border-radius: 0;
}
.article-texte .btn-primary:hover {
    color: #fff;
    background-color: #C00000;
    border-color: #f00;
    border-radius: 0;
    text-decoration: none;
}

@media (max-width: 1620px){
    .popup-footer .popup-footer__adresse{max-width: 46%;}
}

@media (max-width: 1400px){
    .footer-max #map{width: 44%;}
    .popup-footer{width: 56%;}
    .popup-footer__adresse strong{font-size: 18px;}
}


@media (max-width: 1100px){
    .footer-max{height: auto; align-items: center; flex-direction: column-reverse;}
    .footer-max .popup-footer{width: 100%; max-width: 800px;}
    body .footer-max #map{width: 100%; height: 400px;}
    .popup-footer .popup-footer__adresse{min-width: 270px;}
}

@media (max-width: 992px){
    .navbar-header{display: flex; justify-content: center;}
    
    .les-logos ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 0;
    }
    .custom-container {justify-content: center;}
    .container-flex{flex-wrap: wrap;}
    .univers{margin-bottom: 20px;}
    .txt-slideshow .titre{font-size: 28px;}
    
    .txt-slideshow .desc{
        font-size: 17px;
        line-height: 22px;
    }
    .txt-slideshow .btn{font-size: 16px;}
    .txt-slideshow{
        padding: 0 10px;
        position: static;
        width: 100%;
    }
    .les-btn-rs{margin-top: 40px;}
    .liens-footer .row::before,
    .liens-footer .row::after{display:none;}
    .liens-footer .row{
        margin: 10px 0 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .liens-footer .lefty,
    .liens-footer .righty{width:100%; text-align: center;}
    .concessions-motomax__liste{flex-wrap: wrap; justify-content: center;}
    .concessions-motomax__detail{max-width: 45%;}
    .concessions-motomax{margin-bottom: 60px; gap: 20px;}
}

@media (max-width: 768px){
    header{height: 122px;}
    .txt-slideshow{background: #20201d;}
    .main-footer{text-align: center;}
    .horaire{margin-top: 20px; text-align: center;}
    .concessions-motomax > h2{font-size: 32px; margin-top: 50px; padding: 0 30px;}
    .contenu-presentation .row{flex-direction: column; gap: 20px; margin: 0;}
    .contenu-presentation .row .col-sm-6{width:100%; padding: 0;}
    .text-presentation{padding: 0;}
}

@media (max-width: 650px){
    body .footer-max .popup-footer{flex-direction: column; align-items: center; gap: 40px;}
    body .popup-footer .popup-footer__adresse{max-width: 400px;}
    .sous-titre-accueil{flex-wrap: wrap; gap: 15px;}
}

@media (max-width: 650px){
     .concessions-motomax__liste .concessions-motomax__detail{max-width: 100%; padding: 30px 25px;}
}