/* RESET Fonts */
@font-face {
    font-family: "AvantGarde";
    src: url("../fonts/gabriel/AvantGarde-Book.eot");
    src: url("../fonts/gabriel/AvantGarde-Book.eot?#iefix") format("embedded-opentype"),
    url("../fonts/gabriel/AvantGardeITCbyBT-Book.otf") format("opentype"),
    url("../fonts/gabriel/AvantGardeITCbyBT-Book.svg") format("svg"),
    url("../fonts/gabriel/AvantGardeITCbyBT-Book.ttf") format("truetype"),
    url("../fonts/gabriel/AvantGardeITCbyBT-Book.woff") format("woff"),
    url("../fonts/gabriel/AvantGarde-Book.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "AvantGarde Demi";
    src:
    url("../fonts/gabriel/AvantGarde-Demi.ttf") format("truetype"),
    url("../fonts/gabriel/AvantGarde-Demi.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "AvantGarde Bold";
    src:
    url("../fonts/gabriel/AvantGarde-Bold.ttf") format("truetype"),
    url("../fonts/gabriel/AvantGarde-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}


:root {
    /*  color variables */
    --color-main: #D9AA67;
    /* --color-main-secondary: #04243F; */
    --color-main-secondary: #222;
    --color-active: #D9AA67;
    --color-text: #000000;
    --color-text-lt: #666666;
    --color-border-dk: #000000;
    --color-border-lt: #f2f2f2;
    --color-bg-lt: #f2f2f2;
    --color-bg-dk: #222222;
    --color-bg-btn:#000000;
    /* --color-bg-lt:#e4dcd3; */
}

body {
    font-size: 14px;
    line-height: 1.4;
    font-family: "AvantGarde", Helvetica,Arial, sans-serif;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:var(--color-bg-dk);
    letter-spacing: 0.5px;
}
body:not(.home) #wrapper{
    margin-top:100px;
    background:#fff;
  }
 
body.nav_fixed:not(.home) #wrapper{
    margin-top:100px;
    background:#fff;
}
body.home.nav_fixed #wrapper{
    margin-top:0;
} 
footer {
    padding: 20px 0 0;
    background: #000;
    color:#fff;
    max-width: 2560px;
    margin: 0 auto;
}
.address a, footer h3, .footer-legal {
    color:#fff;
}
.footerRight{
    text-align: right;
}
.footerRight div{
    display:inline-block;
    text-align:left;
}
#footerBottom{
    background: var(--color-bg-dk);
    border-top:var(--color-text-lt);
    padding: 20px 0 20px 0;
    border-top: 1px solid var(--color-text-lt);
}
.model_block h2 .makeTitle {
    font-family: "AvantGarde", Helvetica,Arial, sans-serif;
}

h1,
h2,
h3,
h4 {
    font-family: "AvantGarde Demi";
    color:#000;
    letter-spacing: 0.5px;
}
h2.ttl-
p {
    font-size: 16px;
    color:var(--color-text-lt);
}

#wrapper {
    background: #222222;
    margin:0 auto;
}
#header_content{
    width:100%;
    height:100px;
    background-color: rgba(0,0,0,0.5);
    overflow:visible !important;
    position:fixed;
    z-index: 99;
    top:0;
}
body.nav_fixed #header_content {
    height: 100px !important;
    background-color: rgba(0,0,0,0.8);
}
@media (min-width:992px) {
body.vdp #header_content, body.vdp.nav_fixed #header_content {
        height: 130px !important;
    }
}
body.nav_fixed .nav-menu {
    overflow-y:visible !important;
    position:relative !important;
}
#header_main{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height:97px;
    padding-top: 57px;
    box-shadow:none;
    -webkit-box-shadow:none;
    background-color: transparent !important;
    border-color: transparent !important;
    border:0 !important;
    margin-bottom: 0;
}

