/* SOCL STYLES. HOME 2019 */
body { background-color: #f9f9f9; font-size: 14px; color: #333; line-height: 130%;}
#main .container {
    width: 100% !important;
    max-width: 1280px;
}
.no-pad { padding: 0;}
.sector { width: 100%; height: auto; position: relative; display: block; overflow: hidden;}

.gesture { width: 30px; height: 46px; position: absolute; top: 26px; left: 78%; margin-left: -15px; opacity: 0;}
.ani-gesture {
    -webkit-animation: aniGesture 1s 2 ease-in-out;
    -moz-animation: aniGesture 1s 2 ease-in-out;
    -o-animation: aniGesture 1s 2 ease-in-out;
}
@-webkit-keyframes aniGesture {
  0% { -webkit-transform: translatex(-10px) translatey(0px); opacity:0; }
 20% { -webkit-transform: translatex(0px) translatey(0px); opacity:1; }
 80% { -webkit-transform: translatex(-200px) translatey(0px); opacity:1; }
100% { -webkit-transform: translatex(-200px) translatey(0px); opacity:0; }
}
@-moz-keyframes aniGesture {
  0% { -moz-transform: translatex(-10px) translatey(0px); opacity:0; }
 20% { -moz-transform: translatex(0px) translatey(0px); opacity:1; }
 80% { -moz-transform: translatex(-200px) translatey(0px); opacity:1; }
100% { -moz-transform: translatex(-200px) translatey(0px); opacity:0; }
}
@-o-keyframes aniGesture {
  0% { -o-transform: translatex(-10px) translatey(0px); opacity:0; }
 20% { -o-transform: translatex(0px) translatey(0px); opacity:1; }
 80% { -o-transform: translatex(-200px) translatey(0px); opacity:1; }
100% { -o-transform: translatex(-200px) translatey(0px); opacity:0; }
}

.mt10 { margin-top: 10px;}
.mt20 { margin-top: 20px;}
.mt30 { margin-top: 30px;}
.mt40 { margin-top: 40px;}
.mt50 { margin-top: 50px;}
.mt60 { margin-top: 60px;}
.mt70 { margin-top: 70px;}

.mb10 { margin-bottom: 10px;}
.mb20 { margin-bottom: 20px;}
.mb30 { margin-bottom: 30px;}
.mb40 { margin-bottom: 40px;}
.mb50 { margin-bottom: 50px;}
.mb60 { margin-bottom: 60px;}
.mb70 { margin-bottom: 70px;}

.pdd1 { padding: 0 1px;}
.pdd3 { padding: 0 3px;}
.pdd5 { padding: 0 5px;}
.pdd7 { padding: 0 7px;}
.pdd9 { padding: 0 9px;}
.pdd11 { padding: 0 11px;}
.pdd13 { padding: 0 13px;}

.home2019 {
    font-family: 'Lato', sans-serif;
}
.home2019 .img-link {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.home2019 .img-link {
    cursor: pointer;
    text-decoration: none;
}
.home2019 .img-link::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /*background-color: rgba(255,255,255,0.7);*/
    opacity: 0;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    transition: All 0.3s ease;
}
.home2019 .img-link:hover::before {
    opacity: 1;
}

