/* 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;}
.mB-Small {margin-bottom: 0 !important;}

/* banner header */
.caja-header {border-bottom: solid 2px #666;}
.caja-header .bannerHeader {width: 100%; max-width: 1250px; 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: 540px;}
.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/MEJORAS/2020/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/MEJORAS/2020/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: 499px; 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: 499px; 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%; 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:-moz-linear-gradient(left,#0072ce 0%,#dd0021 100%);background:-webkit-linear-gradient(left,#0072ce 0%,#dd0021 100%);background:linear-gradient(to right,#0072ce 0%,#dd0021 100%);filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#0072ce',endColorstr='#dd0021',GradientType=1);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;}

/* -- 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: 260px; left: 30vw; 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: 260px; left: 10vw; top: inherit; bottom: -40px;}
    .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 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: 640px) {
    .home2019 .carrusel {width: 60%; min-width: 200px;}
}