.navbar-default  {
    background-color: transparent !important;
    border-color: transparent !important;
    margin-bottom: 0;
    height: 40px;
}
.logo img {
    height: 80px;
    margin-top:35px;
    float:right;
}
.nav-menu{
    display:block;
    border-bottom: #D9AA67 solid 3px !important;
    background-color: transparent !important;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: none;
}
.header-top{
    display:flex;
    align-items:center;
    justify-content: space-between;
    margin-right:30px;
    position:relative;
}
.header-top li {
    margin-right: 10px;
    height: 40px;
    min-width: 40px;
    line-height:40px;
    text-align: center;
}
.header-top li a{
    line-height:40px;
    display: block;
}
.header-top li i {
    font-size: 20px;
    line-height: 40px;
    margin-right:0;
}
.header-top li.header_search{
    background: #D9AA67;
}
#headSearchForm{
    position: absolute;
    top: 43px;
    right: 0;
    background:rgba(0,0,0, 0.5);
    padding: 10px;
    width:100%;
    min-width:235px;
}
#headSearchForm.collapse.in {
    display: block !important;
}
/* carousel customization */
#carouselDef .item a{
    cursor:default;
}
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
  }
  
  .carousel-fade .carousel-inner .active {
    opacity: 1;
  }
  
  .carousel-fade .carousel-inner .active.left,
  .carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
  }
  
  .carousel-fade .carousel-inner .next.left,
  .carousel-fade .carousel-inner .prev.right {
    opacity: 1;
  }
  
  .carousel-fade .carousel-control {
    z-index: 2;
  }
  

  @media all and (transform-3d), (-webkit-transform-3d) {
      .carousel-fade .carousel-inner > .item.next,
      .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      .carousel-fade .carousel-inner > .item.prev,
      .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      .carousel-fade .carousel-inner > .item.next.left,
      .carousel-fade .carousel-inner > .item.prev.right,
      .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
  }
  
.carousel {
    background: transparent !important;
    max-width: 2560px !important;
    margin-bottom: 0 !important;
}
.carousel-inner {
    background: transparent !important;
}
.carousel-indicators, .carousel-caption {
    display:none;
}
.video-control {
    bottom: 15% !important;
    right: 40px !important;
    display:none;
}
.video-control-button {
    background-color:var(--color-main) !important;
    padding: 0 !important;
}
.fa-playpause {
    line-height: 40px;
    vertical-align: middle !important;
}
.videowrapper {
    padding-top: 56.25% !important;
}
.carousel-control {
    display: none !important;
}
/* end of Carousel customization */

.scrollAnimation{
 position:absolute;
 width:100px;
 height:100px;
 bottom:15%;
 left:15%;
 display: block;
 z-index:10;
 text-align: center;
}
.scrollAnimation i{
    display: block;
    font-size:100px;
    line-height:100px;
    color:#fff;
    text-shadow: var(--color-main) 1px 1px 10px;
	animation: bouncing 2s ease infinite;
    opacity:0.5;
}
.anchor{
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;  
}
@keyframes bouncing {
	0%, 100% {
      opacity:0.5;
	  transform: translateY(-25px);
	}
  
	50% {
      opacity:1;
	  transform: translateY(0);
	}
  }
/* customization of page title */
.titlePage {
    background: var(--color-main-secondary);
    padding:60px 15px 15px;
}
body.p-contact_us .titlePage, body.p-about_us .titlePage {
    padding:200px 15px 15px;
    position:relative;
    overflow: hidden;
}
body.p-contact_us .titlePage:before, body.p-about_us .titlePage:before {
    content:'';
    display:block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(5px);
    background-blend-mode:multiply;
}
body.p-contact_us .titlePage:before {
    background-image: url("/assets/img/location/bg_contact.jpg");
}
body.p-about_us .titlePage:before {
    background-image: url("/assets/img/location/bg_about.jpg");
}
body.listing_pre-owned #container-content, body.p-contact_us #container-content {
    padding-top:0;
}
#findVehicles{
    display:flex;
    align-items:middle;
    padding: 30px 0 15px 0;
    background:var(--color-bg-dk);
    border-top: var(--color-main) solid 1px;
}
form#quickSearchHome{
    float:left;
    display:flex;
    align-items:middle;
    justify-content: space-evenly;
    clear:unset;
    margin:0;
}

form#quickSearchHome .styled-select{    
    height:48px;
    border-radius: 5px;
    min-width: 300px;
    margin:0 15px 15px 0;
    overflow: hidden;
    background:none;
    border: 0;
    position:relative;
    background: #fff !important;
    border:var(--color-border-lt) solid 1px;
}
form#quickSearchHome .styled-select select {
    background: none !important;
    font-size: 16px;
    height: 48px;
    width: calc(100% - 10px);
    margin: 0;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    border:none;
}
form#quickSearchHome .submit {
    margin-bottom:15px;
}
#findVehicles .container{
    text-align:center;
    display:flex;
    align-items: center;
    justify-content: space-evenly;
}
#findVehicles h2{
    color:#fff;
    display:inline-block;
    margin:0 15px 15px 15px;
    font-size:24px;
}