.home2019 .sector h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #444;
    width: 100%;
    padding: 5px 0;
    margin: 0;
    font-size: 34px;
}
/*
.home2019 .sector h2:before {
    content: "+";
    display: inline-block;
    position: relative;
    margin-right: 5px;
    color: #444;
}
*/
.home2019 .sector h2:after {
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    margin-top: 5px;
    background: rgba(221,0,33,1);
    background: -moz-linear-gradient(left, rgba(221,0,33,1) 0%, rgba(0,113,206,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(221,0,33,1)), color-stop(100%, rgba(0,113,206,1)));
    background: -webkit-linear-gradient(left, rgba(221,0,33,1) 0%, rgba(0,113,206,1) 100%);
    background: -o-linear-gradient(left, rgba(221,0,33,1) 0%, rgba(0,113,206,1) 100%);
    background: -ms-linear-gradient(left, rgba(221,0,33,1) 0%, rgba(0,113,206,1) 100%);
    background: linear-gradient(to right, rgba(221,0,33,1) 0%, rgba(0,113,206,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd0021', endColorstr='#0071ce', GradientType=1 );
}

.mB-Small { margin-bottom: 0 !important;}


/* banner header */
.caja-header { border-bottom: solid 2px #666;}
.caja-header .bannerHeader { width: 100%; max-width: 1250px; height: 40px; margin: 0 auto;}


/* vitrina */
/* -- Mod Owl -- */
.owl-theme .owl-controls .owl-page span { background: rgba(134, 134, 134, 0.59)!important;}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background: #dd0021!important;
}
.owl-theme .owl-controls .owl-buttons div {
    width: 65px;
    height: 40px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: #333;
    filter: Alpha(Opacity=60);
    opacity: .6;
    text-align: center;
    text-indent: -5000px;
    position: relative;
    overflow: hidden;
}
#vtnHome { width: 100%; height: 450px;}

.owl-buttons {
    position: absolute!important;
    top: 50%!important;
    width: 100%!important;
    z-index: 20!important;
    left: 0!important;
    opacity: 0;
    height: 0;
}
div.owl-prev {
    float: left;
    margin-left: 0!important;
}
div.owl-prev::before {
    width: 12px;
    height: 20px;
    content: url(/static/Home-2019/svg/flecha-prev.svg);
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -3px;
    text-indent: 0;
}
div.owl-next {
    float: right;
    margin-right: 0!important;
}
div.owl-next::before {
    width: 12px;
    height: 20px;
    content: url(/static/Home-2019/svg/flecha-next.svg);
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: 50%;
    margin-right: -3px;
    text-indent: 0;
}
.owl-theme .owl-controls .owl-pagination {
    position: absolute;
    right: 50%;
    margin-right: -78px;
    bottom: -30px;
    z-index: 12;
}
.vitrinaHome .item {
    height: 450px;
    margin: 0px auto;
    position: relative;
    width: 100%;
}
.vitrinaHome .item img {
    display: block;
    height: auto;
    width: 1000px;
}


#vtnHome:hover .owl-buttons{

    opacity:1;
    transition: 0.3s;
}




.frente {
    position: relative;
    width: 1250px;
    margin: 0 auto;
}
.fondo {
    height: 450px;
    position: absolute;
    top: 0px;
    width: 100vw;
    z-index: -1;
}
.contenedorNav {
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 1250px;
    z-index: 555;
    top: 0;
    display: none;
}
.contenedorMainNav {
    background: #fff;
    height: auto;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    margin: 0px auto;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: -51px;
    left: 0px;
    border-bottom: solid 1px #f2f2f2;
}
.navVtn {
    width: 20%;
    /*width: 25%;*/
    height: 40px;
    float: left;
    cursor: pointer;
    background: rgba(255, 255, 255, 1);
    font-size: 14px;
    border-right: solid 1px #f2f2f2;
}
.navVtn:hover {
    color: #666;
    background: #eee;
}
.navVtnActive {
    background: #0072ce;
    color: #fff !important;
    -webkit-transition: top 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
.navVtnActive:hover {
    background: #0072ce!important;
    color: #fff !important;
    padding-bottom: 0px;
}
.progressBar {
    width: 100%;
    background: #0072ce;
    display: none;
}
.slide-progress {
    width: 0;
    max-width: 100%;
    height: 6px;
    background: rgba(246, 247, 249, 0.58)
}
.bar {
    width: 0%;
    max-width: 100%;
    height: 4px;
    background: #fff;
}
.barMobile {
    width: 0%;
    /*background: #0072ce;*/
    background: #0072ce; /* Old browsers */
    background: -moz-linear-gradient(left, #0072ce 0%, #dd0021 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #0072ce 0%,#dd0021 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #0072ce 0%,#dd0021 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0072ce', endColorstr='#dd0021',GradientType=1 ); /* IE6-9 */
    border-radius: 0 3px 3px 0;
}
.bar, .barMobile {
    max-width: 100%;
    height: 4px;
}
.contenedorTxtNavVtn {
    font-size: 13px;
    height: 36px;
    padding: 11px 17px;
    position: absolute;
    top: 4px;
    width: 230px;
}
.contenedorTxtNavVtn .tituloTab{
    display: block;
    font-size: 15px;
    text-align: left;
}
#owl-demo .item img {
    display: block;
    width: 100%;
    height: auto;
}
.progressBarMobile {
    width: 100%;
    background: #ccc;
    /*display: none;*/
}


/* -- MediaQuery -- */
@media (max-width: 1000px) {
    .contenedorMainNav {width: 1000px}
    #vtnHome {
        height: auto;
        width: 100%;
    }
    .owl-carousel .owl-item img {
        height: 350px;
    }
}


@media (max-width: 768px) {
    .contenedorMainNav { width: 768px;}
    .progressBarMobile { display: block;}
    .owl-buttons { display: none;}
    .contenedorNav { display: none;}
    #owl-demo .item {
        width: 100%;
        height:auto;
        margin: 0;
    }
    #owl-demo .item img {
        width: 100%;
    }
    .vitrinaHome .item {
        width: 100%;
    }
    .vitrinaHome .item img {
        width: 100%;
    }
    .frente {
        width: 100%;
    }
    .vitrinaHomeContenedor {
        width: 100%;
    }
    .owl-theme .owl-controls .owl-pagination {
        display: block;
        width: 156px;
        left: 40vw;
        bottom: -30px;
    }
    .owl-buttons {
        display: none;
    }
    .progressBarMobile {
        display: block;
    }
}


