@charset "utf-8";
/* CSS Document */

* {	margin:0;
	padding:0;
	border:0;}

body {font-family: 'Montserrat', sans-serif;
	  font-size:16px; color:#000; background: #DDD;}

a{text-decoration: none;}
a:link{color:#333;}
a:visited{color:#333;}
a:hover{color:crimson;}
li{list-style-type: none;}
#caja{
    position: relative;
    width: 100%;
    margin:0 auto;
}

.encabezado{
    position: relative;
    width: 100%;
    height: 100px;
    padding:20px 40px;
    box-sizing: border-box;
    background: #FFF;
    border-bottom: solid 1px #333;
}
.encabezado p.tit{font-size: 30px;}

.encabezado .contacto{width: 33%;float:left; text-align:right; padding-top:20px; box-sizing: border-box;}

.encabezado .contacto a.home{display: none;}
.encabezado .nombre{width: 33%;float:left;}
.encabezado .medio{width:33%; float:left; text-align: center; padding-top:15px; box-sizing: border-box;}
 ul.movil, ul.movilinicio{display:none;}
#toggle-menu{display:none;}
#ws{display:none;}
.txt18{font-size:18px;}
.foto{
    position: relative;
    width: 100%;
    background: #FFF;
    padding:0px;
}

.foto img{width: 100%;}
.fotoinicio{display:none;}
.menu{
    position:relative;
    width: 100%;
    height: 60px;
    background: #333;
    color:#FFF;
    padding:0 20px 0 40px;box-sizing: border-box;
}
.menu.seccion{padding-left:20px;}
ul.navegacion{
    width:100%; 
    display:flex;
    justify-content:space-between;
    height:60px;
    list-style:none;
    padding:0;
}

ul.navegacion li{width: 8%;  padding-top:10px; box-sizing: border-box; display:flex; justify-content:center; align-items: center; position:relative; flex-wrap:wrap;}
ul.navegacion li.larga{width:16%;}
ul.navegacion li.larga.cpad{padding-left: 20px;}
ul.navegacion li.media{width:12%;}
ul.navegacion li:hover{background: #999;}
ul.navegacion li a{width:100%; font-size: 18px; /*padding-left:10px;*/padding-bottom: 10px; box-sizing: border-box; cursor:pointer; text-align: center; }
ul.navegacion li a:link{color:#FFF;}
ul.navegacion li a:visited{color:#FFF;}
ul.navegacion li.activa{background-image:url("imagenes/borde5.jpg");}
ul.navegacion li ul.sub{ display:none; width:100%;  z-index:100; position:relative}
ul.navegacion li ul.sub li{width: 100%; background:#64626A; box-sizing: border-box; padding:10px 5px 5px 10px;justify-content: flex-start; border-top:1px solid #FFF; }
ul.navegacion li ul.sub li a{padding-left:0px;font-size:16px;padding-bottom: 0;}
ul.navegacion li ul.sub li:hover{background:#777; }
ul.navegacion li:hover ul.sub{display:block;}

.contenido{
    position: relative;
    width: 100%;
    background: #FFF;
    padding:10px 40px 40px 40px;
    box-sizing: border-box;
    height:auto;    
}
.contenido.compras{padding:40px 40px 40px 40px; display:flex;justify-content: space-around;}
.comprar{width: 30%; height: auto; border:solid 2px #333; padding:10px; box-sizing:border-box; margin-bottom:100px; }
.comprar .logo{width:30%; margin:0 auto 20px auto;}
.comprar .logo.auto{width:40%; margin:0 auto 20px auto;}
.comprar .logo img{width: 100%;}
.comprar p.titcomprar{ font-size:18px; text-align: center; font-weight:bold;}
.comprar p.altofila{line-height: 30px;}
p.seccion{display:none;}
.promociones{width: 100%; /*background: #FFF;*/ overflow: hidden; padding:10px 0  10px 0; box-sizing:border-box; margin-bottom:10px; border-bottom: dotted 1px #999; font-size:24px;}
.producto{width: 100%; /*background: #FFF;*/ overflow: hidden; padding:20px 0 20px; box-sizing:border-box; margin-bottom:10px; border-bottom: dotted 1px #999;}
.fotoproducto{width:40%; float:left;text-align:right; }
.fotoproducto img{width:100%;border:solid 1px #333; box-sizing: border-box;}
.fotoproducto a.ver{font-size:14px; width: 100%; }

.txtproducto{width:60%; float:left; padding-left:40px; box-sizing: border-box;}
.txtproducto p.nombre{font-size:20px; }
.txtproducto p.descripcion{font-size:16px;margin:5px 0 25px 0;}
.txtproducto p.precio{font-size:16px; line-height: 24px; margin:5px 0 10px 0;}
.txtproducto p.preciomovil{display: none;}
p.nombremovil{display:none;} 
.slider-container {display:none;}

.fotodespiece{width: 100%;}
.fotodespiece img{width: 100%;border:solid 1px #333; box-sizing: border-box;}
p.nombredespiece{font-size:20px; width:100%; background: #FFF; padding:10px 0; box-sizing: border-box; }

#modal{
    position:absolute;
    width: 100%;
    height: 100%;
    padding:20px;
    box-sizing: border-box;
    background:#FFF;/*rgba(0,0,0,.5);*/
    z-index: 10;
    
}
#modal.ocultar{display:none;}
#modal.mostrar{display:block;}

#modal p.titulo{ font-size:24px; text-align: center; margin-bottom:20px; }
#modal .fotomodal{width:80%; margin:0 auto;}
#modal .fotomodal img{width:100%;border:solid 1px #333; box-sizing: border-box;}

#minis{width:80%; margin:10px auto; display:flex; justify-content: space-between;}
.mini{width: 19%; display:flex; align-items: center;}
.mini img{width: 100%;border:solid 1px #333; box-sizing: border-box;}

#modal .filacerrar{width:100%; background: #0FF; }

a.cerrar{display:block; position:relative;float:right; width: 40px; height: 40px; border-radius: 50%; border:solid 1px #333; color:crimson;padding:0 8px; box-sizing: border-box; font-size:30px;margin-right: 20px; z-index: 50; cursor:pointer;}

/*LOGIN ADMIN-----------------------------------------------------------------*/
#entraradmin{
	width:400px; margin:0 auto;}
#entraradmin table{border:none;  margin:0 auto;}
#entraradmin table td{border:none; }
#entraradmin p.tit{font-size: 24px;}
#entraradmin input{
	width:100%;
	height:25px;
	padding:1px 5px;
	font-size:14px;
    box-sizing: border-box;
	}
	
#entraradmin input.btn{
    width:100%;
	height:27px;
	padding:1px 5px;
	text-align:center;
	background:#fff;
    border:none;
	cursor:pointer;
    font-size:16px;
    box-sizing: border-box;
    color:#333;
	}


/*CELULAR ---------------------------------------------------------------------------*/
@media(max-width:767px){
    body {background: #FFF;}
    #caja{width: 100%;}
   
    .encabezado{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:5px 0 0 0;
    height:73px;
    box-sizing: border-box;
    z-index: 50;
    }
    
    .encabezado .nombre{width: 100%; margin-left:10px; float:left;}
    .encabezado .nombre.ini{padding:5px 0 5px 0; box-sizing: border-box;}
     .encabezado .medio{display:none;}
    .encabezado .contacto{display:none;}
  .encabezado p.subtitulo{display:none; font-size: 18px;}
    
    p.seccion{width: 100%;display:block;padding:0 0 0 0; box-sizing: border-box; font-size:18px;}
    
    .menu{height:auto;  padding:0; overflow: hidden;top:73px;background:#555; }
    .menu a {width: 100%; height:20px;float:left; padding:15px 10px 35px 10px;box-sizing: border-box; display:block; border-bottom:1px solid #FFF;font-size:18px;}
    .menu a.inicio{display: none;}
    /*.menu a.ultima {border-bottom:1px solid #333;}*/
    .menu.seccion{display:none;}
    
    .contenido.compras{padding:40px 40px 40px 40px; display:flex;justify-content: space-around; flex-wrap: wrap;}
.comprar{width: 100%; height: auto; border:solid 2px #333; padding:10px; box-sizing:border-box; margin-bottom:20px; }
.comprar .logo{width:30%; margin:0 auto 20px auto;}
.comprar .logo img{width: 100%;}
.comprar p.titcomprar{ font-size:18px; text-align: center; font-weight:bold;}
.comprar p.altofila{line-height: 30px;}
    /*.encabezado ul.movil{float:none;width:100%; padding:5px 0 0 0; background:#ccc; font-size:16px;display:none; position: relative; z-index: 90;border-top: 1px solid #fff;margin-top:10px;}
    
    .encabezado ul.movil li{float:none; padding:10px 20px 10px 10px; width:100%; border-bottom: 1px solid #fff; margin-bottom:5px; box-sizing: border-box; color:#333; text-align: right;}*/
    
    .encabezado ul.movil{float:left; margin-top: 9px;width:100%; font-size:18px; display:none; z-index: 60;border-top: 1px solid #fff;border-bottom: 1px solid #fff; box-sizing: border-box;color:#FFF;}
    .encabezado ul.movil li{padding:15px 10px 15px 10px; width:100%; border-bottom: 1px solid #fff;box-sizing: border-box; color:#333; text-align: left;background:#555;  }
    .encabezado ul.movil li a{width:100%;color:#FFF;display:block; text-align:right;padding-right: 10px;box-sizing: border-box; }
    .encabezado ul.movil li a:hover{background:#ccc;color:#333;}
    .encabezado ul.movil li ul.sub { display:none; width:100%; margin:20px 0 0 0; z-index:100; /*position:relative*/}
    .encabezado ul.movil li ul.sub li{width: 100%; background:#64626A; box-sizing: border-box; padding:10px;justify-content:flex-end; /*border-top:1px solid #FFF;*/ }
    .encabezado ul.movil li ul.sub li a{padding-left:0px;font-size:18px;padding-bottom: 0;}
    .encabezado ul.movil li ul.sub li:hover{background:#777; }
    .encabezado ul.movil li:hover ul.sub{display:block;}
    
    .menu ul.movilinicio{float:left; margin-top: 0;width:100%; font-size:18px; display:block; border-top: 1px solid #FFF;border-bottom: 1px solid #fff; box-sizing:border-box;color:#FFF; }
    .menu ul.movilinicio li{padding:10px 0 10px 0; width:100%; float:left;/*border-bottom: 1px solid #fff;*/box-sizing: border-box; color:#333; text-align:left;background:#555;  }
    .menu ul.movilinicio li a{width:100%;color:#FFF;display:block; text-align:right;padding-right:10px;box-sizing: border-box; }
    .menu ul.movilinicio li a:hover{background:#ccc;color:#333;}
    .menu ul.movilinicio li ul.subini { display:none; width:100%; height:auto; margin:0 0 0 0; z-index:100;}
    .menu ul.movilinicio li ul.subini li {width: 100%; background:#64626A; box-sizing: border-box; padding:15px 0 ; display:block; float:left;/*display:flex; flex-wrap: wrap; justify-content:flex-end;align-items: center; */}
    .menu ul.movilinicio li ul.subini li a{width:100%; font-size:18px; display:block;}
    .menu ul.movilinicio li ul.subini li:hover{background:#777; }
    .menu ul.movilinicio li:hover ul.subini{display:block;}
    
    
    ul.navegacion{
    width:100%; 
    display:none;
    flex-wrap: wrap;
    height:auto;
    list-style:none;
    padding:0;
    margin:0;
    }
    
   /* ul.navegacion li{width: 100%;  padding:10px 0 20px 0; border-top: #FFF solid 1px; box-sizing: border-box; display:flex; justify-content: flex-start; align-items:center; position:relative; flex-wrap:wrap; }
ul.navegacion li.larga{width:100%;}
ul.navegacion li.larga.cpad{padding-left: 0;}
ul.navegacion li.media{width:100%;  }
ul.navegacion li:hover{background: #999;}*/
/*ul.navegacion li a{width:100%; font-size: 18px; display:flex; align-items: center;*/ /*padding-left:10px;*//*padding-bottom: 0; box-sizing: border-box; cursor:pointer; justify-content: flex-start;border:none;}
ul.navegacion li a:link{color:#FFF;}
ul.navegacion li a:visited{color:#FFF;}*/
    

    
    
    
    
    
    
    /*ul.navegacion{margin-top: 9px;width:100%; font-size:18px;display:flex; flex-wrap: wrap; z-index: 60; box-sizing: border-box;color:#FFF; background: #C5D519;height:auto;}
    
    ul.navegacion li, ul.navegacion li.larga, ul.navegacion li.media{padding:10px; width:100%; box-sizing: border-box; color:#333; background:#555; display:flex; justify-content: center; align-items: center;position:relative;   }
    ul.navegacion li.larga.cpad{padding:10px;}
    ul.navegacion li a{width:100%;color:#FFF;padding-bottom: 0; background: #B1E91E; height: auto;}
    
    ul.navegacion li a:hover{background:#ccc;color:#333;}
    
    ul.navegacion li ul.sub{ display:none; width:100%;  z-index:100; position:relative}
ul.navegacion li ul.sub li{width: 100%; background:#64626A; box-sizing: border-box; padding:10px 5px 5px 10px;justify-content: flex-start; border-top:1px solid #FFF; }
ul.navegacion li ul.sub li a{padding-left:0px;font-size:16px;padding-bottom: 0;}
ul.navegacion li ul.sub li:hover{background:#777; }
ul.navegacion li:hover ul.sub{display:block;}*/
    
    #toggle-menu{cursor:pointer; position:absolute; top:15px;right:20px;display:block; z-index:100; width: 30px; height:30px;}
    #toggle-menu img{width:100%;}
    
    #ws{
         display:block;
        width:50px;
        height:50px;
        color:#fff;
        position: fixed;
        right:20px;
        bottom:50px;
        border-radius:50%;  
        line-height:80px;
        text-align:center;
        z-index:999;
        
        /*cursor:pointer; position:absolute; top:15px;right:80px;display:block; z-index:100; width: 35px; height:35px;*/}
    #ws img{width:100%;}
    
    .foto{display:none;}
    .fotoinicio{display:block;}
    .fotoinicio img{width: 100%;}
   
    .contenido{padding:10px;top:73px; }
    .contenido .info{font-size:18px;}
    
    
    
    .producto{width: 100%; /*background: #FFF;*/ overflow: hidden; padding:10px 0; box-sizing:border-box; margin-bottom:10px; border-bottom: dotted 1px #999;}
.fotoproducto{display:none; }

    #fotos{
    display:block;
    width: auto;
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 0;/*10px;*/
    /*background: #F0F0F0;*/
    white-space: nowrap;
    }
    
.fotomovil{
    width: 100%;
    height:auto;
    margin: 0 10px 0 0;
    padding: 0;
    display: inline-block;
    text-align: center;}
   
.fotomovil img {width:100%; border:solid 1px #333; box-sizing: border-box;}
.txtproducto{width:100%; float:left; padding-left:10px; box-sizing: border-box;}
.txtproducto p.nombre{display:none;}
.txtproducto p.descripcion{font-size:16px;margin:5px 0 5px 0;}
.txtproducto p.precio{display:none;}
.txtproducto p.preciomovil{display:block;font-size:16px;margin:5px 0 10px 0;line-height: 24px;}
a.ver{display: none;}    
p.nombremovil{display:block; margin-bottom:5px;font-size:20px;}    
  
/*PASE DE FOTOS -----------------------------------------------------------------------------------*/ 
 .slider-container {
  
  height: auto;
 /*display:block;*/
  display: inline-flex;
  overflow: hidden;
  transform: translateX(0);
  transition: transform 0.3s ease-out;
  cursor: grab;
}

.slide {
  max-height: 100vh;
  width:100vw;/*%;*/
  display: inline-block;/*flex;*/
  /*flex-direction: column;
  align-items: center;
  justify-content: center;*/
  padding: 0;/*1rem;*/
 /* user-select: none;*/
  text-align:left;
 }

.slide img {
 max-width: 93%; border:solid 1px #333; 
  /*max-height: 60%;*/
  transition:transform 0.3s ease-in-out;
}

.grabbing {
  cursor: grabbing;
}

.grabbing .slide img {
  transform: scale(0.9);
}
   #circulos{width:100%; padding:5px; display:flex;  align-items:center; box-sizing: border-box; justify-content: center;}
    .punto{width:10px; height:10px; border-radius:50%;margin:0 5px; background:#ccc;}
    .punto.rojo{background:#F00;}
}