.featured-cars{
    background:#fff;
    padding:50px 0;

}
.featured-cars h2{
    text-align:center;

}
.external-links a {
    color: #fff;
}
.hours_main_location li{
    display:block;
    width:100%;
}
.hours_main_location label{
    display:inline-block;
    width:150px;
    text-align: left;;
}
@media only screen and (min-width: 1900px){
.container {
    width: 1600px;
}
}
.content-description a,
.content-description a:hover,
.content-description a:visited,
.searchFormHeader li em,
.text-red1 {
    color: var(--color-main);
}

.form-demande .nav-details-cars li.active a,
.form-demande .nav-details-cars li a:hover,
.form-demande .nav-details-cars li a:focus,
.form-demande ul li.button .btnSubmit,
#details_container .nav-details-cars li.active a,
#details_container .nav-details-cars li a:hover,
.st-inline-share-buttons .st-btn[data-network="sharethis"],
.st-sticky-share-buttons .st-btn[data-network="sharethis"],
.st-inline-share-buttons .button,
.button.readMore {
    background-color: var(--color-bg-btn);
}

a.button,
#myModalOccasion .container-button-popup .button.cta,
#myModalOccasion .container-button-popup .button:hover.cta,
.form-demande ul li.button {
    border-radius: 0px;
}
p a.button{
    margin:15px 0;
}
a.button:hover,
.button.cta:hover,
.button:hover.cta,
.form-demande ul li.button {
    background: var(--color-bg-dk);
}
.btn, .btn-primary, .btnSubmit {
    min-height:48px;
    display: inline-block;
    padding: 10px 15px;
    font-size: 18px;
    border-radius: 5px;
    background: #000;
    color: #fff;
    border: #000 solid 1px;
    font-family: "AvantGarde Demi";
}

.btn-primary, .btnSubmit {
    background: var(--color-main);
    border-color: var(--color-main);
    color: #000;
}

.btn-primary:hover {
    background: rgba(0, 0 , 0, 0.8);
    color: #fff;
    border: var(--color-main) solid 1px;
}
.btnSubmit:after {
    content: "\f1d8";
    font-family: "FontAwesome";
    padding-left: 10px;
}
.form-demande .nav-details-cars li.active::after {
    border-top: 10px solid var(--color-main) !important;
}

.nav-menu {
    border-bottom: none;
}

.burger .burger-menu,
.burger .burger-menu:before,
.burger .burger-menu:after {
    background: #fff;
}

a.button:hover,
.button.cta:hover,
.button:hover.cta,
.form-demande ul li.button {
    background: #000;
}

.header-right .language {
    margin: 8px 0 0 0;
}

.content-description h1 {
    font-size: 26px;
}

.content-description h3 {
    font-size: 18px;
}

.content-description p {
    font-size: 16px;
    line-height: 1.3;
}
.menulist li a {
   padding: 0 20px;
}
.menulist>li>a {
    line-height:40px;
    font-family: "AvantGarde";
    letter-spacing: 1px;
    color:#fff;
    font-size:16px;
    border-bottom: none; 
    font-weight:normal; 
    text-transform: uppercase;
}
.menulist>li.active>a,
.menulist>li>a:hover {
    color: #fff !important;
    background: var(--color-main) !important;
}

.menulist>li>a.electric, .menulist>li>a.electric:hover{
    color: #4fc14a !important;
}
.menulist>li>a.electric img{
    width:20px;
    height:20px;
    margin-right:2px;
}
.header-top a {
    color: #fff;
}

#footer_links li a, #footerBottom a  {
    color:#fff;
}

#container-contact .content-details-page p {
    color: var(--color-text);
    font-family:"AvantGarde";
    font-size: 15px;
    line-height:1.4;
}

.menulist li.active a.link-submodel {
    color: var(--color-text);
}
#home-about{
    background: var(--color-main-secondary);
    padding: 50px 0;
    margin:0 !important;
}
#home-about .row{
    display:flex;
    align-items:center;
}
#home-about .content-description, #home-about .content-description h2{
    color:#fff;
}
#home-about .content-description h2{
    color:#fff;
    font-family:"AvantGarde Demi";
}