@media screen and (max-width: 500px) {
    .contenedorMainNav { width: 500px;}
    .contenedorNav {
        display: none;
    }
    .progressBarMobile {
        display: block;
    }
    .owl-buttons {
        display: none;
    }
    .owl-theme .owl-controls .owl-pagination {
        display: block;
        width: 170px;
        left: 28vw;
        top: inherit;
        bottom: -30px;
    }
    .contenedorNav{display:none;}
    #owl-demo .item {
        width: 100%;
        height:auto;
        margin: 0;
    }
    #owl-demo .item img {
        width: 100%;
    }
    .vitrinaHome .item {
        width: 100%;
    }
    .vitrinaHome .item img {
        width: 100% !important;
    }
    .frente {
        width: 100%;
    }
    .fondo {
        display: none;
    }
    .vitrinaHomeContenedor {
        width: 100%;
    }
}


@media screen and (max-width: 420px) {
    .contenedorMainNav { width: 420px;}
}


@media screen and (max-width: 350px) {
    .contenedorMainNav { width: 350px;}
}


/* seccion recomendados */
.home2019 .recomendado { width: 100%; height: auto; position: relative; display: block; border-bottom: solid 1px #fff; margin: 7px 0; border-radius: 8px; overflow: hidden;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    transition: All 0.3s ease;
}
.home2019 .recomendado .producto { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 290px; padding: 15px; color: #fff; }
.home2019 .recomendado .producto.gris { color: #666;}
.home2019 .recomendado .producto.blanco { color: #fff;}
.home2019 .recomendado .producto.negro { color: #333;}
.home2019 .recomendado .producto.azul { color: #0072ce;}
.home2019 .recomendado .producto.rojo { color: #dd0021;}
.home2019 .recomendado .producto.amarillo { color: #fbd600;}
.home2019 .recomendado .producto .brand { font-size: 11px; text-transform: uppercase; font-weight: 700; line-height: 100%;}
.home2019 .recomendado .producto h3 { width: 100%; font-size: 15px; font-weight: 700; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; margin: 0;}
.home2019 .recomendado .producto .tool { width: 100%; height: 25px; position: relative; display: block; background-repeat: no-repeat; margin: 5px 0;}
.home2019 .recomendado .producto .tool.cmr { background-image: url(/static/MEJORAS/2019/svg/cmr.svg);}
.home2019 .recomendado .producto .tool.combo { background-image: url(/static/MEJORAS/2019/svg/combo.svg);}
.home2019 .recomendado .producto .tool.masbajo { background-image: url(/static/MEJORAS/2019/svg/amb.svg);}
.home2019 .recomendado .producto .tool.internet { background-image: url(/static/MEJORAS/2019/svg/internet.svg);}
.home2019 .recomendado .producto .lowPrice { font-size: 20px; font-weight: 900; padding: 5px; background-color: #dd0021; width: max-content; color: #fff; margin-top: 5px; text-shadow: none;}
.home2019 .recomendado .producto .lowPrice span { display: inline-block;}
.home2019 .recomendado .producto .lowPrice .signo { font-size: 14px; font-weight: 400; margin-right: 3px;}
.home2019 .recomendado .producto .lowPrice .formato { font-size: 14px; font-weight: 400; margin-left: 3px;}
.home2019 .recomendado .producto .price { font-size: 14px; font-weight: 700; margin-top: 6px;}
.home2019 .recomendado .producto .price span { display: inline-block;}
.home2019 .recomendado .producto .price .signo { font-size: 13px; font-weight: 400; margin-right: 3px;}
.home2019 .recomendado .producto .price .formato { font-size: 13px; font-weight: 400; margin-left: 3px;}
.home2019 .recomendado:hover { border-bottom: solid 1px #dd0021;}


/* seccion categorias */
.home2019 .categoria {width: 100%; height: auto; position: relative; display: block; border-bottom: solid 1px #fff; margin: 7px 0;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    transition: All 0.3s ease;
}
.home2019 .categoria .texto { position: absolute; width: 90%; max-width: 290px; padding: 15px; color: #333; min-height: 90px; background-color: rgba(255,255,255,0.7);}
.home2019 .categoria .texto h2 { font-size: 18px; font-weight: normal; margin: 0; padding: 0;}
.home2019 .categoria .texto h2::before { display: none;}
.home2019 .categoria .texto h2::after { display: none;}
.home2019 .categoria .texto.tl { top: 2vh; left: 0; text-align: left;}
.home2019 .categoria .texto.tr { top: 2vh; right: 0; text-align: right;}
.home2019 .categoria .texto.bl { bottom: 2vh; left: 0; text-align: left;}
.home2019 .categoria .texto.br { bottom: 2vh; right: 0; text-align: right;}
.home2019 .categoria:hover { border-bottom: solid 1px #0072ce;}


/* seccion catalogos y especiales */
.home2019 .bnn-desta { width: 100%; height: auto; position: relative; display: block; border-bottom: solid 1px #fff; margin: 7px 0;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    transition: All 0.3s ease;
}
.home2019 .bnn-desta:hover { border-bottom: solid 1px #0072ce;}


/* seccion productos */
.rowCustom, .scrolling-wrapper {
    min-height: 1px;
    position: relative;
}
.scrolling-wrapper {
    display: flex;
    overflow-x: auto;
    margin-left: 0;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.imgResponsive, .rowCustom, .scrolling-wrapper {
    max-height: 100%;
    width: 100%;
}
.home2019 .carrusel { width: 16.65%; float: left;}
.home2019 .destaHome { background-color: #fff;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
transition: All 0.3s ease;
}
.home2019 .destaHome a:hover { text-decoration: none;}
.home2019 .destaHome .cajaProducto img { padding: 10px;}
.home2019 .destaHome .producto { padding: 20px; margin-top: 0 !important; border-bottom: solid 1px #fff; min-height: 244px; position: relative;}
.home2019 .destaHome .producto .iconos { height: 25px; width: 100%; position: relative; margin-bottom: 10px;}
.home2019 .destaHome .producto .marca { font-weight: 700; color: #666;}
.home2019 .destaHome .producto .nombre { font-size: 15px; white-space: nowrap; color: #333333; text-overflow: ellipsis; font-weight: 500; overflow: hidden;}
.home2019 .destaHome .producto .cajaPrecio { margin: 10px 0 20px;}
.home2019 .destaHome .producto .cajaPrecio .precio { font-size: 24px; font-weight: 600; color: #333333;}
.home2019 .destaHome .producto .cajaPrecio .precio .signo { margin-right: 3px; font-size: 14px; font-weight: 400;}
.home2019 .destaHome .producto .cajaPrecio .precio .formato { margin-left: 3px; font-size: 14px; font-weight: 400;}
.home2019 .destaHome .producto .cajaPrecio .antes { font-size: 15px; font-weight: 600; color: #333333;}
.home2019 .destaHome .producto .cajaPrecio .antes .signo { margin-right: 3px; font-size: 12px; font-weight: 400;}
.home2019 .destaHome .producto .cajaPrecio .antes .formato { margin-left: 3px; font-size: 12px; font-weight: 400;}
.home2019 .destaHome .producto .cajaPrecio .sku { display: block; font-size: 13px; color: #333;}
.home2019 .destaHome .producto .btnProducto { text-align: center; line-height: 36px; height: 36px; width: calc(100% - 40px); background-color: #666; color: #fff; font-weight: normal; position: absolute; bottom: 20px;}
.home2019 .destaHome a:hover .producto { border-bottom: solid 1px #dd0021;}
.home2019 .destaHome a:hover .btnProducto { background-color: #dd0021;}

.home2019 .destaHome .producto .iconos .icco { width: 120px; height: 25px; position: relative; display: block;}
.home2019 .destaHome .producto .iconos .icco.ico-cmr { background-image: url(/static/Home-2019/svg/cmr.svg);}
.home2019 .destaHome .producto .iconos .icco.ico-internet { background-image: url(/static/Home-2019/svg/internet.svg);}


.home2019 .cuadro { overflow: hidden;}


@media screen and (max-width: 460px) {}


/* seccion contenido */
.home2019 .cont-card {
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    transition: All 0.3s ease;
}
.home2019 .cont-card a { text-decoration: none; color: #333;}
.home2019 .cont-card .info { padding: 20px; background-color: #fff; min-height: 140px; border-bottom: solid 1px #fff;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    transition: All 0.3s ease;
}
.home2019 .cont-card .info h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; max-height: 34px; overflow: hidden;}
.home2019 .cont-card .info p { max-height: 34px; overflow: hidden;}
.home2019 .cont-card .info .lnk { font-size: 12px; font-weight: 700; position: absolute; bottom: 20px;}
.home2019 .cont-card:hover .info { border-bottom: solid 1px #0072ce;}
.home2019 .cont-card a:hover .lnk { color: #0072ce;}


/* seccion de ayuda */
.home2019 .sector .ayuda {
    border: solid 1px #eee;
    width: 12.5%;
    float: left;
    padding: 10px 5px;
    position: relative;
    display: block;
    border-top: none;
    border-bottom-color: #f5f5f5;
    background-color: #f5f5f5;
    -webkit-transition:All 0.3s ease;
       -moz-transition:All 0.3s ease;
         -o-transition:All 0.3s ease;
            transition:All 0.3s ease;
}
.home2019 .sector .ayuda a { text-decoration: none;}
.home2019 .sector .ayuda .icono { width: 40px; height: 40px; margin: 5px auto;}
.home2019 .sector .ayuda .texto h3 {
    font-size: 13px; text-align: center; font-family: 'Lato', sans-serif; font-weight: bold; text-transform: uppercase; margin: 5px 0; color: #666; margin: 5px 0;
}
.home2019 .sector .ayuda .texto p { text-align: center; color: #666; font-size: 12px; line-height: 120%;}
.home2019 .sector .ayuda:hover { border-bottom: solid 1px #0072ce;}
.home2019 .sector .ayuda a:hover .texto h3 { color: #0072ce;}

/* seccion de seo */
.home2019 .seo { text-align: center;}
.home2019 .seo a { text-decoration: underline;}


/* ///////////////////// MEDIAS ///////////////////// */
@media (max-width: 640px){
    .home2019 .sector h2 { font-size: 24px;}

    .home2019 .recomendado .producto {
        position: relative;
        padding: 10px;
        background-color: #fff;
        border-top: solid 1px #eee;
        margin-top: 0;
        color: #666;
        min-height: 166px;
    }
    .home2019 .recomendado .producto .brand { font-size: 11px;height: 25px;}
    .home2019 .recomendado .producto h3 { font-size: 13px;}
    .home2019 .recomendado .producto .tool { height: 20px;}
    .home2019 .recomendado .producto .lowPrice { font-size: 17px;}
    .home2019 .recomendado .producto .price { font-size: 13px;}
    .home2019 .recomendado .producto .price .signo { font-size: 12px;}
    .home2019 .recomendado .producto.desta-xs { max-width: 100%;}
    .home2019 .carrusel { width: 60%;}


    .home2019 .categoria .texto h2 { font-size: 16px; font-weight: normal; margin: 0;}
    .home2019 .categoria .texto p { display: none;}
    .home2019 .categoria .texto {
        padding: 5px 10px;
        top: inherit !important;
        bottom: inherit !important;
        left: inherit !important;
        right: inherit !important;
        position: relative;
        background-color: #fff;
        width: 100%;
        text-align: left !important;
        min-height: 70px;
        overflow: hidden;
    }

    .home2019 .cont-card .info { padding: 10px;}
    .home2019 .cont-card .info h3 { font-size: 14px;}
    
    .home2019 .recomendado .producto.blanco {
        color: #333;
    }
}