/* ==========================================================================
fonts
========================================================================== */
@font-face {
    font-family: 'VWHeadWeb';
    src: url('../fonts/VWHeadWeb-Regular.eot');
    src: local('☺'),
        url('../fonts/VWHeadWeb-Regular.woff') format('woff'),
        url('../fonts/VWHeadWeb-Regular.ttf') format('truetype'),
        url('../fonts/VWHeadWeb-Regular.svg') format('svg');
    font-weight: normal; 
    font-style: normal;
}
@font-face {
    font-family: 'VWHeadWeb';
    src: url('../fonts/VWHeadWeb-Bold.eot');
    src: local('☺'),
        url('../fonts/VWHeadWeb-Bold.woff') format('woff'),
        url('../fonts/VWHeadWeb-Bold.ttf') format('truetype'),
        url('../fonts/VWHeadWeb-Bold.svg') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'VWTextWeb';
    src: url('../fonts/VWTextWeb-Regular.eot');
    src: local('☺'), url('../fonts/VWTextWeb-Regular.woff') format('woff'),
        url('../fonts/VWTextWeb-Regular.ttf') format('truetype'),
        url('../fonts/VWTextWeb-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'VWTextWeb';
    src: url('../fonts/VWTextWeb-Bold.eot');
    src: local('☺'),
        url('../fonts/VWTextWeb-Bold.woff') format('woff'),
        url('../fonts/VWTextWeb-Bold.ttf') format('truetype'),
        url('../fonts/VWTextWeb-Bold.svg') format('svg');
    font-weight: 700;
    font-style: normal;
}
/* ==========================================================================
/// fonts
========================================================================== */

/* ==========================================================================
general
========================================================================== */
html, body {height: 100%;}

body {font-family: 'VWHeadWeb'; font-size: 14px; background-image: url(../img/background.jpg); background-size: cover; background-position: center;}
/* body {padding-top: 174px;} */
h1, .h1 {font-size: inherit; margin: 0 auto 40px; padding-top: 20px;}
h1 {width: 100px; height: 100px;}
h1 img {width: 100%;}

.title-main {font-family: 'VWHeadWeb'; font-size: 30px; font-weight: bold; line-height: 32px; padding: 0 20px; margin-bottom: 10px; text-align: center;}
.subtitle-main {font-family: 'VWHeadWeb'; font-size: 16px; margin-bottom: 40px; text-align: center;}
.title-block {font-family: 'VWHeadWeb'; font-size: 20px; font-weight: bold; margin-bottom: 20px;}
.title-small {font-family: 'VWHeadWeb'; font-size: 20px;}

/* ==========================================================================
home
========================================================================== */
.apdist{
    overflow: scroll;
    height: 400px;
    overflow-x: hidden;
}
.apdist::-webkit-scrollbar {
    width: 8px;
    color: #0099da;
}
.apdist::-webkit-scrollbar-thumb {
    border-radius: 0;
    color: #0099da;
    background-color: #0099da;
}
.mostrar-ubicacion{
    display: none;
}
.mostrar-ubicacion:nth-child(-n+3){
    display: flex;
}
.sec-left, .sec-right {height: 100%; min-height: 620px;}
.sec-left {background: #fff; /*padding: 40px;*/}
.sec-left.promos {position: relative; padding-bottom: 60px; overflow: hidden;}
.sec-right {background: #f4f4f4;}

.pad-top {padding-top: 80px;}

.promociones, .ubicacion {min-height: 620px;}

.promocion {padding: 20px 20px 0;}

.carousel-main {overflow-y: hidden;}
.carousel-main .owl-nav {position: absolute; top: calc(50% - 25px); width: 100%;}
.carousel-main .owl-nav [class*=owl-] {
    width: 40px;
    height: 50px;
    line-height: 150px;
    overflow: hidden;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.carousel-main .owl-nav .owl-prev {
    position: absolute;
    left: 10px;
}
.carousel-main .owl-nav .owl-next {
    position: absolute;
    right: 10px;
}
.carousel-main .owl-nav .owl-prev::before {
    position: absolute;
    content: "\f053";
    font-family: "FontAwesome";
    font-size: 50px;
    color: #0299D9;
    line-height: 50px;
}
.carousel-main .owl-nav .owl-next::before {
    position: absolute;
    content: "\f054";
    font-family: "FontAwesome";
    font-size: 50px;
    color: #0299D9;
    line-height: 50px;
}
.carousel-main .owl-dots .owl-dot.active span, .carousel-main .owl-dots .owl-dot:hover span {background: #0299D9 !important;}

.promocion .item {background: #fff; padding: 10px; margin-bottom: 20px; cursor: pointer;}
.promocion .item img {width: 100%;}
.promocion .item.active {background: #eae7e5; padding: 10px;}
.promocion .item:hover {background: #eae7e5; padding: 10px;}

.icons-promo {position: absolute; bottom: 0; display: flex; width: 100%;}
.icons-promo .banco {width: 130px;}
.icons-promo .banco img {width: 100%;}
.icons-promo .btns-slider {background: #999; padding: 8px 10px 0;}
.icons-promo .btns-slider span {display: inline-block; margin: 0 2px; cursor: pointer;}
.icons-promo .btns-slider svg {height: 20px;}
.icons-promo .btns-slider span:hover svg path,
.icons-promo .btns-slider span:hover svg circle,
.icons-promo .btns-slider span:hover svg polygon {fill: #fff;}
.icons-promo .btns-slider span.active svg path,
.icons-promo .btns-slider span.active svg circle,
.icons-promo .btns-slider span.active svg polygon {fill: #fff;}

.sucursales {height: 100%;}
.sucursales .buscar-concesionaria {padding: 0 20px;}
.sucursales .concesionarias h2 {padding: 0 20px;}

.buscar-concesionaria .icon-dir {
    background-image: url(../img/svg/vw-ubicacion.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: calc(100% - 5px) center;
    padding-right: 30px;
}

.concesionarias {position: relative; height: 100%;}
.concesionarias .item {align-items: center; padding: 10px 0;}
.concesionarias .item .icon {width: 40px; height: 40px; margin: 0 20px;}
.concesionarias .item .icon img {width: 100%;}
.concesionarias .item .sucursal {position: relative; width: calc(100% - 80px); padding-right: 70px;}
.concesionarias .item .sucursal::before {
    position: absolute;
    content: "\f054";
    top: 50%;
    right: 30px;
    font-family: "fontawesome";
    color: #0299D9;
}
.concesionarias .item .sucursal article {font-size: 16px; color: #4d4d4d; font-weight: bold; line-height: 18px;}
.concesionarias .item .sucursal p {font-size: 12px; color: #999; line-height: 14px; margin: 0;}
.concesionarias .item .sucursal p span {color: #0299D9;}
.concesionarias .item:hover {background: #eae7e5; cursor: pointer;}

.sec-left.mapa {padding: 0;}

.mapa {height: 100%; min-height: 450px;}

.direccion {padding: 0 0 60px; height: 100%; position: relative;}
.direccion article, .direccion p, .direccion ul {padding-left: 20px; padding-right: 20px;}
.direccion article {font-size: 16px; color: #4d4d4d; font-weight: bold; line-height: 18px;}
.direccion p {font-size: 12px; color: #999; line-height: 14px; margin-bottom: 20px;}
.direccion p span {color: #0299D9;}
.direccion ul {list-style: none; margin: 0;}
.direccion ul li {display: flex; align-items: center; margin-bottom: 20px;}
.direccion ul li span {display: block;}
.direccion ul li span img {width: 100%;}
.direccion ul li span:first-child {width: 15px; margin-right: 10px;}
.direccion ul li span:last-child {width:100% }
.direccion ul li a {text-decoration: none; color: black}





/* ==========================================================================
colors
========================================================================== */
.blue {color: #0299D9;}
.grey {color: #b3b3b3;}
.grey-dark {color: #1A1A1A;}
.grey-light {color: #F7F7F7;}
.white {color: #FFFFFF;}
.black {color: #000000;}

/* backgrounds */
.bg-blue {background: #0299D9;}
.bg-grey-dark {background: #1A1A1A;}
.bg-grey-light {background: #F7F7F7;}
.bg-white {background: #FFFFFF;}
.bg-black {background: #000000;}

/* ==========================================================================
buttons
========================================================================== */
.btn {display:block; width:200px; padding: 15px 30px; margin: 40px auto 100px; font-size: 11px; text-transform: uppercase; border-radius: 0px; text-align: center;}

.btn-blue {background: #0299D9; color: #fff; text-decoration: none;}
.btn-blue:hover {background: #000; color: #fff;}
.btn-grey-dark {background: #1A1A1A;}
.btn-grey-light {background: #F7F7F7;}
.btn-white {background: #FFFFFF;}
.btn-black {background: #000000;}

.btn-back {position:absolute; bottom: 0; display:block; width:100%; padding: 10px 30px; margin: 0; font-size: 12px; border-top: #d7d7d7 solid 1px; text-align: center;}
.btn-back span {color: #0299D9; margin-right: 10px;}




/* ==========================================================================
media quieries
========================================================================== */
/* .slider-tab {display: none;}
.slider-mob {display: none;} */

@media (min-width: 1200px) {
    .container {
        max-width: 1340px;
    }
}

@media (max-width: 1024px) {

}

@media (max-width: 800px) {

}

@media (max-width: 768px) {
   .sec-left, .sec-right {min-height: auto;}
}

@media (max-width: 767px) {
    
}

@media (max-width: 600px) {
    
}

@media (max-width: 576px) {
    
}