.watermark::before {
    content: "";
    opacity: 0.1;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 50px;
    background-image:url('/assets/img/location/location_gabriel_st-laurent_logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size:contain;
}
.stc::before {
    background-image: url('/assets/img/location/location_gabriel_sainte_catherine_logo.png')
}
.est::before {
    background-image: url('/assets/img/location/automobile_gabriel_est_logo.png')
}
footer {
    padding-top: 50px;
}
@media only screen and (min-width: 1199px) and (max-width: 1599px){
    form#quickSearchHome .styled-select {
        min-width: 240px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
    #findVehicles .container {
        display: block;
    }
    form#quickSearchHome {
        float: none;
    }
}
@media only screen and (max-width: 991px) {
    li.favLink .nrFav {
        top: 10px;
    }
    body.nav_fixed:not(.home) #wrapper {
        margin-top: 40px;
    }
    .carousel.home .carousel-caption {
        height: 0 !important;
        padding-top: 0 !important;
    }
    .nav-menu {
        height:43px;
        position:relative;
    }
    .header-top{
        position:unset;
    }
    .searchForm {
        margin-top: 0 !important;
    }
    .menulist {
        margin-top: 30px;
    }
    header .container-block-top .header-right {
        visibility: hidden;
    }
    body.nav_fixed #header_content {
        height:43px !important;
    }
    #header_content.fixed_top, body.nav_fixed #header_content.fixed_top{
        height:100% !important;
        background:rgba(0,0,0,0.9);
    }
    #header_content.fixed_top .nav-menu{
        height:100% !important;
        border-bottom:none !important;
    }
    #header_content.fixed_top .logo{
        display:none;
    }

    .logo{
        padding:0 !important;
    }
    body.nav_fixed .logo {
       display:none !important;
    }
    .logo img {
        height: 40px;
        margin-top: 15px;
        margin-bottom:5px;
        float: none;
    }
    .language {
        margin-right: 15px;
        line-height: 40px !important;
    }
    #header_main {
        padding-top: 0;
        height:40px;

    }
    .nav_fixed #header_main {
        display:block;
    }
    .fixed_top #header_main {
        border-bottom: var(--color-main) solid 1px !important;
        margin-top:15px;
    }
    /* .nav-menu {
        height: 40px;
        margin-top:5px;
        
    } */
    .header-top {
        margin-right: 0;
    }
    .header-top li i {
        color: #fff;
    }
    .navbar-toggle {
        width: 40px;
        height: 40px;
    }
    .linkTitle {
        font-size: 12px !important;
    }
    .menulist>li>a {
        line-height: 30px;
    }
    .menulist li a {
        font-size: 14px;
    }
    #findVehicles .container, form#quickSearchHome ,form#quickSearchHome .styled-select {
        display: block;
        width:100%;
    }
    form#quickSearchHome {
        padding:0 20px;
    }
    form#quickSearchHome .styled-select {
        margin:0 0 15px 0;
    }
    form#quickSearchHome .submit {
        margin:0 auto;
        display: block;
    }
    #home-about .watermark{
        margin-bottom:30px;
    }
    #home-about .row{
        display:block;
    }
    .titlePage {
        background: var(--color-main-secondary);
        padding:30px 15px 15px !important;
    }
    .scrollAnimation {
        bottom: 15%;
        left: 5%;
    }
    .anchor{
        top: -40px;
    }
}

#header_content .menulist>li .content-links>li:hover>a {
    background: var(--color-main) !important;
}


@media (max-width: 1199px) and (min-width: 992px){

.navbar-form {
    padding-left: 0;
}
}

.car_item, .car_item_list {
    background:var(--color-bg-dk);
    color: #fff;
}
#car_item_tab .item-tab-right span.link-details-box {
    background: var(--color-main);
    color: #000;
}
.item-tab-right .tooltipDetailsList, .item-tab-right .tooltipDetailsList li label, .item-tab-right .tooltipDetailsList li p {
    color: #000 !important;
}
#car_item_pic {
    padding: 5px 5px;
}
#car_item_details, .car_item_details {
    padding: 0;
}
.fa-stack {
    height: 40px !important;
    line-height: 40px !important;
}
.nrFav {
    color: #000;
}
#car_item_tab .item-tab-right span, span.fav-box{
    border:var(--color-main) solid 2px;
    width: 28px;
    height: 28px;
}
span.fav-box.fav {
    border-color: var(--color-main) !important;
}

.searchHome{
display:flex;
align-items:center;
justify-content: space-between;
}
.pageSection{
    padding:50px 0;
}
.chinese-team{
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.team-chinese h4{
    font-size:20px;
}
.job-title{
    font-size:80%;
}
.chineseTeam div:first-child{
    margin-right:30px;
}
.chineseTeam p img{
    width:100%;
    max-width:400px;
}
.bg-lt{
    background:var(--color-bg-lt);
}

/* hide duplicate title */
body.home .group-cars-similars h2{display:none;}

.container-slide-cars{
    background: var(--color-bg-lt);
    padding-top: 20px;
    padding-bottom: 20px;
}
.soldTab {
    color: #000;
}
#car_dealer{
    color: #000;
}
#BottomBar a, #BottomBar .closeBottomBar{
    color: #000;
}
.car-title a{
    color:#fff;
}